<?xml version='1.0' encoding='UTF-8'?><rss xmlns:atom="http://www.w3.org/2005/Atom" xmlns:openSearch="http://a9.com/-/spec/opensearchrss/1.0/" xmlns:blogger="http://schemas.google.com/blogger/2008" xmlns:georss="http://www.georss.org/georss" xmlns:gd="http://schemas.google.com/g/2005" xmlns:thr="http://purl.org/syndication/thread/1.0" version="2.0"><channel><atom:id>tag:blogger.com,1999:blog-1074964965522467583</atom:id><lastBuildDate>Mon, 27 Apr 2026 11:10:02 +0000</lastBuildDate><category>Trending</category><category>PWD Working</category><category>Roads</category><category>Software</category><category>Bridge</category><category>Building</category><category>Design calculations</category><category>Construction Procedure</category><category>Estimate Preparation</category><category>Drawings</category><category>Earth retaining structures</category><category>Programming</category><category>Tender</category><category>Survey</category><category>Guidelines Books Type plan GR&#39;s Circulars</category><category>Formulas</category><category>RTI</category><category>Structural Analysis</category><category>SSR</category><title>Useful for Civil Engineers of P.W.D. , Yogendra Borse</title><description>Day to Day working Calculations and Procedures and Methods in Public Works Department, Problems and Their solutions via Discussions or from Theory books.</description><link>https://www.yogipwd.com/</link><managingEditor>noreply@blogger.com (Yogendra)</managingEditor><generator>Blogger</generator><openSearch:totalResults>360</openSearch:totalResults><openSearch:startIndex>1</openSearch:startIndex><openSearch:itemsPerPage>25</openSearch:itemsPerPage><item><guid isPermaLink="false">tag:blogger.com,1999:blog-1074964965522467583.post-6802879958856377837</guid><pubDate>Sun, 26 Apr 2026 01:31:02 +0000</pubDate><atom:updated>2026-04-26T15:14:58.171+05:30</atom:updated><category domain="http://www.blogger.com/atom/ns#">PWD Working</category><category domain="http://www.blogger.com/atom/ns#">Tender</category><title>DTP checklist generator tool</title><description>&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;mr&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;PWD Expert DTP Checklist Manager&lt;/title&gt;
    &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js&quot;&gt;&lt;/script&gt;
    &lt;style&gt;
        :root { --primary: #1e3a8a; --accent: #2563eb; --bg: #f1f5f9; --border: #cbd5e1; }
        body { font-family: &quot;Segoe UI&quot;, Arial, sans-serif; background: var(--bg); margin: 0; padding: 20px; color: #111; }
        .container { max-width: 1000px; margin: auto; background: #fff; padding: 25px; border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
        h2 { text-align: center; color: var(--primary); border-bottom: 3px solid var(--primary); padding-bottom: 10px; }
        
        .toolbar { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; background: #e2e8f0; padding: 12px; border-radius: 6px; align-items: center; }
        button { padding: 10px 16px; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; color: white; transition: 0.2s; }
        button:disabled { background: #94a3b8; cursor: not-allowed; }
        .btn-save { background: #16a34a; }
        .btn-load { background: #0ea5e9; }
        .btn-delete { background: #dc2626; }
        .btn-pdf { background: #7c3aed; }
        select { padding: 8px; border-radius: 4px; border: 1px solid var(--border); }

        .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 15px; }
        .full { grid-column: 1 / -1; }
        label { font-size: 0.85rem; font-weight: bold; display: block; margin-bottom: 4px; }
        input { width: 100%; padding: 8px; border: 1px solid var(--border); border-radius: 4px; box-sizing: border-box; }

        .section-title { background: var(--accent); color: #fff; padding: 8px; margin-top: 20px; border-radius: 4px; font-weight: bold; }
        .pol-status { margin-top: 10px; padding: 10px; border-radius: 4px; font-size: 14px; font-weight: bold; }
        .status-valid { background: #dcfce7; color: #166534; border: 1px solid #166534; }
        .status-invalid { background: #fee2e2; color: #991b1b; border: 1px solid #991b1b; }

        #pdf-content {
            position: absolute;
            left: -9999px;
            top: 0;
            width: 700px;
            padding: 40px;
            background: white;
            color: black;
            line-height: 1.5;
        }

        .pdf-table { width: 100%; border-collapse: collapse; table-layout: fixed; margin: 15px 0; }
        .pdf-table td, .pdf-table th { border: 1px solid black; padding: 8px; font-size: 13px; text-align: left; word-wrap: break-word; }
        .center { text-align: center !important; }
        .bold { font-weight: bold; }
        .sig-table { width: 100%; border: none; margin-top: 60px; }
        .sig-table td { border: none; text-align: center; vertical-align: bottom; width: 50%; }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;div class=&quot;container&quot;&gt;
    &lt;h2&gt;प्रारुप निविदा प्रपत्र (DTP) तपासणी सुची&lt;/h2&gt;
    
    &lt;div class=&quot;toolbar&quot;&gt;
        &lt;select id=&quot;projectList&quot;&gt;&lt;option value=&quot;&quot;&gt;प्रकल्प निवडा&lt;/option&gt;&lt;/select&gt;
        &lt;button onclick=&quot;loadSelected()&quot; class=&quot;btn-load&quot;&gt;लोड करा&lt;/button&gt;
        &lt;button onclick=&quot;saveProject()&quot; class=&quot;btn-save&quot;&gt;सेव्ह करा&lt;/button&gt;
        &lt;button onclick=&quot;deleteProject()&quot; class=&quot;btn-delete&quot;&gt;डिलीट&lt;/button&gt;
        &lt;button onclick=&quot;generatePDF()&quot; id=&quot;downloadBtn&quot; class=&quot;btn-pdf&quot;&gt;PDF जनरेट करा&lt;/button&gt;
    &lt;/div&gt;
  
  &lt;div class=&quot;toolbar&quot;&gt;
    &lt;button onclick=&quot;exportToJSON()&quot; style=&quot;background: #475569;&quot;&gt;Export (JSON)&lt;/button&gt;
    &lt;button onclick=&quot;importFromJSON()&quot; style=&quot;background: #64748b;&quot;&gt;Import (JSON)&lt;/button&gt;
&lt;/div&gt;

    &lt;form id=&quot;dtpForm&quot;&gt;
        &lt;div class=&quot;form-grid&quot;&gt;
            &lt;div class=&quot;full&quot;&gt;&lt;label&gt;कामाचे नांव&lt;/label&gt;&lt;input type=&quot;text&quot; id=&quot;workName&quot;&gt;&lt;/div&gt;
            &lt;div class=&quot;full&quot;&gt;&lt;label&gt;संदर्भ&lt;/label&gt;&lt;input type=&quot;text&quot; id=&quot;refText&quot;&gt;&lt;/div&gt;
            &lt;div&gt;&lt;label&gt;प्रादेशिक विभाग&lt;/label&gt;&lt;input type=&quot;text&quot; id=&quot;region&quot; value=&quot;नाशिक&quot;&gt;&lt;/div&gt;
            &lt;div&gt;&lt;label&gt;जावक क्र.&lt;/label&gt;&lt;input type=&quot;text&quot; id=&quot;tsNo&quot;&gt;&lt;/div&gt;
            &lt;div&gt;&lt;label&gt;दरसुची वर्ष&lt;/label&gt;&lt;input type=&quot;text&quot; id=&quot;dsYear&quot; placeholder=&quot;2025-26&quot;&gt;&lt;/div&gt;
        &lt;/div&gt;

        &lt;div class=&quot;section-title&quot;&gt;आर्थिक तपशील (Financial Details)&lt;/div&gt;
        &lt;div class=&quot;form-grid&quot; style=&quot;margin-top:10px;&quot;&gt;
            &lt;div&gt;&lt;label&gt;Civil Work (I)&lt;/label&gt;&lt;input type=&quot;number&quot; id=&quot;valCivil&quot; value=&quot;0&quot; oninput=&quot;calcTotals()&quot;&gt;&lt;/div&gt;
            &lt;div&gt;&lt;label&gt;Electrical (II)&lt;/label&gt;&lt;input type=&quot;number&quot; id=&quot;valElec&quot; value=&quot;0&quot; oninput=&quot;calcTotals()&quot;&gt;&lt;/div&gt;
            &lt;div&gt;&lt;label&gt;रॉयल्टी शुल्क&lt;/label&gt;&lt;input type=&quot;number&quot; id=&quot;valRoy&quot; value=&quot;0&quot; oninput=&quot;calcTotals()&quot;&gt;&lt;/div&gt;
            &lt;div&gt;&lt;label&gt;प्रयोगशाळा शुल्क&lt;/label&gt;&lt;input type=&quot;number&quot; id=&quot;valLab&quot; value=&quot;0&quot; oninput=&quot;calcTotals()&quot;&gt;&lt;/div&gt;
        &lt;/div&gt;

        &lt;div class=&quot;section-title&quot;&gt;P.O.L. Component (%)&lt;/div&gt;
        &lt;div class=&quot;form-grid&quot; style=&quot;margin-top:10px;&quot;&gt;
            &lt;div&gt;&lt;label&gt;Labour (%)&lt;/label&gt;&lt;input type=&quot;number&quot; id=&quot;polLab&quot; value=&quot;0&quot; oninput=&quot;validatePOL()&quot;&gt;&lt;/div&gt;
            &lt;div&gt;&lt;label&gt;Material (%)&lt;/label&gt;&lt;input type=&quot;number&quot; id=&quot;polMat&quot; value=&quot;0&quot; oninput=&quot;validatePOL()&quot;&gt;&lt;/div&gt;
            &lt;div&gt;&lt;label&gt;P.O.L (%)&lt;/label&gt;&lt;input type=&quot;number&quot; id=&quot;polFuel&quot; value=&quot;0&quot; oninput=&quot;validatePOL()&quot;&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div id=&quot;polMessage&quot; class=&quot;pol-status status-invalid&quot;&gt;
            P.O.L. एकूण: &lt;span id=&quot;currentTotal&quot;&gt;0&lt;/span&gt;% | &lt;span id=&quot;statusText&quot;&gt;त्रुटी: एकूण १००% आवश्यक!&lt;/span&gt;
        &lt;/div&gt;

        &lt;div class=&quot;section-title&quot;&gt;बांधकाम साहित्य दर (Basic Rates)&lt;/div&gt;
        &lt;div class=&quot;form-grid&quot; style=&quot;margin-top:10px;&quot;&gt;
            &lt;div&gt;&lt;label&gt;सिमेंट (MT)&lt;/label&gt;&lt;input type=&quot;number&quot; id=&quot;r_cement&quot;&gt;&lt;/div&gt;
            &lt;div&gt;&lt;label&gt;TMT Steel (MT)&lt;/label&gt;&lt;input type=&quot;number&quot; id=&quot;r_tmt&quot;&gt;&lt;/div&gt;
            &lt;div&gt;&lt;label&gt;Structural Steel (MT)&lt;/label&gt;&lt;input type=&quot;number&quot; id=&quot;r_struct&quot;&gt;&lt;/div&gt;
            &lt;div&gt;&lt;label&gt;डांबर 60/70 (MT)&lt;/label&gt;&lt;input type=&quot;number&quot; id=&quot;r_bit60&quot;&gt;&lt;/div&gt;
            &lt;div&gt;&lt;label&gt;डांबर 80/100 (MT)&lt;/label&gt;&lt;input type=&quot;number&quot; id=&quot;r_bit80&quot;&gt;&lt;/div&gt;
        &lt;/div&gt;
      
        &lt;div class=&quot;section-title&quot;&gt;बाबींच्या परिमाणाचा तपशिल (३०% तपासणी)&lt;/div&gt;
        &lt;div style=&quot;overflow-x: auto; margin-top:10px;&quot;&gt;
            &lt;table id=&quot;boqTable&quot; style=&quot;width: 100%; border-collapse: collapse;&quot;&gt;
                &lt;thead&gt;
                    &lt;tr style=&quot;background:#f2f2f2;&quot;&gt;
                        &lt;th&gt;बाबींची यादी&lt;/th&gt;
                        &lt;th&gt;एकूण परिमाण&lt;/th&gt;
                        &lt;th&gt;युनिट&lt;/th&gt;
                        &lt;th&gt;३०% परिमाण&lt;/th&gt;
                        &lt;th&gt;बाबींची किंमत (रु.)&lt;/th&gt;
                        &lt;th&gt;काढा&lt;/th&gt;
                    &lt;/tr&gt;
                &lt;/thead&gt;
                &lt;tbody&gt;
                    &lt;/tbody&gt;
            &lt;/table&gt;
            &lt;button type=&quot;button&quot; onclick=&quot;addRow()&quot; style=&quot;margin-top:10px; padding: 5px; color: black; background: #ddd; border-radius: 4px;&quot;&gt;+ अजून ओळ जोडा&lt;/button&gt;
        &lt;/div&gt;
    &lt;/form&gt;
&lt;/div&gt;

&lt;div id=&quot;pdf-content&quot;&gt;
    &lt;h3 class=&quot;center&quot; style=&quot;text-decoration: underline;&quot;&gt;प्रारुप निविदा प्रपत्र तपासणी सुची&lt;/h3&gt;
    &lt;div style=&quot;margin-top: 20px;&quot;&gt;
        &lt;p&gt;&lt;strong&gt;कामाचे नांव:&lt;/strong&gt; &lt;span id=&quot;p_workName&quot;&gt;&lt;/span&gt;&lt;/p&gt;
        &lt;p&gt;&lt;strong&gt;संदर्भ:&lt;/strong&gt; &lt;span id=&quot;p_refText&quot;&gt;&lt;/span&gt;&lt;/p&gt;
    &lt;/div&gt;
    &lt;p&gt;महोदय, सदर कामास मुख्य अभियंता, सा. बां. प्रादेशिक विभाग, &lt;span id=&quot;p_region&quot;&gt;&lt;/span&gt; यांनी त्यांचेकडील पत्र जा.क्र. &lt;span id=&quot;p_tsNo&quot;&gt;&lt;/span&gt; नुसार तांत्रिक मान्यता दिलेली आहे. सदर कामाचे अंदाजपत्रक हे सन &lt;span id=&quot;p_dsYear&quot;&gt;&lt;/span&gt; चे दरसुचीवर आधारीत आहे.&lt;/p&gt;

    &lt;table class=&quot;pdf-table&quot;&gt;
        &lt;tr class=&quot;bold&quot;&gt;&lt;td&gt;अ)&lt;/td&gt;&lt;td&gt;प्रारुप निविदा किंमत (Civil + Electrical)&lt;/td&gt;&lt;td id=&quot;p_tenderTotal&quot;&gt;&lt;/td&gt;&lt;/tr&gt;
        &lt;tr&gt;&lt;td&gt;ब)&lt;/td&gt;&lt;td&gt;रॉयल्टी + प्रयोगशाळा शुल्क&lt;/td&gt;&lt;td id=&quot;p_royLabTotal&quot;&gt;&lt;/td&gt;&lt;/tr&gt;
        &lt;tr class=&quot;bold&quot;&gt;&lt;td&gt;क)&lt;/td&gt;&lt;td&gt;मंजुर अंदाजपत्रकाप्रमाणे एकूण किंमत&lt;/td&gt;&lt;td id=&quot;p_grandTotal&quot;&gt;&lt;/td&gt;&lt;/tr&gt;
    &lt;/table&gt;

    &lt;p&gt;&lt;strong&gt;ड) P.O.L. Component:&lt;/strong&gt;&lt;/p&gt;
    &lt;table class=&quot;pdf-table&quot; style=&quot;width: 50%;&quot;&gt;
        &lt;tr&gt;&lt;td&gt;Labour&lt;/td&gt;&lt;td id=&quot;p_polLab&quot;&gt;&lt;/td&gt;&lt;/tr&gt;
        &lt;tr&gt;&lt;td&gt;Material&lt;/td&gt;&lt;td id=&quot;p_polMat&quot;&gt;&lt;/td&gt;&lt;/tr&gt;
        &lt;tr&gt;&lt;td&gt;P.O.L&lt;/td&gt;&lt;td id=&quot;p_polFuel&quot;&gt;&lt;/td&gt;&lt;/tr&gt;
    &lt;/table&gt;

    &lt;p&gt;&lt;strong&gt;ई) बांधकाम साहित्याचे दर:&lt;/strong&gt;&lt;/p&gt;
    &lt;table class=&quot;pdf-table&quot;&gt;
        &lt;thead&gt;&lt;tr&gt;&lt;th&gt;अ.क्र.&lt;/th&gt;&lt;th&gt;साहित्याचा तपशील&lt;/th&gt;&lt;th&gt;दर (प्रति मे. टन)&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;
        &lt;tbody&gt;
            &lt;tr&gt;&lt;td&gt;1&lt;/td&gt;&lt;td&gt;सिमेंट (Cement)&lt;/td&gt;&lt;td id=&quot;p_r_cement&quot;&gt;&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;2&lt;/td&gt;&lt;td&gt;TMT Steel&lt;/td&gt;&lt;td id=&quot;p_r_tmt&quot;&gt;&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;3&lt;/td&gt;&lt;td&gt;Structural Steel&lt;/td&gt;&lt;td id=&quot;p_r_struct&quot;&gt;&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;4&lt;/td&gt;&lt;td&gt;डांबर 60/70&lt;/td&gt;&lt;td id=&quot;p_r_bit60&quot;&gt;&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;5&lt;/td&gt;&lt;td&gt;डांबर 80/100&lt;/td&gt;&lt;td id=&quot;p_r_bit80&quot;&gt;&lt;/td&gt;&lt;/tr&gt;
        &lt;/tbody&gt;
    &lt;/table&gt;
  
    &lt;p&gt;&lt;strong&gt;बाबींच्या परिमाणाचा तपशिल (३०% तपासणी):&lt;/strong&gt;&lt;/p&gt;
    &lt;table class=&quot;pdf-table&quot;&gt;
        &lt;thead&gt;&lt;tr&gt;&lt;th&gt;अ.क्र.&lt;/th&gt;&lt;th&gt;बाबींची यादी&lt;/th&gt;&lt;th&gt;एकूण परिमाण&lt;/th&gt;&lt;th&gt;युनिट&lt;/th&gt;&lt;th&gt;३०%&lt;/th&gt;&lt;th&gt;किंमत (रु.)&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;
        &lt;tbody id=&quot;p_boq_rows&quot;&gt;&lt;/tbody&gt;
    &lt;/table&gt;
    &lt;table class=&quot;sig-table&quot;&gt;
        &lt;tr&gt;
            &lt;td&gt;&lt;br&gt;&lt;br&gt;____________________&lt;br&gt;&lt;strong&gt;शाखा अभियंता&lt;/strong&gt;&lt;/td&gt;
            &lt;td&gt;&lt;br&gt;&lt;br&gt;____________________&lt;br&gt;&lt;strong&gt;उप विभागीय अभियंता&lt;/strong&gt;&lt;/td&gt;
        &lt;/tr&gt;
    &lt;/table&gt;
&lt;/div&gt;

&lt;script&gt;
    let db;
    let currentId = null;

    const request = indexedDB.open(&quot;PWD_Checklist_DB&quot;, 1);
    request.onupgradeneeded = e =&gt; {
        db = e.target.result;
        db.createObjectStore(&quot;projects&quot;, { keyPath: &quot;id&quot;, autoIncrement: true });
    };
    request.onsuccess = e =&gt; { db = e.target.result; refreshList(); addRow(); };

    function validatePOL() {
        const l = parseFloat(document.getElementById(&#39;polLab&#39;).value) || 0;
        const m = parseFloat(document.getElementById(&#39;polMat&#39;).value) || 0;
        const p = parseFloat(document.getElementById(&#39;polFuel&#39;).value) || 0;
        const total = Math.round((l + m + p) * 100) / 100;
        
        document.getElementById(&#39;currentTotal&#39;).innerHTML = total;
        const msgBox = document.getElementById(&#39;polMessage&#39;);
        const statusText = document.getElementById(&#39;statusText&#39;);
        const btn = document.getElementById(&#39;downloadBtn&#39;);

        if (total === 100) {
            msgBox.className = &quot;pol-status status-valid&quot;;
            statusText.innerHTML = &quot;योग्य: एकूण १००% आहे.&quot;;
            btn.disabled = false;
        } else {
            msgBox.className = &quot;pol-status status-invalid&quot;;
            statusText.innerHTML = &quot;त्रुटी: एकूण १००% आवश्यक!&quot;;
            btn.disabled = true;
        }
    }

    function saveProject() {
        const boqData = [];
        document.querySelectorAll(&quot;#boqTable tbody tr&quot;).forEach(row =&gt; {
            const item = row.cells[0]?.querySelector(&quot;input&quot;)?.value || &quot;&quot;;
            const qty = parseFloat(row.cells[1]?.querySelector(&quot;input&quot;)?.value) || 0;
            const unit = row.cells[2]?.querySelector(&quot;input&quot;)?.value || &quot;&quot;;
            const rate = parseFloat(row.cells[4]?.querySelector(&quot;input&quot;)?.value) || 0;
            if (item.trim() !== &quot;&quot;) boqData.push({ item, qty, unit, rate });
        });

        const data = {
            workName: document.getElementById(&#39;workName&#39;).value,
            refText: document.getElementById(&#39;refText&#39;).value,
            region: document.getElementById(&#39;region&#39;).value,
            tsNo: document.getElementById(&#39;tsNo&#39;).value,
            dsYear: document.getElementById(&#39;dsYear&#39;).value,
            valCivil: document.getElementById(&#39;valCivil&#39;).value,
            valElec: document.getElementById(&#39;valElec&#39;).value,
            valRoy: document.getElementById(&#39;valRoy&#39;).value,
            valLab: document.getElementById(&#39;valLab&#39;).value,
            polLab: document.getElementById(&#39;polLab&#39;).value,
            polMat: document.getElementById(&#39;polMat&#39;).value,
            polFuel: document.getElementById(&#39;polFuel&#39;).value,
            r_cement: document.getElementById(&#39;r_cement&#39;).value,
            r_tmt: document.getElementById(&#39;r_tmt&#39;).value,
            r_struct: document.getElementById(&#39;r_struct&#39;).value,
            r_bit60: document.getElementById(&#39;r_bit60&#39;).value,
            r_bit80: document.getElementById(&#39;r_bit80&#39;).value,
            boq: boqData
        };

        const tx = db.transaction(&quot;projects&quot;, &quot;readwrite&quot;);
        const store = tx.objectStore(&quot;projects&quot;);
        if (currentId) data.id = currentId;
        
        const saveRequest = currentId ? store.put(data) : store.add(data);
        saveRequest.onsuccess = () =&gt; { alert(&quot;माहिती जतन केली!&quot;); refreshList(); };
    }

    function refreshList() {
        const list = document.getElementById(&#39;projectList&#39;);
        list.innerHTML = &#39;&lt;option value=&quot;&quot;&gt;निवडा...&lt;/option&gt;&#39;;
        db.transaction(&quot;projects&quot;).objectStore(&quot;projects&quot;).getAll().onsuccess = e =&gt; {
            e.target.result.forEach(p =&gt; {
                let opt = document.createElement(&quot;option&quot;);
                opt.value = p.id;
                opt.text = p.workName.substring(0, 40) + &quot;...&quot;;
                list.add(opt);
            });
        };
    }

    function loadSelected() {
        const id = parseInt(document.getElementById(&#39;projectList&#39;).value);
        if (!id) return;
        currentId = id;
        db.transaction(&quot;projects&quot;).objectStore(&quot;projects&quot;).get(id).onsuccess = e =&gt; {
            const d = e.target.result;
            Object.keys(d).forEach(key =&gt; {
                if(document.getElementById(key)) document.getElementById(key).value = d[key];
            });
            validatePOL();
            const tbody = document.querySelector(&quot;#boqTable tbody&quot;);
            tbody.innerHTML = &quot;&quot;;
            if (d.boq &amp;&amp; d.boq.length &gt; 0) {
                d.boq.forEach(row =&gt; addRowWithData(row));
            } else {
                addRow();
            }
        };
    }

    function addRowWithData(row) {
        const tbody = document.querySelector(&quot;#boqTable tbody&quot;);
        const tr = document.createElement(&quot;tr&quot;);
        tr.innerHTML = `
            &lt;td&gt;&lt;input type=&quot;text&quot; value=&quot;${row.item}&quot; style=&quot;width:90%&quot;&gt;&lt;/td&gt;
            &lt;td&gt;&lt;input type=&quot;number&quot; value=&quot;${row.qty}&quot; oninput=&quot;update30(this)&quot; style=&quot;width:90%&quot;&gt;&lt;/td&gt;
            &lt;td&gt;&lt;input type=&quot;text&quot; value=&quot;${row.unit}&quot; style=&quot;width:80%&quot;&gt;&lt;/td&gt;
            &lt;td class=&quot;calc-30 center&quot;&gt;${(row.qty * 0.3).toFixed(2)}&lt;/td&gt;
            &lt;td&gt;&lt;input type=&quot;number&quot; value=&quot;${row.rate}&quot; style=&quot;width:90%&quot;&gt;&lt;/td&gt;
            &lt;td class=&quot;center&quot;&gt;&lt;button type=&quot;button&quot; onclick=&quot;this.parentElement.parentElement.remove()&quot; style=&quot;color:red; background:none; border:none; cursor:pointer;&quot;&gt;✖&lt;/button&gt;&lt;/td&gt;
        `;
        tbody.appendChild(tr);
    }

    function addRow() {
        const tbody = document.querySelector(&quot;#boqTable tbody&quot;);
        const tr = document.createElement(&quot;tr&quot;);
        tr.innerHTML = `
            &lt;td&gt;&lt;input type=&quot;text&quot; placeholder=&quot;Item name&quot; style=&quot;width:90%&quot;&gt;&lt;/td&gt;
            &lt;td&gt;&lt;input type=&quot;number&quot; oninput=&quot;update30(this)&quot; style=&quot;width:90%&quot;&gt;&lt;/td&gt;
            &lt;td&gt;&lt;input type=&quot;text&quot; placeholder=&quot;Unit&quot; style=&quot;width:80%&quot;&gt;&lt;/td&gt;
            &lt;td class=&quot;calc-30 center&quot;&gt;-&lt;/td&gt;
            &lt;td&gt;&lt;input type=&quot;number&quot; style=&quot;width:90%&quot;&gt;&lt;/td&gt;
            &lt;td class=&quot;center&quot;&gt;&lt;button type=&quot;button&quot; onclick=&quot;this.parentElement.parentElement.remove()&quot; style=&quot;color:red; background:none; border:none; cursor:pointer;&quot;&gt;✖&lt;/button&gt;&lt;/td&gt;
        `;
        tbody.appendChild(tr);
    }

    function update30(input) {
        const qty = parseFloat(input.value) || 0;
        input.parentElement.parentElement.querySelector(&#39;.calc-30&#39;).innerHTML = (qty * 0.3).toFixed(2);
    }

    function deleteProject() {
        const id = parseInt(document.getElementById(&#39;projectList&#39;).value);
        if(!id) return;
        if(confirm(&quot;काय आपण हे रेकॉर्ड डिलीट करू इच्छिता?&quot;)) {
            db.transaction(&quot;projects&quot;, &quot;readwrite&quot;).objectStore(&quot;projects&quot;).delete(id).onsuccess = () =&gt; {
                currentId = null;
                document.getElementById(&#39;dtpForm&#39;).reset();
                refreshList();
            };
        }
    }

    async function generatePDF() {
        const el = document.getElementById(&quot;pdf-content&quot;);
        const getV = (id) =&gt; document.getElementById(id)?.value || &quot;________&quot;;
        const fmt = (num) =&gt; parseFloat(num).toLocaleString(&#39;en-IN&#39;);

        document.getElementById(&quot;p_workName&quot;).innerHTML = getV(&quot;workName&quot;);
        document.getElementById(&quot;p_refText&quot;).innerHTML = getV(&quot;refText&quot;);
        document.getElementById(&quot;p_region&quot;).innerHTML = getV(&quot;region&quot;);
        document.getElementById(&quot;p_tsNo&quot;).innerHTML = getV(&quot;tsNo&quot;);
        document.getElementById(&quot;p_dsYear&quot;).innerHTML = getV(&quot;dsYear&quot;);

        const civil = parseFloat(getV(&quot;valCivil&quot;)) || 0;
        const elec = parseFloat(getV(&quot;valElec&quot;)) || 0;
        const roy = parseFloat(getV(&quot;valRoy&quot;)) || 0;
        const lab = parseFloat(getV(&quot;valLab&quot;)) || 0;

        document.getElementById(&quot;p_tenderTotal&quot;).innerHTML = &quot;रु. &quot; + fmt(civil + elec);
        document.getElementById(&quot;p_royLabTotal&quot;).innerHTML = &quot;रु. &quot; + fmt(roy + lab);
        document.getElementById(&quot;p_grandTotal&quot;).innerHTML = &quot;रु. &quot; + fmt(civil + elec + roy + lab);

        document.getElementById(&quot;p_polLab&quot;).innerHTML = getV(&quot;polLab&quot;) + &quot;%&quot;;
        document.getElementById(&quot;p_polMat&quot;).innerHTML = getV(&quot;polMat&quot;) + &quot;%&quot;;
        document.getElementById(&quot;p_polFuel&quot;).innerHTML = getV(&quot;polFuel&quot;) + &quot;%&quot;;
        
        [&#39;r_cement&#39;, &#39;r_tmt&#39;, &#39;r_struct&#39;, &#39;r_bit60&#39;, &#39;r_bit80&#39;].forEach(id =&gt; {
            document.getElementById(&quot;p_&quot; + id).innerHTML = fmt(getV(id));
        });

        const pdfRows = document.getElementById(&quot;p_boq_rows&quot;);
        pdfRows.innerHTML = &quot;&quot;;
        document.querySelectorAll(&quot;#boqTable tbody tr&quot;).forEach((row, idx) =&gt; {
            const item = row.cells[0].querySelector(&quot;input&quot;).value;
            if(item) {
                const tr = document.createElement(&quot;tr&quot;);
                tr.innerHTML = `&lt;td&gt;${idx+1}&lt;/td&gt;&lt;td&gt;${item}&lt;/td&gt;&lt;td&gt;${row.cells[1].querySelector(&quot;input&quot;).value}&lt;/td&gt;&lt;td&gt;${row.cells[2].querySelector(&quot;input&quot;).value}&lt;/td&gt;&lt;td&gt;${row.cells[3].innerHTML}&lt;/td&gt;&lt;td&gt;${row.cells[4].querySelector(&quot;input&quot;).value}&lt;/td&gt;`;
                pdfRows.appendChild(tr);
            }
        });

        el.style.left = &quot;0&quot;; // Temporarily bring into view for capture
        const canvas = await html2canvas(el, { scale: 2 });
        const imgData = canvas.toDataURL(&quot;image/png&quot;);
        const { jsPDF } = window.jspdf;
        const pdf = new jsPDF(&quot;p&quot;, &quot;mm&quot;, &quot;a4&quot;);
        pdf.addImage(imgData, &#39;PNG&#39;, 0, 0, 210, (canvas.height * 210) / canvas.width);
        pdf.save(`DTP_Checklist.pdf`);
        el.style.left = &quot;-9999px&quot;; // Hide again
    }

    function calcTotals() {
        console.log(&quot;Financials recalculated.&quot;);
    }
  function exportToJSON() {
    const tx = db.transaction(&quot;projects&quot;, &quot;readonly&quot;);
    const store = tx.objectStore(&quot;projects&quot;);
    const request = store.getAll();

    request.onsuccess = (e) =&gt; {
        const data = e.target.result;
        if (data.length === 0) {
            alert(&quot;निर्यात करण्यासाठी कोणतीही माहिती उपलब्ध नाही!&quot;);
            return;
        }

        const blob = new Blob([JSON.stringify(data, null, 2)], { type: &quot;application/json&quot; });
        const url = URL.createObjectURL(blob);
        const a = document.createElement(&quot;a&quot;);
        
        a.href = url;
        a.download = `DTP_Checklist_Backup_${new Date().toISOString().slice(0, 10)}.json`;
        document.body.appendChild(a);
        a.click();
        
        document.body.removeChild(a);
        URL.revokeObjectURL(url);
    };
}
  
  function importFromJSON() {
    const input = document.createElement(&quot;input&quot;);
    input.type = &quot;file&quot;;
    input.accept = &quot;.json&quot;;

    input.onchange = (event) =&gt; {
        const file = event.target.files[0];
        const reader = new FileReader();

        reader.onload = (e) =&gt; {
            try {
                const importedData = JSON.parse(e.target.result);
                const tx = db.transaction(&quot;projects&quot;, &quot;readwrite&quot;);
                const store = tx.objectStore(&quot;projects&quot;);

                importedData.forEach((project) =&gt; {
                    // Delete the old ID to let IndexedDB generate a new unique one
                    delete project.id; 
                    store.add(project);
                });

                tx.oncomplete = () =&gt; {
                    alert(&quot;माहिती यशस्वीरित्या आयात केली!&quot;);
                    refreshList();
                };
            } catch (err) {
                alert(&quot;त्रुटी: फाईल वाचता आली नाही. कृपया योग्य JSON फाईल निवडा.&quot;);
                console.error(err);
            }
        };
        reader.readAsText(file);
    };

    input.click();
}
&lt;/script&gt;

&lt;/body&gt;
&lt;/html&gt;&lt;div class=&quot;blogger-post-footer&quot;&gt;https://yogipwd.blogspot.com/&lt;/div&gt;</description><link>https://www.yogipwd.com/2026/04/dtp-checklist.html</link><author>noreply@blogger.com (Yogendra)</author><thr:total>0</thr:total></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-1074964965522467583.post-1890939739961428550</guid><pubDate>Sat, 25 Apr 2026 10:51:46 +0000</pubDate><atom:updated>2026-04-26T15:13:34.787+05:30</atom:updated><title>Flowchart generating tool</title><description>&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
&lt;meta charset=&quot;UTF-8&quot;&gt;
&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
&lt;title&gt;Visual Flowchart Architect Pro&lt;/title&gt;

&lt;script src=&quot;https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://cdn.tailwindcss.com&quot;&gt;&lt;/script&gt;

&lt;style&gt;
.node-input-group { border-left: 4px solid #3b82f6; padding-left: 1rem; margin-bottom: 1.5rem; }
.node-card { background: white; padding: 1rem; border-radius: 0.5rem; border: 1px solid #e5e7eb; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.preview-img { width: 40px; height: 40px; object-fit: cover; border-radius: 4px; border: 1px solid #ddd; }
&lt;/style&gt;
&lt;/head&gt;

&lt;body class=&quot;bg-gray-50 p-4&quot;&gt;

&lt;div class=&quot;max-w-7xl mx-auto&quot;&gt;

&lt;header class=&quot;bg-white p-4 rounded-xl shadow-sm border mb-6 flex flex-wrap gap-4 items-end justify-between&quot;&gt;
&lt;div class=&quot;flex gap-4 items-end&quot;&gt;

&lt;div&gt;
&lt;label class=&quot;block text-xs font-bold text-gray-500 mb-1&quot;&gt;Chart Name&lt;/label&gt;
&lt;input type=&quot;text&quot; id=&quot;chart-name&quot; class=&quot;border rounded p-2 text-sm w-64&quot;&gt;
&lt;/div&gt;

&lt;div&gt;
&lt;select id=&quot;saved-charts-dropdown&quot; class=&quot;border rounded p-2 text-sm w-48&quot;&gt;
&lt;option value=&quot;&quot;&gt;-- Load --&lt;/option&gt;
&lt;/select&gt;
&lt;/div&gt;

&lt;button onclick=&quot;loadChart()&quot; class=&quot;bg-indigo-600 text-white px-4 py-2 rounded&quot;&gt;Load&lt;/button&gt;
&lt;button onclick=&quot;deleteChart()&quot; class=&quot;bg-red-500 text-white px-4 py-2 rounded&quot;&gt;Delete&lt;/button&gt;

&lt;/div&gt;

&lt;div class=&quot;flex gap-2&quot;&gt;
&lt;button onclick=&quot;generateChart()&quot; class=&quot;bg-blue-600 text-white px-6 py-2 rounded font-bold&quot;&gt;Preview&lt;/button&gt;
&lt;button onclick=&quot;saveToDB()&quot; class=&quot;bg-purple-600 text-white px-6 py-2 rounded font-bold&quot;&gt;Save&lt;/button&gt;
&lt;button onclick=&quot;exportSVG()&quot; class=&quot;bg-green-600 text-white px-6 py-2 rounded font-bold&quot;&gt;Export&lt;/button&gt;
&lt;/div&gt;
&lt;/header&gt;

&lt;div class=&quot;grid grid-cols-1 lg:grid-cols-2 gap-8&quot;&gt;

&lt;!-- BUILDER --&gt;
&lt;div id=&quot;builder-container&quot;&gt;

&lt;div class=&quot;node-input-group&quot; data-node-id=&quot;1&quot; data-level=&quot;1&quot;&gt;
&lt;div class=&quot;node-card bg-blue-50 border-blue-200&quot;&gt;
&lt;input type=&quot;text&quot; class=&quot;node-text w-full p-2 border rounded mb-2&quot; value=&quot;Start&quot;&gt;
&lt;input type=&quot;file&quot; onchange=&quot;handleImgPreview(this)&quot;&gt;
&lt;input type=&quot;hidden&quot; class=&quot;node-image-data&quot;&gt;
&lt;div class=&quot;img-preview-container&quot;&gt;&lt;/div&gt;
&lt;button onclick=&quot;addChild(&#39;1&#39;)&quot; class=&quot;text-blue-600 text-xs&quot;&gt;+ Add Child&lt;/button&gt;
&lt;/div&gt;
&lt;div class=&quot;children-container ml-6&quot;&gt;&lt;/div&gt;
&lt;/div&gt;

&lt;/div&gt;

&lt;!-- PREVIEW --&gt;
&lt;div class=&quot;bg-white p-6 rounded-xl shadow-md border&quot;&gt;
&lt;div id=&quot;mermaid-render&quot;&gt;Preview here&lt;/div&gt;
&lt;/div&gt;

&lt;/div&gt;
&lt;/div&gt;

&lt;script&gt;

/* ---------------- MERMAID ---------------- */

mermaid.initialize({
startOnLoad:false,
securityLevel:&#39;loose&#39;,
flowchart:{ htmlLabels:true }
});

/* ---------------- IMAGE ---------------- */

function handleImgPreview(input){
const container=input.parentElement.querySelector(&#39;.img-preview-container&#39;);
const hidden=input.parentElement.querySelector(&#39;.node-image-data&#39;);

if(input.files[0]){
const reader=new FileReader();
reader.onload=e=&gt;{
const img=new Image();
img.onload=function(){
const canvas=document.createElement(&#39;canvas&#39;);
const scale=120/img.width;
canvas.width=120;
canvas.height=img.height*scale;
const ctx=canvas.getContext(&#39;2d&#39;);
ctx.drawImage(img,0,0,canvas.width,canvas.height);
const data=canvas.toDataURL(&#39;image/jpeg&#39;,0.7);
container.innerHTML=`&lt;img src=&quot;${data}&quot; class=&quot;preview-img&quot;&gt;`;
hidden.value=data;
};
img.src=e.target.result;
};
reader.readAsDataURL(input.files[0]);
}
}

/* ---------------- ADD CHILD ---------------- */

let nodeCount=1;

function addChild(parentId){

nodeCount++;

const parent=document.querySelector(`[data-node-id=&quot;${parentId}&quot;]`);
const parentLevel=parseInt(parent.dataset.level||1);
const newLevel=parentLevel+1;

const html=`
&lt;div class=&quot;node-input-group&quot; data-node-id=&quot;${nodeCount}&quot; data-level=&quot;${newLevel}&quot;&gt;
&lt;input class=&quot;link-text text-xs mb-1&quot; value=&quot;leads to&quot;&gt;
&lt;div class=&quot;node-card&quot;&gt;
&lt;input type=&quot;text&quot; class=&quot;node-text w-full p-2 border rounded mb-2&quot;&gt;
&lt;input type=&quot;file&quot; onchange=&quot;handleImgPreview(this)&quot;&gt;
&lt;input type=&quot;hidden&quot; class=&quot;node-image-data&quot;&gt;
&lt;div class=&quot;img-preview-container&quot;&gt;&lt;/div&gt;
&lt;button onclick=&quot;addChild(&#39;${nodeCount}&#39;)&quot; class=&quot;text-blue-500 text-xs&quot;&gt;+ Child&lt;/button&gt;
&lt;/div&gt;
&lt;div class=&quot;children-container ml-6&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
`;

parent.querySelector(&#39;.children-container&#39;).insertAdjacentHTML(&#39;beforeend&#39;,html);
}

/* ---------------- GENERATE ---------------- */

async function generateChart(){

const root=document.querySelector(&#39;[data-node-id=&quot;1&quot;]&#39;);
let def=&quot;graph TD\n&quot;;
const visited=new Set();

function clean(text){
return text
.replace(/&quot;/g,&quot;&#39;&quot;)
.replace(/[&lt;&gt;]/g,&quot;&quot;)
.replace(/[\[\]\(\)\{\}]/g,&quot;&quot;)
.replace(/[:;|]/g,&quot;-&quot;);
}

function traverse(el){

const id=el.dataset.nodeId;

if(!visited.has(id)){
visited.add(id);

const text=clean(el.querySelector(&#39;.node-text&#39;).value||&quot;Node&quot;);
const img=el.querySelector(&#39;.node-image-data&#39;).value;
const level=parseInt(el.dataset.level||1);

let shapeStart=&quot;[&quot;, shapeEnd=&quot;]&quot;;

if(level===1){ shapeStart=&quot;(&quot;; shapeEnd=&quot;)&quot;; }
else if(level===2){ shapeStart=&quot;[&quot;; shapeEnd=&quot;]&quot;; }
else if(level===3){ shapeStart=&quot;{&quot;; shapeEnd=&quot;}&quot;; }
else{ shapeStart=&quot;([&quot;; shapeEnd=&quot;])&quot;; }

const labelContent=img
? `&lt;div style=&#39;text-align:center&#39;&gt;&lt;img src=&#39;${img}&#39; width=&#39;40&#39;/&gt;&lt;br/&gt;${text}&lt;/div&gt;`
: text;

def+=`n${id}${shapeStart}&quot;${labelContent}&quot;${shapeEnd}\n`;
}

const children=el.querySelectorAll(&#39;:scope &gt; .children-container &gt; .node-input-group&#39;);

children.forEach(child=&gt;{
const linkEl=child.querySelector(&#39;.link-text&#39;);
const link=linkEl?clean(linkEl.value):&quot;link&quot;;

def+=`n${id}--&quot;${link}&quot;--&gt;n${child.dataset.nodeId}\n`;

traverse(child);
});
}

traverse(root);

try{
await mermaid.parse(def);
const {svg}=await mermaid.render(&quot;m&quot;+Date.now(),def);
document.getElementById(&#39;mermaid-render&#39;).innerHTML=svg;
}catch(e){
console.error(def,e);
alert(&quot;Render error&quot;);
}
}

/* ---------------- DB ---------------- */

let db;
const req=indexedDB.open(&quot;FlowDB&quot;,1);

req.onupgradeneeded=e=&gt;{
e.target.result.createObjectStore(&quot;charts&quot;,{keyPath:&quot;name&quot;});
};

req.onsuccess=e=&gt;{
db=e.target.result;
updateDropdown();
};

function updateDropdown(){
const d=document.getElementById(&quot;saved-charts-dropdown&quot;);
const store=db.transaction(&quot;charts&quot;,&quot;readonly&quot;).objectStore(&quot;charts&quot;);

store.getAllKeys().onsuccess=e=&gt;{
d.innerHTML=&#39;&lt;option value=&quot;&quot;&gt;-- Load --&lt;/option&gt;&#39;;
e.target.result.forEach(k=&gt;{
d.innerHTML+=`&lt;option&gt;${k}&lt;/option&gt;`;
});
};
}

function serialize(el){
return{
id:el.dataset.nodeId,
level:el.dataset.level,
text:el.querySelector(&#39;.node-text&#39;).value,
img:el.querySelector(&#39;.node-image-data&#39;).value,
link:el.querySelector(&#39;.link-text&#39;)?.value||&quot;&quot;,
children:[...el.querySelector(&#39;:scope &gt; .children-container&#39;).children].map(serialize)
};
}

function saveToDB(){
const name=document.getElementById(&quot;chart-name&quot;).value;
if(!name)return alert(&quot;Name required&quot;);

const data=serialize(document.querySelector(&#39;[data-node-id=&quot;1&quot;]&#39;));

db.transaction(&quot;charts&quot;,&quot;readwrite&quot;).objectStore(&quot;charts&quot;).put({name,data});

alert(&quot;Saved&quot;);
updateDropdown();
}

function loadChart(){
const name=document.getElementById(&quot;saved-charts-dropdown&quot;).value;
if(!name)return;

db.transaction(&quot;charts&quot;,&quot;readonly&quot;).objectStore(&quot;charts&quot;).get(name).onsuccess=e=&gt;{

const c=e.target.result;
const container=document.getElementById(&quot;builder-container&quot;);
container.innerHTML=&quot;&quot;;

function render(d,parent){

nodeCount=Math.max(nodeCount,d.id);

const html=`
&lt;div class=&quot;node-input-group&quot; data-node-id=&quot;${d.id}&quot; data-level=&quot;${d.level}&quot;&gt;
&lt;input class=&quot;link-text&quot; value=&quot;${d.link}&quot;&gt;
&lt;div class=&quot;node-card&quot;&gt;
&lt;input class=&quot;node-text&quot; value=&quot;${d.text}&quot;&gt;
&lt;input type=&quot;hidden&quot; class=&quot;node-image-data&quot; value=&quot;${d.img}&quot;&gt;
&lt;div class=&quot;img-preview-container&quot;&gt;${d.img?`&lt;img src=&quot;${d.img}&quot; class=&quot;preview-img&quot;&gt;`:&#39;&#39;}&lt;/div&gt;
&lt;button onclick=&quot;addChild(&#39;${d.id}&#39;)&quot;&gt;+ Child&lt;/button&gt;
&lt;/div&gt;
&lt;div class=&quot;children-container&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
`;

parent.insertAdjacentHTML(&quot;beforeend&quot;,html);

const newNode=parent.lastElementChild;

d.children.forEach(ch=&gt;render(ch,newNode.querySelector(&#39;.children-container&#39;)));
}

render(c.data,container);
generateChart();
};
}

function deleteChart(){
const name=document.getElementById(&quot;saved-charts-dropdown&quot;).value;
if(name &amp;&amp; confirm(&quot;Delete?&quot;)){
db.transaction(&quot;charts&quot;,&quot;readwrite&quot;).objectStore(&quot;charts&quot;).delete(name);
location.reload();
}
}

/* ---------------- EXPORT ---------------- */

function exportSVG(){
const svg=document.querySelector(&quot;#mermaid-render svg&quot;);
if(!svg)return alert(&quot;Preview first&quot;);

const data=new XMLSerializer().serializeToString(svg);
const blob=new Blob([data],{type:&quot;image/svg+xml&quot;});

const a=document.createElement(&quot;a&quot;);
a.href=URL.createObjectURL(blob);
a.download=&quot;flowchart.svg&quot;;
a.click();
}

&lt;/script&gt;

&lt;/body&gt;
&lt;/html&gt;&lt;div class=&quot;blogger-post-footer&quot;&gt;https://yogipwd.blogspot.com/&lt;/div&gt;</description><link>https://www.yogipwd.com/2026/04/flowchart-generating-tool.html</link><author>noreply@blogger.com (Yogendra)</author><thr:total>0</thr:total></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-1074964965522467583.post-2032883736862475092</guid><pubDate>Sat, 18 Apr 2026 08:40:00 +0000</pubDate><atom:updated>2026-04-18T14:34:08.400+05:30</atom:updated><title>DTP data</title><description>&lt;div id=&quot;calculator-container&quot; style=&quot;font-family: &#39;Segoe UI&#39;, Arial, sans-serif; max-width: 950px; margin: auto; padding: 20px; border: 1px solid #ccc; border-radius: 10px; background: #fff; color: #333;&quot;&gt;
    &lt;h2 style=&quot;text-align: center; color: #0056b3;&quot;&gt;Infrastructure Project Manager (Local + Sync)&lt;/h2&gt;
    
    &lt;div style=&quot;background: #f8f9fa; padding: 15px; border-radius: 8px; margin-bottom: 20px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap;&quot;&gt;
        &lt;label&gt;&lt;strong&gt;Select Project:&lt;/strong&gt;&lt;/label&gt;
        &lt;select id=&quot;projectSelect&quot; onchange=&quot;loadProject()&quot; style=&quot;padding: 8px; flex-grow: 1; border: 1px solid #0056b3; border-radius: 4px;&quot;&gt;
            &lt;option value=&quot;&quot;&gt;-- New Project --&lt;/option&gt;
        &lt;/select&gt;
        &lt;button onclick=&quot;exportJSON()&quot; style=&quot;padding: 8px 12px; background: #6c757d; color: white; border: none; border-radius: 4px; cursor: pointer;&quot;&gt;Export JSON&lt;/button&gt;
        &lt;button onclick=&quot;document.getElementById(&#39;importFile&#39;).click()&quot; style=&quot;padding: 8px 12px; background: #6c757d; color: white; border: none; border-radius: 4px; cursor: pointer;&quot;&gt;Import JSON&lt;/button&gt;
        &lt;input type=&quot;file&quot; id=&quot;importFile&quot; style=&quot;display:none&quot; onchange=&quot;importJSON(event)&quot;&gt;
    &lt;/div&gt;

    &lt;div style=&quot;display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-bottom: 20px;&quot;&gt;
        &lt;div&gt;&lt;label&gt;Project Name:&lt;/label&gt;&lt;input type=&quot;text&quot; id=&quot;projectName&quot; style=&quot;width:100%; padding:8px;&quot;&gt;&lt;/div&gt;
        &lt;div&gt;&lt;label&gt;Total Cost (₹):&lt;/label&gt;&lt;input type=&quot;number&quot; id=&quot;totalWork&quot; oninput=&quot;calculate()&quot; style=&quot;width:100%; padding:8px;&quot;&gt;&lt;/div&gt;
        &lt;div&gt;&lt;label&gt;Schedule &quot;A&quot; (₹):&lt;/label&gt;&lt;input type=&quot;number&quot; id=&quot;schA&quot; oninput=&quot;calculate()&quot; style=&quot;width:100%; padding:8px;&quot;&gt;&lt;/div&gt;
        &lt;div&gt;&lt;label&gt;Asphalt (₹):&lt;/label&gt;&lt;input type=&quot;number&quot; id=&quot;asphalt&quot; oninput=&quot;calculate()&quot; style=&quot;width:100%; padding:8px;&quot;&gt;&lt;/div&gt;
        &lt;div&gt;&lt;label&gt;Pipe (₹):&lt;/label&gt;&lt;input type=&quot;number&quot; id=&quot;pipe&quot; oninput=&quot;calculate()&quot; style=&quot;width:100%; padding:8px;&quot;&gt;&lt;/div&gt;
        &lt;div&gt;&lt;label&gt;Cement (₹):&lt;/label&gt;&lt;input type=&quot;number&quot; id=&quot;cement&quot; oninput=&quot;calculate()&quot; style=&quot;width:100%; padding:8px;&quot;&gt;&lt;/div&gt;
        &lt;div&gt;&lt;label&gt;Steel (₹):&lt;/label&gt;&lt;input type=&quot;number&quot; id=&quot;steel&quot; oninput=&quot;calculate()&quot; style=&quot;width:100%; padding:8px;&quot;&gt;&lt;/div&gt;
        &lt;div&gt;&lt;label&gt;Royalty (₹):&lt;/label&gt;&lt;input type=&quot;number&quot; id=&quot;royalty&quot; oninput=&quot;calculate()&quot; style=&quot;width:100%; padding:8px;&quot;&gt;&lt;/div&gt;
        &lt;div&gt;&lt;label&gt;Labour (₹):&lt;/label&gt;&lt;input type=&quot;number&quot; id=&quot;labour&quot; oninput=&quot;calculate()&quot; style=&quot;width:100%; padding:8px;&quot;&gt;&lt;/div&gt;
        &lt;div&gt;&lt;label&gt;POL (₹):&lt;/label&gt;&lt;input type=&quot;number&quot; id=&quot;pol&quot; oninput=&quot;calculate()&quot; style=&quot;width:100%; padding:8px;&quot;&gt;&lt;/div&gt;
        &lt;div&gt;&lt;label&gt;Material (₹):&lt;/label&gt;&lt;input type=&quot;number&quot; id=&quot;material&quot; oninput=&quot;calculate()&quot; style=&quot;width:100%; padding:8px;&quot;&gt;&lt;/div&gt;
    &lt;/div&gt;

    &lt;div style=&quot;background: #e7f3ff; padding: 15px; border-radius: 8px; margin-bottom: 20px; display: flex; justify-content: space-between; flex-wrap: wrap;&quot;&gt;
        &lt;span&gt;&lt;strong&gt;W (Excl. Materials):&lt;/strong&gt; ₹&lt;span id=&quot;excludedCostDisplay&quot;&gt;0&lt;/span&gt;&lt;/span&gt;
        &lt;span&gt;&lt;strong&gt;K1:&lt;/strong&gt; &lt;span id=&quot;lPct&quot;&gt;0&lt;/span&gt;%&lt;/span&gt;
        &lt;span&gt;&lt;strong&gt;K2:&lt;/strong&gt; &lt;span id=&quot;pPct&quot;&gt;0&lt;/span&gt;%&lt;/span&gt;
        &lt;span&gt;&lt;strong&gt;K3:&lt;/strong&gt; &lt;span id=&quot;mPct&quot;&gt;0&lt;/span&gt;%&lt;/span&gt;
        &lt;div id=&quot;warning&quot; style=&quot;color: red; font-weight: bold; width: 100%; margin-top: 5px;&quot;&gt;&lt;/div&gt;
    &lt;/div&gt;

    &lt;button id=&quot;saveBtn&quot; onclick=&quot;saveToDB()&quot; style=&quot;width: 100%; padding: 12px; background: #007bff; color: white; font-weight: bold; border: none; border-radius: 5px; cursor: pointer;&quot;&gt;Save / Update &amp; Sync to Cloud&lt;/button&gt;

    &lt;h4 style=&quot;margin-top:30px;&quot;&gt;Locally Saved Projects&lt;/h4&gt;
    &lt;div style=&quot;overflow: auto; max-height: 350px; border: 1px solid #ddd; border-radius: 5px;&quot;&gt;
        &lt;table id=&quot;localTable&quot; style=&quot;width: 100%; border-collapse: collapse; min-width: 800px;&quot;&gt;
            &lt;thead style=&quot;background: #333; color: white; position: sticky; top: 0;&quot;&gt;
                &lt;tr&gt;
                    &lt;th style=&quot;padding: 10px;&quot;&gt;Project Name&lt;/th&gt;
                    &lt;th&gt;W (Excluded)&lt;/th&gt;
                    &lt;th&gt;K1%&lt;/th&gt;
                    &lt;th&gt;K2%&lt;/th&gt;
                    &lt;th&gt;K3%&lt;/th&gt;
                    &lt;th&gt;Actions&lt;/th&gt;
                &lt;/tr&gt;
            &lt;/thead&gt;
            &lt;tbody style=&quot;text-align: center;&quot;&gt;&lt;/tbody&gt;
        &lt;/table&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;script&gt;
const SCRIPT_URL = &quot;https://script.google.com/macros/s/AKfycbwMT8V6XeFs0GKDblgwDjPR4fPr9f59haxW4FGrFzWAA4Szx0-RTyq6Gh2dH6Mvn5Hh/exec&quot;;
let db;

// 1. Initialize IndexedDB
const request = indexedDB.open(&quot;ProjectDB&quot;, 1);
request.onupgradeneeded = (e) =&gt; {
    db = e.target.result;
    db.createObjectStore(&quot;projects&quot;, { keyPath: &quot;projectName&quot; });
};
request.onsuccess = (e) =&gt; {
    db = e.target.result;
    refreshUI();
};

function getVal(id) { return parseFloat(document.getElementById(id).value) || 0; }

function calculate() {
    const total = getVal(&#39;totalWork&#39;);
    const materialsSum = getVal(&#39;asphalt&#39;) + getVal(&#39;pipe&#39;) + getVal(&#39;cement&#39;) + getVal(&#39;steel&#39;) + getVal(&#39;royalty&#39;);
    const excluded = total - materialsSum;
    document.getElementById(&#39;excludedCostDisplay&#39;).innerText = excluded.toLocaleString(&#39;en-IN&#39;);
    
    if (excluded &gt; 0) {
        const l = (getVal(&#39;labour&#39;) / excluded * 100).toFixed(2);
        const p = (getVal(&#39;pol&#39;) / excluded * 100).toFixed(2);
        const m = (getVal(&#39;material&#39;) / excluded * 100).toFixed(2);
        document.getElementById(&#39;lPct&#39;).innerText = l;
        document.getElementById(&#39;pPct&#39;).innerText = p;
        document.getElementById(&#39;mPct&#39;).innerText = m;
        
        const check = parseFloat(l) + parseFloat(p) + parseFloat(m);
        document.getElementById(&#39;warning&#39;).innerText = Math.abs(check - 100) &gt; 0.05 ? `⚠️ Total: ${check.toFixed(2)}%` : &quot;&quot;;
    }
}

// 2. Save Data (Local + Cloud Sync)
function saveToDB() {
    const projectName = document.getElementById(&#39;projectName&#39;).value;
    if (!projectName) return alert(&quot;Enter Project Name&quot;);

    const data = {
        projectName, totalWork: getVal(&#39;totalWork&#39;), schA: getVal(&#39;schA&#39;),
        asphalt: getVal(&#39;asphalt&#39;), pipe: getVal(&#39;pipe&#39;), cement: getVal(&#39;cement&#39;),
        steel: getVal(&#39;steel&#39;), royalty: getVal(&#39;royalty&#39;), labour: getVal(&#39;labour&#39;),
        pol: getVal(&#39;pol&#39;), material: getVal(&#39;material&#39;),
        excludedCost: document.getElementById(&#39;excludedCostDisplay&#39;).innerText,
        labourPct: document.getElementById(&#39;lPct&#39;).innerText,
        polPct: document.getElementById(&#39;pPct&#39;).innerText,
        materialPct: document.getElementById(&#39;mPct&#39;).innerText
    };

    const transaction = db.transaction([&quot;projects&quot;], &quot;readwrite&quot;);
    transaction.objectStore(&quot;projects&quot;).put(data);
    
    transaction.oncomplete = () =&gt; {
        refreshUI();
        // Background sync to Google Sheets
        fetch(SCRIPT_URL, { method: &#39;POST&#39;, mode: &#39;no-cors&#39;, body: JSON.stringify(data) });
        alert(&quot;Saved locally and synced to Google Sheets!&quot;);
    };
}

// 3. UI Refreshes
function refreshUI() {
    const select = document.getElementById(&#39;projectSelect&#39;);
    const tbody = document.getElementById(&#39;localTable&#39;).getElementsByTagName(&#39;tbody&#39;)[0];
    select.innerHTML = &#39;&lt;option value=&quot;&quot;&gt;-- New Project --&lt;/option&gt;&#39;;
    tbody.innerHTML = &quot;&quot;;

    db.transaction(&quot;projects&quot;).objectStore(&quot;projects&quot;).getAll().onsuccess = (e) =&gt; {
        e.target.result.forEach(proj =&gt; {
            // Fill Dropdown
            let opt = document.createElement(&quot;option&quot;);
            opt.value = proj.projectName;
            opt.innerText = proj.projectName;
            select.appendChild(opt);

            // Fill Table
            let row = tbody.insertRow();
            row.innerHTML = `&lt;td&gt;${proj.projectName}&lt;/td&gt;&lt;td&gt;${proj.excludedCost}&lt;/td&gt;&lt;td&gt;${proj.labourPct}%&lt;/td&gt;&lt;td&gt;${proj.polPct}%&lt;/td&gt;&lt;td&gt;${proj.materialPct}%&lt;/td&gt;
            &lt;td&gt;&lt;button onclick=&quot;editProject(&#39;${proj.projectName}&#39;)&quot;&gt;Edit&lt;/button&gt;&lt;/td&gt;`;
        });
    };
}

function editProject(name) {
    db.transaction(&quot;projects&quot;).objectStore(&quot;projects&quot;).get(name).onsuccess = (e) =&gt; {
        const p = e.target.result;
        document.getElementById(&#39;projectName&#39;).value = p.projectName;
        document.getElementById(&#39;totalWork&#39;).value = p.totalWork;
        document.getElementById(&#39;schA&#39;).value = p.schA;
        document.getElementById(&#39;asphalt&#39;).value = p.asphalt;
        document.getElementById(&#39;pipe&#39;).value = p.pipe;
        document.getElementById(&#39;cement&#39;).value = p.cement;
        document.getElementById(&#39;steel&#39;).value = p.steel;
        document.getElementById(&#39;royalty&#39;).value = p.royalty;
        document.getElementById(&#39;labour&#39;).value = p.labour;
        document.getElementById(&#39;pol&#39;).value = p.pol;
        document.getElementById(&#39;material&#39;).value = p.material;
        calculate();
    };
}

function loadProject() {
    const val = document.getElementById(&#39;projectSelect&#39;).value;
    if (val) editProject(val);
}

// 4. Import / Export
function exportJSON() {
    db.transaction(&quot;projects&quot;).objectStore(&quot;projects&quot;).getAll().onsuccess = (e) =&gt; {
        const blob = new Blob([JSON.stringify(e.target.result)], {type: &quot;application/json&quot;});
        const url = URL.createObjectURL(blob);
        const a = document.createElement(&quot;a&quot;);
        a.href = url;
        a.download = &quot;projects_backup.json&quot;;
        a.click();
    };
}

function importJSON(event) {
    const reader = new FileReader();
    reader.onload = (e) =&gt; {
        const data = JSON.parse(e.target.result);
        const tx = db.transaction([&quot;projects&quot;], &quot;readwrite&quot;);
        data.forEach(item =&gt; tx.objectStore(&quot;projects&quot;).put(item));
        tx.oncomplete = () =&gt; { refreshUI(); alert(&quot;Imported successfully!&quot;); };
    };
    reader.readAsText(event.target.files[0]);
}
&lt;/script&gt;&lt;div class=&quot;blogger-post-footer&quot;&gt;https://yogipwd.blogspot.com/&lt;/div&gt;</description><link>https://www.yogipwd.com/2026/04/dtp-data.html</link><author>noreply@blogger.com (Yogendra)</author><thr:total>0</thr:total></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-1074964965522467583.post-7796120572573275009</guid><pubDate>Fri, 17 Apr 2026 02:26:00 +0000</pubDate><atom:updated>2026-04-17T13:54:20.752+05:30</atom:updated><category domain="http://www.blogger.com/atom/ns#">PWD Working</category><title>Maharashtra Forest Land Diversion 2026: Complete KML + Checklist + Tree Maliki Guide for PWD Engineers | PARIVESH Portal</title><description>&lt;script src=&quot;https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js&quot;&gt;&lt;/script&gt;
    &lt;script&gt;
        mermaid.initialize({ startOnLoad: true, theme: &#39;neutral&#39; });
    &lt;/script&gt;
&lt;style&gt;
    @import url(&#39;https://fonts.googleapis.com/css2?family=Noto+Sans+Devanagari:wght@400;500;700&amp;display=swap&#39;);
    
    body {
        font-family: &#39;Noto Sans Devanagari&#39;, &#39;Segoe UI&#39;, Arial, sans-serif;
        line-height: 1.7;
        color: #333;
        max-width: 1100px;
        margin: 0 auto;
        padding: 20px;
        background: #f9f9f9;
    }
    
    h1 {
        color: #006400;
        text-align: center;
        font-size: 2.4em;
        margin-bottom: 10px;
    }
    
    h2 {
        color: #006400;
        border-bottom: 3px solid #8FBC8F;
        padding-bottom: 8px;
        margin-top: 40px;
    }
    
    h3 {
        color: #228B22;
    }
    
    table {
        width: 100%;
        border-collapse: collapse;
        margin: 20px 0;
        background: white;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    
    th, td {
        border: 1px solid #8FBC8F;
        padding: 12px;
        text-align: left;
        vertical-align: top;
    }
    
    th {
        background: yellow;
        color: blue;
    }
    
    ul {
        background: #f0f8f0;
        padding: 20px;
        border-radius: 8px;
    }
    
    li {
        margin-bottom: 10px;
    }
    
    .highlight {
        background: #fffacd;
        padding: 15px;
        border-left: 6px solid #006400;
        font-weight: bold;
    }
    
    .note {
        font-size: 0.95em;
        color: #555;
        font-style: italic;
    }
    
    .author {
        text-align: center;
        margin: 40px 0;
        font-size: 1.1em;
        color: #006400;
    }
    
    pre {
        background: #f4f4f4;
        padding: 15px;
        border-radius: 6px;
        overflow-x: auto;
    }
    
    .new-section {
        border-top: 4px dashed #8FBC8F;
        padding-top: 30px;
        margin-top: 40px;
    }
    
    /* Certificate &amp; Checklist specific styles */
    :root {
        --page-width: 210mm;
        --page-height: 297mm;
    }
    
    .container {
        max-width: 1200px;
        margin: 0 auto;
    }
    
    .checklist {
        background: white;
        border: 2px solid #000;
        margin-bottom: 40px;
        padding: 20px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }
    
    .checklist table {
        width: 100%;
        border-collapse: collapse;
        margin: 15px 0;
    }
    
    .checklist th, .checklist td {
        border: 1px solid #000;
        padding: 10px 12px;
        text-align: left;
        vertical-align: top;
        font-size: 15px;
    }
    
    .checklist th {
        background: #f0f0f0;
        font-weight: 700;
        text-align: center;
    }
    
    .yes-no {
        text-align: center;
        width: 60px;
    }
    
    .remark {
        width: 150px;
    }
    
    .section-title {
        background: #000;
        color: white;
        padding: 10px 20px;
        margin-bottom: 15px;
        font-size: 20px;
    }
    
    /* Certificate Page - Each certificate on separate printable page */
    .certificate-page {
        width: 780px;                  /* ← REDUCED from 210mm to fit Blogger window */
        max-width: 100%;               /* Responsive on mobile */
        min-height: 950px;             /* Keeps visual A4 proportion */
        margin: 30px auto;
        padding: 25mm 20mm;
        background: white;
        border: 3px solid #000;
        box-shadow: 0 10px 30px rgba(0,0,0,0.2);
        position: relative;
        page-break-after: always;
        box-sizing: border-box;
        overflow: hidden;
    }

    .certificate-page:last-child { page-break-after: avoid; }

    .certificate-content {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .certificate-header {
        text-align: center;
        font-size: 18px;
        font-weight: 700;
        margin-bottom: 20px;
        border-bottom: 2px solid #000;
        padding-bottom: 10px;
    }

    .certificate-title {
        text-align: center;
        font-size: 22px;
        font-weight: 700;
        margin: 25px 0 30px 0;
        line-height: 1.3;
    }

    .signature-block {
        margin-top: 60px;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
    }

    .signature-left { text-align: left; }
    .signature-right { text-align: right; }

    .page-number {
        position: absolute;
        bottom: 12mm;
        right: 20mm;
        font-size: 12px;
        color: #555;
    }

    /* Print - Full A4 size (unchanged) */
    @media print {
        body { background: white; padding: 0; max-width: none; }
        .container { max-width: none; }
        .checklist { box-shadow: none; margin: 0; page-break-inside: avoid; }
      	.header { background: #006400; color: white; }
        .mermaid-container { border: 2px solid #006400; box-shadow: none; }
        .certificate-page {
            width: 210mm !important;           /* Full A4 width when printing */
            max-width: 210mm !important;
            min-height: 297mm !important;
            margin: 0 auto;
            box-shadow: none;
            border: 2px solid #000;
            page-break-after: always;
          
            
        }
        .certificate-page:last-child { page-break-after: avoid; }
    }
  .header {
            background: #006400;
            color: white;
            padding: 20px;
            text-align: center;
            box-shadow: 0 4px 12px rgba(0,0,0,0.2);
        }
        .header h1 {
            margin: 0;
            font-size: 2.2em;
        }
        .header p {
            margin: 8px 0 0;
            font-size: 1.1em;
            opacity: 0.95;
        }
        .container {
            max-width: 1300px;
            margin: 30px auto;
            padding: 0 20px;
        }
        .card {
            background: white;
            border-radius: 12px;
            box-shadow: 0 8px 25px rgba(0,0,0,0.15);
            padding: 25px;
            margin-bottom: 30px;
        }
        .mermaid-container {
            background: #fff;
            border: 3px solid #006400;
            border-radius: 12px;
            padding: 20px;
            overflow: auto;
        }
        .controls {
            display: flex;
            gap: 12px;
            justify-content: center;
            margin: 20px 0;
            flex-wrap: wrap;
        }
        button {
            padding: 12px 24px;
            font-size: 1em;
            border: none;
            border-radius: 8px;
            background: #006400;
            color: white;
            cursor: pointer;
            transition: all 0.3s;
        }
        button:hover {
            background: #004d00;
            transform: translateY(-2px);
        }
        .info {
            font-size: 0.95em;
            line-height: 1.6;
            background: #f8fff8;
            padding: 20px;
            border-left: 6px solid #006400;
            border-radius: 8px;
        }
        footer {
            text-align: center;
            padding: 20px;
            color: #555;
            font-size: 0.9em;
        }
&lt;/style&gt;

&lt;h1&gt;Maharashtra Forest Land Diversion 2026:&lt;br&gt;Complete Practical Guide for Civil Engineers&lt;/h1&gt;
&lt;p style=&quot;text-align:center; font-size:1.3em; color:#006400;&quot;&gt;&lt;strong&gt;KML File Guidelines + 1-Hectare FRA Checklist + Full FCA Checklist + Tree Ownership (Maliki) Documents for PARIVESH Portal&lt;/strong&gt;&lt;/p&gt;

&lt;div class=&quot;author&quot;&gt;
    &lt;strong&gt;By Yogendra — Civil / Structural Engineer | PWD Maharashtra&lt;/strong&gt;&lt;br&gt;
    &lt;small&gt;Practical insights for Road, EPC &amp;amp; Infrastructure projects involving forest clearance&lt;/small&gt;
&lt;/div&gt;

&lt;p&gt;As a Civil Engineer working on PWD and EPC projects in Maharashtra, one have to prepare forest diversion proposals. One small mistake in KML file, missing certificate or incomplete tree ownership documents can lead to automatic rejection on PARIVESH portal and months of delay.&lt;/p&gt;

&lt;p&gt;This article compiles the &lt;strong&gt;latest official guidelines&lt;/strong&gt; (November 2025) issued by the Principal Chief Conservator of Forests (Maharashtra) along with the complete checklists for small (≤1 ha) and regular FCA proposals — &lt;strong&gt;plus the full list of documents required for Tree Ownership (Maliki Prakaran) Certificate&lt;/strong&gt;. Everything you need in one place — ready to use for your next tender or DPR.&lt;/p&gt;

&lt;div class=&quot;highlight&quot;&gt;
    &lt;strong&gt;Key Takeaway for PWD Engineers:&lt;/strong&gt; Always prepare KML in Polygon only, follow colour codes strictly, keep every map counter-signed by DCF + Surveyor + User Agency, and attach complete Tree Maliki documents whenever private/identified forest land or tree enumeration is involved. Area in KML properties must exactly match the proposed area.
&lt;/div&gt;

&lt;div class=&quot;header&quot;&gt;
    &lt;h1&gt;FRA Section 3(2) vs FCA 1980&lt;/h1&gt;
    &lt;p&gt;वन जमीन वळवण्याची मंजुरी प्रक्रिया (Maharashtra PWD &amp; EPC Road Projects)&lt;/p&gt;
&lt;/div&gt;

&lt;div class=&quot;mermaid-container&quot;&gt;
    &lt;div class=&quot;mermaid&quot; id=&quot;flowchart&quot;&gt;
flowchart TD
    A([&quot;Start: Road Project Identified&lt;br&gt;(PWD / User Agency)&quot;]) 
    --&gt; B{&quot;Proposed Forest Area?&quot;}

    B --&gt;|&quot;&lt; 1 Hectare &amp; Sec 3(2)&quot;| FRA[&quot;FRA Section 3(2)&lt;br&gt;Simplified Procedure&quot;]
    B --&gt;|&quot;&gt; 1 Hectare or Linear&quot;| FCA[&quot;FCA 1980 / Van Adhiniyam&lt;br&gt;Regular Procedure&quot;]

    subgraph FRA_Path [&quot;FRA Sec 3(2) - Fast Track&quot;]
        FRA --&gt; C1[&quot;Prepare Sample-K,&lt;br&gt;7/12 &amp; 1:50000 Map&quot;]
        C1 --&gt; C2[&quot;Gram Sabha Resolution&lt;br&gt;(50% Quorum)&quot;]
        C2 --&gt; C3[&quot;Tahsildar Certificate:&lt;br&gt;Non-Forest land unavailable&quot;]
        C3 --&gt; C4[&quot;Submit to RFO&quot;]
        C4 --&gt; C5[&quot;RFO: Sample-Kh + Inspection&quot;]
        C5 --&gt; C6[&quot;RFO Certificates:&lt;br&gt;Area/Court Case Check&quot;]
        C6 --&gt; C7[&quot;Forward to Territorial DCF&quot;]
        C7 --&gt; C8[&quot;DCF Approval - Final&quot;]
        C8 --&gt; END1([&quot;Forest Clearance Granted&quot;])
    end

    subgraph FCA_Path [&quot;FCA 1980 - Detailed Procedure&quot;]
        FCA --&gt; D1[&quot;Prepare KML,&lt;br&gt;NPV &amp; CA Undertakings&quot;]
        D1 --&gt; D2[&quot;Upload on PARIVESH (Form-A)&quot;]
        D2 --&gt; D3[&quot;Scrutiny by Nodal Officer&quot;]
        D3 --&gt; D4{&quot;Queries/EDS?&quot;}
        D4 --&gt;|Yes| D5[&quot;Agency Resubmits&quot;]
        D5 --&gt; D3
        D4 --&gt;|No| D6[&quot;Site Inspection &amp; Tree Enum&quot;]
        D6 --&gt; D7[&quot;Wildlife Clearance&lt;br&gt;(If Applicable)&quot;]
        D7 --&gt; D8[&quot;CA Land ID + NPV Payment&quot;]
        D8 --&gt; D9[&quot;DCF Recommendation (Part-II)&quot;]
        D9 --&gt; D10[&quot;PCCF Review &amp; State Forwarding&quot;]
        D10 --&gt; D11{&quot;Area &gt; 5 Ha?&quot;}
        D11 --&gt;|Yes| D12[&quot;PSC + State Stage-I&quot;]
        D11 --&gt;|No| D13[&quot;IRO - Stage-I In-principle&quot;]
        D12 --&gt; D13
        D13 --&gt; D14[&quot;Stage-I Approval&lt;br&gt;(Conditions)&quot;]
        D14 --&gt; D15[&quot;Compliance: Payment + Land&quot;]
        D15 --&gt; D16[&quot;Stage-II Final Approval&quot;]
        D16 --&gt; END2([&quot;Forest Clearance Granted&quot;])
    end

    END1 --&gt; Z([&quot;Project Can Proceed&quot;])
    END2 --&gt; Z

    %% Styling
    classDef fra fill:#e6ffe6,stroke:#006400,stroke-width:2px,color:#000;
    classDef fca fill:#fff0e6,stroke:#8B4513,stroke-width:2px,color:#000;
    class FRA_Path fra;
    class FCA_Path fca;
    &lt;/div&gt;
&lt;/div&gt;

&lt;div class=&quot;controls&quot;&gt;
    &lt;button onclick=&quot;copyMermaidCode()&quot;&gt;📋 Copy Mermaid Code&lt;/button&gt;
    &lt;button onclick=&quot;window.print()&quot;&gt;🖨️ Print / Save as PDF&lt;/button&gt;
&lt;/div&gt;

&lt;pre id=&quot;mermaidSource&quot; style=&quot;display:none;&quot;&gt;
flowchart TD
    A([&quot;Start: Road Project Identified&quot;]) --&gt; B{&quot;Forest Area?&quot;}
    B --&gt;|&quot;&lt; 1 Ha&quot;| FRA[&quot;FRA Sec 3(2)&quot;]
    B --&gt;|&quot;&gt; 1 Ha&quot;| FCA[&quot;FCA 1980&quot;]
    %% Simplified version for clipboard...
&lt;/pre&gt;

&lt;script&gt;
    function copyMermaidCode() {
        // This targets the text within the mermaid div before it renders, 
        // but since Mermaid clears it, we use the hidden pre tag for reliable copying.
        const code = document.getElementById(&#39;mermaidSource&#39;).innerText;
        navigator.clipboard.writeText(code).then(() =&gt; {
            alert(&quot;Mermaid code copied to clipboard!&quot;);
        }).catch(err =&gt; {
            console.error(&#39;Failed to copy: &#39;, err);
        });
    }
&lt;/script&gt;

&lt;h2&gt;1. Latest Guidelines for KML Files on PARIVESH Portal&lt;br&gt;&lt;small&gt;(PCCF Maharashtra Circular No. Desk-17/FCA-S1/NodalCell/25-26/1943 dated 20/11/2025)&lt;/small&gt;&lt;/h2&gt;

&lt;p&gt;Accurate KML preparation is now mandatory. Non-standard files are auto-rejected at scrutiny stage.&lt;/p&gt;

&lt;h3&gt;❌ Files NOT Supported&lt;/h3&gt;
&lt;ul&gt;
    &lt;li&gt;KML files larger than &lt;strong&gt;200 MB&lt;/strong&gt;&lt;/li&gt;
    &lt;li&gt;Any &lt;strong&gt;KMZ&lt;/strong&gt; files&lt;/li&gt;
    &lt;li&gt;KML files with TBM images embedded in waypoints&lt;/li&gt;
    &lt;li&gt;Multi-geometry KML files with more than &lt;strong&gt;200 segments&lt;/strong&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;🌲 Colour Codes (Mandatory)&lt;/h3&gt;
&lt;table&gt;
    &lt;tr&gt;&lt;th&gt;Forest Type&lt;/th&gt;&lt;th&gt;Colour&lt;/th&gt;&lt;/tr&gt;
    &lt;tr&gt;&lt;td&gt;Reserve Forest&lt;/td&gt;&lt;td&gt;&lt;strong&gt;Green&lt;/strong&gt;&lt;/td&gt;&lt;/tr&gt;
    &lt;tr&gt;&lt;td&gt;Protected Forest&lt;/td&gt;&lt;td&gt;&lt;strong&gt;Yellow&lt;/strong&gt;&lt;/td&gt;&lt;/tr&gt;
    &lt;tr&gt;&lt;td&gt;Zudpi Jungle&lt;/td&gt;&lt;td&gt;&lt;strong&gt;Green&lt;/strong&gt;&lt;/td&gt;&lt;/tr&gt;
    &lt;tr&gt;&lt;td&gt;Private Forest / Identified Forest&lt;/td&gt;&lt;td&gt;&lt;strong&gt;Pink&lt;/strong&gt;&lt;/td&gt;&lt;/tr&gt;
    &lt;tr&gt;&lt;td&gt;Non-forest area&lt;/td&gt;&lt;td&gt;&lt;strong&gt;No colour filling&lt;/strong&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;/table&gt;

&lt;h3&gt;✅ General Instructions (Must Follow)&lt;/h3&gt;
&lt;ol&gt;
    &lt;li&gt;Only the uploaded KML files of diverted forest area and Compensatory Afforestation (CA) land on PARIVESH will be used for scrutiny.&lt;/li&gt;
    &lt;li&gt;KML files submitted offline (CD/Map) &lt;strong&gt;must exactly match&lt;/strong&gt; the online uploaded files.&lt;/li&gt;
    &lt;li&gt;Use &lt;strong&gt;Polygons only&lt;/strong&gt; — Lines are not accepted for forest land depiction.&lt;/li&gt;
    &lt;li&gt;KML must display: Length, Width, Area, Compartment Number, Survey Number, Village name, Taluka name, Range, Division, and Legal status of forest land.&lt;/li&gt;
    &lt;li&gt;The area of the KML polygon &lt;strong&gt;must exactly match&lt;/strong&gt; the area shown in KML properties.&lt;/li&gt;
&lt;/ol&gt;
&lt;p class=&quot;note&quot;&gt;Tip from field: While preparing KML in Google Earth Pro, right-click the polygon → Properties → Description tab and manually enter all the above details. This saves huge time during DCF verification.&lt;/p&gt;

&lt;h2&gt;2. Simplified Procedure for Proposals up to 1 Hectare&lt;br&gt;&lt;small&gt;Under Scheduled Tribes &amp;amp; Other Traditional Forest Dwellers (Recognition of Forest Rights) Act, 2006 – Section 3(2)&lt;/small&gt;&lt;/h2&gt;

&lt;p&gt;Most PWD village-road, school, anganwadi, water supply and minor irrigation works fall under this category. Faster approval route through Gram Sabha + Range Forest Officer.&lt;/p&gt;

&lt;h3&gt;Checklist to be filled by User Agency (Sample-K)&lt;/h3&gt;
&lt;table&gt;
    &lt;tr&gt;&lt;th&gt;Sr.&lt;/th&gt;&lt;th&gt;Details&lt;/th&gt;&lt;th&gt;Compliance&lt;/th&gt;&lt;/tr&gt;
    &lt;tr&gt;&lt;td&gt;2&lt;/td&gt;&lt;td&gt;7/12 Extract / Ferfar Utare of proposed land&lt;/td&gt;&lt;td&gt;Yes&lt;/td&gt;&lt;/tr&gt;
    &lt;tr&gt;&lt;td&gt;3&lt;/td&gt;&lt;td&gt;Survey No. / Gat No. / Compartment No. mentioned?&lt;/td&gt;&lt;td&gt;Yes&lt;/td&gt;&lt;/tr&gt;
    &lt;tr&gt;&lt;td&gt;3&lt;/td&gt;&lt;td&gt;Survey of India map (1 inch = 2 miles or 1:50,000) attached?&lt;/td&gt;&lt;td&gt;Yes&lt;/td&gt;&lt;/tr&gt;
    &lt;tr&gt;&lt;td&gt;4&lt;/td&gt;&lt;td&gt;Justification for site selection mentioned?&lt;/td&gt;&lt;td&gt;Yes&lt;/td&gt;&lt;/tr&gt;
    &lt;tr&gt;&lt;td&gt;5&lt;/td&gt;&lt;td&gt;No. of trees to be felled &amp;amp; retained (per hectare) mentioned?&lt;/td&gt;&lt;td&gt;Yes&lt;/td&gt;&lt;/tr&gt;
    &lt;tr&gt;&lt;td&gt;6&lt;/td&gt;&lt;td&gt;Component-wise area statement of proposed work&lt;/td&gt;&lt;td&gt;Yes&lt;/td&gt;&lt;/tr&gt;
    &lt;tr&gt;&lt;td&gt;7&lt;/td&gt;&lt;td&gt;Detailed map of proposed building / work&lt;/td&gt;&lt;td&gt;Yes&lt;/td&gt;&lt;/tr&gt;
    &lt;tr&gt;&lt;td&gt;8&lt;/td&gt;&lt;td&gt;Proposal falls under any of 13 activities listed in Section 3(2)?&lt;/td&gt;&lt;td&gt;Yes&lt;/td&gt;&lt;/tr&gt;
    &lt;tr&gt;&lt;td&gt;9&lt;/td&gt;&lt;td&gt;Proposal area ≤ 1 hectare?&lt;/td&gt;&lt;td&gt;Yes&lt;/td&gt;&lt;/tr&gt;
    &lt;tr&gt;&lt;td&gt;10&lt;/td&gt;&lt;td&gt;Undertaking for double plantation &amp;amp; 5-year maintenance submitted?&lt;/td&gt;&lt;td&gt;—&lt;/td&gt;&lt;/tr&gt;
    &lt;tr&gt;&lt;td&gt;11&lt;/td&gt;&lt;td&gt;Gram Sabha recommendation with 50% quorum?&lt;/td&gt;&lt;td&gt;Yes&lt;/td&gt;&lt;/tr&gt;
    &lt;tr&gt;&lt;td&gt;12&lt;/td&gt;&lt;td&gt;Tahsildar certificate that non-forest land is not available?&lt;/td&gt;&lt;td&gt;Yes&lt;/td&gt;&lt;/tr&gt;
&lt;/table&gt;

&lt;h3&gt;Documents to be submitted (User Agency + Forest Department)&lt;/h3&gt;
&lt;ul&gt;
    &lt;li&gt;Sample-K (filled by User Agency)&lt;/li&gt;
    &lt;li&gt;Gram Sabha resolution + proceeding extract&lt;/li&gt;
    &lt;li&gt;1:50,000 scale map of proposed area&lt;/li&gt;
    &lt;li&gt;Detailed component-wise map of work&lt;/li&gt;
    &lt;li&gt;Administrative &amp;amp; Technical sanction letters&lt;/li&gt;
    &lt;li&gt;Sample-Kh (filled by Range Forest Officer) + Site Inspection + GPS Polygon&lt;/li&gt;
    &lt;li&gt;Certificate that no court case / FRA claims exist&lt;/li&gt;
    &lt;li&gt;7/12 extracts of proposed land &amp;amp; CA land&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;Ready-to-use Certificates (Forest Officer side)&lt;/h3&gt;
&lt;ul&gt;
    &lt;li&gt;No court case / claim certificate&lt;/li&gt;
    &lt;li&gt;No tree felling certificate (if area &amp;lt;1 ha and zero trees)&lt;/li&gt;
    &lt;li&gt;Approved work requires exactly ___ ha forest land&lt;/li&gt;
    &lt;li&gt;Project will be completed within 1 year after permission&lt;/li&gt;
    &lt;li&gt;Tahsildar certificate for non-availability of non-forest land&lt;/li&gt;
    &lt;li&gt;Double plantation &amp;amp; maintenance undertaking&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;3. Comprehensive Checklist for Regular FCA Proposals&lt;br&gt;&lt;small&gt;Under Van (Sanrakshan Evam Samvardhan) Adhiniyam, 1980&lt;/small&gt;&lt;/h2&gt;

&lt;p&gt;For projects larger than 1 ha or linear projects (roads, pipelines, transmission lines) — this is the master checklist used by DCF/CCF.&lt;/p&gt;

&lt;h3&gt;A. KML Files &amp;amp; Maps (must be verified &amp;amp; counter-signed by Surveyor + DCF + User Agency)&lt;/h3&gt;
&lt;ol&gt;
    &lt;li&gt;KML of proposed diversion area&lt;/li&gt;
    &lt;li&gt;KML of Compensatory Afforestation (CA) area&lt;/li&gt;
    &lt;li&gt;Geo-referenced digital map (shape file) using Total Station / DGPS showing forest / non-forest / adjoining land in different colours + Forest compartment boundary + Satellite imagery for density&lt;/li&gt;
    &lt;li&gt;Proposed forest &amp;amp; non-forest area on Topo-sheet&lt;/li&gt;
    &lt;li&gt;Map showing distance (in km) from nearest Protected Area / ESZ&lt;/li&gt;
    &lt;li&gt;Village map of proposed area&lt;/li&gt;
    &lt;li&gt;Map of alternative alignment / route examined&lt;/li&gt;
    &lt;li&gt;Map of CA land with geo-coordinates&lt;/li&gt;
&lt;/ol&gt;

&lt;h3&gt;B. Certificates by Deputy Conservator of Forests (DCF) — 17 Nos.&lt;/h3&gt;
&lt;ul&gt;
    &lt;li&gt;Documents verification certificate&lt;/li&gt;
    &lt;li&gt;Justification of site specificity&lt;/li&gt;
    &lt;li&gt;Certificate of absence of alternatives &amp;amp; minimum forest demand&lt;/li&gt;
    &lt;li&gt;Alternatives examined for linear projects&lt;/li&gt;
    &lt;li&gt;Wildlife certificate (not part of PA / Sanctuary)&lt;/li&gt;
    &lt;li&gt;Distance from Protected Area certificate&lt;/li&gt;
    &lt;li&gt;No impact on monuments / cultural / historical sites&lt;/li&gt;
    &lt;li&gt;No violation of FCA 1980 certificate&lt;/li&gt;
    &lt;li&gt;Non-forest area not covered under Maharashtra Private Forest Act 1975&lt;/li&gt;
    &lt;li&gt;List of Identified forests&lt;/li&gt;
    &lt;li&gt;Net Present Value (NPV) certificate with eco-class (GOI letter 05/02/2009)&lt;/li&gt;
    &lt;li&gt;Tree felling certificate&lt;/li&gt;
    &lt;li&gt;Species-wise / girth-wise tree list + estimate (counter-signed by DCF)&lt;/li&gt;
    &lt;li&gt;CA area identification &amp;amp; site suitability certificate&lt;/li&gt;
    &lt;li&gt;7/12 extract / RoR of proposed land &amp;amp; CA land&lt;/li&gt;
    &lt;li&gt;Compensatory Afforestation scheme (Model No. as per PCCF letter dated 19/11/2019)&lt;/li&gt;
    &lt;li&gt;Site Inspection Report of DCF&lt;/li&gt;
    &lt;li&gt;Part-II form duly filled&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;C. Certificates by Chief Conservator of Forests (CCF)&lt;/h3&gt;
&lt;ul&gt;
    &lt;li&gt;Site Inspection Report of CCF&lt;/li&gt;
    &lt;li&gt;NPV certificate counter-signed by CCF&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;D. Documents / Undertakings by Project Agency (User Agency) — 18 Nos.&lt;/h3&gt;
&lt;ul&gt;
    &lt;li&gt;Detailed Project Note with salient features&lt;/li&gt;
    &lt;li&gt;Justification of site specificity&lt;/li&gt;
    &lt;li&gt;Item-wise break-up of forest &amp;amp; non-forest area&lt;/li&gt;
    &lt;li&gt;Attempts made to locate non-forest land + reasons for rejection&lt;/li&gt;
    &lt;li&gt;Undertaking to pay NPV as per GoI orders&lt;/li&gt;
    &lt;li&gt;Undertaking to bear full cost of CA&lt;/li&gt;
    &lt;li&gt;Undertaking to bear tree felling &amp;amp; allied works cost&lt;/li&gt;
    &lt;li&gt;FRA Certificate&lt;/li&gt;
    &lt;li&gt;Undertaking of no violation of FCA 1980&lt;/li&gt;
    &lt;li&gt;Cost-Benefit Analysis&lt;/li&gt;
    &lt;li&gt;Undertaking to obtain Environmental Clearance (if applicable)&lt;/li&gt;
    &lt;li&gt;Non-indemnity undertaking to Forest Department&lt;/li&gt;
    &lt;li&gt;NOC from private owner (if Private Forest land involved)&lt;/li&gt;
    &lt;li&gt;Undertaking for Catchment Area Treatment Plan&lt;/li&gt;
    &lt;li&gt;Catchment Area Treatment Plan document&lt;/li&gt;
    &lt;li&gt;Muck Disposal Plan&lt;/li&gt;
    &lt;li&gt;Undertaking regarding location inside/outside Scheduled Tribal Area&lt;/li&gt;
    &lt;li&gt;No Objection Certificate from MD, FDCM (if required)&lt;/li&gt;
&lt;/ul&gt;

&lt;div class=&quot;new-section&quot;&gt;
&lt;h2&gt;4. Documents Required for Tree Ownership Certificate (Maliki Prakaran / झाडांची मालकी प्रमाणपत्र)&lt;br&gt;&lt;small&gt;Maharashtra Revenue Department – Essential List for Private / Identified Forest Land&lt;/small&gt;&lt;/h2&gt;

&lt;p&gt;Whenever your proposal involves &lt;strong&gt;Private Forest&lt;/strong&gt;, &lt;strong&gt;Identified Forest&lt;/strong&gt; or tree enumeration on non-government land, you &lt;strong&gt;must&lt;/strong&gt; attach the complete Tree Ownership (Maliki) documents. These are issued by Talathi → Tahsildar → District Collector and are cross-verified by the Forest Department.&lt;/p&gt;

&lt;p&gt;Without these, DCF will not accept tree felling estimates or CA calculations — a very common reason for rejection in PWD road &amp;amp; EPC projects.&lt;/p&gt;

&lt;h3&gt;Complete Checklist of 11 Documents (मालकी प्रकरणांसाठी आवश्यक असलेली कागदपत्रे)&lt;/h3&gt;
&lt;table&gt;
    &lt;tr&gt;&lt;th&gt;Sr.&lt;/th&gt;&lt;th&gt;Document&lt;/th&gt;&lt;th&gt;Issued By&lt;/th&gt;&lt;th&gt;Purpose&lt;/th&gt;&lt;/tr&gt;
    &lt;tr&gt;&lt;td&gt;1&lt;/td&gt;&lt;td&gt;&lt;strong&gt;7/12 Extract&lt;/strong&gt; showing details of trees *&lt;/td&gt;&lt;td&gt;Talathi&lt;/td&gt;&lt;td&gt;Proof of land + tree ownership&lt;/td&gt;&lt;/tr&gt;
    &lt;tr&gt;&lt;td&gt;2&lt;/td&gt;&lt;td&gt;&lt;strong&gt;Consent letter / Jamband Patra&lt;/strong&gt; (if more than one occupant in 7/12) *&lt;/td&gt;&lt;td&gt;Other occupants + in presence of Tahsildar&lt;/td&gt;&lt;td&gt;Multiple owners case&lt;/td&gt;&lt;/tr&gt;
    &lt;tr&gt;&lt;td&gt;3&lt;/td&gt;&lt;td&gt;&lt;strong&gt;Gav Form No. 8&lt;/strong&gt; *&lt;/td&gt;&lt;td&gt;Talathi&lt;/td&gt;&lt;td&gt;Official village record&lt;/td&gt;&lt;/tr&gt;
    &lt;tr&gt;&lt;td&gt;4&lt;/td&gt;&lt;td&gt;&lt;strong&gt;Survey Maps&lt;/strong&gt; (Settlement / Re-measurement / Consolidation / Present status / TILR) *&lt;/td&gt;&lt;td&gt;Talathi / Tahsildar&lt;/td&gt;&lt;td&gt;Exact boundary &amp;amp; survey number proof&lt;/td&gt;&lt;/tr&gt;
    &lt;tr&gt;&lt;td&gt;5&lt;/td&gt;&lt;td&gt;&lt;strong&gt;Boundary Certificate&lt;/strong&gt; showing names of adjacent land owners &amp;amp; survey numbers *&lt;/td&gt;&lt;td&gt;Talathi&lt;/td&gt;&lt;td&gt;Neighbouring ownership details&lt;/td&gt;&lt;/tr&gt;
    &lt;tr&gt;&lt;td&gt;6&lt;/td&gt;&lt;td&gt;&lt;strong&gt;Ownership Certificate&lt;/strong&gt; for land &amp;amp; trees (Class-I / Class-II Bhogwatidar) *&lt;/td&gt;&lt;td&gt;Tahsildar / Naib Tahsildar / SDO&lt;/td&gt;&lt;td&gt;Clear legal ownership of land &amp;amp; trees&lt;/td&gt;&lt;/tr&gt;
    &lt;tr&gt;&lt;td&gt;7&lt;/td&gt;&lt;td&gt;&lt;strong&gt;Caste Certificate&lt;/strong&gt; (if applicant belongs to Scheduled Tribe)&lt;/td&gt;&lt;td&gt;Tahsildar / SDO (Revenue)&lt;/td&gt;&lt;td&gt;ST category cases&lt;/td&gt;&lt;/tr&gt;
    &lt;tr&gt;&lt;td&gt;8&lt;/td&gt;&lt;td&gt;&lt;strong&gt;Survey-number-wise Tree List&lt;/strong&gt; *&lt;/td&gt;&lt;td&gt;Applicant / Talathi&lt;/td&gt;&lt;td&gt;Exact tree enumeration&lt;/td&gt;&lt;/tr&gt;
    &lt;tr&gt;&lt;td&gt;9&lt;/td&gt;&lt;td&gt;&lt;strong&gt;Certificate for water source&lt;/strong&gt; (if bank, tank or water body within 30 m)&lt;/td&gt;&lt;td&gt;District Collector&lt;/td&gt;&lt;td&gt;Restriction near water bodies&lt;/td&gt;&lt;/tr&gt;
    &lt;tr&gt;&lt;td&gt;10&lt;/td&gt;&lt;td&gt;&lt;strong&gt;Certificate for low tree growth&lt;/strong&gt; (if non-agricultural land with sparse trees – 20 trees = 1 new plantation)&lt;/td&gt;&lt;td&gt;District Collector&lt;/td&gt;&lt;td&gt;Compensatory plantation relaxation&lt;/td&gt;&lt;/tr&gt;
    &lt;tr&gt;&lt;td&gt;11&lt;/td&gt;&lt;td&gt;&lt;strong&gt;Written Certificate from Forest Officer&lt;/strong&gt; *&lt;/td&gt;&lt;td&gt;Range Forest Officer / DCF&lt;/td&gt;&lt;td&gt;Final Forest Department confirmation&lt;/td&gt;&lt;/tr&gt;
&lt;/table&gt;
&lt;p class=&quot;note&quot;&gt;* = Most critical documents (starred in official circular). Keep scanned copies ready with counter-signatures.&lt;/p&gt;

&lt;h3&gt;Practical Tips for PWD Engineers&lt;/h3&gt;
&lt;ul&gt;
    &lt;li&gt;Start with Talathi for 7/12 + Gav Form 8 + Boundary Certificate — these three are needed in almost every proposal.&lt;/li&gt;
    &lt;li&gt;If survey number touches government land, get TILR map + Tahsildar certified map immediately.&lt;/li&gt;
    &lt;li&gt;Tree list (Sr. 8) must match the enumeration done by Forest Department — mismatch = rejection.&lt;/li&gt;
    &lt;li&gt;For road projects, attach chainage-wise tree list in the Maliki file itself.&lt;/li&gt;
    &lt;li&gt;Coordinate with Tahsildar early — the entire Maliki file usually takes 15–30 days.&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;

&lt;h2&gt;Practical Tips from a PWD Engineer’s Desk (Updated with Maliki Documents)&lt;/h2&gt;
&lt;ul&gt;
    &lt;li&gt;Always prepare two separate KMLs — one for diversion and one for CA land. Name them clearly: &lt;code&gt;ProjectName_Diversion.kml&lt;/code&gt; and &lt;code&gt;ProjectName_CA.kml&lt;/code&gt;&lt;/li&gt;
    &lt;li&gt;Use QGIS or Google Earth Pro with Survey of India toposheet as base. Export as KML only after adding all attributes.&lt;/li&gt;
    &lt;li&gt;For road projects, show chainage on the KML polygon description &lt;strong&gt;and&lt;/strong&gt; in the Maliki tree list.&lt;/li&gt;
    &lt;li&gt;Keep scanned copies of all counter-signatures + complete Maliki file ready — PARIVESH now asks for geo-tagged photos also in many cases.&lt;/li&gt;
    &lt;li&gt;Coordinate with Range Forest Officer early — his GPS polygon, Part-II form &lt;strong&gt;and&lt;/strong&gt; Maliki verification are the backbone of the proposal.&lt;/li&gt;
    &lt;li&gt;NPV, CA scheme model number, tree enumeration and &lt;strong&gt;Maliki documents&lt;/strong&gt; are the four most common reasons for delay — get them vetted by DCF before final submission.&lt;/li&gt;
&lt;/ul&gt;

&lt;h1&gt;वन जमीन वापरासाठी - तपासणी सूची व प्रमाणपत्रे (HTML आवृत्ती)&lt;/h1&gt;
&lt;div class=&quot;container&quot;&gt;

    &lt;!-- Checklist Table 1 --&gt;
    &lt;div class=&quot;checklist&quot;&gt;
        &lt;div class=&quot;section-title&quot;&gt;१. तपासणाऱ्या सूची (वापरकर्ता अभिकरणाने नमुना-क सोबत जोडणे)&lt;/div&gt;
        &lt;table&gt;
            &lt;thead&gt;
                &lt;tr&gt;
                    &lt;th style=&quot;width:50px;&quot;&gt;अ.क्र.&lt;/th&gt;
                    &lt;th&gt;तपशिल&lt;/th&gt;
                    &lt;th class=&quot;yes-no&quot;&gt;होय&lt;/th&gt;
                    &lt;th class=&quot;yes-no&quot;&gt;नाही&lt;/th&gt;
                    &lt;th class=&quot;remark&quot;&gt;शेरा&lt;/th&gt;
                &lt;/tr&gt;
            &lt;/thead&gt;
            &lt;tbody&gt;
                &lt;tr&gt;&lt;td&gt;२&lt;/td&gt;&lt;td&gt;प्रस्तावित जमिनीचा ७/१२ उतारा / फेरफार उतारा&lt;/td&gt;&lt;td style=&quot;text-align:center;&quot;&gt;होय&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;
                &lt;tr&gt;&lt;td&gt;३&lt;/td&gt;&lt;td&gt;सर्वे क्रमांक / गट क्रमांक / कक्ष क्रमांक नमूद आहे काय?&lt;/td&gt;&lt;td style=&quot;text-align:center;&quot;&gt;होय&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;
                &lt;tr&gt;&lt;td&gt;३&lt;/td&gt;&lt;td&gt;रु.५,००,००० व इंच = २ मैल प्रमाणे नकाशा जोडला आहे (सर्वे ऑफ इंडियाचा नकाशा)&lt;/td&gt;&lt;td style=&quot;text-align:center;&quot;&gt;होय&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;
                &lt;tr&gt;&lt;td&gt;४&lt;/td&gt;&lt;td&gt;प्रस्तावाच्या स्थळाबाबत समर्थन नमूद केले आहे काय?&lt;/td&gt;&lt;td style=&quot;text-align:center;&quot;&gt;होय&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;
                &lt;tr&gt;&lt;td&gt;५&lt;/td&gt;&lt;td&gt;प्रस्तावातर्गत तोडावयाच्या झाडांची संख्या व राखून ठेवावयाच्या झाडांची संख्या (प्रति हेक्टरी) नमूद केली आहे काय?&lt;/td&gt;&lt;td style=&quot;text-align:center;&quot;&gt;होय&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;
                &lt;tr&gt;&lt;td&gt;६&lt;/td&gt;&lt;td&gt;प्रस्तावित कामाचे क्षेत्रासंबंधी वनविभागीय क्षेत्र विवरण&lt;/td&gt;&lt;td style=&quot;text-align:center;&quot;&gt;होय&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;
                &lt;tr&gt;&lt;td&gt;७&lt;/td&gt;&lt;td&gt;प्रस्तावित इमारत / कामाचा नकाशा&lt;/td&gt;&lt;td style=&quot;text-align:center;&quot;&gt;होय&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;
                &lt;tr&gt;&lt;td&gt;८&lt;/td&gt;&lt;td&gt;मागणी केलेल्या प्रस्ताव उक्त अधिनियमातील कलम ३(२) मध्ये नमूद केलेल्या १३ बाबींपैकी आहे काय?&lt;/td&gt;&lt;td style=&quot;text-align:center;&quot;&gt;होय&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;
                &lt;tr&gt;&lt;td&gt;९&lt;/td&gt;&lt;td&gt;मागणी केलेल्या प्रस्ताव १ हेक्टरच्या मर्यादित आहे काय?&lt;/td&gt;&lt;td style=&quot;text-align:center;&quot;&gt;होय&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;
                &lt;tr&gt;&lt;td&gt;१०&lt;/td&gt;&lt;td&gt;तोड होणा-या झाडांच्या बदल्यात दुप्पट झाडे लावून देण्याबाबत व देखभालीबाबत हमीपत्र दिले आहे काय?&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;
                &lt;tr&gt;&lt;td&gt;११&lt;/td&gt;&lt;td&gt;ग्रामसभेचे (५०%) गणपूर्ती शिफारस केली आहे काय?&lt;/td&gt;&lt;td style=&quot;text-align:center;&quot;&gt;होय&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;
                &lt;tr&gt;&lt;td&gt;१२&lt;/td&gt;&lt;td&gt;वनंतर जमीन उपलब्ध नसल्याबाबतचा तहसिलदार यांचा दाखला जोडलेला आहे काय?&lt;/td&gt;&lt;td style=&quot;text-align:center;&quot;&gt;होय&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;
            &lt;/tbody&gt;
        &lt;/table&gt;
        &lt;div style=&quot;display:flex; justify-content:space-between; margin-top:20px; font-size:14px;&quot;&gt;
            &lt;div&gt;&lt;strong&gt;दिनांक :&lt;/strong&gt; ___________________&lt;/div&gt;
            &lt;div&gt;&lt;strong&gt;ठिकाण :&lt;/strong&gt; ___________________&lt;/div&gt;
            &lt;div&gt;&lt;strong&gt;कार्यकारी यंत्रणा&lt;/strong&gt;&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;

    &lt;!-- Checklist Table 2 --&gt;
    &lt;div class=&quot;checklist&quot;&gt;
        &lt;div class=&quot;section-title&quot;&gt;२. अनुसूचीत जमाती व इतर पारंपारिक वननिवासी (वन हक्काची मान्यता) अधिनियम-२००६ च्या कलम ३ चे पोटकलम (२) अन्वये दस्तऐवज सूची&lt;/div&gt;
        &lt;table&gt;
            &lt;thead&gt;
                &lt;tr&gt;
                    &lt;th style=&quot;width:50px;&quot;&gt;अ.क्र.&lt;/th&gt;
                    &lt;th&gt;तपशिल&lt;/th&gt;
                    &lt;th style=&quot;width:120px;&quot;&gt;पान क्रमांक&lt;/th&gt;
                    &lt;th style=&quot;width:80px;&quot;&gt;पासून&lt;/th&gt;
                    &lt;th style=&quot;width:80px;&quot;&gt;पर्यंत&lt;/th&gt;
                &lt;/tr&gt;
            &lt;/thead&gt;
            &lt;tbody&gt;
                &lt;tr&gt;&lt;td colspan=&quot;5&quot; style=&quot;background:#f0f0f0; font-weight:700;&quot;&gt;वापरकर्ता अभिकरणाने सादर करावयाचे दस्तऐवज&lt;/td&gt;&lt;/tr&gt;
                &lt;tr&gt;&lt;td&gt;१&lt;/td&gt;&lt;td&gt;वापरकर्ता अभिकरणाने सादर करावयाचे दस्तऐवज&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;
                &lt;tr&gt;&lt;td&gt;२&lt;/td&gt;&lt;td&gt;वापरकर्ता अभिकरणाने भरलेला नमुना-क&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;
                &lt;tr&gt;&lt;td&gt;३&lt;/td&gt;&lt;td&gt;ग्रामसभा ठराव&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;
                &lt;tr&gt;&lt;td&gt;४&lt;/td&gt;&lt;td&gt;ग्रामसभा प्रासिडिंगचा उतारा&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;
                &lt;tr&gt;&lt;td&gt;५&lt;/td&gt;&lt;td&gt;प्रस्तावांतर्गत क्षेत्राचा नकाशा (१:५००००)&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;
                &lt;tr&gt;&lt;td&gt;६&lt;/td&gt;&lt;td&gt;प्रस्तावित कामाचा सविस्तर हेतुनिहाय विवरण नकाशा&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;
                &lt;tr&gt;&lt;td&gt;७&lt;/td&gt;&lt;td&gt;कामाचे अंदाजपत्रक&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;
                &lt;tr&gt;&lt;td&gt;८&lt;/td&gt;&lt;td&gt;प्रशासकीय मंजुरीचे पत्र व तांत्रिक मंजुरी पत्र&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;
                &lt;tr&gt;&lt;td&gt;९&lt;/td&gt;&lt;td&gt;ग्रामसभेमध्ये ५०% गणपूर्तता बाबतचा दाखला&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;
                &lt;tr&gt;&lt;td&gt;१०&lt;/td&gt;&lt;td&gt;सदर प्रयोजनासाठी वनेतर जमीन उपलब्ध नसल्याबाबतचा तहसिलदार यांचा दाखला&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;
                
                &lt;tr&gt;&lt;td colspan=&quot;5&quot; style=&quot;background:#f0f0f0; font-weight:700;&quot;&gt;वनक्षेत्रपाल यांनी सादर करावयाचे दस्तऐवज&lt;/td&gt;&lt;/tr&gt;
                &lt;tr&gt;&lt;td&gt;११&lt;/td&gt;&lt;td&gt;वनक्षेत्रपाल यांनी भरलेला नमुना-ख (स्वयंस्पष्ट अभिप्रायसह)&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;
                &lt;tr&gt;&lt;td&gt;१२&lt;/td&gt;&lt;td&gt;स्थळावरचा पंचनामा व जी.पी.एस. पॉलिगॉन नकाशा जोडलेला आहे.&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;
                &lt;tr&gt;&lt;td&gt;१३&lt;/td&gt;&lt;td&gt;स्थळनिरीक्षण पंचनामा&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;
                &lt;tr&gt;&lt;td&gt;१४&lt;/td&gt;&lt;td&gt;कोर्टकेस / इतर दावा आहे किंवा नाही याबाबत प्रमाणपत्र&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;
                &lt;tr&gt;&lt;td&gt;१५&lt;/td&gt;&lt;td&gt;प्रस्तावित वनहक्क २००६ चे वैयक्तिक व सामुहिक दावे नसले बाबतचे प्रमाणपत्र&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;
            &lt;/tbody&gt;
        &lt;/table&gt;
        &lt;div style=&quot;display:flex; justify-content:space-between; margin-top:20px; font-size:14px;&quot;&gt;
            &lt;div&gt;&lt;strong&gt;दिनांक :&lt;/strong&gt; ___________________&lt;/div&gt;
            &lt;div&gt;&lt;strong&gt;ठिकाण :&lt;/strong&gt; ___________________&lt;/div&gt;
            &lt;div&gt;&lt;strong&gt;वनपरिक्षेत्र अधिकारी&lt;/strong&gt;&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;

    &lt;h2 style=&quot;margin-top:60px;&quot;&gt;प्रमाणपत्रे (प्रत्येक प्रमाणपत्र वेगळ्या पानावर)&lt;/h2&gt;

    &lt;!-- Certificate 1 --&gt;
    &lt;div class=&quot;certificate-page&quot;&gt;
        &lt;div class=&quot;certificate-content&quot;&gt;
            &lt;div class=&quot;certificate-header&quot;&gt;प्रमाणपत्र&lt;/div&gt;
            &lt;div class=&quot;certificate-title&quot;&gt;प्रमाणित करण्यात येते की, वापरकर्ता अभिकरणाने सादर केलेला प्रस्ताव उक्त अधिनियमातील कलम ३(२) मध्ये नमूद केलेल्या १३ पैकी आहे. वापरकर्ता अभिकरणाने मागणी केलेल्या ________________ क्षेत्रावर कोर्टकेस / इतर दावा दाखल नाही. प्रस्ताव योग्य असल्याने मंजुरीबाबत शिफारस करणेत येत आहे.&lt;/div&gt;
            &lt;div class=&quot;signature-block&quot;&gt;
                &lt;div class=&quot;signature-left&quot;&gt;
                    &lt;strong&gt;दिनांक :&lt;/strong&gt; ___________________&lt;br&gt;
                    &lt;strong&gt;ठिकाण :&lt;/strong&gt; ___________________
                &lt;/div&gt;
                &lt;div class=&quot;signature-right&quot;&gt;
                    &lt;strong&gt;वनपरिक्षेत्र अधिकारी&lt;/strong&gt;
                &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class=&quot;page-number&quot;&gt;पान १&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;

    &lt;!-- Certificate 2 --&gt;
    &lt;div class=&quot;certificate-page&quot;&gt;
        &lt;div class=&quot;certificate-content&quot;&gt;
            &lt;div class=&quot;certificate-header&quot;&gt;प्रमाणपत्र&lt;/div&gt;
            &lt;div class=&quot;certificate-title&quot;&gt;प्रमाणित करण्यात येते की, वापरकर्ता अभिकरणाने सादर केलेला प्रस्ताव उक्त अधिनियमातील कलम ३(२) मध्ये नमूद केलेल्या १३ पैकी आहे. वापरकर्ता अभिकरणाने मागणी केलेल्या मौजे ________________ हेक्टर क्षेत्राची प्रकल्प यंत्रणेचे प्रतिनिधी समवेत दिनांक ________________ रोजी स्थळ पाहणी केली असून मागणी केलेले क्षेत्र १.०० हेक्टरपेक्षा कमी असून कक्ष क्र. ________________ क्षेत्रात कोणतीही झाडे नसून एकाही झाडाची तोड होणार नाही. नियमानुसार प्रस्ताव योग्य असल्याने मंजुरीबाबत शिफारस करणेत येत आहे.&lt;/div&gt;
            &lt;div class=&quot;signature-block&quot;&gt;
                &lt;div class=&quot;signature-left&quot;&gt;
                    &lt;strong&gt;दिनांक :&lt;/strong&gt; ___________________&lt;br&gt;
                    &lt;strong&gt;ठिकाण :&lt;/strong&gt; ___________________
                &lt;/div&gt;
                &lt;div class=&quot;signature-right&quot;&gt;
                    &lt;strong&gt;वनपरिक्षेत्र अधिकारी&lt;/strong&gt;
                &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class=&quot;page-number&quot;&gt;पान २&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;

    &lt;!-- Certificate 3 --&gt;
    &lt;div class=&quot;certificate-page&quot;&gt;
        &lt;div class=&quot;certificate-content&quot;&gt;
            &lt;div class=&quot;certificate-header&quot;&gt;प्रमाणपत्र&lt;/div&gt;
            &lt;div class=&quot;certificate-title&quot;&gt;प्रमाणित करण्यात येते की, मंजूर असलेली ________________ कामासाठी ________________ हेक्टर वनजमिनीची आवश्यकता आहे.&lt;/div&gt;
            &lt;div class=&quot;signature-block&quot;&gt;
                &lt;div class=&quot;signature-left&quot;&gt;
                    &lt;strong&gt;दिनांक :&lt;/strong&gt; ___________________&lt;br&gt;
                    &lt;strong&gt;ठिकाण :&lt;/strong&gt; ___________________
                &lt;/div&gt;
                &lt;div class=&quot;signature-right&quot;&gt;
                    &lt;strong&gt;वनपरिक्षेत्र अधिकारी&lt;/strong&gt;&lt;br&gt;
                    &lt;strong&gt;संबंधित यंत्रणा&lt;/strong&gt;
                &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class=&quot;page-number&quot;&gt;पान ३&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;

    &lt;!-- Certificate 4 --&gt;
    &lt;div class=&quot;certificate-page&quot;&gt;
        &lt;div class=&quot;certificate-content&quot;&gt;
            &lt;div class=&quot;certificate-header&quot;&gt;प्रमाणपत्र&lt;/div&gt;
            &lt;div class=&quot;certificate-title&quot;&gt;प्रमाणित करण्यात येते की, मंजूर असलेली ________________ कामासाठी ________________ हेक्टर मध्ये काम वगळता योजनेचे काम प्रगतीत आहे.&lt;/div&gt;
            &lt;div class=&quot;signature-block&quot;&gt;
                &lt;div class=&quot;signature-left&quot;&gt;
                    &lt;strong&gt;दिनांक :&lt;/strong&gt; ___________________&lt;br&gt;
                    &lt;strong&gt;ठिकाण :&lt;/strong&gt; ___________________
                &lt;/div&gt;
                &lt;div class=&quot;signature-right&quot;&gt;
                    &lt;strong&gt;वनपरिक्षेत्र अधिकारी&lt;/strong&gt;&lt;br&gt;
                    &lt;strong&gt;संबंधित यंत्रणा&lt;/strong&gt;
                &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class=&quot;page-number&quot;&gt;पान ४&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;

    &lt;!-- Certificate 5 --&gt;
    &lt;div class=&quot;certificate-page&quot;&gt;
        &lt;div class=&quot;certificate-content&quot;&gt;
            &lt;div class=&quot;certificate-header&quot;&gt;प्रमाणपत्र&lt;/div&gt;
            &lt;div class=&quot;certificate-title&quot;&gt;प्रमाणित करण्यात येते की, मंजूर असलेली ________________ कामासाठी ________________ हेक्टर हे काम वनखात्याची परवानगी मिळाल्यानंतर १ वर्षाच्या आत काम पूर्ण करण्यात येईल.&lt;/div&gt;
            &lt;div class=&quot;signature-block&quot;&gt;
                &lt;div class=&quot;signature-left&quot;&gt;
                    &lt;strong&gt;दिनांक :&lt;/strong&gt; ___________________&lt;br&gt;
                    &lt;strong&gt;ठिकाण :&lt;/strong&gt; ___________________
                &lt;/div&gt;
                &lt;div class=&quot;signature-right&quot;&gt;
                    &lt;strong&gt;वनपरिक्षेत्र अधिकारी&lt;/strong&gt;&lt;br&gt;
                    &lt;strong&gt;संबंधित यंत्रणा&lt;/strong&gt;
                &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class=&quot;page-number&quot;&gt;पान ५&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;

    &lt;!-- Certificate 6 --&gt;
    &lt;div class=&quot;certificate-page&quot;&gt;
        &lt;div class=&quot;certificate-content&quot;&gt;
            &lt;div class=&quot;certificate-header&quot;&gt;प्रमाणपत्र&lt;/div&gt;
            &lt;div class=&quot;certificate-title&quot;&gt;प्रमाणित करण्यात येते की, मंजूर असलेली ________________ या कामासाठी मागणी करण्यात आलेल्या जमिनी व्यतिरिक्त खाजगी / सरकारी / वनेतर जमीन उपलब्ध नाही. तसा तहसिलदार ________________ यांचा दाखला सोबत जोडण्यात आलेला आहे.&lt;/div&gt;
            &lt;div class=&quot;signature-block&quot;&gt;
                &lt;div class=&quot;signature-left&quot;&gt;
                    &lt;strong&gt;दिनांक :&lt;/strong&gt; ___________________&lt;br&gt;
                    &lt;strong&gt;ठिकाण :&lt;/strong&gt; ___________________
                &lt;/div&gt;
                &lt;div class=&quot;signature-right&quot;&gt;
                    &lt;strong&gt;वनपरिक्षेत्र अधिकारी&lt;/strong&gt;&lt;br&gt;
                    &lt;strong&gt;संबंधित यंत्रणा&lt;/strong&gt;
                &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class=&quot;page-number&quot;&gt;पान ६&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;

    &lt;!-- Certificate 7 --&gt;
    &lt;div class=&quot;certificate-page&quot;&gt;
        &lt;div class=&quot;certificate-content&quot;&gt;
            &lt;div class=&quot;certificate-header&quot;&gt;प्रमाणपत्र&lt;/div&gt;
            &lt;div class=&quot;certificate-title&quot;&gt;प्रमाणित करण्यात येते की, मंजूर असलेली ________________ या कामासाठी हे काम पूर्ण करण्यात आल्यानंतर योजनेच्या क्षेत्रात बाजूस झाडे लावून त्यांचे संगोपन करण्यात येईल.&lt;/div&gt;
            &lt;div class=&quot;signature-block&quot;&gt;
                &lt;div class=&quot;signature-left&quot;&gt;
                    &lt;strong&gt;दिनांक :&lt;/strong&gt; ___________________&lt;br&gt;
                    &lt;strong&gt;ठिकाण :&lt;/strong&gt; ___________________
                &lt;/div&gt;
                &lt;div class=&quot;signature-right&quot;&gt;
                    &lt;strong&gt;वनपरिक्षेत्र अधिकारी&lt;/strong&gt;&lt;br&gt;
                    &lt;strong&gt;संबंधित यंत्रणा&lt;/strong&gt;
                &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class=&quot;page-number&quot;&gt;पान ७&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;

    &lt;!-- Certificate 8 --&gt;
    &lt;div class=&quot;certificate-page&quot;&gt;
        &lt;div class=&quot;certificate-content&quot;&gt;
            &lt;div class=&quot;certificate-header&quot;&gt;प्रमाणपत्र&lt;/div&gt;
            &lt;div class=&quot;certificate-title&quot;&gt;प्रमाणित करण्यात येते की, मंजूर असलेली ________________ या कामासाठी मागणी करण्यात आलेल्या जमिनी व्यतिरिक्त खाजगी / सरकारी / वनेतर जमीन उपलब्ध नाही. तसा तहसिलदार ________________ यांचा दाखला सोबत जोडण्यात आलेला आहे.&lt;/div&gt;
            &lt;div class=&quot;signature-block&quot;&gt;
                &lt;div class=&quot;signature-left&quot;&gt;
                    &lt;strong&gt;दिनांक :&lt;/strong&gt; ___________________&lt;br&gt;
                    &lt;strong&gt;ठिकाण :&lt;/strong&gt; ___________________
                &lt;/div&gt;
                &lt;div class=&quot;signature-right&quot;&gt;
                    &lt;strong&gt;वनपरिक्षेत्र अधिकारी&lt;/strong&gt;
                &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class=&quot;page-number&quot;&gt;पान ८&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;

    &lt;!-- Certificate 9 --&gt;
    &lt;div class=&quot;certificate-page&quot;&gt;
        &lt;div class=&quot;certificate-content&quot;&gt;
            &lt;div class=&quot;certificate-header&quot;&gt;प्रमाणपत्र&lt;/div&gt;
            &lt;div class=&quot;certificate-title&quot;&gt;प्रमाणित करण्यात येते की, मंजूर असलेली ________________ या कामासाठी हे काम पूर्ण करण्यात आल्यानंतर योजनेच्या क्षेत्रात बाजूस झाडे लावून त्यांचे संगोपन करण्यात येईल.&lt;/div&gt;
            &lt;div class=&quot;signature-block&quot;&gt;
                &lt;div class=&quot;signature-left&quot;&gt;
                    &lt;strong&gt;दिनांक :&lt;/strong&gt; ___________________&lt;br&gt;
                    &lt;strong&gt;ठिकाण :&lt;/strong&gt; ___________________
                &lt;/div&gt;
                &lt;div class=&quot;signature-right&quot;&gt;
                    &lt;strong&gt;वनपरिक्षेत्र अधिकारी&lt;/strong&gt;
                &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class=&quot;page-number&quot;&gt;पान ९&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;

&lt;/div&gt;

&lt;script&gt;
    console.log(&quot;%c✅ वन जमीन तपासणी सूची व प्रमाणपत्रे HTML तयार आहे! मुद्रित करण्यासाठी Ctrl + P दाबा. प्रत्येक प्रमाणपत्र स्वतंत्र पानावर येईल.&quot;, &quot;color:#006400; font-size:14px; font-weight:bold&quot;);
&lt;/script&gt;

&lt;h2&gt;Conclusion&lt;/h2&gt;
&lt;p&gt;Forest clearance is no longer just paperwork — it is a technical deliverable that can make or break your project timeline. Follow the above KML guidelines, use the correct checklist as per area (≤1 ha or &amp;gt;1 ha), attach complete Tree Maliki documents, and ensure every map and certificate is counter-signed.&lt;/p&gt;

&lt;p class=&quot;highlight&quot;&gt;Save this article. Bookmark the PCCF circular dated 20/11/2025 and the Maliki document list. Next time you prepare a forest diversion proposal for any PWD or EPC project in Maharashtra, you will finish the documentation in half the time and with zero rejection risk.&lt;/p&gt;
&lt;hr&gt;
&lt;p style=&quot;font-size:0.9em; text-align:center; color:#555;&quot;&gt;
    Last updated: April 2026 | Source: Official PCCF Maharashtra Circulars, Van Sanrakshan Adhiniyam 1980 checklists &amp;amp; Revenue Department Maliki Guidelines
&lt;/p&gt;&lt;div class=&quot;blogger-post-footer&quot;&gt;https://yogipwd.blogspot.com/&lt;/div&gt;</description><link>https://www.yogipwd.com/2026/04/maharashtra-forest-land-diversion-2026.html</link><author>noreply@blogger.com (Yogendra)</author><thr:total>0</thr:total></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-1074964965522467583.post-776033809780190442</guid><pubDate>Sat, 11 Apr 2026 05:17:00 +0000</pubDate><atom:updated>2026-04-11T10:47:31.195+05:30</atom:updated><title>rules and guidelines for granting permission for access roads (approach roads) to fuel stations, resorts, hotels, and other establishments located along State Highways and District Roads</title><description>&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;PWD Access Road Norms Calculator&lt;/title&gt;
    &lt;style&gt;
        body { font-family: &#39;Segoe UI&#39;, Tahoma, Geneva, Verdana, sans-serif; background-color: #f4f7f6; margin: 20px; color: #333; }
        .container { max-width: 600px; background: white; padding: 25px; border-radius: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); margin: auto; }
        h2 { color: #2c3e50; text-align: center; border-bottom: 2px solid #3498db; padding-bottom: 10px; }
        .form-group { margin-bottom: 15px; }
        label { display: block; font-weight: bold; margin-bottom: 5px; }
        select, input { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 5px; box-sizing: border-box; }
        button { width: 100%; padding: 12px; background-color: #3498db; color: white; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; font-weight: bold; }
        button:hover { background-color: #2980b9; }
        .results { margin-top: 20px; display: none; }
        .result-item { padding: 10px; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; }
        .result-item:last-child { border-bottom: none; }
        .val { font-weight: bold; color: #e67e22; }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;div class=&quot;container&quot;&gt;
    &lt;h2&gt;Access Road Norms Checker&lt;/h2&gt;
    &lt;p style=&quot;font-size: 0.9em; color: #666; text-align: center;&quot;&gt;Based on PWD Maharashtra Circular Oct-2021&lt;/p&gt;
    
    &lt;div class=&quot;form-group&quot;&gt;
        &lt;label&gt;Area Type&lt;/label&gt;
        &lt;select id=&quot;areaType&quot;&gt;
            &lt;option value=&quot;rural&quot;&gt;Rural (Non-Urban)&lt;/option&gt;
            &lt;option value=&quot;urban&quot;&gt;Urban (Pop &gt; 20,000)&lt;/option&gt;
        &lt;/select&gt;
    &lt;/div&gt;

    &lt;div class=&quot;form-group&quot;&gt;
        &lt;label&gt;Intersecting Road Type&lt;/label&gt;
        &lt;select id=&quot;roadType&quot;&gt;
            &lt;option value=&quot;major&quot;&gt;NH / SH / MDR&lt;/option&gt;
            &lt;option value=&quot;minor&quot;&gt;ODR / VR / Local&lt;/option&gt;
        &lt;/select&gt;
    &lt;/div&gt;

    &lt;button onclick=&quot;calculateNorms()&quot;&gt;Check Norms&lt;/button&gt;

    &lt;div id=&quot;results&quot; class=&quot;results&quot;&gt;
        &lt;div class=&quot;result-item&quot;&gt;&lt;span&gt;Min. Distance from Intersection:&lt;/span&gt; &lt;span class=&quot;val&quot; id=&quot;distIntersection&quot;&gt;-&lt;/span&gt;&lt;/div&gt;
        &lt;div class=&quot;result-item&quot;&gt;&lt;span&gt;Min. Distance from Bridge/Culvert:&lt;/span&gt; &lt;span class=&quot;val&quot;&gt;100 m&lt;/span&gt;&lt;/div&gt;
        &lt;div class=&quot;result-item&quot;&gt;&lt;span&gt;Min. Distance from Railway Level Crossing:&lt;/span&gt; &lt;span class=&quot;val&quot;&gt;100 m&lt;/span&gt;&lt;/div&gt;
        &lt;div class=&quot;result-item&quot;&gt;&lt;span&gt;Min. Distance from Toll Plaza:&lt;/span&gt; &lt;span class=&quot;val&quot;&gt;1000 m&lt;/span&gt;&lt;/div&gt;
        &lt;div class=&quot;result-item&quot;&gt;&lt;span&gt;Entry/Exit Radius (Min):&lt;/span&gt; &lt;span class=&quot;val&quot;&gt;15 m&lt;/span&gt;&lt;/div&gt;
        &lt;div class=&quot;result-item&quot;&gt;&lt;span&gt;Buffer Strip Length (Min):&lt;/span&gt; &lt;span class=&quot;val&quot;&gt;12 m&lt;/span&gt;&lt;/div&gt;
        &lt;div class=&quot;result-item&quot;&gt;&lt;span&gt;Max Gradient of Access Road:&lt;/span&gt; &lt;span class=&quot;val&quot;&gt;2%&lt;/span&gt;&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;script&gt;
function calculateNorms() {
    const area = document.getElementById(&#39;areaType&#39;).value;
    const road = document.getElementById(&#39;roadType&#39;).value;
    let intersectionDist = &quot;&quot;;

    if (area === &quot;rural&quot;) {
        intersectionDist = (road === &quot;major&quot;) ? &quot;300 meters&quot; : &quot;100 meters&quot;;
    } else {
        intersectionDist = (road === &quot;major&quot;) ? &quot;100 meters&quot; : &quot;50 meters&quot;;
    }

    document.getElementById(&#39;distIntersection&#39;).innerText = intersectionDist;
    document.getElementById(&#39;results&#39;).style.display = &quot;block&quot;;
}
&lt;/script&gt;

&lt;/body&gt;
&lt;/html&gt;
&lt;div class=&quot;blogger-post-footer&quot;&gt;https://yogipwd.blogspot.com/&lt;/div&gt;</description><link>https://www.yogipwd.com/2026/04/rules-and-guidelines-for-granting.html</link><author>noreply@blogger.com (Yogendra)</author><thr:total>0</thr:total></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-1074964965522467583.post-1421818680713229609</guid><pubDate>Thu, 09 Apr 2026 06:49:00 +0000</pubDate><atom:updated>2026-04-09T14:08:37.426+05:30</atom:updated><title>comments</title><description>&lt;div style=&quot;text-align: center; font-family: &#39;Segoe UI&#39;, Arial, sans-serif; padding: 25px; border: 1px solid #ddd; border-radius: 12px; background: #ffffff; max-width: 500px; margin: 20px auto; box-shadow: 0 4px 10px rgba(0,0,0,0.05);&quot;&gt;
  
  &lt;h2 style=&quot;color: #28a745; margin-bottom: 10px;&quot;&gt;Project Management Tool&lt;/h2&gt;
  
  &lt;div style=&quot;background-color: #fff3cd; color: #856404; padding: 10px; border-radius: 5px; font-size: 13px; margin-bottom: 20px; text-align: left;&quot;&gt;
    &lt;strong&gt;Mobile User Tip:&lt;/strong&gt; If you have multiple Gmail accounts logged in, &lt;b&gt;Long-Press&lt;/b&gt; the button below and select &lt;b&gt;&quot;Open in Incognito/Private Tab&quot;&lt;/b&gt; to avoid errors.
  &lt;/div&gt;

  &lt;a href=&quot;https://script.google.com/macros/s/AKfycbxdSd390egkp3lWGYdBNblMkKM3RvNUKdt-lXR6pV3lxR89wlpjq1JL83bq1bO63xcB/exec&quot; 
     target=&quot;_blank&quot; 
     style=&quot;display: inline-block; background-color: #28a745; color: white; padding: 16px 30px; text-decoration: none; border-radius: 8px; font-weight: bold; font-size: 18px; box-shadow: 0 4px 6px rgba(40, 167, 69, 0.3);&quot;&gt;
     Launch Form Now
  &lt;/a&gt;
&lt;/div&gt;&lt;div class=&quot;blogger-post-footer&quot;&gt;https://yogipwd.blogspot.com/&lt;/div&gt;</description><link>https://www.yogipwd.com/2026/04/comments.html</link><author>noreply@blogger.com (Yogendra)</author><thr:total>0</thr:total></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-1074964965522467583.post-716781961750643453</guid><pubDate>Sat, 04 Apr 2026 09:08:00 +0000</pubDate><atom:updated>2026-04-13T17:33:04.074+05:30</atom:updated><title>Land acquisition data entry</title><description>&lt;script src=&quot;https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js&quot;&gt;&lt;/script&gt;
&lt;script&gt;mermaid.initialize({ startOnLoad: false, theme: &#39;forest&#39; });&lt;/script&gt;

&lt;div id=&quot;land-acquisition-app&quot;&gt;
    &lt;style&gt;
        /* Scoped CSS for Blogger */
        #land-acquisition-app {
            font-family: &#39;Segoe UI&#39;, Tahoma, Geneva, Verdana, sans-serif;
            color: #333;
            max-width: 1000px;
            margin: 20px auto;
            line-height: 1.6;
        }
        #land-acquisition-app .card {
            background: #ffffff;
            border: 1px solid #e0e0e0;
            padding: 20px;
            margin-bottom: 15px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }
        #land-acquisition-app .grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 15px;
        }
        #land-acquisition-app input, #land-acquisition-app select {
            width: 100%;
            padding: 8px;
            margin: 5px 0;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
        }
        #land-acquisition-app button {
            background-color: #34495e;
            color: white;
            border: none;
            padding: 10px 15px;
            border-radius: 4px;
            cursor: pointer;
            font-weight: bold;
            transition: 0.3s;
        }
        #land-acquisition-app button:hover { background-color: #2c3e50; }
        #land-acquisition-app .owner-row {
            background: #f1f3f4;
            padding: 10px;
            border-radius: 5px;
            margin-bottom: 8px;
        }
        #land-acquisition-app table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
            background: white;
        }
        #land-acquisition-app th, #land-acquisition-app td {
            border: 1px solid #ddd;
            padding: 12px;
            text-align: left;
            font-size: 13px;
        }
        #land-acquisition-app th { background: #34495e; color: white; }
        #land-acquisition-app .btn-group { display: flex; gap: 10px; margin: 20px 0; flex-wrap: wrap; }
        #mermaid-container {
            background: #fff;
            padding: 10px;
            border-radius: 8px;
            min-height: 200px;
            overflow-x: auto;
        }
      .owner-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 15px;
    background: #f9fafb;
    border: 1px solid #ddd;
}

.owner-table td {
    padding: 6px;
    border: 1px solid #e5e7eb;
}

.owner-table td:first-child {
    font-weight: 600;
    background: #f1f5f9;
    width: 40%;
}

.owner-table input,
.owner-table select {
    width: 100%;
    padding: 5px;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
}
    &lt;/style&gt;

&lt;div class=&quot;card&quot; style=&quot;border-bottom: 3px solid #2980b9; margin-bottom: 20px;&quot;&gt;
    &lt;h3&gt;Project &amp; Village Configuration&lt;/h3&gt;

    &lt;!-- IMPORT BUTTON --&gt;
    &lt;div style=&quot;margin-bottom:10px;&quot;&gt;
        &lt;input type=&quot;file&quot; id=&quot;importFile&quot; accept=&quot;.json&quot; onchange=&quot;importJSON(event)&quot; style=&quot;display:none;&quot;&gt;
        &lt;button onclick=&quot;document.getElementById(&#39;importFile&#39;).click()&quot; 
            style=&quot;background:#8e44ad; color:white; border:none; padding:10px 15px; border-radius:4px;&quot;&gt;
            Import Backup
        &lt;/button&gt;
    &lt;/div&gt;

    &lt;div class=&quot;grid&quot; style=&quot;display:grid; grid-template-columns:1fr 1fr; gap:20px;&quot;&gt;
        
        &lt;!-- PROJECT --&gt;
        &lt;div&gt;
            &lt;label&gt;&lt;strong&gt;1A. Select Active Project:&lt;/strong&gt;&lt;/label&gt;
            &lt;select id=&quot;projectSelect&quot; onchange=&quot;loadProjectData()&quot; style=&quot;width: 100%; padding: 8px; margin-bottom:10px;&quot;&gt;
                &lt;option value=&quot;&quot;&gt;-- Select Project --&lt;/option&gt;
            &lt;/select&gt;

            &lt;div style=&quot;display:flex; gap:5px;&quot;&gt;
                &lt;input type=&quot;text&quot; id=&quot;newProjectName&quot; placeholder=&quot;New Project Name&quot; style=&quot;flex:1; padding:8px;&quot;&gt;
                &lt;button onclick=&quot;createNewProject()&quot; style=&quot;background:#2ecc71; color:white; border:none; padding:8px 12px; border-radius:4px;&quot;&gt;
                    Create
                &lt;/button&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;!-- VILLAGE --&gt;
        &lt;div&gt;
            &lt;label&gt;&lt;strong&gt;1B. Manage Villages:&lt;/strong&gt;&lt;/label&gt;

            &lt;div style=&quot;display:flex; gap:5px; margin-bottom:10px;&quot;&gt;
                &lt;input type=&quot;text&quot; id=&quot;villageInput&quot; placeholder=&quot;Add Village Name&quot; style=&quot;flex:1; padding:8px;&quot;&gt;
                &lt;button onclick=&quot;addVillageToProject()&quot; style=&quot;background:#3498db; color:white; border:none; padding:8px 12px; border-radius:4px;&quot;&gt;
                    + Add
                &lt;/button&gt;
            &lt;/div&gt;

            &lt;label&gt;&lt;strong&gt;1C. Working Village:&lt;/strong&gt;&lt;/label&gt;
            &lt;select id=&quot;activeVillageSelect&quot; onchange=&quot;changeWorkingVillage()&quot; 
                style=&quot;width: 100%; padding: 8px; border: 2px solid #3498db; font-weight:bold;&quot;&gt;
                &lt;option value=&quot;&quot;&gt;-- Select Village to Start Entry --&lt;/option&gt;
            &lt;/select&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;!-- ENTRY SECTION --&gt;
&lt;div id=&quot;entrySection&quot; style=&quot;display:none;&quot;&gt;
    &lt;div class=&quot;card&quot;&gt;
        
        &lt;div style=&quot;display:flex; justify-content:space-between; align-items:center; margin-bottom:15px;&quot;&gt;
            &lt;h3&gt;2. Gat &amp; Owner Details&lt;/h3&gt;
            &lt;span id=&quot;activeVillageLabel&quot; 
                style=&quot;color:white; font-weight:bold; background:#27ae60; padding:4px 12px; border-radius:20px;&quot;&gt;
            &lt;/span&gt;
        &lt;/div&gt;

        &lt;div id=&quot;gatContainer&quot;&gt;&lt;/div&gt;

        &lt;div style=&quot;display:flex; gap:10px; margin-top:20px;&quot;&gt;
            &lt;button onclick=&quot;addGatRow()&quot; 
                style=&quot;flex:1; background:#7f8c8d; color:white; border:none; padding:12px; border-radius:4px;&quot;&gt;
                + Add Another Gat
            &lt;/button&gt;

            &lt;button onclick=&quot;saveEntry()&quot; 
                style=&quot;flex:2; background:#27ae60; color:white; border:none; padding:12px; font-size:16px; border-radius:4px;&quot;&gt;
                SAVE DATA
            &lt;/button&gt;
        &lt;/div&gt;

    &lt;/div&gt;
&lt;/div&gt;

&lt;!-- SUMMARY --&gt;
&lt;div id=&quot;dashboardSummary&quot; 
    style=&quot;font-weight:bold; font-size:1.2em; text-align:right; margin:15px 0; color:#2c3e50; padding:10px; background:#f8f9fa; border-radius:4px; border-right:5px solid #27ae60;&quot;&gt;
    Total Project Value: ₹0
&lt;/div&gt;

&lt;!-- ACTION BUTTONS --&gt;
&lt;div class=&quot;btn-group&quot; style=&quot;display:flex; gap:10px; margin-bottom:20px;&quot;&gt;
    &lt;button onclick=&quot;exportCSV()&quot; 
        style=&quot;background:#e67e22; color:white; border:none; padding:12px; border-radius:4px; flex:1;&quot;&gt;
        Download Excel
    &lt;/button&gt;

    &lt;button onclick=&quot;exportJSON()&quot; 
        style=&quot;background:#34495e; color:white; border:none; padding:12px; border-radius:4px; flex:1;&quot;&gt;
        Backup
    &lt;/button&gt;

    &lt;button onclick=&quot;resetForm()&quot; 
        style=&quot;background:#95a5a6; color:white; border:none; padding:12px; border-radius:4px; flex:1;&quot;&gt;
        Clear
    &lt;/button&gt;
&lt;/div&gt;

&lt;!-- TABLE --&gt;
&lt;div class=&quot;card&quot;&gt;
    &lt;h3&gt;Master Project Land Records&lt;/h3&gt;

    &lt;div style=&quot;overflow-x:auto;&quot;&gt;
        &lt;table style=&quot;width:100%; border-collapse:collapse;&quot;&gt;
            &lt;thead&gt;
                &lt;tr style=&quot;background:#2c3e50; color:white;&quot;&gt;
                    &lt;th style=&quot;padding:10px;&quot;&gt;Village&lt;/th&gt;
                    &lt;th style=&quot;padding:10px;&quot;&gt;Gat No.&lt;/th&gt;
                    &lt;th style=&quot;padding:10px;&quot;&gt;Owner&lt;/th&gt;
                    &lt;th style=&quot;padding:10px;&quot;&gt;Owned Area&lt;/th&gt;
                    &lt;th style=&quot;padding:10px;&quot;&gt;Acquired Area&lt;/th&gt;
                    &lt;th style=&quot;padding:10px;&quot;&gt;Payable&lt;/th&gt;
                    &lt;th style=&quot;padding:10px;&quot;&gt;Status&lt;/th&gt; &lt;!-- ✅ ADDED --&gt;
                    &lt;th style=&quot;padding:10px;&quot;&gt;Action&lt;/th&gt;
                &lt;/tr&gt;
            &lt;/thead&gt;
            &lt;tbody id=&quot;tableBody&quot;&gt;&lt;/tbody&gt;
        &lt;/table&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;!-- VILLAGE SUMMARY --&gt;
&lt;div class=&quot;card&quot;&gt;
    &lt;h3&gt;Village-wise Land Category Summary&lt;/h3&gt;

    &lt;button onclick=&quot;generateVillageSummary()&quot; 
        style=&quot;background:#8e44ad;color:white;border:none;padding:10px 15px;margin-bottom:10px;border-radius:4px;&quot;&gt;
        Generate Summary
    &lt;/button&gt;

    &lt;table style=&quot;width:100%; border-collapse:collapse;&quot;&gt;
        &lt;thead&gt;
            &lt;tr style=&quot;background:#34495e;color:white;&quot;&gt;
                &lt;th&gt;Village&lt;/th&gt;
                &lt;th&gt;Class-1 Area&lt;/th&gt;
                &lt;th&gt;Class-2 Area&lt;/th&gt;
                &lt;th&gt;PESA Area&lt;/th&gt;
                &lt;th&gt;Total Area&lt;/th&gt;
            &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody id=&quot;villageSummaryBody&quot;&gt;&lt;/tbody&gt;
    &lt;/table&gt;
&lt;/div&gt;
  
  &lt;div class=&quot;card&quot;&gt;
    &lt;h3&gt;Village Overview (Project → Villages Only)&lt;/h3&gt;

    &lt;button onclick=&quot;generateVillageOnlyMermaid()&quot; 
        style=&quot;background:#9b59b6;color:white;border:none;padding:10px 15px;border-radius:4px;margin-bottom:10px;&quot;&gt;
        Generate Village Flowchart
    &lt;/button&gt;

    &lt;div class=&quot;mermaid&quot; id=&quot;villageOnlyChart&quot; style=&quot;overflow:auto;&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
  
  &lt;button onclick=&quot;exportVillageOnlySVG()&quot; 
    style=&quot;background:#16a085;color:white;border:none;padding:10px 15px;border-radius:4px;&quot;&gt;
    Export Village Chart (SVG)
&lt;/button&gt;

&lt;!-- MERMAID --&gt;
&lt;div class=&quot;card&quot;&gt;
    &lt;h3&gt;Project Hierarchy View&lt;/h3&gt;

    &lt;button onclick=&quot;generateMermaid()&quot; 
        style=&quot;background:#16a085;color:white;border:none;padding:10px 15px;border-radius:4px;margin-bottom:10px;&quot;&gt;
        Generate Diagram
    &lt;/button&gt;

    &lt;div class=&quot;mermaid&quot; id=&quot;mermaidChart&quot; style=&quot;overflow:auto;&quot;&gt;&lt;/div&gt;
&lt;/div&gt;

&lt;button onclick=&quot;exportMermaidA2()&quot; 
    style=&quot;background:#c0392b;color:white;border:none;padding:10px 15px;border-radius:4px;&quot;&gt;
    Export A2 Print
&lt;/button&gt;
  
 &lt;div class=&quot;card&quot;&gt;
    &lt;h3&gt;Village-wise Detailed Flowcharts&lt;/h3&gt;

    &lt;button onclick=&quot;generateAllVillageCharts()&quot; 
        style=&quot;background:#8e44ad;color:white;border:none;padding:10px 15px;border-radius:4px;margin-bottom:10px;&quot;&gt;
        Generate All Village Charts
    &lt;/button&gt;

    &lt;div id=&quot;allVillageCharts&quot;&gt;&lt;/div&gt;
&lt;/div&gt;

&lt;button onclick=&quot;exportAllVillageChartsSVG()&quot; 
    style=&quot;background:#c0392b;color:white;border:none;padding:10px 15px;border-radius:4px;margin-top:10px;&quot;&gt;
    Export All Charts (SVG)
&lt;/button&gt;
  
  &lt;div style=&quot;font-family:Segoe UI, Arial; line-height:1.6; max-width:900px; margin:auto; color:#2c3e50;&quot;&gt;

    &lt;h1 style=&quot;color:#2c3e50; border-bottom:3px solid #3498db; padding-bottom:5px;&quot;&gt;
        Land Acquisition Management Tool – Complete Guide
    &lt;/h1&gt;

    &lt;p&gt;
        The &lt;b&gt;Land Acquisition Management Tool&lt;/b&gt; is a powerful web-based application designed to manage,
        track, and visualize land acquisition data at project level. It is especially useful for
        engineers, project managers, and government officials handling large-scale infrastructure projects.
    &lt;/p&gt;

    &lt;h2 style=&quot;color:#2980b9;&quot;&gt;1. Key Features&lt;/h2&gt;
    &lt;ul&gt;
        &lt;li&gt;📌 Project-wise and village-wise data management&lt;/li&gt;
        &lt;li&gt;📌 Gat-level land acquisition tracking&lt;/li&gt;
        &lt;li&gt;📌 Owner-wise financial and legal record management&lt;/li&gt;
        &lt;li&gt;📌 Excel (CSV) export with detailed columns&lt;/li&gt;
        &lt;li&gt;📌 JSON backup &amp; restore functionality&lt;/li&gt;
        &lt;li&gt;📌 Mermaid-based hierarchy visualization&lt;/li&gt;
        &lt;li&gt;📌 A2 size printable diagram export&lt;/li&gt;
    &lt;/ul&gt;

    &lt;h2 style=&quot;color:#2980b9;&quot;&gt;2. Workflow Overview&lt;/h2&gt;
    &lt;ol&gt;
        &lt;li&gt;Create a new project&lt;/li&gt;
        &lt;li&gt;Add villages under the project&lt;/li&gt;
        &lt;li&gt;Select a working village&lt;/li&gt;
        &lt;li&gt;Enter Gat details&lt;/li&gt;
        &lt;li&gt;Add owner-wise land and financial data&lt;/li&gt;
        &lt;li&gt;Save and manage records&lt;/li&gt;
    &lt;/ol&gt;

    &lt;h2 style=&quot;color:#2980b9;&quot;&gt;3. Data Structure&lt;/h2&gt;

    &lt;h3&gt;📍 Gat Level Data&lt;/h3&gt;
    &lt;ul&gt;
        &lt;li&gt;Gat Number&lt;/li&gt;
        &lt;li&gt;Land Category (Class-1 / Class-2 / PESA)&lt;/li&gt;
        &lt;li&gt;JMS Status&lt;/li&gt;
        &lt;li&gt;Valuation Status&lt;/li&gt;
        &lt;li&gt;Legal Status&lt;/li&gt;
    &lt;/ul&gt;

    &lt;h3&gt;👤 Owner Level Data&lt;/h3&gt;
    &lt;ul&gt;
        &lt;li&gt;Owner Name &amp; Type&lt;/li&gt;
        &lt;li&gt;Owned Area &amp; Acquired Area&lt;/li&gt;
        &lt;li&gt;Payable Amount (Manual Entry)&lt;/li&gt;
        &lt;li&gt;Amount Paid &amp; Balance&lt;/li&gt;
        &lt;li&gt;Draft Sale Deed&lt;/li&gt;
        &lt;li&gt;Registration Fee, Stamp Duty, Paging Fee, Misc Expenses&lt;/li&gt;
        &lt;li&gt;Land Acquisition Cost&lt;/li&gt;
        &lt;li&gt;Payment Date&lt;/li&gt;
        &lt;li&gt;Aadhar &amp; PAN Details&lt;/li&gt;
        &lt;li&gt;Bank Details (Name, IFSC, Account Number)&lt;/li&gt;
        &lt;li&gt;Remarks&lt;/li&gt;
    &lt;/ul&gt;

    &lt;h2 style=&quot;color:#2980b9;&quot;&gt;4. Excel Export Columns&lt;/h2&gt;

    &lt;p&gt;The tool exports complete project data into Excel (CSV) format with the following fields:&lt;/p&gt;

    &lt;div style=&quot;overflow-x:auto;&quot;&gt;
        &lt;table style=&quot;border-collapse:collapse; width:100%;&quot;&gt;
            &lt;tr style=&quot;background:#34495e; color:white;&quot;&gt;
                &lt;th style=&quot;padding:8px;&quot;&gt;Field&lt;/th&gt;
                &lt;th style=&quot;padding:8px;&quot;&gt;Description&lt;/th&gt;
            &lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;Village&lt;/td&gt;&lt;td&gt;Village name&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;Gat No&lt;/td&gt;&lt;td&gt;Survey/Gat number&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;Owner Name&lt;/td&gt;&lt;td&gt;Land owner name&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;Category&lt;/td&gt;&lt;td&gt;Land classification&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;JMS Status&lt;/td&gt;&lt;td&gt;Joint Measurement Status&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;Valuation Status&lt;/td&gt;&lt;td&gt;Award/valuation progress&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;Legal Status&lt;/td&gt;&lt;td&gt;Title verification&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;Draft Sale Deed&lt;/td&gt;&lt;td&gt;Document reference&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;Registration Fee&lt;/td&gt;&lt;td&gt;Registration cost&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;Stamp Duty&lt;/td&gt;&lt;td&gt;Stamp charges&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;Paging Fee&lt;/td&gt;&lt;td&gt;Documentation charges&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;Miscellaneous&lt;/td&gt;&lt;td&gt;Other expenses&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;Land Acquisition Cost&lt;/td&gt;&lt;td&gt;Total cost&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;Amount Paid Date&lt;/td&gt;&lt;td&gt;Payment date&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;Aadhar Number&lt;/td&gt;&lt;td&gt;Identity proof&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;PAN Number&lt;/td&gt;&lt;td&gt;Tax ID&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;Bank Details&lt;/td&gt;&lt;td&gt;Payment account details&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;Remarks&lt;/td&gt;&lt;td&gt;Additional notes&lt;/td&gt;&lt;/tr&gt;
        &lt;/table&gt;
    &lt;/div&gt;

    &lt;h2 style=&quot;color:#2980b9;&quot;&gt;5. Mermaid Hierarchy Visualization&lt;/h2&gt;

    &lt;p&gt;
        The tool generates a &lt;b&gt;visual flowchart&lt;/b&gt; using Mermaid.js representing:
    &lt;/p&gt;

    &lt;ul&gt;
        &lt;li&gt;🏗️ Project&lt;/li&gt;
        &lt;li&gt;🏡 Villages&lt;/li&gt;
        &lt;li&gt;📍 Gat Numbers&lt;/li&gt;
        &lt;li&gt;👤 Owner Details&lt;/li&gt;
    &lt;/ul&gt;

    &lt;p&gt;
        Each node includes financial, legal, and identity details, making it extremely useful
        for presentations and reporting.
    &lt;/p&gt;

    &lt;h3&gt;🖨️ A2 Print Export&lt;/h3&gt;
    &lt;p&gt;
        The diagram can be exported in &lt;b&gt;A2 size SVG format&lt;/b&gt;, allowing full-scale printing
        for large datasets such as highway or irrigation projects.
    &lt;/p&gt;

    &lt;h2 style=&quot;color:#2980b9;&quot;&gt;6. Village-wise Summary&lt;/h2&gt;

    &lt;p&gt;
        The tool automatically generates summary reports based on land category:
    &lt;/p&gt;

    &lt;ul&gt;
        &lt;li&gt;Class-1 Area&lt;/li&gt;
        &lt;li&gt;Class-2 Area&lt;/li&gt;
        &lt;li&gt;PESA Area&lt;/li&gt;
        &lt;li&gt;Total Acquired Area&lt;/li&gt;
    &lt;/ul&gt;

    &lt;h2 style=&quot;color:#2980b9;&quot;&gt;7. Backup &amp; Restore&lt;/h2&gt;

    &lt;ul&gt;
        &lt;li&gt;Export full project as JSON backup&lt;/li&gt;
        &lt;li&gt;Import data anytime&lt;/li&gt;
        &lt;li&gt;Safe data storage using IndexedDB (browser-based)&lt;/li&gt;
    &lt;/ul&gt;

    &lt;h2 style=&quot;color:#2980b9;&quot;&gt;8. Advantages&lt;/h2&gt;

    &lt;ul&gt;
        &lt;li&gt;✔ No server required (works offline)&lt;/li&gt;
        &lt;li&gt;✔ Fast and responsive&lt;/li&gt;
        &lt;li&gt;✔ Highly customizable&lt;/li&gt;
        &lt;li&gt;✔ Ideal for government and EPC projects&lt;/li&gt;
        &lt;li&gt;✔ Scalable for thousands of records&lt;/li&gt;
    &lt;/ul&gt;

    &lt;h2 style=&quot;color:#2980b9;&quot;&gt;9. Conclusion&lt;/h2&gt;

    &lt;p&gt;
        This Land Acquisition Tool provides a digital solution for managing
        complex land records, financial tracking, and legal status in a structured manner.
        With visualization and export features, it improves decision-making and reporting efficiency.
    &lt;/p&gt;

&lt;/div&gt;

&lt;script&gt;
/* ================= DATABASE ================= */
let db;
let editingIndex = null;

const request = indexedDB.open(&quot;LandAcqBloggerDB&quot;, 1);

request.onupgradeneeded = (e) =&gt; {
    db = e.target.result;
    if (!db.objectStoreNames.contains(&quot;projects&quot;)) {
        db.createObjectStore(&quot;projects&quot;, { keyPath: &quot;id&quot;, autoIncrement: true });
    }
};

request.onsuccess = (e) =&gt; { 
    db = e.target.result; 
    refreshProjectList();
    addGatRow(); // UX improvement
};

/* ================= PROJECT ================= */
function createNewProject() {
    const name = document.getElementById(&#39;newProjectName&#39;).value.trim();
    if (!name) return alert(&quot;Project Name required&quot;);

    const tx = db.transaction(&quot;projects&quot;, &quot;readwrite&quot;);
    tx.objectStore(&quot;projects&quot;).add({ name, entries: [], villages: [] });

    tx.oncomplete = () =&gt; {
        document.getElementById(&#39;newProjectName&#39;).value = &quot;&quot;;
        refreshProjectList();
    };
}

function refreshProjectList() {
    const select = document.getElementById(&#39;projectSelect&#39;);
    select.innerHTML = &#39;&lt;option value=&quot;&quot;&gt;-- Select Project --&lt;/option&gt;&#39;;

    db.transaction(&quot;projects&quot;).objectStore(&quot;projects&quot;).openCursor().onsuccess = (e) =&gt; {
        const cursor = e.target.result;
        if (cursor) {
            let opt = document.createElement(&#39;option&#39;);
            opt.value = cursor.value.id;
            opt.text = cursor.value.name;
            select.add(opt);
            cursor.continue();
        }
    };
}

/* ================= VILLAGE ================= */
function addVillageToProject() {
    const id = parseInt(document.getElementById(&#39;projectSelect&#39;).value);
    const vInput = document.getElementById(&#39;villageInput&#39;);
    const vName = vInput.value.trim();

    if (!id) return alert(&quot;Select a Project first&quot;);
    if (!vName) return alert(&quot;Enter Village Name&quot;);

    const tx = db.transaction(&quot;projects&quot;, &quot;readwrite&quot;);
    const store = tx.objectStore(&quot;projects&quot;);

    store.get(id).onsuccess = (e) =&gt; {
        const p = e.target.result;

        if (!p.villages) p.villages = [];

        const exists = p.villages.map(v =&gt; v.toLowerCase()).includes(vName.toLowerCase());

        if (!exists) {
            p.villages.push(vName);
            store.put(p).onsuccess = () =&gt; {
                updateVillageDropdown(p.villages);
                vInput.value = &quot;&quot;;
            };
        } else {
            alert(&quot;Village already exists&quot;);
        }
    };
}

function updateVillageDropdown(villages) {
    const select = document.getElementById(&#39;activeVillageSelect&#39;);
    select.innerHTML = &#39;&lt;option value=&quot;&quot;&gt;-- Select Village to Start Entry --&lt;/option&gt;&#39;;

    villages.sort().forEach(v =&gt; {
        let opt = document.createElement(&#39;option&#39;);
        opt.value = v;
        opt.text = v;
        select.add(opt);
    });
}

function changeWorkingVillage(skipReset = false) {
    const village = document.getElementById(&#39;activeVillageSelect&#39;).value;
    const entrySection = document.getElementById(&#39;entrySection&#39;);
    const label = document.getElementById(&#39;activeVillageLabel&#39;);

    if (village) {
        entrySection.style.display = &quot;block&quot;;
        label.innerText = &quot;Village: &quot; + village;

        // 🔥 Skip reset during edit
        if (!skipReset) {
            resetForm(false);
        }
    } else {
        entrySection.style.display = &quot;none&quot;;
    }
}
/* ================= GAT UI ================= */
function addGatRow() {
    const div = document.createElement(&#39;div&#39;);
    div.className = &#39;gat-entry card&#39;;
    div.style = &#39;background:#fdfdfd;border:1px solid #ddd;margin-top:15px;padding:15px;position:relative;&#39;;

    div.innerHTML = `
        &lt;!-- REMOVE BUTTON --&gt;
        &lt;button onclick=&quot;this.closest(&#39;.gat-entry&#39;).remove()&quot; 
            style=&quot;position:absolute;top:10px;right:10px;background:#e74c3c;color:white;border:none;border-radius:4px;padding:2px 8px;cursor:pointer;&quot;&gt;
            X
        &lt;/button&gt;

        &lt;!-- GAT BASIC DETAILS --&gt;
        &lt;h4 style=&quot;margin-bottom:10px;&quot;&gt;Gat Details&lt;/h4&gt;

        &lt;div class=&quot;grid&quot; style=&quot;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:15px;&quot;&gt;
            
            &lt;div&gt;
                &lt;label&gt;Gat Number&lt;/label&gt;
                &lt;input type=&quot;text&quot; class=&quot;gatNumber&quot; placeholder=&quot;Enter Gat No&quot; style=&quot;width:100%;&quot;&gt;
            &lt;/div&gt;

            &lt;div&gt;
                &lt;label&gt;Land Category&lt;/label&gt;
                &lt;select class=&quot;landCategory&quot; style=&quot;width:100%;&quot;&gt;
                    &lt;option value=&quot;Class-1&quot;&gt;Class-1&lt;/option&gt;
                    &lt;option value=&quot;Class-2&quot;&gt;Class-2&lt;/option&gt;
                    &lt;option value=&quot;PESA&quot;&gt;PESA&lt;/option&gt;
                &lt;/select&gt;
            &lt;/div&gt;

        &lt;/div&gt;

        &lt;!-- PROCEDURE STATUS --&gt;
        &lt;h4 style=&quot;margin-bottom:8px;&quot;&gt;Land Acquisition Status&lt;/h4&gt;

        &lt;div class=&quot;grid&quot; style=&quot;grid-template-columns:1fr 1fr 1fr; gap:10px; margin-bottom:15px; background:#f8f9fa; padding:10px; border-radius:6px;&quot;&gt;
            
            &lt;div&gt;
                &lt;label&gt;JMS Status&lt;/label&gt;
                &lt;select class=&quot;checkJMS&quot; style=&quot;width:100%;&quot;&gt;
                    &lt;option value=&quot;Pending&quot;&gt;Pending&lt;/option&gt;
                    &lt;option value=&quot;Ongoing&quot;&gt;Ongoing / Verification&lt;/option&gt;
                    &lt;option value=&quot;Completed&quot;&gt;Completed (Final Area)&lt;/option&gt;
                &lt;/select&gt;
            &lt;/div&gt;

            &lt;div&gt;
                &lt;label&gt;Valuation Status&lt;/label&gt;
                &lt;select class=&quot;checkValuation&quot; style=&quot;width:100%;&quot;&gt;
                    &lt;option value=&quot;Awaited&quot;&gt;Awaited&lt;/option&gt;
                    &lt;option value=&quot;Draft&quot;&gt;Draft Prepared&lt;/option&gt;
                    &lt;option value=&quot;Declared&quot;&gt;Declared (Awarded)&lt;/option&gt;
                &lt;/select&gt;
            &lt;/div&gt;

            &lt;div&gt;
                &lt;label&gt;Legal Status&lt;/label&gt;
                &lt;select class=&quot;checkLegal&quot; style=&quot;width:100%;&quot;&gt;
                    &lt;option value=&quot;Clear&quot;&gt;Clear Title&lt;/option&gt;
                    &lt;option value=&quot;Disputed&quot;&gt;Disputed / Court Case&lt;/option&gt;
                    &lt;option value=&quot;In-Progress&quot;&gt;In-Progress&lt;/option&gt;
                &lt;/select&gt;
            &lt;/div&gt;

        &lt;/div&gt;

        &lt;!-- OWNERS SECTION --&gt;
        &lt;h4 style=&quot;margin-bottom:8px;&quot;&gt;Owner Details&lt;/h4&gt;

        &lt;div class=&quot;ownerInputs&quot;&gt;&lt;/div&gt;

        &lt;button onclick=&quot;addOwnerRow(this)&quot; 
            style=&quot;background:#95a5a6;color:white;border:none;padding:6px 12px;border-radius:4px;margin-top:10px;cursor:pointer;&quot;&gt;
            + Add Owner
        &lt;/button&gt;
    `;

    document.getElementById(&#39;gatContainer&#39;).appendChild(div);

    // Add first owner row by default
    addOwnerRow(div.querySelector(&#39;.ownerInputs&#39;));
}
  
 function editGat(entryIndex) {
    const id = parseInt(document.getElementById(&#39;projectSelect&#39;).value);
    if (!id) return alert(&quot;Select project first&quot;);

    editingIndex = entryIndex;

    db.transaction(&quot;projects&quot;).objectStore(&quot;projects&quot;).get(id).onsuccess = (e) =&gt; {
        const project = e.target.result;
        const entry = project.entries[entryIndex];

        // Set village
        document.getElementById(&#39;activeVillageSelect&#39;).value = entry.village;

        // 🔥 IMPORTANT: prevent auto reset row creation
        changeWorkingVillage(true);

        const container = document.getElementById(&#39;gatContainer&#39;);

        // 🔥 CRITICAL: remove ALL existing rows
        container.innerHTML = &quot;&quot;;

        // ✅ Create ONLY ONE Gat row
        addGatRow();
        const gatCard = container.querySelector(&#39;.gat-entry&#39;);

        // Fill Gat data
        gatCard.querySelector(&#39;.gatNumber&#39;).value = entry.gat;
        gatCard.querySelector(&#39;.landCategory&#39;).value = entry.category || &quot;Class-1&quot;;

        gatCard.querySelector(&#39;.checkJMS&#39;).value = entry.jmsStatus || &quot;Pending&quot;;
        gatCard.querySelector(&#39;.checkValuation&#39;).value = entry.valuationStatus || &quot;Awaited&quot;;
        gatCard.querySelector(&#39;.checkLegal&#39;).value = entry.legalStatus || &quot;Clear&quot;;

        // 🔥 Remove default owner row
        const oContainer = gatCard.querySelector(&#39;.ownerInputs&#39;);
        oContainer.innerHTML = &quot;&quot;;

        // Add ONLY existing owners
        (entry.owners || []).forEach(o =&gt; {
    const div = document.createElement(&#39;div&#39;);
    div.className = &#39;owner-row&#39;;

    div.innerHTML = `
        &lt;table class=&quot;owner-table&quot;&gt;
            &lt;tr&gt;&lt;td&gt;Owner Name&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;text&quot; class=&quot;ownerName&quot; value=&quot;${o.name || &#39;&#39;}&quot;&gt;&lt;/td&gt;&lt;/tr&gt;

            &lt;tr&gt;&lt;td&gt;Owner Type&lt;/td&gt;&lt;td&gt;
                &lt;select class=&quot;ownerType&quot;&gt;
                    &lt;option value=&quot;Private&quot; ${o.type === &#39;Private&#39; ? &#39;selected&#39; : &#39;&#39;}&gt;Private&lt;/option&gt;
                    &lt;option value=&quot;Govt&quot; ${o.type === &#39;Govt&#39; ? &#39;selected&#39; : &#39;&#39;}&gt;Govt&lt;/option&gt;
                &lt;/select&gt;
            &lt;/td&gt;&lt;/tr&gt;

            &lt;tr&gt;&lt;td&gt;Total Area&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;number&quot; class=&quot;totalArea&quot; value=&quot;${o.totalArea || 0}&quot;&gt;&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;Acquired Area&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;number&quot; class=&quot;ownerArea&quot; value=&quot;${o.area || 0}&quot;&gt;&lt;/td&gt;&lt;/tr&gt;

            &lt;tr&gt;&lt;td&gt;Amount Payable&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;number&quot; class=&quot;amtPayable&quot; value=&quot;${o.payable || 0}&quot;&gt;&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;Amount Paid&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;number&quot; class=&quot;amtPaid&quot; value=&quot;${o.paid || 0}&quot;&gt;&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;Loan Repayment&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;number&quot; class=&quot;loanRepayment&quot; value=&quot;${o.loanRepayment || 0}&quot;&gt;&lt;/td&gt;&lt;/tr&gt;

            &lt;tr&gt;&lt;td&gt;Draft Sale Deed&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;text&quot; class=&quot;draftDeed&quot; value=&quot;${o.draftDeed || &#39;&#39;}&quot;&gt;&lt;/td&gt;&lt;/tr&gt;

            &lt;tr&gt;&lt;td&gt;Registration Fee&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;number&quot; class=&quot;regFee&quot; value=&quot;${o.regFee || 0}&quot;&gt;&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;Stamp Duty&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;number&quot; class=&quot;stampDuty&quot; value=&quot;${o.stampDuty || 0}&quot;&gt;&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;Paging Fee&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;number&quot; class=&quot;pagingFee&quot; value=&quot;${o.pagingFee || 0}&quot;&gt;&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;Miscellaneous&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;number&quot; class=&quot;misc&quot; value=&quot;${o.misc || 0}&quot;&gt;&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;Land Acquisition Cost&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;number&quot; class=&quot;laCost&quot; value=&quot;${o.laCost || 0}&quot;&gt;&lt;/td&gt;&lt;/tr&gt;

            &lt;tr&gt;&lt;td&gt;Paid Date&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot; class=&quot;paidDate&quot; value=&quot;${o.paidDate || &#39;&#39;}&quot;&gt;&lt;/td&gt;&lt;/tr&gt;

            &lt;tr&gt;&lt;td&gt;Aadhar No&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;text&quot; class=&quot;aadhar&quot; value=&quot;${o.aadhar || &#39;&#39;}&quot;&gt;&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;PAN No&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;text&quot; class=&quot;pan&quot; value=&quot;${o.pan || &#39;&#39;}&quot;&gt;&lt;/td&gt;&lt;/tr&gt;

            &lt;tr&gt;&lt;td&gt;Bank Name&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;text&quot; class=&quot;bank&quot; value=&quot;${o.bank || &#39;&#39;}&quot;&gt;&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;IFSC Code&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;text&quot; class=&quot;ifsc&quot; value=&quot;${o.ifsc || &#39;&#39;}&quot;&gt;&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;Account No&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;text&quot; class=&quot;account&quot; value=&quot;${o.account || &#39;&#39;}&quot;&gt;&lt;/td&gt;&lt;/tr&gt;

            &lt;tr&gt;&lt;td&gt;Remarks&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;text&quot; class=&quot;remarks&quot; value=&quot;${o.remarks || &#39;&#39;}&quot;&gt;&lt;/td&gt;&lt;/tr&gt;
        &lt;/table&gt;
    `;

    oContainer.appendChild(div);
});

        // UI Update
        const btn = document.querySelector(&#39;button[onclick=&quot;saveEntry()&quot;]&#39;);
        btn.innerText = &quot;UPDATE RECORD&quot;;
        btn.style.background = &quot;#3498db&quot;;

        window.scrollTo({ top: 0, behavior: &#39;smooth&#39; });
    };
}

function addOwnerRow(containerOrBtn) {
    const container = containerOrBtn.classList?.contains(&#39;ownerInputs&#39;) 
        ? containerOrBtn 
        : containerOrBtn.previousElementSibling;

    const div = document.createElement(&#39;div&#39;);
    div.className = &#39;owner-row&#39;;

    div.style = `
        border:1px solid #ddd;
        padding:12px;
        margin-bottom:10px;
        border-radius:6px;
        background:#f9f9f9;
    `;

    div.innerHTML = `
        &lt;div style=&quot;display:grid; grid-template-columns: 180px 1fr; gap:8px; align-items:center;&quot;&gt;

            &lt;label&gt;Owner Name&lt;/label&gt;
            &lt;input type=&quot;text&quot; class=&quot;ownerName&quot;&gt;

            &lt;label&gt;Owner Type&lt;/label&gt;
            &lt;select class=&quot;ownerType&quot;&gt;
                &lt;option value=&quot;Private&quot;&gt;Private&lt;/option&gt;
                &lt;option value=&quot;Govt&quot;&gt;Govt&lt;/option&gt;
            &lt;/select&gt;

            &lt;label&gt;Owned Area&lt;/label&gt;
            &lt;input type=&quot;number&quot; class=&quot;totalArea&quot;&gt;

            &lt;label&gt;Acquired Area&lt;/label&gt;
            &lt;input type=&quot;number&quot; class=&quot;ownerArea&quot;&gt;

            &lt;label&gt;Payable Amount (₹)&lt;/label&gt;
            &lt;input type=&quot;number&quot; class=&quot;amtPayable&quot;&gt;

            &lt;label&gt;Amount Paid (₹)&lt;/label&gt;
            &lt;input type=&quot;number&quot; class=&quot;amtPaid&quot;&gt;
            
            &lt;label&gt;Repayment of Bank Loan (₹)&lt;/label&gt;
			&lt;input type=&quot;number&quot; class=&quot;loanRepayment&quot;&gt;

            &lt;label&gt;Paid Date&lt;/label&gt;
            &lt;input type=&quot;date&quot; class=&quot;paidDate&quot;&gt;

            &lt;label&gt;Draft Sale Deed&lt;/label&gt;
            &lt;input type=&quot;text&quot; class=&quot;draftDeed&quot;&gt;

            &lt;label&gt;Registration Fee (₹)&lt;/label&gt;
            &lt;input type=&quot;number&quot; class=&quot;regFee&quot;&gt;

            &lt;label&gt;Stamp Duty (₹)&lt;/label&gt;
            &lt;input type=&quot;number&quot; class=&quot;stampDuty&quot;&gt;

            &lt;label&gt;Paging Fee (₹)&lt;/label&gt;
            &lt;input type=&quot;number&quot; class=&quot;pagingFee&quot;&gt;

            &lt;label&gt;Miscellaneous (₹)&lt;/label&gt;
            &lt;input type=&quot;number&quot; class=&quot;misc&quot;&gt;

            &lt;label&gt;Land Acquisition Cost (₹)&lt;/label&gt;
            &lt;input type=&quot;number&quot; class=&quot;laCost&quot;&gt;

            &lt;label&gt;Aadhar Number&lt;/label&gt;
            &lt;input type=&quot;text&quot; class=&quot;aadhar&quot;&gt;

            &lt;label&gt;PAN Number&lt;/label&gt;
            &lt;input type=&quot;text&quot; class=&quot;pan&quot;&gt;

            &lt;label&gt;Bank Name&lt;/label&gt;
            &lt;input type=&quot;text&quot; class=&quot;bank&quot;&gt;

            &lt;label&gt;IFSC Code&lt;/label&gt;
            &lt;input type=&quot;text&quot; class=&quot;ifsc&quot;&gt;

            &lt;label&gt;Account Number&lt;/label&gt;
            &lt;input type=&quot;text&quot; class=&quot;account&quot;&gt;

            &lt;label&gt;Remarks&lt;/label&gt;
            &lt;input type=&quot;text&quot; class=&quot;remarks&quot;&gt;

        &lt;/div&gt;

        &lt;button onclick=&quot;this.parentElement.remove()&quot; 
            style=&quot;margin-top:10px;background:#e74c3c;color:white;border:none;padding:5px 10px;border-radius:4px;&quot;&gt;
            Remove Owner
        &lt;/button&gt;
    `;

    container.appendChild(div);
}
/* ================= CALC ================= */


/* ================= SAVE ================= */
function saveEntry() {
    const projectId = parseInt(document.getElementById(&#39;projectSelect&#39;).value);
    const villageName = document.getElementById(&#39;activeVillageSelect&#39;).value;

    if (!projectId || !villageName) {
        alert(&quot;Select Project &amp; Village&quot;);
        return;
    }

    const newGats = [];

    document.querySelectorAll(&#39;.gat-entry&#39;).forEach(ge =&gt; {

        const gatNo = ge.querySelector(&#39;.gatNumber&#39;).value.trim();
        if (!gatNo) return;

        const owners = [];

        ge.querySelectorAll(&#39;.owner-row&#39;).forEach(or =&gt; {
            const name = or.querySelector(&#39;.ownerName&#39;).value.trim();

            if (name) {
                owners.push({
                    name: name,
                    type: or.querySelector(&#39;.ownerType&#39;)?.value || &quot;Private&quot;,

                    totalArea: parseFloat(or.querySelector(&#39;.totalArea&#39;).value) || 0,
                    area: parseFloat(or.querySelector(&#39;.ownerArea&#39;).value) || 0,
                    payable: parseFloat(or.querySelector(&#39;.amtPayable&#39;).value) || 0,
                    paid: parseFloat(or.querySelector(&#39;.amtPaid&#39;)?.value) || 0,
                  	loanRepayment: parseFloat(or.querySelector(&#39;.loanRepayment&#39;)?.value) || 0,

                    draftDeed: or.querySelector(&#39;.draftDeed&#39;)?.value || &quot;&quot;,
                    regFee: parseFloat(or.querySelector(&#39;.regFee&#39;)?.value) || 0,
                    stampDuty: parseFloat(or.querySelector(&#39;.stampDuty&#39;)?.value) || 0,
                    pagingFee: parseFloat(or.querySelector(&#39;.pagingFee&#39;)?.value) || 0,
                    misc: parseFloat(or.querySelector(&#39;.misc&#39;)?.value) || 0,
                    laCost: parseFloat(or.querySelector(&#39;.laCost&#39;)?.value) || 0,

                    paidDate: or.querySelector(&#39;.paidDate&#39;)?.value || &quot;&quot;,

                    aadhar: or.querySelector(&#39;.aadhar&#39;)?.value || &quot;&quot;,
                    pan: or.querySelector(&#39;.pan&#39;)?.value || &quot;&quot;,

                    bank: or.querySelector(&#39;.bank&#39;)?.value || &quot;&quot;,
                    ifsc: or.querySelector(&#39;.ifsc&#39;)?.value || &quot;&quot;,
                    account: or.querySelector(&#39;.account&#39;)?.value || &quot;&quot;,

                    remarks: or.querySelector(&#39;.remarks&#39;)?.value || &quot;&quot;
                });
            }
        });

        if (owners.length &gt; 0) {
            newGats.push({
                village: villageName,
                gat: gatNo,
                category: ge.querySelector(&#39;.landCategory&#39;)?.value || &quot;Class-1&quot;,

                jmsStatus: ge.querySelector(&#39;.checkJMS&#39;)?.value || &quot;Pending&quot;,
                valuationStatus: ge.querySelector(&#39;.checkValuation&#39;)?.value || &quot;Awaited&quot;,
                legalStatus: ge.querySelector(&#39;.checkLegal&#39;)?.value || &quot;Clear&quot;,

                owners: owners
            });
        }
    });

    if (newGats.length === 0) {
        alert(&quot;No valid data&quot;);
        return;
    }

    const tx = db.transaction(&quot;projects&quot;, &quot;readwrite&quot;);
    const store = tx.objectStore(&quot;projects&quot;);

    store.get(projectId).onsuccess = (e) =&gt; {
        const p = e.target.result;
        if (!p.entries) p.entries = [];

        // 🔥 EDIT MODE (REPLACE)
        if (editingIndex !== null &amp;&amp; editingIndex !== undefined) {

            if (newGats.length !== 1) {
                alert(&quot;Edit mode allows only one Gat&quot;);
                return;
            }

            // ✅ Replace exact entry
            p.entries.splice(editingIndex, 1, newGats[0]);

            alert(&quot;Entry updated successfully&quot;);

        } else {
            // ✅ NEW ENTRY
            p.entries.push(...newGats);
            alert(&quot;New Gat added&quot;);
        }

        // Reset edit mode AFTER save
        editingIndex = null;

        store.put(p).onsuccess = () =&gt; {
            renderTable(p.entries);
            resetForm(false);
        };
    };
}
/* ================= DELETE ================= */
function deleteOwner(entryIndex, ownerIndex) {
    const projectId = parseInt(document.getElementById(&#39;projectSelect&#39;).value);

    const tx = db.transaction(&quot;projects&quot;, &quot;readwrite&quot;);
    const store = tx.objectStore(&quot;projects&quot;);

    store.get(projectId).onsuccess = (e) =&gt; {
        const p = e.target.result;

        p.entries[entryIndex].owners.splice(ownerIndex, 1);

        if (p.entries[entryIndex].owners.length === 0) {
            p.entries.splice(entryIndex, 1);
        }

        store.put(p).onsuccess = () =&gt; renderTable(p.entries);
    };
}

/* ================= TABLE ================= */
function renderTable(entries) {
    const tbody = document.getElementById(&#39;tableBody&#39;);
    tbody.innerHTML = &quot;&quot;;
    let total = 0;

    (entries || []).forEach((ent, eIdx) =&gt; {

        (ent.owners || []).forEach((o, oIdx) =&gt; {

            total += o.payable || 0;
            const isFirst = oIdx === 0;

            tbody.innerHTML += `
                &lt;tr style=&quot;${isFirst ? &#39;border-top:2px solid #ddd;&#39; : &#39;&#39;}&quot;&gt;

                    &lt;td&gt;${isFirst ? ent.village : &#39;&#39;}&lt;/td&gt;
                    &lt;td&gt;${isFirst ? ent.gat : &#39;&#39;}&lt;/td&gt;

                    &lt;td&gt;
                        ${o.name} 
                        &lt;small&gt;(${o.type || &#39;Private&#39;})&lt;/small&gt;
                    &lt;/td&gt;

                    &lt;td&gt;${(o.totalArea || 0).toFixed(4)}&lt;/td&gt;
                    &lt;td&gt;${(o.area || 0).toFixed(4)}&lt;/td&gt;

                    &lt;td style=&quot;text-align:right;&quot;&gt;
                        ₹${(o.payable || 0).toLocaleString(&#39;en-IN&#39;)}
                    &lt;/td&gt;

                    &lt;!-- ✅ STATUS COLUMN --&gt;
                    &lt;td&gt;
                        ${isFirst ? `
                            &lt;small&gt;
                                JMS: ${ent.jmsStatus}&lt;br&gt;
                                Val: ${ent.valuationStatus}&lt;br&gt;
                                Legal: ${ent.legalStatus}
                            &lt;/small&gt;
                        ` : &#39;&#39;}
                    &lt;/td&gt;

                    &lt;!-- ACTION --&gt;
                    &lt;td&gt;
                        ${isFirst ? `
                            &lt;button onclick=&quot;editGat(${eIdx})&quot;
                                style=&quot;background:#3498db;color:white;border:none;padding:3px 6px;margin-right:5px;&quot;&gt;
                                Edit
                            &lt;/button&gt;
                        ` : &#39;&#39;}

                        &lt;button onclick=&quot;deleteOwner(${eIdx},${oIdx})&quot;
                            style=&quot;background:#e74c3c;color:white;border:none;padding:3px 6px;&quot;&gt;
                            Del
                        &lt;/button&gt;
                    &lt;/td&gt;

                &lt;/tr&gt;
            `;
        });
    });

    document.getElementById(&#39;dashboardSummary&#39;).innerHTML =
        `Total Project Value: ₹${total.toLocaleString(&#39;en-IN&#39;)}`;
}

/* ================= LOAD ================= */
function loadProjectData() {
    const id = parseInt(document.getElementById(&#39;projectSelect&#39;).value);

    document.getElementById(&#39;activeVillageSelect&#39;).innerHTML =
        &#39;&lt;option value=&quot;&quot;&gt;-- Select Village --&lt;/option&gt;&#39;;

    if (!id) return;

    db.transaction(&quot;projects&quot;).objectStore(&quot;projects&quot;).get(id).onsuccess = (e) =&gt; {
        const p = e.target.result;
        if (p) {
            renderTable(p.entries || []);
            updateVillageDropdown(p.villages || []);
        }
    };
}

/* ================= RESET ================= */
function resetForm(clearVillage = true, skipDefaultRow = false) {
    document.getElementById(&#39;gatContainer&#39;).innerHTML = &quot;&quot;;

    if (clearVillage) {
        document.getElementById(&#39;activeVillageSelect&#39;).value = &quot;&quot;;
    }

    editingIndex = null;

    // ❌ prevent auto row during edit
    if (!skipDefaultRow) {
        addGatRow();
    }
}
  
  function importJSON(event) {
    const file = event.target.files[0];
    if (!file) return;

    const reader = new FileReader();

    reader.onload = function(e) {
        try {
            const data = JSON.parse(e.target.result);

            if (!data.name || !Array.isArray(data.entries)) {
                alert(&quot;Invalid file format&quot;);
                return;
            }

            const tx = db.transaction(&quot;projects&quot;, &quot;readwrite&quot;);
            const store = tx.objectStore(&quot;projects&quot;);

            let projectFound = false;

            store.openCursor().onsuccess = function(ev) {
                const cursor = ev.target.result;

                if (cursor) {
                    const existing = cursor.value;

                    // ✅ MATCH PROJECT BY NAME
                    if (existing.name === data.name) {
                        projectFound = true;

                        let existingEntries = existing.entries || [];
                        let newEntries = data.entries || [];

                        // 🔥 CREATE MAP FOR FAST DUPLICATE CHECK
                        const entryMap = new Map();

                        existingEntries.forEach(ent =&gt; {
                            const key = `${ent.village}__${ent.gat}`;
                            entryMap.set(key, ent);
                        });

                        // 🔥 MERGE LOGIC
                        newEntries.forEach(newEnt =&gt; {
                            const key = `${newEnt.village}__${newEnt.gat}`;

                            if (entryMap.has(key)) {
                                // 🔁 UPDATE EXISTING ENTRY
                                entryMap.set(key, newEnt);
                            } else {
                                // ➕ ADD NEW ENTRY
                                entryMap.set(key, newEnt);
                            }
                        });

                        // ✅ FINAL MERGED ARRAY
                        existing.entries = Array.from(entryMap.values());

                        // ✅ MERGE VILLAGES (NO DUPLICATES)
                        const villageSet = new Set([
                            ...(existing.villages || []),
                            ...(data.villages || [])
                        ]);
                        existing.villages = Array.from(villageSet);

                        // 💾 SAVE UPDATED PROJECT
                        cursor.update(existing).onsuccess = () =&gt; {
                            alert(&quot;Project merged successfully (duplicates avoided)&quot;);
                            refreshProjectList();
                            loadProjectData();
                        };

                        return;
                    }

                    cursor.continue();

                } else {
                    // 🆕 NO PROJECT FOUND → CREATE NEW
                    delete data.id;

                    store.add(data).onsuccess = () =&gt; {
                        alert(&quot;New project imported&quot;);
                        refreshProjectList();
                    };
                }
            };

        } catch (err) {
            console.error(err);
            alert(&quot;Error reading file&quot;);
        }
    };

    reader.readAsText(file);
}
  
 function exportJSON() {
    const projectId = parseInt(document.getElementById(&#39;projectSelect&#39;).value);
    if (!projectId) return alert(&quot;Select a project&quot;);

    db.transaction(&quot;projects&quot;).objectStore(&quot;projects&quot;).get(projectId).onsuccess = (e) =&gt; {
        const p = e.target.result;
        if (!p) return alert(&quot;No data&quot;);

        // ✅ Format date (DD-MM-YYYY)
        const now = new Date();
        const date = now.toLocaleDateString(&#39;en-GB&#39;).replace(/\//g, &#39;-&#39;);

        // ✅ Make project name file-safe
        const safeName = (p.name || &quot;Project&quot;)
            .replace(/[&lt;&gt;:&quot;/\\|?*]+/g, &#39;&#39;)   // remove invalid chars
            .replace(/\s+/g, &#39;_&#39;);           // replace spaces with underscore

        const fileName = `${date}_${safeName}.json`;

        const blob = new Blob([JSON.stringify(p, null, 2)], {
            type: &quot;application/json&quot;
        });

        const url = URL.createObjectURL(blob);

        const link = document.createElement(&quot;a&quot;);
        link.href = url;
        link.download = fileName;
        link.click();

        URL.revokeObjectURL(url);
    };
}
  
  function decodeHTML(html) {
    const txt = document.createElement(&quot;textarea&quot;);
    txt.innerHTML = html;
    return txt.value;
}
  
  
  function exportCSV() {
    const projectId = parseInt(document.getElementById(&#39;projectSelect&#39;).value);
    if (!projectId) return alert(&quot;Select project&quot;);

    db.transaction(&quot;projects&quot;).objectStore(&quot;projects&quot;).get(projectId).onsuccess = (e) =&gt; {
        const p = e.target.result;
        if (!p || !p.entries) return alert(&quot;No data&quot;);

        let csv = `Project Name,${p.name}\n\n`;

        // ✅ HEADER (EXACTLY AS REQUIRED)
        csv += decodeHTML(&quot;गाव,गट क्रमांक,मालकाचे नाव,जमिनीचा प्रकार,JMS स्थिती,मूल्यांकन स्थिती,कायदेशीर स्थिती,देय रक्कम, अदा केलेली रक्कम, बँक लोन भरणा रक्कम,ड्राफ्ट विक्री कागदपत्र,नोंदणी शुल्क,स्टॅम्प शुल्क,पेजिंग शुल्क,इतर खर्च,जमीन संपादन खर्च,देय दिनांक,आधार क्रमांक,PAN क्रमांक,बँक नाव,IFSC कोड,खाते क्रमांक,शेरा\n&quot;);

        p.entries.forEach(ent =&gt; {
            (ent.owners || []).forEach(o =&gt; {

                // ✅ SINGLE LINE PER ROW (VERY IMPORTANT)
                csv += `&quot;${ent.village}&quot;,&quot;${ent.gat}&quot;,&quot;${o.name}&quot;,&quot;${ent.category || &#39;&#39;}&quot;,&quot;${ent.jmsStatus || &#39;&#39;}&quot;,&quot;${ent.valuationStatus || &#39;&#39;}&quot;,&quot;${ent.legalStatus || &#39;&#39;}&quot;,${o.payable || 0},${o.paid || 0},${o.loanRepayment || 0},&quot;${o.draftDeed || &#39;&#39;}&quot;,${o.regFee || 0},${o.stampDuty || 0},${o.pagingFee || 0},${o.misc || 0},${o.laCost || 0},&quot;${o.paidDate || &#39;&#39;}&quot;,&quot;${o.aadhar || &#39;&#39;}&quot;,&quot;${o.pan || &#39;&#39;}&quot;,&quot;${o.bank || &#39;&#39;}&quot;,&quot;${o.ifsc || &#39;&#39;}&quot;,&quot;${o.account || &#39;&#39;}&quot;,&quot;${o.remarks || &#39;&#39;}&quot;\n`;

            });
        });

        // ✅ SAFE FILE NAME WITH DATE
        const now = new Date();
        const date = now.toLocaleDateString(&#39;en-GB&#39;).replace(/\//g, &#39;-&#39;);
        const safeName = p.name.replace(/[&lt;&gt;:&quot;/\\|?*]+/g, &#39;&#39;);

        const blob = new Blob([&quot;\uFEFF&quot; + csv], { type: &quot;text/csv;charset=utf-8;&quot; });
        const url = URL.createObjectURL(blob);

        const link = document.createElement(&quot;a&quot;);
        link.href = url;
        link.download = `${safeName}_${date}_LA_Detailed_Report.csv`;
        link.click();

        URL.revokeObjectURL(url);
    };
}
  
function generateMermaid() {

    function cleanText(txt) {
        if (!txt) return &#39;-&#39;;
        return String(txt)
            .replace(/&quot;/g, &quot;&#39;&quot;)
            .replace(/\n/g, &#39; &#39;)
            .replace(/&lt;/g, &#39;&amp;lt;&#39;)
            .replace(/&gt;/g, &#39;&amp;gt;&#39;);
    }

    const projectId = parseInt(document.getElementById(&#39;projectSelect&#39;).value);
    if (!projectId) return alert(&quot;Select project&quot;);

    db.transaction(&quot;projects&quot;).objectStore(&quot;projects&quot;).get(projectId).onsuccess = (e) =&gt; {

        const p = e.target.result;
        if (!p || !p.entries) return alert(&quot;No data&quot;);

        let diagram = &quot;flowchart TD\n&quot;;

        // ROOT NODE
        diagram += `P[&quot;🏗️ ${cleanText(p.name)}&quot;]\n`;

        const villageMap = {};
        const villageTotals = {};

        // ================= VILLAGE TOTALS =================
        p.entries.forEach(ent =&gt; {

            if (!villageTotals[ent.village]) {
                villageTotals[ent.village] = {
                    area: 0,
                    payable: 0,
                    paid: 0
                };
            }

            (ent.owners || []).forEach(o =&gt; {
                villageTotals[ent.village].area += (o.area || 0);
                villageTotals[ent.village].payable += (o.payable || 0);
                villageTotals[ent.village].paid += (o.paid || 0);
            });
        });

        // ================= BUILD DIAGRAM =================
        p.entries.forEach((ent, eIdx) =&gt; {

            const vName = cleanText(ent.village);
            const vKey = `V_${ent.village.replace(/\W/g, &#39;&#39;)}`;

            // ---- VILLAGE NODE ----
            if (!villageMap[ent.village]) {

                const v = villageTotals[ent.village];

                diagram += `P --&gt; ${vKey}[&quot;🏡 ${vName}&lt;br&gt;
Area: ${v.area.toFixed(2)}&lt;br&gt;
₹ Pay: ${v.payable.toLocaleString(&#39;en-IN&#39;)}&lt;br&gt;
₹ Paid: ${v.paid.toLocaleString(&#39;en-IN&#39;)}&quot;]\n`;

                villageMap[ent.village] = vKey;
            }

            // ---- GAT TOTALS ----
            let totalArea = 0, totalPayable = 0, totalPaid = 0;

            (ent.owners || []).forEach(o =&gt; {
                totalArea += (o.area || 0);
                totalPayable += (o.payable || 0);
                totalPaid += (o.paid || 0);
            });

            const balance = totalPayable - totalPaid;

            const gKey = `G${eIdx}_${cleanText(ent.gat).replace(/\W/g, &#39;&#39;)}`;

            // ---- GAT NODE ----
            diagram += `${villageMap[ent.village]} --&gt; ${gKey}[&quot;📍 Gat: ${cleanText(ent.gat)}&lt;br&gt;
Cat: ${cleanText(ent.category || &#39;-&#39;) }&lt;br&gt;
Area: ${totalArea.toFixed(2)}&lt;br&gt;
₹ Pay: ${totalPayable.toLocaleString(&#39;en-IN&#39;)}&lt;br&gt;
₹ Paid: ${totalPaid.toLocaleString(&#39;en-IN&#39;)}&lt;br&gt;
Bal: ₹${balance.toLocaleString(&#39;en-IN&#39;)}&lt;br&gt;&lt;br&gt;

JMS: ${cleanText(ent.jmsStatus)}&lt;br&gt;
Val: ${cleanText(ent.valuationStatus)}&lt;br&gt;
Legal: ${cleanText(ent.legalStatus)}&quot;]\n`;

            // ---- OWNER NODES ----
            (ent.owners || []).forEach((o, oIdx) =&gt; {

                const oKey = `O${eIdx}_${oIdx}`;
                const bal = (o.payable || 0) - (o.paid || 0);

                const safeName = cleanText(o.name);

                diagram += `${gKey} --&gt; ${oKey}[&quot;👤 ${safeName}&lt;br&gt;
(${cleanText(o.type || &#39;Private&#39;)})&lt;br&gt;&lt;br&gt;

📐 Owned: ${(o.totalArea || 0).toFixed(2)}&lt;br&gt;
📏 Acq: ${(o.area || 0).toFixed(2)}&lt;br&gt;&lt;br&gt;

💰 Pay: ₹${(o.payable || 0).toLocaleString(&#39;en-IN&#39;)}&lt;br&gt;
💵 Paid: ₹${(o.paid || 0).toLocaleString(&#39;en-IN&#39;)}&lt;br&gt;
🏦 Loan: ₹${(o.loanRepayment || 0).toLocaleString(&#39;en-IN&#39;)}&lt;br&gt;
⚖️ Bal: ₹${bal.toLocaleString(&#39;en-IN&#39;)}&lt;br&gt;&lt;br&gt;

📄 Draft: ${cleanText(o.draftDeed)}&lt;br&gt;
🧾 Reg: ₹${(o.regFee || 0).toLocaleString(&#39;en-IN&#39;)}&lt;br&gt;
🪙 Stamp: ₹${(o.stampDuty || 0).toLocaleString(&#39;en-IN&#39;)}&lt;br&gt;
📑 Paging: ₹${(o.pagingFee || 0).toLocaleString(&#39;en-IN&#39;)}&lt;br&gt;
📦 Misc: ₹${(o.misc || 0).toLocaleString(&#39;en-IN&#39;)}&lt;br&gt;
🏗️ LA Cost: ₹${(o.laCost || 0).toLocaleString(&#39;en-IN&#39;)}&lt;br&gt;&lt;br&gt;

📅 Paid Dt: ${cleanText(o.paidDate)}&lt;br&gt;&lt;br&gt;

🆔 Aadhaar: ${cleanText(o.aadhar)}&lt;br&gt;
🪪 PAN: ${cleanText(o.pan)}&lt;br&gt;&lt;br&gt;

🏦 Bank: ${cleanText(o.bank)}&lt;br&gt;
🔢 IFSC: ${cleanText(o.ifsc)}&lt;br&gt;
💳 Acc: ${cleanText(o.account)}&lt;br&gt;&lt;br&gt;

📝 ${cleanText(o.remarks)}&quot;]\n`;

                // ---- CONDITIONAL COLOR ----
                if (!o.paid || o.paid === 0) {
                    diagram += `style ${oKey} fill:#fff3cd,stroke:#f39c12,stroke-width:2px\n`;
                }
            });
        });

        // ================= RENDER =================
        const container = document.getElementById(&quot;mermaidChart&quot;);
        container.innerHTML = diagram;

        try {
            mermaid.init(undefined, container);
        } catch (err) {
            console.error(err);
            alert(&quot;Mermaid rendering error&quot;);
        }
    };
}
  
 function exportMermaidA2() {
    const svg = document.querySelector(&quot;#mermaidChart svg&quot;);
    if (!svg) {
        alert(&quot;Generate diagram first&quot;);
        return;
    }

    // Clone original SVG
    const clone = svg.cloneNode(true);

    // Get actual diagram size
    const bbox = svg.getBBox();

    // A2 Landscape (px)
    const A2_WIDTH = 594 * 3.78;   // ≈ 2244 px
    const A2_HEIGHT = 420 * 3.78;  // ≈ 1587 px

    // Calculate scale (fit inside A2)
    const scaleX = A2_WIDTH / bbox.width;
    const scaleY = A2_HEIGHT / bbox.height;
    const scale = Math.min(scaleX, scaleY);

    const scaledWidth = bbox.width * scale;
    const scaledHeight = bbox.height * scale;

    // Centering offsets (to fully utilize page)
    const offsetX = (A2_WIDTH - scaledWidth) / 2;
    const offsetY = (A2_HEIGHT - scaledHeight) / 2;

    // Set proper viewBox (VERY IMPORTANT)
    clone.setAttribute(
        &quot;viewBox&quot;,
        `${bbox.x - offsetX/scale} ${bbox.y - offsetY/scale} ${A2_WIDTH/scale} ${A2_HEIGHT/scale}`
    );

    clone.setAttribute(&quot;width&quot;, A2_WIDTH);
    clone.setAttribute(&quot;height&quot;, A2_HEIGHT);

    // Optional: Improve text readability
    clone.style.background = &quot;white&quot;;

    // Serialize SVG
    const svgData = new XMLSerializer().serializeToString(clone);
    const blob = new Blob([svgData], { type: &quot;image/svg+xml;charset=utf-8&quot; });

    const url = URL.createObjectURL(blob);

    // Safe filename with date
    const now = new Date();
    const date = now.toLocaleDateString(&#39;en-GB&#39;).replace(/\//g, &#39;-&#39;);

    const link = document.createElement(&quot;a&quot;);
    link.href = url;
    link.download = `Land_Acquisition_A2_${date}.svg`;
    link.click();

    URL.revokeObjectURL(url);
}
  
  function generateVillageSummary() {
    const projectId = parseInt(document.getElementById(&#39;projectSelect&#39;).value);
    if (!projectId) return alert(&quot;Select project&quot;);

    db.transaction(&quot;projects&quot;).objectStore(&quot;projects&quot;).get(projectId).onsuccess = (e) =&gt; {
        const p = e.target.result;
        if (!p || !p.entries) return alert(&quot;No data&quot;);

        const summary = {};

        p.entries.forEach(ent =&gt; {
            const village = ent.village;
            const category = ent.category || &quot;Class-1&quot;;

            if (!summary[village]) {
                summary[village] = {
                    &quot;Class-1&quot;: 0,
                    &quot;Class-2&quot;: 0,
                    &quot;PESA&quot;: 0
                };
            }

            // Sum acquired area (owner area)
            (ent.owners || []).forEach(o =&gt; {
                summary[village][category] += (o.area || 0);
            });
        });

        // Render table
        const tbody = document.getElementById(&#39;villageSummaryBody&#39;);
        tbody.innerHTML = &quot;&quot;;

        Object.keys(summary).forEach(village =&gt; {
            const v = summary[village];

            const total = v[&quot;Class-1&quot;] + v[&quot;Class-2&quot;] + v[&quot;PESA&quot;];

            tbody.innerHTML += `
                &lt;tr&gt;
                    &lt;td&gt;&lt;b&gt;${village}&lt;/b&gt;&lt;/td&gt;
                    &lt;td&gt;${v[&quot;Class-1&quot;].toFixed(4)}&lt;/td&gt;
                    &lt;td&gt;${v[&quot;Class-2&quot;].toFixed(4)}&lt;/td&gt;
                    &lt;td&gt;${v[&quot;PESA&quot;].toFixed(4)}&lt;/td&gt;
                    &lt;td&gt;&lt;b&gt;${total.toFixed(4)}&lt;/b&gt;&lt;/td&gt;
                &lt;/tr&gt;
            `;
        });
    };
}
  
  function generateVillageOnlyMermaid() {

    function cleanText(txt) {
        if (!txt) return &#39;-&#39;;
        return String(txt)
            .replace(/&quot;/g, &quot;&#39;&quot;)
            .replace(/\n/g, &#39; &#39;)
            .replace(/&lt;/g, &#39;&amp;lt;&#39;)
            .replace(/&gt;/g, &#39;&amp;gt;&#39;);
    }

    const projectId = parseInt(document.getElementById(&#39;projectSelect&#39;).value);
    if (!projectId) return alert(&quot;Select project&quot;);

    db.transaction(&quot;projects&quot;).objectStore(&quot;projects&quot;).get(projectId).onsuccess = (e) =&gt; {

        const p = e.target.result;
        if (!p || !p.entries) return alert(&quot;No data&quot;);

        let diagram = &quot;flowchart TD\n&quot;; // horizontal looks better here

        // ROOT
        diagram += `P[&quot;🏗️ ${cleanText(p.name)}&quot;]\n`;

        const villageTotals = {};

        // ---- CALCULATE VILLAGE TOTALS ----
        p.entries.forEach(ent =&gt; {

            if (!villageTotals[ent.village]) {
                villageTotals[ent.village] = {
                    area: 0,
                    payable: 0,
                    paid: 0,
                    gats: 0,
                    owners: 0
                };
            }

            villageTotals[ent.village].gats += 1;

            (ent.owners || []).forEach(o =&gt; {
                villageTotals[ent.village].area += (o.area || 0);
                villageTotals[ent.village].payable += (o.payable || 0);
                villageTotals[ent.village].paid += (o.paid || 0);
                villageTotals[ent.village].owners += 1;
            });
        });

        // ---- CREATE VILLAGE NODES ----
        Object.keys(villageTotals).forEach((village, idx) =&gt; {

            const v = villageTotals[village];
            const vKey = `VONLY_${idx}`;

            diagram += `P --&gt; ${vKey}[&quot;🏡 ${cleanText(village)}&lt;br&gt;&lt;br&gt;
📍 Gats: ${v.gats}&lt;br&gt;
👤 Owners: ${v.owners}&lt;br&gt;&lt;br&gt;

📐 Area: ${v.area.toFixed(2)}&lt;br&gt;
💰 Payable: ₹${v.payable.toLocaleString(&#39;en-IN&#39;)}&lt;br&gt;
💵 Paid: ₹${v.paid.toLocaleString(&#39;en-IN&#39;)}&lt;br&gt;
⚖️ Balance: ₹${(v.payable - v.paid).toLocaleString(&#39;en-IN&#39;)}&quot;]\n`;

            // Optional color logic
            if (v.paid === 0) {
                diagram += `style ${vKey} fill:#fff3cd,stroke:#f39c12,stroke-width:2px\n`;
            }
        });

        // ---- RENDER ----
        const container = document.getElementById(&quot;villageOnlyChart&quot;);
        container.innerHTML = diagram;

        try {
            mermaid.init(undefined, container);
        } catch (err) {
            console.error(err);
            alert(&quot;Mermaid rendering error&quot;);
        }
    };
}
  
  function generateAllVillageCharts() {

    function cleanText(txt) {
        if (!txt) return &#39;-&#39;;
        return String(txt)
            .replace(/&quot;/g, &quot;&#39;&quot;)
            .replace(/\n/g, &#39; &#39;)
            .replace(/&lt;/g, &#39;&amp;lt;&#39;)
            .replace(/&gt;/g, &#39;&amp;gt;&#39;);
    }

    const projectId = parseInt(document.getElementById(&#39;projectSelect&#39;).value);
    if (!projectId) return alert(&quot;Select project&quot;);

    db.transaction(&quot;projects&quot;).objectStore(&quot;projects&quot;).get(projectId).onsuccess = (e) =&gt; {

        const p = e.target.result;
        if (!p || !p.entries) return alert(&quot;No data&quot;);

        const container = document.getElementById(&quot;allVillageCharts&quot;);
        container.innerHTML = &quot;&quot;;

        const villages = [...new Set(p.entries.map(e =&gt; e.village))];

        villages.forEach((village, vIdx) =&gt; {

            let diagram = &quot;flowchart TD\n&quot;;

            const vKey = `V_${vIdx}`;
            diagram += `${vKey}[&quot;🏡 ${cleanText(village)}&quot;]\n`;

            // FILTER ENTRIES OF THIS VILLAGE
            const villageEntries = p.entries.filter(e =&gt; e.village === village);

            villageEntries.forEach((ent, eIdx) =&gt; {

                const gKey = `G_${vIdx}_${eIdx}`;

                diagram += `${vKey} --&gt; ${gKey}[&quot;📍 Gat: ${cleanText(ent.gat)}&lt;br&gt;
Cat: ${cleanText(ent.category)}&lt;br&gt;
JMS: ${cleanText(ent.jmsStatus)}&lt;br&gt;
Val: ${cleanText(ent.valuationStatus)}&lt;br&gt;
Legal: ${cleanText(ent.legalStatus)}&quot;]\n`;

                (ent.owners || []).forEach((o, oIdx) =&gt; {

                    const oKey = `O_${vIdx}_${eIdx}_${oIdx}`;
                    const bal = (o.payable || 0) - (o.paid || 0);

                    diagram += `${gKey} --&gt; ${oKey}[&quot;👤 ${cleanText(o.name)}&lt;br&gt;
📐 ${(o.totalArea || 0).toFixed(2)} | 📏 ${(o.area || 0).toFixed(2)}&lt;br&gt;
💰 ₹${(o.payable || 0).toLocaleString(&#39;en-IN&#39;)}&lt;br&gt;
💵 ₹${(o.paid || 0).toLocaleString(&#39;en-IN&#39;)}&lt;br&gt;
🏦 Loan: ₹${(o.loanRepayment || 0).toLocaleString(&#39;en-IN&#39;)}&lt;br&gt;
⚖️ ₹${bal.toLocaleString(&#39;en-IN&#39;)}&lt;br&gt;&lt;br&gt;

📄 ${cleanText(o.draftDeed)}&lt;br&gt;
📅 ${cleanText(o.paidDate)}&lt;br&gt;
🆔 ${cleanText(o.aadhar)}&lt;br&gt;
🏦 ${cleanText(o.bank)}&quot;]\n`;

                    // Highlight unpaid
                    if (!o.paid || o.paid === 0) {
                        diagram += `style ${oKey} fill:#fff3cd,stroke:#f39c12,stroke-width:2px\n`;
                    }
                });
            });

            // CREATE BLOCK PER VILLAGE
            const div = document.createElement(&quot;div&quot;);
            div.className = &quot;card&quot;;
            div.style.marginBottom = &quot;20px&quot;;

            div.innerHTML = `
                &lt;h4&gt;Village: ${village}&lt;/h4&gt;
                &lt;div class=&quot;mermaid&quot;&gt;${diagram}&lt;/div&gt;
            `;

            container.appendChild(div);
        });

        try {
            mermaid.init(undefined, document.querySelectorAll(&quot;#allVillageCharts .mermaid&quot;));
        } catch (err) {
            console.error(err);
            alert(&quot;Mermaid rendering error&quot;);
        }
    };
}
  
 async function exportAllVillageChartsSVG() {

    const charts = document.querySelectorAll(&quot;#allVillageCharts svg&quot;);

    if (!charts.length) {
        alert(&quot;Generate charts first&quot;);
        return;
    }

    const now = new Date();
    const date = now.toLocaleDateString(&#39;en-GB&#39;).replace(/\//g, &#39;-&#39;);

    for (let i = 0; i &lt; charts.length; i++) {

        const svg = charts[i];
        const clone = svg.cloneNode(true);

        // White background
        clone.style.background = &quot;white&quot;;

        const svgData = new XMLSerializer().serializeToString(clone);
        const blob = new Blob([svgData], { type: &quot;image/svg+xml;charset=utf-8&quot; });

        const url = URL.createObjectURL(blob);

        const link = document.createElement(&quot;a&quot;);
        link.href = url;
        link.download = `Village_Chart_${i + 1}_${date}.svg`;

        document.body.appendChild(link); // required for some browsers
        link.click();
        document.body.removeChild(link);

        // Cleanup
        setTimeout(() =&gt; URL.revokeObjectURL(url), 1000);

        // 🔥 IMPORTANT: Delay to allow download
        await new Promise(resolve =&gt; setTimeout(resolve, 500));
    }
}
  
function exportVillageOnlySVG() {

    const svg = document.querySelector(&quot;#villageOnlyChart svg&quot;);

    if (!svg) {
        alert(&quot;Generate village chart first&quot;);
        return;
    }

    const clone = svg.cloneNode(true);

    // ✅ Add white background (proper SVG way)
    const bg = document.createElementNS(&quot;http://www.w3.org/2000/svg&quot;, &quot;rect&quot;);
    bg.setAttribute(&quot;width&quot;, &quot;100%&quot;);
    bg.setAttribute(&quot;height&quot;, &quot;100%&quot;);
    bg.setAttribute(&quot;fill&quot;, &quot;white&quot;);

    clone.insertBefore(bg, clone.firstChild);

    // ✅ FIX: Only apply computed styles where attributes are missing
    const elements = clone.querySelectorAll(&quot;*&quot;);

    elements.forEach(el =&gt; {
        const computed = window.getComputedStyle(el);

        // 🔥 DO NOT override existing fill/stroke
        if (!el.getAttribute(&quot;fill&quot;)) {
            el.setAttribute(&quot;fill&quot;, computed.fill);
        }

        if (!el.getAttribute(&quot;stroke&quot;)) {
            el.setAttribute(&quot;stroke&quot;, computed.stroke);
        }

        if (!el.getAttribute(&quot;stroke-width&quot;)) {
            el.setAttribute(&quot;stroke-width&quot;, computed.strokeWidth);
        }

        // Fonts (safe to apply)
        el.setAttribute(&quot;font-size&quot;, computed.fontSize);
        el.setAttribute(&quot;font-family&quot;, computed.fontFamily);
        el.setAttribute(&quot;font-weight&quot;, computed.fontWeight);
    });

    // Serialize
    let svgData = new XMLSerializer().serializeToString(clone);

    // Fix HTML issues
    svgData = svgData
        .replace(/&lt;br&gt;/g, &quot;&lt;br/&gt;&quot;)
        .replace(/&amp;nbsp;/g, &quot; &quot;);

    const blob = new Blob([svgData], { type: &quot;image/svg+xml;charset=utf-8&quot; });
    const url = URL.createObjectURL(blob);

    // File name
    const now = new Date();
    const date = now.toLocaleDateString(&#39;en-GB&#39;).replace(/\//g, &#39;-&#39;);

    const link = document.createElement(&quot;a&quot;);
    link.href = url;
    link.download = `Village_Summary_${date}.svg`;
    link.click();

    URL.revokeObjectURL(url);
}
&lt;/script&gt;
&lt;/div&gt;&lt;div class=&quot;blogger-post-footer&quot;&gt;https://yogipwd.blogspot.com/&lt;/div&gt;</description><link>https://www.yogipwd.com/2026/04/land-acquisition-data-entry.html</link><author>noreply@blogger.com (Yogendra)</author><thr:total>0</thr:total></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-1074964965522467583.post-920994611213108038</guid><pubDate>Fri, 27 Mar 2026 18:06:00 +0000</pubDate><atom:updated>2026-04-06T12:13:40.464+05:30</atom:updated><title>PEB section Estimation calculator </title><description>&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;PEB Structural member Estimation&lt;/title&gt;
    
    &lt;script type=&quot;text/x-mathjax-config&quot;&gt;
      MathJax.Hub.Config({
        tex2jax: {inlineMath: [[&#39;$&#39;,&#39;$&#39;], [&#39;\\(&#39;,&#39;\\)&#39;]], processEscapes: true}
      });
    &lt;/script&gt;
    &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js?config=TeX-AMS-MML_HTMLorMML&quot;&gt;&lt;/script&gt;

    &lt;style&gt;
        body { font-family: &#39;Segoe UI&#39;, Arial, sans-serif; background-color: #f0f2f5; padding: 2px; color: #333; }
        .container { max-width: 1300px; margin: auto; background: white; padding: 3px; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
        h2 { color: #1a3a5a; border-left: 5px solid #3498db; padding-left: 15px; }
        .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-bottom: 25px; background: #f8f9fa; padding: 20px; border-radius: 10px; }
        .input-group { display: flex; flex-direction: column; }
        label { font-weight: 600; font-size: 0.85em; margin-bottom: 5px; color: #555; }
        input, select { padding: 12px; border: 1px solid #ccc; border-radius: 6px; }
        button { width: 100%; padding: 15px; background: #2c3e50; color: white; border: none; border-radius: 6px; font-size: 1.1em; font-weight: bold; cursor: pointer; transition: 0.3s; margin-top: 10px; }
        button:hover { background: #34495e; }
        .results { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 30px; }
        .card { background: white; border: 1px solid #e1e4e8; padding: 20px; border-radius: 10px; }
        .card h3 { margin-top: 0; font-size: 0.9em; color: #3498db; text-transform: uppercase; border-bottom: 1px solid #eee; padding-bottom: 5px; }
        table { width: 100%; border-collapse: collapse; }
        td { padding: 8px 0; border-bottom: 1px solid #eee; font-size: 0.95em; }
        td:last-child { text-align: right; font-weight: bold; color: #2c3e50; }
        .full-width { grid-column: span 2; }
        .highlight { color: #e74c3c; font-weight: bold; }
      h1, h2 {
    color: #1a3a5a;
}
h2 {
    border-left: 5px solid #3498db;
    padding-left: 10px;
}
p {
    margin: 10px 0;
}
ul {
    margin-left: 20px;
}
.code {
    background: #f8f9fa;
    padding: 10px;
    border-left: 4px solid #3498db;
    font-family: monospace;
}
.highlight {
    color: #e74c3c;
    font-weight: bold;
}
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;div class=&quot;container&quot;&gt;
    &lt;h2&gt;PEB tentative section Estimation&lt;/h2&gt;
    
    &lt;div class=&quot;grid&quot;&gt;
        &lt;div class=&quot;input-group&quot;&gt;&lt;label&gt;Span ($L$) [m]&lt;/label&gt;&lt;input type=&quot;number&quot; id=&quot;span&quot; value=&quot;30&quot;&gt;&lt;/div&gt;
        &lt;div class=&quot;input-group&quot;&gt;&lt;label&gt;Bay Spacing [m]&lt;/label&gt;&lt;input type=&quot;number&quot; id=&quot;bay&quot; value=&quot;8&quot;&gt;&lt;/div&gt;
        &lt;div class=&quot;input-group&quot;&gt;&lt;label&gt;Eave Height [m]&lt;/label&gt;&lt;input type=&quot;number&quot; id=&quot;height&quot; value=&quot;7&quot;&gt;&lt;/div&gt;
        &lt;div class=&quot;input-group&quot;&gt;
            &lt;label&gt;Base Connection&lt;/label&gt;
            &lt;select id=&quot;baseType&quot;&gt;
                &lt;option value=&quot;pinned&quot;&gt;Pinned (Standard)&lt;/option&gt;
                &lt;option value=&quot;fixed&quot;&gt;Fixed (Rigid)&lt;/option&gt;
            &lt;/select&gt;
        &lt;/div&gt;
        &lt;div class=&quot;input-group&quot;&gt;
            &lt;label&gt;Wind Speed ($V_b$)&lt;/label&gt;
            &lt;select id=&quot;wind&quot;&gt;
                &lt;option value=&quot;33&quot;&gt;33 m/s (Low)&lt;/option&gt;
                &lt;option value=&quot;44&quot; selected&gt;44 m/s (Medium)&lt;/option&gt;
                &lt;option value=&quot;50&quot;&gt;50 m/s (High/Coastal)&lt;/option&gt;
            &lt;/select&gt;
        &lt;/div&gt;
        &lt;button onclick=&quot;runCalculations()&quot;&gt;Generate Design &amp; Formulas&lt;/button&gt;
    &lt;/div&gt;

    &lt;div class=&quot;results&quot; id=&quot;output&quot; style=&quot;display:none;&quot;&gt;
        &lt;div class=&quot;card&quot;&gt;
            &lt;h3&gt;Primary Geometry&lt;/h3&gt;
            &lt;table&gt;
                &lt;tr&gt;&lt;td&gt;Optimum Max Depth&lt;/td&gt;&lt;td id=&quot;res-dmax&quot;&gt;--&lt;/td&gt;&lt;/tr&gt;
                &lt;tr&gt;&lt;td&gt;Min Web Thickness&lt;/td&gt;&lt;td id=&quot;res-tw&quot;&gt;--&lt;/td&gt;&lt;/tr&gt;
                &lt;tr&gt;&lt;td&gt;Flange Width&lt;/td&gt;&lt;td id=&quot;res-fw&quot;&gt;--&lt;/td&gt;&lt;/tr&gt;
                &lt;tr&gt;&lt;td&gt;Deflection Limit ($L/180$)&lt;/td&gt;&lt;td id=&quot;res-def&quot;&gt;--&lt;/td&gt;&lt;/tr&gt;
            &lt;/table&gt;
        &lt;/div&gt;

        &lt;div class=&quot;card&quot;&gt;
            &lt;h3&gt;Anchor &amp; Shear Key&lt;/h3&gt;
            &lt;table&gt;
                &lt;tr&gt;&lt;td&gt;Anchor Bolts&lt;/td&gt;&lt;td id=&quot;res-bolt&quot;&gt;--&lt;/td&gt;&lt;/tr&gt;
                &lt;tr&gt;&lt;td&gt;Embedment ($15 \times d$)&lt;/td&gt;&lt;td id=&quot;res-embed&quot;&gt;--&lt;/td&gt;&lt;/tr&gt;
                &lt;tr&gt;&lt;td&gt;Shear Key Req.&lt;/td&gt;&lt;td id=&quot;res-skey&quot;&gt;--&lt;/td&gt;&lt;/tr&gt;
                &lt;tr&gt;&lt;td&gt;Key Size (Approx)&lt;/td&gt;&lt;td id=&quot;res-skey-size&quot;&gt;--&lt;/td&gt;&lt;/tr&gt;
            &lt;/table&gt;
        &lt;/div&gt;

        &lt;div class=&quot;card full-width&quot;&gt;
            &lt;h3&gt;Design Logic &amp; Weight&lt;/h3&gt;
            &lt;div id=&quot;math-output&quot;&gt;&lt;/div&gt;
            &lt;p style=&quot;text-align:right;&quot;&gt;&lt;strong&gt;Est. Steel: &lt;span id=&quot;res-total-mt&quot;&gt;&lt;/span&gt; MT/bay&lt;/strong&gt;&lt;/p&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
  
  &lt;div class=&quot;container&quot;&gt;

&lt;h1&gt;PEB Structural Member Estimation Tool – Technical Explanation&lt;/h1&gt;

&lt;p&gt;
This tool is developed for &lt;strong&gt;Pre-Engineered Building (PEB)&lt;/strong&gt; preliminary design. It provides
quick and reliable estimates of structural member sizes, anchor systems, and steel weight based on
standard engineering thumb rules and practical industry experience.
&lt;/p&gt;

&lt;h2&gt;1. Objective of the Tool&lt;/h2&gt;
&lt;p&gt;
The primary objective is to assist engineers in obtaining:
&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Preliminary rafter depth and plate sizes&lt;/li&gt;
&lt;li&gt;Steel quantity estimation&lt;/li&gt;
&lt;li&gt;Anchor bolt requirements&lt;/li&gt;
&lt;li&gt;Shear key necessity check&lt;/li&gt;
&lt;li&gt;Basic design validation using engineering logic&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;2. Input Parameters&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Span (L):&lt;/strong&gt; Distance between columns&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Bay Spacing (B):&lt;/strong&gt; Distance between frames&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Eave Height (H):&lt;/strong&gt; Height at column top&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Base Connection:&lt;/strong&gt; Pinned or Fixed&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Wind Speed (Vb):&lt;/strong&gt; Governing lateral load parameter&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;3. Primary Member Design Logic&lt;/h2&gt;

&lt;h3&gt;3.1 Rafter Depth Estimation&lt;/h3&gt;
&lt;p&gt;
The tool uses a widely accepted optimization ratio:
&lt;/p&gt;

&lt;div class=&quot;code&quot;&gt;
d ≈ L / 28
&lt;/div&gt;

&lt;p&gt;
Where:
&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;d = depth of rafter (mm)&lt;/li&gt;
&lt;li&gt;L = span (mm)&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;
This ensures:
&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Efficient bending resistance&lt;/li&gt;
&lt;li&gt;Economical steel usage&lt;/li&gt;
&lt;li&gt;Compliance with deflection limits&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;3.2 Web Thickness&lt;/h3&gt;

&lt;div class=&quot;code&quot;&gt;
tw = d / 150 (minimum 6 mm)
&lt;/div&gt;

&lt;p&gt;
This criterion ensures:
&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Shear capacity adequacy&lt;/li&gt;
&lt;li&gt;Prevention of web buckling&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;3.3 Flange Width&lt;/h3&gt;

&lt;div class=&quot;code&quot;&gt;
bf = d / 5 (minimum 150 mm)
&lt;/div&gt;

&lt;p&gt;
Flange width governs:
&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Bending strength&lt;/li&gt;
&lt;li&gt;Lateral torsional stability&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;3.4 Deflection Check&lt;/h3&gt;

&lt;div class=&quot;code&quot;&gt;
Allowable Deflection = L / 180
&lt;/div&gt;

&lt;p&gt;
This is a standard serviceability limit used in industrial structures.
&lt;/p&gt;

&lt;h2&gt;4. Steel Weight Estimation&lt;/h2&gt;

&lt;p&gt;
The steel consumption is estimated using empirical relationships:
&lt;/p&gt;

&lt;div class=&quot;code&quot;&gt;
kg/m² = 25 + (0.5 × L) + Wind Factor
&lt;/div&gt;

&lt;p&gt;
Where:
&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Base value = 25 kg/m² (light structure)&lt;/li&gt;
&lt;li&gt;Span effect increases steel&lt;/li&gt;
&lt;li&gt;Wind factor adds 10 kg/m² for high wind zones&lt;/li&gt;
&lt;/ul&gt;

&lt;div class=&quot;code&quot;&gt;
Total Steel (MT) = (kg/m² × L × B) / 1000
&lt;/div&gt;

&lt;p&gt;
This gives steel per bay, useful for:
&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Cost estimation&lt;/li&gt;
&lt;li&gt;Feasibility studies&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;5. Anchor Bolt Design Logic&lt;/h2&gt;

&lt;h3&gt;Bolt Diameter Selection&lt;/h3&gt;

&lt;div class=&quot;code&quot;&gt;
If L &gt; 30 m → M30 bolts  
Else → M24 bolts
&lt;/div&gt;

&lt;h3&gt;Bolt Quantity&lt;/h3&gt;

&lt;div class=&quot;code&quot;&gt;
Pinned Base → 4 bolts  
Fixed Base → 8 bolts
&lt;/div&gt;

&lt;h3&gt;Embedment Depth&lt;/h3&gt;

&lt;div class=&quot;code&quot;&gt;
Embedment = 15 × Bolt Diameter
&lt;/div&gt;

&lt;p&gt;
This ensures proper anchorage and pull-out resistance.
&lt;/p&gt;

&lt;h2&gt;6. Shear Key Requirement&lt;/h2&gt;

&lt;p&gt;
Shear key necessity is checked using friction vs shear condition:
&lt;/p&gt;

&lt;div class=&quot;code&quot;&gt;
If Vu &gt; μ × Pu → Shear Key Required
&lt;/div&gt;

&lt;p&gt;
Simplified logic used in the tool:
&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;High wind (≥ 44 m/s) OR large span (&gt; 35 m) → Shear key required&lt;/li&gt;
&lt;li&gt;Otherwise friction is sufficient&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;Typical Shear Key Sizes&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;ISMC 150 channel&lt;/li&gt;
&lt;li&gt;100 × 100 box section&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;7. Role of MathJax&lt;/h2&gt;

&lt;p&gt;
The tool integrates &lt;strong&gt;MathJax&lt;/strong&gt; to dynamically render engineering equations such as:
&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Depth optimization formulas&lt;/li&gt;
&lt;li&gt;Weight calculations&lt;/li&gt;
&lt;li&gt;Design inequalities&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;
This improves readability and provides a professional engineering interface.
&lt;/p&gt;

&lt;h2&gt;8. Engineering Assumptions&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Preliminary design only (not final design)&lt;/li&gt;
&lt;li&gt;Uniform loading conditions&lt;/li&gt;
&lt;li&gt;Standard material properties&lt;/li&gt;
&lt;li&gt;Typical industrial building configuration&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;9. Limitations&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Does not replace detailed structural analysis&lt;/li&gt;
&lt;li&gt;No seismic load consideration&lt;/li&gt;
&lt;li&gt;No connection design verification&lt;/li&gt;
&lt;li&gt;No code-specific checks (IS 800, MBMA, etc.)&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;10. Conclusion&lt;/h2&gt;

&lt;p&gt;
This PEB estimation tool serves as a &lt;span class=&quot;highlight&quot;&gt;fast and practical design assistant&lt;/span&gt; 
for structural engineers. It bridges the gap between conceptual design and detailed analysis,
helping engineers make informed decisions quickly.
&lt;/p&gt;

&lt;p&gt;
For final design, it is recommended to validate results using detailed structural analysis software
and relevant design codes.
&lt;/p&gt;

&lt;/div&gt;

&lt;script&gt;
function runCalculations() {
    const L = parseFloat(document.getElementById(&#39;span&#39;).value);
    const B = parseFloat(document.getElementById(&#39;bay&#39;).value);
    const H = parseFloat(document.getElementById(&#39;height&#39;).value);
    const Vb = parseFloat(document.getElementById(&#39;wind&#39;).value);
    const base = document.getElementById(&#39;baseType&#39;).value;

    // Calculations
    let d_max = Math.ceil((L * 1000 / 28) / 50) * 50;
    let tw = Math.ceil(d_max / 150); if(tw &lt; 6) tw = 6;
    let fw = Math.ceil((d_max/5)/25)*25; if(fw &lt; 150) fw = 150;
    
    // Weight logic
    let kg_m2 = 25 + (L * 0.5) + (Vb &gt; 44 ? 10 : 0);
    let total_mt = (kg_m2 * L * B) / 1000;

    // Anchor &amp; Shear logic
    let bolt_dia = L &gt; 30 ? 30 : 24;
    let bolt_qty = base === &#39;fixed&#39; ? 8 : 4;
    let shear_key_req = (Vb &gt;= 44 || L &gt; 35) ? &quot;YES&quot; : &quot;NO (Friction OK)&quot;;
    let skey_size = shear_key_req === &quot;YES&quot; ? &quot;ISMC 150 or 100x100 Box&quot; : &quot;N/A&quot;;

    // Results display
    document.getElementById(&#39;output&#39;).style.display = &#39;grid&#39;;
    document.getElementById(&#39;res-dmax&#39;).innerText = d_max + &quot; mm&quot;;
    document.getElementById(&#39;res-tw&#39;).innerText = tw + &quot; mm&quot;;
    document.getElementById(&#39;res-fw&#39;).innerText = fw + &quot; mm&quot;;
    document.getElementById(&#39;res-def&#39;).innerText = (L*1000/180).toFixed(1) + &quot; mm&quot;;
    
    document.getElementById(&#39;res-bolt&#39;).innerText = bolt_qty + &quot; Nos M&quot; + bolt_dia;
    document.getElementById(&#39;res-embed&#39;).innerText = (bolt_dia * 15) + &quot; mm&quot;;
    document.getElementById(&#39;res-skey&#39;).innerText = shear_key_req;
    document.getElementById(&#39;res-skey-size&#39;).innerText = skey_size;
    document.getElementById(&#39;res-total-mt&#39;).innerText = total_mt.toFixed(2);

    // Dynamic MathJax Rendering
    const mathDiv = document.getElementById(&#39;math-output&#39;);
    mathDiv.innerHTML = `
        &lt;p&gt;Using optimization ratio $d \\approx L/28$, the calculated depth is $${d_max}\\text{ mm}$.&lt;/p&gt;
        &lt;p&gt;The estimated steel consumption is calculated as: 
        $$\\text{Weight} = (${kg_m2.toFixed(1)}\\text{ kg/m}^2) \\times (L \\times B)$$&lt;/p&gt;
        &lt;p&gt;Shear capacity check: If $V_u &gt; \\mu \\cdot P_u$, then a Shear Key is required.&lt;/p&gt;
    `;

    // Re-run MathJax to process new dynamic content
    MathJax.Hub.Queue([&quot;Typeset&quot;, MathJax.Hub, mathDiv]);
}
&lt;/script&gt;

&lt;/body&gt;
&lt;/html&gt;
&lt;div class=&quot;blogger-post-footer&quot;&gt;https://yogipwd.blogspot.com/&lt;/div&gt;</description><link>https://www.yogipwd.com/2026/03/peb-section-estimation-calculator.html</link><author>noreply@blogger.com (Yogendra)</author><thr:total>0</thr:total></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-1074964965522467583.post-3162939310620119729</guid><pubDate>Sat, 21 Mar 2026 09:06:10 +0000</pubDate><atom:updated>2026-04-06T12:18:17.097+05:30</atom:updated><category domain="http://www.blogger.com/atom/ns#">PWD Working</category><title>Letter correspondence</title><description>&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;Letter Correspondence Manager&lt;/title&gt;
    &lt;script src=&quot;https://cdn.tailwindcss.com&quot;&gt;&lt;/script&gt;
    &lt;style&gt;
        body { background-color: #f3f4f6; padding: 1rem; font-family: sans-serif; scroll-behavior: smooth; }
        @media (min-width: 768px) { body { padding: 2.5rem; } }
        .max-w-5xl { max-width: 64rem; margin: 0 auto; background-color: white; padding: 1.5rem; border-radius: 0.75rem; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); }
        h2 { font-size: 1.5rem; font-weight: 700; margin-bottom: 1.5rem; color: #1f2937; border-bottom: 1px solid #e5e7eb; padding-bottom: 1rem; }
        label { display: block; font-size: 0.875rem; font-weight: 600; color: #374151; margin-bottom: 0.25rem; }
        form { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
        @media (min-width: 768px) { form { grid-template-columns: repeat(2, minmax(0, 1fr)); } .md\:col-span-2 { grid-column: span 2 / span 2; } }
        input, select, textarea { width: 100%; padding: 0.625rem; border: 1px solid #d1d5db; border-radius: 0.5rem; outline: none; }
        input:focus, select:focus, textarea:focus { ring: 2px solid #3b82f6; border-color: #3b82f6; }
        #action { border-color: #93c5fd; background-color: #eff6ff; color: #2563eb; font-weight: 500; }
        button, .cursor-pointer { padding: 0.75rem 1.5rem; border-radius: 0.5rem; font-weight: 700; cursor: pointer; border: none; transition: background 0.2s; text-align: center; }
        #submitBtn { background-color: #2563eb; color: white; flex: 1; }
        .bg-yellow-600 { background-color: #ca8a04; color: white; }
        .bg-green-600 { background-color: #16a34a; color: white; }
        .bg-orange-500 { background-color: #f97316; color: white; }
        .bg-gray-600 { background-color: #4b5563; color: white; }
        
        /* --- HORIZONTAL SCROLL STYLING --- */
        .table-container { 
            width: 100%; 
            overflow-x: auto; /* Enables the scrollbar */
            border: 1px solid #e5e7eb;
            border-radius: 0.5rem;
            background: white;
        }

        table { 
            width: 100%; 
            min-width: 1000px; /* Force the table to be wide enough to show all columns */
            border-collapse: collapse; 
            font-size: 0.875rem; 
            text-align: left; 
        }
        
        /* Custom Scrollbar Styling (Optional) */
        .table-container::-webkit-scrollbar { height: 8px; }
        .table-container::-webkit-scrollbar-track { background: #f1f1f1; }
        .table-container::-webkit-scrollbar-thumb { background: #888; border-radius: 10px; }
        .table-container::-webkit-scrollbar-thumb:hover { background: #555; }

        th, td { padding: 0.75rem; border: 1px solid #e5e7eb; white-space: nowrap; } /* Prevent text wrapping */
        .hidden { display: none; }
      }
h1, h2 {
    color: #1a3a5a;
}
h2 {
    border-left: 5px solid #3498db;
    padding-left: 10px;
}
ul {
    margin-left: 20px;
}
.code {
    background: #f8f9fa;
    padding: 10px;
    border-left: 4px solid #3498db;
    font-family: monospace;
}
.highlight {
    color: #e74c3c;
    font-weight: bold;
}
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class=&quot;max-w-5xl mx-auto&quot;&gt;
        &lt;h2&gt;Letter Correspondence Entry&lt;/h2&gt;
        
        &lt;form id=&quot;letterForm&quot;&gt;
            &lt;div&gt;
                &lt;label&gt;Sr. No&lt;/label&gt;
                &lt;input type=&quot;number&quot; id=&quot;sr&quot; required&gt;
            &lt;/div&gt;
            &lt;div&gt;
                &lt;label&gt;Subject&lt;/label&gt;
                &lt;input type=&quot;text&quot; id=&quot;subj&quot; required&gt;
            &lt;/div&gt;
            &lt;div&gt;
                &lt;label&gt;Letter Date&lt;/label&gt;
                &lt;input type=&quot;date&quot; id=&quot;l_date&quot;&gt;
            &lt;/div&gt;
            &lt;div&gt;
                &lt;label&gt;Letter Number&lt;/label&gt;
                &lt;input type=&quot;text&quot; id=&quot;l_num&quot;&gt;
            &lt;/div&gt;
           &lt;div&gt;
    &lt;label&gt;Letter Received Date&lt;/label&gt;
    &lt;input type=&quot;date&quot; id=&quot;r_date&quot;&gt;
&lt;/div&gt;
&lt;div&gt;
    &lt;label&gt;Letter Received Number&lt;/label&gt;
    &lt;input type=&quot;text&quot; id=&quot;r_num&quot;&gt;
&lt;/div&gt;
            &lt;div&gt;
                &lt;label class=&quot;text-blue-600&quot;&gt;Action Taken&lt;/label&gt;
                &lt;select id=&quot;action&quot; required&gt;
                    &lt;option value=&quot;&quot; disabled selected&gt;-- Select Status --&lt;/option&gt;
                    &lt;option value=&quot;Forwarded&quot;&gt;1) Forwarded&lt;/option&gt;
                    &lt;option value=&quot;Reverted&quot;&gt;2) Reverted&lt;/option&gt;
                    &lt;option value=&quot;Filed&quot;&gt;3) Filed&lt;/option&gt;
                    &lt;option value=&quot;Action Yet to be taken&quot;&gt;4) Action Yet to be taken&lt;/option&gt;
                &lt;/select&gt;
            &lt;/div&gt;
            &lt;div&gt;
                &lt;label&gt;Reply Date&lt;/label&gt;
                &lt;input type=&quot;date&quot; id=&quot;rep_date&quot;&gt;
            &lt;/div&gt;
            &lt;div class=&quot;md:col-span-2&quot;&gt;
                &lt;label&gt;Remarks&lt;/label&gt;
                &lt;textarea id=&quot;rem&quot; rows=&quot;2&quot;&gt;&lt;/textarea&gt;
            &lt;/div&gt;
            
            &lt;div class=&quot;md:col-span-2 flex flex-wrap gap-3 mt-4&quot;&gt;
                &lt;button type=&quot;submit&quot; id=&quot;submitBtn&quot;&gt;Save&lt;/button&gt;
                &lt;button type=&quot;button&quot; onclick=&quot;scrollToTable()&quot; class=&quot;bg-gray-600&quot;&gt;View Saved List ↓&lt;/button&gt;
                &lt;button type=&quot;button&quot; onclick=&quot;exportJSON()&quot; class=&quot;bg-green-600&quot;&gt;Export JSON&lt;/button&gt;
                &lt;label class=&quot;bg-orange-500 text-white px-6 py-3 rounded-lg cursor-pointer&quot;&gt;
                    Import JSON &lt;input type=&quot;file&quot; id=&quot;importFile&quot; class=&quot;hidden&quot; accept=&quot;.json&quot; onchange=&quot;importJSON(event)&quot;&gt;
                &lt;/label&gt;
            &lt;/div&gt;
        &lt;/form&gt;

        &lt;div id=&quot;tableSection&quot; class=&quot;mt-10&quot;&gt;
            &lt;h3 class=&quot;text-lg font-bold mb-3 italic&quot;&gt;Recent Entries (Local View)&lt;/h3&gt;
            
            &lt;div class=&quot;table-container&quot;&gt;
                &lt;table&gt;
                    &lt;thead class=&quot;bg-gray-200&quot;&gt;
                        &lt;tr&gt;
                            &lt;th&gt;Sr.&lt;/th&gt;
                            &lt;th&gt;Subject&lt;/th&gt;
                            &lt;th&gt;Letter Date&lt;/th&gt;
                            &lt;th&gt;Letter No.&lt;/th&gt;
                            &lt;th&gt;Reply Date&lt;/th&gt;
                            &lt;th class=&quot;text-blue-600&quot;&gt;Status&lt;/th&gt;
                            &lt;th&gt;Action&lt;/th&gt;
                            &lt;th&gt;Remark&lt;/th&gt;
                          &lt;th&gt;Letter Inward No.&lt;/th&gt;
                        &lt;/tr&gt;
                    &lt;/thead&gt;
                    &lt;tbody id=&quot;dataTable&quot;&gt;&lt;/tbody&gt;
                &lt;/table&gt;
            &lt;/div&gt;
            &lt;p class=&quot;text-xs text-gray-400 mt-2&quot;&gt;← Scroll horizontally to see more columns →&lt;/p&gt;
        &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;div class=&quot;container&quot;&gt;

&lt;h1&gt;Letter Correspondence Entry System – Technical Explanation&lt;/h1&gt;

&lt;p&gt;
This web-based application is designed to manage and track official correspondence efficiently.
It enables users to record, update, store, and retrieve letter communication details with a simple interface.
The system combines &lt;strong&gt;form-based data entry&lt;/strong&gt;, &lt;strong&gt;local storage&lt;/strong&gt;, and &lt;strong&gt;cloud integration&lt;/strong&gt;.
&lt;/p&gt;

&lt;h2&gt;1. Objective of the System&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Maintain structured records of incoming and outgoing letters&lt;/li&gt;
&lt;li&gt;Track action taken on each correspondence&lt;/li&gt;
&lt;li&gt;Enable quick editing and deletion of records&lt;/li&gt;
&lt;li&gt;Provide backup via JSON export/import&lt;/li&gt;
&lt;li&gt;Integrate with Google Sheets for centralized data storage&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;2. Form Input Structure&lt;/h2&gt;

&lt;p&gt;The form captures key details of correspondence:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Sr. No:&lt;/strong&gt; Unique identifier for each entry&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Subject:&lt;/strong&gt; Brief description of the letter&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Letter Date:&lt;/strong&gt; Date on the original letter&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Letter Number:&lt;/strong&gt; Reference number of the letter&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Letter Received Date:&lt;/strong&gt; Date when letter is received&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Letter Received Number:&lt;/strong&gt; Inward/receipt number&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Action Taken:&lt;/strong&gt; Status of processing&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Reply Date:&lt;/strong&gt; Date of response&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Remarks:&lt;/strong&gt; Additional notes&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;3. Action Tracking Logic&lt;/h2&gt;

&lt;p&gt;
The system categorizes each letter based on its processing status:
&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Forwarded&lt;/li&gt;
&lt;li&gt;Reverted&lt;/li&gt;
&lt;li&gt;Filed&lt;/li&gt;
&lt;li class=&quot;highlight&quot;&gt;Action Yet to be Taken (Pending cases)&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;
This helps in monitoring workflow and identifying pending tasks.
&lt;/p&gt;

&lt;h2&gt;4. Data Storage Mechanism&lt;/h2&gt;

&lt;h3&gt;4.1 Local Storage&lt;/h3&gt;

&lt;p&gt;
All entries are stored in the browser using &lt;strong&gt;localStorage&lt;/strong&gt;:
&lt;/p&gt;

&lt;div class=&quot;code&quot;&gt;
localStorage.setItem(&#39;letterEntries&#39;, JSON.stringify(letterData));
&lt;/div&gt;

&lt;p&gt;
Benefits:
&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Fast access&lt;/li&gt;
&lt;li&gt;No server dependency&lt;/li&gt;
&lt;li&gt;Offline usability&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;4.2 Cloud Storage (Google Apps Script)&lt;/h3&gt;

&lt;p&gt;
Data is also sent to a Google Sheet using a web API:
&lt;/p&gt;

&lt;div class=&quot;code&quot;&gt;
fetch(SCRIPT_URL, {
    method: &#39;POST&#39;,
    mode: &#39;no-cors&#39;,
    body: JSON.stringify(payload)
});
&lt;/div&gt;

&lt;p&gt;
Advantages:
&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Centralized record keeping&lt;/li&gt;
&lt;li&gt;Multi-user accessibility&lt;/li&gt;
&lt;li&gt;Permanent backup&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;5. Data Rendering (Table View)&lt;/h2&gt;

&lt;p&gt;
The system dynamically displays saved entries in a table using JavaScript:
&lt;/p&gt;

&lt;div class=&quot;code&quot;&gt;
tbody.innerHTML = letterData.map(...).join(&#39;&#39;);
&lt;/div&gt;

&lt;p&gt;
Features:
&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Live updates&lt;/li&gt;
&lt;li&gt;Editable rows&lt;/li&gt;
&lt;li&gt;Delete functionality&lt;/li&gt;
&lt;li&gt;Horizontal scroll for wide datasets&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;6. Edit and Update Functionality&lt;/h2&gt;

&lt;p&gt;
When editing a record:
&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Form fields are pre-filled with existing data&lt;/li&gt;
&lt;li&gt;Submit button changes to &lt;strong&gt;&quot;Update Entry&quot;&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;Selected record is updated instead of creating a new one&lt;/li&gt;
&lt;/ul&gt;

&lt;div class=&quot;code&quot;&gt;
letterData[editIndex] = payload;
&lt;/div&gt;

&lt;h2&gt;7. Delete Functionality&lt;/h2&gt;

&lt;p&gt;
Users can remove records with confirmation:
&lt;/p&gt;

&lt;div class=&quot;code&quot;&gt;
letterData.splice(index, 1);
&lt;/div&gt;

&lt;p&gt;
This ensures data integrity and prevents accidental deletion.
&lt;/p&gt;

&lt;h2&gt;8. Backup and Restore System&lt;/h2&gt;

&lt;h3&gt;8.1 Export JSON&lt;/h3&gt;

&lt;p&gt;
Data can be exported as a backup file:
&lt;/p&gt;

&lt;div class=&quot;code&quot;&gt;
new Blob([JSON.stringify(letterData, null, 2)], { type: &#39;application/json&#39; });
&lt;/div&gt;

&lt;h3&gt;8.2 Import JSON&lt;/h3&gt;

&lt;p&gt;
Previously saved data can be restored:
&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;File is read using FileReader&lt;/li&gt;
&lt;li&gt;Data replaces current dataset&lt;/li&gt;
&lt;li&gt;Table updates automatically&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;9. User Experience Enhancements&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Smooth scrolling to data table&lt;/li&gt;
&lt;li&gt;Processing indicator during submission&lt;/li&gt;
&lt;li&gt;Dynamic button state (Save → Update)&lt;/li&gt;
&lt;li&gt;Responsive layout using utility classes&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;10. Workflow Summary&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;User enters correspondence details&lt;/li&gt;
&lt;li&gt;Clicks &quot;Save&quot;&lt;/li&gt;
&lt;li&gt;Data is stored locally and sent to cloud&lt;/li&gt;
&lt;li&gt;Table updates instantly&lt;/li&gt;
&lt;li&gt;User can edit/delete/export as needed&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;11. Engineering &amp; Administrative Benefits&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Efficient document tracking&lt;/li&gt;
&lt;li&gt;Reduced manual register work&lt;/li&gt;
&lt;li&gt;Easy audit and reporting&lt;/li&gt;
&lt;li&gt;Improved accountability&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;12. Limitations&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;No authentication system&lt;/li&gt;
&lt;li&gt;Dependent on browser storage&lt;/li&gt;
&lt;li&gt;No validation for duplicate entries&lt;/li&gt;
&lt;li&gt;Limited error handling for API&lt;/li&gt;
&lt;/ul&gt;

&lt;/div&gt;

    &lt;script&gt;
        const SCRIPT_URL = &#39;https://script.google.com/macros/s/AKfycbzYOWmhkHmYuA2WuPGdGRcebSVMWEENwCB8z2k2379HNyto2UIhnw_jrSm9lr4u08nuXQ/exec&#39;;
        let letterData = JSON.parse(localStorage.getItem(&#39;letterEntries&#39;)) || [];
        let editIndex = -1;

        function scrollToTable() {
            document.getElementById(&#39;tableSection&#39;).scrollIntoView({ behavior: &#39;smooth&#39; });
        }

        const renderTable = () =&gt; {
            const tbody = document.getElementById(&#39;dataTable&#39;);
            tbody.innerHTML = letterData.map((item, index) =&gt; `
                &lt;tr class=&quot;hover:bg-gray-50&quot;&gt;
                    &lt;td class=&quot;p-3 border&quot;&gt;${item.sr}&lt;/td&gt;
                    &lt;td class=&quot;p-3 border font-medium&quot;&gt;${item.subj}&lt;/td&gt;
                    &lt;td class=&quot;p-3 border&quot;&gt;${item.l_date}&lt;/td&gt;
                    &lt;td class=&quot;p-3 border&quot;&gt;${item.l_num || &#39;-&#39;}&lt;/td&gt;
                    &lt;td class=&quot;p-3 border&quot;&gt;${item.rep_date || &#39;-&#39;}&lt;/td&gt;
                    &lt;td class=&quot;p-3 border font-bold text-blue-700&quot;&gt;${item.action}&lt;/td&gt;
                    &lt;td class=&quot;p-3 border&quot;&gt;
                        &lt;div class=&quot;flex gap-2&quot;&gt;
                            &lt;button onclick=&quot;editRow(${index})&quot; class=&quot;text-blue-600 underline&quot;&gt;Edit&lt;/button&gt;
                            &lt;button onclick=&quot;deleteRow(${index})&quot; class=&quot;text-red-500 underline&quot;&gt;Delete&lt;/button&gt;
                        &lt;/div&gt;
                    &lt;/td&gt;
                    &lt;td class=&quot;p-3 border&quot;&gt;${item.rem || &#39;-&#39;}&lt;/td&gt;
                    &lt;td class=&quot;p-3 border&quot;&gt;${item.r_num || &#39;-&#39;}&lt;/td&gt;
                &lt;/tr&gt;
            `).join(&#39;&#39;);
            localStorage.setItem(&#39;letterEntries&#39;, JSON.stringify(letterData));
        };

        function editRow(index) {
    const item = letterData[index];
    editIndex = index;
    
    document.getElementById(&#39;sr&#39;).value = item.sr;
    document.getElementById(&#39;subj&#39;).value = item.subj;
    document.getElementById(&#39;l_date&#39;).value = item.l_date;
    document.getElementById(&#39;l_num&#39;).value = item.l_num;
    document.getElementById(&#39;r_date&#39;).value = item.r_date;
    document.getElementById(&#39;r_num&#39;).value = item.r_num || &#39;&#39;; // ADD THIS
    document.getElementById(&#39;action&#39;).value = item.action;
    document.getElementById(&#39;rep_date&#39;).value = item.rep_date;
    document.getElementById(&#39;rem&#39;).value = item.rem;

    const btn = document.getElementById(&#39;submitBtn&#39;);
    btn.innerText = &quot;Update Entry&quot;;
    btn.classList.add(&#39;bg-yellow-600&#39;);
    window.scrollTo({ top: 0, behavior: &#39;smooth&#39; });
}

        document.getElementById(&#39;letterForm&#39;).addEventListener(&#39;submit&#39;, async (e) =&gt; {
            e.preventDefault();
            const submitBtn = document.getElementById(&#39;submitBtn&#39;);
            submitBtn.disabled = true;
            submitBtn.innerText = &quot;Processing...&quot;;

            const payload = {
    sr: document.getElementById(&#39;sr&#39;).value,
    subj: document.getElementById(&#39;subj&#39;).value,
    l_date: document.getElementById(&#39;l_date&#39;).value,
    l_num: document.getElementById(&#39;l_num&#39;).value,
    r_date: document.getElementById(&#39;r_date&#39;).value,
    r_num: document.getElementById(&#39;r_num&#39;).value, // ADD THIS
    action: document.getElementById(&#39;action&#39;).value,
    rep_date: document.getElementById(&#39;rep_date&#39;).value,
    rem: document.getElementById(&#39;rem&#39;).value
};

            try {
                await fetch(SCRIPT_URL, { method: &#39;POST&#39;, mode: &#39;no-cors&#39;, body: JSON.stringify(payload) });

                if (editIndex === -1) {
                    letterData.push(payload);
                } else {
                    letterData[editIndex] = payload;
                    editIndex = -1;
                }

                renderTable();
                e.target.reset();
                submitBtn.innerText = &quot;Save&quot;;
                submitBtn.classList.remove(&#39;bg-yellow-600&#39;);
                
                setTimeout(scrollToTable, 500); 

            } catch (error) {
                alert(&#39;Error connecting to Sheet.&#39;);
            } finally {
                submitBtn.disabled = false;
            }
        });

        function deleteRow(index) {
            if(confirm(&quot;Delete record?&quot;)) {
                letterData.splice(index, 1);
                renderTable();
            }
        }

        function exportJSON() {
            const blob = new Blob([JSON.stringify(letterData, null, 2)], { type: &#39;application/json&#39; });
            const a = document.createElement(&#39;a&#39;);
            a.href = URL.createObjectURL(blob);
            a.download = &#39;backup.json&#39;;
            a.click();
        }

        function importJSON(event) {
            const reader = new FileReader();
            reader.onload = (e) =&gt; {
                letterData = JSON.parse(e.target.result);
                renderTable();
                scrollToTable();
            };
            reader.readAsText(event.target.files[0]);
        }

        renderTable();
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;&lt;div class=&quot;blogger-post-footer&quot;&gt;https://yogipwd.blogspot.com/&lt;/div&gt;</description><link>https://www.yogipwd.com/2026/03/letter-correspondence.html</link><author>noreply@blogger.com (Yogendra)</author><thr:total>0</thr:total></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-1074964965522467583.post-8700580112072653133</guid><pubDate>Thu, 19 Mar 2026 02:32:58 +0000</pubDate><atom:updated>2026-04-06T12:21:05.699+05:30</atom:updated><title>PUMP DESIGN CALCULATION</title><description>
&lt;style&gt;
body {
    font-family: &#39;Segoe UI&#39;, Arial, sans-serif;
    background: #f4f6f9;
    color: #333;
    line-height: 1.6;
    padding: 20px;
}
.container {
    max-width: 1100px;
    margin: auto;
    background: #fff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}
h1, h2 {
    color: #1a5276;
}
h2 {
    border-left: 5px solid #3498db;
    padding-left: 10px;
}
ul {
    margin-left: 20px;
}
.code {
    background: #f8f9fa;
    padding: 10px;
    border-left: 4px solid #3498db;
    font-family: monospace;
}
.highlight {
    color: #e74c3c;
    font-weight: bold;
}
&lt;/style&gt;


&lt;div id=&quot;pump-calculator-container&quot; style=&quot;font-family: &#39;Segoe UI&#39;, Arial, sans-serif; max-width: 600px; margin: 20px auto; padding: 25px; border: 1px solid #ccc; border-radius: 12px; background-color: #ffffff; box-shadow: 0 10px 20px rgba(0,0,0,0.1);&quot;&gt;
    
    &lt;div id=&quot;print-header&quot; style=&quot;display: none; text-align: center; border-bottom: 2px solid #000; margin-bottom: 20px;&quot;&gt;
        &lt;h1&gt;PUMP DESIGN CALCULATION REPORT&lt;/h1&gt;
        &lt;p&gt;Project Infrastructure Analysis | Date: &lt;span id=&quot;print-date&quot;&gt;&lt;/span&gt;&lt;/p&gt;
    &lt;/div&gt;

    &lt;h2 id=&quot;calc-title&quot; style=&quot;text-align: center; color: #1a5276; border-bottom: 2px solid #3498db; padding-bottom: 10px;&quot;&gt;Pump Design &amp; Data Logger&lt;/h2&gt;
    
    &lt;div style=&quot;display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 15px;&quot;&gt;
        &lt;div&gt;&lt;label&gt;Suction (z1) m:&lt;/label&gt;&lt;input type=&quot;number&quot; id=&quot;z1&quot; value=&quot;0&quot; style=&quot;width:90%; padding:5px;&quot;&gt;&lt;/div&gt;
        &lt;div&gt;&lt;label&gt;Discharge (z2) m:&lt;/label&gt;&lt;input type=&quot;number&quot; id=&quot;z2&quot; value=&quot;20&quot; style=&quot;width:90%; padding:5px;&quot;&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div style=&quot;margin-bottom: 15px;&quot;&gt;
        &lt;label&gt;Pipe Length (L) m:&lt;/label&gt;
        &lt;input type=&quot;number&quot; id=&quot;pipeLength&quot; value=&quot;500&quot; style=&quot;width:95%; padding:5px;&quot;&gt;
    &lt;/div&gt;
    &lt;div style=&quot;display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 15px;&quot;&gt;
        &lt;div&gt;&lt;label&gt;Dia (D) mm:&lt;/label&gt;&lt;input type=&quot;number&quot; id=&quot;diameter&quot; value=&quot;150&quot; style=&quot;width:90%; padding:5px;&quot;&gt;&lt;/div&gt;
        &lt;div&gt;&lt;label&gt;Flow (Q) m³/hr:&lt;/label&gt;&lt;input type=&quot;number&quot; id=&quot;flowRate&quot; value=&quot;50&quot; style=&quot;width:90%; padding:5px;&quot;&gt;&lt;/div&gt;
    &lt;/div&gt;

    &lt;div id=&quot;action-buttons&quot;&gt;
        &lt;button onclick=&quot;calculateAndShow()&quot; style=&quot;width: 100%; padding: 12px; background-color: #27ae60; color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: bold; margin-bottom: 10px;&quot;&gt;1. Calculate System&lt;/button&gt;
    &lt;/div&gt;

    &lt;div id=&quot;fullResult&quot; style=&quot;margin-top: 15px; padding: 15px; background-color: #f4fbf7; border: 1px solid #d5f5e3; border-radius: 8px; display: none;&quot;&gt;
        &lt;h4 style=&quot;margin-top:0;&quot;&gt;Calculation Results:&lt;/h4&gt;
        &lt;p&gt;Static Head: &lt;span id=&quot;resStatic&quot;&gt;0&lt;/span&gt; m&lt;/p&gt;
        &lt;p&gt;Friction Loss: &lt;span id=&quot;resFric&quot;&gt;0&lt;/span&gt; m&lt;/p&gt;
        &lt;p&gt;&lt;strong&gt;Total Dynamic Head (TDH):&lt;/strong&gt; &lt;span id=&quot;resTdh&quot;&gt;0&lt;/span&gt; m&lt;/p&gt;
        &lt;p&gt;&lt;strong&gt;Required Power:&lt;/strong&gt; &lt;span id=&quot;resKw&quot;&gt;0&lt;/span&gt; kW (&lt;span id=&quot;resHp&quot;&gt;0&lt;/span&gt; HP)&lt;/p&gt;
        
        &lt;div id=&quot;export-actions&quot; style=&quot;display: flex; gap: 10px; margin-top: 15px;&quot;&gt;
            &lt;button onclick=&quot;sendToSheet()&quot; style=&quot;flex: 1; padding: 10px; background-color: #f39c12; color: white; border: none; border-radius: 4px; cursor: pointer;&quot;&gt;Save to Sheet&lt;/button&gt;
            &lt;button onclick=&quot;prepareAndPrint()&quot; style=&quot;flex: 1; padding: 10px; background-color: #34495e; color: white; border: none; border-radius: 4px; cursor: pointer;&quot;&gt;Save as PDF&lt;/button&gt;
        &lt;/div&gt;
        &lt;p id=&quot;statusMsg&quot; style=&quot;font-size: 11px; text-align: center; color: #7f8c8d; margin-top: 5px;&quot;&gt;&lt;/p&gt;
    &lt;/div&gt;
&lt;/div&gt;


&lt;div class=&quot;container&quot;&gt;

&lt;h1&gt;Pump Design &amp; Data Logger – Technical Explanation&lt;/h1&gt;

&lt;p&gt;
This tool is developed for &lt;strong&gt;hydraulic pump system design&lt;/strong&gt; and performance estimation.
It calculates the &lt;strong&gt;Total Dynamic Head (TDH)&lt;/strong&gt; and required pump power based on
pipe flow conditions and elevation differences.
&lt;/p&gt;

&lt;h2&gt;1. Objective of the Tool&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Estimate pump head requirements&lt;/li&gt;
&lt;li&gt;Calculate friction losses in pipelines&lt;/li&gt;
&lt;li&gt;Determine pump power (kW and HP)&lt;/li&gt;
&lt;li&gt;Generate printable design reports&lt;/li&gt;
&lt;li&gt;Store and export calculation data&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;2. Input Parameters&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Suction Level (z₁):&lt;/strong&gt; Pump inlet elevation&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Discharge Level (z₂):&lt;/strong&gt; Outlet elevation&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Pipe Length (L):&lt;/strong&gt; Total pipeline length&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Pipe Diameter (D):&lt;/strong&gt; Internal diameter of pipe&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Flow Rate (Q):&lt;/strong&gt; Discharge in m³/hr&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;3. Hydraulic Calculations&lt;/h2&gt;

&lt;h3&gt;3.1 Static Head&lt;/h3&gt;

&lt;div class=&quot;code&quot;&gt;
Static Head = z₂ - z₁
&lt;/div&gt;

&lt;p&gt;
Represents elevation difference between suction and discharge points.
&lt;/p&gt;

&lt;h3&gt;3.2 Flow Conversion&lt;/h3&gt;

&lt;div class=&quot;code&quot;&gt;
Q (m³/s) = Q (m³/hr) / 3600
&lt;/div&gt;

&lt;p&gt;
Required for SI unit consistency.
&lt;/p&gt;

&lt;h3&gt;3.3 Pipe Diameter Conversion&lt;/h3&gt;

&lt;div class=&quot;code&quot;&gt;
D (m) = D (mm) / 1000
&lt;/div&gt;

&lt;h3&gt;3.4 Friction Loss (Hazen-Williams Equation)&lt;/h3&gt;

&lt;div class=&quot;code&quot;&gt;
hf = (10.67 × L × Q^1.852) / (C^1.852 × D^4.87)
&lt;/div&gt;

&lt;p&gt;
Where:
&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;hf = friction head loss (m)&lt;/li&gt;
&lt;li&gt;C = Hazen-Williams coefficient (assumed 130)&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;
This formula is widely used for water supply systems and provides reliable estimates for turbulent flow.
&lt;/p&gt;

&lt;h3&gt;3.5 Total Dynamic Head (TDH)&lt;/h3&gt;

&lt;div class=&quot;code&quot;&gt;
TDH = Static Head + Friction Loss
&lt;/div&gt;

&lt;p&gt;
This represents the total head against which the pump must operate.
&lt;/p&gt;

&lt;h3&gt;3.6 Pump Power Calculation&lt;/h3&gt;

&lt;div class=&quot;code&quot;&gt;
Power (kW) = (ρ × g × Q × TDH) / (η × 1000)
&lt;/div&gt;

&lt;p&gt;
Where:
&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;ρ = density of water (1000 kg/m³)&lt;/li&gt;
&lt;li&gt;g = 9.81 m/s²&lt;/li&gt;
&lt;li&gt;η = pump efficiency (assumed 75%)&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;3.7 Conversion to Horsepower&lt;/h3&gt;

&lt;div class=&quot;code&quot;&gt;
HP = kW × 1.341
&lt;/div&gt;

&lt;h2&gt;4. System Workflow&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;User enters hydraulic parameters&lt;/li&gt;
&lt;li&gt;Clicks &lt;strong&gt;&quot;Calculate System&quot;&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;System computes all hydraulic values&lt;/li&gt;
&lt;li&gt;Results are displayed instantly&lt;/li&gt;
&lt;li&gt;User can export or print results&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;5. Data Logging Feature&lt;/h2&gt;

&lt;p&gt;
The system stores the last calculation in memory:
&lt;/p&gt;

&lt;div class=&quot;code&quot;&gt;
lastCalculation = { flow, head, friction, tdh, kw, hp }
&lt;/div&gt;

&lt;p&gt;
This enables:
&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Quick export to external systems&lt;/li&gt;
&lt;li&gt;Cloud storage integration&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;6. Google Sheets Integration&lt;/h2&gt;

&lt;p&gt;
The tool supports saving results to Google Sheets via API:
&lt;/p&gt;

&lt;div class=&quot;code&quot;&gt;
fetch(scriptUrl, {
    method: &#39;POST&#39;,
    mode: &#39;no-cors&#39;,
    body: JSON.stringify(lastCalculation)
});
&lt;/div&gt;

&lt;p&gt;
Benefits:
&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Centralized data storage&lt;/li&gt;
&lt;li&gt;Project record keeping&lt;/li&gt;
&lt;li&gt;Multi-user accessibility&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;7. Print &amp; PDF Report Generation&lt;/h2&gt;

&lt;p&gt;
The tool includes a print-optimized layout:
&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Hides buttons and UI elements&lt;/li&gt;
&lt;li&gt;Displays formatted report header&lt;/li&gt;
&lt;li&gt;Auto inserts current date&lt;/li&gt;
&lt;/ul&gt;

&lt;div class=&quot;code&quot;&gt;
window.print();
&lt;/div&gt;

&lt;p&gt;
This allows generation of professional design reports.
&lt;/p&gt;

&lt;h2&gt;8. Engineering Significance&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Ensures correct pump selection&lt;/li&gt;
&lt;li&gt;Avoids under/over-design&lt;/li&gt;
&lt;li&gt;Optimizes energy consumption&lt;/li&gt;
&lt;li&gt;Improves system reliability&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;9. Assumptions&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Water as working fluid&lt;/li&gt;
&lt;li&gt;Constant pipe roughness (C = 130)&lt;/li&gt;
&lt;li&gt;Pump efficiency = 75%&lt;/li&gt;
&lt;li&gt;Steady flow conditions&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;10. Limitations&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;No minor losses (bends, valves) considered&lt;/li&gt;
&lt;li&gt;No NPSH calculation&lt;/li&gt;
&lt;li&gt;No pump curve matching&lt;/li&gt;
&lt;li&gt;No transient flow analysis&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;11. Conclusion&lt;/h2&gt;

&lt;p&gt;
This tool serves as a &lt;span class=&quot;highlight&quot;&gt;quick and effective hydraulic design assistant&lt;/span&gt;
for engineers. It simplifies complex calculations into a user-friendly interface while maintaining
engineering accuracy for preliminary design.
&lt;/p&gt;

&lt;p&gt;
For final pump selection, it is recommended to validate results with manufacturer pump curves
and detailed hydraulic analysis.
&lt;/p&gt;

&lt;/div&gt;

&lt;style&gt;
@media print {
    body * { visibility: hidden; }
    #pump-calculator-container, #pump-calculator-container * { visibility: visible; }
    #pump-calculator-container { position: absolute; left: 0; top: 0; width: 100%; border: none; box-shadow: none; }
    #action-buttons, #export-actions, #statusMsg { display: none !important; }
    #print-header { display: block !important; }
    input { border: none !important; background: transparent !important; }
}
&lt;/style&gt;

&lt;script&gt;
let lastCalculation = {};

function calculateAndShow() {
    const z1 = parseFloat(document.getElementById(&#39;z1&#39;).value);
    const z2 = parseFloat(document.getElementById(&#39;z2&#39;).value);
    const L = parseFloat(document.getElementById(&#39;pipeLength&#39;).value);
    const D_mm = parseFloat(document.getElementById(&#39;diameter&#39;).value);
    const Q_hr = parseFloat(document.getElementById(&#39;flowRate&#39;).value);
    
    const staticH = z2 - z1;
    const Q_sec = Q_hr / 3600;
    const D_m = D_mm / 1000;
    const hf = (10.67 * L * Math.pow(Q_sec, 1.852)) / (Math.pow(130, 1.852) * Math.pow(D_m, 4.87));
    const tdh = staticH + hf;
    const kw = (1000 * 9.81 * Q_sec * tdh) / (0.75 * 1000);
    const hp = kw * 1.341;

    lastCalculation = { flow: Q_hr, head: staticH, friction: hf.toFixed(2), tdh: tdh.toFixed(2), kw: kw.toFixed(2), hp: hp.toFixed(2) };

    document.getElementById(&#39;resStatic&#39;).innerText = staticH.toFixed(2);
    document.getElementById(&#39;resFric&#39;).innerText = hf.toFixed(2);
    document.getElementById(&#39;resTdh&#39;).innerText = tdh.toFixed(2);
    document.getElementById(&#39;resKw&#39;).innerText = kw.toFixed(2);
    document.getElementById(&#39;resHp&#39;).innerText = hp.toFixed(2);
    document.getElementById(&#39;fullResult&#39;).style.display = &#39;block&#39;;
}

function prepareAndPrint() {
    document.getElementById(&#39;print-date&#39;).innerText = new Date().toLocaleDateString();
    window.print();
}

function sendToSheet() {
    const scriptUrl = &#39;YOUR_SCRIPT_URL_HERE&#39;; 
    if(scriptUrl === &#39;YOUR_SCRIPT_URL_HERE&#39;) { alert(&quot;Please add your Google Script URL first!&quot;); return; }
    
    document.getElementById(&#39;statusMsg&#39;).innerText = &quot;Sending to Sheets...&quot;;
    fetch(scriptUrl, { method: &#39;POST&#39;, mode: &#39;no-cors&#39;, body: JSON.stringify(lastCalculation) })
    .then(() =&gt; { document.getElementById(&#39;statusMsg&#39;).innerText = &quot;Data Saved Successfully!&quot;; })
    .catch(() =&gt; { document.getElementById(&#39;statusMsg&#39;).innerText = &quot;Error saving data.&quot;; });
}
&lt;/script&gt;
&lt;div class=&quot;blogger-post-footer&quot;&gt;https://yogipwd.blogspot.com/&lt;/div&gt;</description><link>https://www.yogipwd.com/2026/03/pump-design-calculation.html</link><author>noreply@blogger.com (Yogendra)</author><thr:total>0</thr:total></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-1074964965522467583.post-41499563337414015</guid><pubDate>Wed, 18 Mar 2026 18:56:55 +0000</pubDate><atom:updated>2026-04-06T12:25:22.756+05:30</atom:updated><title>Isolated footing design as per IS 456 2000</title><description>&lt;div id=&quot;footing-pro-container&quot;&gt;
    &lt;style&gt;
        #footing-pro-container {
            background: #ffffff;
            border: 1px solid #333;
            border-radius: 8px;
            padding: 20px;
            max-width: 600px;
            margin: 20px auto;
            font-family: &#39;Segoe UI&#39;, Tahoma, sans-serif;
            color: #222;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        }
        .header { text-align: center; border-bottom: 2px solid #2c3e50; margin-bottom: 20px; padding-bottom: 10px; }
        .input-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 20px; }
        .input-group label { display: block; font-size: 12px; font-weight: bold; margin-bottom: 5px; color: #555; }
        .input-group input { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }
        
        #calc-btn {
            width: 100%;
            background: #2c3e50;
            color: white;
            padding: 15px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-weight: bold;
            font-size: 16px;
        }
        #calc-btn:hover { background: #1a252f; }

        .report-section {
            margin-top: 25px;
            display: none;
            border-top: 2px dashed #ccc;
            padding-top: 20px;
        }
        .step { margin-bottom: 20px; padding: 10px; background: #fdfdfd; border-left: 4px solid #3498db; }
        .step-title { font-weight: bold; color: #2980b9; text-transform: uppercase; font-size: 13px; margin-bottom: 8px; }
        .formula { font-family: &#39;Courier New&#39;, monospace; background: #eee; padding: 5px; display: inline-block; margin: 5px 0; font-weight: bold; }
        .final-val { color: #c0392b; font-weight: bold; }
      
body {
    font-family: &#39;Segoe UI&#39;, Arial, sans-serif;
    background: #f4f6f9;
    color: #333;
    line-height: 1.6;
    padding: 20px;
}
.container {
    max-width: 1100px;
    margin: auto;
    background: #fff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}
h1, h2 {
    color: #1a3a5a;
}
h2 {
    border-left: 5px solid #3498db;
    padding-left: 10px;
}
ul {
    margin-left: 20px;
}
.code {
    background: #f8f9fa;
    padding: 10px;
    border-left: 4px solid #3498db;
    font-family: monospace;
}
.highlight {
    color: #e74c3c;
    font-weight: bold;
}
    &lt;/style&gt;

    &lt;div class=&quot;header&quot;&gt;
        &lt;h2 style=&quot;margin:0;&quot;&gt;RCC Isolated Footing Design&lt;/h2&gt;
        &lt;small&gt;As per IS 456:2000 Standards&lt;/small&gt;
    &lt;/div&gt;

    &lt;div class=&quot;input-grid&quot;&gt;
        &lt;div class=&quot;input-group&quot;&gt;
            &lt;label&gt;Column Load (P) in kN&lt;/label&gt;
            &lt;input type=&quot;number&quot; id=&quot;P&quot; value=&quot;1000&quot;&gt;
        &lt;/div&gt;
        &lt;div class=&quot;input-group&quot;&gt;
            &lt;label&gt;SBC of Soil in kN/m²&lt;/label&gt;
            &lt;input type=&quot;number&quot; id=&quot;SBC&quot; value=&quot;200&quot;&gt;
        &lt;/div&gt;
        &lt;div class=&quot;input-group&quot;&gt;
            &lt;label&gt;Column Size (mm)&lt;/label&gt;
            &lt;input type=&quot;number&quot; id=&quot;col_size&quot; value=&quot;400&quot;&gt;
        &lt;/div&gt;
        &lt;div class=&quot;input-group&quot;&gt;
            &lt;label&gt;Steel Grade (fy)&lt;/label&gt;
            &lt;input type=&quot;number&quot; id=&quot;fy&quot; value=&quot;500&quot;&gt;
        &lt;/div&gt;
    &lt;/div&gt;

    &lt;button id=&quot;calc-btn&quot; onclick=&quot;generateReport()&quot;&gt;Generate Detailed Report&lt;/button&gt;

    &lt;div id=&quot;report&quot; class=&quot;report-section&quot;&gt;
        &lt;div class=&quot;step&quot;&gt;
            &lt;div class=&quot;step-title&quot;&gt;Step 1: Required Footing Area&lt;/div&gt;
            Increasing load by 10% for self-weight...&lt;br&gt;
            &lt;div class=&quot;formula&quot;&gt;A = (P * 1.1) / SBC&lt;/div&gt;&lt;br&gt;
            Required Area: &lt;span id=&quot;r1&quot; class=&quot;final-val&quot;&gt;&lt;/span&gt; m²&lt;br&gt;
            Adopted Size: &lt;span id=&quot;r2&quot; class=&quot;final-val&quot;&gt;&lt;/span&gt; m x &lt;span id=&quot;r2_2&quot; class=&quot;final-val&quot;&gt;&lt;/span&gt; m
        &lt;/div&gt;

        &lt;div class=&quot;step&quot;&gt;
            &lt;div class=&quot;step-title&quot;&gt;Step 2: Net Upward Pressure (q)&lt;/div&gt;
            &lt;div class=&quot;formula&quot;&gt;q = P / Area_Provided&lt;/div&gt;&lt;br&gt;
            Net Pressure: &lt;span id=&quot;r3&quot; class=&quot;final-val&quot;&gt;&lt;/span&gt; kN/m²
        &lt;/div&gt;

        &lt;div class=&quot;step&quot;&gt;
            &lt;div class=&quot;step-title&quot;&gt;Step 3: Bending Moment (M)&lt;/div&gt;
            Critical section at face of column...&lt;br&gt;
            Projection (X) = (Side - Col)/2 = &lt;span id=&quot;r_x&quot;&gt;&lt;/span&gt; m&lt;br&gt;
            &lt;div class=&quot;formula&quot;&gt;M = (q * X²) / 2&lt;/div&gt;&lt;br&gt;
            Moment: &lt;span id=&quot;r4&quot; class=&quot;final-val&quot;&gt;&lt;/span&gt; kNm
        &lt;/div&gt;

        &lt;div class=&quot;step&quot;&gt;
            &lt;div class=&quot;step-title&quot;&gt;Step 4: Steel Calculation (Ast)&lt;/div&gt;
            Using Effective Depth (d) = 400mm&lt;br&gt;
            &lt;div class=&quot;formula&quot;&gt;Ast = (M * 1.5) / (0.87 * fy * j * d)&lt;/div&gt;&lt;br&gt;
            Required Ast: &lt;span id=&quot;r5&quot; class=&quot;final-val&quot;&gt;&lt;/span&gt; mm²&lt;br&gt;
            &lt;strong&gt;Result:&lt;/strong&gt; Provide 12mm bars @ &lt;span id=&quot;r6&quot;&gt;&lt;/span&gt; mm c/c.
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;div class=&quot;container&quot;&gt;

&lt;h1&gt;RCC Isolated Footing Design Tool – Technical Explanation&lt;/h1&gt;

&lt;p&gt;
This tool is developed for the &lt;strong&gt;design of isolated footings&lt;/strong&gt; supporting individual columns,
based on guidelines from &lt;strong&gt;IS 456:2000&lt;/strong&gt;. It provides a step-by-step calculation of
footing size, soil pressure, bending moment, and reinforcement requirement.
&lt;/p&gt;

&lt;h2&gt;1. Objective of the Tool&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Determine required footing area&lt;/li&gt;
&lt;li&gt;Check soil bearing pressure&lt;/li&gt;
&lt;li&gt;Calculate bending moment at critical section&lt;/li&gt;
&lt;li&gt;Design reinforcement (Ast)&lt;/li&gt;
&lt;li&gt;Provide practical bar spacing&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;2. Input Parameters&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Column Load (P):&lt;/strong&gt; Axial load on footing (kN)&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Safe Bearing Capacity (SBC):&lt;/strong&gt; Soil capacity (kN/m²)&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Column Size:&lt;/strong&gt; Size of column (mm)&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Steel Grade (fy):&lt;/strong&gt; Yield strength of reinforcement (MPa)&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;3. Design Procedure&lt;/h2&gt;

&lt;h3&gt;Step 1: Footing Area Calculation&lt;/h3&gt;

&lt;p&gt;
To account for self-weight of footing, load is increased by 10%.
&lt;/p&gt;

&lt;div class=&quot;code&quot;&gt;
A = (P × 1.1) / SBC
&lt;/div&gt;

&lt;p&gt;
The footing is assumed square:
&lt;/p&gt;

&lt;div class=&quot;code&quot;&gt;
Side = √A
&lt;/div&gt;

&lt;p&gt;
The value is rounded for practical construction.
&lt;/p&gt;

&lt;h3&gt;Step 2: Net Soil Pressure&lt;/h3&gt;

&lt;div class=&quot;code&quot;&gt;
q = P / Area_provided
&lt;/div&gt;

&lt;p&gt;
This ensures:
&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Actual pressure is within SBC limits&lt;/li&gt;
&lt;li&gt;Uniform load distribution assumption&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;Step 3: Bending Moment Calculation&lt;/h3&gt;

&lt;p&gt;
Critical section is taken at the face of the column.
&lt;/p&gt;

&lt;div class=&quot;code&quot;&gt;
Projection (X) = (Footing Size - Column Size) / 2
&lt;/div&gt;

&lt;div class=&quot;code&quot;&gt;
M = (q × X²) / 2
&lt;/div&gt;

&lt;p&gt;
Factored moment:
&lt;/p&gt;

&lt;div class=&quot;code&quot;&gt;
Mu = 1.5 × M
&lt;/div&gt;

&lt;p&gt;
This follows limit state design principles.
&lt;/p&gt;

&lt;h3&gt;Step 4: Steel Reinforcement (Ast)&lt;/h3&gt;

&lt;div class=&quot;code&quot;&gt;
Ast = (Mu × 10⁶) / (0.87 × fy × j × d)
&lt;/div&gt;

&lt;p&gt;
Where:
&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;j ≈ 0.9 (lever arm factor)&lt;/li&gt;
&lt;li&gt;d = effective depth (assumed 400 mm)&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;Step 5: Bar Spacing&lt;/h3&gt;

&lt;p&gt;
Using 12 mm diameter bars:
&lt;/p&gt;

&lt;div class=&quot;code&quot;&gt;
Area of bar = 113 mm²
&lt;/div&gt;

&lt;div class=&quot;code&quot;&gt;
Spacing = (Area × 1000) / (Ast / Footing Width)
&lt;/div&gt;

&lt;p&gt;
Maximum spacing is limited:
&lt;/p&gt;

&lt;div class=&quot;code&quot;&gt;
Spacing ≤ 300 mm
&lt;/div&gt;

&lt;h2&gt;4. Engineering Significance&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Ensures safe load transfer to soil&lt;/li&gt;
&lt;li&gt;Prevents excessive settlement&lt;/li&gt;
&lt;li&gt;Controls bending failure&lt;/li&gt;
&lt;li&gt;Provides economical reinforcement design&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;5. Assumptions&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Uniform soil pressure distribution&lt;/li&gt;
&lt;li&gt;Square footing geometry&lt;/li&gt;
&lt;li&gt;Effective depth fixed at 400 mm&lt;/li&gt;
&lt;li&gt;No eccentric loading considered&lt;/li&gt;
&lt;li&gt;Only bending design (no shear checks included)&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;6. Limitations&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;No check for one-way shear&lt;/li&gt;
&lt;li&gt;No check for punching shear&lt;/li&gt;
&lt;li&gt;No settlement analysis&lt;/li&gt;
&lt;li&gt;No seismic or moment effects&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;7. Workflow Summary&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;User inputs load, SBC, column size, and steel grade&lt;/li&gt;
&lt;li&gt;Tool calculates required area&lt;/li&gt;
&lt;li&gt;Adopted footing size is determined&lt;/li&gt;
&lt;li&gt;Soil pressure and bending moment are computed&lt;/li&gt;
&lt;li&gt;Steel reinforcement is designed&lt;/li&gt;
&lt;li&gt;Bar spacing is suggested&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;8. Conclusion&lt;/h2&gt;

&lt;p&gt;
This tool acts as a &lt;span class=&quot;highlight&quot;&gt;rapid preliminary design assistant&lt;/span&gt; for RCC isolated footings.
It simplifies complex structural calculations into a clear step-by-step process, making it highly useful
for site engineers and designers.
&lt;/p&gt;

&lt;p&gt;
For final design, it is essential to perform detailed checks including shear, settlement,
and code compliance as per IS 456:2000.
&lt;/p&gt;

&lt;/div&gt;

    &lt;script&gt;
        function generateReport() {
            // Inputs
            const P = parseFloat(document.getElementById(&#39;P&#39;).value);
            const SBC = parseFloat(document.getElementById(&#39;SBC&#39;).value);
            const col = parseFloat(document.getElementById(&#39;col_size&#39;).value) / 1000;
            const fy = parseFloat(document.getElementById(&#39;fy&#39;).value);

            if(!P || !SBC) return;

            // Step 1: Area
            let AreaReq = (P * 1.1) / SBC;
            let Side = Math.ceil(Math.sqrt(AreaReq) * 10) / 10;
            let AreaProvided = Side * Side;

            // Step 2: Pressure
            let q = P / AreaProvided;

            // Step 3: Moment
            let X = (Side - col) / 2;
            let M = (q * Math.pow(X, 2)) / 2;
            let Mu = M * 1.5; // Factored

            // Step 4: Steel
            let d = 400; // Effective depth assumed from your image
            let Ast = (Mu * Math.pow(10, 6)) / (0.87 * fy * 0.9 * d);
            
            // Spacing for 12mm bar (Area = 113mm2)
            let spacing = (113 * 1000) / (Ast / Side); 
            if (spacing &gt; 300) spacing = 300; // Max spacing limit

            // UI Update
            document.getElementById(&#39;report&#39;).style.display = &#39;block&#39;;
            document.getElementById(&#39;r1&#39;).innerText = AreaReq.toFixed(2);
            document.getElementById(&#39;r2&#39;).innerText = Side.toFixed(2);
            document.getElementById(&#39;r2_2&#39;).innerText = Side.toFixed(2);
            document.getElementById(&#39;r3&#39;).innerText = q.toFixed(2);
            document.getElementById(&#39;r_x&#39;).innerText = X.toFixed(2);
            document.getElementById(&#39;r4&#39;).innerText = M.toFixed(2);
            document.getElementById(&#39;r5&#39;).innerText = Math.round(Ast);
            document.getElementById(&#39;r6&#39;).innerText = Math.round(spacing);
        }
    &lt;/script&gt;
&lt;div class=&quot;blogger-post-footer&quot;&gt;https://yogipwd.blogspot.com/&lt;/div&gt;</description><link>https://www.yogipwd.com/2026/03/isolated-footing-design-as-per-is-456.html</link><author>noreply@blogger.com (Yogendra)</author><thr:total>0</thr:total></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-1074964965522467583.post-4082034759430863561</guid><pubDate>Wed, 18 Mar 2026 18:44:43 +0000</pubDate><atom:updated>2026-04-06T12:27:31.330+05:30</atom:updated><title>Helical Ring length calculator </title><description>&lt;div id=&quot;helical-calc-container&quot;&gt;
    &lt;style&gt;
        #helical-calc-container {
            background: #ffffff;
            border: 1px solid #d1d5db;
            border-radius: 10px;
            padding: 20px;
            max-width: 450px;
            margin: 20px auto;
            font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, Helvetica, Arial, sans-serif;
            color: #374151;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }
        .h-header { text-align: center; border-bottom: 2px solid #3b82f6; padding-bottom: 10px; margin-bottom: 20px; }
        .h-header h2 { margin: 0; font-size: 1.25rem; color: #1e40af; }
        
        .h-row { margin-bottom: 15px; }
        .h-row label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 5px; }
        
        .h-input {
            width: 100%;
            padding: 10px;
            border: 1px solid #d1d5db;
            border-radius: 6px;
            box-sizing: border-box;
            font-size: 15px;
        }
        .h-input:focus { outline: 2px solid #3b82f6; border-color: transparent; }

        #h-btn {
            width: 100%;
            background-color: #1e40af;
            color: white;
            border: none;
            padding: 12px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 16px;
            font-weight: bold;
            margin-top: 10px;
        }
        #h-btn:hover { background-color: #1d4ed8; }

        #h-result-box {
            margin-top: 20px;
            padding: 15px;
            background: #eff6ff;
            border-left: 5px solid #3b82f6;
            display: none;
        }
        .res-line { font-size: 1.1em; margin: 5px 0; }
        .formula-note { font-size: 0.8em; color: #6b7280; font-style: italic; margin-top: 10px; }
    &lt;/style&gt;

    &lt;div class=&quot;h-header&quot;&gt;
        &lt;h2&gt;Helical Ring Length Calculator&lt;/h2&gt;
    &lt;/div&gt;

    &lt;div class=&quot;h-row&quot;&gt;
        &lt;label&gt;Total Height of Spiral (m)&lt;/label&gt;
        &lt;input type=&quot;number&quot; id=&quot;h_height&quot; class=&quot;h-input&quot; placeholder=&quot;e.g. 3.0&quot; step=&quot;0.01&quot;&gt;
    &lt;/div&gt;

    &lt;div class=&quot;h-row&quot;&gt;
        &lt;label&gt;Diameter of Ring (m) &lt;br&gt;&lt;small&gt;(Center-to-center of bar)&lt;/small&gt;&lt;/label&gt;
        &lt;input type=&quot;number&quot; id=&quot;h_dia&quot; class=&quot;h-input&quot; placeholder=&quot;e.g. 0.5&quot; step=&quot;0.01&quot;&gt;
    &lt;/div&gt;

    &lt;div class=&quot;h-row&quot;&gt;
        &lt;label&gt;Pitch / Spacing (m)&lt;/label&gt;
        &lt;input type=&quot;number&quot; id=&quot;h_pitch&quot; class=&quot;h-input&quot; placeholder=&quot;e.g. 0.15&quot; step=&quot;0.01&quot;&gt;
    &lt;/div&gt;

    &lt;button id=&quot;h-btn&quot; onclick=&quot;calcHelical()&quot;&gt;Calculate Length&lt;/button&gt;

    &lt;div id=&quot;h-result-box&quot;&gt;
        &lt;div class=&quot;res-line&quot;&gt;Number of Turns: &lt;strong id=&quot;out_turns&quot;&gt;0&lt;/strong&gt;&lt;/div&gt;
        &lt;div class=&quot;res-line&quot;&gt;Total Bar Length: &lt;strong id=&quot;out_len&quot; style=&quot;color: #1e40af;&quot;&gt;0.00 m&lt;/strong&gt;&lt;/div&gt;
        &lt;p class=&quot;formula-note&quot;&gt;Formula: L = n × √(C² + P²)&lt;br&gt;Includes circumference and pitch incline.&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class=&quot;container&quot;&gt;

&lt;h1&gt;Helical Ring Length Calculator – Technical Explanation&lt;/h1&gt;

&lt;p&gt;
This tool is designed to calculate the &lt;strong&gt;total length of helical reinforcement&lt;/strong&gt;
(commonly used in columns, piles, and spiral reinforcement systems).
It is based on fundamental geometric relationships of a helix.
&lt;/p&gt;

&lt;h2&gt;1. Objective of the Tool&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Calculate number of helical turns&lt;/li&gt;
&lt;li&gt;Determine total reinforcement length&lt;/li&gt;
&lt;li&gt;Assist in bar bending schedule (BBS)&lt;/li&gt;
&lt;li&gt;Improve accuracy in spiral reinforcement estimation&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;2. Input Parameters&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Total Height (H):&lt;/strong&gt; Vertical height of spiral (m)&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Diameter (D):&lt;/strong&gt; Diameter of helix (center-to-center of bar)&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Pitch (P):&lt;/strong&gt; Vertical spacing between turns&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;3. Geometric Concept&lt;/h2&gt;

&lt;p&gt;
A helical bar forms a &lt;strong&gt;3D spiral path&lt;/strong&gt; around a cylinder.
Each turn consists of:
&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Circular movement (circumference)&lt;/li&gt;
&lt;li&gt;Vertical rise (pitch)&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;
Thus, the length of one turn is the &lt;strong&gt;hypotenuse of a right triangle&lt;/strong&gt;.
&lt;/p&gt;

&lt;h2&gt;4. Calculation Steps&lt;/h2&gt;

&lt;h3&gt;Step 1: Number of Turns&lt;/h3&gt;

&lt;div class=&quot;code&quot;&gt;
n = H / P
&lt;/div&gt;

&lt;p&gt;
This represents how many complete spiral loops are formed.
&lt;/p&gt;

&lt;h3&gt;Step 2: Circumference of One Turn&lt;/h3&gt;

&lt;div class=&quot;code&quot;&gt;
C = π × D
&lt;/div&gt;

&lt;p&gt;
This is the horizontal distance covered in one revolution.
&lt;/p&gt;

&lt;h3&gt;Step 3: Length of One Turn&lt;/h3&gt;

&lt;div class=&quot;code&quot;&gt;
L_turn = √(C² + P²)
&lt;/div&gt;

&lt;p&gt;
This combines horizontal and vertical components using Pythagoras theorem.
&lt;/p&gt;

&lt;h3&gt;Step 4: Total Length of Helical Bar&lt;/h3&gt;

&lt;div class=&quot;code&quot;&gt;
Total Length = n × L_turn
&lt;/div&gt;

&lt;p&gt;
This gives the full length of reinforcement required.
&lt;/p&gt;

&lt;h2&gt;5. Engineering Significance&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Used in spiral columns and circular piles&lt;/li&gt;
&lt;li&gt;Provides confinement to concrete&lt;/li&gt;
&lt;li&gt;Improves ductility and strength&lt;/li&gt;
&lt;li&gt;Essential for seismic-resistant structures&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;6. Practical Applications&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;RCC circular columns&lt;/li&gt;
&lt;li&gt;Bored cast-in-situ piles&lt;/li&gt;
&lt;li&gt;Bridge piers&lt;/li&gt;
&lt;li&gt;Chimneys and silos&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;7. Assumptions&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Uniform pitch throughout height&lt;/li&gt;
&lt;li&gt;Perfect circular geometry&lt;/li&gt;
&lt;li&gt;No allowance for hooks or laps&lt;/li&gt;
&lt;li&gt;Centerline diameter is used&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;8. Limitations&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;No code-based spacing checks (IS 456 / IS 2911)&lt;/li&gt;
&lt;li&gt;No confinement ratio calculation&lt;/li&gt;
&lt;li&gt;No detailing for anchorage or laps&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;9. Workflow Summary&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;User inputs height, diameter, and pitch&lt;/li&gt;
&lt;li&gt;Tool calculates number of turns&lt;/li&gt;
&lt;li&gt;Length of one turn is computed&lt;/li&gt;
&lt;li&gt;Total reinforcement length is displayed&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;10. Conclusion&lt;/h2&gt;

&lt;p&gt;
This tool acts as a &lt;span class=&quot;highlight&quot;&gt;quick and accurate helical reinforcement calculator&lt;/span&gt;,
helping engineers and site professionals prepare bar bending schedules efficiently.
&lt;/p&gt;

&lt;p&gt;
For final design, additional checks such as spacing limits, anchorage,
and code compliance should be considered.
&lt;/p&gt;

&lt;/div&gt;

    &lt;script&gt;
        function calcHelical() {
            const H = parseFloat(document.getElementById(&#39;h_height&#39;).value);
            const D = parseFloat(document.getElementById(&#39;h_dia&#39;).value);
            const P = parseFloat(document.getElementById(&#39;h_pitch&#39;).value);
            const resBox = document.getElementById(&#39;h-result-box&#39;);

            if (!H || !D || !P) {
                alert(&quot;Please enter all dimensions in meters.&quot;);
                return;
            }

            // 1. Number of turns
            const n = H / P;
            
            // 2. Circumference (C = π * D)
            const C = Math.PI * D;
            
            // 3. Length of one turn (Hypotenuse of C and P)
            // L_turn = sqrt(C^2 + P^2)
            const oneTurnLen = Math.sqrt(Math.pow(C, 2) + Math.pow(P, 2));
            
            // 4. Total length
            const totalLen = n * oneTurnLen;

            // Display results
            resBox.style.display = &#39;block&#39;;
            document.getElementById(&#39;out_turns&#39;).innerText = n.toFixed(2);
            document.getElementById(&#39;out_len&#39;).innerText = totalLen.toFixed(3) + &quot; meters&quot;;
        }
    &lt;/script&gt;

&lt;div class=&quot;blogger-post-footer&quot;&gt;https://yogipwd.blogspot.com/&lt;/div&gt;</description><link>https://www.yogipwd.com/2026/03/helical-ring-length-calculator_01175476092.html</link><author>noreply@blogger.com (Yogendra)</author><thr:total>0</thr:total></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-1074964965522467583.post-775496378427670248</guid><pubDate>Tue, 17 Mar 2026 09:01:03 +0000</pubDate><atom:updated>2026-04-06T12:30:08.196+05:30</atom:updated><title>Invoice Calculations Verification</title><description>&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;PWD Infrastructure - Monthly Bill Manager&lt;/title&gt;
    &lt;style&gt;
        body { font-family: &#39;Segoe UI&#39;, Arial, sans-serif; background-color: #f0f2f5; padding: 20px; }
        .container { max-width: 1200px; margin: auto; background: #fff; padding: 20px; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); }
        h2 { color: #1a73e8; border-bottom: 3px solid #1a73e8; padding-bottom: 10px; margin-top: 0; }
        
        .config-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin-bottom: 20px; background: #e8f0fe; padding: 15px; border-radius: 8px; border: 1px solid #1a73e8; }
        .header-grid { display: grid; grid-template-columns: 1.5fr 0.8fr 1.2fr 1fr; gap: 15px; margin-bottom: 20px; background: #f8f9fa; padding: 15px; border-radius: 8px; border-left: 5px solid #1a73e8; }
        
        .action-bar { display: flex; gap: 10px; margin-bottom: 20px; background: #fff; padding: 10px; border: 1px dashed #ccc; border-radius: 8px; }
        .btn-action { padding: 8px 15px; border: none; border-radius: 4px; cursor: pointer; font-weight: 600; font-size: 0.8rem; transition: 0.2s; }
        .btn-export { background: #673ab7; color: white; }
        .btn-import { background: #ff9800; color: white; }
        .btn-edit { background: #00bcd4; color: white; }

        .field label { display: block; font-weight: bold; margin-bottom: 5px; color: #5f6368; font-size: 0.75rem; text-transform: uppercase; }
        input { padding: 8px; border: 1px solid #dadce0; border-radius: 4px; width: 100%; box-sizing: border-box; font-size: 14px; font-weight: 600; }
        .auto-field { background-color: #e6fffa; border: 1px solid #38b2ac; color: #2c7a7b; }

        table { width: 100%; border-collapse: collapse; margin-top: 10px; }
        th { background-color: #3c4043; color: white; padding: 8px; font-size: 0.85rem; }
        td { border: 1px solid #dee2e6; padding: 6px; }
        .num { text-align: right; font-family: &#39;Consolas&#39;, monospace; }

        .footer-row { background-color: #f8f9fa; font-weight: bold; }
        .deduction { color: #d93025; }
        .net-payable { background-color: #1a73e8; color: white; font-size: 1.15rem; }

        .alert { color: #d93025; font-weight: bold; background: #fce8e6; padding: 10px; border-radius: 4px; display: none; margin-top: 15px; text-align: center; border: 1px solid #d93025; }
        .btn-save { padding: 15px 30px; border: none; border-radius: 6px; cursor: pointer; font-weight: 700; background-color: #1e8e3e; color: white; margin-top: 20px; width: 100%; font-size: 1rem; }
        .btn-save:disabled { background-color: #ccc; cursor: not-allowed; }
        
        .history-section { margin-top: 30px; border-top: 2px solid #eee; padding-top: 20px; }
        .btn-small { padding: 4px 8px; font-size: 11px; margin-left: 5px; cursor: pointer; }
      h1, h2 {
    color: #0b3d91;
}
h2 {
    border-left: 5px solid #007bff;
    padding-left: 10px;
}
ul {
    margin-left: 20px;
}
.code {
    background: #f8f9fa;
    padding: 10px;
    border-left: 4px solid #007bff;
    font-family: monospace;
}
.highlight {
    color: #d62828;
    font-weight: bold;
}
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;div class=&quot;container&quot;&gt;
    &lt;h2&gt;Road Project Bill Verification&lt;/h2&gt;

    &lt;div class=&quot;action-bar&quot;&gt;
        &lt;button class=&quot;btn-action btn-export&quot; onclick=&quot;exportJSON()&quot;&gt;💾 Export JSON Data&lt;/button&gt;
        &lt;button class=&quot;btn-action btn-import&quot; onclick=&quot;document.getElementById(&#39;importFile&#39;).click()&quot;&gt;📂 Import JSON&lt;/button&gt;
        &lt;input type=&quot;file&quot; id=&quot;importFile&quot; style=&quot;display:none&quot; onchange=&quot;importJSON(event)&quot;&gt;
        &lt;button class=&quot;btn-action btn-edit&quot; onclick=&quot;scrollToHistory()&quot;&gt;📋 View/Edit History&lt;/button&gt;
    &lt;/div&gt;
    
   
        &lt;div class=&quot;field&quot;&gt;&lt;label&gt;Project Cost (₹)&lt;/label&gt;&lt;input type=&quot;number&quot; id=&quot;totalProjectCost&quot; value=&quot;74225000&quot; oninput=&quot;calc()&quot;&gt;&lt;/div&gt;
        &lt;div class=&quot;field&quot;&gt;&lt;label&gt;Allocation (%)&lt;/label&gt;&lt;input type=&quot;number&quot; id=&quot;allocPercent&quot; value=&quot;100&quot; step=&quot;0.01&quot; oninput=&quot;calc()&quot;&gt;&lt;/div&gt;
        &lt;div class=&quot;field&quot;&gt;&lt;label&gt;Negotiation (%)&lt;/label&gt;&lt;input type=&quot;number&quot; id=&quot;negPercent&quot; value=&quot;4.59&quot; step=&quot;0.01&quot; oninput=&quot;calc()&quot;&gt;&lt;/div&gt;
        &lt;div class=&quot;field&quot;&gt;&lt;label&gt;GST Rate (%)&lt;/label&gt;&lt;input type=&quot;number&quot; id=&quot;gstPercent&quot; value=&quot;18&quot; oninput=&quot;calc()&quot;&gt;&lt;/div&gt;
    

   
        &lt;div class=&quot;field&quot;&gt;&lt;label&gt;Project Name&lt;/label&gt;&lt;input list=&quot;projectList&quot; id=&quot;projName&quot; value=&quot;Sinhasth Kumbh Pkg -C&quot; onchange=&quot;syncHistory()&quot;&gt;&lt;datalist id=&quot;projectList&quot;&gt;&lt;/datalist&gt;&lt;/div&gt;
        &lt;div class=&quot;field&quot;&gt;&lt;label&gt;Bill No.&lt;/label&gt;&lt;input type=&quot;number&quot; id=&quot;billNo&quot; value=&quot;1&quot; class=&quot;auto-field&quot; readonly&gt;&lt;/div&gt;
        &lt;div class=&quot;field&quot;&gt;&lt;label&gt;Cumulative Prev. Paid&lt;/label&gt;&lt;input type=&quot;number&quot; id=&quot;prevPaid&quot; class=&quot;auto-field&quot; readonly value=&quot;0&quot;&gt;&lt;/div&gt;
        &lt;div class=&quot;field&quot;&gt;&lt;label&gt;Budget Limit (₹)&lt;/label&gt;&lt;input type=&quot;text&quot; id=&quot;budgetLimit&quot; readonly class=&quot;auto-field&quot;&gt;&lt;/div&gt;
    

    &lt;table&gt;
        &lt;thead&gt;
            &lt;tr&gt;
                &lt;th style=&quot;text-align: left;&quot;&gt;Item Description&lt;/th&gt;
                &lt;th style=&quot;width: 20%;&quot;&gt;Contract (₹)&lt;/th&gt;
                &lt;th style=&quot;width: 20%;&quot;&gt;This Month (₹)&lt;/th&gt;
                &lt;th style=&quot;width: 20%;&quot;&gt;Remaining Balance&lt;/th&gt;
            &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody id=&quot;billItems&quot;&gt;&lt;/tbody&gt;
        &lt;tfoot&gt;
            &lt;tr class=&quot;footer-row&quot;&gt;
                &lt;td colspan=&quot;2&quot;&gt;1. Sub-Total Amount (Gross)&lt;/td&gt;
                &lt;td id=&quot;subTotal&quot; class=&quot;num&quot;&gt;0.00&lt;/td&gt;
                &lt;td&gt;-&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td colspan=&quot;2&quot;&gt;2. Negotiation Amount (&lt;span id=&quot;negLab&quot;&gt;4.59&lt;/span&gt;%) [Deduction]&lt;/td&gt;
                &lt;td id=&quot;negAmt&quot; class=&quot;num deduction&quot;&gt;- 0.00&lt;/td&gt;
                &lt;td&gt;-&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr class=&quot;footer-row&quot;&gt;
                &lt;td colspan=&quot;2&quot;&gt;3. Final Total Amount (Excl. GST)&lt;/td&gt;
                &lt;td id=&quot;finalTotalExcl&quot; class=&quot;num&quot;&gt;0.00&lt;/td&gt;
                &lt;td&gt;-&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td colspan=&quot;2&quot;&gt;4. GST Amount (&lt;span id=&quot;gstLab&quot;&gt;18&lt;/span&gt;%) on Final Total&lt;/td&gt;
                &lt;td id=&quot;gstAmt&quot; class=&quot;num&quot;&gt;+ 0.00&lt;/td&gt;
                &lt;td&gt;-&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr class=&quot;net-payable&quot;&gt;
                &lt;td colspan=&quot;2&quot;&gt;NET PAYABLE AMOUNT (FOR BILL NO. &lt;span id=&quot;dispBillNo&quot;&gt;1&lt;/span&gt;)&lt;/td&gt;
                &lt;td id=&quot;netPayable&quot; class=&quot;num&quot;&gt;₹ 0.00&lt;/td&gt;
                &lt;td&gt;-&lt;/td&gt;
            &lt;/tr&gt;
        &lt;/tfoot&gt;
    &lt;/table&gt;

    &lt;div id=&quot;budgetWarning&quot; class=&quot;alert&quot;&gt;⚠️ BUDGET EXCEEDED: Sum of all bills exceeds the allotted project funds!&lt;/div&gt;
    &lt;button id=&quot;saveBtn&quot; class=&quot;btn-save&quot; onclick=&quot;saveRecord()&quot;&gt;Submit &amp; Save Monthly Bill&lt;/button&gt;

    &lt;div class=&quot;history-section&quot; id=&quot;historySection&quot;&gt;
        &lt;h3&gt;Project History &amp; Edit Options&lt;/h3&gt;
        &lt;table id=&quot;historyTable&quot;&gt;
            &lt;thead&gt;
                &lt;tr&gt;
                    &lt;th&gt;Date&lt;/th&gt;
                    &lt;th&gt;Project&lt;/th&gt;
                    &lt;th&gt;Bill No&lt;/th&gt;
                    &lt;th&gt;Amount&lt;/th&gt;
                    &lt;th&gt;Actions&lt;/th&gt;
                &lt;/tr&gt;
            &lt;/thead&gt;
            &lt;tbody id=&quot;historyBody&quot;&gt;&lt;/tbody&gt;
        &lt;/table&gt;
    &lt;/div&gt;
&lt;/div&gt;
  
  &lt;div class=&quot;container&quot;&gt;

&lt;h1&gt;Road Project Bill Verification System – Technical Explanation&lt;/h1&gt;

&lt;p&gt;
This application is designed for &lt;strong&gt;verification, tracking, and management of road project bills&lt;/strong&gt;.
It ensures financial control by calculating payable amounts, monitoring budget limits, and maintaining
a complete history of billing records using a structured digital workflow.
&lt;/p&gt;

&lt;h2&gt;1. Objective of the System&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Verify contractor bills against project budget&lt;/li&gt;
&lt;li&gt;Apply negotiation deductions and GST calculations&lt;/li&gt;
&lt;li&gt;Track cumulative payments&lt;/li&gt;
&lt;li&gt;Prevent budget overruns&lt;/li&gt;
&lt;li&gt;Maintain digital record of all bills&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;2. Input Parameters&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Project Cost:&lt;/strong&gt; Total sanctioned project value&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Allocation %:&lt;/strong&gt; Portion of budget allocated&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Negotiation %:&lt;/strong&gt; Agreed deduction percentage&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;GST %:&lt;/strong&gt; Applicable tax rate&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Project Name:&lt;/strong&gt; Identifier for tracking&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Bill No:&lt;/strong&gt; Auto-generated sequence&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;3. Bill Item Structure&lt;/h2&gt;

&lt;p&gt;
The system includes predefined cost heads:
&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Professional Staff&lt;/li&gt;
&lt;li&gt;Supporting Staff&lt;/li&gt;
&lt;li&gt;Transportation&lt;/li&gt;
&lt;li&gt;Office Expenses&lt;/li&gt;
&lt;li&gt;Training &amp; Contingencies&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;
Each item includes:
&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Contract Value&lt;/li&gt;
&lt;li&gt;Current Bill Amount&lt;/li&gt;
&lt;li&gt;Remaining Balance&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;4. Financial Calculation Logic&lt;/h2&gt;

&lt;h3&gt;4.1 Sub-Total (Gross Amount)&lt;/h3&gt;

&lt;div class=&quot;code&quot;&gt;
SubTotal = Σ(Current Bill Amounts)
&lt;/div&gt;

&lt;h3&gt;4.2 Negotiation Deduction&lt;/h3&gt;

&lt;div class=&quot;code&quot;&gt;
Negotiation Amount = SubTotal × (Negotiation %)
&lt;/div&gt;

&lt;h3&gt;4.3 Final Amount (Excluding GST)&lt;/h3&gt;

&lt;div class=&quot;code&quot;&gt;
Final Amount = SubTotal - Negotiation Amount
&lt;/div&gt;

&lt;h3&gt;4.4 GST Calculation&lt;/h3&gt;

&lt;div class=&quot;code&quot;&gt;
GST Amount = Final Amount × (GST %)
&lt;/div&gt;

&lt;h3&gt;4.5 Net Payable Amount&lt;/h3&gt;

&lt;div class=&quot;code&quot;&gt;
Net Payable = Final Amount + GST
&lt;/div&gt;

&lt;p&gt;
This represents the total amount payable for the current bill.
&lt;/p&gt;

&lt;h2&gt;5. Budget Control Mechanism&lt;/h2&gt;

&lt;h3&gt;5.1 Budget Limit&lt;/h3&gt;

&lt;div class=&quot;code&quot;&gt;
Budget Limit = Project Cost × Allocation %
&lt;/div&gt;

&lt;h3&gt;5.2 Total Liability Check&lt;/h3&gt;

&lt;div class=&quot;code&quot;&gt;
Total Liability = Previous Paid + Current Bill Amount
&lt;/div&gt;

&lt;p&gt;
If:
&lt;/p&gt;

&lt;div class=&quot;code&quot;&gt;
Total Liability &gt; Budget Limit → Warning Triggered
&lt;/div&gt;

&lt;p class=&quot;highlight&quot;&gt;
System disables saving when budget is exceeded.
&lt;/p&gt;

&lt;h2&gt;6. Data Storage (IndexedDB)&lt;/h2&gt;

&lt;p&gt;
All billing records are stored in browser database:
&lt;/p&gt;

&lt;div class=&quot;code&quot;&gt;
indexedDB → &quot;PWD_Final_Bills&quot;
&lt;/div&gt;

&lt;p&gt;
Each record contains:
&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Project name&lt;/li&gt;
&lt;li&gt;Bill number&lt;/li&gt;
&lt;li&gt;Net payable amount&lt;/li&gt;
&lt;li&gt;Item-wise data&lt;/li&gt;
&lt;li&gt;Configuration (GST, negotiation, etc.)&lt;/li&gt;
&lt;li&gt;Timestamp&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;7. History &amp; Editing System&lt;/h2&gt;

&lt;p&gt;
The system maintains a full history of bills:
&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Auto-increment bill numbers&lt;/li&gt;
&lt;li&gt;View previous records&lt;/li&gt;
&lt;li&gt;Edit/load existing entries&lt;/li&gt;
&lt;li&gt;Delete unwanted records&lt;/li&gt;
&lt;/ul&gt;

&lt;div class=&quot;code&quot;&gt;
store.getAll() → Filter by project → Render table
&lt;/div&gt;

&lt;h2&gt;8. Import / Export Feature&lt;/h2&gt;

&lt;h3&gt;8.1 Export&lt;/h3&gt;

&lt;p&gt;
Data can be downloaded as JSON:
&lt;/p&gt;

&lt;div class=&quot;code&quot;&gt;
JSON.stringify(records)
&lt;/div&gt;

&lt;h3&gt;8.2 Import&lt;/h3&gt;

&lt;p&gt;
Backup files can be restored into the system:
&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;File is read using FileReader&lt;/li&gt;
&lt;li&gt;Records inserted into IndexedDB&lt;/li&gt;
&lt;li&gt;IDs regenerated automatically&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;9. Workflow Summary&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;User enters project and bill details&lt;/li&gt;
&lt;li&gt;Inputs current bill amounts&lt;/li&gt;
&lt;li&gt;System calculates totals and deductions&lt;/li&gt;
&lt;li&gt;Budget validation is performed&lt;/li&gt;
&lt;li&gt;Bill is saved if within limit&lt;/li&gt;
&lt;li&gt;History is updated automatically&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;10. Engineering &amp; Administrative Benefits&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Prevents financial mismanagement&lt;/li&gt;
&lt;li&gt;Ensures transparency in billing&lt;/li&gt;
&lt;li&gt;Reduces manual calculation errors&lt;/li&gt;
&lt;li&gt;Provides quick audit trail&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;11. Assumptions&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;All costs are inclusive of contract conditions&lt;/li&gt;
&lt;li&gt;Negotiation applies uniformly across items&lt;/li&gt;
&lt;li&gt;GST is applied on final amount only&lt;/li&gt;
&lt;li&gt;No escalation or variation considered&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;12. Limitations&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;No multi-user synchronization&lt;/li&gt;
&lt;li&gt;No backend database (client-side only)&lt;/li&gt;
&lt;li&gt;No approval workflow&lt;/li&gt;
&lt;li&gt;No integration with accounting systems&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;13. Conclusion&lt;/h2&gt;

&lt;p&gt;
This system acts as a &lt;span class=&quot;highlight&quot;&gt;digital bill verification and control tool&lt;/span&gt;
for infrastructure projects. It combines financial accuracy with ease of use,
making it highly suitable for engineers, auditors, and project managers.
&lt;/p&gt;

&lt;p&gt;
For advanced deployment, the system can be extended with cloud databases,
user authentication, and integration with ERP systems.
&lt;/p&gt;

&lt;/div&gt;

&lt;script&gt;
    const lineItems = [
        [&quot;I. Professional Staff&quot;, 45975000], [&quot;II. Supporting Staff&quot;, 7650000],
        [&quot;III. Transportation&quot;, 5430000], [&quot;IV. Duty Travel&quot;, 200000],
        [&quot;V. Office Rent&quot;, 2700000], [&quot;VI. Office Supplies&quot;, 900000],
        [&quot;VII. Office Furniture&quot;, 810000], [&quot;VIII. Reports &amp; Printing&quot;, 1160000],
        [&quot;X. Training Costs&quot;, 100000], [&quot;XI. Contingencies&quot;, 1000000]
    ];

    const tbody = document.getElementById(&#39;billItems&#39;);
    lineItems.forEach((item, idx) =&gt; {
        tbody.innerHTML += `&lt;tr&gt;&lt;td&gt;${item[0]}&lt;/td&gt;
            &lt;td&gt;&lt;input type=&quot;number&quot; class=&quot;num contract-val&quot; value=&quot;${item[1]}&quot; oninput=&quot;calc()&quot;&gt;&lt;/td&gt;
            &lt;td&gt;&lt;input type=&quot;number&quot; class=&quot;num current-val&quot; value=&quot;0&quot; oninput=&quot;calc()&quot;&gt;&lt;/td&gt;
            &lt;td class=&quot;num rem-val&quot; style=&quot;color: #666;&quot;&gt;0.00&lt;/td&gt;&lt;/tr&gt;`;
    });

    let db;
    const dbReq = indexedDB.open(&quot;PWD_Final_Bills&quot;, 2);
    dbReq.onupgradeneeded = (e) =&gt; {
        db = e.target.result;
        if(!db.objectStoreNames.contains(&quot;bills&quot;)) {
            db.createObjectStore(&quot;bills&quot;, { keyPath: &quot;id&quot;, autoIncrement: true });
        }
    };
    dbReq.onsuccess = (e) =&gt; { db = e.target.result; updateDatalist(); syncHistory(); };

    function syncHistory() {
        const proj = document.getElementById(&#39;projName&#39;).value;
        const tx = db.transaction(&quot;bills&quot;, &quot;readonly&quot;);
        const store = tx.objectStore(&quot;bills&quot;);
        store.getAll().onsuccess = (e) =&gt; {
            const allRecords = e.target.result;
            const history = allRecords.filter(r =&gt; r.project === proj);
            const lastNo = history.length &gt; 0 ? Math.max(...history.map(r =&gt; r.billNo)) : 0;
            
            document.getElementById(&#39;billNo&#39;).value = lastNo + 1;
            document.getElementById(&#39;dispBillNo&#39;).innerHTML = lastNo + 1;
            document.getElementById(&#39;prevPaid&#39;).value = history.reduce((sum, r) =&gt; sum + r.netAmount, 0).toFixed(2);
            
            renderHistoryTable(allRecords);
            calc();
        };
    }

    function calc() {
        const limit = (parseFloat(document.getElementById(&#39;totalProjectCost&#39;).value) || 0) * ((parseFloat(document.getElementById(&#39;allocPercent&#39;).value) || 0) / 100);
        document.getElementById(&#39;budgetLimit&#39;).value = &quot;₹ &quot; + limit.toLocaleString(&#39;en-IN&#39;);

        let subTotal = 0;
        document.querySelectorAll(&quot;#billItems tr&quot;).forEach(row =&gt; {
            const cont = parseFloat(row.querySelector(&quot;.contract-val&quot;).value) || 0;
            const curr = parseFloat(row.querySelector(&quot;.current-val&quot;).value) || 0;
            row.querySelector(&quot;.rem-val&quot;).innerHTML = (cont - curr).toLocaleString(&#39;en-IN&#39;);
            subTotal += curr;
        });

        const negRate = (parseFloat(document.getElementById(&#39;negPercent&#39;).value) || 0) / 100;
        const gstRate = (parseFloat(document.getElementById(&#39;gstPercent&#39;).value) || 0) / 100;
        
        const negAmt = subTotal * negRate;
        const finalExcl = subTotal - negAmt;
        const gstAmt = finalExcl * gstRate;
        const netPayable = finalExcl + gstAmt;

        document.getElementById(&#39;negLab&#39;).innerHTML = (negRate * 100).toFixed(2);
        document.getElementById(&#39;gstLab&#39;).innerHTML = (gstRate * 100).toFixed(0);
        document.getElementById(&#39;subTotal&#39;).innerHTML = subTotal.toLocaleString(&#39;en-IN&#39;, {minimumFractionDigits: 2});
        document.getElementById(&#39;negAmt&#39;).innerHTML = &quot;- &quot; + negAmt.toLocaleString(&#39;en-IN&#39;, {minimumFractionDigits: 2});
        document.getElementById(&#39;finalTotalExcl&#39;).innerHTML = finalExcl.toLocaleString(&#39;en-IN&#39;, {minimumFractionDigits: 2});
        document.getElementById(&#39;gstAmt&#39;).innerHTML = &quot;+ &quot; + gstAmt.toLocaleString(&#39;en-IN&#39;, {minimumFractionDigits: 2});
        document.getElementById(&#39;netPayable&#39;).innerHTML = &quot;₹ &quot; + netPayable.toLocaleString(&#39;en-IN&#39;, {minimumFractionDigits: 2});

        const totalLiability = (parseFloat(document.getElementById(&#39;prevPaid&#39;).value) || 0) + netPayable;
        const warn = document.getElementById(&#39;budgetWarning&#39;);
        const saveBtn = document.getElementById(&#39;saveBtn&#39;);
        
        const isOverBudget = totalLiability &gt; limit;
        warn.style.display = isOverBudget ? &quot;block&quot; : &quot;none&quot;;
        saveBtn.disabled = isOverBudget;
        window.currentNet = netPayable;
    }

    function saveRecord() {
        const tx = db.transaction(&quot;bills&quot;, &quot;readwrite&quot;);
        // Capture current state of inputs to allow for &quot;editing&quot; later
        const currentInputs = Array.from(document.querySelectorAll(&#39;.current-val&#39;)).map(i =&gt; i.value);
        const contractInputs = Array.from(document.querySelectorAll(&#39;.contract-val&#39;)).map(i =&gt; i.value);

        const entry = {
            project: document.getElementById(&#39;projName&#39;).value,
            billNo: parseInt(document.getElementById(&#39;billNo&#39;).value),
            netAmount: window.currentNet,
            config: {
                totalCost: document.getElementById(&#39;totalProjectCost&#39;).value,
                neg: document.getElementById(&#39;negPercent&#39;).value,
                gst: document.getElementById(&#39;gstPercent&#39;).value,
                alloc: document.getElementById(&#39;allocPercent&#39;).value
            },
            items: currentInputs,
            contracts: contractInputs,
            timestamp: new Date().toLocaleString()
        };
        tx.objectStore(&quot;bills&quot;).add(entry).onsuccess = () =&gt; {
            alert(`Successfully Saved Bill No. ${entry.billNo}`);
            updateDatalist();
            syncHistory();
        };
    }

    function renderHistoryTable(records) {
        const hBody = document.getElementById(&#39;historyBody&#39;);
        hBody.innerHTML = records.map(r =&gt; `
            &lt;tr&gt;
                &lt;td&gt;${r.timestamp}&lt;/td&gt;
                &lt;td&gt;${r.project}&lt;/td&gt;
                &lt;td&gt;${r.billNo}&lt;/td&gt;
                &lt;td&gt;₹${r.netAmount.toLocaleString(&#39;en-IN&#39;)}&lt;/td&gt;
                &lt;td&gt;
                    &lt;button class=&quot;btn-small&quot; style=&quot;background:#00bcd4; color:white;&quot; onclick=&#39;loadRecord(${JSON.stringify(r)})&#39;&gt;Edit/Load&lt;/button&gt;
                    &lt;button class=&quot;btn-small&quot; style=&quot;background:#f44336; color:white;&quot; onclick=&quot;deleteRecord(${r.id})&quot;&gt;Del&lt;/button&gt;
                &lt;/td&gt;
            &lt;/tr&gt;
        `).join(&#39;&#39;);
    }

    function loadRecord(record) {
        if(!confirm(&quot;Load this record? Current unsaved changes will be lost.&quot;)) return;
        document.getElementById(&#39;projName&#39;).value = record.project;
        document.getElementById(&#39;totalProjectCost&#39;).value = record.config.totalCost;
        document.getElementById(&#39;negPercent&#39;).value = record.config.neg;
        document.getElementById(&#39;gstPercent&#39;).value = record.config.gst;
        document.getElementById(&#39;allocPercent&#39;).value = record.config.alloc;
        
        const currentInputs = document.querySelectorAll(&#39;.current-val&#39;);
        const contractInputs = document.querySelectorAll(&#39;.contract-val&#39;);
        
        record.items.forEach((val, i) =&gt; currentInputs[i].value = val);
        record.contracts.forEach((val, i) =&gt; contractInputs[i].value = val);
        
        calc();
        window.scrollTo(0,0);
    }

    function deleteRecord(id) {
        if(confirm(&quot;Permanently delete this record?&quot;)) {
            const tx = db.transaction(&quot;bills&quot;, &quot;readwrite&quot;);
            tx.objectStore(&quot;bills&quot;).delete(id).onsuccess = () =&gt; syncHistory();
        }
    }

    function exportJSON() {
        const tx = db.transaction(&quot;bills&quot;, &quot;readonly&quot;);
        tx.objectStore(&quot;bills&quot;).getAll().onsuccess = (e) =&gt; {
            const dataStr = &quot;data:text/json;charset=utf-8,&quot; + encodeURIComponent(JSON.stringify(e.target.result));
            const downloadAnchorNode = document.createElement(&#39;a&#39;);
            downloadAnchorNode.setAttribute(&quot;href&quot;, dataStr);
            downloadAnchorNode.setAttribute(&quot;download&quot;, &quot;pwd_billing_backup.json&quot;);
            document.body.appendChild(downloadAnchorNode);
            downloadAnchorNode.click();
            downloadAnchorNode.remove();
        };
    }

    function importJSON(event) {
        const file = event.target.files[0];
        if (!file) return;
        const reader = new FileReader();
        reader.onload = (e) =&gt; {
            const data = JSON.parse(e.target.result);
            const tx = db.transaction(&quot;bills&quot;, &quot;readwrite&quot;);
            const store = tx.objectStore(&quot;bills&quot;);
            data.forEach(item =&gt; {
                delete item.id; // Allow IndexedDB to generate new IDs
                store.add(item);
            });
            tx.oncomplete = () =&gt; {
                alert(&quot;Import Successful!&quot;);
                syncHistory();
                updateDatalist();
            };
        };
        reader.readAsText(file);
    }

    function updateDatalist() {
        const tx = db.transaction(&quot;bills&quot;, &quot;readonly&quot;);
        tx.objectStore(&quot;bills&quot;).getAll().onsuccess = (e) =&gt; {
            const projects = [...new Set(e.target.result.map(r =&gt; r.project))];
            document.getElementById(&#39;projectList&#39;).innerHTML = projects.map(p =&gt; `&lt;option value=&quot;${p}&quot;&gt;`).join(&#39;&#39;);
        };
    }

    function scrollToHistory() {
        document.getElementById(&#39;historySection&#39;).scrollIntoView({behavior: &#39;smooth&#39;});
    }
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;&lt;div class=&quot;blogger-post-footer&quot;&gt;https://yogipwd.blogspot.com/&lt;/div&gt;</description><link>https://www.yogipwd.com/2026/03/invoice-calculations-verification.html</link><author>noreply@blogger.com (Yogendra)</author><thr:total>0</thr:total></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-1074964965522467583.post-7864331520127220443</guid><pubDate>Tue, 17 Mar 2026 07:56:48 +0000</pubDate><atom:updated>2026-04-06T12:33:04.615+05:30</atom:updated><category domain="http://www.blogger.com/atom/ns#">PWD Working</category><title>Expenditure Tracker</title><description>&lt;div id=&quot;pwd-tracker-root&quot;&gt;
&lt;style&gt;
    /* Scoping everything to #pwd-tracker-root to prevent clashing with Blogger Theme */
    #pwd-tracker-root {
        --primary: #2563eb;
        --success: #10b981;
        --danger: #ef4444;
        --bg: #f8fafc;
        font-family: &#39;Segoe UI&#39;, Tahoma, Geneva, Verdana, sans-serif;
        background: var(--bg);
        padding: 10px;
        color: #1e293b;
        border-radius: 8px;
    }
    #pwd-tracker-root .container {
        max-width: 100%;
        margin: auto;
        background: white;
        padding: 15px;
        border-radius: 12px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    }
    #pwd-tracker-root .section {
        margin-bottom: 25px;
        padding: 15px;
        border-radius: 8px;
        border: 1px solid #e2e8f0;
    }
    #pwd-tracker-root .master-ts { background: #fffcf0; border-color: #fde68a; }
    #pwd-tracker-root .ra-bill { border-left: 6px solid var(--primary); background: #fff; margin-bottom: 20px; }

    /* Blogger Mobile Responsive Fix */
    #pwd-tracker-root .scroll-wrapper {
        width: 100%;
        overflow-x: auto;
        margin-bottom: 15px;
        border: 1px solid #e2e8f0;
        background: #fff;
    }

    /* Fixed Header Grid for Blogger */
    #pwd-tracker-root .header-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 15px;
        padding: 10px;
    }

    #pwd-tracker-root .bill-grid {
        display: grid;
        grid-template-columns: 250px 140px 140px 300px 60px;
        gap: 10px;
        padding: 10px;
        min-width: 900px;
        align-items: center;
    }

    #pwd-tracker-root .bill-header {
        background: #f1f5f9;
        font-weight: bold;
        font-size: 0.8em;
        text-transform: uppercase;
    }

    #pwd-tracker-root input, #pwd-tracker-root select {
        padding: 8px;
        border: 1px solid #cbd5e1;
        border-radius: 4px;
        width: 100%;
        box-sizing: border-box;
    }

    #pwd-tracker-root label {
        font-size: 0.75em;
        font-weight: 700;
        color: #64748b;
        display: block;
        margin-bottom: 4px;
    }

    #pwd-tracker-root .btn {
        padding: 8px 16px;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        font-weight: 600;
        transition: 0.2s;
    }
    #pwd-tracker-root .btn-add { background: var(--success); color: white; }
    #pwd-tracker-root .btn-bill { background: var(--primary); color: white; }
    #pwd-tracker-root .btn-save { background: #1e293b; color: white; width: 100%; margin-top: 10px; padding: 12px; }
    #pwd-tracker-root .btn-del { background: var(--danger); color: white; padding: 4px 8px; font-size: 11px; }

    #pwd-tracker-root .summary-table {
        width: 100%;
        border-collapse: collapse;
        min-width: 800px;
    }
    #pwd-tracker-root .summary-table th, #pwd-tracker-root .summary-table td {
        border: 1px solid #e2e8f0;
        padding: 10px;
        text-align: left;
        font-size: 13px;
    }
    #pwd-tracker-root .status-pill {
        padding: 3px 8px;
        border-radius: 12px;
        font-size: 10px;
        font-weight: bold;
    }
    #pwd-tracker-root .pill-ok { background: #dcfce7; color: #166534; }
    #pwd-tracker-root .pill-error { background: #fee2e2; color: #991b1b; }
  h1, h2 {
    color: #1e3a8a;
}
h2 {
    border-left: 5px solid #2563eb;
    padding-left: 10px;
}
ul {
    margin-left: 20px;
}
.code {
    background: #f8f9fa;
    padding: 10px;
    border-left: 4px solid #2563eb;
    font-family: monospace;
}
.highlight {
    color: #dc2626;
    font-weight: bold;
}
&lt;/style&gt;

&lt;div class=&quot;container&quot;&gt;
    &lt;h2 style=&quot;text-align:center; color: #2563eb;&quot;&gt;Infrastructure Project Dashboard&lt;/h2&gt;
  
  &lt;div class=&quot;section&quot; style=&quot;background: #f8fafc; border: 1px dashed #cbd5e1; display: flex; gap: 10px; justify-content: center;&quot;&gt;
    &lt;button class=&quot;btn&quot; style=&quot;background: #059669;&quot; onclick=&quot;exportProjectJSON()&quot;&gt;📤 Export Backup (JSON)&lt;/button&gt;
    &lt;button class=&quot;btn&quot; style=&quot;background: #7c3aed;&quot; onclick=&quot;triggerImport()&quot;&gt;📥 Import Backup (JSON)&lt;/button&gt;
    &lt;input type=&quot;file&quot; id=&quot;importFile&quot; style=&quot;display:none&quot; accept=&quot;.json&quot; onchange=&quot;importProjectJSON(event)&quot;&gt;
&lt;/div&gt;

    &lt;div class=&quot;section&quot;&gt;
        &lt;h3&gt;General Project Information&lt;/h3&gt;
        &lt;div class=&quot;header-grid&quot;&gt;
            &lt;div style=&quot;grid-column: span 2;&quot;&gt;&lt;label&gt;Project Name&lt;/label&gt;&lt;input type=&quot;text&quot; id=&quot;projName&quot; placeholder=&quot;Enter Full Name of Work&quot;&gt;&lt;/div&gt;
            &lt;div&gt;&lt;label&gt;Work Code / Job No.&lt;/label&gt;&lt;input type=&quot;text&quot; id=&quot;workCode&quot;&gt;&lt;/div&gt;
            &lt;div&gt;&lt;label&gt;Division&lt;/label&gt;&lt;input type=&quot;text&quot; id=&quot;division&quot;&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;header-grid&quot;&gt;
            &lt;div&gt;&lt;label&gt;Admin Approval (AA) (₹)&lt;/label&gt;&lt;input type=&quot;number&quot; id=&quot;adminAmt&quot;&gt;&lt;/div&gt;
            &lt;div&gt;&lt;label&gt;AA Ref No. &amp; Date&lt;/label&gt;&lt;input type=&quot;text&quot; id=&quot;aaRef&quot;&gt;&lt;/div&gt;
            &lt;div&gt;&lt;label&gt;Technical Sanction (TS) (₹)&lt;/label&gt;&lt;input type=&quot;number&quot; id=&quot;totalTS&quot;&gt;&lt;/div&gt;
            &lt;div&gt;&lt;label&gt;TS Ref No. &amp; Date&lt;/label&gt;&lt;input type=&quot;text&quot; id=&quot;tsRef&quot;&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;header-grid&quot;&gt;
            &lt;div&gt;&lt;label&gt;Tendered Amount (₹)&lt;/label&gt;&lt;input type=&quot;number&quot; id=&quot;tenderAmt&quot;&gt;&lt;/div&gt;
            &lt;div&gt;&lt;label&gt;Contractor Name&lt;/label&gt;&lt;input type=&quot;text&quot; id=&quot;contractor&quot;&gt;&lt;/div&gt;
            &lt;div&gt;&lt;label&gt;Commencement Date&lt;/label&gt;&lt;input type=&quot;date&quot; id=&quot;startDate&quot;&gt;&lt;/div&gt;
            &lt;div&gt;&lt;label&gt;Stipulated Completion&lt;/label&gt;&lt;input type=&quot;date&quot; id=&quot;endDate&quot;&gt;&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;

    &lt;div class=&quot;section master-ts&quot;&gt;
        &lt;div style=&quot;display:flex; justify-content:space-between; align-items:center; margin-bottom:15px;&quot;&gt;
            &lt;h3 style=&quot;margin:0;&quot;&gt;1. Master TS Components&lt;/h3&gt;
            &lt;button class=&quot;btn btn-add&quot; onclick=&quot;addMasterRow()&quot;&gt;+ Add Component&lt;/button&gt;
        &lt;/div&gt;
        &lt;div class=&quot;scroll-wrapper&quot;&gt;
            &lt;div class=&quot;bill-grid bill-header&quot; style=&quot;grid-template-columns: 2fr 1fr 80px; min-width: 500px;&quot;&gt;
                &lt;div&gt;Component Name&lt;/div&gt;&lt;div&gt;TS Amount (₹)&lt;/div&gt;&lt;div&gt;Action&lt;/div&gt;
            &lt;/div&gt;
            &lt;div id=&quot;master-list&quot;&gt;&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;

    &lt;div class=&quot;section&quot;&gt;
        &lt;div style=&quot;display:flex; justify-content:space-between; align-items:center; margin-bottom:15px;&quot;&gt;
            &lt;h3 style=&quot;margin:0;&quot;&gt;2. RA Bill Entries&lt;/h3&gt;
            &lt;button class=&quot;btn btn-bill&quot; onclick=&quot;addNewBill()&quot;&gt;+ New RA Bill&lt;/button&gt;
        &lt;/div&gt;
        &lt;div id=&quot;bills-container&quot;&gt;&lt;/div&gt;
    &lt;/div&gt;

    &lt;div class=&quot;section&quot;&gt;
        &lt;h3&gt;3. Cumulative Summary&lt;/h3&gt;
        &lt;div class=&quot;scroll-wrapper&quot;&gt;
            &lt;table class=&quot;summary-table&quot;&gt;
                &lt;thead&gt;
                    &lt;tr&gt;
                        &lt;th&gt;Description&lt;/th&gt;
                        &lt;th&gt;TS Amount&lt;/th&gt;
                        &lt;th&gt;Expended&lt;/th&gt;
                        &lt;th&gt;Balance&lt;/th&gt;
                        &lt;th&gt;Status&lt;/th&gt;
                    &lt;/tr&gt;
                &lt;/thead&gt;
                &lt;tbody id=&quot;summary-body&quot;&gt;&lt;/tbody&gt;
            &lt;/table&gt;
        &lt;/div&gt;
    &lt;/div&gt;

    &lt;button class=&quot;btn btn-save&quot; onclick=&quot;saveToDB()&quot;&gt;💾 Save Project Data &amp; Update Records&lt;/button&gt;
&lt;/div&gt;
  
&lt;div class=&quot;container&quot;&gt;

&lt;h1&gt;Infrastructure Project Dashboard – Technical Explanation&lt;/h1&gt;

&lt;p&gt;
This application is a &lt;strong&gt;comprehensive project monitoring and expenditure tracking system&lt;/strong&gt;
designed for infrastructure works. It integrates project data management, bill tracking, and
financial control into a single dashboard using browser-based storage.
&lt;/p&gt;

&lt;h2&gt;1. Objective of the System&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Manage project-level administrative and financial data&lt;/li&gt;
&lt;li&gt;Track Technical Sanction (TS) components&lt;/li&gt;
&lt;li&gt;Monitor RA (Running Account) bills&lt;/li&gt;
&lt;li&gt;Provide real-time expenditure vs budget comparison&lt;/li&gt;
&lt;li&gt;Enable backup and restoration of project data&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;2. General Project Information&lt;/h2&gt;

&lt;p&gt;
The system captures key administrative details:
&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Project Name, Work Code, Division&lt;/li&gt;
&lt;li&gt;Administrative Approval (AA)&lt;/li&gt;
&lt;li&gt;Technical Sanction (TS)&lt;/li&gt;
&lt;li&gt;Tendered Amount&lt;/li&gt;
&lt;li&gt;Contractor Details&lt;/li&gt;
&lt;li&gt;Project Timeline (Start &amp; Completion)&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;
These parameters form the base for financial and progress tracking.
&lt;/p&gt;

&lt;h2&gt;3. Master TS Components&lt;/h2&gt;

&lt;p&gt;
The project is divided into multiple components such as:
&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Civil Work&lt;/li&gt;
&lt;li&gt;Royalty&lt;/li&gt;
&lt;li&gt;Insurance&lt;/li&gt;
&lt;li&gt;Other custom components&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;
Each component includes:
&lt;/p&gt;

&lt;div class=&quot;code&quot;&gt;
Component Name + TS Amount
&lt;/div&gt;

&lt;p&gt;
This defines the &lt;strong&gt;maximum allowable expenditure&lt;/strong&gt; for each category.
&lt;/p&gt;

&lt;h2&gt;4. RA Bill Management&lt;/h2&gt;

&lt;p&gt;
The system allows multiple RA bills, each containing:
&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Bill Name (e.g., 1st RA, 2nd RA)&lt;/li&gt;
&lt;li&gt;Component-wise expenditure&lt;/li&gt;
&lt;li&gt;Remarks for each entry&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;
Each bill dynamically links to master components:
&lt;/p&gt;

&lt;div class=&quot;code&quot;&gt;
Selected Component → Fetch TS Limit → Enter Current Amount
&lt;/div&gt;

&lt;h2&gt;5. Real-Time Synchronization Logic&lt;/h2&gt;

&lt;p&gt;
The core function &lt;strong&gt;syncAll()&lt;/strong&gt; performs:
&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Updates dropdown options from master list&lt;/li&gt;
&lt;li&gt;Displays TS limits dynamically&lt;/li&gt;
&lt;li&gt;Aggregates expenditure across all bills&lt;/li&gt;
&lt;/ul&gt;

&lt;div class=&quot;code&quot;&gt;
Total Expended = Σ (All RA Bills for each component)
&lt;/div&gt;

&lt;h2&gt;6. Cumulative Summary Calculation&lt;/h2&gt;

&lt;p&gt;
For each component:
&lt;/p&gt;

&lt;div class=&quot;code&quot;&gt;
Balance = TS Amount - Total Expended
&lt;/div&gt;

&lt;p&gt;
Status is determined as:
&lt;/p&gt;

&lt;div class=&quot;code&quot;&gt;
If Balance &lt; 0 → OVER (Budget Exceeded)
Else → OK
&lt;/div&gt;

&lt;p class=&quot;highlight&quot;&gt;
Negative balance indicates overspending and requires immediate attention.
&lt;/p&gt;

&lt;h2&gt;7. Data Storage (IndexedDB)&lt;/h2&gt;

&lt;p&gt;
All project data is stored in browser database:
&lt;/p&gt;

&lt;div class=&quot;code&quot;&gt;
Database: PWD_Blogger_DB  
Store: projects  
Key: id = &quot;p1&quot;
&lt;/div&gt;

&lt;p&gt;
Stored data includes:
&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Project details&lt;/li&gt;
&lt;li&gt;Master components&lt;/li&gt;
&lt;li&gt;All RA bills&lt;/li&gt;
&lt;li&gt;Item-wise expenditure&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;8. Save &amp; Load Mechanism&lt;/h2&gt;

&lt;h3&gt;Saving Data&lt;/h3&gt;

&lt;div class=&quot;code&quot;&gt;
objectStore.put(projectData)
&lt;/div&gt;

&lt;p&gt;
Ensures persistent storage within browser.
&lt;/p&gt;

&lt;h3&gt;Loading Data&lt;/h3&gt;

&lt;div class=&quot;code&quot;&gt;
objectStore.get(&quot;p1&quot;)
&lt;/div&gt;

&lt;p&gt;
Automatically restores previous session data.
&lt;/p&gt;

&lt;h2&gt;9. Import / Export Feature&lt;/h2&gt;

&lt;h3&gt;Export&lt;/h3&gt;

&lt;p&gt;
Project data is exported as JSON:
&lt;/p&gt;

&lt;div class=&quot;code&quot;&gt;
JSON.stringify(data, null, 2)
&lt;/div&gt;

&lt;h3&gt;Import&lt;/h3&gt;

&lt;p&gt;
The system:
&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Reads JSON file&lt;/li&gt;
&lt;li&gt;Validates structure&lt;/li&gt;
&lt;li&gt;Saves to IndexedDB&lt;/li&gt;
&lt;li&gt;Reloads dashboard&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;10. Workflow Summary&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;Enter project details&lt;/li&gt;
&lt;li&gt;Define TS components&lt;/li&gt;
&lt;li&gt;Add RA bills&lt;/li&gt;
&lt;li&gt;Input expenditure values&lt;/li&gt;
&lt;li&gt;System calculates totals and balances&lt;/li&gt;
&lt;li&gt;Monitor status (OK / OVER)&lt;/li&gt;
&lt;li&gt;Save data or export backup&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;11. Engineering &amp; Management Benefits&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Real-time budget monitoring&lt;/li&gt;
&lt;li&gt;Prevents overspending&lt;/li&gt;
&lt;li&gt;Centralized project tracking&lt;/li&gt;
&lt;li&gt;Improves transparency and accountability&lt;/li&gt;
&lt;li&gt;Reduces manual errors&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;12. Assumptions&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;All TS values are fixed and approved&lt;/li&gt;
&lt;li&gt;RA bills are cumulative in nature&lt;/li&gt;
&lt;li&gt;No variation orders considered&lt;/li&gt;
&lt;li&gt;Single-user environment&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;13. Limitations&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;No cloud synchronization&lt;/li&gt;
&lt;li&gt;No multi-user collaboration&lt;/li&gt;
&lt;li&gt;No approval workflow&lt;/li&gt;
&lt;li&gt;No integration with accounting systems&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;14. Conclusion&lt;/h2&gt;

&lt;p&gt;
This dashboard functions as a &lt;span class=&quot;highlight&quot;&gt;powerful project expenditure tracking tool&lt;/span&gt;,
combining financial control with ease of use. It is especially useful for engineers,
project managers, and administrative authorities handling infrastructure works.
&lt;/p&gt;

&lt;p&gt;
Future enhancements may include cloud integration, real-time collaboration,
and advanced analytics dashboards.
&lt;/p&gt;

&lt;/div&gt;

&lt;script&gt;
    let db;
    let masterItems = [];

    // Initialize Database
    const request = indexedDB.open(&quot;PWD_Blogger_DB&quot;, 1);
    request.onupgradeneeded = e =&gt; {
        db = e.target.result;
        db.createObjectStore(&quot;projects&quot;, { keyPath: &quot;id&quot; });
    };
    request.onsuccess = e =&gt; { 
        db = e.target.result; 
        loadData(); 
    };

    function addMasterRow(name = &quot;&quot;, val = 0) {
        const id = &#39;m-&#39; + Date.now() + Math.random();
        const div = document.createElement(&#39;div&#39;);
        div.className = &#39;bill-grid&#39;;
        div.id = id;
        div.style.gridTemplateColumns = &quot;2fr 1fr 80px&quot;;
        div.style.minWidth = &quot;500px&quot;;
        div.innerHTML = `
            &lt;input type=&quot;text&quot; class=&quot;m-name&quot; value=&quot;${name}&quot; placeholder=&quot;Item Name&quot; oninput=&quot;syncAll()&quot;&gt;
            &lt;input type=&quot;number&quot; class=&quot;m-val&quot; value=&quot;${val}&quot; oninput=&quot;syncAll()&quot;&gt;
            &lt;button class=&quot;btn btn-del&quot; onclick=&quot;document.getElementById(&#39;${id}&#39;).remove(); syncAll();&quot;&gt;X&lt;/button&gt;
        `;
        document.getElementById(&#39;master-list&#39;).appendChild(div);
        syncAll();
    }

    function addNewBill(data = null) {
        const id = data ? data.id : &#39;bill-&#39; + Date.now();
        const div = document.createElement(&#39;div&#39;);
        div.className = &#39;section ra-bill&#39;;
        div.id = id;
        div.innerHTML = `
            &lt;div style=&quot;display:flex; justify-content:space-between; margin-bottom:10px;&quot;&gt;
                &lt;input type=&quot;text&quot; class=&quot;bill-no&quot; value=&quot;${data ? data.no : &#39;&#39;}&quot; placeholder=&quot;Bill Name (e.g. 1st RA)&quot; style=&quot;width:200px; font-weight:bold;&quot;&gt;
                &lt;button class=&quot;btn btn-del&quot; onclick=&quot;document.getElementById(&#39;${id}&#39;).remove(); syncAll();&quot;&gt;Delete Bill&lt;/button&gt;
            &lt;/div&gt;
            &lt;div class=&quot;scroll-wrapper&quot;&gt;
                &lt;div class=&quot;bill-grid bill-header&quot;&gt;
                    &lt;div&gt;Component&lt;/div&gt;&lt;div&gt;TS Limit&lt;/div&gt;&lt;div&gt;Current (₹)&lt;/div&gt;&lt;div&gt;Remarks&lt;/div&gt;&lt;div&gt;&lt;/div&gt;
                &lt;/div&gt;
                &lt;div id=&quot;rows-${id}&quot;&gt;&lt;/div&gt;
            &lt;/div&gt;
            &lt;button class=&quot;btn btn-add&quot; style=&quot;font-size:11px; margin-top:5px;&quot; onclick=&quot;addItemToBill(&#39;${id}&#39;)&quot;&gt;+ Add Row&lt;/button&gt;
        `;
        document.getElementById(&#39;bills-container&#39;).prepend(div);
        if (data &amp;&amp; data.items) {
            data.items.forEach(i =&gt; addItemToBill(id, i.name, i.amt, i.remark));
        } else { addItemToBill(id); }
    }

    function addItemToBill(billId, sName = &quot;&quot;, amt = 0, remark = &quot;&quot;) {
        const div = document.createElement(&#39;div&#39;);
        div.className = &#39;bill-grid&#39;;
        let options = masterItems.map(m =&gt; `&lt;option value=&quot;${m.name}&quot; ${m.name === sName ? &#39;selected&#39; : &#39;&#39;}&gt;${m.name}&lt;/option&gt;`).join(&#39;&#39;);
        div.innerHTML = `
            &lt;select class=&quot;ra-sel&quot; onchange=&quot;syncAll()&quot;&gt;
                &lt;option value=&quot;&quot;&gt;-- Item --&lt;/option&gt;${options}
            &lt;/select&gt;
            &lt;div class=&quot;ts-disp&quot; style=&quot;font-weight:bold; color:var(--primary);&quot;&gt;0&lt;/div&gt;
            &lt;input type=&quot;number&quot; class=&quot;ra-amt&quot; value=&quot;${amt}&quot; oninput=&quot;syncAll()&quot;&gt;
            &lt;input type=&quot;text&quot; class=&quot;ra-rem&quot; value=&quot;${remark}&quot; placeholder=&quot;Notes&quot;&gt;
            &lt;button class=&quot;btn btn-del&quot; onclick=&quot;this.parentElement.remove(); syncAll();&quot;&gt;X&lt;/button&gt;
        `;
        document.getElementById(`rows-${billId}`).appendChild(div);
        syncAll();
    }

    function syncAll() {
        masterItems = Array.from(document.querySelectorAll(&#39;#master-list .bill-grid&#39;)).map(row =&gt; ({
            name: row.querySelector(&#39;.m-name&#39;).value,
            ts: parseFloat(row.querySelector(&#39;.m-val&#39;).value) || 0
        }));

        document.querySelectorAll(&#39;.ra-bill&#39;).forEach(bill =&gt; {
            bill.querySelectorAll(&#39;.bill-grid:not(.bill-header)&#39;).forEach(row =&gt; {
                const select = row.querySelector(&#39;.ra-sel&#39;);
                const cur = select.value;
                const tsDisp = row.querySelector(&#39;.ts-disp&#39;);
                select.innerHTML = `&lt;option value=&quot;&quot;&gt;-- Item --&lt;/option&gt;` + masterItems.map(m =&gt; `&lt;option value=&quot;${m.name}&quot; ${m.name === cur ? &#39;selected&#39; : &#39;&#39;}&gt;${m.name}&lt;/option&gt;`).join(&#39;&#39;);
                const match = masterItems.find(m =&gt; m.name === cur);
                tsDisp.innerHTML = match ? match.ts.toLocaleString(&#39;en-IN&#39;) : &quot;0&quot;;
            });
        });

        const totals = {};
        masterItems.forEach(m =&gt; totals[m.name] = { ts: m.ts, exp: 0 });
        document.querySelectorAll(&#39;.ra-bill .ra-amt&#39;).forEach(input =&gt; {
            const name = input.closest(&#39;.bill-grid&#39;).querySelector(&#39;.ra-sel&#39;).value;
            if (name &amp;&amp; totals[name]) totals[name].exp += parseFloat(input.value) || 0;
        });

        const tbody = document.getElementById(&#39;summary-body&#39;);
        tbody.innerHTML = &#39;&#39;;
        for (let name in totals) {
            const item = totals[name];
            const balance = item.ts - item.exp;
            tbody.innerHTML += `
                &lt;tr&gt;
                    &lt;td&gt;${name}&lt;/td&gt;
                    &lt;td&gt;${item.ts.toLocaleString(&#39;en-IN&#39;)}&lt;/td&gt;
                    &lt;td&gt;${item.exp.toLocaleString(&#39;en-IN&#39;)}&lt;/td&gt;
                    &lt;td style=&quot;color:${balance &lt; 0 ? &#39;red&#39; : &#39;green&#39;}; font-weight:bold;&quot;&gt;${balance.toLocaleString(&#39;en-IN&#39;)}&lt;/td&gt;
                    &lt;td&gt;&lt;span class=&quot;status-pill ${balance &lt; 0 ? &#39;pill-error&#39; : &#39;pill-ok&#39;}&quot;&gt;${balance &lt; 0 ? &#39;OVER&#39; : &#39;OK&#39;}&lt;/span&gt;&lt;/td&gt;
                &lt;/tr&gt;`;
        }
    }

    function saveToDB() {
        const fields = [&#39;projName&#39;, &#39;workCode&#39;, &#39;division&#39;, &#39;adminAmt&#39;, &#39;aaRef&#39;, &#39;totalTS&#39;, &#39;tsRef&#39;, &#39;tenderAmt&#39;, &#39;contractor&#39;, &#39;startDate&#39;, &#39;endDate&#39;];
        const data = { id: &quot;p1&quot; };
        fields.forEach(f =&gt; data[f] = document.getElementById(f).value);
        data.master = masterItems;
        data.bills = Array.from(document.querySelectorAll(&#39;.ra-bill&#39;)).map(b =&gt; ({
            id: b.id, no: b.querySelector(&#39;.bill-no&#39;).value,
            items: Array.from(b.querySelectorAll(&#39;.bill-grid:not(.bill-header)&#39;)).map(r =&gt; ({
                name: r.querySelector(&#39;.ra-sel&#39;).value, amt: r.querySelector(&#39;.ra-amt&#39;).value, remark: r.querySelector(&#39;.ra-rem&#39;).value
            }))
        }));
        const tx = db.transaction(&quot;projects&quot;, &quot;readwrite&quot;);
        tx.objectStore(&quot;projects&quot;).put(data);
        alert(&quot;Saved to browser memory!&quot;);
    }

    function loadData() {
        const tx = db.transaction(&quot;projects&quot;, &quot;readonly&quot;);
        const req = tx.objectStore(&quot;projects&quot;).get(&quot;p1&quot;);
        req.onsuccess = () =&gt; {
            const res = req.result;
            if (res) {
                const fields = [&#39;projName&#39;, &#39;workCode&#39;, &#39;division&#39;, &#39;adminAmt&#39;, &#39;aaRef&#39;, &#39;totalTS&#39;, &#39;tsRef&#39;, &#39;tenderAmt&#39;, &#39;contractor&#39;, &#39;startDate&#39;, &#39;endDate&#39;];
                fields.forEach(f =&gt; document.getElementById(f).value = res[f] || &quot;&quot;);
                res.master.forEach(m =&gt; addMasterRow(m.name, m.ts));
                res.bills.reverse().forEach(b =&gt; addNewBill(b));
                syncAll();
            } else { 
                [&quot;Civil Work&quot;, &quot;Royalty&quot;, &quot;Insurance&quot;].forEach(n =&gt; addMasterRow(n, 0)); 
            }
        };
    }
  
  function exportProjectJSON() {
        const tx = db.transaction(&quot;projects&quot;, &quot;readonly&quot;);
        const req = tx.objectStore(&quot;projects&quot;).get(&quot;p1&quot;);

        req.onsuccess = () =&gt; {
            const data = req.result;
            if (!data) {
                alert(&quot;No data found to export! Please save your project first.&quot;);
                return;
            }

            const date = new Date().toISOString().split(&#39;T&#39;)[0];
            const fileName = `Expenditure Tracker dated ${date}.json`;
            
            const blob = new Blob([JSON.stringify(data, null, 2)], { type: &quot;application/json&quot; });
            const url = URL.createObjectURL(blob);
            const a = document.createElement(&quot;a&quot;);
            
            a.href = url;
            a.download = fileName;
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
            URL.revokeObjectURL(url);
        };
    }
  
  function triggerImport() {
        document.getElementById(&#39;importFile&#39;).click();
    }

    // 3. New Import Function
    function importProjectJSON(event) {
        const file = event.target.files[0];
        if (!file) return;

        const reader = new FileReader();
        reader.onload = function(e) {
            try {
                const importedData = JSON.parse(e.target.result);
                
                // Validate if it&#39;s our project data
                if (!importedData.projName || !importedData.master) {
                    throw new Error(&quot;Invalid file format.&quot;);
                }

                // Save to IndexedDB
                const tx = db.transaction(&quot;projects&quot;, &quot;readwrite&quot;);
                const store = tx.objectStore(&quot;projects&quot;);
                store.put(importedData);

                tx.oncomplete = () =&gt; {
                    alert(&quot;Import Successful! Reloading dashboard...&quot;);
                    location.reload(); // Refresh to show new data
                };
            } catch (err) {
                alert(&quot;Error importing file: &quot; + err.message);
            }
        };
        reader.readAsText(file);
    }
&lt;/script&gt;
&lt;/div&gt;&lt;div class=&quot;blogger-post-footer&quot;&gt;https://yogipwd.blogspot.com/&lt;/div&gt;</description><link>https://www.yogipwd.com/2026/03/expenditure-tracker.html</link><author>noreply@blogger.com (Yogendra)</author><thr:total>0</thr:total></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-1074964965522467583.post-1968293366174317595</guid><pubDate>Fri, 13 Mar 2026 07:46:00 +0000</pubDate><atom:updated>2026-04-06T23:56:32.599+05:30</atom:updated><title>EPC project status Obligation</title><description>&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;PWD EPC Monitor | Fixed Stable&lt;/title&gt;
    &lt;style&gt;
        :root { --pwd-blue: #1a3a5a; --pwd-light: #f4f7f9; }
        body { font-family: &#39;Segoe UI&#39;, sans-serif; background: var(--pwd-light); padding: 2px; }
        .container { max-width: 1200px; margin: 0 auto; background: white; padding: 2px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
        .section { margin-bottom: 25px; border-top: 4px solid var(--pwd-blue); padding: 2px; background: #fff; }
        .table-wrapper { width: 100%; overflow-x: auto; margin-top: 10px; border: 1px solid #ddd; border-radius: 4px; }
        .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 5px; margin-bottom: 20px; }
        .form-group { display: flex; flex-direction: column; }
        label { font-size: 0.85rem; font-weight: 600; margin-bottom: 5px; color: #555; }
        input, select { padding: 1px; border: 1px solid #ccc; border-radius: 4px; }
        table { width: 100%; border-collapse: collapse; min-width: 500px; }
        th, td { border: 1px solid #ddd; padding: 1px; text-align: left; font-size: 0.85rem; }
        th { background: #f8f9fa; color: var(--pwd-blue); position: sticky; top: 0; }
        .btn-group { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
        button { padding: 1px 2px; border: none; border-radius: 4px; cursor: pointer; font-weight: 600; transition: 0.2s; }
        .btn-save { background: #28a745; color: white; }
        .btn-csv { background: #d97706; color: white; }
        .btn-del { background: #dc3545; color: white; }
        .btn-add-row { background: #e9ecef; border: 1px solid #ccc; }
        .btn-del-row { background: #fff1f1; color: #dc3545; border: 1px solid #feb2b2; margin-left: 5px; }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;div class=&quot;container&quot;&gt;
    &lt;div class=&quot;section&quot;&gt;
        &lt;h3&gt;Project Management (Database)&lt;/h3&gt;
        &lt;div style=&quot;display: flex; gap: 1px;&quot;&gt;
            &lt;select id=&quot;projectSelector&quot; onchange=&quot;loadSelectedProject()&quot; style=&quot;flex-grow: 1; padding: 1px;&quot;&gt;
                &lt;option value=&quot;&quot;&gt;-- Select Project from IndexedDB --&lt;/option&gt;
            &lt;/select&gt;
          &lt;/div&gt;
      &lt;div&gt;
            &lt;button class=&quot;btn-add-row&quot; onclick=&quot;document.getElementById(&#39;fileInput&#39;).click()&quot;&gt;📥 Import JSON&lt;/button&gt;
            &lt;input type=&quot;file&quot; id=&quot;fileInput&quot; style=&quot;display:none&quot; accept=&quot;.json&quot; onchange=&quot;importJSON(event)&quot;&gt;
        
    &lt;/div&gt;

    &lt;div class=&quot;section&quot;&gt;
        &lt;h3&gt;Primary Details&lt;/h3&gt;
        &lt;div class=&quot;form-grid&quot;&gt;
            &lt;div class=&quot;form-group&quot;&gt;&lt;label&gt;Project Name&lt;/label&gt;&lt;input type=&quot;text&quot; id=&quot;projectName&quot;&gt;&lt;/div&gt;
            &lt;div class=&quot;form-group&quot;&gt;&lt;label&gt;Length (km)&lt;/label&gt;&lt;input type=&quot;number&quot; step=&quot;0.001&quot; id=&quot;roadLength&quot;&gt;&lt;/div&gt;
            &lt;div class=&quot;form-group&quot;&gt;&lt;label&gt;AA Cost (Cr)&lt;/label&gt;&lt;input type=&quot;number&quot; id=&quot;aacost&quot;&gt;&lt;/div&gt;
            &lt;div class=&quot;form-group&quot;&gt;&lt;label&gt;Appointment Date&lt;/label&gt;&lt;input type=&quot;date&quot; id=&quot;appointment&quot;&gt;&lt;/div&gt;
            &lt;div class=&quot;form-group&quot;&gt;&lt;label&gt;Estimate (Cr)&lt;/label&gt;&lt;input type=&quot;number&quot; id=&quot;estimate&quot; oninput=&quot;calculateVariation()&quot;&gt;&lt;/div&gt;
            &lt;div class=&quot;form-group&quot;&gt;&lt;label&gt;Accepted Tender (Cr)&lt;/label&gt;&lt;input type=&quot;number&quot; id=&quot;tender&quot; oninput=&quot;calculateVariation()&quot;&gt;&lt;/div&gt;
            &lt;div class=&quot;form-group&quot;&gt;&lt;label&gt;Variation %&lt;/label&gt;&lt;input type=&quot;text&quot; id=&quot;variation&quot; readonly style=&quot;background:#eee&quot;&gt;&lt;/div&gt;
            &lt;div class=&quot;form-group&quot;&gt;&lt;label&gt;Work Period&lt;/label&gt;&lt;input type=&quot;number&quot; id=&quot;period&quot;&gt;&lt;/div&gt;
            &lt;div class=&quot;form-group&quot;&gt;&lt;label&gt;Contractor&lt;/label&gt;&lt;input type=&quot;text&quot; id=&quot;contractor&quot;&gt;&lt;/div&gt;
            &lt;div class=&quot;form-group&quot;&gt;&lt;label&gt;Authority Engineer&lt;/label&gt;&lt;input type=&quot;text&quot; id=&quot;ae&quot;&gt;&lt;/div&gt;
        &lt;/div&gt;
        
        &lt;div class=&quot;btn-group&quot;&gt;
            &lt;button class=&quot;btn-save&quot; onclick=&quot;saveToDB()&quot;&gt;💾 Save to DB&lt;/button&gt;
            &lt;button class=&quot;btn-csv&quot; onclick=&quot;exportToCSV()&quot;&gt;📊 Export CSV&lt;/button&gt;
            &lt;button style=&quot;background:#17a2b8; color:white;&quot; onclick=&quot;exportJSONBackup()&quot;&gt;📤 Export JSON Backup&lt;/button&gt;
            &lt;button class=&quot;btn-del&quot; onclick=&quot;deleteProject()&quot;&gt;🗑️ Delete Project&lt;/button&gt;
            &lt;button onclick=&quot;location.reload()&quot;&gt;🔄 Refresh/New&lt;/button&gt;
        &lt;/div&gt;
    &lt;/div&gt;

     &lt;div class=&quot;section&quot;&gt;
        &lt;h3&gt;1. Consultants &amp; Personnel&lt;/h3&gt;
      &lt;div class=&quot;table-wrapper&quot;&gt;
        &lt;table id=&quot;table_0&quot;&gt;
            &lt;thead&gt;&lt;tr&gt;&lt;th&gt;Consultants &amp; Personnel&lt;/th&gt;&lt;th&gt;Sub. Date&lt;/th&gt;&lt;th&gt;Rem. Date&lt;/th&gt;&lt;th&gt;Status&lt;/th&gt;&lt;th&gt;Remarks&lt;/th&gt;&lt;th&gt;Action&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;
            &lt;tbody&gt;
              
              &lt;tr&gt;&lt;td&gt;Design Consultant&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;select&gt;&lt;option&gt;Pending&lt;/option&gt;&lt;option&gt;Submitted&lt;/option&gt;&lt;option&gt;Approved&lt;/option&gt;&lt;option&gt;Reverted&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;text&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;button class=&quot;btn-add-row&quot; onclick=&quot;addRow(this)&quot;&gt;+&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;
              
              &lt;tr&gt;&lt;td&gt;Proof Consultant&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;select&gt;&lt;option&gt;Pending&lt;/option&gt;&lt;option&gt;Submitted&lt;/option&gt;&lt;option&gt;Approved&lt;/option&gt;&lt;option&gt;Reverted&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;text&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;button class=&quot;btn-add-row&quot; onclick=&quot;addRow(this)&quot;&gt;+&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;
              
              &lt;tr&gt;&lt;td&gt;Safety Consultant&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;select&gt;&lt;option&gt;Pending&lt;/option&gt;&lt;option&gt;Submitted&lt;/option&gt;&lt;option&gt;Approved&lt;/option&gt;&lt;option&gt;Reverted&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;text&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;button class=&quot;btn-add-row&quot; onclick=&quot;addRow(this)&quot;&gt;+&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;
              
              &lt;tr&gt;&lt;td&gt;Project Manager&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;select&gt;&lt;option&gt;Pending&lt;/option&gt;&lt;option&gt;Submitted&lt;/option&gt;&lt;option&gt;Approved&lt;/option&gt;&lt;option&gt;Reverted&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;text&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;button class=&quot;btn-add-row&quot; onclick=&quot;addRow(this)&quot;&gt;+&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;
              
              &lt;tr&gt;&lt;td&gt;Surveyor&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;select&gt;&lt;option&gt;Pending&lt;/option&gt;&lt;option&gt;Submitted&lt;/option&gt;&lt;option&gt;Approved&lt;/option&gt;&lt;option&gt;Reverted&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;text&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;button class=&quot;btn-add-row&quot; onclick=&quot;addRow(this)&quot;&gt;+&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;
              
              &lt;tr&gt;&lt;td&gt;Site Supervisor&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;select&gt;&lt;option&gt;Pending&lt;/option&gt;&lt;option&gt;Submitted&lt;/option&gt;&lt;option&gt;Approved&lt;/option&gt;&lt;option&gt;Reverted&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;text&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;button class=&quot;btn-add-row&quot; onclick=&quot;addRow(this)&quot;&gt;+&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;
              
              &lt;tr&gt;&lt;td&gt;Material Engineer&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;select&gt;&lt;option&gt;Pending&lt;/option&gt;&lt;option&gt;Submitted&lt;/option&gt;&lt;option&gt;Approved&lt;/option&gt;&lt;option&gt;Reverted&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;text&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;button class=&quot;btn-add-row&quot; onclick=&quot;addRow(this)&quot;&gt;+&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;
              
          &lt;/tbody&gt;
        &lt;/table&gt;
    &lt;/div&gt;
  &lt;/div&gt;

    &lt;div class=&quot;section&quot;&gt;
        &lt;h3&gt;2. Mandatory Submissions&lt;/h3&gt;
      &lt;div class=&quot;table-wrapper&quot;&gt;
        &lt;table id=&quot;table_1&quot;&gt;
            &lt;thead&gt;&lt;tr&gt;&lt;th&gt;Mandatory Submissions&lt;/th&gt;&lt;th&gt;Sub. Date&lt;/th&gt;&lt;th&gt;Rem. Date&lt;/th&gt;&lt;th&gt;Status&lt;/th&gt;&lt;th&gt;Remarks&lt;/th&gt;&lt;th&gt;Action&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;
            &lt;tbody&gt;
              
              &lt;tr&gt;&lt;td&gt;Land Memorandom&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;select&gt;&lt;option&gt;Pending&lt;/option&gt;&lt;option&gt;Submitted&lt;/option&gt;&lt;option&gt;Approved&lt;/option&gt;&lt;option&gt;Reverted&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;text&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;button class=&quot;btn-add-row&quot; onclick=&quot;addRow(this)&quot;&gt;+&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;
              
              &lt;tr&gt;&lt;td&gt;Schedule H&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;select&gt;&lt;option&gt;Pending&lt;/option&gt;&lt;option&gt;Submitted&lt;/option&gt;&lt;option&gt;Approved&lt;/option&gt;&lt;option&gt;Reverted&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;text&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;button class=&quot;btn-add-row&quot; onclick=&quot;addRow(this)&quot;&gt;+&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;
              
              &lt;tr&gt;&lt;td&gt;Schedule F Permits (20 Days)&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;select&gt;&lt;option&gt;Pending&lt;/option&gt;&lt;option&gt;Submitted&lt;/option&gt;&lt;option&gt;Approved&lt;/option&gt;&lt;option&gt;Reverted&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;text&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;button class=&quot;btn-add-row&quot; onclick=&quot;addRow(this)&quot;&gt;+&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;
              
              &lt;tr&gt;&lt;td&gt;Project Implementation Schedule or Construction program– In line with Schedule-J along with approved Schedule-J&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;select&gt;&lt;option&gt;Pending&lt;/option&gt;&lt;option&gt;Submitted&lt;/option&gt;&lt;option&gt;Approved&lt;/option&gt;&lt;option&gt;Reverted&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;text&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;button class=&quot;btn-add-row&quot; onclick=&quot;addRow(this)&quot;&gt;+&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;
              
              &lt;tr&gt;&lt;td&gt;Workzone Safety Plan (20 Days)&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;select&gt;&lt;option&gt;Pending&lt;/option&gt;&lt;option&gt;Submitted&lt;/option&gt;&lt;option&gt;Approved&lt;/option&gt;&lt;option&gt;Reverted&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;text&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;button class=&quot;btn-add-row&quot; onclick=&quot;addRow(this)&quot;&gt;+&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;
              
              &lt;tr&gt;&lt;td&gt;Environment Management Plan (20 Days)&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;select&gt;&lt;option&gt;Pending&lt;/option&gt;&lt;option&gt;Submitted&lt;/option&gt;&lt;option&gt;Approved&lt;/option&gt;&lt;option&gt;Reverted&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;text&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;button class=&quot;btn-add-row&quot; onclick=&quot;addRow(this)&quot;&gt;+&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;
              
              &lt;tr&gt;&lt;td&gt;Work Programme (30 Days)&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;select&gt;&lt;option&gt;Pending&lt;/option&gt;&lt;option&gt;Submitted&lt;/option&gt;&lt;option&gt;Approved&lt;/option&gt;&lt;option&gt;Reverted&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;text&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;button class=&quot;btn-add-row&quot; onclick=&quot;addRow(this)&quot;&gt;+&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;
              
              &lt;tr&gt;&lt;td&gt;QAP (30 Days)&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;select&gt;&lt;option&gt;Pending&lt;/option&gt;&lt;option&gt;Submitted&lt;/option&gt;&lt;option&gt;Approved&lt;/option&gt;&lt;option&gt;Reverted&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;text&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;button class=&quot;btn-add-row&quot; onclick=&quot;addRow(this)&quot;&gt;+&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;
              
              &lt;tr&gt;&lt;td&gt;Insurance Policy (CAR)&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;select&gt;&lt;option&gt;Pending&lt;/option&gt;&lt;option&gt;Submitted&lt;/option&gt;&lt;option&gt;Approved&lt;/option&gt;&lt;option&gt;Reverted&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;text&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;button class=&quot;btn-add-row&quot; onclick=&quot;addRow(this)&quot;&gt;+&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;
              
              &lt;tr&gt;&lt;td&gt;Comprehensive workman insurance Policy.&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;select&gt;&lt;option&gt;Pending&lt;/option&gt;&lt;option&gt;Submitted&lt;/option&gt;&lt;option&gt;Approved&lt;/option&gt;&lt;option&gt;Reverted&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;text&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;button class=&quot;btn-add-row&quot; onclick=&quot;addRow(this)&quot;&gt;+&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;
              
              
          
          &lt;/tbody&gt;
        &lt;/table&gt;
        &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;div class=&quot;section&quot;&gt;
        &lt;h3&gt;3. Engineering Documents&lt;/h3&gt;
    &lt;div class=&quot;table-wrapper&quot;&gt;
        &lt;table id=&quot;table_2&quot;&gt;
            &lt;thead&gt;
              &lt;tr&gt;&lt;th&gt;Structural Drawings&lt;/th&gt;&lt;th&gt;Sub. Date&lt;/th&gt;&lt;th&gt;Rem. Date&lt;/th&gt;&lt;th&gt;Status&lt;/th&gt;&lt;th&gt;Remarks&lt;/th&gt;&lt;th&gt;Action&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;
            &lt;tbody&gt;
              
              &lt;tr&gt;&lt;td&gt;Plan and Profile&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;select&gt;&lt;option&gt;Pending&lt;/option&gt;&lt;option&gt;Submitted&lt;/option&gt;&lt;option&gt;Approved&lt;/option&gt;&lt;option&gt;Reverted&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;text&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;button class=&quot;btn-add-row&quot; onclick=&quot;addRow(this)&quot;&gt;+&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;
              
              &lt;tr&gt;&lt;td&gt;Traffic Diversion Plan&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;select&gt;&lt;option&gt;Pending&lt;/option&gt;&lt;option&gt;Submitted&lt;/option&gt;&lt;option&gt;Approved&lt;/option&gt;&lt;option&gt;Reverted&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;text&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;button class=&quot;btn-add-row&quot; onclick=&quot;addRow(this)&quot;&gt;+&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;
              
              &lt;tr&gt;&lt;td&gt;Drone Videography as per 11.16 every calender Quarter&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;select&gt;&lt;option&gt;Pending&lt;/option&gt;&lt;option&gt;Submitted&lt;/option&gt;&lt;option&gt;Approved&lt;/option&gt;&lt;option&gt;Reverted&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;text&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;button class=&quot;btn-add-row&quot; onclick=&quot;addRow(this)&quot;&gt;+&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;
              
              &lt;tr&gt;&lt;td&gt;Construction Methodology&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;select&gt;&lt;option&gt;Pending&lt;/option&gt;&lt;option&gt;Submitted&lt;/option&gt;&lt;option&gt;Approved&lt;/option&gt;&lt;option&gt;Reverted&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;text&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;button class=&quot;btn-add-row&quot; onclick=&quot;addRow(this)&quot;&gt;+&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;
              
              &lt;tr&gt;&lt;td&gt;MPR &amp; QPR no latter than 10 Days after the close of easch month as per clause 11.7&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;select&gt;&lt;option&gt;Pending&lt;/option&gt;&lt;option&gt;Submitted&lt;/option&gt;&lt;option&gt;Approved&lt;/option&gt;&lt;option&gt;Reverted&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;text&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;button class=&quot;btn-add-row&quot; onclick=&quot;addRow(this)&quot;&gt;+&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;
              
              &lt;tr&gt;&lt;td&gt;HPC&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;select&gt;&lt;option&gt;Pending&lt;/option&gt;&lt;option&gt;Submitted&lt;/option&gt;&lt;option&gt;Approved&lt;/option&gt;&lt;option&gt;Reverted&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;text&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;button class=&quot;btn-add-row&quot; onclick=&quot;addRow(this)&quot;&gt;+&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;
              
              &lt;tr&gt;&lt;td&gt;Minor Bridge	&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;select&gt;&lt;option&gt;Pending&lt;/option&gt;&lt;option&gt;Submitted&lt;/option&gt;&lt;option&gt;Approved&lt;/option&gt;&lt;option&gt;Reverted&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;text&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;button class=&quot;btn-add-row&quot; onclick=&quot;addRow(this)&quot;&gt;+&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;
              
              &lt;tr&gt;&lt;td&gt;Major Bridge	&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;select&gt;&lt;option&gt;Pending&lt;/option&gt;&lt;option&gt;Submitted&lt;/option&gt;&lt;option&gt;Approved&lt;/option&gt;&lt;option&gt;Reverted&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;text&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;button class=&quot;btn-add-row&quot; onclick=&quot;addRow(this)&quot;&gt;+&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;
              
              &lt;tr&gt;&lt;td&gt;Slab drain&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;select&gt;&lt;option&gt;Pending&lt;/option&gt;&lt;option&gt;Submitted&lt;/option&gt;&lt;option&gt;Approved&lt;/option&gt;&lt;option&gt;Reverted&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;text&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;button class=&quot;btn-add-row&quot; onclick=&quot;addRow(this)&quot;&gt;+&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;
              
              &lt;tr&gt;&lt;td&gt;Retaining wall&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;select&gt;&lt;option&gt;Pending&lt;/option&gt;&lt;option&gt;Submitted&lt;/option&gt;&lt;option&gt;Approved&lt;/option&gt;&lt;option&gt;Reverted&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;text&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;button class=&quot;btn-add-row&quot; onclick=&quot;addRow(this)&quot;&gt;+&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;
              
              &lt;tr&gt;&lt;td&gt;Footway Drain&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;select&gt;&lt;option&gt;Pending&lt;/option&gt;&lt;option&gt;Submitted&lt;/option&gt;&lt;option&gt;Approved&lt;/option&gt;&lt;option&gt;Reverted&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;text&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;button class=&quot;btn-add-row&quot; onclick=&quot;addRow(this)&quot;&gt;+&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;
              
              &lt;tr&gt;&lt;td&gt;Rigid Pavement&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;select&gt;&lt;option&gt;Pending&lt;/option&gt;&lt;option&gt;Submitted&lt;/option&gt;&lt;option&gt;Approved&lt;/option&gt;&lt;option&gt;Reverted&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;text&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;button class=&quot;btn-add-row&quot; onclick=&quot;addRow(this)&quot;&gt;+&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;
              
              &lt;tr&gt;&lt;td&gt;Anti Crash barrier&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;select&gt;&lt;option&gt;Pending&lt;/option&gt;&lt;option&gt;Submitted&lt;/option&gt;&lt;option&gt;Approved&lt;/option&gt;&lt;option&gt;Reverted&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;text&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;button class=&quot;btn-add-row&quot; onclick=&quot;addRow(this)&quot;&gt;+&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;
              
              &lt;tr&gt;&lt;td&gt;List of TBMs&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;select&gt;&lt;option&gt;Pending&lt;/option&gt;&lt;option&gt;Submitted&lt;/option&gt;&lt;option&gt;Approved&lt;/option&gt;&lt;option&gt;Reverted&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;text&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;button class=&quot;btn-add-row&quot; onclick=&quot;addRow(this)&quot;&gt;+&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;
              
              &lt;tr&gt;&lt;td&gt;Drainage Plan&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;select&gt;&lt;option&gt;Pending&lt;/option&gt;&lt;option&gt;Submitted&lt;/option&gt;&lt;option&gt;Approved&lt;/option&gt;&lt;option&gt;Reverted&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;text&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;button class=&quot;btn-add-row&quot; onclick=&quot;addRow(this)&quot;&gt;+&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;
              
              &lt;tr&gt;&lt;td&gt;Hydraulic Calculations&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;select&gt;&lt;option&gt;Pending&lt;/option&gt;&lt;option&gt;Submitted&lt;/option&gt;&lt;option&gt;Approved&lt;/option&gt;&lt;option&gt;Reverted&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;text&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;button class=&quot;btn-add-row&quot; onclick=&quot;addRow(this)&quot;&gt;+&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;
              
              &lt;tr&gt;&lt;td&gt;Flexible Pavement Design&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;select&gt;&lt;option&gt;Pending&lt;/option&gt;&lt;option&gt;Submitted&lt;/option&gt;&lt;option&gt;Approved&lt;/option&gt;&lt;option&gt;Reverted&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;text&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;button class=&quot;btn-add-row&quot; onclick=&quot;addRow(this)&quot;&gt;+&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;
              
         
          
          &lt;/tbody&gt;
        &lt;/table&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;div class=&quot;section&quot;&gt;
        &lt;h3&gt;4. Statutory Approvals&lt;/h3&gt;
    &lt;div class=&quot;table-wrapper&quot;&gt;
        &lt;table id=&quot;table_3&quot;&gt;
            &lt;thead&gt;&lt;tr&gt;&lt;th&gt;Approvals&lt;/th&gt;&lt;th&gt;Sub. Date&lt;/th&gt;&lt;th&gt;Rem. Date&lt;/th&gt;&lt;th&gt;Status&lt;/th&gt;&lt;th&gt;Remarks&lt;/th&gt;&lt;th&gt;Action&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;
            &lt;tbody&gt;
              
              &lt;tr&gt;&lt;td&gt;Environmental Clearance&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;select&gt;&lt;option&gt;Pending&lt;/option&gt;&lt;option&gt;Submitted&lt;/option&gt;&lt;option&gt;Approved&lt;/option&gt;&lt;option&gt;Reverted&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;text&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;button class=&quot;btn-add-row&quot; onclick=&quot;addRow(this)&quot;&gt;+&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;
              
              &lt;tr&gt;&lt;td&gt;MPCB&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;select&gt;&lt;option&gt;Pending&lt;/option&gt;&lt;option&gt;Submitted&lt;/option&gt;&lt;option&gt;Approved&lt;/option&gt;&lt;option&gt;Reverted&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;text&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;button class=&quot;btn-add-row&quot; onclick=&quot;addRow(this)&quot;&gt;+&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;
              
              &lt;tr&gt;&lt;td&gt;Forest Clearance&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;select&gt;&lt;option&gt;Pending&lt;/option&gt;&lt;option&gt;Submitted&lt;/option&gt;&lt;option&gt;Approved&lt;/option&gt;&lt;option&gt;Reverted&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;text&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;button class=&quot;btn-add-row&quot; onclick=&quot;addRow(this)&quot;&gt;+&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;
              
              &lt;tr&gt;&lt;td&gt;Tree Cutting Permission	&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;select&gt;&lt;option&gt;Pending&lt;/option&gt;&lt;option&gt;Submitted&lt;/option&gt;&lt;option&gt;Approved&lt;/option&gt;&lt;option&gt;Reverted&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;text&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;button class=&quot;btn-add-row&quot; onclick=&quot;addRow(this)&quot;&gt;+&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;
              
              &lt;tr&gt;&lt;td&gt;Explosive License&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;select&gt;&lt;option&gt;Pending&lt;/option&gt;&lt;option&gt;Submitted&lt;/option&gt;&lt;option&gt;Approved&lt;/option&gt;&lt;option&gt;Reverted&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;text&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;button class=&quot;btn-add-row&quot; onclick=&quot;addRow(this)&quot;&gt;+&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;
              
              &lt;tr&gt;&lt;td&gt;Village Panchayat NOC for borrow area.&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;select&gt;&lt;option&gt;Pending&lt;/option&gt;&lt;option&gt;Submitted&lt;/option&gt;&lt;option&gt;Approved&lt;/option&gt;&lt;option&gt;Reverted&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;text&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;button class=&quot;btn-add-row&quot; onclick=&quot;addRow(this)&quot;&gt;+&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;
              
              &lt;tr&gt;&lt;td&gt;Drawing water from River/Reservoir&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;select&gt;&lt;option&gt;Pending&lt;/option&gt;&lt;option&gt;Submitted&lt;/option&gt;&lt;option&gt;Approved&lt;/option&gt;&lt;option&gt;Reverted&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;text&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;button class=&quot;btn-add-row&quot; onclick=&quot;addRow(this)&quot;&gt;+&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;
              
              &lt;tr&gt;&lt;td&gt;WC Policy&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;select&gt;&lt;option&gt;Pending&lt;/option&gt;&lt;option&gt;Submitted&lt;/option&gt;&lt;option&gt;Approved&lt;/option&gt;&lt;option&gt;Reverted&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;text&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;button class=&quot;btn-add-row&quot; onclick=&quot;addRow(this)&quot;&gt;+&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;
              
              &lt;tr&gt;&lt;td&gt;Quarry Agreements/Permission for Lease&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;select&gt;&lt;option&gt;Pending&lt;/option&gt;&lt;option&gt;Submitted&lt;/option&gt;&lt;option&gt;Approved&lt;/option&gt;&lt;option&gt;Reverted&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;text&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;button class=&quot;btn-add-row&quot; onclick=&quot;addRow(this)&quot;&gt;+&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;
              
              &lt;tr&gt;&lt;td&gt;Fire Policy&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;select&gt;&lt;option&gt;Pending&lt;/option&gt;&lt;option&gt;Submitted&lt;/option&gt;&lt;option&gt;Approved&lt;/option&gt;&lt;option&gt;Reverted&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;text&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;button class=&quot;btn-add-row&quot; onclick=&quot;addRow(this)&quot;&gt;+&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;
              
              &lt;tr&gt;&lt;td&gt;Camp Office – Copy of Lease/Rent Deed/Conveyance Deed.&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;select&gt;&lt;option&gt;Pending&lt;/option&gt;&lt;option&gt;Submitted&lt;/option&gt;&lt;option&gt;Approved&lt;/option&gt;&lt;option&gt;Reverted&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;text&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;button class=&quot;btn-add-row&quot; onclick=&quot;addRow(this)&quot;&gt;+&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;
              
              &lt;tr&gt;&lt;td&gt;Availability of infrastructure like electricity, water, fuel etc. i.e., Bill copies&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;select&gt;&lt;option&gt;Pending&lt;/option&gt;&lt;option&gt;Submitted&lt;/option&gt;&lt;option&gt;Approved&lt;/option&gt;&lt;option&gt;Reverted&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;text&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;button class=&quot;btn-add-row&quot; onclick=&quot;addRow(this)&quot;&gt;+&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;
              
              &lt;tr&gt;&lt;td&gt;Insurance of assets mobilised site.&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;select&gt;&lt;option&gt;Pending&lt;/option&gt;&lt;option&gt;Submitted&lt;/option&gt;&lt;option&gt;Approved&lt;/option&gt;&lt;option&gt;Reverted&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;text&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;button class=&quot;btn-add-row&quot; onclick=&quot;addRow(this)&quot;&gt;+&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;
              
              &lt;tr&gt;&lt;td&gt;Comprehensive project risk policy (Natural calamities)&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;select&gt;&lt;option&gt;Pending&lt;/option&gt;&lt;option&gt;Submitted&lt;/option&gt;&lt;option&gt;Approved&lt;/option&gt;&lt;option&gt;Reverted&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;text&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;button class=&quot;btn-add-row&quot; onclick=&quot;addRow(this)&quot;&gt;+&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;
              
              &lt;tr&gt;&lt;td&gt;Comprehensive workman insurance Policy.&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;select&gt;&lt;option&gt;Pending&lt;/option&gt;&lt;option&gt;Submitted&lt;/option&gt;&lt;option&gt;Approved&lt;/option&gt;&lt;option&gt;Reverted&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;text&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;button class=&quot;btn-add-row&quot; onclick=&quot;addRow(this)&quot;&gt;+&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;
              
          
          &lt;/tbody&gt;
        &lt;/table&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;div class=&quot;section&quot;&gt;
        &lt;h3&gt;5. Material Approval&lt;/h3&gt;
    &lt;div class=&quot;table-wrapper&quot;&gt;
        &lt;table id=&quot;table_4&quot;&gt;
            &lt;thead&gt;&lt;tr&gt;&lt;th&gt;Material&lt;/th&gt;&lt;th&gt;Sub. Date&lt;/th&gt;&lt;th&gt;Rem. Date&lt;/th&gt;&lt;th&gt;Status&lt;/th&gt;&lt;th&gt;Remarks&lt;/th&gt;&lt;th&gt;Action&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;
            &lt;tbody&gt;
              
              &lt;tr&gt;&lt;td&gt;Aggregates&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;select&gt;&lt;option&gt;Pending&lt;/option&gt;&lt;option&gt;Submitted&lt;/option&gt;&lt;option&gt;Approved&lt;/option&gt;&lt;option&gt;Reverted&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;text&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;button class=&quot;btn-add-row&quot; onclick=&quot;addRow(this)&quot;&gt;+&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;
              
              &lt;tr&gt;&lt;td&gt;Soil&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;select&gt;&lt;option&gt;Pending&lt;/option&gt;&lt;option&gt;Submitted&lt;/option&gt;&lt;option&gt;Approved&lt;/option&gt;&lt;option&gt;Reverted&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;text&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;button class=&quot;btn-add-row&quot; onclick=&quot;addRow(this)&quot;&gt;+&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;
              
              &lt;tr&gt;&lt;td&gt;Fly Ash&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;select&gt;&lt;option&gt;Pending&lt;/option&gt;&lt;option&gt;Submitted&lt;/option&gt;&lt;option&gt;Approved&lt;/option&gt;&lt;option&gt;Reverted&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;text&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;button class=&quot;btn-add-row&quot; onclick=&quot;addRow(this)&quot;&gt;+&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;
              
              &lt;tr&gt;&lt;td&gt;Cement&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;select&gt;&lt;option&gt;Pending&lt;/option&gt;&lt;option&gt;Submitted&lt;/option&gt;&lt;option&gt;Approved&lt;/option&gt;&lt;option&gt;Reverted&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;text&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;button class=&quot;btn-add-row&quot; onclick=&quot;addRow(this)&quot;&gt;+&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;
              
              &lt;tr&gt;&lt;td&gt;Steel&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;select&gt;&lt;option&gt;Pending&lt;/option&gt;&lt;option&gt;Submitted&lt;/option&gt;&lt;option&gt;Approved&lt;/option&gt;&lt;option&gt;Reverted&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;text&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;button class=&quot;btn-add-row&quot; onclick=&quot;addRow(this)&quot;&gt;+&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;
              
              &lt;tr&gt;&lt;td&gt;Bitumen&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;select&gt;&lt;option&gt;Pending&lt;/option&gt;&lt;option&gt;Submitted&lt;/option&gt;&lt;option&gt;Approved&lt;/option&gt;&lt;option&gt;Reverted&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;text&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;button class=&quot;btn-add-row&quot; onclick=&quot;addRow(this)&quot;&gt;+&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;
              
              &lt;tr&gt;&lt;td&gt;GSB&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;select&gt;&lt;option&gt;Pending&lt;/option&gt;&lt;option&gt;Submitted&lt;/option&gt;&lt;option&gt;Approved&lt;/option&gt;&lt;option&gt;Reverted&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;text&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;button class=&quot;btn-add-row&quot; onclick=&quot;addRow(this)&quot;&gt;+&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;
              
              &lt;tr&gt;&lt;td&gt;WMM&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;select&gt;&lt;option&gt;Pending&lt;/option&gt;&lt;option&gt;Submitted&lt;/option&gt;&lt;option&gt;Approved&lt;/option&gt;&lt;option&gt;Reverted&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;text&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;button class=&quot;btn-add-row&quot; onclick=&quot;addRow(this)&quot;&gt;+&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;
              
              &lt;tr&gt;&lt;td&gt;GGBS&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;select&gt;&lt;option&gt;Pending&lt;/option&gt;&lt;option&gt;Submitted&lt;/option&gt;&lt;option&gt;Approved&lt;/option&gt;&lt;option&gt;Reverted&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;text&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;button class=&quot;btn-add-row&quot; onclick=&quot;addRow(this)&quot;&gt;+&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;
              
              &lt;tr&gt;&lt;td&gt;Admixture 1&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;select&gt;&lt;option&gt;Pending&lt;/option&gt;&lt;option&gt;Submitted&lt;/option&gt;&lt;option&gt;Approved&lt;/option&gt;&lt;option&gt;Reverted&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;text&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;button class=&quot;btn-add-row&quot; onclick=&quot;addRow(this)&quot;&gt;+&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;
              
              &lt;tr&gt;&lt;td&gt;Admixture 2&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;select&gt;&lt;option&gt;Pending&lt;/option&gt;&lt;option&gt;Submitted&lt;/option&gt;&lt;option&gt;Approved&lt;/option&gt;&lt;option&gt;Reverted&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;text&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;button class=&quot;btn-add-row&quot; onclick=&quot;addRow(this)&quot;&gt;+&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;
              
              &lt;tr&gt;&lt;td&gt;Water&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;select&gt;&lt;option&gt;Pending&lt;/option&gt;&lt;option&gt;Submitted&lt;/option&gt;&lt;option&gt;Approved&lt;/option&gt;&lt;option&gt;Reverted&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;text&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;button class=&quot;btn-add-row&quot; onclick=&quot;addRow(this)&quot;&gt;+&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;
              
              &lt;tr&gt;&lt;td&gt;Hume Pipe/Arcoduct&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;select&gt;&lt;option&gt;Pending&lt;/option&gt;&lt;option&gt;Submitted&lt;/option&gt;&lt;option&gt;Approved&lt;/option&gt;&lt;option&gt;Reverted&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;text&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;button class=&quot;btn-add-row&quot; onclick=&quot;addRow(this)&quot;&gt;+&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;
              
              &lt;tr&gt;&lt;td&gt;Bituminous Mix Designs&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;select&gt;&lt;option&gt;Pending&lt;/option&gt;&lt;option&gt;Submitted&lt;/option&gt;&lt;option&gt;Approved&lt;/option&gt;&lt;option&gt;Reverted&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;text&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;button class=&quot;btn-add-row&quot; onclick=&quot;addRow(this)&quot;&gt;+&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;
              
              &lt;tr&gt;&lt;td&gt;Concrete Mix Designs&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;select&gt;&lt;option&gt;Pending&lt;/option&gt;&lt;option&gt;Submitted&lt;/option&gt;&lt;option&gt;Approved&lt;/option&gt;&lt;option&gt;Reverted&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;text&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;button class=&quot;btn-add-row&quot; onclick=&quot;addRow(this)&quot;&gt;+&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;
              
              &lt;tr&gt;&lt;td&gt;Trial Patch&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;select&gt;&lt;option&gt;Pending&lt;/option&gt;&lt;option&gt;Submitted&lt;/option&gt;&lt;option&gt;Approved&lt;/option&gt;&lt;option&gt;Reverted&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;text&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;button class=&quot;btn-add-row&quot; onclick=&quot;addRow(this)&quot;&gt;+&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;
              
              &lt;tr&gt;&lt;td&gt;CTE and CTO (All Plants and Crushers)&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;select&gt;&lt;option&gt;Pending&lt;/option&gt;&lt;option&gt;Submitted&lt;/option&gt;&lt;option&gt;Approved&lt;/option&gt;&lt;option&gt;Reverted&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;text&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;button class=&quot;btn-add-row&quot; onclick=&quot;addRow(this)&quot;&gt;+&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;
          
          
          &lt;/tbody&gt;
        &lt;/table&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;div class=&quot;section&quot;&gt;
        &lt;h3&gt;6. Details of site mobilization including details of base camp, list of construction equipment, Manpower to be deployed etc.&lt;/h3&gt;
    &lt;div class=&quot;table-wrapper&quot;&gt;
        &lt;table id=&quot;table_5&quot;&gt;
            &lt;thead&gt;&lt;tr&gt;&lt;th&gt;Mobilization&lt;/th&gt;&lt;th&gt;Sub. Date&lt;/th&gt;&lt;th&gt;Rem. Date&lt;/th&gt;&lt;th&gt;Status&lt;/th&gt;&lt;th&gt;Remarks&lt;/th&gt;&lt;th&gt;Action&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;
            &lt;tbody&gt;
              
              &lt;tr&gt;&lt;td&gt;Ready Mix Plant&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;select&gt;&lt;option&gt;Pending&lt;/option&gt;&lt;option&gt;Submitted&lt;/option&gt;&lt;option&gt;Approved&lt;/option&gt;&lt;option&gt;Reverted&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;text&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;button class=&quot;btn-add-row&quot; onclick=&quot;addRow(this)&quot;&gt;+&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;
              
              &lt;tr&gt;&lt;td&gt;Batch mix Plant&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;select&gt;&lt;option&gt;Pending&lt;/option&gt;&lt;option&gt;Submitted&lt;/option&gt;&lt;option&gt;Approved&lt;/option&gt;&lt;option&gt;Reverted&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;text&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;button class=&quot;btn-add-row&quot; onclick=&quot;addRow(this)&quot;&gt;+&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;
              
              &lt;tr&gt;&lt;td&gt;Drum mix Plant&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;select&gt;&lt;option&gt;Pending&lt;/option&gt;&lt;option&gt;Submitted&lt;/option&gt;&lt;option&gt;Approved&lt;/option&gt;&lt;option&gt;Reverted&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;text&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;button class=&quot;btn-add-row&quot; onclick=&quot;addRow(this)&quot;&gt;+&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;
              
              &lt;tr&gt;&lt;td&gt;Crusher&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;select&gt;&lt;option&gt;Pending&lt;/option&gt;&lt;option&gt;Submitted&lt;/option&gt;&lt;option&gt;Approved&lt;/option&gt;&lt;option&gt;Reverted&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;text&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;button class=&quot;btn-add-row&quot; onclick=&quot;addRow(this)&quot;&gt;+&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;
              
              &lt;tr&gt;&lt;td&gt;Lab Setup&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;select&gt;&lt;option&gt;Pending&lt;/option&gt;&lt;option&gt;Submitted&lt;/option&gt;&lt;option&gt;Approved&lt;/option&gt;&lt;option&gt;Reverted&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;text&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;button class=&quot;btn-add-row&quot; onclick=&quot;addRow(this)&quot;&gt;+&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;
              
              &lt;tr&gt;&lt;td&gt;Calbration Certificate&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;select&gt;&lt;option&gt;Pending&lt;/option&gt;&lt;option&gt;Submitted&lt;/option&gt;&lt;option&gt;Approved&lt;/option&gt;&lt;option&gt;Reverted&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;text&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;button class=&quot;btn-add-row&quot; onclick=&quot;addRow(this)&quot;&gt;+&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;
              
              &lt;tr&gt;&lt;td&gt;Machinery&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;select&gt;&lt;option&gt;Pending&lt;/option&gt;&lt;option&gt;Submitted&lt;/option&gt;&lt;option&gt;Approved&lt;/option&gt;&lt;option&gt;Reverted&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;text&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;button class=&quot;btn-add-row&quot; onclick=&quot;addRow(this)&quot;&gt;+&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;
              
              &lt;tr&gt;&lt;td&gt;Manpower&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;select&gt;&lt;option&gt;Pending&lt;/option&gt;&lt;option&gt;Submitted&lt;/option&gt;&lt;option&gt;Approved&lt;/option&gt;&lt;option&gt;Reverted&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;text&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;button class=&quot;btn-add-row&quot; onclick=&quot;addRow(this)&quot;&gt;+&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;
              
              &lt;tr&gt;&lt;td&gt;Camp Office – Copy of Lease/Rent Deed/Conveyance Deed.&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;select&gt;&lt;option&gt;Pending&lt;/option&gt;&lt;option&gt;Submitted&lt;/option&gt;&lt;option&gt;Approved&lt;/option&gt;&lt;option&gt;Reverted&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;text&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;button class=&quot;btn-add-row&quot; onclick=&quot;addRow(this)&quot;&gt;+&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;
          
          &lt;/tbody&gt;
        &lt;/table&gt;
    &lt;/div&gt;
    &lt;/div&gt;
  
&lt;/div&gt;
  
  &lt;div class=&quot;article-container&quot; style=&quot;max-width:1000px; margin:auto; font-family:Segoe UI; line-height:1.6; color:#1e293b;&quot;&gt;

    &lt;h1 style=&quot;text-align:center; color:#1d4ed8;&quot;&gt;EPC Project Monitoring &amp; Management Tool&lt;/h1&gt;

    &lt;p&gt;
        This advanced &lt;b&gt;HTML + JavaScript based Project Monitoring Tool&lt;/b&gt; is designed for 
        &lt;b&gt;Engineering, Procurement, and Construction (EPC)&lt;/b&gt; projects, particularly suited for 
        &lt;b&gt;PWD / Highway / Infrastructure Projects&lt;/b&gt;. It provides a structured, database-driven 
        interface to manage project data, track submissions, monitor approvals, and generate reports.
    &lt;/p&gt;

    &lt;hr&gt;

    &lt;h2&gt;🔷 Key Features&lt;/h2&gt;
    &lt;ul&gt;
        &lt;li&gt;📂 Project storage using &lt;b&gt;IndexedDB (Browser Database)&lt;/b&gt;&lt;/li&gt;
        &lt;li&gt;📊 Multi-section compliance tracking (6 structured tables)&lt;/li&gt;
        &lt;li&gt;📥 JSON Import &amp; 📤 JSON Backup system&lt;/li&gt;
        &lt;li&gt;📄 One-click CSV report generation&lt;/li&gt;
        &lt;li&gt;➕ Dynamic row addition &amp; deletion&lt;/li&gt;
        &lt;li&gt;⚡ Real-time variation calculation (Estimate vs Tender)&lt;/li&gt;
        &lt;li&gt;🧠 Fully client-side (No server required)&lt;/li&gt;
    &lt;/ul&gt;

    &lt;hr&gt;

    &lt;h2&gt;1. Project Database Management&lt;/h2&gt;
    &lt;p&gt;
        The tool uses &lt;b&gt;IndexedDB&lt;/b&gt; to store multiple projects locally in the browser.
    &lt;/p&gt;
    &lt;ul&gt;
        &lt;li&gt;&lt;b&gt;Select Project:&lt;/b&gt; Load saved project from dropdown&lt;/li&gt;
        &lt;li&gt;&lt;b&gt;Save to DB:&lt;/b&gt; Stores complete project including all tables&lt;/li&gt;
        &lt;li&gt;&lt;b&gt;Delete Project:&lt;/b&gt; Permanently removes project data&lt;/li&gt;
        &lt;li&gt;&lt;b&gt;Refresh/New:&lt;/b&gt; Clears screen for new entry&lt;/li&gt;
    &lt;/ul&gt;

    &lt;p&gt;
        Each project is uniquely identified using &lt;b&gt;Project Name as Key&lt;/b&gt;.
    &lt;/p&gt;

    &lt;hr&gt;

    &lt;h2&gt;2. Primary Project Details&lt;/h2&gt;
    &lt;p&gt;
        This section captures essential project metadata required for reporting and tracking:
    &lt;/p&gt;

    &lt;ul&gt;
        &lt;li&gt;Project Name&lt;/li&gt;
        &lt;li&gt;Road Length (km)&lt;/li&gt;
        &lt;li&gt;Administrative Approval Cost (AA Cost)&lt;/li&gt;
        &lt;li&gt;Appointment Date&lt;/li&gt;
        &lt;li&gt;Estimate Cost vs Accepted Tender&lt;/li&gt;
        &lt;li&gt;Work Period&lt;/li&gt;
        &lt;li&gt;Contractor &amp; Authority Engineer&lt;/li&gt;
    &lt;/ul&gt;

    &lt;h3&gt;📊 Variation Calculation&lt;/h3&gt;
    &lt;p&gt;
        The tool automatically calculates variation using:
    &lt;/p&gt;

    &lt;pre style=&quot;background:#f1f5f9; padding:10px;&quot;&gt;
Variation (%) = ((Tender - Estimate) / Estimate) × 100
    &lt;/pre&gt;

    &lt;p&gt;
        Output indicates whether the tender is &lt;b&gt;Above&lt;/b&gt; or &lt;b&gt;Below&lt;/b&gt; the estimate.
    &lt;/p&gt;

    &lt;hr&gt;

    &lt;h2&gt;3. Structured Monitoring Tables&lt;/h2&gt;
    &lt;p&gt;
        The system is divided into &lt;b&gt;6 major monitoring sections&lt;/b&gt;, each representing a critical
        EPC compliance domain.
    &lt;/p&gt;

    &lt;h3&gt;📁 Sections Included:&lt;/h3&gt;
    &lt;ol&gt;
        &lt;li&gt;&lt;b&gt;Consultants &amp; Personnel&lt;/b&gt;&lt;/li&gt;
        &lt;li&gt;&lt;b&gt;Mandatory Submissions&lt;/b&gt;&lt;/li&gt;
        &lt;li&gt;&lt;b&gt;Engineering Documents&lt;/b&gt;&lt;/li&gt;
        &lt;li&gt;&lt;b&gt;Statutory Approvals&lt;/b&gt;&lt;/li&gt;
        &lt;li&gt;&lt;b&gt;Material Approvals&lt;/b&gt;&lt;/li&gt;
        &lt;li&gt;&lt;b&gt;Site Mobilization&lt;/b&gt;&lt;/li&gt;
    &lt;/ol&gt;

    &lt;h3&gt;📌 Table Structure&lt;/h3&gt;
    &lt;p&gt;Each table follows a standardized format:&lt;/p&gt;

    &lt;ul&gt;
        &lt;li&gt;Description&lt;/li&gt;
        &lt;li&gt;Submission Date&lt;/li&gt;
        &lt;li&gt;Remark Date&lt;/li&gt;
        &lt;li&gt;Status (Pending / Submitted / Approved / Reverted)&lt;/li&gt;
        &lt;li&gt;Remarks&lt;/li&gt;
    &lt;/ul&gt;

    &lt;h3&gt;➕ Dynamic Row Feature&lt;/h3&gt;
    &lt;ul&gt;
        &lt;li&gt;Add unlimited rows using &lt;b&gt;+&lt;/b&gt; button&lt;/li&gt;
        &lt;li&gt;Delete rows using &lt;b&gt;🗑️&lt;/b&gt; button&lt;/li&gt;
        &lt;li&gt;Ensures flexible project tracking&lt;/li&gt;
    &lt;/ul&gt;

    &lt;hr&gt;

    &lt;h2&gt;4. Data Persistence Logic&lt;/h2&gt;

    &lt;h3&gt;💾 Save Function&lt;/h3&gt;
    &lt;p&gt;
        The &lt;b&gt;saveToDB()&lt;/b&gt; function:
    &lt;/p&gt;
    &lt;ul&gt;
        &lt;li&gt;Collects all input values&lt;/li&gt;
        &lt;li&gt;Loops through all 6 tables (table_0 to table_5)&lt;/li&gt;
        &lt;li&gt;Stores structured array data in IndexedDB&lt;/li&gt;
    &lt;/ul&gt;

    &lt;h3&gt;📂 Load Function&lt;/h3&gt;
    &lt;p&gt;
        The &lt;b&gt;loadSelectedProject()&lt;/b&gt; function:
    &lt;/p&gt;
    &lt;ul&gt;
        &lt;li&gt;Retrieves project data&lt;/li&gt;
        &lt;li&gt;Populates form fields&lt;/li&gt;
        &lt;li&gt;Dynamically rebuilds all tables&lt;/li&gt;
    &lt;/ul&gt;

    &lt;hr&gt;

    &lt;h2&gt;5. Import &amp; Backup System&lt;/h2&gt;

    &lt;h3&gt;📥 Import JSON&lt;/h3&gt;
    &lt;ul&gt;
        &lt;li&gt;Upload previously exported backup file&lt;/li&gt;
        &lt;li&gt;Automatically merges projects into database&lt;/li&gt;
    &lt;/ul&gt;

    &lt;h3&gt;📤 Export JSON Backup&lt;/h3&gt;
    &lt;ul&gt;
        &lt;li&gt;Exports all projects in structured JSON format&lt;/li&gt;
        &lt;li&gt;Filename includes current date&lt;/li&gt;
        &lt;li&gt;Ensures data portability &amp; backup safety&lt;/li&gt;
    &lt;/ul&gt;

    &lt;hr&gt;

    &lt;h2&gt;6. CSV Report Generation&lt;/h2&gt;
    &lt;p&gt;
        The &lt;b&gt;Export CSV&lt;/b&gt; feature generates a complete project monitoring report:
    &lt;/p&gt;

    &lt;ul&gt;
        &lt;li&gt;Includes project summary&lt;/li&gt;
        &lt;li&gt;Exports all 6 sections&lt;/li&gt;
        &lt;li&gt;Each table becomes a structured section&lt;/li&gt;
        &lt;li&gt;Compatible with Excel&lt;/li&gt;
    &lt;/ul&gt;

    &lt;p&gt;
        Special handling ensures:
    &lt;/p&gt;
    &lt;ul&gt;
        &lt;li&gt;Commas inside text are safely managed&lt;/li&gt;
        &lt;li&gt;Each row is exported as a single clean line&lt;/li&gt;
    &lt;/ul&gt;

    &lt;hr&gt;

    &lt;h2&gt;7. Status Tracking System&lt;/h2&gt;
    &lt;p&gt;
        Each activity is tracked through lifecycle stages:
    &lt;/p&gt;

    &lt;ul&gt;
        &lt;li&gt;⏳ Pending&lt;/li&gt;
        &lt;li&gt;📤 Submitted&lt;/li&gt;
        &lt;li&gt;✅ Approved&lt;/li&gt;
        &lt;li&gt;🔁 Reverted&lt;/li&gt;
    &lt;/ul&gt;

    &lt;p&gt;
        This enables real-time monitoring of project compliance and delays.
    &lt;/p&gt;

    &lt;hr&gt;

    &lt;h2&gt;8. Technical Architecture&lt;/h2&gt;

    &lt;ul&gt;
        &lt;li&gt;&lt;b&gt;Frontend:&lt;/b&gt; HTML + CSS&lt;/li&gt;
        &lt;li&gt;&lt;b&gt;Logic:&lt;/b&gt; Vanilla JavaScript&lt;/li&gt;
        &lt;li&gt;&lt;b&gt;Database:&lt;/b&gt; IndexedDB (Client-side)&lt;/li&gt;
        &lt;li&gt;&lt;b&gt;File Handling:&lt;/b&gt; Blob API + FileReader&lt;/li&gt;
    &lt;/ul&gt;

    &lt;hr&gt;

    &lt;h2&gt;9. Advantages&lt;/h2&gt;

    &lt;ul&gt;
        &lt;li&gt;✔ No internet required (Offline tool)&lt;/li&gt;
        &lt;li&gt;✔ No installation needed&lt;/li&gt;
        &lt;li&gt;✔ Highly customizable&lt;/li&gt;
        &lt;li&gt;✔ Suitable for site engineers &amp; project managers&lt;/li&gt;
        &lt;li&gt;✔ Eliminates manual tracking in Excel&lt;/li&gt;
    &lt;/ul&gt;

&lt;/div&gt;

&lt;script&gt;
const DB_NAME = &quot;PWD_EPC_STORE&quot;;
const STORE = &quot;projects&quot;; 
let db;

const req = indexedDB.open(DB_NAME, 1);
req.onupgradeneeded = (e) =&gt; {
    e.target.result.createObjectStore(STORE, { keyPath: &quot;projectName&quot; });
};
req.onsuccess = (e) =&gt; { db = e.target.result; updateDropdown(); };

// FIX: Scanning by ID instead of general querySelectorAll
async function saveToDB() {
    if (!db) return alert(&quot;Database initializing...&quot;);
    const name = document.getElementById(&#39;projectName&#39;).value.trim();
    if (!name) return alert(&quot;Please enter a Project Name first.&quot;);

    const data = {
        projectName: name,
        roadLength: document.getElementById(&#39;roadLength&#39;).value,
        aacost: document.getElementById(&#39;aacost&#39;).value,
        appointment: document.getElementById(&#39;appointment&#39;).value,
        estimate: document.getElementById(&#39;estimate&#39;).value,
        tender: document.getElementById(&#39;tender&#39;).value,
        period: document.getElementById(&#39;period&#39;).value,
        variation: document.getElementById(&#39;variation&#39;).value,
        contractor: document.getElementById(&#39;contractor&#39;).value, 
        ae: document.getElementById(&#39;ae&#39;).value,
        tables: []
    };

    // Explicitly loop through Table IDs 0 to 5 to ensure Mobilization (5) is included
    for (let i = 0; i &lt;= 5; i++) {
        const table = document.getElementById(`table_${i}`);
        const rows = [];
        if (table) {
            table.querySelectorAll(&#39;tbody tr&#39;).forEach(tr =&gt; {
                const cells = tr.querySelectorAll(&#39;td&#39;);
                if(cells.length &gt;= 5) {
                    rows.push([
                        cells[0].innerText.trim(),
                        cells[1].querySelector(&#39;input&#39;).value,
                        cells[2].querySelector(&#39;input&#39;).value,
                        cells[3].querySelector(&#39;select&#39;).value,
                        cells[4].querySelector(&#39;input&#39;).value
                    ]);
                }
            });
        }
        data.tables.push(rows);
    }

    const tx = db.transaction(STORE, &quot;readwrite&quot;);
    tx.objectStore(STORE).put(data);
    tx.oncomplete = () =&gt; {
        alert(&quot;Success: All 6 tables saved to Database.&quot;);
        updateDropdown();
    };
}
  
  
// Ensure the loader handles all tables correctly
function loadSelectedProject() {
    const name = document.getElementById(&#39;projectSelector&#39;).value;
    if (!name) return;

    const tx = db.transaction(STORE, &quot;readonly&quot;);
    const request = tx.objectStore(STORE).get(name);

    request.onsuccess = () =&gt; {
        const data = request.result;
        if (!data) return;

        // Populate Primary Details
        document.getElementById(&#39;projectName&#39;).value = data.projectName || &quot;&quot;;
        document.getElementById(&#39;roadLength&#39;).value = data.roadLength || &quot;&quot;;
        document.getElementById(&#39;aacost&#39;).value = data.aacost || &quot;&quot;;
        document.getElementById(&#39;appointment&#39;).value = data.appointment || &quot;&quot;;
        document.getElementById(&#39;estimate&#39;).value = data.estimate || &quot;&quot;;
        document.getElementById(&#39;tender&#39;).value = data.tender || &quot;&quot;;
        document.getElementById(&#39;period&#39;).value = data.period || &quot;&quot;;
        document.getElementById(&#39;variation&#39;).value = data.variation || &quot;&quot;;
        document.getElementById(&#39;contractor&#39;).value = data.contractor || &quot;&quot;;
        document.getElementById(&#39;ae&#39;).value = data.ae || &quot;&quot;;

        // Populate All 6 Tables (0 to 5)
        if (data.tables &amp;&amp; Array.isArray(data.tables)) {
            data.tables.forEach((tableData, idx) =&gt; {
                const table = document.getElementById(`table_${idx}`);
                if (!table) return;

                const tbody = table.querySelector(&#39;tbody&#39;);
                // Use a default row structure if the table is currently empty
                const rowHtml = `&lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;date&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;select&gt;&lt;option&gt;Pending&lt;/option&gt;&lt;option&gt;Submitted&lt;/option&gt;&lt;option&gt;Approved&lt;/option&gt;&lt;option&gt;Reverted&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;text&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;`;
                
                tbody.innerHTML = &quot;&quot;; // Clear current UI rows
                
                tableData.forEach(rowData =&gt; {
                    const tr = document.createElement(&#39;tr&#39;);
                    tr.innerHTML = rowHtml;
                    const c = tr.querySelectorAll(&#39;td&#39;);
                    
                    // Fill the row with saved data
                    c[0].innerText = rowData[0] || &quot;&quot;;
                    c[1].querySelector(&#39;input&#39;).value = rowData[1] || &quot;&quot;;
                    c[2].querySelector(&#39;input&#39;).value = rowData[2] || &quot;&quot;;
                    c[3].querySelector(&#39;select&#39;).value = rowData[3] || &quot;Pending&quot;;
                    c[4].querySelector(&#39;input&#39;).value = rowData[4] || &quot;&quot;;
                    
                    // Add the +/- buttons back to the last cell
                    attachDeleteRow(c[5]);
                    tbody.appendChild(tr);
                });
            });
        }
    };
}

function deleteProject() {
    const name = document.getElementById(&#39;projectSelector&#39;).value;
    if (name &amp;&amp; confirm(`Delete ${name}?`)) {
        const tx = db.transaction(STORE, &quot;readwrite&quot;);
        tx.objectStore(STORE).delete(name);
        tx.oncomplete = () =&gt; location.reload();
    }
}

function exportToCSV() {
    // 1. Get Primary Details from the screen
    const name = document.getElementById(&#39;projectName&#39;).value || &quot;Project_Report&quot;;
    const contractor = document.getElementById(&#39;contractor&#39;).value || &quot;N/A&quot;;
    const ae = document.getElementById(&#39;ae&#39;).value || &quot;N/A&quot;;
    const length = document.getElementById(&#39;roadLength&#39;).value || &quot;0&quot;;

    // 2. Start CSV Content
    let csv = `EPC PROJECT MONITORING REPORT\n`;
    csv += `Project Name,${name.replace(/,/g, &quot; &quot;)}\n`;
    csv += `Contractor,${contractor.replace(/,/g, &quot; &quot;)}\n`;
    csv += `Authority Engineer,${ae.replace(/,/g, &quot; &quot;)}\n`;
    csv += `Length (km),${length}\n\n`;

    // 3. Loop through all tables
    document.querySelectorAll(&#39;table&#39;).forEach((table) =&gt; {
        // Try to find the section title (h3) above the table
        const sectionTitle = table.closest(&#39;.section&#39;) ? table.closest(&#39;.section&#39;).querySelector(&#39;h3&#39;).innerText : &quot;Section&quot;;
        csv += `${sectionTitle}\n`;
        csv += &quot;Description,Submission Date,Remark Date,Status,Remarks\n&quot;;

        table.querySelectorAll(&#39;tbody tr&#39;).forEach(tr =&gt; {
            const cells = tr.querySelectorAll(&#39;td&#39;);
            if (cells.length &gt;= 5) {
                const row = [
                    `&quot;${cells[0].innerText.trim()}&quot;`, // Description (handles commas)
                    cells[1].querySelector(&#39;input&#39;) ? cells[1].querySelector(&#39;input&#39;).value : &quot;&quot;,
                    cells[2].querySelector(&#39;input&#39;) ? cells[2].querySelector(&#39;input&#39;).value : &quot;&quot;,
                    cells[3].querySelector(&#39;select&#39;) ? cells[3].querySelector(&#39;select&#39;).value : &quot;&quot;,
                    `&quot;${cells[4].querySelector(&#39;input&#39;) ? cells[4].querySelector(&#39;input&#39;).value : &quot;&quot;}&quot;` // Remarks
                ];
                csv += row.join(&quot;,&quot;) + &quot;\n&quot;;
            }
        });
        csv += &quot;\n&quot;; // Space between sections
    });

    // 4. Create and Trigger Download
    const blob = new Blob([csv], { type: &#39;text/csv;charset=utf-8;&#39; });
    const link = document.createElement(&quot;a&quot;);
    const url = URL.createObjectURL(blob);
    
    link.setAttribute(&quot;href&quot;, url);
    link.setAttribute(&quot;download&quot;, `${name.replace(/\s+/g, &#39;_&#39;)}_Monitor.csv`);
    link.style.visibility = &#39;hidden&#39;;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
}

function exportJSONBackup() {
    const tx = db.transaction(STORE, &quot;readonly&quot;);
    const request = tx.objectStore(STORE).getAll();

    request.onsuccess = () =&gt; {
        // 1. Get the current date (YYYY-MM-DD)
        const date = new Date().toISOString().split(&#39;T&#39;)[0];
        const fileName = `EPC projects status obligation dated ${date}.json`;

        const allData = {};
        request.result.forEach(proj =&gt; allData[proj.projectName] = proj);

        // 2. Create the blob and link
        const blob = new Blob([JSON.stringify(allData, null, 2)], { type: &#39;application/json&#39; });
        const url = URL.createObjectURL(blob);
        
        const a = document.createElement(&#39;a&#39;);
        a.href = url;
        a.download = fileName; // Applies your new naming convention

        // 3. Trigger and cleanup
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
        URL.revokeObjectURL(url);
    };
}

function importJSON(e) {
    const reader = new FileReader();
    reader.onload = (ev) =&gt; {
        try {
            const data = JSON.parse(ev.target.result);
            const tx = db.transaction(STORE, &quot;readwrite&quot;);
            const store = tx.objectStore(STORE);

            for (let key in data) {
                store.put(data[key]);
            }

            tx.oncomplete = () =&gt; {
                alert(&quot;Imported successfully! Please select the project from the dropdown to load tables.&quot;);
                updateDropdown(); // Refresh the list so the new project appears
            };
        } catch (err) {
            alert(&quot;Error parsing JSON file. Please ensure it is a valid backup.&quot;);
        }
    };
    reader.readAsText(e.target.files[0]);
}

function addRow(btn) {
    const row = btn.closest(&#39;tr&#39;);
    const newRow = row.cloneNode(true);
    newRow.querySelectorAll(&#39;input&#39;).forEach(i =&gt; i.value = &quot;&quot;);
    attachDeleteRow(newRow.querySelectorAll(&#39;td&#39;)[5]);
    row.after(newRow);
}

function attachDeleteRow(cell) {
    cell.innerHTML = &#39;&lt;button class=&quot;btn-add-row&quot; onclick=&quot;addRow(this)&quot;&gt;+&lt;/button&gt;&#39;;
    const del = document.createElement(&#39;button&#39;);
    del.innerHTML = &quot;🗑️&quot;;
    del.className = &quot;btn-del-row&quot;;
    del.onclick = function() { if(this.closest(&#39;tbody&#39;).rows.length &gt; 1) this.closest(&#39;tr&#39;).remove(); };
    cell.appendChild(del);
}

function updateDropdown() {
    const sel = document.getElementById(&#39;projectSelector&#39;);
    const tx = db.transaction(STORE, &quot;readonly&quot;);
    const request = tx.objectStore(STORE).getAllKeys();
    request.onsuccess = () =&gt; {
        sel.innerHTML = &#39;&lt;option value=&quot;&quot;&gt;-- Select Project --&lt;/option&gt;&#39;;
        request.result.forEach(k =&gt; sel.innerHTML += `&lt;option value=&quot;${k}&quot;&gt;${k}&lt;/option&gt;`);
    };
}

function calculateVariation() {
    const e = parseFloat(document.getElementById(&#39;estimate&#39;).value) || 0;
    const t = parseFloat(document.getElementById(&#39;tender&#39;).value) || 0;
    if (e &gt; 0) {
        const diff = ((t - e) / e) * 100;
        document.getElementById(&#39;variation&#39;).value = diff.toFixed(2) + &quot;% &quot; + (diff &gt;= 0 ? &quot;Above&quot; : &quot;Below&quot;);
    }
}

// Initialize delete buttons for first load
document.querySelectorAll(&#39;table tbody tr&#39;).forEach(tr =&gt; attachDeleteRow(tr.querySelectorAll(&#39;td&#39;)[5]));
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;&lt;div class=&quot;blogger-post-footer&quot;&gt;https://yogipwd.blogspot.com/&lt;/div&gt;</description><link>https://www.yogipwd.com/2026/03/epc-projects-status-obligation.html</link><author>noreply@blogger.com (Yogendra)</author><thr:total>0</thr:total></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-1074964965522467583.post-540950427102000529</guid><pubDate>Tue, 10 Mar 2026 06:54:00 +0000</pubDate><atom:updated>2026-04-07T00:00:22.061+05:30</atom:updated><category domain="http://www.blogger.com/atom/ns#">Estimate Preparation</category><category domain="http://www.blogger.com/atom/ns#">PWD Working</category><category domain="http://www.blogger.com/atom/ns#">Roads</category><category domain="http://www.blogger.com/atom/ns#">Software</category><title>Road Sanctioned length and remaining lengths under various schemes</title><description>&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;title&gt;Road Manager v8.7 | Enhanced Summary&lt;/title&gt;
    &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js&quot;&gt;&lt;/script&gt;
    &lt;style&gt;
        :root {
            --color-03: #007bff;
            --color-04: #28a745;
            --color-Nabard: #6f42c1;
            --color-AMC: #fd7e14;
            --color-DLP: #dc3545;
            --color-HAM: #17a2b8;
            --color-T6: #6610f2;
            --color-SR: #20c997;
            --color-FDR: #e83e8c;
            --color-CRF: #6c757d;
            --color-Kumbh: #ff6f61;
            --color-unknown: #6c757d;
            --color-gap: #dee2e6;
        }
        body { font-family: &#39;Segoe UI&#39;, sans-serif; margin: 20px; background: #f0f2f5; }
        .container { max-width: 1300px; margin: auto; background: white; padding: 25px; border-radius: 12px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
        .main-grid { display: grid; grid-template-columns: 380px 1fr; gap: 24px; }
        .sidebar { background: #fff; padding: 18px; border-radius: 10px; border: 1px solid #ddd; position: sticky; top: 20px; height: fit-content; }
       
        .summary-box {
            background: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 8px;
            padding: 14px 16px;
            margin-bottom: 16px;
            font-size: 13.5px;
            line-height: 1.55;
        }
        .summary-box h4 {
            margin: 0 0 10px 0;
            font-size: 15px;
            color: #343a40;
            border-bottom: 1px solid #dee2e6;
            padding-bottom: 6px;
        }
        .summary-row {
            display: flex;
            justify-content: space-between;
            margin: 6px 0;
        }
        .summary-label { font-weight: 500; color: #495057; }
        .summary-value { font-weight: 600; color: #212529; text-align: right; }
        .summary-highlight { color: #c82333; font-weight: 700; }
       
        .bulk-buttons { display: flex; gap: 8px; margin: 12px 0; }
        .bulk-btn { flex: 1; padding: 8px; font-size: 13px; cursor: pointer; border-radius: 6px; border: none; }
        .select-all { background: #28a745; color: white; }
        .deselect-all { background: #6c757d; color: white; }
       
        .road-list { max-height: 460px; overflow-y: auto; border: 1px solid #eee; margin-top: 8px; border-radius: 8px; }
        .road-item { display: flex; align-items: center; padding: 10px; border-bottom: 1px solid #eee; }
        .road-item.selected-for-pdf { background: #d4edda !important; border-left: 6px solid #28a745; }
        .road-item.active-editing { background: #e7f1ff; border-right: 6px solid #007bff; }
       
        .big-check { width: 18px; height: 18px; margin-right: 10px; accent-color: #28a745; cursor: pointer; }
        .action-group { display: flex; gap: 4px; margin-left: auto; }
        .btn-edit { background: #007bff; color: #fff; border: none; padding: 5px 8px; border-radius: 4px; cursor: pointer; font-size: 11px; }
        .btn-del { background: #ff4d4d; color: #fff; border: none; padding: 5px 8px; border-radius: 4px; cursor: pointer; font-size: 11px; }
       
        .chart-box { position: relative; width: 100%; height: 50px; background: #eee; border: 1px solid #ccc; margin-bottom: 5px; }
        .chart-seg { position: absolute; height: 100%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 11px; font-weight: bold; overflow: hidden; }
        .axis { position: relative; width: 100%; height: 50px; }
        .tick { position: absolute; transform: translateX(-50%); text-align: center; }
        .tick-line { width: 1px; height: 10px; background: #000; margin: 0 auto; }
        .tick-label { font-size: 9px; font-weight: bold; transform: rotate(-45deg); display: block; margin-top: 10px; white-space: nowrap; }
       
        .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; margin-bottom: 20px; }
        input, select { padding: 10px; border: 1px solid #ccc; border-radius: 4px; width: 100%; box-sizing: border-box; }
        .btn-pdf { background: #dc3545; color: white; width: 100%; padding: 15px; font-size: 18px; border-radius: 8px; margin-top: 10px; border: none; cursor: pointer; font-weight: bold; }
        .storage-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-top: 15px; }
        .btn-store { background: #6c757d; color: white; border: none; padding: 8px; border-radius: 4px; font-size: 12px; cursor: pointer; }
       
        table { width: 100%; border-collapse: collapse; margin-top: 20px; }
        th, td { border: 1px solid #ddd; padding: 10px; text-align: center; font-size: 13px; }
        .hidden-staging { position: absolute; left: -9999px; top: -9999px; }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class=&quot;container&quot;&gt;
    &lt;div class=&quot;main-grid&quot;&gt;
        &lt;div class=&quot;sidebar&quot;&gt;
            &lt;h3 style=&quot;margin:0 0 10px 0;&quot;&gt;Project Overview &amp; Export&lt;/h3&gt;
           
            &lt;div class=&quot;summary-box&quot; id=&quot;summaryBox&quot;&gt;
                &lt;h4&gt;Project Summary&lt;/h4&gt;
                &lt;div class=&quot;summary-row&quot;&gt;&lt;span class=&quot;summary-label&quot;&gt;Total Road length:&lt;/span&gt; &lt;span class=&quot;summary-value&quot; id=&quot;totalSanctioned&quot;&gt;0.000 km&lt;/span&gt;&lt;/div&gt;
                &lt;div class=&quot;summary-row&quot;&gt;&lt;span class=&quot;summary-label&quot;&gt;Total Sanctioned length:&lt;/span&gt; &lt;span class=&quot;summary-value&quot; id=&quot;totalCovered&quot;&gt;0.000 km&lt;/span&gt;&lt;/div&gt;
                &lt;div class=&quot;summary-row&quot;&gt;&lt;span class=&quot;summary-label&quot;&gt;Total Uncovered length:&lt;/span&gt; &lt;span class=&quot;summary-value summary-highlight&quot; id=&quot;totalRemaining&quot;&gt;0.000 km&lt;/span&gt;&lt;/div&gt;
                &lt;div class=&quot;summary-row&quot; style=&quot;margin-top:12px;&quot;&gt;&lt;span class=&quot;summary-label&quot;&gt;Total sanctioned cost:&lt;/span&gt; &lt;span class=&quot;summary-value&quot; id=&quot;totalCost&quot;&gt;₹ 0&lt;/span&gt;&lt;/div&gt;
                &lt;div class=&quot;summary-row&quot;&gt;&lt;span class=&quot;summary-label&quot;&gt;Avg. cost per km:&lt;/span&gt; &lt;span class=&quot;summary-value&quot; id=&quot;avgCostPerKm&quot;&gt;—&lt;/span&gt;&lt;/div&gt;
                &lt;div class=&quot;summary-row&quot; style=&quot;margin-top:12px; font-size:14px;&quot;&gt;&lt;span class=&quot;summary-label&quot;&gt;Roads in database:&lt;/span&gt; &lt;span class=&quot;summary-value&quot; id=&quot;roadCount&quot;&gt;0&lt;/span&gt;&lt;/div&gt;
                &lt;div id=&quot;schemeBreakdown&quot;&gt;&lt;/div&gt;
            &lt;/div&gt;
           
            &lt;div class=&quot;bulk-buttons&quot;&gt;
                &lt;button class=&quot;bulk-btn select-all&quot; onclick=&quot;bulkSelect(true)&quot;&gt;Select All&lt;/button&gt;
                &lt;button class=&quot;bulk-btn deselect-all&quot; onclick=&quot;bulkSelect(false)&quot;&gt;Deselect All&lt;/button&gt;
            &lt;/div&gt;
        &lt;/div&gt;
       &lt;/div&gt;
    &lt;/div&gt;

        &lt;div class=&quot;content-area&quot;&gt;
            &lt;h2 id=&quot;roadHeader&quot; style=&quot;margin-top:0;&quot;&gt;Road Inventory Editor&lt;/h2&gt;
          
            &lt;div style=&quot;background:#f8f9fa; padding:15px; border-radius:8px; margin-bottom:20px; border:1px solid #eee;&quot;&gt;
                &lt;div style=&quot;display:flex; justify-content:space-between; margin-bottom:10px;&quot;&gt;
                    &lt;strong id=&quot;chartTitle&quot;&gt;Select or Add a Road&lt;/strong&gt;
                &lt;/div&gt;
                &lt;div class=&quot;chart-box&quot; id=&quot;liveChart&quot;&gt;&lt;/div&gt;
                &lt;div class=&quot;axis&quot; id=&quot;liveAxis&quot;&gt;&lt;/div&gt;
            &lt;/div&gt;
         
           
            &lt;div class=&quot;form-grid&quot;&gt;
                &lt;div style=&quot;grid-column: span 2;&quot;&gt;&lt;label&gt;Road Name&lt;/label&gt;&lt;input type=&quot;text&quot; id=&quot;rName&quot; placeholder=&quot;Enter Road Name&quot;&gt;&lt;/div&gt;
                &lt;div&gt;&lt;label&gt;Total Length (km)&lt;/label&gt;&lt;input type=&quot;number&quot; id=&quot;rLen&quot; step=&quot;0.001&quot; min=&quot;0.001&quot; placeholder=&quot;e.g. 54.7&quot;&gt;&lt;/div&gt;
                &lt;div style=&quot;display:flex; align-items:flex-end;&quot;&gt;&lt;button style=&quot;background:#007bff; color:white; border:none; padding:10px; font-weight:bold; width:100%; border-radius:4px; cursor:pointer;&quot; onclick=&quot;saveRoad()&quot;&gt;Save Road&lt;/button&gt;&lt;/div&gt;
            &lt;/div&gt;
          
            &lt;div class=&quot;form-grid&quot; style=&quot;background:#eefdf3; padding:15px; border-radius:8px; border:1px solid #c3e6cb;&quot;&gt;
                &lt;div&gt;&lt;label&gt;Scheme&lt;/label&gt;
                    &lt;select id=&quot;scheme&quot;&gt;
                        &lt;option&gt;03&lt;/option&gt;
                        &lt;option&gt;04&lt;/option&gt;
                        &lt;option&gt;HAM&lt;/option&gt;
                        &lt;option&gt;T6&lt;/option&gt;
                        &lt;option&gt;Nabard&lt;/option&gt;
                        &lt;option&gt;AMC&lt;/option&gt;
                        &lt;option&gt;DLP&lt;/option&gt;
                        &lt;option&gt;SR&lt;/option&gt;
                        &lt;option&gt;FDR&lt;/option&gt;
                        &lt;option&gt;CRF&lt;/option&gt;
                        &lt;option&gt;Kumbh&lt;/option&gt;
                    &lt;/select&gt;
                &lt;/div&gt;
                &lt;div&gt;&lt;label&gt;Start Ch&lt;/label&gt;&lt;input type=&quot;number&quot; id=&quot;sCh&quot; step=&quot;0.001&quot; min=&quot;0&quot;&gt;&lt;/div&gt;
                &lt;div&gt;&lt;label&gt;End Ch&lt;/label&gt;&lt;input type=&quot;number&quot; id=&quot;eCh&quot; step=&quot;0.001&quot; min=&quot;0&quot;&gt;&lt;/div&gt;
                &lt;div&gt;&lt;label&gt;Cost (₹)&lt;/label&gt;&lt;input type=&quot;number&quot; id=&quot;cost&quot; min=&quot;0&quot; step=&quot;1000&quot;&gt;&lt;/div&gt;
                &lt;div&gt;&lt;label&gt;Year&lt;/label&gt;&lt;input type=&quot;number&quot; id=&quot;year&quot; value=&quot;2026&quot; min=&quot;2000&quot;&gt;&lt;/div&gt;
                &lt;div style=&quot;display:flex; align-items:flex-end;&quot;&gt;&lt;button style=&quot;background:#28a745; color:white; border:none; font-weight:bold; width:100%; padding:10px; border-radius:4px; cursor:pointer;&quot; onclick=&quot;addSegment()&quot;&gt;Add Segment&lt;/button&gt;&lt;/div&gt;
            &lt;/div&gt;
           
            &lt;table&gt;
                &lt;thead&gt;&lt;tr style=&quot;background:#f1f1f1;&quot;&gt;&lt;th&gt;Scheme&lt;/th&gt;&lt;th&gt;Chainage Range&lt;/th&gt;&lt;th&gt;Length&lt;/th&gt;&lt;th&gt;Year&lt;/th&gt;&lt;th&gt;Cost&lt;/th&gt;&lt;th&gt;Action&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;
                &lt;tbody id=&quot;liveTableBody&quot;&gt;&lt;/tbody&gt;
            &lt;/table&gt;
        

    &lt;div id=&quot;stagingArea&quot; class=&quot;hidden-staging&quot;&gt;&lt;/div&gt;

    &lt;p id=&quot;statsCounter&quot; style=&quot;font-size: 12px; color: #666; margin: 10px 0 12px 0;&quot;&gt;&lt;/p&gt;
    &lt;div id=&quot;checklist&quot; class=&quot;road-list&quot;&gt;&lt;/div&gt;
    &lt;button class=&quot;btn-pdf&quot; onclick=&quot;generateBatchPDF()&quot;&gt;📥 EXPORT SELECTED TO PDF&lt;/button&gt;
   
    &lt;div class=&quot;storage-btns&quot;&gt;
        &lt;button class=&quot;btn-store&quot; onclick=&quot;exportJSON()&quot;&gt;💾 Backup (JSON)&lt;/button&gt;
        &lt;button class=&quot;btn-store&quot; style=&quot;background:#495057;&quot; onclick=&quot;document.getElementById(&#39;importFile&#39;).click()&quot;&gt;📂 Import Data&lt;/button&gt;
    &lt;/div&gt;
    &lt;input type=&quot;file&quot; id=&quot;importFile&quot; hidden onchange=&quot;importJSON(event)&quot;&gt;
    &lt;p style=&quot;font-size: 10px; color: #999; margin-top: 12px; text-align: center;&quot;&gt;Chainage format: XX/XXX (54.7 → 54/700)&lt;/p&gt;
&lt;/div&gt;
  
  &lt;div class=&quot;article-container&quot; style=&quot;max-width:1000px; margin:auto; font-family:Segoe UI; line-height:1.6; color:#1e293b;&quot;&gt;

    &lt;h1 style=&quot;text-align:center; color:#0f766e;&quot;&gt;Road Inventory &amp; Scheme Monitoring Tool&lt;/h1&gt;

    &lt;p&gt;
        This advanced &lt;b&gt;HTML + JavaScript based Road Inventory Tool&lt;/b&gt; is designed for 
        &lt;b&gt;highway engineers, PWD officials, and infrastructure planners&lt;/b&gt; to manage 
        road-wise project data using &lt;b&gt;chainage-based segmentation&lt;/b&gt;. 
    &lt;/p&gt;

    &lt;p&gt;
        The tool enables precise tracking of &lt;b&gt;road coverage, scheme allocation, cost distribution, 
        and physical progress&lt;/b&gt; using an intuitive graphical and tabular interface.
    &lt;/p&gt;

    &lt;hr&gt;

    &lt;h2&gt;🔷 Key Features&lt;/h2&gt;
    &lt;ul&gt;
        &lt;li&gt;🛣️ Road-wise inventory management&lt;/li&gt;
        &lt;li&gt;📏 Chainage-based segmentation (Start–End)&lt;/li&gt;
        &lt;li&gt;📊 Real-time graphical linear progress visualization&lt;/li&gt;
        &lt;li&gt;📉 Gap detection (Uncovered stretches)&lt;/li&gt;
        &lt;li&gt;💰 Scheme-wise cost tracking&lt;/li&gt;
        &lt;li&gt;📄 Batch PDF export with charts&lt;/li&gt;
        &lt;li&gt;💾 Local storage (Offline working)&lt;/li&gt;
        &lt;li&gt;📥 JSON import &amp; 📤 backup system&lt;/li&gt;
    &lt;/ul&gt;

    &lt;hr&gt;

    &lt;h2&gt;1. Project Overview &amp; Summary Dashboard&lt;/h2&gt;

    &lt;p&gt;
        The &lt;b&gt;sidebar summary panel&lt;/b&gt; provides real-time aggregated statistics across all roads:
    &lt;/p&gt;

    &lt;ul&gt;
        &lt;li&gt;Total Road Length&lt;/li&gt;
        &lt;li&gt;Total Covered Length&lt;/li&gt;
        &lt;li&gt;Total Uncovered Length (Highlighted)&lt;/li&gt;
        &lt;li&gt;Total Sanctioned Cost&lt;/li&gt;
        &lt;li&gt;Average Cost per Km&lt;/li&gt;
        &lt;li&gt;Total Number of Roads&lt;/li&gt;
    &lt;/ul&gt;

    &lt;h3&gt;📊 Scheme-wise Breakdown&lt;/h3&gt;
    &lt;p&gt;
        The system automatically distributes road length across schemes such as:
    &lt;/p&gt;

    &lt;ul&gt;
        &lt;li&gt;03, 04, NABARD, HAM, CRF, SR, FDR, AMC, etc.&lt;/li&gt;
        &lt;li&gt;&lt;b&gt;Gap (Uncovered Length)&lt;/b&gt; is calculated automatically&lt;/li&gt;
    &lt;/ul&gt;

    &lt;p&gt;
        This helps identify &lt;b&gt;funding distribution and missing coverage&lt;/b&gt; instantly.
    &lt;/p&gt;

    &lt;hr&gt;

    &lt;h2&gt;2. Road Inventory Management&lt;/h2&gt;

    &lt;h3&gt;➕ Add / Edit Road&lt;/h3&gt;
    &lt;ul&gt;
        &lt;li&gt;Enter &lt;b&gt;Road Name&lt;/b&gt;&lt;/li&gt;
        &lt;li&gt;Define &lt;b&gt;Total Length (km)&lt;/b&gt;&lt;/li&gt;
        &lt;li&gt;Save road into local database&lt;/li&gt;
    &lt;/ul&gt;

    &lt;p&gt;
        Each road acts as a &lt;b&gt;parent entity&lt;/b&gt; containing multiple segmented works.
    &lt;/p&gt;

    &lt;hr&gt;

    &lt;h2&gt;3. Chainage-Based Segmentation&lt;/h2&gt;

    &lt;p&gt;
        The core concept of this tool is &lt;b&gt;chainage-based segmentation&lt;/b&gt;, where each road is divided into:
    &lt;/p&gt;

    &lt;ul&gt;
        &lt;li&gt;&lt;b&gt;Start Chainage&lt;/b&gt;&lt;/li&gt;
        &lt;li&gt;&lt;b&gt;End Chainage&lt;/b&gt;&lt;/li&gt;
        &lt;li&gt;&lt;b&gt;Scheme Allocation&lt;/b&gt;&lt;/li&gt;
        &lt;li&gt;&lt;b&gt;Cost &amp; Year&lt;/b&gt;&lt;/li&gt;
    &lt;/ul&gt;

    &lt;h3&gt;📌 Validation Rules&lt;/h3&gt;
    &lt;ul&gt;
        &lt;li&gt;0 ≤ Start &amp;lt; End ≤ Total Length&lt;/li&gt;
        &lt;li&gt;No invalid overlaps allowed logically&lt;/li&gt;
    &lt;/ul&gt;

    &lt;h3&gt;📏 Chainage Format&lt;/h3&gt;
    &lt;p&gt;
        Values are automatically displayed in standard format:
    &lt;/p&gt;

    &lt;pre style=&quot;background:#f1f5f9; padding:10px;&quot;&gt;
54.700 km → 54/700
    &lt;/pre&gt;

    &lt;hr&gt;

    &lt;h2&gt;4. Linear Progress Visualization&lt;/h2&gt;

    &lt;p&gt;
        The tool dynamically generates a &lt;b&gt;horizontal bar chart&lt;/b&gt; representing the road:
    &lt;/p&gt;

    &lt;ul&gt;
        &lt;li&gt;Each segment is color-coded by scheme&lt;/li&gt;
        &lt;li&gt;Proportional to actual chainage length&lt;/li&gt;
        &lt;li&gt;Gaps are highlighted in grey&lt;/li&gt;
    &lt;/ul&gt;

    &lt;p&gt;
        This provides an &lt;b&gt;instant visual understanding of coverage&lt;/b&gt; and missing links.
    &lt;/p&gt;

    &lt;h3&gt;📍 Axis Marking&lt;/h3&gt;
    &lt;ul&gt;
        &lt;li&gt;Chainage ticks are auto-generated&lt;/li&gt;
        &lt;li&gt;Start and end points clearly marked&lt;/li&gt;
    &lt;/ul&gt;

    &lt;hr&gt;

    &lt;h2&gt;5. Gap Detection Logic&lt;/h2&gt;

    &lt;p&gt;
        One of the most powerful features is &lt;b&gt;automatic gap identification&lt;/b&gt;.
    &lt;/p&gt;

    &lt;ul&gt;
        &lt;li&gt;Uncovered stretches between segments are detected&lt;/li&gt;
        &lt;li&gt;Displayed as &lt;b&gt;&quot;GAP&quot;&lt;/b&gt; in table and chart&lt;/li&gt;
        &lt;li&gt;Included in summary as &lt;b&gt;Uncovered Length&lt;/b&gt;&lt;/li&gt;
    &lt;/ul&gt;

    &lt;p&gt;
        This ensures &lt;b&gt;no portion of the road is left untracked&lt;/b&gt;.
    &lt;/p&gt;

    &lt;hr&gt;

    &lt;h2&gt;6. Data Table Representation&lt;/h2&gt;

    &lt;p&gt;
        Each segment is listed in a structured table:
    &lt;/p&gt;

    &lt;ul&gt;
        &lt;li&gt;Scheme&lt;/li&gt;
        &lt;li&gt;Chainage Range&lt;/li&gt;
        &lt;li&gt;Length&lt;/li&gt;
        &lt;li&gt;Year&lt;/li&gt;
        &lt;li&gt;Cost&lt;/li&gt;
    &lt;/ul&gt;

    &lt;p&gt;
        Gap rows are automatically inserted for missing stretches.
    &lt;/p&gt;

    &lt;hr&gt;

    &lt;h2&gt;7. Bulk Selection &amp; PDF Export&lt;/h2&gt;

    &lt;h3&gt;📑 Batch PDF Export&lt;/h3&gt;
    &lt;ul&gt;
        &lt;li&gt;Select multiple roads&lt;/li&gt;
        &lt;li&gt;Generate detailed PDF reports&lt;/li&gt;
        &lt;li&gt;Each road includes:
            &lt;ul&gt;
                &lt;li&gt;Linear chart&lt;/li&gt;
                &lt;li&gt;Chainage axis&lt;/li&gt;
                &lt;li&gt;Segment table&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/li&gt;
    &lt;/ul&gt;

    &lt;p&gt;
        PDF generation uses:
    &lt;/p&gt;
    &lt;ul&gt;
        &lt;li&gt;&lt;b&gt;html2canvas&lt;/b&gt; for rendering UI&lt;/li&gt;
        &lt;li&gt;&lt;b&gt;jsPDF&lt;/b&gt; for document creation&lt;/li&gt;
    &lt;/ul&gt;

    &lt;hr&gt;

    &lt;h2&gt;8. Data Storage System&lt;/h2&gt;

    &lt;h3&gt;💾 Local Storage&lt;/h3&gt;
    &lt;ul&gt;
        &lt;li&gt;All data stored in browser using &lt;b&gt;localStorage&lt;/b&gt;&lt;/li&gt;
        &lt;li&gt;No backend required&lt;/li&gt;
    &lt;/ul&gt;

    &lt;h3&gt;📥 Import / 📤 Export&lt;/h3&gt;
    &lt;ul&gt;
        &lt;li&gt;Backup complete dataset as JSON&lt;/li&gt;
        &lt;li&gt;Restore anytime using import&lt;/li&gt;
    &lt;/ul&gt;

    &lt;hr&gt;

    &lt;h2&gt;9. Scheme Color Coding&lt;/h2&gt;

    &lt;p&gt;
        Each scheme is visually differentiated:
    &lt;/p&gt;

    &lt;ul&gt;
        &lt;li&gt;03 → Blue&lt;/li&gt;
        &lt;li&gt;04 → Green&lt;/li&gt;
        &lt;li&gt;NABARD → Purple&lt;/li&gt;
        &lt;li&gt;HAM → Cyan&lt;/li&gt;
        &lt;li&gt;Gap → Grey&lt;/li&gt;
    &lt;/ul&gt;

    &lt;p&gt;
        Ensures &lt;b&gt;quick identification of funding sources&lt;/b&gt;.
    &lt;/p&gt;

    &lt;hr&gt;

    &lt;h2&gt;10. Engineering Applications&lt;/h2&gt;

    &lt;ul&gt;
        &lt;li&gt;✔ DPR preparation &amp; review&lt;/li&gt;
        &lt;li&gt;✔ Funding allocation tracking&lt;/li&gt;
        &lt;li&gt;✔ Physical progress monitoring&lt;/li&gt;
        &lt;li&gt;✔ Gap identification for proposals&lt;/li&gt;
        &lt;li&gt;✔ Road asset management&lt;/li&gt;
    &lt;/ul&gt;

    &lt;hr&gt;

    &lt;h2&gt;11. Advantages&lt;/h2&gt;

    &lt;ul&gt;
        &lt;li&gt;✔ Fully offline system&lt;/li&gt;
        &lt;li&gt;✔ Visual + numerical analysis combined&lt;/li&gt;
        &lt;li&gt;✔ Eliminates manual chainage calculations&lt;/li&gt;
        &lt;li&gt;✔ Accurate gap detection&lt;/li&gt;
        &lt;li&gt;✔ Professional reporting via PDF&lt;/li&gt;
    &lt;/ul&gt;

&lt;/div&gt;

&lt;script&gt;
    let roads = {};
    let activeRoad = &quot;&quot;;

    // Color map for PDF (html2canvas doesn&#39;t read CSS variables reliably in off-screen render)
    const SCHEME_COLORS = {
        &quot;03&quot;:    &quot;#007bff&quot;,
        &quot;04&quot;:    &quot;#28a745&quot;,
        &quot;Nabard&quot;:&quot;#6f42c1&quot;,
        &quot;AMC&quot;:   &quot;#fd7e14&quot;,
        &quot;DLP&quot;:   &quot;#dc3545&quot;,
        &quot;HAM&quot;:   &quot;#17a2b8&quot;,
        &quot;T6&quot;:    &quot;#6610f2&quot;,
        &quot;SR&quot;:    &quot;#20c997&quot;,
        &quot;FDR&quot;:   &quot;#e83e8c&quot;,
        &quot;CRF&quot;:   &quot;#6c757d&quot;,
        &quot;Kumbh&quot;: &quot;#ff6f61&quot;,
        &quot;gap&quot;:   &quot;#dee2e6&quot;,
        &quot;Gap&quot;:   &quot;#dee2e6&quot;,
        &quot;unknown&quot;:&quot;#6c757d&quot;
    };

    try {
        const saved = localStorage.getItem(&#39;roadData_v87&#39;);
        if (saved) {
            roads = JSON.parse(saved);
        }
    } catch (err) {
        console.error(&quot;Failed to load saved roads:&quot;, err);
        roads = {};
    }

    function formatChainage(val) {
        if (val == null || isNaN(val)) return &quot;0/000&quot;;
        const km = Math.floor(val);
        const m = Math.round((val - km) * 1000);
        return `${km}/${m.toString().padStart(3, &#39;0&#39;)}`;
    }

    function ensureRoadData(name, length) {
        if (!roads[name]) {
            roads[name] = { length, segments: [], selectedForPDF: false };
        } else {
            roads[name].length = length;
            if (roads[name].selectedForPDF === undefined) roads[name].selectedForPDF = false;
        }
    }

    function calculateSummary() {
        let totalSanctioned = 0;
        let totalCost = 0;
        let roadCount = Object.keys(roads).length;

        const schemeLengths = {
            &quot;03&quot;: 0, &quot;04&quot;: 0, &quot;Nabard&quot;: 0, &quot;AMC&quot;: 0, &quot;DLP&quot;: 0,
            &quot;HAM&quot;: 0, &quot;T6&quot;: 0, &quot;SR&quot;: 0, &quot;FDR&quot;: 0, &quot;CRF&quot;: 0, &quot;Kumbh&quot;: 0,
            &quot;Gap&quot;: 0
        };

        Object.values(roads).forEach(road =&gt; {
            const totalLength = Number(road.length || 0);
            totalSanctioned += totalLength;
            if (totalLength &lt;= 0) return;

            const sorted = [...road.segments].sort((a,b) =&gt; a.start - b.start);
            let prevEnd = 0;

            sorted.forEach(s =&gt; {
                const start = Number(s.start);
                const end = Number(s.end);
                const len = end - start;

                if (start &gt; prevEnd) schemeLengths[&quot;Gap&quot;] += (start - prevEnd);

                if (schemeLengths.hasOwnProperty(s.scheme)) {
                    schemeLengths[s.scheme] += len;
                }
                totalCost += Number(s.cost || 0);
                prevEnd = end;
            });

            if (prevEnd &lt; totalLength) {
                schemeLengths[&quot;Gap&quot;] += (totalLength - prevEnd);
            }
        });

        const totalCovered = totalSanctioned - schemeLengths[&quot;Gap&quot;];
        const totalRemaining = schemeLengths[&quot;Gap&quot;];
        const avgCostPerKm = totalSanctioned &gt; 0 ? Math.round(totalCost / totalSanctioned) : 0;

        document.getElementById(&#39;totalSanctioned&#39;).innerHTML = totalSanctioned.toFixed(3) + &quot; km&quot;;
        document.getElementById(&#39;totalCovered&#39;).innerHTML   = totalCovered.toFixed(3)   + &quot; km&quot;;
        document.getElementById(&#39;totalRemaining&#39;).innerHTML = totalRemaining.toFixed(3) + &quot; km&quot;;
        document.getElementById(&#39;totalCost&#39;).innerHTML      = &quot;₹ &quot; + Number(totalCost).toLocaleString(&#39;en-IN&#39;);
        document.getElementById(&#39;avgCostPerKm&#39;).innerHTML   = avgCostPerKm &gt; 0 ? &quot;₹ &quot; + avgCostPerKm.toLocaleString(&#39;en-IN&#39;) : &quot;—&quot;;
        document.getElementById(&#39;roadCount&#39;).innerHTML      = roadCount;

        // Build scheme breakdown
        let html = &#39;&lt;h4 style=&quot;margin:16px 0 8px 0; padding-top:12px; border-top:1px solid #dee2e6;&quot;&gt;Length by Scheme&lt;/h4&gt;&#39;;
        Object.entries(schemeLengths).forEach(([sch, len]) =&gt; {
            if (len &gt; 0 || sch === &quot;Gap&quot;) {
                const isGap = sch === &quot;Gap&quot;;
                html += `
                    &lt;div class=&quot;summary-row&quot;&gt;
                        &lt;span class=&quot;summary-label&quot;&gt;${sch}${isGap ? &#39; (uncovered)&#39; : &#39;&#39;}:&lt;/span&gt;
                        &lt;span class=&quot;summary-value ${isGap ? &#39;summary-highlight&#39; : &#39;&#39;}&quot;&gt;${len.toFixed(3)} km&lt;/span&gt;
                    &lt;/div&gt;`;
            }
        });

        document.getElementById(&#39;schemeBreakdown&#39;).innerHTML = html;
    }

    function init() {
        const list = document.getElementById(&#39;checklist&#39;);
        const countTotal = Object.keys(roads).length;
        const countSelected = Object.values(roads).filter(r =&gt; r.selectedForPDF).length;
        document.getElementById(&#39;statsCounter&#39;).innerHTML = `${countTotal} road(s) • ${countSelected} selected for PDF`;

        list.innerHTML = &quot;&quot;;
        const sortedNames = Object.keys(roads).sort((a,b) =&gt; a.localeCompare(b, undefined, {sensitivity:&#39;base&#39;}));

        sortedNames.forEach(name =&gt; {
            const road = roads[name];
            const isEditing  = (name === activeRoad) ? &#39;active-editing&#39; : &#39;&#39;;
            const isSelected = road.selectedForPDF ? &#39;selected-for-pdf&#39; : &#39;&#39;;

            const row = document.createElement(&#39;div&#39;);
            row.className = `road-item ${isEditing} ${isSelected}`;
            row.dataset.name = name;
            row.innerHTML = `
                &lt;input type=&quot;checkbox&quot; class=&quot;big-check&quot; ${road.selectedForPDF ? &#39;checked&#39; : &#39;&#39;}&gt;
                &lt;span style=&quot;font-weight:bold; cursor:pointer; font-size:13px;&quot; onclick=&quot;setActive(&#39;${name.replace(/&#39;/g,&quot;\\&#39;&quot;)}&#39;)&quot;&gt;${name}&lt;/span&gt;
                &lt;div class=&quot;action-group&quot;&gt;
                    &lt;button class=&quot;btn-edit&quot; onclick=&quot;setActive(&#39;${name.replace(/&#39;/g,&quot;\\&#39;&quot;)}&#39;)&quot;&gt;Edit&lt;/button&gt;
                    &lt;button class=&quot;btn-del&quot; onclick=&quot;deleteRoad(&#39;${name.replace(/&#39;/g,&quot;\\&#39;&quot;)}&#39;)&quot;&gt;×&lt;/button&gt;
                &lt;/div&gt;
            `;

            row.querySelector(&#39;.big-check&#39;).addEventListener(&#39;change&#39;, e =&gt; {
                road.selectedForPDF = e.target.checked;
                save();
                updateSelectionUI();
            });

            list.appendChild(row);
        });

        calculateSummary();
        refreshUI();
    }

    function updateSelectionUI() {
        const countSelected = Object.values(roads).filter(r =&gt; r.selectedForPDF).length;
        document.getElementById(&#39;statsCounter&#39;).innerHTML = `${Object.keys(roads).length} road(s) • ${countSelected} selected for PDF`;

        document.querySelectorAll(&#39;.road-item&#39;).forEach(item =&gt; {
            const name = item.dataset.name;
            if (roads[name]?.selectedForPDF) {
                item.classList.add(&#39;selected-for-pdf&#39;);
            } else {
                item.classList.remove(&#39;selected-for-pdf&#39;);
            }
        });
    }

    function bulkSelect(shouldSelect) {
        Object.values(roads).forEach(r =&gt; r.selectedForPDF = shouldSelect);
        save();
        init();
    }

    function setActive(name) {
        activeRoad = name;
        document.getElementById(&#39;rName&#39;).value = name;
        document.getElementById(&#39;rLen&#39;).value = roads[name]?.length || &#39;&#39;;
        document.getElementById(&#39;roadHeader&#39;).innerHTML = &quot;Road: &quot; + (name || &quot;—&quot;);
        refreshUI();
        init(); // also refreshes list to highlight active
    }

    function saveRoad() {
        let name = document.getElementById(&#39;rName&#39;).value.trim();
        const len = parseFloat(document.getElementById(&#39;rLen&#39;).value);
        if (!name || isNaN(len) || len &lt;= 0) {
            alert(&quot;Please enter valid road name and length (&gt;0).&quot;);
            return;
        }
        ensureRoadData(name, len);
        activeRoad = name;
        save();
        init();
    }

    function addSegment() {
        if (!activeRoad) return alert(&quot;Please select or save a road first.&quot;);
        const s = parseFloat(document.getElementById(&#39;sCh&#39;).value);
        const e = parseFloat(document.getElementById(&#39;eCh&#39;).value);
        const road = roads[activeRoad];

        if (isNaN(s) || isNaN(e) || s &gt;= e || e &gt; road.length || s &lt; 0) {
            alert(&quot;Invalid range: 0 ≤ Start &lt; End ≤ Total Length&quot;);
            return;
        }

        road.segments.push({
            scheme: document.getElementById(&#39;scheme&#39;).value,
            start: s,
            end: e,
            cost: parseFloat(document.getElementById(&#39;cost&#39;).value) || 0,
            year: document.getElementById(&#39;year&#39;).value || &quot;2026&quot;
        });

        road.segments.sort((a,b) =&gt; a.start - b.start);
        save();
        refreshUI();
        calculateSummary();
    }

    function refreshUI() {
        const tbody = document.getElementById(&#39;liveTableBody&#39;);
        const chart = document.getElementById(&#39;liveChart&#39;);
        const axis  = document.getElementById(&#39;liveAxis&#39;);
        tbody.innerHTML = &quot;&quot;; chart.innerHTML = &quot;&quot;; axis.innerHTML = &quot;&quot;;

        if (!activeRoad || !roads[activeRoad]) return;

        const road = roads[activeRoad];
        document.getElementById(&#39;chartTitle&#39;).innerHTML = `Linear Progress: ${formatChainage(road.length)}`;

        let cur = 0;
        const pts = new Set([0, road.length]);

        road.segments.forEach((seg, idx) =&gt; {
            if (seg.start &gt; cur) {
                renderChartBox(chart, cur, seg.start, &quot;gap&quot;, road.length);
                renderRow(tbody, &quot;GAP&quot;, cur, seg.start, &quot;—&quot;, &quot;—&quot;, true);
            }
            renderChartBox(chart, seg.start, seg.end, seg.scheme, road.length);
            renderRow(tbody, seg.scheme, seg.start, seg.end, seg.year, seg.cost, false, idx);
            pts.add(seg.start);
            pts.add(seg.end);
            cur = seg.end;
        });

        if (cur &lt; road.length) {
            renderChartBox(chart, cur, road.length, &quot;gap&quot;, road.length);
            renderRow(tbody, &quot;GAP&quot;, cur, road.length, &quot;—&quot;, &quot;—&quot;, true);
        }

        Array.from(pts).sort((a,b)=&gt;a-b).forEach(p =&gt; {
            const tick = document.createElement(&#39;div&#39;);
            tick.className = &#39;tick&#39;;
            tick.style.left = (p / road.length * 100) + &quot;%&quot;;
            tick.innerHTML = `&lt;div class=&quot;tick-line&quot;&gt;&lt;/div&gt;&lt;span class=&quot;tick-label&quot;&gt;${formatChainage(p)}&lt;/span&gt;`;
            axis.appendChild(tick);
        });
    }

    function renderChartBox(container, s, e, type, total) {
        const b = document.createElement(&#39;div&#39;);
        b.className = &#39;chart-seg&#39;;
        b.style.left   = (s / total * 100) + &quot;%&quot;;
        b.style.width  = ((e - s) / total * 100) + &quot;%&quot;;
        b.style.backgroundColor = SCHEME_COLORS[type] || &quot;#cccccc&quot;;
        if (type !== &#39;gap&#39;) b.textContent = type;
        container.appendChild(b);
    }

    function renderRow(target, scheme, s, e, y, c, isGap, idx) {
        const r = target.insertRow();
        if (isGap) r.style.color = &quot;#888&quot;;
        r.innerHTML = `
            &lt;td&gt;${scheme}&lt;/td&gt;
            &lt;td&gt;${formatChainage(s)} - ${formatChainage(e)}&lt;/td&gt;
            &lt;td&gt;${(e-s).toFixed(3)}&lt;/td&gt;
            &lt;td&gt;${y}&lt;/td&gt;
            &lt;td&gt;${Number(c).toLocaleString(&#39;en-IN&#39;)}&lt;/td&gt;
            &lt;td&gt;${!isGap ? `&lt;button onclick=&quot;deleteSeg(${idx})&quot;&gt;×&lt;/button&gt;` : &#39;&#39;}&lt;/td&gt;`;
    }

    function deleteSeg(idx) {
        if (!activeRoad || !confirm(&quot;Delete this segment?&quot;)) return;
        roads[activeRoad].segments.splice(idx, 1);
        save();
        refreshUI();
        calculateSummary();
    }

    function deleteRoad(name) {
        if (!confirm(`Delete road &quot;${name}&quot;?`)) return;
        delete roads[name];
        if (activeRoad === name) activeRoad = &quot;&quot;;
        save();
        init();
    }

    function save() {
        localStorage.setItem(&#39;roadData_v87&#39;, JSON.stringify(roads));
    }

    async function generateBatchPDF() {
        const selected = Object.keys(roads).filter(k =&gt; roads[k].selectedForPDF);
        if (!selected.length) return alert(&quot;No roads selected for export.&quot;);

        const { jsPDF } = window.jspdf;
        const pdf = new jsPDF(&#39;p&#39;, &#39;mm&#39;, &#39;a4&#39;);
        const staging = document.getElementById(&#39;stagingArea&#39;);
        staging.innerHTML = &quot;&quot;;

        for (let i = 0; i &lt; selected.length; i++) {
            const name = selected[i];
            const road = roads[name];

            const block = document.createElement(&#39;div&#39;);
            block.style.padding = &quot;30px&quot;;
            block.style.width = &quot;190mm&quot;;
            block.style.background = &quot;#fff&quot;;
            block.style.fontFamily = &quot;Arial, sans-serif&quot;;

            let tableRows = &quot;&quot;;
            let prev = 0;
            road.segments.forEach(s =&gt; {
                if (s.start &gt; prev) {
                    tableRows += `
                        &lt;tr style=&quot;color:#777; background:#f8f9fa;&quot;&gt;
                            &lt;td&gt;Gap&lt;/td&gt;
                            &lt;td&gt;${formatChainage(prev)}&lt;/td&gt;
                            &lt;td&gt;${formatChainage(s.start)}&lt;/td&gt;
                            &lt;td&gt;—&lt;/td&gt;
                            &lt;td&gt;—&lt;/td&gt;
                        &lt;/tr&gt;`;
                }
                tableRows += `
                    &lt;tr&gt;
                        &lt;td&gt;${s.scheme}&lt;/td&gt;
                        &lt;td&gt;${formatChainage(s.start)}&lt;/td&gt;
                        &lt;td&gt;${formatChainage(s.end)}&lt;/td&gt;
                        &lt;td&gt;${s.year}&lt;/td&gt;
                        &lt;td&gt;₹ ${Number(s.cost).toLocaleString(&#39;en-IN&#39;)}&lt;/td&gt;
                    &lt;/tr&gt;`;
                prev = s.end;
            });
            if (prev &lt; road.length) {
                tableRows += `
                    &lt;tr style=&quot;color:#777; background:#f8f9fa;&quot;&gt;
                        &lt;td&gt;Gap&lt;/td&gt;
                        &lt;td&gt;${formatChainage(prev)}&lt;/td&gt;
                        &lt;td&gt;${formatChainage(road.length)}&lt;/td&gt;
                        &lt;td&gt;—&lt;/td&gt;
                        &lt;td&gt;—&lt;/td&gt;
                    &lt;/tr&gt;`;
            }

            block.innerHTML = `
                &lt;h1 style=&quot;text-align:center; margin-bottom:16px; border-bottom:2px solid #333; padding-bottom:8px;&quot;&gt;ROAD INVENTORY&lt;/h1&gt;
                &lt;p style=&quot;font-size:14px; margin-bottom:20px;&quot;&gt;
                    &lt;strong&gt;ROAD:&lt;/strong&gt; ${name}&lt;br&gt;
                    &lt;strong&gt;TOTAL LENGTH:&lt;/strong&gt; ${formatChainage(road.length)}
                &lt;/p&gt;
                &lt;div style=&quot;height:60px; position:relative; background:#f0f0f0; border:1px solid #aaa; margin-bottom:8px;&quot; id=&quot;pdf-chart-${i}&quot;&gt;&lt;/div&gt;
                &lt;div style=&quot;height:50px; position:relative; margin-bottom:24px;&quot; id=&quot;pdf-axis-${i}&quot;&gt;&lt;/div&gt;
                &lt;table style=&quot;width:100%; border-collapse:collapse; font-size:11px;&quot;&gt;
                    &lt;tr style=&quot;background:#e0e0e0; font-weight:bold;&quot;&gt;
                        &lt;th&gt;Scheme&lt;/th&gt;&lt;th&gt;Start&lt;/th&gt;&lt;th&gt;End&lt;/th&gt;&lt;th&gt;Year&lt;/th&gt;&lt;th&gt;Cost&lt;/th&gt;
                    &lt;/tr&gt;
                    ${tableRows}
                &lt;/table&gt;`;

            staging.appendChild(block);

            // Build chart for PDF
            const chartEl = block.querySelector(`#pdf-chart-${i}`);
            const axisEl  = block.querySelector(`#pdf-axis-${i}`);
            let pts = new Set([0, road.length]);

            road.segments.forEach(s =&gt; {
                const seg = document.createElement(&#39;div&#39;);
                seg.style.position = &#39;absolute&#39;;
                seg.style.height = &#39;100%&#39;;
                seg.style.left   = (s.start / road.length * 100) + &quot;%&quot;;
                seg.style.width  = ((s.end - s.start) / road.length * 100) + &quot;%&quot;;
                seg.style.backgroundColor = SCHEME_COLORS[s.scheme] || &quot;#ccc&quot;;
                seg.style.color = &quot;blue&quot;;
                seg.style.display = &quot;flex&quot;;
                seg.style.alignItems = &quot;center&quot;;
                seg.style.justifyContent = &quot;center&quot;;
                seg.style.fontSize = &quot;10px&quot;;
                seg.style.fontWeight = &quot;bold&quot;;
                seg.textContent = s.scheme;
                chartEl.appendChild(seg);
                pts.add(s.start);
                pts.add(s.end);
            });

            Array.from(pts).sort((a,b)=&gt;a-b).forEach(p =&gt; {
                const tick = document.createElement(&#39;div&#39;);
                tick.style.position = &#39;absolute&#39;;
                tick.style.left = (p / road.length * 100) + &quot;%&quot;;
                tick.style.transform = &quot;translateX(-50%)&quot;;
                tick.innerHTML = `&lt;div style=&quot;width:1px;height:10px;background:#000;margin:0 auto;&quot;&gt;&lt;/div&gt;
                                  &lt;span style=&quot;font-size:9px;font-weight:bold;&quot;&gt;${formatChainage(p)}&lt;/span&gt;`;
                axisEl.appendChild(tick);
            });

            // Render to canvas
            const canvas = await html2canvas(block, {
                scale: 2,
                useCORS: true,
                logging: false
            });

            const imgData = canvas.toDataURL(&#39;image/png&#39;);
            const pdfWidth = 200;
            const pdfHeight = (canvas.height * pdfWidth) / canvas.width;

            if (i &gt; 0) pdf.addPage();
            pdf.addImage(imgData, &#39;PNG&#39;, 5, 5, pdfWidth, pdfHeight);
        }

        pdf.save(`Road_Inventory_${new Date().toISOString().slice(0,10)}.pdf`);
        staging.innerHTML = &quot;&quot;;
    }

    function exportJSON() {
        const blob = new Blob([JSON.stringify(roads, null, 2)], {type: &#39;application/json&#39;});
        const url = URL.createObjectURL(blob);
        const a = document.createElement(&#39;a&#39;);
        a.href = url;
        a.download = &quot;road_data_v87.json&quot;;
        a.click();
        URL.revokeObjectURL(url);
    }

    function importJSON(e) {
        const file = e.target.files[0];
        if (!file) return;
        const reader = new FileReader();
        reader.onload = ev =&gt; {
            try {
                roads = JSON.parse(ev.target.result);
                save();
                init();
                alert(&quot;Data imported successfully!&quot;);
            } catch (err) {
                alert(&quot;Error reading file: &quot; + err.message);
            }
        };
        reader.readAsText(file);
    }

    // Initial load
    init();
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;&lt;div class=&quot;blogger-post-footer&quot;&gt;https://yogipwd.blogspot.com/&lt;/div&gt;</description><link>https://www.yogipwd.com/2026/03/road-sanctioned-length-and-remaining.html</link><author>noreply@blogger.com (Yogendra)</author><thr:total>0</thr:total></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-1074964965522467583.post-5877606476122481424</guid><pubDate>Wed, 04 Mar 2026 13:30:31 +0000</pubDate><atom:updated>2026-04-07T00:08:18.723+05:30</atom:updated><title>Barricade Rate Analysis Calculator</title><description>&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;title&gt;Bulk Barricade Project Analysis&lt;/title&gt;
    &lt;style&gt;
        :root { --primary: #2c3e50; --accent: #2980b9; --success: #27ae60; }
        body { font-family: &#39;Segoe UI&#39;, Tahoma, sans-serif; background:#f4f7f6; margin:20px; color: #333; }
        .container { max-width: 1000px; margin: auto; background:#fff; padding:3px; border-radius:1px; box-shadow:0 1px 3px rgba(0,0,0,0.1); }
        .config-panel { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; background: #ebf2f7; padding: 20px; border-radius: 8px; margin-bottom: 25px; border: 1px solid #d6eaf8; }
        label { font-weight: bold; font-size: 0.9em; color: var(--primary); }
        input { width: 100%; padding: 8px; margin-top: 5px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }
        table { width:100%; border-collapse:collapse; margin:15px 0; font-size: 0.95em; }
        th, td { border:1px solid #dee2e6; padding:12px; text-align:left; }
        th { background: var(--primary); color: white; }
        .calc-btn { background: var(--success); color: white; padding: 15px; border: none; border-radius: 6px; cursor: pointer; width: 100%; font-size: 1.1em; font-weight: bold; transition: 0.3s; }
        .calc-btn:hover { background: #219150; transform: translateY(-2px); }
        .result-box { margin-top: 30px; border-top: 2px solid #eee; padding-top: 20px; }
        .total-highlight { background: #fff9c4; border-left: 5px solid #fbc02d; padding: 15px; margin: 15px 0; }
        .gst-text { color: #e67e22; font-weight: bold; }
        @media print { .no-print { display: none; } .container { box-shadow: none; border: none; width: 100%; } }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;div class=&quot;container&quot;&gt;
    &lt;div class=&quot;no-print&quot;&gt;
        &lt;h2&gt;Construction Project Calculator: 100km Barricading&lt;/h2&gt;
        &lt;div class=&quot;config-panel&quot;&gt;
            &lt;div&gt;
                &lt;label&gt;Total Length (km)&lt;/label&gt;
                &lt;input id=&quot;total_km&quot; type=&quot;number&quot; value=&quot;100&quot;&gt;
            &lt;/div&gt;
            &lt;div&gt;
                &lt;label&gt;Bulk Discount (%)&lt;/label&gt;
                &lt;input id=&quot;bulk_disc&quot; type=&quot;number&quot; value=&quot;15&quot;&gt;
            &lt;/div&gt;
            &lt;div&gt;
                &lt;label&gt;Labour Efficiency (%)&lt;/label&gt;
                &lt;input id=&quot;labour_eff&quot; type=&quot;number&quot; value=&quot;10&quot;&gt;
            &lt;/div&gt;
            &lt;div&gt;
                &lt;label&gt;GST Rate (%)&lt;/label&gt;
                &lt;input id=&quot;gst_rate&quot; type=&quot;number&quot; value=&quot;18&quot;&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        
        &lt;div style=&quot;display: grid; grid-template-columns: 1fr 1fr; gap: 20px;&quot;&gt;
            &lt;div&gt;
                &lt;h3&gt;Material Unit Rates (Base)&lt;/h3&gt;
                &lt;table&gt;
                    &lt;tr&gt;&lt;td&gt;V. Balli (Qty/Rate)&lt;/td&gt;&lt;td&gt;&lt;input id=&quot;v_qty&quot; value=&quot;3&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;input id=&quot;v_rate&quot; value=&quot;15&quot;&gt;&lt;/td&gt;&lt;/tr&gt;
                    &lt;tr&gt;&lt;td&gt;H. Balli (Qty/Rate)&lt;/td&gt;&lt;td&gt;&lt;input id=&quot;h_qty&quot; value=&quot;3&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;input id=&quot;h_rate&quot; value=&quot;12&quot;&gt;&lt;/td&gt;&lt;/tr&gt;
                    &lt;tr&gt;&lt;td&gt;Wire (kg/Rate)&lt;/td&gt;&lt;td&gt;&lt;input id=&quot;w_qty&quot; value=&quot;0.25&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;input id=&quot;w_rate&quot; value=&quot;90&quot;&gt;&lt;/td&gt;&lt;/tr&gt;
                    &lt;tr&gt;&lt;td&gt;Nails (kg/Rate)&lt;/td&gt;&lt;td&gt;&lt;input id=&quot;n_qty&quot; value=&quot;0.10&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;input id=&quot;n_rate&quot; value=&quot;80&quot;&gt;&lt;/td&gt;&lt;/tr&gt;
                &lt;/table&gt;
            &lt;/div&gt;
            &lt;div&gt;
                &lt;h3&gt;Labour &amp; Overheads&lt;/h3&gt;
                &lt;table&gt;
                    &lt;tr&gt;&lt;td&gt;Mazdoor (Qty/Rate)&lt;/td&gt;&lt;td&gt;&lt;input id=&quot;m_qty&quot; value=&quot;0.25&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;input id=&quot;m_rate&quot; value=&quot;700&quot;&gt;&lt;/td&gt;&lt;/tr&gt;
                    &lt;tr&gt;&lt;td&gt;Supervisor (Qty/Rate)&lt;/td&gt;&lt;td&gt;&lt;input id=&quot;s_qty&quot; value=&quot;0.05&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;input id=&quot;s_rate&quot; value=&quot;900&quot;&gt;&lt;/td&gt;&lt;/tr&gt;
                    &lt;tr&gt;&lt;td&gt;T&amp;P (%)&lt;/td&gt;&lt;td colspan=&quot;2&quot;&gt;&lt;input id=&quot;tp_percent&quot; value=&quot;5&quot;&gt;&lt;/td&gt;&lt;/tr&gt;
                    &lt;tr&gt;&lt;td&gt;Cont. Profit (%)&lt;/td&gt;&lt;td colspan=&quot;2&quot;&gt;&lt;input id=&quot;profit_percent&quot; value=&quot;10&quot;&gt;&lt;/td&gt;&lt;/tr&gt;
                &lt;/table&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;button class=&quot;calc-btn&quot; onclick=&quot;generateReport()&quot;&gt;Generate Detailed Bulk Analysis&lt;/button&gt;
    &lt;/div&gt;

    &lt;div id=&quot;output&quot; class=&quot;result-box&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
  
  &lt;div class=&quot;article-container&quot; style=&quot;max-width:1000px; margin:auto; font-family:Segoe UI; line-height:1.6; color:#1e293b;&quot;&gt;

    &lt;h1 style=&quot;text-align:center; color:#7c2d12;&quot;&gt;Construction Project Calculator – Barricading Cost Analysis&lt;/h1&gt;

    &lt;p&gt;
        This &lt;b&gt;HTML + JavaScript based construction calculator&lt;/b&gt; is a specialized tool developed for 
        &lt;b&gt;large-scale barricading works&lt;/b&gt; such as highway safety works, urban traffic control, 
        and temporary construction enclosures.
    &lt;/p&gt;

    &lt;p&gt;
        It enables engineers and contractors to perform &lt;b&gt;detailed rate analysis, bulk cost estimation, 
        and project-level financial planning&lt;/b&gt; with real-time computation.
    &lt;/p&gt;

    &lt;hr&gt;

    &lt;h2&gt;🔷 Key Features&lt;/h2&gt;
    &lt;ul&gt;
        &lt;li&gt;📏 Project-scale estimation (e.g., 100 km barricading)&lt;/li&gt;
        &lt;li&gt;🧮 Automatic unit-to-project scaling&lt;/li&gt;
        &lt;li&gt;📉 Bulk discount &amp; labour efficiency adjustments&lt;/li&gt;
        &lt;li&gt;💰 Detailed cost breakdown (Material, Labour, Overheads)&lt;/li&gt;
        &lt;li&gt;📊 GST calculation with final payable amount&lt;/li&gt;
        &lt;li&gt;📄 Printable professional report&lt;/li&gt;
        &lt;li&gt;📐 Final rate per meter calculation&lt;/li&gt;
    &lt;/ul&gt;

    &lt;hr&gt;

    &lt;h2&gt;1. Project Configuration Parameters&lt;/h2&gt;

    &lt;p&gt;
        The tool begins with high-level project inputs:
    &lt;/p&gt;

    &lt;ul&gt;
        &lt;li&gt;&lt;b&gt;Total Length (km):&lt;/b&gt; Defines project scale&lt;/li&gt;
        &lt;li&gt;&lt;b&gt;Bulk Discount (%):&lt;/b&gt; Applied to material costs&lt;/li&gt;
        &lt;li&gt;&lt;b&gt;Labour Efficiency (%):&lt;/b&gt; Reduces labour cost due to productivity gains&lt;/li&gt;
        &lt;li&gt;&lt;b&gt;GST Rate (%):&lt;/b&gt; Applicable tax rate&lt;/li&gt;
    &lt;/ul&gt;

    &lt;p&gt;
        These parameters simulate &lt;b&gt;real-world large project economics&lt;/b&gt;.
    &lt;/p&gt;

    &lt;hr&gt;

    &lt;h2&gt;2. Base Unit Analysis (2 Meter Segment)&lt;/h2&gt;

    &lt;p&gt;
        The calculation is based on a &lt;b&gt;standard barricading unit of 2 meters&lt;/b&gt;. 
        All material and labour inputs are defined per unit length.
    &lt;/p&gt;

    &lt;h3&gt;📦 Material Components&lt;/h3&gt;
    &lt;ul&gt;
        &lt;li&gt;Vertical Balli&lt;/li&gt;
        &lt;li&gt;Horizontal Balli&lt;/li&gt;
        &lt;li&gt;Binding Wire&lt;/li&gt;
        &lt;li&gt;Nails&lt;/li&gt;
    &lt;/ul&gt;

    &lt;h3&gt;👷 Labour Components&lt;/h3&gt;
    &lt;ul&gt;
        &lt;li&gt;Mazdoor (Skilled/Unskilled)&lt;/li&gt;
        &lt;li&gt;Supervisor&lt;/li&gt;
    &lt;/ul&gt;

    &lt;p&gt;
        Each component is defined by:
    &lt;/p&gt;
    &lt;ul&gt;
        &lt;li&gt;Quantity per 2m&lt;/li&gt;
        &lt;li&gt;Unit Rate (₹)&lt;/li&gt;
    &lt;/ul&gt;

    &lt;hr&gt;

    &lt;h2&gt;3. Project Scaling Logic&lt;/h2&gt;

    &lt;p&gt;
        The tool converts unit-level data into full project quantities:
    &lt;/p&gt;

    &lt;pre style=&quot;background:#f1f5f9; padding:10px;&quot;&gt;
Total Length (m) = Length (km) × 1000  
Total Units = Total Length / 2
    &lt;/pre&gt;

    &lt;p&gt;
        Example for 100 km:
    &lt;/p&gt;
    &lt;ul&gt;
        &lt;li&gt;Total Length = 100,000 m&lt;/li&gt;
        &lt;li&gt;Total Units = 50,000 barricade segments&lt;/li&gt;
    &lt;/ul&gt;

    &lt;hr&gt;

    &lt;h2&gt;4. Economy of Scale Adjustments&lt;/h2&gt;

    &lt;h3&gt;📉 Material Discount&lt;/h3&gt;
    &lt;p&gt;
        Bulk procurement reduces material cost:
    &lt;/p&gt;

    &lt;pre style=&quot;background:#f1f5f9; padding:10px;&quot;&gt;
Bulk Material Cost = Base Cost × (1 − Discount %)
    &lt;/pre&gt;

    &lt;h3&gt;⚡ Labour Efficiency&lt;/h3&gt;
    &lt;p&gt;
        Repetitive work increases productivity:
    &lt;/p&gt;

    &lt;pre style=&quot;background:#f1f5f9; padding:10px;&quot;&gt;
Effective Labour Cost = Base Labour × (1 − Efficiency %)
    &lt;/pre&gt;

    &lt;p&gt;
        This reflects &lt;b&gt;real construction site conditions&lt;/b&gt;.
    &lt;/p&gt;

    &lt;hr&gt;

    &lt;h2&gt;5. Cost Build-Up Structure&lt;/h2&gt;

    &lt;p&gt;
        The tool follows a standard engineering cost hierarchy:
    &lt;/p&gt;

    &lt;ol&gt;
        &lt;li&gt;&lt;b&gt;Prime Cost&lt;/b&gt; = Material + Labour&lt;/li&gt;
        &lt;li&gt;&lt;b&gt;Add T&amp;P / Transportation&lt;/b&gt;&lt;/li&gt;
        &lt;li&gt;&lt;b&gt;Add Contractor Profit&lt;/b&gt;&lt;/li&gt;
        &lt;li&gt;&lt;b&gt;Net Taxable Amount&lt;/b&gt;&lt;/li&gt;
        &lt;li&gt;&lt;b&gt;Add GST&lt;/b&gt;&lt;/li&gt;
        &lt;li&gt;&lt;b&gt;Grand Total Project Cost&lt;/b&gt;&lt;/li&gt;
    &lt;/ol&gt;

    &lt;hr&gt;

    &lt;h2&gt;6. Overheads &amp; Profit&lt;/h2&gt;

    &lt;ul&gt;
        &lt;li&gt;&lt;b&gt;T&amp;P (Tools &amp; Plant):&lt;/b&gt; Typically 3–10%&lt;/li&gt;
        &lt;li&gt;&lt;b&gt;Contractor Profit:&lt;/b&gt; Typically 8–15%&lt;/li&gt;
    &lt;/ul&gt;

    &lt;p&gt;
        These are applied on the &lt;b&gt;prime cost&lt;/b&gt; to determine final project valuation.
    &lt;/p&gt;

    &lt;hr&gt;

    &lt;h2&gt;7. GST Calculation&lt;/h2&gt;

    &lt;p&gt;
        GST is applied on the taxable amount:
    &lt;/p&gt;

    &lt;pre style=&quot;background:#f1f5f9; padding:10px;&quot;&gt;
GST Amount = Taxable Value × GST Rate
    &lt;/pre&gt;

    &lt;p&gt;
        The tool also highlights:
    &lt;/p&gt;
    &lt;ul&gt;
        &lt;li&gt;Total GST payable&lt;/li&gt;
        &lt;li&gt;Per meter GST impact&lt;/li&gt;
        &lt;li&gt;Input Tax Credit (ITC) relevance&lt;/li&gt;
    &lt;/ul&gt;

    &lt;hr&gt;

    &lt;h2&gt;8. Final Output Metrics&lt;/h2&gt;

    &lt;p&gt;
        The system generates key engineering outputs:
    &lt;/p&gt;

    &lt;ul&gt;
        &lt;li&gt;Total Project Cost (₹)&lt;/li&gt;
        &lt;li&gt;Taxable Cost&lt;/li&gt;
        &lt;li&gt;GST Amount&lt;/li&gt;
        &lt;li&gt;&lt;b&gt;Rate per Meter (₹/m)&lt;/b&gt;&lt;/li&gt;
        &lt;li&gt;&lt;b&gt;All-Inclusive Rate (₹/m)&lt;/b&gt;&lt;/li&gt;
    &lt;/ul&gt;

    &lt;p&gt;
        These values are critical for:
    &lt;/p&gt;
    &lt;ul&gt;
        &lt;li&gt;BOQ preparation&lt;/li&gt;
        &lt;li&gt;Tender submission&lt;/li&gt;
        &lt;li&gt;Rate justification&lt;/li&gt;
    &lt;/ul&gt;

    &lt;hr&gt;

    &lt;h2&gt;9. Report Generation&lt;/h2&gt;

    &lt;p&gt;
        The tool produces a &lt;b&gt;professional printable report&lt;/b&gt; including:
    &lt;/p&gt;

    &lt;ul&gt;
        &lt;li&gt;Project scope summary&lt;/li&gt;
        &lt;li&gt;Material &amp; labour analysis&lt;/li&gt;
        &lt;li&gt;Detailed cost breakdown&lt;/li&gt;
        &lt;li&gt;Final rate analysis&lt;/li&gt;
        &lt;li&gt;Technical observations&lt;/li&gt;
    &lt;/ul&gt;

    &lt;p&gt;
        This can be directly used for:
    &lt;/p&gt;
    &lt;ul&gt;
        &lt;li&gt;Client submission&lt;/li&gt;
        &lt;li&gt;Internal approvals&lt;/li&gt;
        &lt;li&gt;Audit documentation&lt;/li&gt;
    &lt;/ul&gt;

    &lt;hr&gt;

    &lt;h2&gt;10. Engineering Insights&lt;/h2&gt;

    &lt;ul&gt;
        &lt;li&gt;✔ Large projects benefit significantly from bulk procurement&lt;/li&gt;
        &lt;li&gt;✔ Labour productivity improves with repetitive work&lt;/li&gt;
        &lt;li&gt;✔ GST forms a major cost component in infrastructure works&lt;/li&gt;
        &lt;li&gt;✔ Per meter rate is key for comparison with schedule rates&lt;/li&gt;
    &lt;/ul&gt;

    &lt;hr&gt;

    &lt;h2&gt;11. Advantages&lt;/h2&gt;

    &lt;ul&gt;
        &lt;li&gt;✔ Fast and accurate estimation&lt;/li&gt;
        &lt;li&gt;✔ Eliminates manual calculation errors&lt;/li&gt;
        &lt;li&gt;✔ Highly customizable inputs&lt;/li&gt;
        &lt;li&gt;✔ Suitable for contractors and engineers&lt;/li&gt;
        &lt;li&gt;✔ Works completely offline&lt;/li&gt;
    &lt;/ul&gt;

&lt;/div&gt;

&lt;script&gt;
function generateReport() {
    const getVal = (id) =&gt; parseFloat(document.getElementById(id).value) || 0;

    // 1. BASE UNIT CALCULATIONS (2m)
    let v_t = getVal(&#39;v_qty&#39;) * getVal(&#39;v_rate&#39;);
    let h_t = getVal(&#39;h_qty&#39;) * getVal(&#39;h_rate&#39;);
    let w_t = getVal(&#39;w_qty&#39;) * getVal(&#39;w_rate&#39;);
    let n_t = getVal(&#39;n_qty&#39;) * getVal(&#39;n_rate&#39;);
    let mat_sub_unit = v_t + h_t + w_t + n_t;

    let m_t = getVal(&#39;m_qty&#39;) * getVal(&#39;m_rate&#39;);
    let s_t = getVal(&#39;s_qty&#39;) * getVal(&#39;s_rate&#39;);
    let lab_sub_unit = m_t + s_t;

    // 2. PROJECT SCALING
    const km = getVal(&#39;total_km&#39;);
    const total_m = km * 1000;
    const total_units = total_m / 2;
    
    // Efficiency Adjustments
    const m_disc = (100 - getVal(&#39;bulk_disc&#39;)) / 100;
    const l_eff = (100 - getVal(&#39;labour_eff&#39;)) / 100;

    let bulk_mat_total = (mat_sub_unit * total_units) * m_disc;
    let bulk_lab_total = (lab_sub_unit * total_units) * l_eff;
    
    let prime_cost = bulk_mat_total + bulk_lab_total;
    let tp_amt = prime_cost * (getVal(&#39;tp_percent&#39;) / 100);
    let net_before_profit = prime_cost + tp_amt;
    let profit_amt = net_before_profit * (getVal(&#39;profit_percent&#39;) / 100);
    
    let taxable_total = net_before_profit + profit_amt;
    let gst_amt = taxable_total * (getVal(&#39;gst_rate&#39;) / 100);
    let grand_total = taxable_total + gst_amt;

    document.getElementById(&#39;output&#39;).innerHTML = `
        &lt;div style=&quot;text-align:right&quot;&gt;&lt;button class=&quot;no-print&quot; onclick=&quot;window.print()&quot;&gt;Print Project Report&lt;/button&gt;&lt;/div&gt;
        &lt;h2 style=&quot;text-align:center; text-decoration: underline;&quot;&gt;DETAILED ESTIMATE &amp; RATE ANALYSIS&lt;/h2&gt;
        
        &lt;h3&gt;1️⃣ Project Scope&lt;/h3&gt;
        &lt;p&gt;Providing and erecting barricades for a total length of &lt;b&gt;${km.toLocaleString()} km&lt;/b&gt; (${total_m.toLocaleString()} meters).&lt;/p&gt;
        &lt;ul&gt;
            &lt;li&gt;Unit Segment: 2.0 meters&lt;/li&gt;
            &lt;li&gt;Total Units to be Erected: ${total_units.toLocaleString()} Nos.&lt;/li&gt;
            &lt;li&gt;Rental Basis: 1 Day&lt;/li&gt;
        &lt;/ul&gt;

        

        &lt;h3&gt;2️⃣ Material &amp; Labour Analysis (Project Scale)&lt;/h3&gt;
        &lt;table&gt;
            &lt;tr style=&quot;background:#eee&quot;&gt;&lt;th&gt;Description&lt;/th&gt;&lt;th&gt;Unit&lt;/th&gt;&lt;th&gt;Base Rate (₹)&lt;/th&gt;&lt;th&gt;Bulk Total (₹)&lt;/th&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;Materials (Vertical, Horizontal, Binding)&lt;/td&gt;&lt;td&gt;Job&lt;/td&gt;&lt;td&gt;${mat_sub_unit.toFixed(2)} / 2m&lt;/td&gt;&lt;td&gt;${bulk_mat_total.toLocaleString(&#39;en-IN&#39;, {maximumFractionDigits:2})}&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;Labour (Mazdoor &amp; Supervisor)&lt;/td&gt;&lt;td&gt;Job&lt;/td&gt;&lt;td&gt;${lab_sub_unit.toFixed(2)} / 2m&lt;/td&gt;&lt;td&gt;${bulk_lab_total.toLocaleString(&#39;en-IN&#39;, {maximumFractionDigits:2})}&lt;/td&gt;&lt;/tr&gt;
            &lt;tr style=&quot;font-weight:bold&quot;&gt;&lt;td&gt;Total Prime Cost&lt;/td&gt;&lt;td colspan=&quot;2&quot;&gt;After Economy of Scale&lt;/td&gt;&lt;td&gt;₹ ${prime_cost.toLocaleString(&#39;en-IN&#39;, {maximumFractionDigits:2})}&lt;/td&gt;&lt;/tr&gt;
        &lt;/table&gt;

        &lt;h3&gt;3️⃣ Detailed Cost Breakdown&lt;/h3&gt;
        &lt;table&gt;
            &lt;tr&gt;&lt;td&gt;Total Prime Cost&lt;/td&gt;&lt;td style=&quot;text-align:right&quot;&gt;₹ ${prime_cost.toLocaleString(&#39;en-IN&#39;, {maximumFractionDigits:2})}&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;Add T&amp;P / Transportation @ ${getVal(&#39;tp_percent&#39;)}%&lt;/td&gt;&lt;td style=&quot;text-align:right&quot;&gt;₹ ${tp_amt.toLocaleString(&#39;en-IN&#39;, {maximumFractionDigits:2})}&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;Add Contractor Profit @ ${getVal(&#39;profit_percent&#39;)}%&lt;/td&gt;&lt;td style=&quot;text-align:right&quot;&gt;₹ ${profit_amt.toLocaleString(&#39;en-IN&#39;, {maximumFractionDigits:2})}&lt;/td&gt;&lt;/tr&gt;
            &lt;tr class=&quot;gst-text&quot;&gt;&lt;td&gt;Net Taxable Amount&lt;/td&gt;&lt;td style=&quot;text-align:right&quot;&gt;₹ ${taxable_total.toLocaleString(&#39;en-IN&#39;, {maximumFractionDigits:2})}&lt;/td&gt;&lt;/tr&gt;
            &lt;tr class=&quot;gst-text&quot;&gt;&lt;td&gt;Add GST @ ${getVal(&#39;gst_rate&#39;)}%&lt;/td&gt;&lt;td style=&quot;text-align:right&quot;&gt;₹ ${gst_amt.toLocaleString(&#39;en-IN&#39;, {maximumFractionDigits:2})}&lt;/td&gt;&lt;/tr&gt;
            &lt;tr style=&quot;background:var(--primary); color:white; font-size:1.2em&quot;&gt;
                &lt;td&gt;GRAND TOTAL PROJECT COST&lt;/td&gt;
                &lt;td style=&quot;text-align:right&quot;&gt;₹ ${grand_total.toLocaleString(&#39;en-IN&#39;, {maximumFractionDigits:2})}&lt;/td&gt;
            &lt;/tr&gt;
        &lt;/table&gt;

        &lt;div class=&quot;total-highlight&quot;&gt;
            &lt;h3 style=&quot;margin:0&quot;&gt;4️⃣ Final Rate Per Meter&lt;/h3&gt;
            &lt;p&gt;Taxable Rate per Meter: &lt;b&gt;₹ ${(taxable_total / total_m).toFixed(2)}&lt;/b&gt;&lt;/p&gt;
            &lt;p class=&quot;gst-text&quot;&gt;GST per Meter: ₹ ${(gst_amt / total_m).toFixed(2)}&lt;/p&gt;
            &lt;hr&gt;
            &lt;p style=&quot;font-size:1.5em; margin:0&quot;&gt;&lt;strong&gt;All-Inclusive Rate: ₹ ${(grand_total / total_m).toFixed(2)} / Meter&lt;/strong&gt;&lt;/p&gt;
        &lt;/div&gt;

        &lt;h3&gt;5️⃣ Technical Observations for 100km Project&lt;/h3&gt;
        &lt;ul&gt;
            &lt;li&gt;&lt;b&gt;Economy of Scale:&lt;/b&gt; A 15% discount is applied to materials due to wholesale procurement.&lt;/li&gt;
            &lt;li&gt;&lt;b&gt;Labour Productivity:&lt;/b&gt; A 10% efficiency gain is assumed for repetitive work over long stretches.&lt;/li&gt;
            &lt;li&gt;&lt;b&gt;GST Impact:&lt;/b&gt; The project involves a massive tax component of ₹ ${gst_amt.toLocaleString(&#39;en-IN&#39;, {maximumFractionDigits:0})}, which is eligible for Input Tax Credit (ITC).&lt;/li&gt;
        &lt;/ul&gt;
    `;
}
&lt;/script&gt;

&lt;/body&gt;
&lt;/html&gt;&lt;div class=&quot;blogger-post-footer&quot;&gt;https://yogipwd.blogspot.com/&lt;/div&gt;</description><link>https://www.yogipwd.com/2026/03/barricade-rate-analysis-calculator.html</link><author>noreply@blogger.com (Yogendra)</author><thr:total>0</thr:total></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-1074964965522467583.post-7263837756205277002</guid><pubDate>Sat, 28 Feb 2026 13:57:02 +0000</pubDate><atom:updated>2026-04-24T19:40:51.172+05:30</atom:updated><title>EPC Schedule H payment plus physical progress tracking</title><description>&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;&lt;/meta&gt;
    &lt;meta content=&quot;width=device-width, initial-scale=1.0&quot; name=&quot;viewport&quot;&gt;&lt;/meta&gt;
    &lt;title&gt;EPC Pro: Progress &amp; Billing&lt;/title&gt;
    
    &lt;script src=&quot;https://cdn.jsdelivr.net/npm/chart.js&quot;&gt;&lt;/script&gt;

    &lt;style&gt;
        :root {
            --primary: #2c3e50; --accent: #3498db; --success: #27ae60;
            --danger: #e74c3c; --warning: #f39c12; --light: #f4f7f6;
        }

        body { font-family: &#39;Segoe UI&#39;, sans-serif; background: var(--light); margin: 0; padding: 10px; color: #333; }
        .container { max-width: 1200px; margin: auto; }
        
        .nav-bar { 
            display: flex; justify-content: space-between; align-items: center; 
            background: white; padding: 2px 5px; border-radius: 8px; 
            box-shadow: 0 2px 5px rgba(0,0,0,0.1); margin-bottom: 15px;
        }

        .card { background: white; padding: 15px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); margin-bottom: 15px; }
        .grid-dashboard { display: grid; grid-template-columns: 1.5fr 1fr; gap: 15px; margin-bottom: 15px; }
        
        .table-wrapper { overflow-x: auto; background: white; border-radius: 4px; margin-top: 10px; border: 1px solid #eee; }
        table { width: 100%; border-collapse: collapse; min-width: 600px; }
        th { background: var(--primary); color: white; padding: 2px; text-align: left; font-size: 11px; text-transform: uppercase; }
        td { padding: 8px; border-bottom: 1px solid #eee; font-size: 12px; }
        
        .milestone-row { background: #e8f4fd; font-weight: bold; }
        .status { padding: 2px 6px; border-radius: 4px; font-size: 10px; font-weight: bold; }
        .status-paid { background: #d4edda; color: #155724; }
        .status-pending { background: #f8d7da; color: #721c24; }

        .input-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 10px; margin-top: 10px; }
        label { font-size: 11px; font-weight: bold; color: #666; display: block; margin-bottom: 3px; }
        input, select { width: 100%; padding: 6px; border: 1px solid #ddd; border-radius: 4px; font-size: 12px; }

        .btn { padding: 7px 12px; border: none; border-radius: 4px; cursor: pointer; font-weight: 600; font-size: 11px; }
        .btn-primary { background: var(--accent); color: white; }
        .btn-success { background: var(--success); color: white; }
        .btn-danger { background: var(--danger); color: white; }

        .stat-card { flex: 1; padding: 10px; border-radius: 8px; color: white; text-align: center; }
        .section-title { border-left: 5px solid var(--accent); padding-left: 10px; margin: 20px 0 10px 0; color: var(--primary); font-size: 16px; }
        
        input.table-input { width: 40px; padding: 2px; border: 1px solid #ccc; }
      .row-selected {
    background-color: #d6eaf8 !important;
}
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;div class=&quot;container&quot;&gt;
    &lt;div class=&quot;nav-bar&quot;&gt;
      
        &lt;div style=&quot;align-items: center; display: flex; gap: 10px;&quot;&gt;
            &lt;strong&gt;PROJ:&lt;/strong&gt;
            &lt;select id=&quot;projectSelector&quot; onchange=&quot;switchProject()&quot;&gt;&lt;/select&gt;
        &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
  
      
        &lt;div&gt;
          	&lt;button class=&quot;btn&quot; onclick=&quot;createNewProject()&quot; style=&quot;background:blue; color:white;&quot;&gt;+ New&lt;/button&gt;
            &lt;button class=&quot;btn&quot; onclick=&quot;exportJSON()&quot; style=&quot;background: green; color: white;&quot;&gt;Export JSON&lt;/button&gt;
         
            &lt;input type=&quot;file&quot; id=&quot;importJSONFile&quot; style=&quot;display:none&quot; onchange=&quot;importJSON(event)&quot;&gt;
			&lt;button class=&quot;btn&quot; onclick=&quot;document.getElementById(&#39;importJSONFile&#39;).click()&quot; style=&quot;background:Magenta; color:white;&quot;&gt;Import JSON&lt;/button&gt;
            
            &lt;button class=&quot;btn&quot; onclick=&quot;deleteCurrentProject()&quot; style=&quot;background:red; color:white;&quot;&gt;Delete Project&lt;/button&gt;
    	&lt;/div&gt;
        
    &lt;div class=&quot;grid-dashboard&quot;&gt;
        &lt;div class=&quot;card&quot;&gt;
            &lt;h4 style=&quot;margin: 0 0 10px 0;&quot;&gt;Settings&lt;/h4&gt;
            &lt;div class=&quot;input-row&quot;&gt;
                &lt;div&gt;&lt;label&gt;Project Name&lt;/label&gt;&lt;input id=&quot;projNameInput&quot; onblur=&quot;renameProject()&quot; type=&quot;text&quot; /&gt;&lt;/div&gt;
            &lt;/div&gt;
          
          	&lt;div class=&quot;input-row&quot;&gt;
          		&lt;div&gt;&lt;label&gt;Contract Value (₹)&lt;/label&gt;&lt;input id=&quot;projBudgetInput&quot; onchange=&quot;updateProjectMeta()&quot; type=&quot;number&quot; /&gt;&lt;/div&gt;
            &lt;/div&gt;
          
            &lt;div style=&quot;border-top: 1px solid #eee; margin-top: 15px; padding-top: 10px;&quot;&gt;
                &lt;label&gt;Set Physical Progress Milestones (%)&lt;/label&gt;
                &lt;div style=&quot;display: flex; gap: 8px; margin-top: 5px;&quot;&gt;
                    &lt;input id=&quot;newMilestonePercent&quot; placeholder=&quot;e.g. 25&quot; style=&quot;width: 70px;&quot; type=&quot;number&quot; /&gt;
                  &lt;button class=&quot;btn btn-primary&quot; onclick=&quot;addGlobalMilestone()&quot;&gt;Add&lt;/button&gt;
                  	
                &lt;/div&gt;
                &lt;div id=&quot;milestoneList&quot; style=&quot;display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px;&quot;&gt;&lt;/div&gt;
            &lt;/div&gt;
           
        &lt;/div&gt;
      

        &lt;div class=&quot;card&quot; style=&quot;background: var(--primary); color: white;&quot;&gt;
            &lt;h4 style=&quot;margin: 0; opacity: 0.8;&quot;&gt;Financial Summary&lt;/h4&gt;
            &lt;div class=&quot;stat-card&quot; style=&quot;background: rgba(255,255,255,0.1); margin: 10px 0;&quot;&gt;
                &lt;small&gt;Total Earned&lt;/small&gt;
                &lt;div style=&quot;font-size: 20px; font-weight: bold;&quot;&gt;₹&lt;span id=&quot;totalSpent&quot;&gt;0&lt;/span&gt;&lt;/div&gt;
                &lt;small&gt;&lt;span id=&quot;overallPercent&quot;&gt;0&lt;/span&gt;% Complete&lt;/small&gt;
              &lt;button class=&quot;btn btn-primary&quot; onclick=&quot;exportPDF()&quot; 
        style=&quot;margin-top:10px;width:100%;&quot;&gt;
    Export PDF
&lt;/button&gt;
            &lt;/div&gt;
            &lt;div style=&quot;display: flex; gap: 10px;&quot;&gt;
                &lt;div class=&quot;stat-card&quot; style=&quot;background: var(--success);&quot;&gt;&lt;small&gt;Paid&lt;/small&gt;&lt;br /&gt;&lt;b id=&quot;dispPaid&quot;&gt;0&lt;/b&gt;&lt;/div&gt;
                &lt;div class=&quot;stat-card&quot; style=&quot;background: var(--warning);&quot;&gt;&lt;small&gt;Bal&lt;/small&gt;&lt;br /&gt;&lt;b id=&quot;dispBalance&quot;&gt;0&lt;/b&gt;&lt;/div&gt;
            &lt;/div&gt;
            &lt;button class=&quot;btn btn-danger&quot; onclick=&quot;deleteCurrentProject()&quot; style=&quot;margin-top: 10px; width: 100%;&quot;&gt;Delete Project&lt;/button&gt;
        &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;div style=&quot;height: 600px; width: 100%; margin-top: 2px;&quot;&gt;&lt;canvas id=&quot;progressChart&quot;&gt;&lt;/canvas&gt;&lt;/div&gt;

    &lt;h3 class=&quot;section-title&quot;&gt;Physical Progress Tracking&lt;/h3&gt;
    &lt;div class=&quot;card&quot;&gt;
        &lt;div class=&quot;input-row&quot;&gt;
            &lt;div style=&quot;grid-column: span 2;&quot;&gt;&lt;label&gt;Activity&lt;/label&gt;&lt;select id=&quot;actName&quot;&gt;&lt;/select&gt;&lt;/div&gt;
        &lt;/div&gt;
      
      &lt;div class=&quot;input-row&quot;&gt;    
            &lt;div&gt;&lt;label&gt;Total Qty&lt;/label&gt;&lt;input id=&quot;actTotalQty&quot; type=&quot;number&quot; /&gt;&lt;/div&gt;
        &lt;/div&gt;
      
      &lt;div class=&quot;input-row&quot;&gt;
            &lt;div&gt;&lt;label&gt;Achieved&lt;/label&gt;&lt;input id=&quot;actAchievedQty&quot; type=&quot;number&quot; /&gt;&lt;/div&gt;
        &lt;/div&gt;
      
      &lt;div class=&quot;input-row&quot;&gt;
            &lt;div style=&quot;align-items: flex-end; display: flex;&quot;&gt;&lt;button class=&quot;btn btn-success&quot; onclick=&quot;saveActivity()&quot; style=&quot;width: 100%;&quot;&gt;Update&lt;/button&gt;&lt;/div&gt;
        &lt;/div&gt;
      
      
        &lt;div class=&quot;table-wrapper&quot;&gt;
            &lt;table&gt;
                &lt;thead&gt;&lt;tr&gt;&lt;th&gt;Activity&lt;/th&gt;&lt;th&gt;Qty&lt;/th&gt;&lt;th&gt;Progress&lt;/th&gt;&lt;th&gt;Status&lt;/th&gt;&lt;th&gt;Action&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;
                &lt;tbody id=&quot;tableBody&quot;&gt;&lt;/tbody&gt;
            &lt;/table&gt;
        &lt;/div&gt;
    &lt;/div&gt;

    &lt;h3 class=&quot;section-title&quot;&gt;EPC Billing (Schedule-H)&lt;/h3&gt;
    
    &lt;div class=&quot;card&quot;&gt;
        &lt;div style=&quot;align-items: center; display: flex; gap: 10px; margin-bottom: 10px;&quot;&gt;
            &lt;button class=&quot;btn btn-primary&quot; onclick=&quot;addMilestone()&quot;&gt;+ Add Stage&lt;/button&gt;
            &lt;input id=&quot;certNumber&quot; placeholder=&quot;Cert No&quot; style=&quot;width: 90px;&quot; /&gt;
            &lt;button class=&quot;btn btn-success&quot; onclick=&quot;approveSelected()&quot;&gt;Approve &amp;amp; Pay&lt;/button&gt;
        &lt;/div&gt;
        &lt;div class=&quot;table-wrapper&quot;&gt;
            &lt;table&gt;
                &lt;thead&gt;
                    &lt;tr&gt;
                        &lt;th style=&quot;width: 20px;&quot;&gt;&lt;input onclick=&quot;toggleAll(this)&quot; type=&quot;checkbox&quot; /&gt;&lt;/th&gt;
                        &lt;th&gt;Milestone / Activity&lt;/th&gt;
                        &lt;th&gt;MS %&lt;/th&gt;
                        &lt;th&gt;Weight %&lt;/th&gt;
                        &lt;th&gt;Exec (%)&lt;/th&gt;
                        &lt;th&gt;Stage Value&lt;/th&gt;
                        &lt;th&gt;Payable&lt;/th&gt;
                        &lt;th&gt;Status&lt;/th&gt;
						&lt;th&gt;Action&lt;/th&gt;
                    &lt;/tr&gt;
                &lt;/thead&gt;
                &lt;tbody id=&quot;billingTableBody&quot;&gt;&lt;/tbody&gt;
            &lt;/table&gt;
        &lt;/div&gt;
    &lt;/div&gt;
  
  
  &lt;div class=&quot;container&quot; style=&quot;max-width:1000px; margin:auto; line-height:1.6; font-family:Arial, sans-serif;&quot;&gt;

&lt;h1 style=&quot;text-align:center; color:#2c3e50;&quot;&gt;
EPC Project Monitoring &amp; Schedule-H Payment Tracking System
&lt;/h1&gt;

&lt;p style=&quot;text-align:center; color:#555;&quot;&gt;
A Professional Digital Solution for Integrated Physical Progress and Financial Billing Control
&lt;/p&gt;

&lt;hr&gt;

&lt;h2&gt;1. Introduction&lt;/h2&gt;
&lt;p&gt;
This tool is a comprehensive &lt;b&gt;Engineering, Procurement &amp; Construction (EPC)&lt;/b&gt; project monitoring system 
designed to seamlessly integrate &lt;b&gt;physical progress tracking&lt;/b&gt; with &lt;b&gt;financial billing (Schedule-H)&lt;/b&gt;.
&lt;/p&gt;

&lt;p&gt;
It eliminates manual reconciliation between site progress and billing by creating a 
&lt;b&gt;data-driven, automated linkage&lt;/b&gt; between executed quantities and payable amounts.
&lt;/p&gt;

---

&lt;h2&gt;2. Core Concept&lt;/h2&gt;

&lt;p&gt;The system operates on three interconnected layers:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;b&gt;Physical Progress Layer&lt;/b&gt; – Tracks actual executed quantities on site&lt;/li&gt;
&lt;li&gt;&lt;b&gt;Billing Layer (Schedule-H)&lt;/b&gt; – Defines payment structure through milestones and stages&lt;/li&gt;
&lt;li&gt;&lt;b&gt;Financial Layer&lt;/b&gt; – Calculates payable, paid, and balance dynamically&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;
This ensures that &lt;b&gt;payments are always proportional to actual work completed&lt;/b&gt;, 
which is a key requirement in EPC contracts.
&lt;/p&gt;

---

&lt;h2&gt;3. Physical Progress Tracking&lt;/h2&gt;

&lt;p&gt;
Each activity (e.g., DBM, PQC, Culvert, Drain, etc.) is monitored using:
&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Total Quantity&lt;/li&gt;
&lt;li&gt;Achieved Quantity&lt;/li&gt;
&lt;li&gt;Automatic % Completion&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;b&gt;Formula Used:&lt;/b&gt;&lt;/p&gt;

&lt;p style=&quot;background:#f4f6f7; padding:10px; border-left:4px solid #3498db;&quot;&gt;
% Progress = (Achieved Quantity / Total Quantity) × 100
&lt;/p&gt;

&lt;p&gt;
This data acts as the &lt;b&gt;primary driver&lt;/b&gt; for all financial calculations.
&lt;/p&gt;

---

&lt;h2&gt;4. Schedule-H Billing System&lt;/h2&gt;

&lt;p&gt;
The billing module follows a structured hierarchy:
&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;b&gt;Milestones&lt;/b&gt; → Represent major project stages (e.g., Earthwork, Pavement, Structures)&lt;/li&gt;
&lt;li&gt;&lt;b&gt;Sub-Activities (Stages)&lt;/b&gt; → Linked directly to physical work items&lt;/li&gt;
&lt;li&gt;&lt;b&gt;Weightage (%)&lt;/b&gt; → Defines financial importance of each stage&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;
Each stage derives its payable amount based on:
&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Project Budget&lt;/li&gt;
&lt;li&gt;Milestone %&lt;/li&gt;
&lt;li&gt;Stage Weight %&lt;/li&gt;
&lt;li&gt;Physical Progress&lt;/li&gt;
&lt;/ul&gt;

---

&lt;h2&gt;5. Financial Logic&lt;/h2&gt;

&lt;p&gt;&lt;b&gt;Stage Maximum Value:&lt;/b&gt;&lt;/p&gt;

&lt;p style=&quot;background:#f4f6f7; padding:10px; border-left:4px solid #27ae60;&quot;&gt;
Stage Value = Budget × (Milestone % / 100) × (Stage Weight % / 100)
&lt;/p&gt;

&lt;p&gt;&lt;b&gt;Payable Amount:&lt;/b&gt;&lt;/p&gt;

&lt;p style=&quot;background:#f4f6f7; padding:10px; border-left:4px solid #e67e22;&quot;&gt;
Payable = Stage Value × (Physical Progress / 100)
&lt;/p&gt;

&lt;p&gt;&lt;b&gt;Final Payment Rule:&lt;/b&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Payment is capped at executed value&lt;/li&gt;
&lt;li&gt;No overpayment allowed&lt;/li&gt;
&lt;li&gt;Already paid amounts are deducted automatically&lt;/li&gt;
&lt;/ul&gt;

---

&lt;h2&gt;6. Smart Approval System&lt;/h2&gt;

&lt;p&gt;
The tool includes a &lt;b&gt;checkbox-based approval system&lt;/b&gt; where:
&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Selected activities are approved in batch&lt;/li&gt;
&lt;li&gt;System automatically updates payable → paid&lt;/li&gt;
&lt;li&gt;Prevents duplicate or excess payments&lt;/li&gt;
&lt;/ul&gt;

---

&lt;h2&gt;7. Global Milestones (Physical Targets)&lt;/h2&gt;

&lt;p&gt;
Users can define global physical milestones (e.g., 25%, 50%, 75%, 100%).
&lt;/p&gt;

&lt;p&gt;
The system calculates &lt;b&gt;overall physical progress in cost terms&lt;/b&gt; and highlights:
&lt;/p&gt;

&lt;ul&gt;
&lt;li style=&quot;color:green;&quot;&gt;&lt;b&gt;Achieved Milestones&lt;/b&gt;&lt;/li&gt;
&lt;li style=&quot;color:orange;&quot;&gt;&lt;b&gt;Pending Milestones&lt;/b&gt;&lt;/li&gt;
&lt;/ul&gt;

---

&lt;h2&gt;8. Data Management System&lt;/h2&gt;

&lt;p&gt;
The tool uses &lt;b&gt;IndexedDB (Browser Database)&lt;/b&gt; for:
&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Offline data storage&lt;/li&gt;
&lt;li&gt;Multi-project handling&lt;/li&gt;
&lt;li&gt;Fast performance without server dependency&lt;/li&gt;
&lt;/ul&gt;

---

&lt;h2&gt;9. Smart JSON Import / Export&lt;/h2&gt;

&lt;p&gt;
A powerful &lt;b&gt;data portability system&lt;/b&gt; is built-in:
&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Export single / multiple / all projects&lt;/li&gt;
&lt;li&gt;Import with &lt;b&gt;smart merge logic&lt;/b&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;b&gt;Smart Merge Features:&lt;/b&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Project matching by name&lt;/li&gt;
&lt;li&gt;Duplicate prevention&lt;/li&gt;
&lt;li&gt;Latest progress preservation&lt;/li&gt;
&lt;li&gt;Max-value logic for quantities and payments&lt;/li&gt;
&lt;/ul&gt;

---

&lt;h2&gt;10. Visualization (Progress Chart)&lt;/h2&gt;

&lt;p&gt;
A dynamic bar chart provides:
&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Activity-wise progress (%)&lt;/li&gt;
&lt;li&gt;Instant visual performance tracking&lt;/li&gt;
&lt;li&gt;Better decision-making for engineers and managers&lt;/li&gt;
&lt;/ul&gt;

---

&lt;h2&gt;11. PDF Reporting&lt;/h2&gt;

&lt;p&gt;
The system generates a professional report including:
&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Project summary&lt;/li&gt;
&lt;li&gt;Financial progress&lt;/li&gt;
&lt;li&gt;Physical progress&lt;/li&gt;
&lt;li&gt;Schedule-H breakdown&lt;/li&gt;
&lt;li&gt;Graphical representation&lt;/li&gt;
&lt;/ul&gt;

---

&lt;h2&gt;12. Key Advantages&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;✔ Eliminates manual billing errors&lt;/li&gt;
&lt;li&gt;✔ Ensures payment transparency&lt;/li&gt;
&lt;li&gt;✔ Links field progress with finance&lt;/li&gt;
&lt;li&gt;✔ Supports EPC contract compliance&lt;/li&gt;
&lt;li&gt;✔ Works offline (no server required)&lt;/li&gt;
&lt;li&gt;✔ Scalable for multiple projects&lt;/li&gt;
&lt;/ul&gt;

---

&lt;h2&gt;13. Ideal Use Cases&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Highway Projects (Flexible &amp; Rigid Pavements)&lt;/li&gt;
&lt;li&gt;Bridge &amp; Structure Works&lt;/li&gt;
&lt;li&gt;Urban Infrastructure Projects&lt;/li&gt;
&lt;li&gt;Government EPC Contracts&lt;/li&gt;
&lt;li&gt;PMC &amp; Contractor Billing Systems&lt;/li&gt;
&lt;/ul&gt;

&lt;/div&gt;
  
  

&lt;script&gt;
    let library = { currentProjectId: null, projects: {} };
    let editIdx = -1; let chart = null;

    const masterWorkItems = {
   &quot;Roadwork - BT Layers&quot;: [&quot;Site Clearance&quot;,&quot;Sub_grade Flexible&quot;,&quot;Excavation for Road&quot;,&quot;Emabankment/Earthwork/Natural Subgrade&quot;,&quot;Emabankment/Earthwork/Natural Subgrade (BT Widening)&quot;,&quot;Emabankment/Earthwork/Natural Subgrade (BT reconstruction)&quot;,&quot;Sub-Base Course&quot;,&quot;Sub-Base Course(Widening BT)&quot;,&quot;Sub-Base Course(Reconstruction BT)&quot;,&quot;Sub-Base Course(Repair BT)&quot;,&quot;Wet Mix Macadam&quot;,&quot;Non Bituminous Base course&quot;,&quot;Non Bituminous Base course (BT Widening)&quot;,&quot;Non Bituminous Base course (BT Reconstruction)&quot;,&quot;Non Bituminous Base course (BT Repair)&quot;,&quot;Grading I&quot;,&quot;Grading II&quot;,&quot;Dense Bituminous Macadam (DBM)&quot;,&quot;Bituminous Base course&quot;,&quot;Bituminous Base course (Widening)&quot;,&quot;Bituminous Base course (Reconstruction)&quot;,&quot;Bituminous Base course (Repair)&quot;,&quot;Bituminous Concrete (BC)&quot;,&quot;Wearing course (BT Widening)&quot;,&quot;Wearing course (BT Reconstruction)&quot;,&quot;Wearing course (BT Repair)&quot;,&quot;Excavation for Road for Widening BT&quot;,&quot;Excavation for Road for Reconstruction BT&quot;,&quot;Side Shoulders&quot;,&quot;Side Shoulders (Widening)&quot;,&quot;Side Shoulders (Reconstruction)&quot;,&quot;Side Shoulders (Repair)&quot;],
      
   &quot;Roadwork - Rigid Layers&quot;: [&quot;White Topping&quot;,&quot;Sub_grade Rigid&quot;,&quot;Emabankment/Earthwork/Natural Subgrade (Rigid Widening)&quot;,&quot;Emabankment/Earthwork/Natural Subgrade (Rigid reconstruction)&quot;,&quot;Sub-Base Course(Widening Rigid)&quot;,&quot;Sub-Base Course(Reconstruction Rigid)&quot;,&quot;Sub-Base Course(Repair Rigid)&quot;,&quot;Non Bituminous Base course (Rigid Widening)&quot;,&quot;Non Bituminous Base course (Rigid Reconstruction)&quot;,&quot;Dry lean Concrete (DLC)&quot;,&quot;Dry lean Concrete widening (DLC)&quot;,&quot;Dry lean Concrete reconstruction (DLC)&quot;,&quot;Pavement Quality Concrete (PQC)&quot;,&quot;Pavement Quality Concrete (PQC widening)&quot;,&quot;Pavement Quality Concrete (PQC Reconstruction)&quot;,&quot;Pavement Quality Concrete (PQC Repair)&quot;,&quot;Wearing course (Rigid Widening)&quot;,&quot;Wearing course (Rigid Reconstruction)&quot;,&quot;Wearing course (Rigid Repair)&quot;,&quot;Excavation for Road for Widening Rigid&quot;,&quot;Excavation for Road for Reconstruction Rigid&quot;,&quot;Side Shoulders (Paved)&quot;,&quot;Side Shoulders (UnPaved)&quot;,&quot;Soft Side Shoulders (Rigid widening)&quot;,&quot;Soft Side Shoulders (Rigid reconstruction)&quot;],   

  &quot;Structures - Culverts &amp; Walls&quot;: [&quot;Slab Culvert&quot;,&quot;Slab Culvert (Repair)&quot;,&quot;Hume Pipe Culvert&quot;,&quot;Hume Pipe Culvert (Repair)&quot;,&quot;Box Culvert&quot;,&quot;Box Culvert (Repair)&quot;,&quot;PCC retaining wall&quot;,&quot;RCC retaining wall&quot;,&quot;Toe wall&quot;,&quot;Approaches for slab culvert&quot;,&quot;Approaches for HPD&quot;,&quot;Head walls&quot;],

  &quot;Bridges (Minor &amp; Major)&quot;: [&quot;Minor Bridge foundation&quot;,&quot;Minor Bridge Sub-structure&quot;,&quot;Minor Bridge Super-structure&quot;,&quot;Major Bridge foundation&quot;,&quot;Major Bridge Sub-structure&quot;,&quot;Major Bridge Super-structure&quot;,&quot;Bridge Approaches&quot;,&quot;Miscellaneous Bridge works&quot;,&quot;Bridge Bearing&quot;,&quot;Crash Barrier&quot;,&quot;Rigid apron&quot;,&quot;Flexible apron&quot;,&quot;Wing wall&quot;,&quot;Wearing Course&quot;,&quot;Stone Pitching&quot;,&quot;Curtain wall&quot;,&quot;Minor Bridge (Repair)&quot;,&quot;Major Bridge (Repair)&quot;],
      
      &quot;Bridges-2 (Minor &amp; Major)&quot;: [&quot;Minor Bridge foundation-2&quot;,&quot;Minor Bridge Sub-structure-2&quot;,&quot;Minor Bridge Super-structure-2&quot;,&quot;Major Bridge foundation-2&quot;,&quot;Major Bridge Sub-structure-2&quot;,&quot;Major Bridge Super-structure-2&quot;,&quot;Bridge Approaches-2&quot;,&quot;Miscellaneous Bridge works-2&quot;,&quot;Bridge Bearing-2&quot;,&quot;Crash Barrier-2&quot;,&quot;Rigid apron-2&quot;,&quot;Flexible apron-2&quot;,&quot;Wing wall-2&quot;,&quot;Wearing Course-2&quot;,&quot;Stone Pitching-2&quot;,&quot;Curtain wall-2&quot;,&quot;Minor Bridge (Repair)-2&quot;,&quot;Major Bridge (Repair)-2&quot;],
      
           &quot;Bridge Components&quot;: [&quot;Pile foundation&quot;,&quot;Well Foundation&quot;,&quot;Raft Foundation&quot;,&quot;Open Foundation&quot;,&quot;Excavation for Pile foundation&quot;,&quot;Excavation for Well Foundation&quot;,&quot;Excavation for Raft Foundation&quot;,&quot;Excavation for Open Foundation&quot;,&quot;Piers&quot;,&quot;Abutments&quot;,&quot;Pier Caps&quot;,&quot;RCC Girders&quot;,&quot;PSC Girders&quot;,&quot;Composite Girders&quot;,&quot;Deck Slab&quot;,&quot;Pile Cap&quot;],

  &quot;Junctions &amp; Safety&quot;: [&quot;Traffic Signs&quot;,&quot;Major Junctions&quot;,&quot;Minor Junctions&quot;,&quot;Road signs, Markings&quot;,&quot;KM stones&quot;,&quot;Metal Beam Crash barrier&quot;,&quot;Hand Railing for built-up section&quot;,&quot;Solar Blinker&quot;,&quot;Solar Street Light&quot;,&quot;High mast&quot;,&quot;Overhead Gantry Mounted Signs&quot;,&quot;Road Delineators&quot;],

  &quot;Drainage &amp; Utilities&quot;: [&quot;Footpath and Drains&quot;,&quot;Clearing and Grubbing&quot;,&quot;Excavation For Gutter&quot;,&quot;Cover Slab&quot;,&quot;Utility Duct Across the road&quot;,&quot;Approach Crossing&quot;,&quot;Road Side Drains (Earthen)&quot;,&quot;Road Side Drains (RCC covered slab drain)&quot;,&quot;Water Utilities&quot;,&quot;Electrical Utilities&quot;,&quot;Storm water Drain&quot;,&quot;Sewer lines&quot;],

  &quot;Ancillary&quot;: [&quot;Bus Shelter&quot;,&quot;Bus Bay&quot;,&quot;Toilet Block&quot;,&quot;Median Kerb&quot;,&quot;Kerb With Channel&quot;,&quot;Road side Plantation&quot;,&quot;Plantation in Median&quot;,&quot;Blinkers&quot;,&quot;Cateye&quot;,&quot;Staircase&quot;,&quot;Truck lay byes&quot;],
      
  &quot;Project facilities&quot;: [&quot;Cantilever Gantry&quot;, &quot;Solar street Light&quot;,&quot;High Mast&quot;,&quot;Metal beam crash barrier&quot;,&quot;Hand Railing for Built-up sections&quot;,&quot;Protection works for floor&quot;],  

  &quot;General Components&quot;: [&quot;Reinforcement&quot;,&quot;Formwork&quot;,&quot;Finishing&quot;,&quot;Colouring&quot;],

  &quot;Repair works&quot;: [&quot;Repair culvert&quot;,&quot;Diversion&quot;],

  &quot;River Training&quot;: [&quot;Guide Bunds&quot;,&quot;Spurs&quot;,&quot;Groynes&quot;,&quot;Marginal embankment (dyke or levee)&quot;],
      
   &quot;Underpass1&quot;: [&quot;U1_Foundation: On completion of the foundation work of abutments and piers&quot;,&quot;U1_Sub-structure: On completion of abutments and piers with abutment/pier&quot;,&quot;U1_Super-structure: On completion of the super-structure upto deck slab including bearing&quot;,&quot;U1_Miscellaneous Works: On completion of wearing coat, expansion joint, crash barrier, railings and any remaining work associated to bridge including tests on bridge&quot;,&quot;U1_Approaches: On completion of approaches including Wing walls/Return walls, Retaining walls/Reinforced Earth walls, stone pitching, protection works complete in all respect and fit for use&quot;,&quot;ACB on completion of Final work&quot;],
      
   &quot;Underpass2&quot;: [&quot;U2_Foundation: On completion of the foundation work of abutments and piers&quot;,&quot;U2_Sub-structure: On completion of abutments and piers with abutment/pier&quot;,&quot;U2_Super-structure: On completion of the super-structure upto deck slab including bearing&quot;,&quot;U2_Miscellaneous Works: On completion of wearing coat, expansion joint, crash barrier, railings and any remaining work associated to bridge including tests on bridge&quot;,&quot;U2_Approaches: On completion of approaches including Wing walls/Return walls, Retaining walls/Reinforced Earth walls, stone pitching, protection works complete in all respect and fit for use&quot;],
      
   &quot;Underpass3&quot;: [&quot;U3_Foundation: On completion of the foundation work of abutments and piers&quot;,&quot;U3_Sub-structure: On completion of abutments and piers with abutment/pier&quot;,&quot;U3_Super-structure: On completion of the super-structure upto deck slab including bearing&quot;,&quot;U3_Miscellaneous Works: On completion of wearing coat, expansion joint, crash barrier, railings and any remaining work associated to bridge including tests on bridge&quot;,&quot;U3_Approaches: On completion of approaches including Wing walls/Return walls, Retaining walls/Reinforced Earth walls, stone pitching, protection works complete in all respect and fit for use&quot;],
      
   &quot;Other works&quot;: [&quot;Toll Plaza&quot;,&quot;Road side drains/Storm Water&quot;,&quot;Protection works other than approaches to the bridges, elevated sections/flyovers/grade separators and ROBS/RUBs. Including Crash Barrier, NJB, Kerb, etc.&quot;,&quot;Sump and Pumping arrangement&quot;,&quot;Utility Shifting&quot;,&quot;Road signs, markings, km stones, safety devices, kerb etc.&quot;],
      
      &quot;Dismantling Works&quot;: [&quot;Dismantling flexible Pavements&quot;,&quot;Dismantling Rigid Pavements&quot;],
      
  &quot;Not for Payment&quot;: [&quot;No. of trees to be cut&quot;,&quot;No. of Electric Poles to be shifted&quot;,&quot;Elecrical Lines crossings&quot;,&quot;Length of Pipeline to be shifted (Severe/Water)&quot;,&quot;Other Utilities&quot;,&quot;Water Supply Lines&quot;]
};

    document.addEventListener(&#39;DOMContentLoaded&#39;, () =&gt; {
    initDB(() =&gt; {
        loadFromStorage(() =&gt; {
            if (!library.currentProjectId || !library.projects[library.currentProjectId]) {
                createNewProject(&quot;Project Alpha&quot;);
            } else {
                refreshProjectList();
                updateUI();
            }
        });
    });
});

    function createNewProject(name) {
        const id = &#39;proj_&#39; + Date.now();
        const pName = name || prompt(&quot;Project Name:&quot;);
        if (!pName) return;
        library.projects[id] = { id, name: pName, budget: 10000000, activities: [], milestones: [], globalMilestones: [] };
        library.currentProjectId = id;
        saveToStorage();
        refreshProjectList();
      	updateUI();
      
    }
  
  let db;

function initDB(callback) {
    const request = indexedDB.open(&#39;ConstructionMasterDB&#39;, 1);

    request.onupgradeneeded = (e) =&gt; {
        db = e.target.result;
        if (!db.objectStoreNames.contains(&#39;data&#39;)) {
            db.createObjectStore(&#39;data&#39;);
        }
    };

    request.onsuccess = (e) =&gt; {
        db = e.target.result;
        console.log(&quot;DB initialized&quot;);
        if (callback) callback();
    };

    request.onerror = (e) =&gt; {
        console.error(&quot;DB error:&quot;, e.target.error);
    };
}
  

function saveToStorage() {
    if (!db) return;

    const tx = db.transaction([&#39;data&#39;], &#39;readwrite&#39;);
    const store = tx.objectStore(&#39;data&#39;);

    const req = store.put(library, &#39;main_library&#39;);

    req.onsuccess = () =&gt; {
        console.log(&quot;Saved to IndexedDB&quot;);
    };

    req.onerror = (e) =&gt; {
        console.error(&quot;Save error:&quot;, e.target.error);
    };
}
  
  function loadFromStorage(callback) {
    if (!db) return;

    const tx = db.transaction([&#39;data&#39;], &#39;readonly&#39;);
    const store = tx.objectStore(&#39;data&#39;);

    const req = store.get(&#39;main_library&#39;);

    req.onsuccess = () =&gt; {
        if (req.result) {
            library = req.result;
            console.log(&quot;Loaded from IndexedDB&quot;);
        }
        if (callback) callback();
    };

    req.onerror = (e) =&gt; {
        console.error(&quot;Load error:&quot;, e.target.error);
    };
}
  
  

    function updateUI() {
        const p = library.projects[library.currentProjectId];
        if (!p) return;
        document.getElementById(&#39;projNameInput&#39;).value = p.name;
        document.getElementById(&#39;projBudgetInput&#39;).value = p.budget;
        renderPhysicalTable(p);
        renderBillingTable(p);
        renderChart(p);
        renderMilestoneBadges(p);
        updateFinancialSummary(p);
    }

    // --- PHYSICAL TRACKING LOGIC ---
function renderPhysicalTable(p) {

    let html = &#39;&#39;;

    p.activities.forEach((a, i) =&gt; {
        const act = a.totalQty &gt; 0
            ? (a.achievedQty / a.totalQty * 100).toFixed(1)
            : 0;

        html += `
&lt;tr&gt;
    &lt;td&gt;${a.name}&lt;/td&gt;
    &lt;td&gt;${a.achievedQty}/${a.totalQty}&lt;/td&gt;
    &lt;td&gt;${act}%&lt;/td&gt;
    &lt;td&gt;-&lt;/td&gt;
    &lt;td&gt;
        &lt;button onclick=&quot;editActivity(${i})&quot;&gt;Edit&lt;/button&gt;
        &lt;button onclick=&quot;deleteActivity(${i})&quot;&gt;Delete&lt;/button&gt;
    &lt;/td&gt;
&lt;/tr&gt;`;
    });

    document.getElementById(&#39;tableBody&#39;).innerHTML = html;

    const actSelect = document.getElementById(&#39;actName&#39;);

    if (!actSelect.innerHTML) {

        let optHtml = &quot;&quot;;

        for (const [grp, items] of Object.entries(masterWorkItems)) {
            optHtml += `&lt;optgroup label=&quot;${grp}&quot;&gt;
                ${items.map(i =&gt; `&lt;option value=&quot;${i}&quot;&gt;${i}&lt;/option&gt;`).join(&#39;&#39;)}
            &lt;/optgroup&gt;`;
        }

        actSelect.innerHTML = optHtml;
    }
}
    function saveActivity() {

    const p = library.projects[library.currentProjectId];
    const name = document.getElementById(&#39;actName&#39;).value;

    const act = {
        name,
        totalQty: parseFloat(document.getElementById(&#39;actTotalQty&#39;).value) || 0,
        achievedQty: parseFloat(document.getElementById(&#39;actAchievedQty&#39;).value) || 0
    };

    if (editIdx &gt; -1) {
        p.activities[editIdx] = act;
    } else {
        const existingIndex = p.activities.findIndex(a =&gt; a.name === name);
        if (existingIndex &gt; -1) {
            p.activities[existingIndex] = act;
        } else {
            p.activities.push(act);
        }
    }

    editIdx = -1;
    saveToStorage();
      updateUI();
}

// 1. Updated Table Rendering with &quot;Row-Click&quot; support
  
function renderBillingTable(p) {
    let html = &quot;&quot;;
    let cv = p.budget || 0;
    
    (p.milestones || []).forEach((mil, mIdx) =&gt; {
        let milVal = (mil.percent / 100) * cv;
        
        // Milestone Header Row
      html += `
&lt;tr style=&quot;background:#f9f9f9; font-weight:bold;&quot;&gt;
    &lt;td&gt;&lt;/td&gt;
    &lt;td&gt;${mil.name}&lt;/td&gt;
    &lt;td&gt;${mil.percent}%&lt;/td&gt;
    &lt;td colspan=&quot;6&quot;&gt;&lt;/td&gt;
    &lt;td&gt;
        &lt;button onclick=&quot;editMilestone(${mIdx})&quot;&gt;Edit&lt;/button&gt;
        &lt;button onclick=&quot;deleteMilestone(${mIdx})&quot;&gt;Delete&lt;/button&gt;
    &lt;/td&gt;
&lt;/tr&gt;
`;

        // Sub-Activity Rows
        (mil.stages || []).forEach((st, sIdx) =&gt; {
           let stageMaxVal = (mil.percent/100) * (st.weight/100) * cv;

let executionPercent = getExecutionFromPhysical(p, st.name);
let executedValue = stageMaxVal * (executionPercent / 100);

let payable = Math.max(0, executedValue - (st.paid || 0));

let isPaid = executedValue &gt; 0 &amp;&amp; (st.paid || 0) &gt;= executedValue;
            
            // Added &#39;onclick&#39; to the TR so clicking the row selects the checkbox
            html += `
            &lt;tr style=&quot;cursor: pointer;&quot; onclick=&quot;document.getElementById(&#39;chk-${mIdx}-${sIdx}&#39;).click()&quot;&gt;
                &lt;td&gt;&lt;input type=&quot;checkbox&quot; 
       class=&quot;rowchk&quot;
       id=&quot;chk-${mIdx}-${sIdx}&quot;
       value=&quot;${mIdx}-${sIdx}&quot;
       onchange=&quot;toggleRowStyle(this);&quot;
       onclick=&quot;event.stopPropagation()&quot;&gt;
  				&lt;/td&gt;
                &lt;td style=&quot;padding-left:20px;&quot;&gt;
    &lt;select class=&quot;table-input&quot; style=&quot;width:140px&quot;
        onchange=&quot;updateStage(${mIdx}, ${sIdx}, &#39;name&#39;, this.value)&quot;
        onclick=&quot;event.stopPropagation()&quot;&gt;

        ${generateWorkItemOptions(st.name)}

    &lt;/select&gt;
&lt;/td&gt;
                &lt;td&gt;-&lt;/td&gt;
                &lt;td&gt;&lt;input type=&quot;number&quot; class=&quot;table-input&quot; value=&quot;${st.weight}&quot; onchange=&quot;updateStage(${mIdx}, ${sIdx}, &#39;weight&#39;, this.value)&quot; onclick=&quot;event.stopPropagation()&quot;&gt;%&lt;/td&gt;
                &lt;td&gt;${getExecutionFromPhysical(p, st.name).toFixed(1)}%&lt;/td&gt;
                &lt;td&gt;₹${stageMaxVal.toLocaleString(&#39;en-IN&#39;)}&lt;/td&gt;
                &lt;td&gt;₹${payable.toLocaleString(&#39;en-IN&#39;)}&lt;/td&gt;
                &lt;td&gt;&lt;span class=&quot;status ${isPaid ? &#39;status-paid&#39; : &#39;status-pending&#39;}&quot;&gt;${isPaid ? &#39;PAID&#39; : &#39;PENDING&#39;}&lt;/span&gt;&lt;/td&gt;
                
                &lt;td&gt;
    &lt;button onclick=&quot;event.stopPropagation(); editStage(${mIdx}, ${sIdx});&quot;&gt;
        Edit
    &lt;/button&gt;
    &lt;button onclick=&quot;event.stopPropagation(); deleteStage(${mIdx}, ${sIdx});&quot;&gt;
        Delete
    &lt;/button&gt;
&lt;/td&gt;
            &lt;/tr&gt;`;
        });
        
        html += `&lt;tr&gt;&lt;td colspan=&quot;9&quot; align=&quot;center&quot; style=&quot;padding:10px;&quot;&gt;&lt;button class=&quot;btn btn-primary&quot; style=&quot;font-size:10px;&quot; onclick=&quot;addStage(${mIdx})&quot;&gt;+ Add Sub-Activity&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;`;
    });
    
    document.getElementById(&#39;billingTableBody&#39;).innerHTML = html;
}
  
  function getExecutionFromPhysical(p, stageName) {

    if (!p.activities || p.activities.length === 0) return 0;

    const match = p.activities.find(a =&gt; 
        a.name.trim().toLowerCase() === stageName.trim().toLowerCase()
    );

    if (!match) return 0;

    if (match.totalQty &lt;= 0) return 0;

    return Math.min(100, (match.achievedQty / match.totalQty) * 100);
}
  
  function toggleRowStyle(cb) {
    const row = cb.closest(&quot;tr&quot;);
    if (row) {
        row.classList.toggle(&quot;row-selected&quot;, cb.checked);
    }
}

// --- IMPROVED UI HANDLING ---
function toggleRowCheck(event, id) {
    // Prevent toggle if clicking buttons or inputs
    if ([&#39;INPUT&#39;, &#39;BUTTON&#39;, &#39;SELECT&#39;].includes(event.target.tagName)) return;
    
    const cb = document.getElementById(&#39;chk-&#39; + id);
    if (cb) {
        cb.checked = !cb.checked;
        // Optional: Add a class to the row for visual feedback
        event.currentTarget.classList.toggle(&#39;row-selected&#39;, cb.checked);
    }
}

// 3. Fixed Select All Logic
function toggleAll(masterCheckbox) {
    const allCheckboxes = document.querySelectorAll(&quot;.rowchk&quot;);
    allCheckboxes.forEach(cb =&gt; {
        cb.checked = masterCheckbox.checked;
        const row = cb.closest(&quot;tr&quot;);
        if (row) {
            row.classList.toggle(&quot;row-selected&quot;, masterCheckbox.checked);
        }
    });
}
  
    
    function addMilestone() {

    const name = prompt(&quot;Stage Name:&quot;);
    if (!name) return;

    const percent = parseFloat(prompt(&quot;stage %:&quot;));
    if (isNaN(percent)) return;

    const p = library.projects[library.currentProjectId];

    const totalPercent = (p.milestones || [])
        .reduce((sum, m) =&gt; sum + (m.percent || 0), 0);

    if (totalPercent + percent &gt; 100) {
        alert(&quot;Total milestone percentage cannot exceed 100%&quot;);
        return;
    }

    p.milestones = p.milestones || [];

    p.milestones.push({
        name,
        percent,
        stages: []
    });

    saveToStorage();
    updateUI();
}
  
  
   function deleteMilestone(index) {

    if (!confirm(&quot;Delete this milestone?&quot;)) return;

    const p = library.projects[library.currentProjectId];

    p.milestones.splice(index, 1);

    saveToStorage();
    updateUI();
}
  
 function editMilestone(index) {

    const p = library.projects[library.currentProjectId];
    const mil = p.milestones[index];

    const newName = prompt(&quot;Milestone Name:&quot;, mil.name);
    if (!newName) return;

    const newPercent = parseFloat(prompt(&quot;Milestone %:&quot;, mil.percent));
    if (isNaN(newPercent)) return;

    mil.name = newName;
    mil.percent = newPercent;

    saveToStorage();
    updateUI();
}
  
  function addGlobalMilestone() {

    const p = library.projects[library.currentProjectId];
    p.globalMilestones = p.globalMilestones || [];

    const val = parseFloat(document.getElementById(&#39;newMilestonePercent&#39;).value);

    if (isNaN(val) || val &lt;= 0 || val &gt; 100) {
        alert(&quot;Enter valid % between 1 and 100&quot;);
        return;
    }

    p.globalMilestones.push(val);

    document.getElementById(&#39;newMilestonePercent&#39;).value = &quot;&quot;;
    saveToStorage();
    updateUI();
}
  
  function editPhysicalMilestone(index) {

    const p = library.projects[library.currentProjectId];
    const value = p.globalMilestones[index];

    const newValue = parseFloat(prompt(&quot;Milestone %:&quot;, value));
    if (isNaN(newValue) || newValue &lt;= 0 || newValue &gt; 100) return;

    p.globalMilestones[index] = newValue;
    saveToStorage();
    updateUI();
}

function deletePhysicalMilestone(index) {

    if (!confirm(&quot;Delete this milestone?&quot;)) return;

    const p = library.projects[library.currentProjectId];
    p.globalMilestones.splice(index, 1);

    saveToStorage();
    updateUI();
}
  
  
  

   function addStage(mIdx) {

    const p = library.projects[library.currentProjectId];
    const milestone = p.milestones[mIdx];

    milestone.stages = milestone.stages || [];

    const firstGroup = Object.values(masterWorkItems)[0];
    const defaultItem = firstGroup[0];

    milestone.stages.push({
        name: defaultItem,
        weight: 0,
        paid: 0
    });

    saveToStorage();
    updateUI();
}
  
  
    function updateStage(m, s, field, val) {
        const p = library.projects[library.currentProjectId];
        p.milestones[m].stages[s][field] = (field === &#39;name&#39;) ? val : parseFloat(val) || 0;
        saveToStorage();
    }

    function updateMilestone(mIdx, field, val) {

    const p = library.projects[library.currentProjectId];

    if (field === &#39;percent&#39;) {

        val = Math.min(100, Math.max(0, parseFloat(val) || 0));

        const totalPercent = p.milestones.reduce((sum, m, i) =&gt;
            sum + (i === mIdx ? val : (m.percent || 0))
        , 0);

        if (totalPercent &gt; 100) {
            alert(&quot;Total milestone percentage cannot exceed 100%&quot;);
            return;
        }
    }

    p.milestones[mIdx][field] = val;

    saveToStorage();
    updateUI();
}

// --- FIXED CALCULATION LOGIC ---
function approveSelected() {

    const p = library.projects[library.currentProjectId];
    const checkboxes = document.querySelectorAll(&quot;.rowchk:checked&quot;);

    if (checkboxes.length === 0) {
        alert(&quot;Please select at least one sub-activity checkbox.&quot;);
        return;
    }

    checkboxes.forEach(cb =&gt; {

        const [mIdx, sIdx] = cb.value.split(&quot;-&quot;).map(Number);
        const mil = p.milestones[mIdx];
        const st = mil.stages[sIdx];

        const executionPercent = getExecutionFromPhysical(p, st.name);

        const stageMaxVal = 
            p.budget * 
            (mil.percent / 100) * 
            (st.weight / 100);

        const executionFactor = Math.min(1, executionPercent / 100);

        const newPayable = stageMaxVal * executionFactor;

        st.paid = Math.max(st.paid || 0, newPayable);
    });

    saveToStorage();
    updateUI();
    alert(&quot;Selected items approved and updated!&quot;);
}

    // --- HELPERS ---
    function updateFinancialSummary(p) {
        let earned = 0;
        p.milestones.forEach(m =&gt; m.stages.forEach(s =&gt; earned += (s.paid || 0)));
        document.getElementById(&#39;totalSpent&#39;).innerText = earned.toLocaleString();
        document.getElementById(&#39;dispPaid&#39;).innerText = earned.toLocaleString();
        document.getElementById(&#39;dispBalance&#39;).innerText = Math.max(0, p.budget - earned).toLocaleString();
        document.getElementById(&#39;overallPercent&#39;).innerText = p.budget &gt; 0 ? ((earned / p.budget) * 100).toFixed(1) : 0;
    }

  

    function renderMilestoneBadges(p) {

    const budget = parseFloat(p.budget) || 0;

    let totalExecutedCost = 0;

    (p.milestones || []).forEach(m =&gt; {

        const milestonePercent = parseFloat(m.percent) || 0;

        (m.stages || []).forEach(s =&gt; {

            const stageWeight = parseFloat(s.weight) || 0;

            const stageMaxValue =
                budget *
                (milestonePercent / 100) *
                (stageWeight / 100);

            const physicalItem = (p.activities || []).find(a =&gt;
                (a.name || &quot;&quot;).trim().toLowerCase() ===
                (s.name || &quot;&quot;).trim().toLowerCase()
            );

            const totalQty = parseFloat(physicalItem?.totalQty) || 0;
            const executedQty = parseFloat(physicalItem?.achievedQty) || 0;

            const executionPercent =
                totalQty &gt; 0
                    ? Math.min(100, (executedQty / totalQty) * 100)
                    : 0;

            const executedCost =
                stageMaxValue * (executionPercent / 100);

            totalExecutedCost += executedCost;
        });
    });

    const physicalProgressPercent =
        budget &gt; 0
            ? (totalExecutedCost / budget) * 100
            : 0;

    const html = (p.globalMilestones || []).map((m, index) =&gt; {

        const achieved = physicalProgressPercent &gt;= m;

        return `
            &lt;div style=&quot;display:inline-block; margin:5px;&quot;&gt;
                &lt;span class=&quot;status&quot;
                    style=&quot;
                        background:${achieved ? &#39;#27ae60&#39; : &#39;#f39c12&#39;};
                        color:white;
                        padding:6px 10px;
                        border-radius:4px;
                        margin-right:5px;
                    &quot;&gt;
                    ${m}%
                &lt;/span&gt;

                &lt;button onclick=&quot;editPhysicalMilestone(${index})&quot;&gt;
                    Edit
                &lt;/button&gt;

                &lt;button onclick=&quot;deletePhysicalMilestone(${index})&quot;&gt;
                    Delete
                &lt;/button&gt;
            &lt;/div&gt;
        `;
    }).join(&#39;&#39;);

    document.getElementById(&#39;milestoneList&#39;).innerHTML = html;
}

function renderChart(p) {

    const canvas = document.getElementById(&#39;progressChart&#39;);
    if (!canvas) return;

    const ctx = canvas.getContext(&#39;2d&#39;);

    // Destroy previous chart
    if (chart) {
        chart.destroy();
        chart = null;
    }

    // If no activities → stop
    if (!p.activities || p.activities.length === 0) {
        return;
    }

    const labels = p.activities.map(a =&gt; a.name || &quot;Unnamed&quot;);

    const data = p.activities.map(a =&gt; {
        const total = parseFloat(a.totalQty) || 0;
        const achieved = parseFloat(a.achievedQty) || 0;

        if (total &lt;= 0) return 0;

        return Math.min(100, (achieved / total) * 100);
    });

    chart = new Chart(ctx, {
    type: &#39;bar&#39;,
    data: {
        labels: labels,
        datasets: [{
            label: &#39;% Physical Progress&#39;,
            data: data,
            backgroundColor: &#39;#3498db&#39;
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        animation: false,
        layout: {
            padding: {
                bottom: 1   // space for vertical labels
            }
        },
        scales: {
            x: {
                ticks: {
                    autoSkip: false,
                    minRotation: 90,
                    maxRotation: 90
                }
            },
            y: {
                beginAtZero: true,
                max: 100
            }
        }
    }
});
}
  
   function switchProject() { 
    library.currentProjectId = document.getElementById(&#39;projectSelector&#39;).value; 
    updateUI();
}
  
    function refreshProjectList() {
        document.getElementById(&#39;projectSelector&#39;).innerHTML = Object.values(library.projects).map(p =&gt; 
            `&lt;option value=&quot;${p.id}&quot; ${p.id === library.currentProjectId ? &#39;selected&#39; : &#39;&#39;}&gt;${p.name}&lt;/option&gt;`).join(&#39;&#39;);
    }
    function renameProject() { library.projects[library.currentProjectId].name = document.getElementById(&#39;projNameInput&#39;).value; saveToStorage(); refreshProjectList(); }
  
    function updateProjectMeta() { library.projects[library.currentProjectId].budget = parseFloat(document.getElementById(&#39;projBudgetInput&#39;).value) || 0; saveToStorage(); }
  
function exportJSON() {

    saveToStorage(); // safety

    const choice = prompt(
`Export Options:
1 → Current Project
2 → All Projects
3 → Select Multiple Projects`,
        &quot;1&quot;
    );

    if (!choice) return;

    const date = new Date().toISOString().split(&#39;T&#39;)[0];
    let exportData = {};
    let fileName = &quot;&quot;;

    // =========================
    // ✅ OPTION 1: CURRENT PROJECT
    // =========================
    if (choice === &quot;1&quot;) {

        const currentId = library.currentProjectId;

        if (!currentId || !library.projects[currentId]) {
            alert(&quot;No project selected.&quot;);
            return;
        }

        exportData = {
            currentProjectId: currentId,
            projects: {
                [currentId]: library.projects[currentId]
            }
        };

        const projName = library.projects[currentId].name.replace(/[^a-z0-9]/gi, &quot;_&quot;);
        fileName = `${projName}_${date}.json`;
    }

    // =========================
    // ✅ OPTION 2: ALL PROJECTS
    // =========================
    else if (choice === &quot;2&quot;) {

        exportData = library;
        fileName = `EPC Schedule H payment plus physical progress tracking fo All_Projects_${date}.json`;
    }

    // =========================
    // ✅ OPTION 3: MULTIPLE PROJECTS
    // =========================
    else if (choice === &quot;3&quot;) {

        const projectList = Object.values(library.projects);

        if (projectList.length === 0) {
            alert(&quot;No projects available.&quot;);
            return;
        }

        // Build selection list
        let listText = &quot;Enter project numbers (comma separated):\n\n&quot;;

        projectList.forEach((p, i) =&gt; {
            listText += `${i + 1} → ${p.name}\n`;
        });

        const input = prompt(listText, &quot;1,2&quot;);

        if (!input) return;

        const indexes = input.split(&quot;,&quot;)
            .map(i =&gt; parseInt(i.trim()) - 1)
            .filter(i =&gt; i &gt;= 0 &amp;&amp; i &lt; projectList.length);

        if (indexes.length === 0) {
            alert(&quot;Invalid selection.&quot;);
            return;
        }

        const selectedProjects = {};

        indexes.forEach(i =&gt; {
            const p = projectList[i];
            selectedProjects[p.id] = p;
        });

        exportData = {
            currentProjectId: library.currentProjectId,
            projects: selectedProjects
        };

        fileName = `Selected_Projects_${date}.json`;
    }

    else {
        alert(&quot;Invalid option.&quot;);
        return;
    }

    // =========================
    // 📦 DOWNLOAD
    // =========================
    const dataStr = JSON.stringify(exportData, null, 2);
    const blob = new Blob([dataStr], { type: &quot;application/json&quot; });

    const a = document.createElement(&quot;a&quot;);
    const url = URL.createObjectURL(blob);

    a.href = url;
    a.download = fileName;

    document.body.appendChild(a);
    a.click();

    document.body.removeChild(a);
    URL.revokeObjectURL(url);
}
  
function importJSON(event) {

    const file = event.target.files[0];
    if (!file) return;

    const reader = new FileReader();

    reader.onload = function(e) {
        try {
            const importedData = JSON.parse(e.target.result);

            if (!importedData.projects) {
                alert(&quot;Invalid JSON file.&quot;);
                return;
            }

            Object.values(importedData.projects).forEach(newProj =&gt; {

                // =========================
                // 🔍 MATCH PROJECT BY NAME (SMART)
                // =========================
                let existingProj = Object.values(library.projects).find(p =&gt;
                    p.name.trim().toLowerCase() === newProj.name.trim().toLowerCase()
                );

                // =========================
                // 🆕 NEW PROJECT
                // =========================
                if (!existingProj) {
                    const newId = &#39;proj_&#39; + Date.now() + Math.random();
                    library.projects[newId] = {
                        ...newProj,
                        id: newId
                    };
                    return;
                }

                const oldProj = existingProj;

                // =========================
                // 💰 MERGE BUDGET (TAKE HIGHER)
                // =========================
                oldProj.budget = Math.max(oldProj.budget || 0, newProj.budget || 0);

                // =========================
                // 📊 MERGE ACTIVITIES (SMART)
                // =========================
                oldProj.activities = oldProj.activities || [];

                newProj.activities?.forEach(newAct =&gt; {

                    let oldAct = oldProj.activities.find(a =&gt;
                        a.name.trim().toLowerCase() === newAct.name.trim().toLowerCase()
                    );

                    if (!oldAct) {
                        oldProj.activities.push(newAct);
                    } else {
                        // TAKE MAX VALUES (LATEST PROGRESS)
                        oldAct.totalQty = Math.max(oldAct.totalQty || 0, newAct.totalQty || 0);
                        oldAct.achievedQty = Math.max(oldAct.achievedQty || 0, newAct.achievedQty || 0);
                    }
                });

                // =========================
                // 📅 MERGE MILESTONES
                // =========================
                oldProj.milestones = oldProj.milestones || [];

                newProj.milestones?.forEach(newMil =&gt; {

                    let oldMil = oldProj.milestones.find(m =&gt;
                        m.name.trim().toLowerCase() === newMil.name.trim().toLowerCase()
                    );

                    if (!oldMil) {
                        oldProj.milestones.push(newMil);
                        return;
                    }

                    // TAKE MAX %
                    oldMil.percent = Math.max(oldMil.percent || 0, newMil.percent || 0);

                    oldMil.stages = oldMil.stages || [];

                    // -------------------------
                    // 🔁 MERGE STAGES
                    // -------------------------
                    newMil.stages?.forEach(newStage =&gt; {

                        let oldStage = oldMil.stages.find(s =&gt;
                            s.name.trim().toLowerCase() === newStage.name.trim().toLowerCase()
                        );

                        if (!oldStage) {
                            oldMil.stages.push(newStage);
                        } else {
                            oldStage.weight = Math.max(oldStage.weight || 0, newStage.weight || 0);
                            oldStage.paid = Math.max(oldStage.paid || 0, newStage.paid || 0);
                        }
                    });
                });

                // =========================
                // 🌐 MERGE GLOBAL MILESTONES
                // =========================
                oldProj.globalMilestones = oldProj.globalMilestones || [];

                newProj.globalMilestones?.forEach(val =&gt; {
                    if (!oldProj.globalMilestones.includes(val)) {
                        oldProj.globalMilestones.push(val);
                    }
                });

            });

            saveToStorage();
            refreshProjectList();
            updateUI();

            alert(&quot;🔥 Smart Merge Completed (Latest values preserved)&quot;);

        } catch (err) {
            console.error(err);
            alert(&quot;Error importing JSON.&quot;);
        }
    };

    reader.readAsText(file);
}
  
  
  
function deleteCurrentProject() {

    const pId = library.currentProjectId;

    if (!pId || !library.projects[pId]) {
        alert(&quot;No valid project selected.&quot;);
        return;
    }

    const projectName = library.projects[pId].name;

    const confirmDelete = confirm(
        `Are you sure you want to delete &quot;${projectName}&quot;?\nThis cannot be undone.`
    );

    if (!confirmDelete) return;

    // Delete project using ID (NOT name)
    delete library.projects[pId];

    // Get remaining project IDs
    const remainingIds = Object.keys(library.projects);

    // Switch to another project if available
    library.currentProjectId = remainingIds.length &gt; 0
        ? remainingIds[0]
        : null;

    saveToStorage();

    // Refresh UI safely
    refreshProjectList();
updateUI();
    renderBillingTable();
    renderChart(library.projects[library.currentProjectId] || { activities: [] });

    alert(&quot;Project deleted successfully.&quot;);
}
  
  function generateWorkItemOptions(selectedValue) {

    let html = &quot;&quot;;

    for (const [grp, items] of Object.entries(masterWorkItems)) {

        html += `&lt;optgroup label=&quot;${grp}&quot;&gt;`;

        items.forEach(item =&gt; {
            html += `
                &lt;option value=&quot;${item}&quot; 
                    ${item === selectedValue ? &quot;selected&quot; : &quot;&quot;}&gt;
                    ${item}
                &lt;/option&gt;`;
        });

        html += `&lt;/optgroup&gt;`;
    }

    return html;
}
  

  function deleteActivity(index) {

    if (!confirm(&quot;Delete this activity?&quot;)) return;

    const p = library.projects[library.currentProjectId];
    p.activities.splice(index, 1);

    saveToStorage();
    updateUI();
}
  
  function editActivity(index) {

    const p = library.projects[library.currentProjectId];
    const activity = p.activities[index];

    let newName = prompt(&quot;Activity Name:&quot;, activity.name);
    if (newName === null) return;

    let newTotalQty = prompt(&quot;Total Quantity:&quot;, activity.totalQty);
    if (newTotalQty === null) return;

    let newAchievedQty = prompt(&quot;Achieved Quantity:&quot;, activity.achievedQty);
    if (newAchievedQty === null) return;

    activity.name = newName;
    activity.totalQty = parseFloat(newTotalQty) || 0;
    activity.achievedQty = parseFloat(newAchievedQty) || 0;

    saveToStorage();
    updateUI();
}
  
  function deleteStage(mIndex, sIndex) {

    if (!confirm(&quot;Delete this stage?&quot;)) return;

    const p = library.projects[library.currentProjectId];
    p.milestones[mIndex].stages.splice(sIndex, 1);

    saveToStorage();
    updateUI();
}
  
  function editStage(mIndex, sIndex) {

    const p = library.projects[library.currentProjectId];
    const stage = p.milestones[mIndex].stages[sIndex];

    const newName = prompt(&quot;Stage Name:&quot;, stage.name);
    if (!newName) return;

    const newWeight = parseFloat(prompt(&quot;Stage Weight %:&quot;, stage.weight));
    if (isNaN(newWeight)) return;

    stage.name = newName;
    stage.weight = newWeight;

    saveToStorage();
    updateUI();
}
  
 
  
 function exportPDF() {

    const p = library.projects[library.currentProjectId];
    if (!p) return;

    const budget = parseFloat(p.budget) || 0;

    let totalPaid = 0;
    let totalPayable = 0;
    let totalExecutedCost = 0;

    // Calculate totals
    (p.milestones || []).forEach(m =&gt; {

        const milestonePercent = parseFloat(m.percent) || 0;

        (m.stages || []).forEach(s =&gt; {

            const stageWeight = parseFloat(s.weight) || 0;
            const paidAmount = parseFloat(s.paid) || 0;

            totalPaid += paidAmount;

            const stageMaxValue =
                budget *
                (milestonePercent / 100) *
                (stageWeight / 100);

            totalPayable += stageMaxValue;

            // Find matching activity safely
            const physicalItem = (p.activities || []).find(a =&gt;
                (a.name || &quot;&quot;).trim().toLowerCase() ===
                (s.name || &quot;&quot;).trim().toLowerCase()
            );

            const totalQty = parseFloat(physicalItem?.totalQty) || 0;
            const executedQty = parseFloat(physicalItem?.achievedQty) || 0;

            const executionPercent =
                totalQty &gt; 0
                    ? Math.min(100, (executedQty / totalQty) * 100)
                    : 0;

            const executedCost =
                stageMaxValue * (executionPercent / 100);

            totalExecutedCost += executedCost;
        });
    });

    const financialPercent =
        budget &gt; 0
            ? ((totalPaid / budget) * 100).toFixed(2)
            : &quot;0.00&quot;;

    const physicalPercent =
        budget &gt; 0
            ? ((totalExecutedCost / budget) * 100).toFixed(2)
            : &quot;0.00&quot;;

    // Get chart image safely
  let chartImage = &quot;&quot;;
const chartCanvas = document.getElementById(&#39;progressChart&#39;);

if (chartCanvas) {
    try {

        // 🔥 Increase resolution for PDF
        const originalWidth = chartCanvas.width;
        const originalHeight = chartCanvas.height;

        chartCanvas.width = originalWidth * 2;
        chartCanvas.height = originalHeight * 2;

        if (chart) {
            chart.resize();
            chart.update();
        }

        chartImage = chartCanvas.toDataURL(&quot;image/png&quot;, 1.0);

        // Restore original size
        chartCanvas.width = originalWidth;
        chartCanvas.height = originalHeight;

        if (chart) {
            chart.resize();
            chart.update();
        }

    } catch (err) {
        console.error(&quot;Chart export failed:&quot;, err);
    }
}

    let reportHTML = `
    &lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;Project Report&lt;/title&gt;
        &lt;style&gt;
            body { font-family: Arial, sans-serif; padding: 20px; }
            h2 { margin-bottom: 10px; }
            table { border-collapse: collapse; width: 100%; margin-top: 20px; }
            th, td { border: 1px solid #ccc; padding: 6px; text-align: center; }
            th { background: #f2f2f2; }
            .summary p { margin: 5px 0; }
            .chart-container { text-align: center; margin-top: 20px; }
        &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;

    &lt;h2&gt;${p.name}&lt;/h2&gt;

    &lt;div class=&quot;summary&quot;&gt;
        &lt;p&gt;&lt;strong&gt;Project Cost:&lt;/strong&gt; ₹${budget.toLocaleString(&#39;en-IN&#39;)}&lt;/p&gt;
        &lt;p&gt;&lt;strong&gt;Total Payable (As per Schedule):&lt;/strong&gt; ₹${totalExecutedCost.toLocaleString(&#39;en-IN&#39;)}&lt;/p&gt;
        &lt;p&gt;&lt;strong&gt;Total Paid Till Date:&lt;/strong&gt; ₹${totalPaid.toLocaleString(&#39;en-IN&#39;)}&lt;/p&gt;
        &lt;p&gt;&lt;strong&gt;Cumulative Financial Progress:&lt;/strong&gt; ${financialPercent}%&lt;/p&gt;
        &lt;p&gt;&lt;strong&gt;Cumulative Physical Progress:&lt;/strong&gt; ${physicalPercent}%&lt;/p&gt;
    &lt;/div&gt;
    `;

    if (chartImage) {
        reportHTML += `
        &lt;h3&gt;Physical Progress Graph&lt;/h3&gt;
        &lt;div style=&quot;width:100%; margin-top:20px;&quot;&gt;
    &lt;img src=&quot;${chartImage}&quot; 
         style=&quot;width:100%; display:block;&quot; /&gt;
&lt;/div&gt;
        `;
    }

    reportHTML += `
    &lt;h3&gt;Schedule H Details&lt;/h3&gt;
    &lt;table&gt;
        &lt;tr&gt;
            &lt;th&gt;Milestone&lt;/th&gt;
            &lt;th&gt;Milestone %&lt;/th&gt;
            &lt;th&gt;Stage&lt;/th&gt;
            &lt;th&gt;Stage Weight %&lt;/th&gt;
            &lt;th&gt;Total Qty&lt;/th&gt;
            &lt;th&gt;Executed Qty&lt;/th&gt;
            &lt;th&gt;Total Cost (₹)&lt;/th&gt;
            &lt;th&gt;Executed Cost (₹)&lt;/th&gt;
        &lt;/tr&gt;
    `;

    (p.milestones || []).forEach(m =&gt; {

        const milestonePercent = parseFloat(m.percent) || 0;

        (m.stages || []).forEach(s =&gt; {

            const stageWeight = parseFloat(s.weight) || 0;

            const stageMaxValue =
                budget *
                (milestonePercent / 100) *
                (stageWeight / 100);

            const physicalItem = (p.activities || []).find(a =&gt;
                (a.name || &quot;&quot;).trim().toLowerCase() ===
                (s.name || &quot;&quot;).trim().toLowerCase()
            );

            const totalQty = parseFloat(physicalItem?.totalQty) || 0;
            const executedQty = parseFloat(physicalItem?.achievedQty) || 0;

            const executionPercent =
                totalQty &gt; 0
                    ? Math.min(100, (executedQty / totalQty) * 100)
                    : 0;

            const executedCost =
                stageMaxValue * (executionPercent / 100);

            reportHTML += `
                &lt;tr&gt;
                    &lt;td&gt;${m.name}&lt;/td&gt;
                    &lt;td&gt;${milestonePercent}%&lt;/td&gt;
                    &lt;td&gt;${s.name}&lt;/td&gt;
                    &lt;td&gt;${stageWeight}%&lt;/td&gt;
                    &lt;td&gt;${totalQty}&lt;/td&gt;
                    &lt;td&gt;${executedQty}&lt;/td&gt;
                    &lt;td&gt;${stageMaxValue.toLocaleString(&#39;en-IN&#39;)}&lt;/td&gt;
                    &lt;td&gt;${executedCost.toLocaleString(&#39;en-IN&#39;)}&lt;/td&gt;
                &lt;/tr&gt;
            `;
        });
    });

    reportHTML += `
        &lt;/table&gt;
    &lt;/body&gt;
    &lt;/html&gt;
    `;

    const win = window.open(&quot;&quot;, &quot;_blank&quot;, &quot;width=1000,height=800&quot;);

    if (!win) {
        alert(&quot;Popup blocked! Please allow popups.&quot;);
        return;
    }

    win.document.open();
    win.document.write(reportHTML);
    win.document.close();

    win.onload = function () {
        setTimeout(() =&gt; {
            win.print();
        }, 500);
    };
}
  
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;&lt;div class=&quot;blogger-post-footer&quot;&gt;https://yogipwd.blogspot.com/&lt;/div&gt;</description><link>https://www.yogipwd.com/2026/02/epc-schedule-h-payment-plus-physical.html</link><author>noreply@blogger.com (Yogendra)</author><thr:total>0</thr:total></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-1074964965522467583.post-9108466008299712044</guid><pubDate>Wed, 25 Feb 2026 11:36:00 +0000</pubDate><atom:updated>2026-04-21T13:25:04.551+05:30</atom:updated><category domain="http://www.blogger.com/atom/ns#">Drawings</category><category domain="http://www.blogger.com/atom/ns#">PWD Working</category><category domain="http://www.blogger.com/atom/ns#">Survey</category><title>Maps Prepared by me</title><description>&lt;h2 style=&quot;text-align: center;&quot;&gt;&amp;nbsp;Maps Prepared by me&lt;/h2&gt;&lt;h3 style=&quot;text-align: center;&quot;&gt;Sawalya Povalya Road existence proof&lt;/h3&gt;&lt;div style=&quot;text-align: center;&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAE48AZ6EaZadNdhdxk4FpMaRpyj5FFT7BO2uMfkju6gCGv8hm6YSbXWK77c21YMR88W2V2-7G4hujBXg_9wnfaEG2odIgt1LY8DhnsdWnjnGhMoYEMfAlgp8qhnSrJhyQFqGAwOudlLCkuc2trsxmACIDLoYrFx8Fr7Ui8lkaqQ0DF2aWYySwZwH4fUlt/s7015/Sawalya%20Povalya%20Road%20existence%20proof.png&quot; style=&quot;margin-left: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; data-original-height=&quot;4960&quot; data-original-width=&quot;7015&quot; height=&quot;465&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAE48AZ6EaZadNdhdxk4FpMaRpyj5FFT7BO2uMfkju6gCGv8hm6YSbXWK77c21YMR88W2V2-7G4hujBXg_9wnfaEG2odIgt1LY8DhnsdWnjnGhMoYEMfAlgp8qhnSrJhyQFqGAwOudlLCkuc2trsxmACIDLoYrFx8Fr7Ui8lkaqQ0DF2aWYySwZwH4fUlt/w659-h465/Sawalya%20Povalya%20Road%20existence%20proof.png&quot; width=&quot;659&quot; /&gt;&lt;/a&gt;&lt;/div&gt;&lt;h3 style=&quot;text-align: center;&quot;&gt;Irrigation Water Mains Pipeline road crossing&lt;/h3&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4AgIasm_Vm3v8dPFVCoZ4Dh6EoaOcHpgjxx1w44jXM9uJL_RJ-nCS4y82G_2UzFXZbr-tMKlOa9gqN77MXDFsFZrdP3ZMB1KdGuN8SXptcBpLMUCY0-lM5P3kz_qhQEIpvJqujHltmkPrXhpNuaq_3E_yi7y5e9WUckbDaDLaGBE0j967CaL-Q-dVpaJA/s7015/Irrigation%20Water%20Mains%20Pipeline%20road%20crossing.png&quot; style=&quot;margin-left: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; data-original-height=&quot;4960&quot; data-original-width=&quot;7015&quot; height=&quot;456&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4AgIasm_Vm3v8dPFVCoZ4Dh6EoaOcHpgjxx1w44jXM9uJL_RJ-nCS4y82G_2UzFXZbr-tMKlOa9gqN77MXDFsFZrdP3ZMB1KdGuN8SXptcBpLMUCY0-lM5P3kz_qhQEIpvJqujHltmkPrXhpNuaq_3E_yi7y5e9WUckbDaDLaGBE0j967CaL-Q-dVpaJA/w647-h456/Irrigation%20Water%20Mains%20Pipeline%20road%20crossing.png&quot; width=&quot;647&quot; /&gt;&lt;/a&gt;&lt;/div&gt;&lt;h3 style=&quot;text-align: center;&quot;&gt;Toposheets with chainages to Identify Forest Length chainages&lt;/h3&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHgLG6wmNVCG1T9_EG2T01unSxJaRNeQjtgqIQ0zTTQgC5OiosoolfmNpp3Clzr9y6Gn_PrkCCxccoGa4KnXnq37_nRyPR5pQEnNpeKrm_dwJqrGgSMRWUpvXzAr_12-sZmmi1Qty6cgFcG2hiKhXpedesZZm5uDN9vS1KXzreCCGlCSFGm-ARQ-r6WxkD/s7151/Toposheet%20overlap%20for%20forest%20without%20background.png&quot; style=&quot;margin-left: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; data-original-height=&quot;7151&quot; data-original-width=&quot;6805&quot; height=&quot;690&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHgLG6wmNVCG1T9_EG2T01unSxJaRNeQjtgqIQ0zTTQgC5OiosoolfmNpp3Clzr9y6Gn_PrkCCxccoGa4KnXnq37_nRyPR5pQEnNpeKrm_dwJqrGgSMRWUpvXzAr_12-sZmmi1Qty6cgFcG2hiKhXpedesZZm5uDN9vS1KXzreCCGlCSFGm-ARQ-r6WxkD/w656-h690/Toposheet%20overlap%20for%20forest%20without%20background.png&quot; width=&quot;656&quot; /&gt;&lt;/a&gt;&lt;/div&gt;&lt;h3 style=&quot;text-align: center;&quot;&gt;Saptashrungi Temple Connectivity&lt;/h3&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUOnrAEgKz-pOle9zAQgEeDA3puhrVzpe7o3iLzvDs845T-VTwKxGrnhMVTCTl9x8TZtHikOvEWePjN8GWDDR-g9QWbyJrLsVnK6K9F2GIMutAqt-z-8jI_ZkUg5mgNJRQU92BGwqA1TCE2-JxmHKqZxThd7mf9g3thhEuAV1WBZzBy2fLYmX09Hbb4BWM/s9921/Gad.png&quot; style=&quot;margin-left: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; data-original-height=&quot;7015&quot; data-original-width=&quot;9921&quot; height=&quot;417&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUOnrAEgKz-pOle9zAQgEeDA3puhrVzpe7o3iLzvDs845T-VTwKxGrnhMVTCTl9x8TZtHikOvEWePjN8GWDDR-g9QWbyJrLsVnK6K9F2GIMutAqt-z-8jI_ZkUg5mgNJRQU92BGwqA1TCE2-JxmHKqZxThd7mf9g3thhEuAV1WBZzBy2fLYmX09Hbb4BWM/w590-h417/Gad.png&quot; width=&quot;590&quot; /&gt;&lt;/a&gt;&lt;/div&gt;&lt;h3 style=&quot;text-align: center;&quot;&gt;Airport Connectivity&lt;/h3&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_whdC77RaQEJgLFa2O4yKy32gCbRdfrtoyjIPx4fUWF604Q7JHwvykQNXQF7LwV-DTS6C7nt1gReu2rCmg2dqljnyLWUN5QpYRB6O4IwyeaOHqgYIwAjicmMknOxx-IabAkEzmRa9fS-42FZETBfUHwwzYlae9T5_qXAMfAXRgu-MmF2ZezhFPCcPwuH2/s14031/Aiport%20Connectivity.png&quot; style=&quot;margin-left: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; data-original-height=&quot;9921&quot; data-original-width=&quot;14031&quot; height=&quot;469&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_whdC77RaQEJgLFa2O4yKy32gCbRdfrtoyjIPx4fUWF604Q7JHwvykQNXQF7LwV-DTS6C7nt1gReu2rCmg2dqljnyLWUN5QpYRB6O4IwyeaOHqgYIwAjicmMknOxx-IabAkEzmRa9fS-42FZETBfUHwwzYlae9T5_qXAMfAXRgu-MmF2ZezhFPCcPwuH2/w663-h469/Aiport%20Connectivity.png&quot; width=&quot;663&quot; /&gt;&lt;/a&gt;&lt;/div&gt;&lt;h3 style=&quot;text-align: center;&quot;&gt;National Highway Connectivity to Nashik&lt;/h3&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEQ1BYbtNvChzE6k6mO76pSRanKT4ttVi5JMPTBFRcphd0eMd63dZIvRlWIa4BoLJgVFPcwWRGBnLNAq_q3nmNzRLntmd0Q8cyAaWqpVfbqiM20srdLL4p9_1Wz9c-idYmAsPxEsnAzVB6qoNbjd-Fyft8OeVLbopcyH2iEQnTs6tDgaWsGVy8AJJDyvV4/s4960/all%20NH%20Maps.png&quot; style=&quot;margin-left: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; data-original-height=&quot;3507&quot; data-original-width=&quot;4960&quot; height=&quot;467&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEQ1BYbtNvChzE6k6mO76pSRanKT4ttVi5JMPTBFRcphd0eMd63dZIvRlWIa4BoLJgVFPcwWRGBnLNAq_q3nmNzRLntmd0Q8cyAaWqpVfbqiM20srdLL4p9_1Wz9c-idYmAsPxEsnAzVB6qoNbjd-Fyft8OeVLbopcyH2iEQnTs6tDgaWsGVy8AJJDyvV4/w663-h467/all%20NH%20Maps.png&quot; width=&quot;663&quot; /&gt;&lt;/a&gt;&lt;/div&gt;&lt;h3 style=&quot;text-align: center;&quot;&gt;Trimbak Parking Radius wise&lt;/h3&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeTtT_ceWrjHYrIV1lhzw__OvZdoTzFmP_bSmVSL2synU91Z5uKjkR4j1MCf3mr9gjNu8_exLPPYFnz2NKrLQdq25eq4kKeXGapHsFLZE8rq7NwSjRJaMvbJ_w38FTo4wJD196WZ95b6JBhKxix5lw_7YxVWM5jaf1938AuxIX55X-JOtqmf3TYO-V-AJY/s4960/rev%201%20Parkings%20Trimbak.png&quot; style=&quot;margin-left: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; data-original-height=&quot;3507&quot; data-original-width=&quot;4960&quot; height=&quot;467&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeTtT_ceWrjHYrIV1lhzw__OvZdoTzFmP_bSmVSL2synU91Z5uKjkR4j1MCf3mr9gjNu8_exLPPYFnz2NKrLQdq25eq4kKeXGapHsFLZE8rq7NwSjRJaMvbJ_w38FTo4wJD196WZ95b6JBhKxix5lw_7YxVWM5jaf1938AuxIX55X-JOtqmf3TYO-V-AJY/w661-h467/rev%201%20Parkings%20Trimbak.png&quot; width=&quot;661&quot; /&gt;&lt;/a&gt;&lt;/div&gt;&lt;h3 style=&quot;text-align: center;&quot;&gt;Spokewise Trimbak and Nashik Outer parking&lt;/h3&gt;&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOV4NpY3gs0CC5bxZQMCDyLT7UzprnbiT_3jocmK9SnjhY9umDZ1cI0lQ5o3KNlmt-PJkcjoEubx8DBuZPqKhyFby7gb6Etd21KHdgRObAb7a4xO2UJuwAI4lCJ_U6zJAoTcw7DNKEWXYk-3TnOo4pugh694dHH-glPZLUMPGT64bnNJb8SV7IYmfKpAgb/s4960/Spokeswise%20outer%20Parkings.png&quot; style=&quot;margin-left: 1em; margin-right: 1em; text-align: center;&quot;&gt;&lt;img border=&quot;0&quot; data-original-height=&quot;3507&quot; data-original-width=&quot;4960&quot; height=&quot;466&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOV4NpY3gs0CC5bxZQMCDyLT7UzprnbiT_3jocmK9SnjhY9umDZ1cI0lQ5o3KNlmt-PJkcjoEubx8DBuZPqKhyFby7gb6Etd21KHdgRObAb7a4xO2UJuwAI4lCJ_U6zJAoTcw7DNKEWXYk-3TnOo4pugh694dHH-glPZLUMPGT64bnNJb8SV7IYmfKpAgb/w660-h466/Spokeswise%20outer%20Parkings.png&quot; width=&quot;660&quot; /&gt;&lt;/a&gt;&lt;br /&gt;&lt;h3 style=&quot;text-align: center;&quot;&gt;Beze Contour&lt;/h3&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJh_5acOcyZMU5ivuP7xI7DZrqVe0cNcqOvKcQe1M9sstfb6sLtvjtWQrnOTt5yxHfF5c9X9YhrSX914OTZCZPUOPiUJaAqIaLrFIGuR0V-bnc6BhuivuKda2YRGScu7k6VEUYOHOglTRbXRKWDFR4GHgSlDmwz8_y7GkWBnSwLmK0rPSsmRaZ97RQ9Jke/s4960/beze.png&quot; style=&quot;margin-left: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; data-original-height=&quot;3507&quot; data-original-width=&quot;4960&quot; height=&quot;469&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJh_5acOcyZMU5ivuP7xI7DZrqVe0cNcqOvKcQe1M9sstfb6sLtvjtWQrnOTt5yxHfF5c9X9YhrSX914OTZCZPUOPiUJaAqIaLrFIGuR0V-bnc6BhuivuKda2YRGScu7k6VEUYOHOglTRbXRKWDFR4GHgSlDmwz8_y7GkWBnSwLmK0rPSsmRaZ97RQ9Jke/w665-h469/beze.png&quot; width=&quot;665&quot; /&gt;&lt;/a&gt;&lt;/div&gt;&lt;h3 style=&quot;text-align: center;&quot;&gt;Trimbak Area&lt;/h3&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj19VGOsI0YgzC9IVxbTJzkit2v3Mu9UcvriHlZqLYFtdGILd_c5epqAPlUmnuFxYMrT9gnGhMPRxOVQvyIMk6UwavWiNbgleR1t-mjJ46JvUJ629tjhV27hlJ94A53LWnXOEsLZdCzGF0V_gd_ibqo82WSUXPasXNZrmakSn76izSecLubTPZr4fB9ATdr/s14043/trimbak.png&quot; style=&quot;margin-left: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; data-original-height=&quot;9933&quot; data-original-width=&quot;14043&quot; height=&quot;464&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj19VGOsI0YgzC9IVxbTJzkit2v3Mu9UcvriHlZqLYFtdGILd_c5epqAPlUmnuFxYMrT9gnGhMPRxOVQvyIMk6UwavWiNbgleR1t-mjJ46JvUJ629tjhV27hlJ94A53LWnXOEsLZdCzGF0V_gd_ibqo82WSUXPasXNZrmakSn76izSecLubTPZr4fB9ATdr/w655-h464/trimbak.png&quot; width=&quot;655&quot; /&gt;&lt;/a&gt;&lt;/div&gt;&lt;div&gt;&lt;br /&gt;&lt;/div&gt;&lt;h3 style=&quot;text-align: center;&quot;&gt;Road Connectivity Map&lt;/h3&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQWHhiUR6XGM1BPDKsjc9MUtVwAswQ8k5eMCqivrEWsfL54VHF-XOmODGUqfOzypO4lJregQRe5u4NTx_ZTQ0AMGWQaSsnoxRDCvj2gU9mSIrlvoiCVeQ70yaFsXHT0WNgbsY9hEYnmep5ERHAl0UBSJkhoKLX5PTg4DNcSJt_z_U92WAnt7gEHHwyMhQk/s14043/kumbh%20image.png&quot; style=&quot;margin-left: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; data-original-height=&quot;9933&quot; data-original-width=&quot;14043&quot; height=&quot;462&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQWHhiUR6XGM1BPDKsjc9MUtVwAswQ8k5eMCqivrEWsfL54VHF-XOmODGUqfOzypO4lJregQRe5u4NTx_ZTQ0AMGWQaSsnoxRDCvj2gU9mSIrlvoiCVeQ70yaFsXHT0WNgbsY9hEYnmep5ERHAl0UBSJkhoKLX5PTg4DNcSJt_z_U92WAnt7gEHHwyMhQk/w654-h462/kumbh%20image.png&quot; width=&quot;654&quot; /&gt;&lt;/a&gt;&lt;/div&gt;&lt;h3 style=&quot;text-align: center;&quot;&gt;Dwaraka Underpass Traffic Diversion&lt;/h3&gt;&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQM5fj5GOSHLzNTP43bWkl1plPSz5vTNuPMM2Un4Q9COySdwoDVwLJM6oeJxtdEMfV59A9GAmmKKA6Aqr1ULzszDZsE5uZ1N2tLWsbU_T7es44dDwZisDUv24GdmxTTv6yTmmXsYSATqmtP2fwb53_uogzCNMo4Ei0cxRgERvibi67tC5Z20S4zdNFSLMG/s7015/Dwaraka%20traffic%20diversion%20plan.png&quot; style=&quot;margin-left: 1em; margin-right: 1em; text-align: center;&quot;&gt;&lt;img border=&quot;0&quot; data-original-height=&quot;4960&quot; data-original-width=&quot;7015&quot; height=&quot;468&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQM5fj5GOSHLzNTP43bWkl1plPSz5vTNuPMM2Un4Q9COySdwoDVwLJM6oeJxtdEMfV59A9GAmmKKA6Aqr1ULzszDZsE5uZ1N2tLWsbU_T7es44dDwZisDUv24GdmxTTv6yTmmXsYSATqmtP2fwb53_uogzCNMo4Ei0cxRgERvibi67tC5Z20S4zdNFSLMG/w663-h468/Dwaraka%20traffic%20diversion%20plan.png&quot; width=&quot;663&quot; /&gt;&lt;/a&gt;&lt;br /&gt;&lt;br /&gt;&lt;div&gt;&lt;br /&gt;&lt;/div&gt;&lt;div&gt;&lt;br /&gt;&lt;/div&gt;&lt;br /&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_A47Y-Pocxmz61rIvKdT3kd_fg2u7R9yGRiMHfZd_g1tgiBNel_DVuVyplhxxAvs_STssGbI99Qf8_I96Uzwq59IUPIFWvMBBwfm5uE_TEIXvdYuyqRNK2tt2Ay-LfFikBDTdZ79SNlS8vIRVzLTJsEpamr0DzkOTY1OmEUaHKvRJNnUfFniDENWh3Jwk/s3507/PPT.png&quot; style=&quot;margin-left: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; data-original-height=&quot;2480&quot; data-original-width=&quot;3507&quot; height=&quot;455&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_A47Y-Pocxmz61rIvKdT3kd_fg2u7R9yGRiMHfZd_g1tgiBNel_DVuVyplhxxAvs_STssGbI99Qf8_I96Uzwq59IUPIFWvMBBwfm5uE_TEIXvdYuyqRNK2tt2Ay-LfFikBDTdZ79SNlS8vIRVzLTJsEpamr0DzkOTY1OmEUaHKvRJNnUfFniDENWh3Jwk/w643-h455/PPT.png&quot; width=&quot;643&quot; /&gt;&lt;/a&gt;&lt;/div&gt;&lt;br /&gt;&lt;div&gt;&lt;br /&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg08VZ32I4jYxCVYnY4tGg_ahfoO7El_I4diRYBNmzkk6SCu0FbDDcPHBH9dCx4zrVTFJPpGJvWWsuXUT1d_3jAdPl__m2GnpL4BKz7_HsaUFzKL3TM8pnuH9foJ2iaeZuQAJRhaOovgGwI98tRbqffoJvV6YpZ90Q5JI-5hZO9z366lVNkBXocr2jzofMw/s9933/Trimbak%20MSIDC.png&quot; style=&quot;margin-left: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; data-original-height=&quot;7015&quot; data-original-width=&quot;9933&quot; height=&quot;457&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg08VZ32I4jYxCVYnY4tGg_ahfoO7El_I4diRYBNmzkk6SCu0FbDDcPHBH9dCx4zrVTFJPpGJvWWsuXUT1d_3jAdPl__m2GnpL4BKz7_HsaUFzKL3TM8pnuH9foJ2iaeZuQAJRhaOovgGwI98tRbqffoJvV6YpZ90Q5JI-5hZO9z366lVNkBXocr2jzofMw/w646-h457/Trimbak%20MSIDC.png&quot; width=&quot;646&quot; /&gt;&lt;/a&gt;&lt;/div&gt;&lt;div&gt;&lt;br /&gt;&lt;/div&gt;&lt;div&gt;&lt;br /&gt;&lt;/div&gt;&lt;div&gt;&lt;br /&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT3xKRkYa7NXsKK1HSs2s48mUcbpOnWSyBBVVL9IGmCIA4KAKGF1UDdfdIxS-211DllqNg4hrzghZpPO8RDsSmRsBe-DhdQpDxuYt0g5lSL4YOu9UzsyilCorD72mro0YWiBowBp-l2KqKirA_Ad29pESVIodDtBxgi3OEUHcPEKCWE1kSHuhJCWki78ja/s14043/kumbh%20all.png&quot; style=&quot;margin-left: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; data-original-height=&quot;9933&quot; data-original-width=&quot;14043&quot; height=&quot;474&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT3xKRkYa7NXsKK1HSs2s48mUcbpOnWSyBBVVL9IGmCIA4KAKGF1UDdfdIxS-211DllqNg4hrzghZpPO8RDsSmRsBe-DhdQpDxuYt0g5lSL4YOu9UzsyilCorD72mro0YWiBowBp-l2KqKirA_Ad29pESVIodDtBxgi3OEUHcPEKCWE1kSHuhJCWki78ja/w672-h474/kumbh%20all.png&quot; width=&quot;672&quot; /&gt;&lt;/a&gt;&lt;/div&gt;&lt;div&gt;&lt;br /&gt;&lt;/div&gt;&lt;div&gt;&lt;br /&gt;&lt;/div&gt;&lt;div&gt;&lt;br /&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgme2piwfZX1aVe2xpV-UuLPWwUwcjtoleCdSXQtIup6WAQ9kLs_xOOEH8leQYI93An3DV_lg91Sd06-00ikJ1dsHPMR3PIJXkIU_dQtCr1QNr1X1diN7CTx7jxPDq41hloNncv3CxGUcgrbWyDZo9gPSHktTpR6IDgJN0ym49ya3mxbYPfFw-noOZf3gJ9/s3308/1000387444.jpg&quot; style=&quot;margin-left: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; data-original-height=&quot;2339&quot; data-original-width=&quot;3308&quot; height=&quot;472&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgme2piwfZX1aVe2xpV-UuLPWwUwcjtoleCdSXQtIup6WAQ9kLs_xOOEH8leQYI93An3DV_lg91Sd06-00ikJ1dsHPMR3PIJXkIU_dQtCr1QNr1X1diN7CTx7jxPDq41hloNncv3CxGUcgrbWyDZo9gPSHktTpR6IDgJN0ym49ya3mxbYPfFw-noOZf3gJ9/w669-h472/1000387444.jpg&quot; width=&quot;669&quot; /&gt;&lt;/a&gt;&lt;/div&gt;&lt;br /&gt;&lt;div style=&quot;text-align: center;&quot;&gt;Toposheet Numbers&lt;/div&gt;&lt;div style=&quot;text-align: center;&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcLNxlrdPgA7u9a7Wan3KxHiNhDCD0_Uu-pj2uPoh7DPAWRAc4WkHTBzSToOG3NCMynLX_XZ8S0KqrN5rBuHWxJ3P6qRHwmoaXsgw5snljV7eLQYC7sPy-mOFD3TApHHAnTstx6ps0OFZAKzQUo9g3PTBbXet-FTnb0ChQYZp7wfcyrfb_tOz79R-aEi2E/s14043/Toposheet%20numbers.jpg&quot; imageanchor=&quot;1&quot; style=&quot;margin-left: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; data-original-height=&quot;9933&quot; data-original-width=&quot;14043&quot; height=&quot;467&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcLNxlrdPgA7u9a7Wan3KxHiNhDCD0_Uu-pj2uPoh7DPAWRAc4WkHTBzSToOG3NCMynLX_XZ8S0KqrN5rBuHWxJ3P6qRHwmoaXsgw5snljV7eLQYC7sPy-mOFD3TApHHAnTstx6ps0OFZAKzQUo9g3PTBbXet-FTnb0ChQYZp7wfcyrfb_tOz79R-aEi2E/w662-h467/Toposheet%20numbers.jpg&quot; width=&quot;662&quot; /&gt;&lt;/a&gt;&lt;/div&gt;&lt;br /&gt;&lt;div style=&quot;text-align: center;&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;div&gt;&lt;br /&gt;&lt;/div&gt;&lt;div&gt;&lt;br /&gt;&lt;/div&gt;&lt;br /&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;div&gt;&lt;br /&gt;&lt;/div&gt;&lt;div&gt;&lt;br /&gt;&lt;/div&gt;&lt;div class=&quot;blogger-post-footer&quot;&gt;https://yogipwd.blogspot.com/&lt;/div&gt;</description><link>https://www.yogipwd.com/2026/02/maps-prepared-by-me.html</link><author>noreply@blogger.com (Yogendra)</author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAE48AZ6EaZadNdhdxk4FpMaRpyj5FFT7BO2uMfkju6gCGv8hm6YSbXWK77c21YMR88W2V2-7G4hujBXg_9wnfaEG2odIgt1LY8DhnsdWnjnGhMoYEMfAlgp8qhnSrJhyQFqGAwOudlLCkuc2trsxmACIDLoYrFx8Fr7Ui8lkaqQ0DF2aWYySwZwH4fUlt/s72-w659-h465-c/Sawalya%20Povalya%20Road%20existence%20proof.png" height="72" width="72"/><thr:total>0</thr:total></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-1074964965522467583.post-6441247803281962665</guid><pubDate>Tue, 24 Feb 2026 13:26:00 +0000</pubDate><atom:updated>2026-02-24T18:56:30.838+05:30</atom:updated><category domain="http://www.blogger.com/atom/ns#">Guidelines Books Type plan GR&#39;s Circulars</category><category domain="http://www.blogger.com/atom/ns#">PWD Working</category><title>Medical Expenditure Reimbursement Rules</title><description>&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;mr&quot;&gt;
&lt;head&gt;
&lt;meta charset=&quot;UTF-8&quot;&gt;
&lt;title&gt;GR Explanation - Emergency Private Hospital Reimbursement (19-03-2005)&lt;/title&gt;
&lt;style&gt;
body{
    font-family: Arial, sans-serif;
    line-height: 1.6;
    max-width: 1000px;
    margin: auto;
    padding: 20px;
    background:#f4f6f9;
}
h1,h2,h3{
    color:#123b5d;
}
.section{
    background:white;
    padding:20px;
    margin-top:20px;
    border-radius:8px;
}
.highlight{
    background:#e8f4ff;
    padding:10px;
    border-left:5px solid #123b5d;
}
ul{
    margin-left:20px;
}
.footer{
    margin-top:40px;
    font-size:14px;
    color:gray;
    text-align:center;
}
&lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;

&lt;h1&gt;शासकीय निर्णय स्पष्टीकरण&lt;/h1&gt;

&lt;div class=&quot;section&quot;&gt;
&lt;h2&gt;📘 शासन निर्णय तपशील&lt;/h2&gt;
&lt;p&gt;&lt;strong&gt;विषय:&lt;/strong&gt; शासकीय कर्मचाऱ्यांनी व त्यांच्या कुटुंबियांनी आकस्मिक निकडीच्या प्रसंगी घेतलेल्या खाजगी रुग्णालयातील आंतररुग्ण उपचाराच्या वैद्यकीय खर्चाच्या मंजुरीबाबत&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;शासन निर्णय क्रमांक:&lt;/strong&gt; 200503190000000117&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;दिनांक:&lt;/strong&gt; 19 मार्च 2005&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;राज्य:&lt;/strong&gt; महाराष्ट्र शासन&lt;/p&gt;
&lt;/div&gt;

&lt;div class=&quot;section&quot;&gt;
&lt;h2&gt;🎯 शासन निर्णयाचा उद्देश&lt;/h2&gt;
&lt;p&gt;
या शासन निर्णयाचा मुख्य उद्देश असा आहे की, जर एखाद्या शासकीय कर्मचाऱ्याला किंवा त्याच्या कुटुंबातील सदस्याला अचानक जीवघेणी आपत्कालीन स्थिती निर्माण झाली आणि तात्काळ उपचारासाठी खाजगी रुग्णालयात दाखल करावे लागले, तर अशा परिस्थितीत झालेल्या खर्चाची शासनाकडून मर्यादित परतफेड (Reimbursement) करता येईल.
&lt;/p&gt;
&lt;/div&gt;

&lt;div class=&quot;section&quot;&gt;
&lt;h2&gt;🚨 कोणत्या परिस्थितीत लागू?&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;जीव वाचविण्यासाठी तातडीची आवश्यकता (Life Saving Emergency)&lt;/li&gt;
&lt;li&gt;रुग्णालयात भरती (Indoor Treatment) आवश्यक&lt;/li&gt;
&lt;li&gt;जवळपास शासकीय रुग्णालय उपलब्ध नसणे किंवा उपचार सुविधा नसणे&lt;/li&gt;
&lt;li&gt;पूर्वपरवानगी घेणे शक्य नसणे&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;

&lt;div class=&quot;section&quot;&gt;

&lt;h1&gt;आकस्मिक निकडीचे आजार (भाग १)&lt;/h1&gt;

&lt;ol&gt;
&lt;li&gt;हृदयविकाराचा झटका &lt;span class=&quot;english&quot;&gt;(Cardiac emergency)&lt;/span&gt;, मेंदू रक्तवाहिन्यासंबंधी विकार &lt;span class=&quot;english&quot;&gt;(Cerebral vascular)&lt;/span&gt;, फुफ्फुसविकार आपत्कालीन स्थिती &lt;span class=&quot;english&quot;&gt;(Pulmonary emergency)&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;उच्च रक्तदाब &lt;span class=&quot;english&quot;&gt;(Hypertension)&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;धनुर्वात &lt;span class=&quot;english&quot;&gt;(Tetanus)&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;घटसर्प &lt;span class=&quot;english&quot;&gt;(Diphtheria)&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;अपघातामुळे झालेला शॉक सिंड्रोम &lt;span class=&quot;english&quot;&gt;(Accident / Shock Syndrome)&lt;/span&gt;,हृदय-रक्तवाहिनीसंबंधी विकार &lt;span class=&quot;english&quot;&gt;(Cardiological and Vascular)&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;गर्भपात &lt;span class=&quot;english&quot;&gt;(Abortions)&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;तीव्र पोटदुखी / आतड्यांचा अडथळा &lt;span class=&quot;english&quot;&gt;(Acute abdominal pain / Intestinal obstruction)&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;गंभीर रक्तस्राव &lt;span class=&quot;english&quot;&gt;(Severe Haemorrhage)&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;जठरांत्रशोथ &lt;span class=&quot;english&quot;&gt;(Gastro-Enteritis)&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;विषमज्वर &lt;span class=&quot;english&quot;&gt;(Typhoid)&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;बेशुद्धावस्था &lt;span class=&quot;english&quot;&gt;(Coma)&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;मानसिक विकाराची अचानक सुरुवात &lt;span class=&quot;english&quot;&gt;(Onset of psychiatric disorder)&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;डोळ्यातील दृष्टिपटल सरकणे &lt;span class=&quot;english&quot;&gt;(Retinal detachment in the eye)&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;स्त्रीरोग व प्रसूती आपत्कालीन स्थिती &lt;span class=&quot;english&quot;&gt;(Gynaecological and Obstetric emergency)&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;मूत्रजननेंद्रिय आपत्कालीन स्थिती &lt;span class=&quot;english&quot;&gt;(Genito-Urinary emergency)&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;गॅस गँग्रीन &lt;span class=&quot;english&quot;&gt;(Gas Gangrene)&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;कान-नाक-घसा आपत्कालीन स्थिती &lt;span class=&quot;english&quot;&gt;(Foreign body in ear, nose &amp; throat emergency)&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;तातडीच्या शस्त्रक्रियेची आवश्यकता असलेले जन्मजात विकार &lt;span class=&quot;english&quot;&gt;(Congenital anomalies requiring urgent surgical intervention)&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;मेंदूचा ट्युमर &lt;span class=&quot;english&quot;&gt;(Brain Tumour)&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;भाजणे &lt;span class=&quot;english&quot;&gt;(Burns)&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;अपस्मार &lt;span class=&quot;english&quot;&gt;(Epilepsy)&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;तीव्र काचबिंदू &lt;span class=&quot;english&quot;&gt;(Acute Glaucoma)&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;स्पायनल कॉर्ड (मज्जारज्जू )संबंधात आकस्मिक आजार &lt;/li&gt;
&lt;li&gt;उष्माघात&lt;/li&gt;
&lt;li&gt;रक्तसंबंधातील आजार&lt;/li&gt;
&lt;li&gt;प्राणी चावल्यामुळे होणारी विषबाधा&lt;/li&gt;
&lt;li&gt;रसायनांमुळे होणारी विषबाधा&lt;/li&gt;
&lt;/ol&gt;

&lt;/div&gt;
  
  &lt;div&gt;
  &lt;h2&gt;गंभीर आजार – भाग २&lt;/h2&gt;
    
  &lt;ol&gt;
  
  &lt;li&gt;हृदय प्रत्यारोपणाची शस्त्रक्रिया (Heart Surgery)&lt;/li&gt;
  
  &lt;li&gt;हृदय बायपास शस्त्रक्रिया (Bypass Surgery)&lt;/li&gt;
  
  &lt;li&gt;अँजिओप्लास्टी शस्त्रक्रिया (Angioplasty Surgery)&lt;/li&gt;
  
  &lt;li&gt;मूत्रपिंड प्रत्यारोपण शस्त्रक्रिया (Kidney Transplantation)&lt;/li&gt;
  
  &lt;li&gt;रक्ताचा कर्करोग (Blood Cancer)&lt;/li&gt;
      
   &lt;/ol&gt;
    
    &lt;p&gt;वरील प्रकरणे उच्चस्तरीय तपासणीस अधीन असतात.&lt;/p&gt;
    
  &lt;/div&gt;

&lt;div class=&quot;section&quot;&gt;
&lt;h2&gt;💰 खर्च मंजुरीचे नियम&lt;/h2&gt;

&lt;div class=&quot;highlight&quot;&gt;
✔ फक्त आंतररुग्ण (Indoor) उपचारासाठी लागू &lt;br&gt;
✖ बाह्यरुग्ण (OPD) उपचारासाठी लागू नाही
&lt;/div&gt;

&lt;ul&gt;
&lt;li&gt;खर्च शासनमान्य दरानुसारच मंजूर होईल.&lt;/li&gt;
&lt;li&gt;CGHS / शासन रुग्णालय दराप्रमाणे मर्यादा लागू.&lt;/li&gt;
&lt;li&gt;खाजगी रुग्णालयाचे दर जास्त असल्यास अतिरिक्त रक्कम कर्मचाऱ्याने स्वतः भरावी.&lt;/li&gt;
&lt;li&gt;प्रकरण वैद्यकीय तपासणीनंतर मंजूर केले जाईल.&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;

&lt;div class=&quot;section&quot;&gt;
&lt;h2&gt;📑 आवश्यक कागदपत्रे&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;रुग्णालयाचे आपत्कालीन प्रमाणपत्र&lt;/li&gt;
&lt;li&gt;दाखल व सुटकेचा सारांश (Discharge Summary)&lt;/li&gt;
&lt;li&gt;मूळ बिल व पावत्या&lt;/li&gt;
&lt;li&gt;रुग्णाची स्थिती स्पष्ट करणारा वैद्यकीय अहवाल&lt;/li&gt;
&lt;li&gt;खाजगी रुग्णालय निवडण्याचे कारण स्पष्ट करणारे निवेदन&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;

&lt;div class=&quot;section&quot;&gt;
&lt;h2&gt;🏛 मंजुरी प्रक्रिया&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;विभागप्रमुख स्तरावर तपासणी&lt;/li&gt;
&lt;li&gt;प्रशासकीय मान्यता&lt;/li&gt;
&lt;li&gt;आवश्यक असल्यास वित्त विभागाची संमती&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;

&lt;div class=&quot;section&quot;&gt;
&lt;h2&gt;⚖ महत्वाच्या अटी&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;पूर्वनियोजित शस्त्रक्रिया मंजूर नाही.&lt;/li&gt;
&lt;li&gt;फसवणूक आढळल्यास शिस्तभंग कारवाई होऊ शकते.&lt;/li&gt;
&lt;li&gt;आपत्कालीन स्वरूपाची खात्री करणे आवश्यक आहे.&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;&lt;div class=&quot;blogger-post-footer&quot;&gt;https://yogipwd.blogspot.com/&lt;/div&gt;</description><link>https://www.yogipwd.com/2026/02/medical-expenditure-reimbursement-rules.html</link><author>noreply@blogger.com (Yogendra)</author><thr:total>0</thr:total></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-1074964965522467583.post-7569988453082965290</guid><pubDate>Wed, 18 Feb 2026 13:27:00 +0000</pubDate><atom:updated>2026-02-18T20:11:16.981+05:30</atom:updated><category domain="http://www.blogger.com/atom/ns#">PWD Working</category><category domain="http://www.blogger.com/atom/ns#">Tender</category><title>Tender related Information and related calculator - PWD Maharashtra</title><description>&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;Tender related Information and related calculator - PWD Maharashtra&lt;/title&gt;
    &lt;style&gt;
        body {
            font-family: Arial, Helvetica, sans-serif;
            max-width: 900px;
            margin: 40px auto;
            line-height: 1.5;
        }
        h2 {
            text-align: center;
            color: #333;
        }
        .reference {
            font-style: italic;
            color: #555;
            text-align: center;
            margin-bottom: 20px;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        th, td {
            padding: 12px 15px;
            text-align: left;
            border: 1px solid #ddd;
        }
        th {
            background-color: #f2f2f2;
            font-weight: bold;
            color: #333;
        }
        tr:nth-child(even) {
            background-color: #f9f9f9;
        }
        tr:hover {
            background-color: #f1f1f1;
        }
        .center {
            text-align: center;
        }
        .amount {
            font-weight: 600;
        }
        .note {
            font-size: 0.95em;
            color: #444;
            margin-top: 10px;
        }
      .container{
    max-width:900px;
    background:white;
    padding:25px;
    margin:auto;
    border-radius:8px;
    box-shadow:0 0 8px rgba(0,0,0,0.1);
}

input, select{
    width:100%;
    padding:8px;
    margin-top:6px;
    margin-bottom:15px;
}

button{
    padding:10px 20px;
    background:#007bff;
    color:white;
    border:none;
    cursor:pointer;
}

.result{
    background:#f1f1f1;
    padding:15px;
    margin-top:20px;
    border-radius:6px;
}
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
  
    &lt;div class=&quot;container&quot;&gt;

&lt;h2&gt;PWD Tender Detailed Calculator&lt;/h2&gt;

&lt;label&gt;Tender Amount (₹)&lt;/label&gt;
&lt;input type=&quot;number&quot; id=&quot;amount&quot;&gt;

&lt;label&gt;GST (%)&lt;/label&gt;
&lt;input type=&quot;number&quot; id=&quot;gst&quot; value=&quot;18&quot;&gt;

&lt;label&gt;Quoted Below Percentage (%)&lt;/label&gt;
&lt;input type=&quot;number&quot; id=&quot;below&quot;&gt;

&lt;label&gt;Type of Work&lt;/label&gt;
&lt;select id=&quot;workType&quot;&gt;
    &lt;option value=&quot;&quot;&gt;Select Work Type&lt;/option&gt;
    &lt;option value=&quot;rcc&quot;&gt;RCC and Load Bearing Building&lt;/option&gt;
    &lt;option value=&quot;waterproofing&quot;&gt;Waterproofing on Building Slab&lt;/option&gt;
    &lt;option value=&quot;specified&quot;&gt;Specified Repairs to Buildings&lt;/option&gt;
    &lt;option value=&quot;special&quot;&gt;Special Repairs to Building&lt;/option&gt;
    &lt;option value=&quot;current&quot;&gt;Current Repairs to Building&lt;/option&gt;
    &lt;option value=&quot;road&quot;&gt;Strengthening &amp; Black Topping of Roads&lt;/option&gt;
&lt;/select&gt;

&lt;button onclick=&quot;calculate()&quot;&gt;Calculate&lt;/button&gt;

&lt;div class=&quot;result&quot; id=&quot;output&quot;&gt;&lt;/div&gt;

&lt;script&gt;

function formatMoney(num){
    return num.toLocaleString(&#39;en-IN&#39;, {maximumFractionDigits:2});
}

function round1000(val){
    return Math.ceil(val/1000)*1000;
}

function calculate(){

let amt = Number(document.getElementById(&quot;amount&quot;).value);
let gst = Number(document.getElementById(&quot;gst&quot;).value);
let below = Number(document.getElementById(&quot;below&quot;).value);
let type = document.getElementById(&quot;workType&quot;).value;

if(!amt || amt&lt;=0){
    alert(&quot;Enter valid Tender Amount&quot;);
    return;
}

/* ---------- Tender Fee ---------- */

let fee = 0;

if(amt &lt;= 300000) fee = 200;
else if(amt &lt;= 5000000) fee = 500;
else if(amt &lt;= 20000000) fee = 1000;
else if(amt &lt;= 50000000) fee = 2000;
else if(amt &lt;= 1000000000) fee = 3000;
else if(amt &lt;= 5000000000) fee = 5000;
else fee = 10000;

let feeGST = fee + (fee * gst / 100);


/* ---------- Tender Form ---------- */

let form = &quot;D Tender&quot;;

if(amt &lt;= 149999999) form=&quot;B-1 Tender&quot;;
else if(amt &lt;= 499999999) form=&quot;SBD Tender&quot;;
else form=&quot;EPC Tender&quot;;


/* ---------- Publicity Period ---------- */

let publicity=&quot;&quot;;

if(amt &lt; 250000000)
publicity=&quot;1st Call 8 / 2nd call 8 / 3rd call 8 Days&quot;;

else if(amt &lt;= 1000000000)
publicity=&quot;1st Call 15 / 2nd call 8 / 3rd call 8 Days&quot;;

else
publicity=&quot;1st Call 21 / 2nd call 8 / 3rd call 8 Days&quot;;


/* ---------- Completion Period ---------- */

let completion=&quot;Not Applicable&quot;;

if(amt &gt;= 500000 &amp;&amp; amt &lt;= 1500000)
completion=&quot;100 Days&quot;;

else if(amt &gt; 1500000 &amp;&amp; amt &lt;= 5000000)
completion=&quot;180 Days&quot;;

else if(amt &gt; 5000000 &amp;&amp; amt &lt;= 150000000)
completion=&quot;300 Days&quot;;


/* ---------- DLP ---------- */

const dlpMap = {
    rcc:&quot;10 Years&quot;,
    waterproofing:&quot;7 Years&quot;,
    specified:&quot;5 Years&quot;,
    special:&quot;2 Years&quot;,
    current:&quot;1 Year&quot;,
    road:&quot;10 Years&quot;
};

let dlp = dlpMap[type] || &quot;Select Work Type&quot;;


/* ---------- EMD ---------- */

let emd=0;

if(amt &lt;= 15000000)
emd = amt * 0.01;

else
emd = Math.max(amt*0.005 ,150000);


/* ---------- Security Deposit ---------- */

let sd = (amt &lt;= 15000000) ? amt*0.02 : amt*0.01;
sd = round1000(sd);


/* ---------- Additional Performance ---------- */

let apsPercent = 0;

if(below &gt; 0){

if(below &lt;= 10)
apsPercent = 1;

else if(below &lt;= 15)
apsPercent = 1 + (below-10);

else
apsPercent = 6 + (2*(below-15));
}

let apsAmount = amt * apsPercent / 100;


/* ---------- Output ---------- */

let output = `
&lt;b&gt;Tender Fee :&lt;/b&gt; ₹${formatMoney(fee)} + GST = ₹${formatMoney(feeGST)} &lt;br&gt;
&lt;b&gt;Tender Form :&lt;/b&gt; ${form} &lt;br&gt;
&lt;b&gt;Publicity Period :&lt;/b&gt; ${publicity} &lt;br&gt;
&lt;b&gt;Completion Period :&lt;/b&gt; ${completion} &lt;br&gt;
&lt;b&gt;Defect Liability :&lt;/b&gt; ${dlp} &lt;br&gt;
&lt;b&gt;EMD :&lt;/b&gt; ₹${formatMoney(emd)} &lt;br&gt;
&lt;b&gt;Security Deposit :&lt;/b&gt; ₹${formatMoney(sd)} &lt;br&gt;
&lt;b&gt;Additional Performance Security :&lt;/b&gt; ${apsPercent}% 
(${formatMoney(apsAmount)}) &lt;br&gt;
`;

document.getElementById(&quot;output&quot;).innerHTML = output;

}

&lt;/script&gt;
      
      

    &lt;h2&gt;Cost of Blank Tender Form&lt;/h2&gt;
    &lt;div class=&quot;reference&quot;&gt;
        As per PWD GR No. CAT/2017/PK08/Blddg-2 dated 27/09/2018&lt;br&gt;
        Para No. 5.3 (Annexure 6)
    &lt;/div&gt;

    &lt;table&gt;
        &lt;thead&gt;
            &lt;tr&gt;
                &lt;th&gt;Sr. No.&lt;/th&gt;
                &lt;th&gt;Tender Amount&lt;/th&gt;
                &lt;th&gt;Tender Fees&lt;/th&gt;
            &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;
            &lt;tr&gt;
                &lt;td&gt;1&lt;/td&gt;
                &lt;td&gt;Up to 3 lakhs&lt;/td&gt;
                &lt;td class=&quot;amount&quot;&gt;₹ 200 + GST&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;2&lt;/td&gt;
                &lt;td&gt;3 lakhs to 50 lakhs&lt;/td&gt;
                &lt;td class=&quot;amount&quot;&gt;₹ 500 + GST&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;3&lt;/td&gt;
                &lt;td&gt;20 lakhs to 2 crores&lt;/td&gt;
                &lt;td class=&quot;amount&quot;&gt;₹ 1,000 + GST&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;4&lt;/td&gt;
                &lt;td&gt;2 crores to 5 crores&lt;/td&gt;
                &lt;td class=&quot;amount&quot;&gt;₹ 2,000 + GST&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;5&lt;/td&gt;
                &lt;td&gt;5 crores to 100 crores&lt;/td&gt;
                &lt;td class=&quot;amount&quot;&gt;₹ 3,000 + GST&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;6&lt;/td&gt;
                &lt;td&gt;100 crores to 500 crores&lt;/td&gt;
                &lt;td class=&quot;amount&quot;&gt;₹ 5,000 + GST&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;7&lt;/td&gt;
                &lt;td&gt;More than 500 crores&lt;/td&gt;
                &lt;td class=&quot;amount&quot;&gt;₹ 10,000 + GST&lt;/td&gt;
            &lt;/tr&gt;
        &lt;/tbody&gt;
    &lt;/table&gt;

    &lt;p class=&quot;note center&quot;&gt;
        Note: All amounts are as per the Government Resolution mentioned above. GST is applicable extra as per prevailing rates.
    &lt;/p&gt;
  
  &lt;table border=&quot;1&quot; cellpadding=&quot;10&quot; cellspacing=&quot;0&quot; style=&quot;border-collapse: collapse; width: 100%; font-family: Arial, sans-serif;&quot;&gt;
    &lt;caption style=&quot;font-weight: bold; font-size: 1.2em; padding: 10px; text-align: left;&quot;&gt;
        Tenders shall be invited in following formats
        &lt;br&gt;&lt;small&gt;PWD GR No. CAT/2017/PK08/Blddg-2 dated 27/09/2018 at Para 2.9.1 (Annexure 6)&lt;/small&gt;
    &lt;/caption&gt;
    &lt;thead&gt;
        &lt;tr style=&quot;background-color: #f2f2f2;&quot;&gt;
            &lt;th style=&quot;text-align: center;&quot;&gt;Sr. No.&lt;/th&gt;
            &lt;th style=&quot;text-align: left;&quot;&gt;Works Costing&lt;/th&gt;
            &lt;th style=&quot;text-align: left;&quot;&gt;Tender Form&lt;/th&gt;
        &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
        &lt;tr&gt;
            &lt;td style=&quot;text-align: center;&quot;&gt;1&lt;/td&gt;
            &lt;td&gt;Civil Works Costing up to 15 Cr&lt;/td&gt;
            &lt;td&gt;B-1 Tender Form&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td style=&quot;text-align: center;&quot;&gt;2&lt;/td&gt;
            &lt;td&gt;Civil Works Costing from 15 Cr to 50 Cr&lt;/td&gt;
            &lt;td&gt;SBD Tender Form&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td style=&quot;text-align: center;&quot;&gt;3&lt;/td&gt;
            &lt;td&gt;Civil Works Costing more than 50 Cr&lt;/td&gt;
            &lt;td&gt;EPC Tender Form&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td style=&quot;text-align: center;&quot;&gt;4&lt;/td&gt;
            &lt;td&gt;Supply of Items / Materials&lt;/td&gt;
            &lt;td&gt;D Tender Form&lt;/td&gt;
        &lt;/tr&gt;
    &lt;/tbody&gt;
&lt;/table&gt;
  
  &lt;table border=&quot;1&quot; cellpadding=&quot;10&quot; cellspacing=&quot;0&quot; style=&quot;border-collapse: collapse; width: 100%; font-family: Arial, sans-serif;&quot;&gt;
    &lt;caption style=&quot;font-weight: bold; font-size: 1.2em; padding: 10px; text-align: left;&quot;&gt;
        Minimum Time/Period of Publicity of Tender
        &lt;br&gt;&lt;small&gt;PWD GR No. CAT/2017/PK08/Blddg-2 dated (earlier 27/09/2018 at Para 2 (Annexure 6)) now revised&lt;/small&gt;
    &lt;/caption&gt;
    &lt;thead&gt;
        &lt;tr style=&quot;background-color: #f2f2f2;&quot;&gt;
            &lt;th style=&quot;text-align: center;&quot;&gt;Sr. No.&lt;/th&gt;
            &lt;th style=&quot;text-align: left;&quot;&gt;Work Cost&lt;/th&gt;
            &lt;th style=&quot;text-align: center;&quot;&gt;First Call&lt;/th&gt;
            &lt;th style=&quot;text-align: center;&quot;&gt;Second Call&lt;/th&gt;
            &lt;th style=&quot;text-align: center;&quot;&gt;Third Call&lt;/th&gt;
        &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
        &lt;tr&gt;
            &lt;td style=&quot;text-align: center;&quot;&gt;1&lt;/td&gt;
            &lt;td&gt;Below 25 Cr&lt;/td&gt;
            &lt;td style=&quot;text-align: center;&quot;&gt;8 days&lt;/td&gt;
            &lt;td style=&quot;text-align: center;&quot;&gt;8 days&lt;/td&gt;
            &lt;td style=&quot;text-align: center;&quot;&gt;8 days&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td style=&quot;text-align: center;&quot;&gt;2&lt;/td&gt;
            &lt;td&gt;25 Cr to 100 Lakhs&lt;/td&gt;
            &lt;td style=&quot;text-align: center;&quot;&gt;15 days&lt;/td&gt;
            &lt;td style=&quot;text-align: center;&quot;&gt;8 days&lt;/td&gt;
            &lt;td style=&quot;text-align: center;&quot;&gt;8 days&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td style=&quot;text-align: center;&quot;&gt;3&lt;/td&gt;
            &lt;td&gt;&gt;100 Crs.&lt;/td&gt;
            &lt;td style=&quot;text-align: center;&quot;&gt;21 days&lt;/td&gt;
            &lt;td style=&quot;text-align: center;&quot;&gt;8 days&lt;/td&gt;
            &lt;td style=&quot;text-align: center;&quot;&gt;8 days&lt;/td&gt;
        &lt;/tr&gt;
    &lt;/tbody&gt;
&lt;/table&gt;
  
  
  &lt;table border=&quot;1&quot; cellpadding=&quot;10&quot; cellspacing=&quot;0&quot; style=&quot;border-collapse: collapse; width: 100%; font-family: Arial, sans-serif;&quot;&gt;
    &lt;caption style=&quot;font-weight: bold; font-size: 1.2em; padding: 10px; text-align: left;&quot;&gt;
        Completion Period for Works Costing More Than Rs. 5.00 Lakhs
        &lt;br&gt;&lt;small&gt;As per PWD GR No. CAT-2019/PK 96/Blddg-2 dated 26/07/2019 (Annexure 10)&lt;/small&gt;
    &lt;/caption&gt;
    &lt;thead&gt;
        &lt;tr style=&quot;background-color: #f2f2f2;&quot;&gt;
            &lt;th style=&quot;text-align: center;&quot;&gt;Sr. No.&lt;/th&gt;
            &lt;th style=&quot;text-align: left;&quot;&gt;Cost&lt;/th&gt;
            &lt;th style=&quot;text-align: center;&quot;&gt;Time Period&lt;/th&gt;
        &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
        &lt;tr&gt;
            &lt;td style=&quot;text-align: center;&quot;&gt;1&lt;/td&gt;
            &lt;td&gt;5 lakhs to 15 lakhs&lt;/td&gt;
            &lt;td style=&quot;text-align: center;&quot;&gt;100 days&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td style=&quot;text-align: center;&quot;&gt;2&lt;/td&gt;
            &lt;td&gt;15 lakhs to 50 lakhs&lt;/td&gt;
            &lt;td style=&quot;text-align: center;&quot;&gt;180 days&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td style=&quot;text-align: center;&quot;&gt;3&lt;/td&gt;
            &lt;td&gt;50 lakhs to 15 crores&lt;/td&gt;
            &lt;td style=&quot;text-align: center;&quot;&gt;300 days&lt;/td&gt;
        &lt;/tr&gt;
    &lt;/tbody&gt;
&lt;/table&gt;
  
  &lt;table border=&quot;1&quot; cellpadding=&quot;10&quot; cellspacing=&quot;0&quot; style=&quot;border-collapse: collapse; width: 100%; font-family: Arial, sans-serif;&quot;&gt;
    &lt;caption style=&quot;font-weight: bold; font-size: 1.2em; padding: 10px; text-align: left;&quot;&gt;
        Defect Liability Period
        &lt;br&gt;&lt;small&gt;PWD GR - MISC-2018/PK 151/Blddg-2 dated 14 Jan 2019 (Annexure 11)&lt;/small&gt;
    &lt;/caption&gt;
    &lt;thead&gt;
        &lt;tr style=&quot;background-color: #f2f2f2;&quot;&gt;
            &lt;th style=&quot;text-align: center;&quot;&gt;Sr. No.&lt;/th&gt;
            &lt;th style=&quot;text-align: left;&quot;&gt;Type of Work&lt;/th&gt;
            &lt;th style=&quot;text-align: center;&quot;&gt;Time Period&lt;/th&gt;
        &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
        &lt;tr&gt;
            &lt;td style=&quot;text-align: center;&quot;&gt;1&lt;/td&gt;
            &lt;td&gt;RCC and Load bearing Building&lt;/td&gt;
            &lt;td style=&quot;text-align: center;&quot;&gt;10 years&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td style=&quot;text-align: center;&quot;&gt;2&lt;/td&gt;
            &lt;td&gt;Waterproofing on Building Slab&lt;/td&gt;
            &lt;td style=&quot;text-align: center;&quot;&gt;07 years&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td style=&quot;text-align: center;&quot;&gt;3&lt;/td&gt;
            &lt;td&gt;Specified Repairs to Buildings&lt;/td&gt;
            &lt;td style=&quot;text-align: center;&quot;&gt;05 years&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td style=&quot;text-align: center;&quot;&gt;4&lt;/td&gt;
            &lt;td&gt;Special Repairs to Building&lt;/td&gt;
            &lt;td style=&quot;text-align: center;&quot;&gt;02 years&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td style=&quot;text-align: center;&quot;&gt;5&lt;/td&gt;
            &lt;td&gt;Current repairs to Building&lt;/td&gt;
            &lt;td style=&quot;text-align: center;&quot;&gt;01 year&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td style=&quot;text-align: center;&quot;&gt;6&lt;/td&gt;
            &lt;td&gt;Strengthening &amp; Black Topping of Roads&lt;/td&gt;
            &lt;td style=&quot;text-align: center;&quot;&gt;10 years&lt;/td&gt;
        &lt;/tr&gt;
    &lt;/tbody&gt;
&lt;/table&gt;
  
  &lt;table border=&quot;1&quot; cellpadding=&quot;10&quot; cellspacing=&quot;0&quot; style=&quot;border-collapse: collapse; width: 100%; font-family: Arial, sans-serif;&quot;&gt;
    &lt;caption style=&quot;font-weight: bold; font-size: 1.2em; padding: 10px; text-align: left;&quot;&gt;
        Earnest Money Deposit (EMD)
        &lt;br&gt;&lt;small&gt;PWD GR No. CAT/2017/PK08/Blddg-2 dated 27/09/2018 at Para No. 2.7 (Annexure No. 6)&lt;/small&gt;
    &lt;/caption&gt;
    &lt;thead&gt;
        &lt;tr style=&quot;background-color: #f2f2f2;&quot;&gt;
            &lt;th style=&quot;text-align: center;&quot;&gt;Sr. No.&lt;/th&gt;
            &lt;th style=&quot;text-align: left;&quot;&gt;Work Costing&lt;/th&gt;
            &lt;th style=&quot;text-align: left;&quot;&gt;Earnest Money Deposit (EMD)&lt;/th&gt;
        &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
        &lt;tr&gt;
            &lt;td style=&quot;text-align: center;&quot;&gt;1&lt;/td&gt;
            &lt;td&gt;Work Costing up to 1.5 Cr.&lt;/td&gt;
            &lt;td&gt;1% of Tender Amount&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td style=&quot;text-align: center;&quot;&gt;2&lt;/td&gt;
            &lt;td&gt;Work Costing More than 1.5 Cr.&lt;/td&gt;
            &lt;td&gt;0.5% of Tender Amount or Rs. 1.50 Lakhs whichever is higher&lt;/td&gt;
        &lt;/tr&gt;
    &lt;/tbody&gt;
&lt;/table&gt;

&lt;p style=&quot;font-family: Arial, sans-serif; margin-top: 15px; font-size: 0.95em; color: #444;&quot;&gt;
    &lt;strong&gt;Note:&lt;/strong&gt; EMD is compulsory for all bidders. Tenders without EMD shall be technically disqualified for opening of financial bid. For bids of appointment of consultant, EMD is not necessary.
&lt;/p&gt;
  
  &lt;p&gt;&lt;strong&gt;Security Deposit:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;
    PWD GR No. CAT/2017/PK08/Bldg-2 dated 27/09/2018 at Para No. 2.8 (Annexure No.6)
&lt;/p&gt;

&lt;table border=&quot;1&quot; cellspacing=&quot;0&quot; cellpadding=&quot;6&quot;&gt;
    &lt;thead&gt;
        &lt;tr&gt;
            &lt;th&gt;Sr No&lt;/th&gt;
            &lt;th&gt;Work Cost&lt;/th&gt;
            &lt;th&gt;Security Deposit&lt;/th&gt;
        &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
        &lt;tr&gt;
            &lt;td&gt;1&lt;/td&gt;
            &lt;td&gt;Works Costing upto 1.5 Cr&lt;/td&gt;
            &lt;td&gt;2 (Two) % of Tender Amount (Rounded to next Rs.1000)&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;2&lt;/td&gt;
            &lt;td&gt;Works Costing more than 1.5 Cr&lt;/td&gt;
            &lt;td&gt;1 (One) % of Tender Amount (Rounded to next Rs.1000)&lt;/td&gt;
        &lt;/tr&gt;
    &lt;/tbody&gt;
&lt;/table&gt;

  &lt;p&gt;&lt;strong&gt;13.11 Additional Performance Security Deposit:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;
    Additional performance security shall be submitted by the lowest bidder, who quotes rates below estimated rates of tender as per 
    PWD GR CAT/2017/PK 08/Bldg-2 dated 26 Nov 2018 (Annexure 14) before work order:
&lt;/p&gt;

&lt;table border=&quot;1&quot; cellspacing=&quot;0&quot; cellpadding=&quot;6&quot;&gt;
    &lt;thead&gt;
        &lt;tr&gt;
            &lt;th&gt;Sr No&lt;/th&gt;
            &lt;th&gt;Below Tender Offer Quoted&lt;/th&gt;
            &lt;th&gt;Additional Performance Security (In percentage of Tender Cost)&lt;/th&gt;
        &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
        &lt;tr&gt;
            &lt;td&gt;1&lt;/td&gt;
            &lt;td&gt;Upto 10% Below&lt;/td&gt;
            &lt;td&gt;1%&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;2&lt;/td&gt;
            &lt;td&gt;Upto 15% Below&lt;/td&gt;
            &lt;td&gt;1% + Quoted percentage above 10%&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;3&lt;/td&gt;
            &lt;td&gt;More than 15% Below&lt;/td&gt;
            &lt;td&gt;6% + Twice actual percentage above 15%&lt;/td&gt;
        &lt;/tr&gt;
    &lt;/tbody&gt;
&lt;/table&gt;&lt;div class=&quot;blogger-post-footer&quot;&gt;https://yogipwd.blogspot.com/&lt;/div&gt;</description><link>https://www.yogipwd.com/2026/02/tender-information-and-related.html</link><author>noreply@blogger.com (Yogendra)</author><thr:total>0</thr:total></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-1074964965522467583.post-2710278084369884730</guid><pubDate>Wed, 18 Feb 2026 12:34:00 +0000</pubDate><atom:updated>2026-02-18T20:50:53.954+05:30</atom:updated><category domain="http://www.blogger.com/atom/ns#">Estimate Preparation</category><category domain="http://www.blogger.com/atom/ns#">PWD Working</category><title>Block Estimate Rates</title><description>&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;PWD Block Estimate (2022-23)&lt;/title&gt;
    &lt;style&gt;
        :root {
            --primary: #2980b9;
            --secondary: #2c3e50;
            --accent: #27ae60;
            --bg: #f4f7f6;
        }

        body {
            font-family: &quot;Segoe UI&quot;, Roboto, Helvetica, Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: var(--bg);
            color: #333;
            line-height: 1.6;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: #fff;
            padding: 10px;
            border-radius: 8px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        }
      
      table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
    font-size: 14px;
}

table thead {
    background-color: #f2f2f2;
}

table th {
    border: 1px solid #333;
    padding: 8px;
    text-align: center;
    font-weight: 600;
}

table td {
    border: 1px solid #555;
    padding: 7px;
    vertical-align: top;
}

/* Alternate row shading */
table tbody tr:nth-child(even) {
    background-color: #fafafa;
}

        h1 {
            color: var(--secondary);
            text-align: center;
            font-size: 24px;
            border-bottom: 3px solid var(--primary);
            padding-bottom: 15px;
            margin-bottom: 30px;
        }

        .input-group {
            margin-bottom: 20px;
        }

        label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: var(--secondary);
        }

        select, input[type=&quot;number&quot;] {
            width: 100%;
            padding: 12px;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 16px;
            box-sizing: border-box;
            transition: border-color 0.3s;
        }

        select:focus, input:focus {
            border-color: var(--primary);
            outline: none;
        }

        .btn-container {
            display: flex;
            gap: 10px;
            margin-top: 30px;
        }

        button {
            flex: 1;
            padding: 15px;
            font-size: 16px;
            font-weight: bold;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background 0.3s;
        }

        .calc-btn { background-color: var(--primary); }
        .calc-btn:hover { background-color: #1f6391; }
        
        .print-btn { background-color: #7f8c8d; }
        .print-btn:hover { background-color: #636e72; }

        #result-box {
            margin-top: 30px;
            padding: 25px;
            background: #fff;
            border: 2px solid var(--primary);
            border-radius: 6px;
            display: none;
        }

        .estimate-table {
            width: 100%;
            border-collapse: collapse;
            margin: 15px 0;
        }

        .estimate-table td {
            padding: 10px 0;
            border-bottom: 1px solid #eee;
        }

        .total-row {
            font-size: 1.3em;
            font-weight: bold;
            color: var(--secondary);
        }

        .footer-note {
            margin-top: 40px;
            font-size: 0.85em;
            color: #777;
            text-align: center;
            border-top: 1px solid #eee;
            padding-top: 20px;
        }

        @media print {
            body { background: white; padding: 0; }
            .container { box-shadow: none; width: 100%; max-width: 100%; }
            button, select, input, label, small { display: none; }
            #result-box { display: block !important; border: none; }
            h1 { font-size: 20px; }
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;div class=&quot;container&quot;&gt;
    &lt;h1&gt;PWD Block Estimate Calculator (2022-23)&lt;/h1&gt;

    &lt;div class=&quot;input-group&quot;&gt;
        &lt;label&gt;Work Category&lt;/label&gt;
        &lt;select id=&quot;category&quot; onchange=&quot;loadOptions()&quot;&gt;
            &lt;option value=&quot;&quot;&gt;-- Select Category --&lt;/option&gt;
            &lt;option value=&quot;road&quot;&gt;Road Work / Renewal&lt;/option&gt;
            &lt;option value=&quot;culvert&quot;&gt;Pipe Culvert (Stage-I)&lt;/option&gt;
            &lt;option value=&quot;causeway&quot;&gt;Causeway / Hard Passage&lt;/option&gt;
            &lt;option value=&quot;bridge&quot;&gt;Minor Bridge / Slab Drain&lt;/option&gt;
            &lt;option value=&quot;building&quot;&gt;Building Work&lt;/option&gt;
        &lt;/select&gt;
    &lt;/div&gt;

    &lt;div id=&quot;dynamicInputs&quot;&gt;&lt;/div&gt;

    &lt;div class=&quot;input-group&quot;&gt;
        &lt;label&gt;Area Adjustment %&lt;/label&gt;
        &lt;input type=&quot;number&quot; id=&quot;adjust&quot; value=&quot;0&quot; step=&quot;1&quot;&gt;
        &lt;small style=&quot;color:#666&quot;&gt;Ghat +15%, Tribal +10%, Corp +5%, Gadchiroli +20%&lt;/small&gt;
    &lt;/div&gt;

    &lt;div class=&quot;btn-container&quot;&gt;
        &lt;button class=&quot;calc-btn&quot; onclick=&quot;calculate()&quot;&gt;Generate Estimate&lt;/button&gt;
        &lt;button class=&quot;print-btn&quot; onclick=&quot;window.print()&quot;&gt;Print PDF&lt;/button&gt;
    &lt;/div&gt;

    &lt;div id=&quot;result-box&quot; style=&quot;display:none;&quot;&gt;
        &lt;h2 style=&quot;margin-top:0;&quot;&gt;Estimate Summary&lt;/h2&gt;
        &lt;div id=&quot;result-content&quot;&gt;&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;script&gt;
  
  let estimateItems = [];

/* ===================== RATES ===================== */

const roadRates = {
&quot;Village Road BC&quot;:834000,
&quot;Village Road Non BC&quot;:681800,
&quot;ODR/MDR BC&quot;:1010100,
&quot;ODR/MDR Non BC&quot;:843700,
&quot;State Highway BC&quot;:1413000,
&quot;State Highway Non BC&quot;:1204500,
&quot;VR Renewal&quot;:976000,
&quot;ORD/MDR Renewal&quot;:1200000,
&quot;SH Renewal&quot;:1790000,
&quot;MPM 75 Over WBM&quot;:1418250,
&quot;MPM 75 Over BT&quot;:1500938,
&quot;BUSG 75 Over WBM&quot;:1513250,
&quot;BUSG 75 Over BT&quot;:1701000,
&quot;MPM 50 Over WBM&quot;:1058438,
&quot;MPM 50 Over BT&quot;:1197188,
&quot;SCD Over WBM&quot;:380250,
&quot;SCD Over BT&quot;:387000,
&quot;Premix Carpet WBM&quot;:1228313,
&quot;Premix Carpet BT&quot;:1214626,
&quot;50mm BM&quot;:2108850,
&quot;75mm DBM&quot;:3104770,
&quot;30mm BC&quot;:1774500,
&quot;50mm DBM&quot;:2487600,
&quot;75mm BM&quot;:3672890,
&quot;CC Drain&quot;:5358000
};

const culvertRates = {
&quot;800 Single 7.5&quot;:397000,&quot;800 Single 10&quot;:415900,
&quot;800 Double 7.5&quot;:510400,&quot;800 Double 10&quot;:558200,
&quot;800 Triple 7.5&quot;:629000,&quot;800 Triple 10&quot;:706600,
&quot;900 Single 7.5&quot;:424600,&quot;900 Single 10&quot;:451300,
&quot;900 Double 7.5&quot;:560700,&quot;900 Double 10&quot;:611900,
&quot;900 Triple 7.5&quot;:693000,&quot;900 Triple 10&quot;:769800,
&quot;1000 Single 7.5&quot;:468500,&quot;1000 Single 10&quot;:496300,
&quot;1000 Double 7.5&quot;:615400,&quot;1000 Double 10&quot;:672200,
&quot;1000 Triple 7.5&quot;:710700,&quot;1000 Triple 10&quot;:847500,
&quot;1200 Single 7.5&quot;:564200,&quot;1200 Single 10&quot;:600600,
&quot;1200 Double 7.5&quot;:734600,&quot;1200 Double 10&quot;:823100,
&quot;1200 Triple 7.5&quot;:936000,&quot;1200 Triple 10&quot;:1045500
};

const causewayRates = {&quot;Without Vents&quot;:28700,&quot;With Pipes&quot;:26300};

const bridgeRates = {
&quot;Open Foundation&quot;:54617,
&quot;Raft Foundation&quot;:63857,
&quot;Box Cells&quot;:500125,
&quot;Non Submersible&quot;:26180,
&quot;Submersible&quot;:45629
};

const buildingRates = {
iti_gf:{name:&quot;I.T.I Buildings, Administrative Buildings and other similar structures – Ground Floor&quot;,rate:30000},
iti_ff:{name:&quot;I.T.I Buildings, Administrative Buildings and other similar structures – First Floor&quot;,rate:24450},

hostel_gf:{name:&quot;Hostel, Courts, Urban Hospital and other similar Buildings – Ground Floor&quot;,rate:30100},
hostel_ff:{name:&quot;Hostel, Courts, Urban Hospital and other similar Buildings – First Floor&quot;,rate:25250},

rural_gf:{name:&quot;Rural Hospital and other similar Buildings – Ground Floor&quot;,rate:24700},

res_gf:{name:&quot;Residential Quarter (Type III, IV &amp; V) – Ground Floor&quot;,rate:25000},
res_ff_a:{name:&quot;Residential Quarter (Type III, IV &amp; V) – First Floor&quot;,rate:21200},
res_ff_b:{name:&quot;Residential Quarters (Type III, IV &amp; V) – Ground Floor&quot;,rate:28800},
res_ff_c:{name:&quot;Residential Quarters (Type III, IV &amp; V) – First Floor&quot;,rate:23450},

judge_gf:{name:&quot;Bungalows of Hon’ble Judges and other similar Buildings – Ground Floor&quot;,rate:29000},
judge_ff:{name:&quot;Bungalows of Hon’ble Judges and other similar Buildings – First Floor&quot;,rate:24000}
};


/* ---------------- DROPDOWN ---------------- */

function optionList(obj){
return Object.keys(obj).map(key=&gt;{
if(typeof obj[key]===&quot;object&quot;){
return `&lt;option value=&quot;${key}&quot;&gt;${obj[key].name}&lt;/option&gt;`;
}
return `&lt;option value=&quot;${key}&quot;&gt;${key}&lt;/option&gt;`;
}).join(&#39;&#39;);
}

/* ---------------- LOAD INPUTS ---------------- */

function loadOptions(){

document.getElementById(&quot;result-box&quot;).style.display=&quot;none&quot;;

const cat=document.getElementById(&quot;category&quot;).value;
const container=document.getElementById(&quot;dynamicInputs&quot;);

let html=&quot;&quot;;

if(!cat){container.innerHTML=&quot;&quot;;return;}

switch(cat){

case &quot;road&quot;:
html=`
&lt;label&gt;Road Type&lt;/label&gt;
&lt;select id=&quot;item&quot;&gt;${optionList(roadRates)}&lt;/select&gt;
&lt;label&gt;Length (km)&lt;/label&gt;
&lt;input type=&quot;number&quot; id=&quot;qty&quot; step=&quot;0.01&quot;&gt;`;
break;

case &quot;culvert&quot;:
html=`
&lt;label&gt;Type&lt;/label&gt;
&lt;select id=&quot;item&quot;&gt;${optionList(culvertRates)}&lt;/select&gt;
&lt;label&gt;Quantity&lt;/label&gt;
&lt;input type=&quot;number&quot; id=&quot;qty&quot;&gt;`;
break;

case &quot;causeway&quot;:
html=`
&lt;label&gt;Type&lt;/label&gt;
&lt;select id=&quot;item&quot;&gt;${optionList(causewayRates)}&lt;/select&gt;
&lt;label&gt;Length (m)&lt;/label&gt;
&lt;input type=&quot;number&quot; id=&quot;qty&quot;&gt;
&lt;label&gt;Width (m)&lt;/label&gt;
&lt;input type=&quot;number&quot; id=&quot;width&quot; value=&quot;7.5&quot;&gt;
&lt;label&gt;BC Soil&lt;/label&gt;
&lt;select id=&quot;bcsoil&quot;&gt;
&lt;option value=&quot;0&quot;&gt;No&lt;/option&gt;
&lt;option value=&quot;15&quot;&gt;Yes (+15%)&lt;/option&gt;
&lt;/select&gt;`;
break;

case &quot;bridge&quot;:
html=`
&lt;label&gt;Bridge Type&lt;/label&gt;
&lt;select id=&quot;item&quot;&gt;${optionList(bridgeRates)}&lt;/select&gt;
&lt;label&gt;Length (m)&lt;/label&gt;
&lt;input type=&quot;number&quot; id=&quot;qty&quot;&gt;`;
break;

case &quot;building&quot;:
html=`
&lt;label&gt;Building Type&lt;/label&gt;
&lt;select id=&quot;item&quot;&gt;${optionList(buildingRates)}&lt;/select&gt;
&lt;label&gt;Built-up Area (sqm)&lt;/label&gt;
&lt;input type=&quot;number&quot; id=&quot;qty&quot;&gt;
&lt;label&gt;Floors&lt;/label&gt;
&lt;input type=&quot;number&quot; id=&quot;floors&quot; value=&quot;1&quot;&gt;`;
break;

}

container.innerHTML=html;
}

/* ---------------- CALCULATE ---------------- */

function calculate(){

const cat=document.getElementById(&quot;category&quot;).value;
const item=document.getElementById(&quot;item&quot;).value;
const qty=parseFloat(document.getElementById(&quot;qty&quot;).value);
const adjust=parseFloat(document.getElementById(&quot;adjust&quot;).value)||0;

if(!cat) return alert(&quot;Select category&quot;);
if(isNaN(qty)||qty&lt;=0) return alert(&quot;Enter valid quantity&quot;);

let rate=0;

if(cat===&quot;road&quot;)rate=roadRates[item];
else if(cat===&quot;culvert&quot;)rate=culvertRates[item];
else if(cat===&quot;causeway&quot;)rate=causewayRates[item];
else if(cat===&quot;bridge&quot;)rate=bridgeRates[item];
else if(cat===&quot;building&quot;)rate=buildingRates[item]?.rate;

if(!rate) return alert(&quot;Rate not found&quot;);

let baseTotal=rate*qty;
let extra=0;

/* Causeway */
if(cat===&quot;causeway&quot;){
const width=parseFloat(document.getElementById(&quot;width&quot;).value)||7.5;
baseTotal=rate*qty*width;

const bc=parseFloat(document.getElementById(&quot;bcsoil&quot;).value);
if(bc&gt;0) extra+=baseTotal*(bc/100);
}

/* Building */
if(cat===&quot;building&quot;){
const floors=parseInt(document.getElementById(&quot;floors&quot;).value)||1;
baseTotal=rate*qty*floors;
}

/* Final */
let subTotal=baseTotal+extra;
let finalTotal=subTotal+(subTotal*(adjust/100));

/* Store Item */
const itemName = (cat===&quot;building&quot;) ? buildingRates[item].name : item;

estimateItems.push({
category:getCategoryName(cat),
name:itemName,
qty:qty,
amount:finalTotal
});

renderEstimateTable();
}

/* ---------------- CATEGORY LABEL ---------------- */

function getCategoryName(cat){
return {
road:&quot;Road Work&quot;,
culvert:&quot;Pipe Culvert&quot;,
causeway:&quot;Causeway&quot;,
bridge:&quot;Bridge&quot;,
building:&quot;Building&quot;
}[cat];
}

/* ---------------- TABLE RENDER ---------------- */

function renderEstimateTable(){

let grandTotal=0;

let rows=estimateItems.map((item,i)=&gt;{
grandTotal+=item.amount;

return `
&lt;tr&gt;
&lt;td&gt;${i+1}&lt;/td&gt;
&lt;td&gt;${item.category}&lt;/td&gt;
&lt;td&gt;${item.name}&lt;/td&gt;
&lt;td&gt;${item.qty}&lt;/td&gt;
&lt;td align=&quot;right&quot;&gt;₹${Math.round(item.amount).toLocaleString(&#39;en-IN&#39;)}&lt;/td&gt;
&lt;td&gt;&lt;button onclick=&quot;removeItem(${i})&quot;&gt;Delete&lt;/button&gt;&lt;/td&gt;
&lt;/tr&gt;`;
}).join(&#39;&#39;);

document.getElementById(&quot;result-content&quot;).innerHTML=`
&lt;table border=&quot;1&quot; width=&quot;100%&quot;&gt;
&lt;tr&gt;
&lt;th&gt;Sr&lt;/th&gt;
&lt;th&gt;Category&lt;/th&gt;
&lt;th&gt;Description&lt;/th&gt;
&lt;th&gt;Qty&lt;/th&gt;
&lt;th&gt;Amount&lt;/th&gt;
&lt;th&gt;Action&lt;/th&gt;
&lt;/tr&gt;
${rows}
&lt;tr&gt;
&lt;td colspan=&quot;4&quot;&gt;&lt;b&gt;Grand Total&lt;/b&gt;&lt;/td&gt;
&lt;td align=&quot;right&quot;&gt;&lt;b&gt;₹${Math.round(grandTotal).toLocaleString(&#39;en-IN&#39;)}&lt;/b&gt;&lt;/td&gt;
&lt;td&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;`;

document.getElementById(&quot;result-box&quot;).style.display=&quot;block&quot;;
}

/* ---------------- REMOVE ITEM ---------------- */

function removeItem(index){
estimateItems.splice(index,1);
renderEstimateTable();
}

&lt;/script&gt;





&lt;h1&gt;Road construction / renewal works (2022–23)&lt;/h1&gt;
&lt;table border=&quot;1&quot; cellspacing=&quot;0&quot; cellpadding=&quot;6&quot;&gt;
    &lt;thead&gt;
        &lt;tr&gt;
            &lt;th&gt;Sl No&lt;/th&gt;
            &lt;th&gt;Item of Work&lt;/th&gt;
            &lt;th&gt;Details&lt;/th&gt;
            &lt;th&gt;Proposed Rate 2022-23&lt;/th&gt;
        &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
        &lt;tr&gt;
            &lt;td&gt;1&lt;/td&gt;
            &lt;td&gt;Village Road&lt;/td&gt;
            &lt;td&gt;Roadway: 7.50 m, Carriageway: 3.00 m, BC Soil (Per Km)&lt;/td&gt;
            &lt;td&gt;834000.00&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;1&lt;/td&gt;
            &lt;td&gt;Village Road&lt;/td&gt;
            &lt;td&gt;Roadway: 7.50 m, Carriageway: 3.00 m, Non BC Soil (Per Km)&lt;/td&gt;
            &lt;td&gt;681800.00&lt;/td&gt;
        &lt;/tr&gt;

        &lt;tr&gt;
            &lt;td&gt;2&lt;/td&gt;
            &lt;td&gt;Other District &amp; Major District Road upto WBM&lt;/td&gt;
            &lt;td&gt;Roadway: 7.50 m, Carriageway: 3.75 m, BC Soil (Per Km)&lt;/td&gt;
            &lt;td&gt;1010100.00&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;2&lt;/td&gt;
            &lt;td&gt;Other District &amp; Major District Road upto WBM&lt;/td&gt;
            &lt;td&gt;Roadway: 7.50 m, Carriageway: 3.75 m, Non BC Soil (Per Km)&lt;/td&gt;
            &lt;td&gt;843700.00&lt;/td&gt;
        &lt;/tr&gt;

        &lt;tr&gt;
            &lt;td&gt;3&lt;/td&gt;
            &lt;td&gt;State Highway upto WBM&lt;/td&gt;
            &lt;td&gt;Roadway: 7.50 m, Carriageway: 3.75 m, BC Soil (Per Km)&lt;/td&gt;
            &lt;td&gt;1413000.00&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;3&lt;/td&gt;
            &lt;td&gt;State Highway upto WBM&lt;/td&gt;
            &lt;td&gt;Roadway: 7.50 m, Carriageway: 3.75 m, Non BC Soil (Per Km)&lt;/td&gt;
            &lt;td&gt;1204500.00&lt;/td&gt;
        &lt;/tr&gt;

        &lt;tr&gt;
            &lt;td&gt;4A&lt;/td&gt;
            &lt;td&gt;Road Renewals - VR&lt;/td&gt;
            &lt;td&gt;One Metal Layer WBM (7.5 cm compacted, 3.00 m wide)&lt;/td&gt;
            &lt;td&gt;976000.00&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;4B&lt;/td&gt;
            &lt;td&gt;Road Renewals - ORD/MDR&lt;/td&gt;
            &lt;td&gt;One Metal Layer WBM (7.5 cm compacted, 3.75 m wide)&lt;/td&gt;
            &lt;td&gt;1200000.00&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;4C&lt;/td&gt;
            &lt;td&gt;Road Renewals - SH&lt;/td&gt;
            &lt;td&gt;One Metal Layer WBM (7.5 cm compacted, 5.50 m wide)&lt;/td&gt;
            &lt;td&gt;1790000.00&lt;/td&gt;
        &lt;/tr&gt;

        &lt;tr&gt;
            &lt;td&gt;5&lt;/td&gt;
            &lt;td&gt;Modified Penetration Macadam (MPM)&lt;/td&gt;
            &lt;td&gt;75 mm thick, 3.75 m width, Over WBM&lt;/td&gt;
            &lt;td&gt;1418250.00&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;5&lt;/td&gt;
            &lt;td&gt;Modified Penetration Macadam (MPM)&lt;/td&gt;
            &lt;td&gt;75 mm thick, 3.75 m width, Over BT&lt;/td&gt;
            &lt;td&gt;1500938.00&lt;/td&gt;
        &lt;/tr&gt;

        &lt;tr&gt;
            &lt;td&gt;6&lt;/td&gt;
            &lt;td&gt;Built up Spray Grout (BUSG)&lt;/td&gt;
            &lt;td&gt;75 mm thick, 3.75 m width, Over WBM&lt;/td&gt;
            &lt;td&gt;1513250.00&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;6&lt;/td&gt;
            &lt;td&gt;Built up Spray Grout (BUSG)&lt;/td&gt;
            &lt;td&gt;75 mm thick, 3.75 m width, Over BT&lt;/td&gt;
            &lt;td&gt;1701000.00&lt;/td&gt;
        &lt;/tr&gt;

        &lt;tr&gt;
            &lt;td&gt;7&lt;/td&gt;
            &lt;td&gt;Modified Penetration Macadam (MPM)&lt;/td&gt;
            &lt;td&gt;50 mm thick, 3.75 m width, Over WBM&lt;/td&gt;
            &lt;td&gt;1058438.00&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;7&lt;/td&gt;
            &lt;td&gt;Modified Penetration Macadam (MPM)&lt;/td&gt;
            &lt;td&gt;50 mm thick, 3.75 m width, Over BT&lt;/td&gt;
            &lt;td&gt;1197188.00&lt;/td&gt;
        &lt;/tr&gt;

        &lt;tr&gt;
            &lt;td&gt;8&lt;/td&gt;
            &lt;td&gt;Single Coat Surface Dressing&lt;/td&gt;
            &lt;td&gt;3.75 m Carriageway, Over WBM&lt;/td&gt;
            &lt;td&gt;380250.00&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;8&lt;/td&gt;
            &lt;td&gt;Single Coat Surface Dressing&lt;/td&gt;
            &lt;td&gt;3.75 m Carriageway, Over BT&lt;/td&gt;
            &lt;td&gt;387000.00&lt;/td&gt;
        &lt;/tr&gt;
      
      &lt;tr&gt;
    &lt;td&gt;9&lt;/td&gt;
    &lt;td&gt;20 mm Premix Carpet (Open graded premix surfacing) with liquid seal coat (Hot Mix laid, 3.75 m wide)&lt;/td&gt;
    &lt;td&gt;Over WBM&lt;/td&gt;
    &lt;td&gt;1228313.00&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
    &lt;td&gt;9&lt;/td&gt;
    &lt;td&gt;20 mm Premix Carpet (Open graded premix surfacing) with liquid seal coat (Hot Mix laid, 3.75 m wide)&lt;/td&gt;
    &lt;td&gt;Over BT&lt;/td&gt;
    &lt;td&gt;1214626.00&lt;/td&gt;
&lt;/tr&gt;

&lt;tr&gt;
    &lt;td&gt;10&lt;/td&gt;
    &lt;td&gt;50 mm thick BM (3.3% Bitumen)&lt;/td&gt;
    &lt;td&gt;-&lt;/td&gt;
    &lt;td&gt;2108850.00&lt;/td&gt;
&lt;/tr&gt;

&lt;tr&gt;
    &lt;td&gt;11&lt;/td&gt;
    &lt;td&gt;75 mm thick DBM (3.3% Bitumen)&lt;/td&gt;
    &lt;td&gt;-&lt;/td&gt;
    &lt;td&gt;3104770.00&lt;/td&gt;
&lt;/tr&gt;

&lt;tr&gt;
    &lt;td&gt;12&lt;/td&gt;
    &lt;td&gt;30 mm thick Bituminous Concrete with 5.2% Bitumen (3.75 m wide)&lt;/td&gt;
    &lt;td&gt;-&lt;/td&gt;
    &lt;td&gt;1774500.00&lt;/td&gt;
&lt;/tr&gt;

&lt;tr&gt;
    &lt;td&gt;13&lt;/td&gt;
    &lt;td&gt;50 mm thick DBM (4.5% Bitumen)&lt;/td&gt;
    &lt;td&gt;-&lt;/td&gt;
    &lt;td&gt;2487600.00&lt;/td&gt;
&lt;/tr&gt;

&lt;tr&gt;
    &lt;td&gt;14&lt;/td&gt;
    &lt;td&gt;75 mm thick BM (4.5% Bitumen)&lt;/td&gt;
    &lt;td&gt;-&lt;/td&gt;
    &lt;td&gt;3672890.00&lt;/td&gt;
&lt;/tr&gt;

&lt;tr&gt;
    &lt;td&gt;15&lt;/td&gt;
    &lt;td&gt;Construction of Cement Concrete Drain (One side in M-20 grade cement concrete)&lt;/td&gt;
    &lt;td&gt;-&lt;/td&gt;
    &lt;td&gt;5358000.00&lt;/td&gt;
&lt;/tr&gt;
    &lt;/tbody&gt;
&lt;/table&gt;

&lt;h1&gt;Pipe Culverts Stage-I Rates 2022-23 (With NP3 Pipes)&lt;/h1&gt;
&lt;table border=&quot;1&quot; cellspacing=&quot;0&quot; cellpadding=&quot;6&quot;&gt;
    &lt;thead&gt;
        &lt;tr&gt;
            &lt;th&gt;Sr No&lt;/th&gt;
            &lt;th&gt;Details&lt;/th&gt;
            &lt;th&gt;Culverts 7.5 m width (Rs.)&lt;/th&gt;
            &lt;th&gt;Culverts 10.0 m width (Rs.)&lt;/th&gt;
        &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
        &lt;tr&gt;
            &lt;td&gt;1&lt;/td&gt;
            &lt;td&gt;800 mm Single row&lt;/td&gt;
            &lt;td&gt;397000&lt;/td&gt;
            &lt;td&gt;415900&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;2&lt;/td&gt;
            &lt;td&gt;800 mm Double row&lt;/td&gt;
            &lt;td&gt;510400&lt;/td&gt;
            &lt;td&gt;558200&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;3&lt;/td&gt;
            &lt;td&gt;800 mm Three row&lt;/td&gt;
            &lt;td&gt;629000&lt;/td&gt;
            &lt;td&gt;706600&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;4&lt;/td&gt;
            &lt;td&gt;900 mm Single row&lt;/td&gt;
            &lt;td&gt;424600&lt;/td&gt;
            &lt;td&gt;451300&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;5&lt;/td&gt;
            &lt;td&gt;900 mm Double row&lt;/td&gt;
            &lt;td&gt;560700&lt;/td&gt;
            &lt;td&gt;611900&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;6&lt;/td&gt;
            &lt;td&gt;900 mm Three row&lt;/td&gt;
            &lt;td&gt;693000&lt;/td&gt;
            &lt;td&gt;769800&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;7&lt;/td&gt;
            &lt;td&gt;1000 mm Single row&lt;/td&gt;
            &lt;td&gt;468500&lt;/td&gt;
            &lt;td&gt;496300&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;8&lt;/td&gt;
            &lt;td&gt;1000 mm Double row&lt;/td&gt;
            &lt;td&gt;615400&lt;/td&gt;
            &lt;td&gt;672200&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;9&lt;/td&gt;
            &lt;td&gt;1000 mm Three row&lt;/td&gt;
            &lt;td&gt;710700&lt;/td&gt;
            &lt;td&gt;847500&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;10&lt;/td&gt;
            &lt;td&gt;1200 mm Single row&lt;/td&gt;
            &lt;td&gt;564200&lt;/td&gt;
            &lt;td&gt;600600&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;11&lt;/td&gt;
            &lt;td&gt;1200 mm Double row&lt;/td&gt;
            &lt;td&gt;734600&lt;/td&gt;
            &lt;td&gt;823100&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;12&lt;/td&gt;
            &lt;td&gt;1200 mm Three row&lt;/td&gt;
            &lt;td&gt;936000&lt;/td&gt;
            &lt;td&gt;1045500&lt;/td&gt;
        &lt;/tr&gt;
    &lt;/tbody&gt;
&lt;/table&gt;

&lt;table border=&quot;1&quot; cellspacing=&quot;0&quot; cellpadding=&quot;6&quot;&gt;
    &lt;thead&gt;
        &lt;tr&gt;
            &lt;th&gt;Sr No&lt;/th&gt;
            &lt;th&gt;Item of Work&lt;/th&gt;
            &lt;th&gt;Rates Proposed 2022-23 (Rs.)&lt;/th&gt;
            &lt;th&gt;Unit&lt;/th&gt;
        &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
        &lt;tr&gt;
            &lt;td rowspan=&quot;2&quot;&gt;1&lt;/td&gt;
            &lt;td&gt;Causeway / Hard Passage (7.50 m wide) - Without vents&lt;/td&gt;
            &lt;td&gt;28700&lt;/td&gt;
            &lt;td&gt;Per Meter&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;Causeway / Hard Passage (7.50 m wide) - With Pipes&lt;/td&gt;
            &lt;td&gt;26300&lt;/td&gt;
            &lt;td&gt;Per Meter&lt;/td&gt;
        &lt;/tr&gt;
    &lt;/tbody&gt;
&lt;/table&gt;

&lt;br&gt;

&lt;h3&gt;Notes&lt;/h3&gt;
&lt;ul&gt;
    &lt;li&gt;Length of Causeway / Hard Passage should be measured as length of A.H.F.L (Afflux High Flood Level).&lt;/li&gt;
    &lt;li&gt;Add 15% for B.C soil area.&lt;/li&gt;
    &lt;li&gt;Work out proportional rate for causeway / hard passages having width more or less than 7.50 meter.&lt;/li&gt;
&lt;/ul&gt;

&lt;br&gt;

&lt;h3&gt;Minor Bridges or Slab Drains Stage-I Rates 2022-23 (7.50 m wide &amp; upto 5.00 m height)&lt;/h3&gt;

&lt;table border=&quot;1&quot; cellspacing=&quot;0&quot; cellpadding=&quot;6&quot;&gt;
    &lt;thead&gt;
        &lt;tr&gt;
            &lt;th&gt;Sr No&lt;/th&gt;
            &lt;th&gt;Details&lt;/th&gt;
            &lt;th&gt;Rate (Rs.)&lt;/th&gt;
            &lt;th&gt;Unit&lt;/th&gt;
        &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
        &lt;tr&gt;
            &lt;td&gt;(i)&lt;/td&gt;
            &lt;td&gt;With open foundation&lt;/td&gt;
            &lt;td&gt;54617&lt;/td&gt;
            &lt;td&gt;Per Meter&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;(ii)&lt;/td&gt;
            &lt;td&gt;With raft foundation&lt;/td&gt;
            &lt;td&gt;63857&lt;/td&gt;
            &lt;td&gt;Per Meter&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;(iii)&lt;/td&gt;
            &lt;td&gt;With Box cells&lt;/td&gt;
            &lt;td&gt;500125&lt;/td&gt;
            &lt;td&gt;Per Meter&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;(iv)&lt;/td&gt;
            &lt;td&gt;Non Submersible approaches&lt;/td&gt;
            &lt;td&gt;26180&lt;/td&gt;
            &lt;td&gt;Per Meter&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;(v)&lt;/td&gt;
            &lt;td&gt;Submersible approaches&lt;/td&gt;
            &lt;td&gt;45629&lt;/td&gt;
            &lt;td&gt;Per Meter&lt;/td&gt;
        &lt;/tr&gt;
    &lt;/tbody&gt;
&lt;/table&gt;

&lt;br&gt;

&lt;h3&gt;Additional Notes&lt;/h3&gt;
&lt;ul&gt;
    &lt;li&gt;Work out proportionate rates for bridges wider or lesser than 7.50 meter and above 5.00 meter height.&lt;/li&gt;
    &lt;li&gt;For major bridges and special/state art bridges, actual detailed estimate to be prepared.&lt;/li&gt;
&lt;/ul&gt;

&lt;br&gt;

&lt;h3&gt;General Notes&lt;/h3&gt;
&lt;ul&gt;
    &lt;li&gt;Ghat area / Sugarcane area – Add 15%&lt;/li&gt;
    &lt;li&gt;Tribal area – Add 10%&lt;/li&gt;
    &lt;li&gt;Approved Action Plan (Non-Tribal) – Add 10%&lt;/li&gt;
    &lt;li&gt;Gadchiroli District – Extra 20%&lt;/li&gt;
    &lt;li&gt;Corporation area – Add 5%&lt;/li&gt;
    &lt;li&gt;Average lead of 30 km is considered for road work.&lt;/li&gt;
    &lt;li&gt;Bitumen lead is considered from refinery to plant site.&lt;/li&gt;
&lt;/ul&gt;



&lt;table border=&quot;1&quot; cellspacing=&quot;0&quot; cellpadding=&quot;6&quot;&gt;
    &lt;thead&gt;
        &lt;tr&gt;
            &lt;th&gt;Sr No&lt;/th&gt;
            &lt;th&gt;Item of Work&lt;/th&gt;
            &lt;th&gt;Rates Proposed 2022-23 (Rs.)&lt;/th&gt;
            &lt;th&gt;Unit&lt;/th&gt;
        &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
        &lt;tr&gt;
            &lt;td rowspan=&quot;2&quot;&gt;1&lt;/td&gt;
            &lt;td&gt;&lt;b&gt;Causeway / Hard Passage (7.50 m wide)&lt;/b&gt; - Without vents&lt;/td&gt;
            &lt;td&gt;28700&lt;/td&gt;
            &lt;td&gt;Per Meter&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;&lt;b&gt;Causeway / Hard Passage (7.50 m wide)&lt;/b&gt; - With Pipes&lt;/td&gt;
            &lt;td&gt;26300&lt;/td&gt;
            &lt;td&gt;Per Meter&lt;/td&gt;
        &lt;/tr&gt;
    &lt;/tbody&gt;
&lt;/table&gt;

&lt;br&gt;

&lt;h3&gt;Notes&lt;/h3&gt;
&lt;ul&gt;
    &lt;li&gt;Length of Causeway / Hard Passage should be measured as length of A.H.F.L (Afflux High Flood Level).&lt;/li&gt;
    &lt;li&gt;Add 15% for B.C. soil area.&lt;/li&gt;
    &lt;li&gt;Work out proportional rate for causeway / hard passages having width more or less than 7.50 meters.&lt;/li&gt;
&lt;/ul&gt;

&lt;br&gt;

&lt;h3&gt;Minor Bridges or Slab Drains Stage-I Rates 2022-23 (7.50 m wide &amp; upto 5.00 m height)&lt;/h3&gt;

&lt;table border=&quot;1&quot; cellspacing=&quot;0&quot; cellpadding=&quot;6&quot;&gt;
    &lt;thead&gt;
        &lt;tr&gt;
            &lt;th&gt;Sr No&lt;/th&gt;
            &lt;th&gt;Details&lt;/th&gt;
            &lt;th&gt;Rate (Rs.)&lt;/th&gt;
            &lt;th&gt;Unit&lt;/th&gt;
        &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
        &lt;tr&gt;
            &lt;td&gt;(i)&lt;/td&gt;
            &lt;td&gt;With open foundation&lt;/td&gt;
            &lt;td&gt;54617.00&lt;/td&gt;
            &lt;td&gt;Per Meter&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;(ii)&lt;/td&gt;
            &lt;td&gt;With raft foundation&lt;/td&gt;
            &lt;td&gt;63857.00&lt;/td&gt;
            &lt;td&gt;Per Meter&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;(iii)&lt;/td&gt;
            &lt;td&gt;With Box cells&lt;/td&gt;
            &lt;td&gt;500125.00&lt;/td&gt;
            &lt;td&gt;Per Meter&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;(iv)&lt;/td&gt;
            &lt;td&gt;Non-Submersible approaches&lt;/td&gt;
            &lt;td&gt;26180.00&lt;/td&gt;
            &lt;td&gt;Per Meter&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;(v)&lt;/td&gt;
            &lt;td&gt;Submersible approaches&lt;/td&gt;
            &lt;td&gt;45629.00&lt;/td&gt;
            &lt;td&gt;Per Meter&lt;/td&gt;
        &lt;/tr&gt;
    &lt;/tbody&gt;
&lt;/table&gt;

&lt;br&gt;

&lt;h3&gt;Additional Notes&lt;/h3&gt;
&lt;ul&gt;
    &lt;li&gt;Work out proportionate rates for bridges wider or lesser in width than 7.50 meter and above 5.00 meter height.&lt;/li&gt;
    &lt;li&gt;For major bridges and special / State-of-Art bridges, actual detailed estimate should be prepared.&lt;/li&gt;
&lt;/ul&gt;


&lt;h1&gt;Buildings – Rates Proposed (Stage-I, 2022-23)&lt;/h1&gt;

&lt;table border=&quot;1&quot; cellspacing=&quot;0&quot; cellpadding=&quot;6&quot;&gt;
    &lt;thead&gt;
        &lt;tr&gt;
            &lt;th&gt;Sr No&lt;/th&gt;
            &lt;th&gt;Item of Work&lt;/th&gt;
            &lt;th&gt;Rate Proposed 2022-23 (Rs.)&lt;/th&gt;
            &lt;th&gt;Unit&lt;/th&gt;
        &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;

        &lt;tr&gt;
            &lt;td rowspan=&quot;2&quot;&gt;1&lt;/td&gt;
            &lt;td&gt;I.T.I Buildings, Administrative Buildings and other similar structures – Ground Floor&lt;/td&gt;
            &lt;td&gt;30000.00&lt;/td&gt;
            &lt;td&gt;Per Sqm&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;I.T.I Buildings, Administrative Buildings and other similar structures – First Floor&lt;/td&gt;
            &lt;td&gt;24450.00&lt;/td&gt;
            &lt;td&gt;Per Sqm&lt;/td&gt;
        &lt;/tr&gt;

        &lt;tr&gt;
            &lt;td rowspan=&quot;2&quot;&gt;2&lt;/td&gt;
            &lt;td&gt;Hostel, Courts, Urban Hospital and other similar Buildings – Ground Floor&lt;/td&gt;
            &lt;td&gt;30100.00&lt;/td&gt;
            &lt;td&gt;Per Sqm&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;Hostel, Courts, Urban Hospital and other similar Buildings – First Floor&lt;/td&gt;
            &lt;td&gt;25250.00&lt;/td&gt;
            &lt;td&gt;Per Sqm&lt;/td&gt;
        &lt;/tr&gt;

        &lt;tr&gt;
            &lt;td&gt;3&lt;/td&gt;
            &lt;td&gt;Rural Hospital and other similar Buildings – Ground Floor&lt;/td&gt;
            &lt;td&gt;24700.00&lt;/td&gt;
            &lt;td&gt;Per Sqm&lt;/td&gt;
        &lt;/tr&gt;

        &lt;tr&gt;
            &lt;td rowspan=&quot;2&quot;&gt;4&lt;/td&gt;
            &lt;td&gt;Residential Quarters (Type III, IV &amp; V) – Ground Floor&lt;/td&gt;
            &lt;td&gt;25000.00&lt;/td&gt;
            &lt;td&gt;Per Sqm&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;Residential Quarters (Type III, IV &amp; V) – First Floor&lt;/td&gt;
            &lt;td&gt;21200.00&lt;/td&gt;
            &lt;td&gt;Per Sqm&lt;/td&gt;
        &lt;/tr&gt;

        &lt;tr&gt;
            &lt;td rowspan=&quot;2&quot;&gt;5&lt;/td&gt;
            &lt;td&gt;Residential Quarters (Type II, IV &amp; V) – Ground Floor&lt;/td&gt;
            &lt;td&gt;28800.00&lt;/td&gt;
            &lt;td&gt;Per Sqm&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;Residential Quarters (Type II, IV &amp; V) – First Floor&lt;/td&gt;
            &lt;td&gt;23450.00&lt;/td&gt;
            &lt;td&gt;Per Sqm&lt;/td&gt;
        &lt;/tr&gt;

        &lt;tr&gt;
            &lt;td rowspan=&quot;2&quot;&gt;6&lt;/td&gt;
            &lt;td&gt;Bungalows of Hon’ble Judges and other similar Buildings – Ground Floor&lt;/td&gt;
            &lt;td&gt;29000.00&lt;/td&gt;
            &lt;td&gt;Per Sqm&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;Bungalows of Hon’ble Judges and other similar Buildings – First Floor&lt;/td&gt;
            &lt;td&gt;24000.00&lt;/td&gt;
            &lt;td&gt;Per Sqm&lt;/td&gt;
        &lt;/tr&gt;

    &lt;/tbody&gt;
&lt;/table&gt;


&lt;h3&gt;Notes&lt;/h3&gt;

&lt;ol&gt;
    &lt;li&gt;
        The above rates shall be increased by 1% for every floor above first floor.
    &lt;/li&gt;

    &lt;li&gt;
        The above rates are for preparing Stage-I estimates for Buildings and these rates shall not be used for any type of valuation purpose.
    &lt;/li&gt;

    &lt;li&gt;
        The above rates are basic rates and these shall be increased by percentage specified in the State Schedule of Rates for tribal area, inaccessible area, Municipal Council and Corporation area, Factories, Prison and Naxalite area for Gadchiroli District.
    &lt;/li&gt;

    &lt;li&gt;
        The provision like contingencies, Electrification other than Internal &amp; External, External Water supply and sanitary, Garden and Landscaping, Green Building and other provisions appropriate percentage shall be separately added.
    &lt;/li&gt;

    &lt;li&gt;
        The above rates are for R.C.C. framed structure and the rates shall be increased or decreased suitably depending on actual site conditions where raft foundation or load bearing structure is provided, and reasons for same shall be furnished.
    &lt;/li&gt;
&lt;/ol&gt;






&lt;div class=&quot;blogger-post-footer&quot;&gt;https://yogipwd.blogspot.com/&lt;/div&gt;</description><link>https://www.yogipwd.com/2026/02/block-estimate-rates.html</link><author>noreply@blogger.com (Yogendra)</author><thr:total>0</thr:total></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-1074964965522467583.post-2739210140402010442</guid><pubDate>Sun, 15 Feb 2026 09:10:00 +0000</pubDate><atom:updated>2026-04-07T00:20:21.389+05:30</atom:updated><title>Carriageway Width Calculator</title><description>&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;IRC Lane Requirement Calculator - Improved&lt;/title&gt;

    &lt;!-- MathJax --&gt;
    &lt;script type=&quot;text/x-mathjax-config&quot;&gt;
      MathJax.Hub.Config({
        tex2jax: {
          inlineMath: [[&#39;$&#39;,&#39;$&#39;], [&#39;\\(&#39;,&#39;\\)&#39;]],
          displayMath: [[&#39;$$&#39;,&#39;$$&#39;], [&#39;\\[&#39;,&#39;\\]&#39;]],
          processEscapes: true
        },
        &quot;HTML-CSS&quot;: { linebreaks: { automatic: true } }
      });
    &lt;/script&gt;
    &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.9/MathJax.js?config=TeX-AMS-MML_HTMLorMML&quot;&gt;&lt;/script&gt;

    &lt;!-- jsPDF &amp; html2canvas --&gt;
    &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js&quot;&gt;&lt;/script&gt;

    &lt;style&gt;
        :root { --primary: #004aad; --bg: #f1f5f9; }
        body { font-family: &#39;Segoe UI&#39;, Arial, sans-serif; background: var(--bg); padding: 20px; color: #1e293b; margin: 0; }
        .container { max-width: 960px; margin: auto; background: white; padding: 35px; border-radius: 12px; box-shadow: 0 10px 25px rgba(0,0,0,0.1); }
        h2 { color: var(--primary); border-bottom: 2px solid #e2e8f0; padding-bottom: 10px; margin-top: 0; }
        .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin: 25px 0; }
        .input-group { display: flex; flex-direction: column; }
        label { font-size: 0.85rem; font-weight: 700; margin-bottom: 6px; color: #475569; }
        input, select { padding: 12px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 1rem; transition: 0.2s; }
        input:focus, select:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 3px rgba(0,74,173,0.1); }
        button { padding: 16px; background: var(--primary); color: white; border: none; border-radius: 8px; font-size: 1.1rem; font-weight: 600; cursor: pointer; transition: 0.3s; margin: 10px 10px 10px 0; }
        button:hover { background: #003a8c; transform: translateY(-1px); }
        #exportBtn { background: #059669; }
        #exportBtn:hover { background: #047857; }
        .report-area { margin-top: 35px; padding: 30px; border: 1px solid #e2e8f0; border-radius: 12px; background: #ffffff; display: none; }
        .formula-box { background: #f8fafc; padding: 20px; border-left: 6px solid var(--primary); margin: 20px 0; border-radius: 8px; font-size: 1.1rem; border: 1px solid #e2e8f0; }
        .road-viz { height: 80px; background: #334155; margin: 30px 0; border-radius: 10px; position: relative; display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; border: 4px solid #1e293b; font-size: 1.3rem; }
        .lane-markings { position: absolute; width: 100%; height: 2px; border-top: 2px dashed rgba(255,255,255,0.4); top: 50%; }
        .highlight { color: #059669; font-weight: 800; font-size: 1.2rem; }
        .note { font-size: 0.9rem; color: #64748b; background: #f0f9ff; padding: 12px; border-radius: 6px; margin-top: 20px; }
        .actions { margin-bottom: 20px; }
        .report-title { font-size: 1.6rem; color: var(--primary); margin-bottom: 20px; text-align: center; font-weight: 600; }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class=&quot;container&quot;&gt;
    &lt;h2&gt;IRC Lane Requirement Calculator&lt;/h2&gt;
    &lt;p style=&quot;color:#64748b;&quot;&gt;Based on IRC:64-1990, Indo-HCM principles &amp; field studies (mixed traffic, rural/inter-urban highways).&lt;/p&gt;

    &lt;div class=&quot;grid&quot;&gt;
        &lt;div class=&quot;input-group&quot;&gt;&lt;label&gt;Name of the Road / Section&lt;/label&gt;&lt;input type=&quot;text&quot; id=&quot;roadName&quot; placeholder=&quot;e.g. NH-48 Pune–Nashik&quot;&gt;&lt;/div&gt;
        &lt;div class=&quot;input-group&quot;&gt;&lt;label&gt;Current AADT (P) [veh/day]&lt;/label&gt;&lt;input type=&quot;number&quot; id=&quot;P&quot; value=&quot;6500&quot; min=&quot;100&quot;&gt;&lt;/div&gt;
        &lt;div class=&quot;input-group&quot;&gt;&lt;label&gt;Growth Rate (r) [%]&lt;/label&gt;&lt;input type=&quot;number&quot; id=&quot;r&quot; value=&quot;7.5&quot; step=&quot;0.1&quot; min=&quot;0&quot;&gt;&lt;/div&gt;
        &lt;div class=&quot;input-group&quot;&gt;&lt;label&gt;Design Life (n) [years]&lt;/label&gt;&lt;input type=&quot;number&quot; id=&quot;n&quot; value=&quot;15&quot; min=&quot;5&quot;&gt;&lt;/div&gt;
        &lt;div class=&quot;input-group&quot;&gt;&lt;label&gt;K-Factor (Peak Hour %)&lt;/label&gt;&lt;input type=&quot;number&quot; id=&quot;K&quot; value=&quot;0.09&quot; step=&quot;0.01&quot; min=&quot;0.05&quot; max=&quot;0.15&quot;&gt;&lt;/div&gt;
        &lt;div class=&quot;input-group&quot;&gt;&lt;label&gt;D-Factor (Directional Split)&lt;/label&gt;&lt;input type=&quot;number&quot; id=&quot;D&quot; value=&quot;0.60&quot; step=&quot;0.05&quot; min=&quot;0.5&quot; max=&quot;0.75&quot;&gt;&lt;/div&gt;
        &lt;div class=&quot;input-group&quot;&gt;
            &lt;label&gt;Terrain &amp; Base Capacity per Lane as per IRC:64-1990 Table 2&lt;/label&gt;
            &lt;select id=&quot;terrain&quot;&gt;
                &lt;option value=&quot;2000&quot;&gt;Plain - Curvature (Degrres/KM) Low (0 - 50)&lt;/option&gt;
              	&lt;option value=&quot;1900&quot;&gt;Plain - Curvature (Degrres/KM) High (&gt;51)&lt;/option&gt;
                &lt;option value=&quot;1800&quot;&gt;Rolling - Curvature (Degrres/KM) Low (0 - 100)&lt;/option&gt;
              	&lt;option value=&quot;1700&quot;&gt;Rolling - Curvature (Degrres/KM) high (&gt;101)&lt;/option&gt;
              	&lt;option value=&quot;1600&quot;&gt;Hilly - Curvature (Degrres/KM) Low (0 - 200)&lt;/option&gt;
              	&lt;option value=&quot;1400&quot;&gt;Hilly - Curvature (Degrres/KM) high (&gt;201)&lt;/option&gt;
            &lt;/select&gt;
        &lt;/div&gt;
        &lt;div class=&quot;input-group&quot;&gt;
            &lt;label&gt;V/C Ratio (Target LOS)&lt;/label&gt;
            &lt;select id=&quot;vc&quot;&gt;
                &lt;option value=&quot;0.5&quot;&gt;LOS B (High Comfort - 0.5)&lt;/option&gt;
                &lt;option value=&quot;0.7&quot; selected&gt;LOS C (Standard - 1.4 x 0.5)&lt;/option&gt;
                &lt;option value=&quot;0.9&quot;&gt;LOS D (Congested - 0.9, 8-10% of AADT)&lt;/option&gt;
            &lt;/select&gt;
        &lt;/div&gt;
    &lt;/div&gt;

    &lt;button onclick=&quot;generateReport()&quot;&gt;Analyze Design Requirements&lt;/button&gt;

    &lt;div id=&quot;reportArea&quot; class=&quot;report-area&quot;&gt;
        &lt;div class=&quot;actions&quot;&gt;
            &lt;button id=&quot;exportBtn&quot; onclick=&quot;exportToPDF()&quot; style=&quot;display:none;&quot;&gt;Export Report as PDF&lt;/button&gt;
        &lt;/div&gt;
        &lt;div id=&quot;mathContent&quot;&gt;&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
  
  &lt;div class=&quot;container&quot; style=&quot;max-width:1000px; margin:auto; line-height:1.6; font-family:Arial, sans-serif;&quot;&gt;

&lt;h1 style=&quot;text-align:center; color:#1e3a8a;&quot;&gt;
IRC Lane Requirement Calculator – Technical Explanation
&lt;/h1&gt;

&lt;p style=&quot;text-align:center; color:#555;&quot;&gt;
Based on IRC:64-1990, Indo-HCM &amp; Mixed Traffic Flow Principles
&lt;/p&gt;

&lt;hr&gt;

&lt;h2&gt;1. Introduction&lt;/h2&gt;
&lt;p&gt;
This tool is a professional highway design utility developed to estimate the 
&lt;b&gt;required number of traffic lanes&lt;/b&gt; for a road corridor based on projected traffic demand.
&lt;/p&gt;

&lt;p&gt;
It integrates principles from:
&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;b&gt;IRC:64-1990&lt;/b&gt; – Capacity of Roads in Rural Areas&lt;/li&gt;
&lt;li&gt;&lt;b&gt;Indo-HCM&lt;/b&gt; – Mixed traffic capacity analysis&lt;/li&gt;
&lt;li&gt;&lt;b&gt;Traffic engineering fundamentals&lt;/b&gt;&lt;/li&gt;
&lt;/ul&gt;

---

&lt;h2&gt;2. Objective of the Tool&lt;/h2&gt;

&lt;p&gt;
To determine the &lt;b&gt;optimum number of lanes&lt;/b&gt; required to safely and efficiently carry future traffic,
while maintaining a desired &lt;b&gt;Level of Service (LOS)&lt;/b&gt;.
&lt;/p&gt;

---

&lt;h2&gt;3. Input Parameters Explained&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;&lt;b&gt;AADT (P):&lt;/b&gt; Average Annual Daily Traffic (vehicles/day)&lt;/li&gt;
&lt;li&gt;&lt;b&gt;Growth Rate (r):&lt;/b&gt; Expected annual traffic growth (%)&lt;/li&gt;
&lt;li&gt;&lt;b&gt;Design Life (n):&lt;/b&gt; Design period (years)&lt;/li&gt;
&lt;li&gt;&lt;b&gt;K-Factor:&lt;/b&gt; Ratio of peak hour traffic to AADT&lt;/li&gt;
&lt;li&gt;&lt;b&gt;D-Factor:&lt;/b&gt; Directional distribution of traffic&lt;/li&gt;
&lt;li&gt;&lt;b&gt;Terrain:&lt;/b&gt; Influences base capacity per lane&lt;/li&gt;
&lt;li&gt;&lt;b&gt;V/C Ratio:&lt;/b&gt; Desired congestion level (LOS)&lt;/li&gt;
&lt;/ul&gt;

---

&lt;h2&gt;4. Step-by-Step Design Methodology&lt;/h2&gt;

&lt;h3&gt;Step 1: Traffic Projection&lt;/h3&gt;

&lt;p&gt;
Future traffic is estimated using compound growth:
&lt;/p&gt;

&lt;p style=&quot;background:#f4f6f7; padding:10px; border-left:4px solid #2563eb;&quot;&gt;
A = P × (1 + r)&lt;sup&gt;n&lt;/sup&gt;
&lt;/p&gt;

&lt;p&gt;
This represents the &lt;b&gt;design traffic at the end of design life&lt;/b&gt;.
&lt;/p&gt;

---

&lt;h3&gt;Step 2: Conversion to PCU&lt;/h3&gt;

&lt;p&gt;
Due to heterogeneous traffic conditions in India, traffic is converted into 
&lt;b&gt;Passenger Car Units (PCU)&lt;/b&gt;.
&lt;/p&gt;

&lt;p style=&quot;background:#f4f6f7; padding:10px; border-left:4px solid #16a34a;&quot;&gt;
A&lt;sub&gt;pcu&lt;/sub&gt; = A × PCU Factor
&lt;/p&gt;

&lt;p&gt;
A typical composite value of &lt;b&gt;2.5&lt;/b&gt; is used for mixed traffic.
&lt;/p&gt;

---

&lt;h3&gt;Step 3: Design Hourly Volume (DHV)&lt;/h3&gt;

&lt;p&gt;
Traffic design is based on peak hour conditions:
&lt;/p&gt;

&lt;p style=&quot;background:#f4f6f7; padding:10px; border-left:4px solid #f59e0b;&quot;&gt;
DHV = A&lt;sub&gt;pcu&lt;/sub&gt; × K × D
&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;K = Peak hour proportion&lt;/li&gt;
&lt;li&gt;D = Directional split&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;
This gives &lt;b&gt;one-direction peak flow (PCU/hr)&lt;/b&gt;.
&lt;/p&gt;

---

&lt;h3&gt;Step 4: Lane Requirement Calculation&lt;/h3&gt;

&lt;p&gt;
The number of lanes is calculated based on capacity:
&lt;/p&gt;

&lt;p style=&quot;background:#f4f6f7; padding:10px; border-left:4px solid #dc2626;&quot;&gt;
N = DHV / (Base Capacity × V/C)
&lt;/p&gt;

&lt;p&gt;
Where:
&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;b&gt;Base Capacity:&lt;/b&gt; Depends on terrain and curvature&lt;/li&gt;
&lt;li&gt;&lt;b&gt;V/C Ratio:&lt;/b&gt; Desired service level&lt;/li&gt;
&lt;/ul&gt;

---

&lt;h2&gt;5. Level of Service (LOS)&lt;/h2&gt;

&lt;p&gt;
The &lt;b&gt;V/C ratio&lt;/b&gt; defines traffic conditions:
&lt;/p&gt;

&lt;table border=&quot;1&quot; cellpadding=&quot;6&quot; style=&quot;border-collapse:collapse; width:100%;&quot;&gt;
&lt;tr&gt;&lt;th&gt;LOS&lt;/th&gt;&lt;th&gt;V/C Ratio&lt;/th&gt;&lt;th&gt;Condition&lt;/th&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;B&lt;/td&gt;&lt;td&gt;0.5&lt;/td&gt;&lt;td&gt;Free flow (high comfort)&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;C&lt;/td&gt;&lt;td&gt;0.7&lt;/td&gt;&lt;td&gt;Stable flow (design standard)&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;D&lt;/td&gt;&lt;td&gt;0.9&lt;/td&gt;&lt;td&gt;Near capacity (congested)&lt;/td&gt;&lt;/tr&gt;
&lt;/table&gt;

---

&lt;h2&gt;6. Terrain-Based Capacity&lt;/h2&gt;

&lt;p&gt;
Base capacity varies with terrain due to speed, curvature, and gradient effects:
&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;b&gt;Plain Terrain:&lt;/b&gt; Highest capacity (~2000 PCU/hr/lane)&lt;/li&gt;
&lt;li&gt;&lt;b&gt;Rolling Terrain:&lt;/b&gt; Moderate capacity&lt;/li&gt;
&lt;li&gt;&lt;b&gt;Hilly Terrain:&lt;/b&gt; Reduced capacity due to constraints&lt;/li&gt;
&lt;/ul&gt;

---

&lt;h2&gt;7. Output Interpretation&lt;/h2&gt;

&lt;p&gt;
The tool provides:
&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Future Traffic (veh/day &amp; PCU/day)&lt;/li&gt;
&lt;li&gt;Design Hourly Volume (PCU/hr)&lt;/li&gt;
&lt;li&gt;Calculated Lane Requirement&lt;/li&gt;
&lt;li&gt;Adopted Number of Lanes&lt;/li&gt;
&lt;li&gt;Equivalent Carriageway Width&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;
Final lane adoption ensures:
&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Minimum of 1 lane&lt;/li&gt;
&lt;li&gt;Practical rounding (typically even lanes for divided highways)&lt;/li&gt;
&lt;/ul&gt;

---

&lt;h2&gt;8. Engineering Assumptions&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Mixed traffic conditions (Indian scenario)&lt;/li&gt;
&lt;li&gt;No major bottlenecks or intersections&lt;/li&gt;
&lt;li&gt;Adequate shoulder and drainage provisions&lt;/li&gt;
&lt;li&gt;Uniform traffic distribution&lt;/li&gt;
&lt;/ul&gt;

---

&lt;h2&gt;9. Applications&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;National &amp; State Highway Design&lt;/li&gt;
&lt;li&gt;Feasibility Studies (DPR)&lt;/li&gt;
&lt;li&gt;Traffic Impact Assessment&lt;/li&gt;
&lt;li&gt;Road Widening Projects&lt;/li&gt;
&lt;li&gt;PPP / EPC Project Planning&lt;/li&gt;
&lt;/ul&gt;

---

&lt;h2&gt;10. Limitations&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Uses generalized PCU factor (not composition-based)&lt;/li&gt;
&lt;li&gt;Does not consider signalized intersections&lt;/li&gt;
&lt;li&gt;Assumes uninterrupted flow&lt;/li&gt;
&lt;li&gt;Requires engineering judgment for final adoption&lt;/li&gt;
&lt;/ul&gt;

&lt;/div&gt;

&lt;script&gt;
function generateReport() {
    // ── Inputs ────────────────────────────────────────────────
    const roadName = document.getElementById(&#39;roadName&#39;).value.trim() || &quot;Unnamed Road / Section&quot;;
    const P = parseFloat(document.getElementById(&#39;P&#39;).value) || 0;
    const r = (parseFloat(document.getElementById(&#39;r&#39;).value) || 0) / 100;
    const n = parseFloat(document.getElementById(&#39;n&#39;).value) || 15;
    const K = parseFloat(document.getElementById(&#39;K&#39;).value) || 0.09;
    const D = parseFloat(document.getElementById(&#39;D&#39;).value) || 0.60;
    const vc = parseFloat(document.getElementById(&#39;vc&#39;).value) || 0.7;
    const base_cap = parseFloat(document.getElementById(&#39;terrain&#39;).value) || 2000;

    if (P &lt; 100 || n &lt; 5 || K &lt;= 0 || D &lt; 0.5 || D &gt; 0.75 || vc &lt;= 0) {
        alert(&quot;Please check inputs:\n• AADT ≥ 100\n• Design life ≥ 5 years\n• Valid K, D, V/C ranges&quot;);
        return;
    }

    // ── Calculations ──────────────────────────────────────────
    const A_future = P * Math.pow(1 + r, n);
    const pcuf = 2.5;
    const A_pcu = A_future * pcuf;
    const DHV = A_pcu * K * D;
    const service_cap = base_cap * vc;
    const N_req = DHV / service_cap;
    const N_adopt = Math.max(1, N_req);

    // ── Formatting ────────────────────────────────────────────
    const fmt = (num, dec = 0) =&gt; num.toLocaleString(&#39;en-IN&#39;, {minimumFractionDigits: dec, maximumFractionDigits: dec});

    // ── Build Report ──────────────────────────────────────────
    document.getElementById(&#39;reportArea&#39;).style.display = &#39;block&#39;;
    document.getElementById(&#39;exportBtn&#39;).style.display = &#39;inline-block&#39;;

    document.getElementById(&#39;mathContent&#39;).innerHTML = `
        &lt;div class=&quot;report-title&quot;&gt;Lane Requirement Report for &lt;br&gt;&lt;small&gt;${roadName}&lt;/small&gt;&lt;/div&gt;

        &lt;p&gt;&lt;strong&gt;Step 1: Future Traffic Growth&lt;/strong&gt;&lt;/p&gt;
        &lt;div class=&quot;formula-box&quot;&gt;
            $$ A = P \\times (1 + r)^n $$
            $$ A = ${fmt(P)} \\times (1 + ${r.toFixed(3)})^{${n}} = \\textbf{${fmt(A_future, 0)}} \\text{ veh/day} $$
        &lt;/div&gt;

        &lt;p&gt;&lt;strong&gt;Step 2: Conversion to PCU (mixed traffic)&lt;/strong&gt;&lt;/p&gt;
        &lt;div class=&quot;formula-box&quot;&gt;
            $$ A_{\\text{pcu}} = A \\times \\text{PCU factor} $$
            $$ A_{\\text{pcu}} = ${fmt(A_future, 0)} \\times ${pcuf} = \\textbf{${fmt(A_pcu, 0)}} \\text{ PCU/day} $$
        &lt;/div&gt;

        &lt;p&gt;&lt;strong&gt;Step 3: Directional Design Hourly Volume (DHV)&lt;/strong&gt;&lt;/p&gt;
        &lt;div class=&quot;formula-box&quot;&gt;
            $$ \\text{DHV} = A_{\\text{pcu}} \\times K \\times D $$
            $$ \\text{DHV} = ${fmt(A_pcu, 0)} \\times ${K.toFixed(2)} \\times ${D.toFixed(2)} = \\textbf{${fmt(DHV, 0)}} \\text{ PCU/hr (one direction)} $$
        &lt;/div&gt;

        &lt;p&gt;&lt;strong&gt;Step 4: Required Number of Lanes&lt;/strong&gt;&lt;/p&gt;
        &lt;div class=&quot;formula-box&quot;&gt;
            $$ N = \\frac{\\text{DHV}}{\\text{Base capacity per lane} \\times (V/C)} $$
            $$ N = \\frac{${fmt(DHV, 0)}}{${base_cap} \\times ${vc}} = \\textbf{${N_req.toFixed(2)}} \\text{ lanes (calculated)}$$
            &lt;p style=&quot;margin-top:12px;&quot;&gt;Adopted (min. 1 lanes): &lt;span class=&quot;highlight&quot;&gt;${N_adopt}&lt;/span&gt; lanes&lt;/p&gt;
        &lt;/div&gt;

        &lt;div class=&quot;road-viz&quot;&gt;
            &lt;div class=&quot;lane-markings&quot;&gt;&lt;/div&gt;
            ADOPTED: ${N_adopt} LANE${N_adopt &gt; 1 ? &#39;S&#39; : &#39;&#39;} (${(N_adopt * 3.5).toFixed(1)} m carriageway)
        &lt;/div&gt;

        &lt;div class=&quot;note&quot;&gt;
            &lt;strong&gt;Basis &amp; Notes:&lt;/strong&gt; Base capacity per lane ≈ ${base_cap} PCU/hr/dir (approx. value from field studies/Indo-HCM for mixed traffic; IRC:64-1990 gives tentative daily service volumes, e.g., 35,000–40,000 PCU/day for 4-lane plain). PCU factor 2.5 is typical composite — adjust if detailed composition available. Assumes divided carriageway, good shoulders, no major side friction.
        &lt;/div&gt;
    `;

    // Re-render MathJax
    if (typeof MathJax !== &#39;undefined&#39; &amp;&amp; MathJax.Hub) {
        MathJax.Hub.Queue([&quot;Typeset&quot;, MathJax.Hub, &quot;mathContent&quot;]);
    }
}

async function exportToPDF() {
    const { jsPDF } = window.jspdf;
    const reportElement = document.getElementById(&#39;mathContent&#39;);
    if (!reportElement || reportElement.innerHTML.trim() === &#39;&#39;) {
        alert(&quot;Please generate the report first!&quot;);
        return;
    }

    const exportBtn = document.getElementById(&#39;exportBtn&#39;);
    exportBtn.textContent = &quot;Generating PDF...&quot;;
    exportBtn.disabled = true;

    try {
        const canvas = await html2canvas(reportElement, {
            scale: 2,
            useCORS: true,
            logging: false,
            allowTaint: true,
            letterRendering: true,
            backgroundColor: &#39;#ffffff&#39;
        });

        const imgData = canvas.toDataURL(&#39;image/png&#39;);
        const pdf = new jsPDF({ orientation: &#39;portrait&#39;, unit: &#39;mm&#39;, format: &#39;a4&#39; });

        const pageWidth = pdf.internal.pageSize.getWidth();
        const pageHeight = pdf.internal.pageSize.getHeight();
        const margin = 10;
        const imgWidth = pageWidth - 2 * margin;
        const imgHeight = (canvas.height * imgWidth) / canvas.width;

        let heightLeft = imgHeight;
        let position = margin;

        pdf.addImage(imgData, &#39;PNG&#39;, margin, position, imgWidth, imgHeight);
        heightLeft -= pageHeight - 2 * margin;

        while (heightLeft &gt;= 0) {
            pdf.addPage();
            position = margin - (imgHeight - heightLeft);
            pdf.addImage(imgData, &#39;PNG&#39;, margin, position, imgWidth, imgHeight);
            heightLeft -= pageHeight - 2 * margin;
        }

        const safeName = document.getElementById(&#39;roadName&#39;).value.trim().replace(/[^a-zA-Z0-9-]/g, &#39;_&#39;) || &#39;Report&#39;;
        pdf.save(`IRC_Lane_Requirement_${safeName}_${new Date().toISOString().slice(0,10)}.pdf`);

    } catch (error) {
        console.error(&quot;PDF generation failed:&quot;, error);
        alert(&quot;PDF export failed. Check console or try again.&quot;);
    } finally {
        exportBtn.textContent = &quot;Export Report as PDF&quot;;
        exportBtn.disabled = false;
    }
}
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;&lt;div class=&quot;blogger-post-footer&quot;&gt;https://yogipwd.blogspot.com/&lt;/div&gt;</description><link>https://www.yogipwd.com/2026/02/carriageway-width-calculator.html</link><author>noreply@blogger.com (Yogendra)</author><thr:total>0</thr:total></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-1074964965522467583.post-2184669022205603892</guid><pubDate>Tue, 03 Feb 2026 02:34:06 +0000</pubDate><atom:updated>2026-03-05T13:16:51.800+05:30</atom:updated><category domain="http://www.blogger.com/atom/ns#">PWD Working</category><category domain="http://www.blogger.com/atom/ns#">Tender</category><title>EPC Project Plan and Profile Approving Procedure</title><description>&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;Government Procedure for Approval of Plan &amp; Profile (P&amp;P) in EPC Road Projects&lt;/title&gt;
    
    &lt;script src=&quot;https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js&quot;&gt;&lt;/script&gt;
    &lt;script&gt;
        mermaid.initialize({
            startOnLoad: true,
            theme: &#39;base&#39;
        });
    &lt;/script&gt;

    &lt;style&gt;
        body {
            background-color: #f5f5f5;
            margin: 0;
            padding: 20px;
            font-family: &quot;Times New Roman&quot;, Times, serif;
            color: #000;
            line-height: 1.5;
        }

        .container {
            max-width: 900px;
            margin: 0 auto 60px auto;
            background: white;
            padding: 30px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        h1, h2 {
            color: #111;
        }

        .note {
            background-color: #fff9e6;
            border-left: 5px solid #ffb300;
            padding: 16px 20px;
            margin: 20px 0;
            font-style: italic;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
        }

        th, td {
            border: 1px solid #ccc;
            padding: 10px;
            text-align: left;
        }

        th {
            background: #f0f0f0;
            font-weight: bold;
        }

        hr {
            border: 0;
            border-top: 1px solid #aaa;
            margin: 30px 0;
        }

        /* === LETTER STYLING === */
        .page {
            background: white;
            max-width: 210mm;
            width: 100%;
            min-height: 297mm;
            margin: 20px auto 60px auto;
            padding: 5mm 5mm;           /* reduced side padding for better screen fit */
            box-sizing: border-box;
            box-shadow: 0 4px 16px rgba(0,0,0,0.12);
        }

        .header {
            text-align: center;
            border-bottom: 2px solid #000;
            padding-bottom: 15px;
            margin-bottom: 25px;
        }

        .header h2 {
            margin: 0;
            font-size: 22px;
            text-transform: uppercase;
        }

        .header p {
            margin: 4px 0;
            font-size: 14px;
            font-weight: bold;
        }

        .refblock {
            margin: 25px 0;
            display: flex;
            justify-content: space-between;
            font-size: 14px;
            font-weight: 600;
        }

        .to-block {
            margin: 30px 0;
            line-height: 1.6;
            font-size: 15px;
        }

        .subject {
            margin: 35px 0 25px 0;
            font-weight: bold;
            text-decoration: underline;
            font-size: 16px;
        }

        .content {
            font-size: 15px;
            text-align: justify;
        }

        .content p {
            margin-bottom: 18px;
        }

        .footer {
            margin-top: 50px;
            font-size: 13px;
            clear: both;
        }

        .signature {
            margin-top: 60px;
            float: right;
            width: 280px;
            text-align: left;
        }

        .signature p {
            margin: 6px 0;
            font-size: 15px;
        }

        /* Responsive adjustment for small screens */
        @media screen and (max-width: 1000px) {
            .page {
                padding: 18mm 12mm;
                margin: 10px auto;
            }
        }

        /* PRINT – exact A4 behavior */
        @media print {
            body {
                background: white;
                margin: 0;
                padding: 0;
            }
            .container, hr {
                display: none !important;
            }
            .page {
                width: 210mm !important;
                height: 297mm !important;
                min-height: unset !important;
                margin: 0 !important;
                padding: 20mm 18mm !important;   /* classic office margins for print */
                box-shadow: none !important;
            }
            @page {
                size: A4;
                margin: 0;
            }
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;

    &lt;!-- Explanatory Part --&gt;
    &lt;div class=&quot;container&quot;&gt;
        &lt;h1&gt;Governmental Procedure for Approval of Plan &amp; Profile (P&amp;P)&lt;br&gt;in EPC Road / Highway Projects (India)&lt;/h1&gt;
        &lt;p&gt;This document explains the standard governmental procedure followed in India for approval of &lt;strong&gt;Plan &amp; Profile (P&amp;P) drawings&lt;/strong&gt; under Engineering, Procurement and Construction (EPC) mode road projects as per MoRTH, NHAI and State PWD practices.&lt;/p&gt;

        &lt;hr&gt;

        &lt;h2&gt;1. Governing Standards &amp; References&lt;/h2&gt;
        &lt;ul&gt;
            &lt;li&gt;MoRTH Specifications for Road &amp; Bridge Works&lt;/li&gt;
            &lt;li&gt;IRC:73 – Geometric Design Standards for Highways&lt;/li&gt;
            &lt;li&gt;IRC:SP:23 – Manual of Specifications &amp; Standards (MSS)&lt;/li&gt;
            &lt;li&gt;IRC:SP:84 – Manual for Road Tunnels / Special Corridors&lt;/li&gt;
            &lt;li&gt;EPC Contract Conditions (Schedule A, B &amp; C)&lt;/li&gt;
        &lt;/ul&gt;

        &lt;h2&gt;2. Preliminary Plan &amp; Profile Before Tender&lt;/h2&gt;
        &lt;p&gt;Prepared by Authority or its Consultant and included in tender documents:&lt;/p&gt;
        &lt;ul&gt;
            &lt;li&gt;Preliminary alignment&lt;/li&gt;
            &lt;li&gt;Topographic survey&lt;/li&gt;
            &lt;li&gt;Longitudinal profile&lt;/li&gt;
            &lt;li&gt;Typical cross-sections&lt;/li&gt;
            &lt;li&gt;Junction layouts&lt;/li&gt;
            &lt;li&gt;Drainage concept&lt;/li&gt;
            &lt;li&gt;Land acquisition plans&lt;/li&gt;
        &lt;/ul&gt;
        &lt;div class=&quot;note&quot;&gt;
            These drawings act as &lt;strong&gt;Reference Alignment&lt;/strong&gt; only. Final responsibility lies with EPC Contractor.
        &lt;/div&gt;

        &lt;h2&gt;3. Award of EPC Contract&lt;/h2&gt;
        &lt;p&gt;After award, EPC Contractor becomes fully responsible for:&lt;/p&gt;
        &lt;ul&gt;
            &lt;li&gt;Detailed survey&lt;/li&gt;
            &lt;li&gt;Geometric design&lt;/li&gt;
            &lt;li&gt;Pavement design&lt;/li&gt;
            &lt;li&gt;Structural design&lt;/li&gt;
            &lt;li&gt;Final Plan &amp; Profile&lt;/li&gt;
        &lt;/ul&gt;

        &lt;!-- Add sections 4–15 here if needed --&gt;

        &lt;h2&gt;16. Approval Workflow&lt;/h2&gt;
        &lt;div class=&quot;mermaid&quot;&gt;
flowchart TD
    A[Start - EPC Contract Awarded]
    B[Authority Provides Reference Alignment and Preliminary P&amp;P]
    C[Contractor Conducts Detailed Topographic and Geotechnical Survey]
    D[Contractor Performs Geometric Design as per IRC and MoRTH]
    E[Prepare Draft Plan and Profile]
    F[Submit Draft P&amp;P with Design Report to IE or AE]

    G1{Technical Scrutiny by Design Consultant}
    G2{Technical Scrutiny by Proof Consultant}
    G3{Technical Scrutiny by Safety Consultant}

    G[IE Recommends P&amp;P to Authority]
    H[Authority Recommends P&amp;P for Approval]
    I[IE Issues Comments or Observations]
    J[Contractor Revises Design]

    K{Authority Review}
    L[Authority Issues Approval]

    M[Seek Special Approval with Justification]
    N{Competent Authority Decision}

    O[Issue Approved for Construction AFC Plan and Profile]
    P[Construction as per AFC Drawings]
    Q{Any Further Change Required}
    R[End]

    A --&gt; B
    B --&gt; C
    C --&gt; D
    D --&gt; E
    E --&gt; F

    F --&gt; G1
    F --&gt; G2
    F --&gt; G3

    G1 --&gt;|Compliant| G
    G2 --&gt;|Compliant| G
    G3 --&gt;|Compliant| G

    G --&gt; H
    G --&gt;|Non Compliant| I

    I --&gt; J
    J --&gt; F

    H --&gt; K

    K --&gt;|Approved| L
    K --&gt;|Modification Required| I
    K --&gt;|Major Deviation from Reference Alignment| M

    M --&gt; N
    N --&gt;|Approved| L
    N --&gt;|Rejected| I

    L --&gt; O
    O --&gt; P
    P --&gt; Q

    Q --&gt;|Yes| I
    Q --&gt;|No| R
&lt;/div&gt;
    &lt;/div&gt;

    &lt;!-- Formal Letter --&gt;
    &lt;div class=&quot;page&quot;&gt;
        &lt;div class=&quot;header&quot;&gt;
            &lt;h2&gt;Government of ____________&lt;/h2&gt;
            &lt;p&gt;Office of the Chief Engineer / Competent Authority&lt;/p&gt;
            &lt;p&gt;[Department Name]&lt;/p&gt;
            &lt;p&gt;[Office Address]&lt;/p&gt;
        &lt;/div&gt;

        &lt;div class=&quot;refblock&quot;&gt;
            &lt;div&gt;Ref No.: ______________________&lt;/div&gt;
            &lt;div&gt;Date: ______________________&lt;/div&gt;
        &lt;/div&gt;

        &lt;div class=&quot;to-block&quot;&gt;
            To,&lt;br&gt;
            The Project Director&lt;br&gt;
            [Name of EPC Contractor]&lt;br&gt;
            [Company Name]&lt;br&gt;
            [Address]
        &lt;/div&gt;

        &lt;div class=&quot;subject&quot;&gt;
            Subject: Approval of Plan &amp; Profile (P&amp;P) Drawings – Approved for Construction (AFC)
        &lt;/div&gt;

        &lt;div class=&quot;content&quot;&gt;
            &lt;p&gt;
                Project: &lt;strong&gt;[Name of Project]&lt;/strong&gt;&lt;br&gt;
                Contract Package No.: &lt;strong&gt;[Package No.]&lt;/strong&gt;&lt;br&gt;
                Agreement No.: &lt;strong&gt;[Agreement No.]&lt;/strong&gt;&lt;br&gt;
                Chainage: &lt;strong&gt;From Km ______ to Km ______&lt;/strong&gt;
            &lt;/p&gt;
            &lt;p&gt;This is with reference to your submission of Draft Plan &amp; Profile (P&amp;P) drawings for the above-mentioned project vide your letter no. __________ dated __________ and subsequent revisions based on observations of the Independent Engineer / Authority Engineer.&lt;/p&gt;
            &lt;p&gt;The Plan &amp; Profile drawings have been examined by the Independent Engineer / Authority Engineer and found to be in conformity with the provisions of the EPC Agreement, Manual of Specifications &amp; Standards, relevant IRC Codes and MoRTH Specifications.&lt;/p&gt;
            &lt;p&gt;Accordingly, the &lt;strong&gt;Plan &amp; Profile (P&amp;P) drawings as per enclosed list are hereby approved for construction (AFC)&lt;/strong&gt; for execution of works under the subject project.&lt;/p&gt;
            &lt;p&gt;You are requested to ensure that construction is carried out strictly in accordance with the approved drawings and contract provisions. Any deviation from the approved alignment, profile or geometry shall require prior approval of the Competent Authority.&lt;/p&gt;
            &lt;p&gt;This approval does not relieve the EPC Contractor of his responsibilities for correctness of design, safety, stability and performance of the works as per the contract.&lt;/p&gt;
        &lt;/div&gt;

        &lt;div class=&quot;footer&quot;&gt;
            &lt;p&gt;&lt;strong&gt;Enclosures:&lt;/strong&gt;&lt;/p&gt;
            &lt;ol&gt;
                &lt;li&gt;List of Approved Plan &amp; Profile Drawings (AFC)&lt;/li&gt;
                &lt;li&gt;Independent Engineer / Authority Engineer Recommendation Letter&lt;/li&gt;
            &lt;/ol&gt;
        &lt;/div&gt;

        &lt;div class=&quot;signature&quot;&gt;
            &lt;p&gt;Yours faithfully,&lt;/p&gt;
            &lt;p&gt;For and on behalf of Competent Authority&lt;/p&gt;
            &lt;br&gt;&lt;br&gt;&lt;br&gt;
            &lt;p&gt;(Signature) _______________________&lt;/p&gt;
            &lt;p&gt;Name: ___________________________&lt;/p&gt;
            &lt;p&gt;Designation: _____________________&lt;/p&gt;
            &lt;p&gt;Organization: ____________________&lt;/p&gt;
            &lt;p&gt;Seal:&lt;/p&gt;
        &lt;/div&gt;
    &lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;&lt;div class=&quot;blogger-post-footer&quot;&gt;https://yogipwd.blogspot.com/&lt;/div&gt;</description><link>https://www.yogipwd.com/2026/02/epc-project-plan-and-profile-approving.html</link><author>noreply@blogger.com (Yogendra)</author><thr:total>0</thr:total></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-1074964965522467583.post-1258919420549694458</guid><pubDate>Wed, 28 Jan 2026 09:38:00 +0000</pubDate><atom:updated>2026-04-08T16:47:36.181+05:30</atom:updated><title>Project progress monitoring tool</title><description>&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;Construction PM - Multi-Project Suite (INR)&lt;/title&gt;
    &lt;script src=&quot;https://cdn.jsdelivr.net/npm/chart.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.25/jspdf.plugin.autotable.min.js&quot;&gt;&lt;/script&gt;

&lt;button class=&quot;btn&quot; style=&quot;background:#2980b9; color:white;&quot; onclick=&quot;downloadPDF()&quot;&gt;Download PDF&lt;/button&gt;
    &lt;style&gt;
        body { font-family: &#39;Segoe UI&#39;, Tahoma, Geneva, Verdana, sans-serif; margin: 20px; background-color: #f0f2f5; color: #333; }
        .container { max-width: 1350px; margin: auto; background: white; padding: 5px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
        .nav-bar { display: flex; justify-content: space-between; align-items: center; background: #2c3e50; color: white; padding: 5px 5px; border-radius: 8px; margin-bottom: 25px; }
        .flex-row { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 20px; }
        .card { flex: 1; border: 1px solid #ddd; padding: 5px; border-radius: 8px; background: #fff; min-width: 300px; }
        label { font-size: 11px; font-weight: bold; text-transform: uppercase; color: #7f8c8d; display: block; margin-top: 8px; }
        input, select { width: 100%; padding: 5px; margin-top: 4px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }
        table { width: 100%; border-collapse: collapse; margin-top: 20px; font-size: 13px; }
        th, td { padding: 2px; border-bottom: 1px solid #eee; text-align: left; }
        th { background: #f8f9fa; color: #2c3e50; }
        .btn { padding: 2px 2px; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; transition: 0.2s; }
        .btn-add { background: #27ae60; color: white; }
        .btn-action { background: #3498db; color: white; }
        .status-behind { color: #e74c3c; font-weight: bold; }
        .status-ahead { color: #27ae60; font-weight: bold; }
        .milestone-badge { background: #f39c12; color: white; padding: 3px 10px; border-radius: 15px; font-size: 11px; margin-right: 5px; display: inline-block; margin-top: 5px; }
        .chart-box { height: 350px; margin-top: 30px; position: relative; }
        #projectSelector { background: #34495e; color: white; border: 1px solid #5d6d7e; padding: 2px; font-size: 16px; min-width: 250px; }
      h1,h2,h3{
    color:#2c3e50;
}

code{
    background:#f1f1f1;
    padding:3px 6px;
    border-radius:4px;
}

pre{
    background:#1e1e1e;
    color:#eee;
    padding:15px;
    border-radius:8px;
    overflow:auto;
}

.section{
    margin-bottom:40px;
}
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;div class=&quot;container&quot;&gt;
    &lt;div class=&quot;nav-bar&quot;&gt;
        &lt;div style=&quot;display: flex; align-items: center; gap: 15px;&quot;&gt;
            &lt;span style=&quot;font-weight: bold;&quot;&gt;SELECT PROJECT:&lt;/span&gt;
            &lt;select id=&quot;projectSelector&quot; onchange=&quot;switchProject()&quot;&gt;&lt;/select&gt;
            &lt;button class=&quot;btn btn-add&quot; onclick=&quot;createNewProject()&quot;&gt;+ New Project&lt;/button&gt;
        &lt;/div&gt;
        &lt;div&gt;
            &lt;button class=&quot;btn&quot; style=&quot;background:#5d6d7e; color:white;&quot; onclick=&quot;exportJSON()&quot;&gt;Export JSON&lt;/button&gt;
            &lt;button class=&quot;btn&quot; style=&quot;background:#5d6d7e; color:white;&quot; onclick=&quot;document.getElementById(&#39;fileIn&#39;).click()&quot;&gt;Import JSON&lt;/button&gt;
            &lt;input type=&quot;file&quot; id=&quot;fileIn&quot; style=&quot;display:none&quot; onchange=&quot;importJSON(event)&quot;&gt;
        &lt;/div&gt;
    &lt;/div&gt;

&lt;div class=&quot;card&quot; style=&quot;flex: 2;&quot;&gt;
    &lt;div style=&quot;margin-bottom: 15px;&quot;&gt;
        &lt;label&gt;Current Project Name&lt;/label&gt;
        &lt;input type=&quot;text&quot; id=&quot;projNameInput&quot; onblur=&quot;renameProject()&quot;&gt;
    &lt;/div&gt;

    &lt;div style=&quot;margin-bottom: 15px;&quot;&gt;
        &lt;label&gt;Total Budget (₹)&lt;/label&gt;
        &lt;input type=&quot;number&quot; id=&quot;projBudgetInput&quot; onchange=&quot;updateProjectMeta()&quot;&gt;
    &lt;/div&gt;

    &lt;div style=&quot;margin-bottom: 5px;&quot;&gt;
        &lt;label&gt;Global Milestones (% of Budget)&lt;/label&gt;
        &lt;div style=&quot;display: flex; gap: 10px; align-items: center; flex-wrap: wrap;&quot;&gt;
            &lt;input type=&quot;number&quot; id=&quot;newMilestonePercent&quot; placeholder=&quot;e.g. 50&quot; style=&quot;width: 100px;&quot;&gt;
            &lt;button class=&quot;btn btn-action&quot; onclick=&quot;addGlobalMilestone()&quot;&gt;Add Milestone&lt;/button&gt;
        &lt;/div&gt;
        &lt;div id=&quot;milestoneList&quot; style=&quot;margin-top: 10px;&quot;&gt;&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

        &lt;div class=&quot;card&quot; style=&quot;flex: 1; background: #ecf0f1; border: none;&quot;&gt;
            &lt;h4 style=&quot;margin:0; color:#2c3e50;&quot;&gt;Summary: &lt;span id=&quot;summaryName&quot;&gt;-&lt;/span&gt;&lt;/h4&gt;
            &lt;p style=&quot;font-size: 24px; font-weight: bold; margin: 10px 0;&quot;&gt;₹&lt;span id=&quot;totalSpent&quot;&gt;0&lt;/span&gt; / &lt;span id=&quot;overallPercent&quot;&gt;0&lt;/span&gt;%&lt;/p&gt;
            &lt;button class=&quot;btn&quot; style=&quot;background:#c0392b; color:white; font-size:10px;&quot; onclick=&quot;deleteCurrentProject()&quot;&gt;Delete This Project&lt;/button&gt;
        &lt;/div&gt;
    &lt;/div&gt;

    &lt;div class=&quot;card&quot;&gt;
    &lt;h4 style=&quot;margin-top:0&quot;&gt;Activity Management&lt;/h4&gt;
    &lt;div style=&quot;display: flex; flex-direction: column; gap: 12px;&quot;&gt;
        
        &lt;div&gt;
            &lt;label&gt;Activity Type&lt;/label&gt;
            &lt;select id=&quot;actName&quot;&gt;&lt;/select&gt;
        &lt;/div&gt;
        
        &lt;div style=&quot;display: flex; gap: 10px;&quot;&gt;
            &lt;div style=&quot;flex:1;&quot;&gt;
                &lt;label&gt;Start Date&lt;/label&gt;
                &lt;input type=&quot;date&quot; id=&quot;actStart&quot;&gt;
            &lt;/div&gt;
            &lt;div style=&quot;flex:1;&quot;&gt;
                &lt;label&gt;End Date&lt;/label&gt;
                &lt;input type=&quot;date&quot; id=&quot;actEnd&quot;&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;div&gt;
            &lt;label&gt;Total Qty&lt;/label&gt;
            &lt;input type=&quot;number&quot; id=&quot;actTotalQty&quot;&gt;
        &lt;/div&gt;

        &lt;div&gt;
            &lt;label&gt;Achieved Qty&lt;/label&gt;
            &lt;input type=&quot;number&quot; id=&quot;actAchievedQty&quot;&gt;
        &lt;/div&gt;

        &lt;div&gt;
            &lt;label&gt;Unit Cost (₹)&lt;/label&gt;
            &lt;input type=&quot;number&quot; id=&quot;actUnitCost&quot;&gt;
        &lt;/div&gt;

        &lt;div style=&quot;margin-top: 10px;&quot;&gt;
            &lt;button id=&quot;mainActionBtn&quot; class=&quot;btn btn-add&quot; style=&quot;width:100%; padding: 12px;&quot; onclick=&quot;saveActivity()&quot;&gt;Save Entry&lt;/button&gt;
        &lt;/div&gt;

    &lt;/div&gt;
&lt;/div&gt;

    &lt;table&gt;
        &lt;thead&gt;
            &lt;tr&gt;
                &lt;th&gt;Activity&lt;/th&gt;
                &lt;th&gt;Timeline&lt;/th&gt;
                &lt;th&gt;Total Qty&lt;/th&gt;
                &lt;th&gt;Achieved Qty&lt;/th&gt;
                &lt;th&gt;Exp. vs Act. %&lt;/th&gt;
                &lt;th&gt;Cost Achieved&lt;/th&gt;
                &lt;th&gt;Status&lt;/th&gt;
                &lt;th&gt;Actions&lt;/th&gt;
            &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody id=&quot;tableBody&quot;&gt;&lt;/tbody&gt;
    &lt;/table&gt;

    &lt;div class=&quot;chart-box&quot;&gt;
        &lt;canvas id=&quot;progressChart&quot;&gt;&lt;/canvas&gt;
    &lt;/div&gt;
  
  &lt;div class=&quot;container&quot;&gt;

&lt;h1&gt;Construction PM – Multi-Project Management Suite&lt;/h1&gt;

&lt;p&gt;
The provided code implements a &lt;strong&gt;browser-based construction project management system&lt;/strong&gt;.
It allows engineers or project managers to manage multiple infrastructure projects, track activities,
calculate cost progress, visualize completion percentages, and export progress reports.
&lt;/p&gt;

&lt;p&gt;
The entire system runs inside a single HTML file using &lt;strong&gt;JavaScript, Local Storage,
Chart.js visualizations, and PDF generation&lt;/strong&gt;.
No backend server is required.
&lt;/p&gt;

&lt;hr&gt;

&lt;div class=&quot;section&quot;&gt;

&lt;h2&gt;1. External Libraries Used&lt;/h2&gt;

&lt;p&gt;The application integrates several JavaScript libraries for advanced functionality.&lt;/p&gt;

&lt;pre&gt;
&lt;script src=&quot;https://cdn.jsdelivr.net/npm/chart.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.25/jspdf.plugin.autotable.min.js&quot;&gt;&lt;/script&gt;
&lt;/pre&gt;

&lt;h3&gt;Chart.js&lt;/h3&gt;
&lt;p&gt;
Chart.js is used to generate the &lt;strong&gt;progress comparison chart&lt;/strong&gt; showing expected vs actual
completion percentage for each activity.
&lt;/p&gt;

&lt;h3&gt;jsPDF&lt;/h3&gt;
&lt;p&gt;
jsPDF generates downloadable PDF reports summarizing project progress.
&lt;/p&gt;

&lt;h3&gt;jsPDF AutoTable&lt;/h3&gt;
&lt;p&gt;
This plugin creates formatted tables in the exported PDF.
&lt;/p&gt;

&lt;/div&gt;

&lt;hr&gt;

&lt;div class=&quot;section&quot;&gt;

&lt;h2&gt;2. Layout and Interface Design&lt;/h2&gt;

&lt;p&gt;
The interface is built using standard HTML and CSS. The layout follows a card-based dashboard design.
&lt;/p&gt;

&lt;h3&gt;Main Interface Components&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Project selector and management controls&lt;/li&gt;
&lt;li&gt;Project information card&lt;/li&gt;
&lt;li&gt;Milestone management&lt;/li&gt;
&lt;li&gt;Activity entry form&lt;/li&gt;
&lt;li&gt;Activity tracking table&lt;/li&gt;
&lt;li&gt;Progress chart&lt;/li&gt;
&lt;li&gt;Export/Import and PDF generation tools&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;
CSS styles define the overall appearance including typography,
card layouts, buttons, tables, and color-coded status indicators.
&lt;/p&gt;

&lt;/div&gt;

&lt;hr&gt;

&lt;div class=&quot;section&quot;&gt;

&lt;h2&gt;3. Project Data Structure&lt;/h2&gt;

&lt;p&gt;
All application data is stored in a JavaScript object called &lt;code&gt;library&lt;/code&gt;.
&lt;/p&gt;

&lt;pre&gt;
let library = {
    currentProjectId: null,
    projects: {}
};
&lt;/pre&gt;

Each project contains:

&lt;ul&gt;
&lt;li&gt;Project ID&lt;/li&gt;
&lt;li&gt;Project name&lt;/li&gt;
&lt;li&gt;Total budget&lt;/li&gt;
&lt;li&gt;Activities list&lt;/li&gt;
&lt;li&gt;Milestones&lt;/li&gt;
&lt;li&gt;Reached milestones&lt;/li&gt;
&lt;/ul&gt;

Example structure:

&lt;pre&gt;
project = {
 id: &quot;proj_123&quot;,
 name: &quot;Highway Project&quot;,
 budget: 100000,
 activities: [],
 milestones: [25,50,75],
 reachedMilestones: []
}
&lt;/pre&gt;

&lt;/div&gt;

&lt;hr&gt;

&lt;div class=&quot;section&quot;&gt;

&lt;h2&gt;4. Local Storage Persistence&lt;/h2&gt;

&lt;p&gt;
The application saves data using the browser&#39;s &lt;strong&gt;Local Storage API&lt;/strong&gt;.
&lt;/p&gt;

&lt;pre&gt;
localStorage.setItem(&#39;construction_library&#39;, JSON.stringify(library));
&lt;/pre&gt;

When the page loads:

&lt;ul&gt;
&lt;li&gt;The stored JSON data is retrieved.&lt;/li&gt;
&lt;li&gt;Projects are restored automatically.&lt;/li&gt;
&lt;li&gt;If no project exists, a default project is created.&lt;/li&gt;
&lt;/ul&gt;

This enables the tool to function like a lightweight offline database.

&lt;/div&gt;

&lt;hr&gt;

&lt;div class=&quot;section&quot;&gt;

&lt;h2&gt;5. Activity Categories&lt;/h2&gt;

&lt;p&gt;
The system organizes construction tasks into structured groups such as:
&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Roadwork Layers&lt;/li&gt;
&lt;li&gt;Structures&lt;/li&gt;
&lt;li&gt;Bridges&lt;/li&gt;
&lt;li&gt;Drainage&lt;/li&gt;
&lt;li&gt;Safety Components&lt;/li&gt;
&lt;li&gt;River Training Works&lt;/li&gt;
&lt;/ul&gt;

These groups populate the activity dropdown automatically.

&lt;pre&gt;
const activityGroups = {
 &quot;Roadwork - Layers&quot;: [&quot;Excavation&quot;,&quot;GSB&quot;,&quot;WMM&quot;],
 &quot;Bridges&quot;: [&quot;Foundation&quot;,&quot;Substructure&quot;,&quot;Superstructure&quot;]
};
&lt;/pre&gt;

This structure ensures standardized activity naming across projects.

&lt;/div&gt;

&lt;hr&gt;

&lt;div class=&quot;section&quot;&gt;

&lt;h2&gt;6. Activity Entry System&lt;/h2&gt;

&lt;p&gt;
Users can add or update construction activities using the activity form.
&lt;/p&gt;

Each activity stores:

&lt;ul&gt;
&lt;li&gt;Activity name&lt;/li&gt;
&lt;li&gt;Start date&lt;/li&gt;
&lt;li&gt;End date&lt;/li&gt;
&lt;li&gt;Total quantity&lt;/li&gt;
&lt;li&gt;Achieved quantity&lt;/li&gt;
&lt;li&gt;Unit cost&lt;/li&gt;
&lt;/ul&gt;

Example object:

&lt;pre&gt;
{
 name: &quot;Wet Mix Macadam&quot;,
 start: &quot;2026-01-01&quot;,
 end: &quot;2026-02-01&quot;,
 totalQty: 1000,
 achievedQty: 400,
 unitCost: 120
}
&lt;/pre&gt;

The application calculates cost automatically:

&lt;pre&gt;
cost = achievedQty × unitCost
&lt;/pre&gt;

&lt;/div&gt;

&lt;hr&gt;

&lt;div class=&quot;section&quot;&gt;

&lt;h2&gt;7. Progress Calculation Algorithm&lt;/h2&gt;

&lt;p&gt;
The function &lt;code&gt;calcStats()&lt;/code&gt; determines activity performance.
&lt;/p&gt;

It calculates two metrics:

&lt;h3&gt;Expected Progress&lt;/h3&gt;

Based on time elapsed:

&lt;pre&gt;
expected = (days passed / total days) × 100
&lt;/pre&gt;

&lt;h3&gt;Actual Progress&lt;/h3&gt;

Based on quantity completed:

&lt;pre&gt;
actual = (achievedQty / totalQty) × 100
&lt;/pre&gt;

&lt;h3&gt;Status Evaluation&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;If actual progress is significantly lower → &lt;strong&gt;Behind&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;If equal or greater → &lt;strong&gt;On Track&lt;/strong&gt;&lt;/li&gt;
&lt;/ul&gt;

Color coding is applied:

&lt;ul&gt;
&lt;li&gt;Green = Ahead/On track&lt;/li&gt;
&lt;li&gt;Red = Behind schedule&lt;/li&gt;
&lt;/ul&gt;

&lt;/div&gt;

&lt;hr&gt;

&lt;div class=&quot;section&quot;&gt;

&lt;h2&gt;8. Milestone Tracking&lt;/h2&gt;

&lt;p&gt;
Milestones represent percentage thresholds of the project budget.
&lt;/p&gt;

Example:

&lt;ul&gt;
&lt;li&gt;25%&lt;/li&gt;
&lt;li&gt;50%&lt;/li&gt;
&lt;li&gt;75%&lt;/li&gt;
&lt;/ul&gt;

The system checks whether the total cost spent has reached each milestone.

&lt;pre&gt;
targetAmount = (milestonePercent / 100) × projectBudget
&lt;/pre&gt;

If the total spent exceeds the target amount, the milestone is marked as achieved.

Achieved milestones turn &lt;strong&gt;green&lt;/strong&gt; in the interface.

&lt;/div&gt;

&lt;hr&gt;

&lt;div class=&quot;section&quot;&gt;

&lt;h2&gt;9. Progress Visualization&lt;/h2&gt;

&lt;p&gt;
Chart.js generates a dynamic bar chart comparing expected vs actual progress.
&lt;/p&gt;

Two datasets are rendered:

&lt;ul&gt;
&lt;li&gt;Expected progress (grey)&lt;/li&gt;
&lt;li&gt;Actual progress (blue)&lt;/li&gt;
&lt;/ul&gt;

The chart updates automatically whenever activities change.

&lt;/div&gt;

&lt;hr&gt;

&lt;div class=&quot;section&quot;&gt;

&lt;h2&gt;10. JSON Backup and Restore&lt;/h2&gt;

&lt;p&gt;
The application supports exporting and importing project data.
&lt;/p&gt;

&lt;h3&gt;Export&lt;/h3&gt;

Creates a downloadable JSON backup file.

&lt;pre&gt;
Project progress backup dated YYYY-MM-DD.json
&lt;/pre&gt;

&lt;h3&gt;Import&lt;/h3&gt;

The system reads the JSON file and merges the imported projects with existing data.

This enables:

&lt;ul&gt;
&lt;li&gt;Data backup&lt;/li&gt;
&lt;li&gt;Sharing projects between computers&lt;/li&gt;
&lt;li&gt;Long-term archiving&lt;/li&gt;
&lt;/ul&gt;

&lt;/div&gt;

&lt;hr&gt;

&lt;div class=&quot;section&quot;&gt;

&lt;h2&gt;11. PDF Report Generation&lt;/h2&gt;

&lt;p&gt;
Clicking the &lt;strong&gt;Download PDF&lt;/strong&gt; button generates a formatted project report.
&lt;/p&gt;

The report includes:

&lt;ul&gt;
&lt;li&gt;Project name&lt;/li&gt;
&lt;li&gt;Report date&lt;/li&gt;
&lt;li&gt;Total budget&lt;/li&gt;
&lt;li&gt;Total expenditure&lt;/li&gt;
&lt;li&gt;Activity progress table&lt;/li&gt;
&lt;li&gt;Embedded progress chart&lt;/li&gt;
&lt;/ul&gt;

This feature is implemented using:

&lt;ul&gt;
&lt;li&gt;jsPDF&lt;/li&gt;
&lt;li&gt;jsPDF AutoTable&lt;/li&gt;
&lt;/ul&gt;

&lt;/div&gt;

&lt;hr&gt;

&lt;div class=&quot;section&quot;&gt;

&lt;h2&gt;12. Multi-Project Capability&lt;/h2&gt;

&lt;p&gt;
The tool allows managing multiple projects simultaneously.
&lt;/p&gt;

Features include:

&lt;ul&gt;
&lt;li&gt;Create new projects&lt;/li&gt;
&lt;li&gt;Rename projects&lt;/li&gt;
&lt;li&gt;Switch between projects&lt;/li&gt;
&lt;li&gt;Delete projects&lt;/li&gt;
&lt;/ul&gt;

Each project maintains its own:

&lt;ul&gt;
&lt;li&gt;Activities&lt;/li&gt;
&lt;li&gt;Budget&lt;/li&gt;
&lt;li&gt;Milestones&lt;/li&gt;
&lt;li&gt;Progress records&lt;/li&gt;
&lt;/ul&gt;

&lt;/div&gt;

&lt;hr&gt;

&lt;div class=&quot;section&quot;&gt;

&lt;h2&gt;13. Advantages of This System&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Runs entirely in a web browser&lt;/li&gt;
&lt;li&gt;No installation required&lt;/li&gt;
&lt;li&gt;No server or database required&lt;/li&gt;
&lt;li&gt;Instant visual progress tracking&lt;/li&gt;
&lt;li&gt;Automatic cost calculations&lt;/li&gt;
&lt;li&gt;Exportable reports&lt;/li&gt;
&lt;li&gt;Backup and restore capability&lt;/li&gt;
&lt;/ul&gt;

&lt;/div&gt;

&lt;/div&gt;

&lt;script&gt;
    let library = { currentProjectId: null, projects: {} };
    let editIdx = -1;
    let chart = null;
    // New Grouped Structure
const activityGroups = {
    &quot;Roadwork - Layers&quot;: [&quot;Site Clearance&quot;, &quot;Excavation for Road&quot;, &quot;Emabankment/Earthwork/Natural Subgrade&quot;, &quot;GSB&quot;, &quot;Sub-Base Course&quot;, &quot;Wet Mix Macadam&quot;, &quot;Grading I&quot;, &quot;Grading II&quot;, &quot;Dry lean Concrete (DLC)&quot;, &quot;Pavement Quality Concrete (PQC)&quot;, &quot;Dense Bituminous Macadam (DBM)&quot;, &quot;Bituminous Concrete (BC)&quot;, &quot;Excavation for Road&quot;,&quot;Side Shoulders&quot;],
  
    &quot;Structures - Culverts &amp; Walls&quot;: [&quot;Slab Culvert&quot;, &quot;Hume Pipe Culvert&quot;, &quot;Box Culvert&quot;, &quot;PCC retaining wall&quot;, &quot;RCC retaining wall&quot;, &quot;Toe wall&quot;, &quot;Approaches Crossing&quot;],
  
    &quot;Bridges (Minor &amp; Major)&quot;: [&quot;Minor Bridge foundation&quot;, &quot;Minor Bridge Sub-structure&quot;, &quot;Minor Bridge Super-structure&quot;, &quot;Major Bridge foundation&quot;, &quot;Major Bridge Sub-structure&quot;, &quot;Major Bridge Super-structure&quot;, &quot;Bridge Approaches&quot;, &quot;Miscellaneous Bridge works&quot;, &quot;Bridge Bearing&quot;, &quot;Crash Barrier&quot;,&quot;Rigid apron&quot;,&quot;Flexible apron&quot;,&quot;Wing wall&quot;,&quot;Wearing Course&quot;],
  
    &quot;Junctions &amp; Safety&quot;: [&quot;Traffic Signs&quot;,&quot;Major Junctions&quot;, &quot;Minor Junctions&quot;, &quot;Road signs, Markings&quot;, &quot;KM stones&quot;, &quot;Metal Beam Crash barrier&quot;, &quot;Hand Railing for built-up section&quot;, &quot;Solar Blinker&quot;, &quot;Solar Street Light&quot;, &quot;High mast&quot;, &quot;Overhead Gantry Mounted Signs&quot;],
  
    &quot;Drainage &amp; Utilities&quot;: [&quot;Excavation For Gutter&quot;, &quot;Cover Slab&quot;, &quot;Utility Duct Across the road&quot;, &quot;Approach Crossing&quot;],
  
    &quot;Ancillary&quot;: [&quot;Bus Shelter&quot;, &quot;Bus Bay&quot;, &quot;Toilet Block&quot;, &quot;Median Kerb&quot;, &quot;Kerb With Channel&quot;, &quot;Road side Plantation&quot;, &quot;Blinkers&quot;, &quot;Cateye&quot;],
  
    &quot;General Components&quot;: [&quot;Reinforcement&quot;, &quot;Formwork&quot;, &quot;Finishing&quot;, &quot;Colouring&quot;],
  
  &quot;Repair works&quot;: [&quot;Repair culvert&quot;],
  
  &quot;River Training&quot;: [&quot;Guide Bunds&quot;, &quot;Spurs&quot;, &quot;Groynes&quot;, &quot;Marginal embankment (dyke or levee)&quot;]
};

    document.addEventListener(&#39;DOMContentLoaded&#39;, () =&gt; {
        const saved = localStorage.getItem(&#39;construction_library&#39;);
        if (saved) { try { library = JSON.parse(saved); } catch (e) { console.error(e); } }
        if (!library.currentProjectId || Object.keys(library.projects).length === 0) {
            createNewProject(&quot;Initial Project&quot;);
        } else {
            refreshProjectList();
            updateUI();
        }
    });

    function createNewProject(name) {
        const id = &#39;proj_&#39; + Date.now();
        const projectName = name || prompt(&quot;Enter Project Name:&quot;);
        if (!projectName) return;
        library.projects[id] = { id, name: projectName, budget: 100000, activities: [], milestones: [], reachedMilestones: [] };
        library.currentProjectId = id;
        saveToStorage();
        refreshProjectList();
    }

    function switchProject() {
        library.currentProjectId = document.getElementById(&#39;projectSelector&#39;).value;
        saveToStorage();
    }

    function deleteCurrentProject() {
        if (Object.keys(library.projects).length &lt;= 1) return alert(&quot;Cannot delete the only project.&quot;);
        if (confirm(&quot;Delete this entire project?&quot;)) {
            delete library.projects[library.currentProjectId];
            library.currentProjectId = Object.keys(library.projects)[0];
            saveToStorage();
            refreshProjectList();
        }
    }

    function updateProjectMeta() {
        const p = library.projects[library.currentProjectId];
        if(!p) return;
        p.budget = parseFloat(document.getElementById(&#39;projBudgetInput&#39;).value) || 0;
        saveToStorage();
    }

    function renameProject() {
        const p = library.projects[library.currentProjectId];
        if(!p) return;
        const newName = document.getElementById(&#39;projNameInput&#39;).value;
        if(newName &amp;&amp; newName !== p.name) {
            p.name = newName;
            saveToStorage();
            refreshProjectList();
        }
    }

    function refreshProjectList() {
        const sel = document.getElementById(&#39;projectSelector&#39;);
        sel.innerHTML = Object.values(library.projects).map(p =&gt; 
            `&lt;option value=&quot;${p.id}&quot; ${p.id === library.currentProjectId ? &#39;selected&#39; : &#39;&#39;}&gt;${p.name}&lt;/option&gt;`
        ).join(&#39;&#39;);
    }

    function addGlobalMilestone() {
        const p = library.projects[library.currentProjectId];
        const val = parseFloat(document.getElementById(&#39;newMilestonePercent&#39;).value);
        if(val &amp;&amp; !p.milestones.includes(val)) {
            p.milestones.push(val);
            p.milestones.sort((a,b) =&gt; a-b);
            document.getElementById(&#39;newMilestonePercent&#39;).value = &#39;&#39;;
            saveToStorage();
        }
    }

    function saveActivity() {
        const p = library.projects[library.currentProjectId];
        const act = {
            name: document.getElementById(&#39;actName&#39;).value,
            start: document.getElementById(&#39;actStart&#39;).value,
            end: document.getElementById(&#39;actEnd&#39;).value,
            totalQty: parseFloat(document.getElementById(&#39;actTotalQty&#39;).value) || 0,
            achievedQty: parseFloat(document.getElementById(&#39;actAchievedQty&#39;).value) || 0,
            unitCost: parseFloat(document.getElementById(&#39;actUnitCost&#39;).value) || 0
        };
        if(editIdx &gt; -1) { p.activities[editIdx] = act; editIdx = -1; document.getElementById(&#39;mainActionBtn&#39;).innerText = &quot;Save Entry&quot;; }
        else { p.activities.push(act); }
        checkMilestones(p);
        saveToStorage();
        clearForm();
    }

    function checkMilestones(p) {
    // Calculate current total spent based on latest activity data
    const currentTotalSpent = p.activities.reduce((sum, a) =&gt; sum + (a.achievedQty * a.unitCost), 0);
    
    // Clear and re-populate based on CURRENT budget and CURRENT costs
    p.reachedMilestones = [];
    (p.milestones || []).forEach(m =&gt; {
        const targetAmount = (m / 100) * p.budget;
        if (currentTotalSpent &gt;= targetAmount) {
            p.reachedMilestones.push(m);
        }
    });
}

function updateUI() {
    const p = library.projects[library.currentProjectId];
    if (!p) return;

    // 1. CRITICAL FIX: Re-calculate milestone achievements before rendering
    checkMilestones(p);

    // 2. Update Header Info
    document.getElementById(&#39;projNameInput&#39;).value = p.name;
    document.getElementById(&#39;projBudgetInput&#39;).value = p.budget;
    document.getElementById(&#39;summaryName&#39;).innerText = p.name;

    // 3. Generate Dropdown (only if empty to prevent losing user selection)
    const actSelect = document.getElementById(&#39;actName&#39;);
    if (actSelect.innerHTML === &quot;&quot;) {
        let groupHtml = &quot;&quot;;
        for (const [group, items] of Object.entries(activityGroups)) {
            groupHtml += `&lt;optgroup label=&quot;${group}&quot;&gt;`;
            items.forEach(item =&gt; {
                groupHtml += `&lt;option value=&quot;${item}&quot;&gt;${item}&lt;/option&gt;`;
            });
            groupHtml += `&lt;/optgroup&gt;`;
        }
        actSelect.innerHTML = groupHtml;
    }

    // 4. Render Milestone Badges with correct colors
    document.getElementById(&#39;milestoneList&#39;).innerHTML = (p.milestones || []).map(m =&gt; {
        const isReached = p.reachedMilestones.includes(m);
        return `&lt;span class=&quot;milestone-badge&quot; style=&quot;background:${isReached ? &#39;#27ae60&#39; : &#39;#f39c12&#39;}&quot;&gt;
            ${m}%
        &lt;/span&gt;`;
    }).join(&#39;&#39;);

    // 5. Build Table Rows
    let totalCost = 0;
    let html = &#39;&#39;;
    p.activities.forEach((a, i) =&gt; {
        const stats = calcStats(a);
        const cost = a.achievedQty * a.unitCost;
        totalCost += cost;
        html += `&lt;tr&gt;
            &lt;td&gt;&lt;b&gt;${a.name}&lt;/b&gt;&lt;/td&gt;
            &lt;td&gt;${a.start}&lt;br&gt;${a.end}&lt;/td&gt;
            &lt;td&gt;${a.totalQty.toLocaleString(&#39;en-IN&#39;)}&lt;/td&gt;
            &lt;td&gt;${a.achievedQty.toLocaleString(&#39;en-IN&#39;)}&lt;/td&gt;
            &lt;td&gt;&lt;small&gt;Exp: ${stats.exp}%&lt;/small&gt;&lt;br&gt;&lt;b&gt;Act: ${stats.act}%&lt;/b&gt;&lt;/td&gt;
            &lt;td&gt;₹${cost.toLocaleString(&#39;en-IN&#39;)}&lt;/td&gt;
            &lt;td class=&quot;${stats.css}&quot;&gt;${stats.status}&lt;/td&gt;
            &lt;td&gt;
                &lt;button class=&quot;btn&quot; style=&quot;padding:2px 8px; background:#3498db; color:white; font-size:11px;&quot; onclick=&quot;editAct(${i})&quot;&gt;Edit&lt;/button&gt;
                &lt;button class=&quot;btn&quot; style=&quot;padding:2px 8px; background:#e74c3c; color:white; font-size:11px;&quot; onclick=&quot;deleteAct(${i})&quot;&gt;Del&lt;/button&gt;
            &lt;/td&gt;
        &lt;/tr&gt;`;
    });

    // 6. Final Summary Update
    document.getElementById(&#39;tableBody&#39;).innerHTML = html;
    document.getElementById(&#39;totalSpent&#39;).innerText = totalCost.toLocaleString(&#39;en-IN&#39;);
    document.getElementById(&#39;overallPercent&#39;).innerText = p.budget &gt; 0 ? ((totalCost / p.budget) * 100).toFixed(1) : 0;
    
    renderChart(p);
}

    function calcStats(a) {
        const start = new Date(a.start), end = new Date(a.end), today = new Date();
        const totalDays = (end - start) / 86400000;
        const passedDays = (today - start) / 86400000;
        let exp = totalDays &gt; 0 ? Math.min(100, Math.max(0, (passedDays / totalDays) * 100)) : 0;
        let act = a.totalQty &gt; 0 ? (a.achievedQty / a.totalQty) * 100 : 0;
        let status = &quot;On Track&quot;, css = &quot;status-ahead&quot;;
        if (act &lt; exp - 5) { status = &quot;Behind&quot;; css = &quot;status-behind&quot;; }
        return { exp: exp.toFixed(1), act: act.toFixed(1), status, css };
    }

    function editAct(i) {
        editIdx = i;
        const a = library.projects[library.currentProjectId].activities[i];
        [&#39;actName&#39;, &#39;actStart&#39;, &#39;actEnd&#39;, &#39;actTotalQty&#39;, &#39;actAchievedQty&#39;, &#39;actUnitCost&#39;].forEach(id =&gt; {
            document.getElementById(id).value = a[id.replace(&#39;act&#39;, &#39;&#39;).charAt(0).toLowerCase() + id.replace(&#39;act&#39;, &#39;&#39;).slice(1)];
        });
        document.getElementById(&#39;mainActionBtn&#39;).innerText = &quot;Update Entry&quot;;
        window.scrollTo(0,0);
    }

    function deleteAct(i) { if(confirm(&quot;Remove this activity?&quot;)) { library.projects[library.currentProjectId].activities.splice(i, 1); saveToStorage(); } }

    function renderChart(p) {
    const ctx = document.getElementById(&#39;progressChart&#39;).getContext(&#39;2d&#39;);
    if (chart) chart.destroy();
    
    chart = new Chart(ctx, {
        type: &#39;bar&#39;,
        data: {
            labels: p.activities.map(a =&gt; a.name),
            datasets: [
                {
                    label: &#39;Expected %&#39;,
                    data: p.activities.map(a =&gt; calcStats(a).exp),
                    backgroundColor: &#39;#bdc3c7&#39;,
                    // This makes the background bar slightly wider
                    barPercentage: 0.8,
                    categoryPercentage: 1,
                    grouped: false // Key property: prevents side-by-side positioning
                },
                {
                    label: &#39;Actual %&#39;,
                    data: p.activities.map(a =&gt; calcStats(a).act),
                    backgroundColor: &#39;#3498db&#39;,
                    // This makes the foreground bar slightly thinner for a &quot;thermometer&quot; effect
                    barPercentage: 0.5,
                    categoryPercentage: 1,
                    grouped: false // Key property: prevents side-by-side positioning
                }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                y: {
                    beginAtZero: true,
                    max: 100
                }
            }
        }
    });
}
    function clearForm() { [&#39;actStart&#39;, &#39;actEnd&#39;, &#39;actTotalQty&#39;, &#39;actAchievedQty&#39;, &#39;actUnitCost&#39;].forEach(id =&gt; document.getElementById(id).value = &#39;&#39;); }
    function saveToStorage() { localStorage.setItem(&#39;construction_library&#39;, JSON.stringify(library)); updateUI(); }
  
  
function exportJSON() {
    // 1. Generate the current date (YYYY-MM-DD)
    const date = new Date().toISOString().split(&#39;T&#39;)[0];
    const fileName = `Project progress backup dated ${date}.json`;

    // 2. Create the data blob
    const blob = new Blob([JSON.stringify(library, null, 2)], {type: &#39;application/json&#39;});
    
    // 3. Create the hidden link and trigger download
    const url = URL.createObjectURL(blob);
    const a = document.createElement(&#39;a&#39;);
    a.href = url;
    a.download = fileName; // Applies your custom &quot;Project progress backup&quot; name
    
    // 4. Performance &amp; Browser Support cleanup
    document.body.appendChild(a); 
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
}
  
  
    function importJSON(e) {
    const reader = new FileReader();
    reader.onload = (event) =&gt; {
        try {
            const importedData = JSON.parse(event.target.result);
            
            // Merge the projects objects
            library.projects = {
                ...library.projects,
                ...importedData.projects
            };

            // Update the current project ID to the first one in the new list
            const newKeys = Object.keys(importedData.projects);
            if (newKeys.length &gt; 0) {
                library.currentProjectId = newKeys[0];
            }

            refreshProjectList();
            saveToStorage();
            alert(&quot;Projects merged successfully!&quot;);
        } catch (err) {
            alert(&quot;Invalid JSON file. Please ensure it is a valid backup.&quot;);
        }
    };
    if (e.target.files[0]) reader.readAsText(e.target.files[0]);
}
  
  async function downloadPDF() {
    const { jsPDF } = window.jspdf;
    const doc = new jsPDF(&#39;p&#39;, &#39;mm&#39;, &#39;a4&#39;);
    const p = library.projects[library.currentProjectId];
    const totalSpent = document.getElementById(&#39;totalSpent&#39;).innerText;
    const overallPct = document.getElementById(&#39;overallPercent&#39;).innerText;

    // Title &amp; Header
    doc.setFontSize(20);
    doc.setTextColor(44, 62, 80);
    doc.text(&quot;Construction Progress Report&quot;, 14, 20);
    
    doc.setFontSize(12);
    doc.setTextColor(100);
    doc.text(`Project: ${p.name}`, 14, 30);
    doc.text(`Date: ${new Date().toLocaleDateString(&#39;en-IN&#39;)}`, 14, 37);

    // Summary Box
    doc.setDrawColor(200);
    doc.setFillColor(248, 249, 250);
    doc.rect(14, 45, 180, 25, &#39;F&#39;);
    doc.setTextColor(0);
    doc.text(`Total Budget: INR ${p.budget.toLocaleString(&#39;en-IN&#39;)}`, 20, 55);
    doc.text(`Total Spent: INR ${totalSpent} (${overallPct}%)`, 20, 62);

    // Activity Table
    const tableData = p.activities.map(a =&gt; {
        const stats = calcStats(a);
        return [
            a.name,
            `${a.start} to ${a.end}`,
            a.totalQty.toLocaleString(&#39;en-IN&#39;),
            a.achievedQty.toLocaleString(&#39;en-IN&#39;),
            `${stats.act}%`,
            `INR ${(a.achievedQty * a.unitCost).toLocaleString(&#39;en-IN&#39;)}`,
            stats.status
        ];
    });

    doc.autoTable({
        startY: 80,
        head: [[&#39;Activity&#39;, &#39;Timeline&#39;, &#39;Total Qty&#39;, &#39;Achieved&#39;, &#39;Progress&#39;, &#39;Cost&#39;, &#39;Status&#39;]],
        body: tableData,
        theme: &#39;striped&#39;,
        headStyles: { fillColor: [44, 62, 80] },
        styles: { fontSize: 8 }
    });

    // Add Chart Image
    const canvas = document.getElementById(&#39;progressChart&#39;);
    if (canvas) {
        const chartImg = canvas.toDataURL(&#39;image/png&#39;, 1.0);
        const finalY = doc.lastAutoTable.finalY + 10;
        if (finalY &lt; 200) { // Ensure it fits on page
            doc.addImage(chartImg, &#39;PNG&#39;, 14, finalY, 180, 80);
        }
    }

    doc.save(`${p.name}_Report.pdf`);
}
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;&lt;div class=&quot;blogger-post-footer&quot;&gt;https://yogipwd.blogspot.com/&lt;/div&gt;</description><link>https://www.yogipwd.com/2026/01/project-progress-monitoring-tool.html</link><author>noreply@blogger.com (Yogendra)</author><thr:total>0</thr:total></item></channel></rss>