I change the PDF form

frontend/css/style.css

@@ -237,14 +237,88 @@ table.svc-table   { width: 100%; border-collapse: collapse; font-size: 0.84rem;
 #toast.info    { border-left: 4px solid var(--teal); }
 
 /* ─── PRINT ─── */
+.print-sheet { display: none; max-width: 820px; margin: 0 auto; font-family: 'Nunito', sans-serif; color: #222; }
+.print-sheet, .print-sheet * { box-sizing: border-box; }
+.print-header {
+  background: #1e5c78;
+  color: #fff;
+  padding: 22px 26px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.print-title {
+  font-size: 2.1rem;
+  font-weight: 800;
+  letter-spacing: 0.08em;
+}
+.print-brand { text-align: right; font-size: 0.75rem; line-height: 1.45; }
+.print-brand-name { font-weight: 700; font-size: 0.8rem; margin-bottom: 2px; }
+.print-info {
+  padding: 18px 26px 8px;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 24px;
+  font-size: 0.76rem;
+}
+.print-info-title { font-weight: 700; margin-bottom: 6px; }
+.print-info-row { display: flex; gap: 8px; margin: 2px 0; }
+.print-info-row .k { width: 120px; font-weight: 600; color: #333; }
+.print-info-row .v { color: #333; }
+
+.print-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.75rem;
+  margin: 6px 0 0;
+}
+.print-table thead th {
+  background: #1e5c78;
+  color: #fff;
+  padding: 6px 8px;
+  text-align: left;
+  font-weight: 700;
+}
+.print-table thead th.c { text-align: center; }
+.print-table thead th.r { text-align: right; }
+.print-table tbody td {
+  padding: 6px 8px;
+  border-bottom: 1px solid #d7e1e8;
+}
+.print-table tbody td.c { text-align: center; }
+.print-table tbody td.r { text-align: right; }
+
+.print-summary {
+  padding: 10px 26px 0;
+  display: grid;
+  grid-template-columns: 1fr 280px;
+  gap: 24px;
+  font-size: 0.75rem;
+}
+.print-terms { color: #333; }
+.print-totals { display: grid; gap: 6px; }
+.tot-row { display: flex; justify-content: space-between; }
+.tot-row.total { border-top: 2px solid #7a2a2a; padding-top: 6px; font-weight: 700; }
+
+.print-footer {
+  margin: 22px 26px 0;
+  background: #1e5c78;
+  color: #fff;
+  text-align: center;
+  padding: 10px 12px;
+  font-size: 0.75rem;
+  font-weight: 600;
+}
+
 @media print {
   body { background: #fff !important; }
-  .topbar, .action-bar, .btn-del, .add-row-btn, #toast, #page-history { display: none !important; }
-  #page-invoice { display: block !important; }
+  .topbar, .action-bar, .btn-del, .add-row-btn, #toast, #page-history, #page-invoice { display: none !important; }
   .app-body { padding: 0 !important; max-width: none !important; }
-  .inv-card { box-shadow: none !important; border: 1px solid #ddd; }
-  .inv-header-band, .svc-table thead tr, .summary-row.net { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
-  .tbl-input, .tbl-select, .form-control, .received-input { border: none !important; background: transparent !important; }
+  .print-sheet { display: block; }
+  .print-header, .print-table thead th, .print-footer {
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
+  }
 }
 
 /* ─── RESPONSIVE ─── */
@@ -354,4 +428,4 @@ table.svc-table   { width: 100%; border-collapse: collapse; font-size: 0.84rem;
         max-width: none;
         border-radius: 0;
     }
-}
+}

frontend/index.html

@@ -137,6 +137,63 @@
 
   <div id="toast"></div>
 
+  <!-- Print-only invoice layout (matches example PDF style) -->
+  <div id="print-sheet" class="print-sheet">
+    <div class="print-header">
+      <div class="print-title">INVOICE</div>
+      <div class="print-brand">
+        <div class="print-brand-name">SmiloCAD Dental Lab</div>
+        <div class="print-brand-line">Al Anayat Plaza, G11 Markaz Islamabad</div>
+        <div class="print-brand-line">Phone: </div>
+        <div class="print-brand-line">Email: </div>
+      </div>
+    </div>
+
+    <div class="print-info">
+      <div class="print-info-left">
+        <div class="print-info-row"><span class="k">Invoice No.</span> <span class="v" id="print-inv-no">INV-0000</span></div>
+        <div class="print-info-row"><span class="k">Date of Issue</span> <span class="v" id="print-inv-date">Enter Date Here</span></div>
+        <div class="print-info-row"><span class="k">Due Date</span> <span class="v" id="print-due-date">Enter Due Date Here</span></div>
+      </div>
+      <div class="print-info-right">
+        <div class="print-info-title">Bill To</div>
+        <div class="print-info-row"><span class="k">Client Name</span> <span class="v" id="print-client-name">Client Name</span></div>
+        <div class="print-info-row"><span class="k">Company Name</span> <span class="v" id="print-company-name">Company Name</span></div>
+        <div class="print-info-row"><span class="k">Address</span> <span class="v" id="print-address">Address</span></div>
+        <div class="print-info-row"><span class="k">Phone</span> <span class="v" id="print-phone">Phone</span></div>
+        <div class="print-info-row"><span class="k">Email</span> <span class="v" id="print-email">Email</span></div>
+      </div>
+    </div>
+
+    <table class="print-table">
+      <thead>
+        <tr>
+          <th class="c">Item</th>
+          <th>Patient Name</th>
+          <th>Shield</th>
+          <th>Description</th>
+          <th class="c">Unit</th>
+          <th class="r">Rate</th>
+          <th class="r">Amount</th>
+        </tr>
+      </thead>
+      <tbody id="print-rows"></tbody>
+    </table>
+
+    <div class="print-summary">
+      <div class="print-terms">Terms</div>
+      <div class="print-totals">
+        <div class="tot-row"><span>Subtotal</span><span id="print-subtotal">$0.00</span></div>
+        <div class="tot-row"><span>Discount</span><span>$0.00</span></div>
+        <div class="tot-row"><span>Tax Rate</span><span>0%</span></div>
+        <div class="tot-row"><span>Tax</span><span>$0.00</span></div>
+        <div class="tot-row total"><span>Total</span><span id="print-total">$0.00</span></div>
+      </div>
+    </div>
+
+    <div class="print-footer">Thank you for your business!</div>
+  </div>
+
   <script src="/js/data.js"></script>
   <script src="/js/db.js"></script>
   <script src="/js/ui.js"></script>
@@ -144,4 +201,4 @@
   <script src="/js/history.js"></script>
   <script src="/js/app.js"></script>
 </body>
-</html>
+</html>

frontend/js/app.js

@@ -84,9 +84,65 @@ var App = (function() {
         if (confirm("Clear form?")) _resetForm();
     }
 
+    function _fmtMoney(n) {
+        return "PKR " + (Number(n) || 0).toLocaleString("en-PK", { minimumFractionDigits: 2, maximumFractionDigits: 2 });
+    }
+
+    function _preparePrint() {
+        var invNo = document.getElementById("inv-number")?.value || "INV-0000";
+        var invDate = document.getElementById("inv-date")?.value || "";
+        var doctor = document.getElementById("doctor-name")?.value || "";
+        var clinic = document.getElementById("clinic")?.value || "";
+        var patient = document.getElementById("patient")?.value || "";
+        var shade = document.getElementById("shade")?.value || "";
+
+        var invNoEl = document.getElementById("print-inv-no");
+        var invDateEl = document.getElementById("print-inv-date");
+        if (invNoEl) invNoEl.textContent = invNo === "Auto-Generated" ? "INV-0000" : invNo;
+        if (invDateEl) invDateEl.textContent = invDate || "Enter Date Here";
+
+        var clientEl = document.getElementById("print-client-name");
+        var companyEl = document.getElementById("print-company-name");
+        if (clientEl) clientEl.textContent = doctor || "Client Name";
+        if (companyEl) companyEl.textContent = clinic || "Company Name";
+
+        var rowsEl = document.getElementById("print-rows");
+        if (rowsEl) rowsEl.innerHTML = "";
+
+        var items = (typeof Rows !== 'undefined') ? Rows.collect() : [];
+        var minRows = 8;
+        var rowCount = Math.max(items.length, minRows);
+
+        for (var i = 0; i < rowCount; i++) {
+            var item = items[i];
+            var desc = item ? item.description : "";
+            var qty = item ? item.quantity : "";
+            var price = item ? item.price_per_unit : "";
+            var total = item ? (item.quantity * item.price_per_unit) : "";
+            var rowHtml = [
+                '<tr>',
+                '<td class="c">', (i + 1), '</td>',
+                '<td>', patient || '', '</td>',
+                '<td>', shade || '', '</td>',
+                '<td>', desc || '', '</td>',
+                '<td class="c">', (qty !== "" ? qty : ''), '</td>',
+                '<td class="r">', (price !== "" ? _fmtMoney(price) : ''), '</td>',
+                '<td class="r">', (total !== "" ? _fmtMoney(total) : ''), '</td>',
+                '</tr>'
+            ].join("");
+            if (rowsEl) rowsEl.insertAdjacentHTML("beforeend", rowHtml);
+        }
+
+        var subtotal = (typeof Rows !== 'undefined') ? Rows.subtotal() : 0;
+        var subEl = document.getElementById("print-subtotal");
+        var totalEl = document.getElementById("print-total");
+        if (subEl) subEl.textContent = _fmtMoney(subtotal);
+        if (totalEl) totalEl.textContent = _fmtMoney(subtotal);
+    }
+
     // Empty stubs to prevent "undefined" errors if UI calls them
-    function print() { window.print(); }
-    function downloadPDF() { window.print(); }
+    function print() { _preparePrint(); window.print(); }
+    function downloadPDF() { _preparePrint(); window.print(); }
     function exportExcel() { console.log("Exporting..."); }
     function loadEdit(id) { console.log("Loading ID:", id); }
 
@@ -116,4 +172,4 @@ var App = (function() {
         exportExcel: exportExcel,
         loadEdit: loadEdit
     };
-})();
+})();