Untitled

 avatar
unknown
plain_text
9 months ago
11 kB
23
Indexable
import React from 'react';
import './ThermalPrint.css';
import logo from './logo.png'; // Assuming you have a logo image in the same directory

const ThermalPrint = () => {
  return (
    <div className="receipt" role="document" aria-label="Thermal Invoice">
      <div className="center">
        <img src={logo} className="img-fluid" width="96" alt="Company Logo" />
      </div>
      <div className="center title">Kitaabh Technologies</div>
      <div className="center">
        5-192, Gachibowi, Hyderabad, Telanagana -500081
      </div>
      <div className="center">Phone No: 8897989726</div>
      <div className="center">Email:[email protected]</div>

      <div className="hr-dashed"></div>
      <div className="center title">TAX INVOICE</div>

      <table className="invoice-meta small">
        <tbody>
          <tr>
            <td className="padding-0">
              <table className="invoice-meta small">
                <tbody>
                  <tr>
                    <td className="padding-0"><strong>Hideaway Private Limited</strong></td>
                  </tr>
                  <tr>
                    <td className="muted padding-0">Phone No: 879825728</td>
                  </tr>
                  <tr>
                    <td className="padding-0"><strong>Bill To:</strong></td>
                  </tr>
                  <tr>
                    <td className="muted padding-0">Singapore Road, Bangalore</td>
                  </tr>
                  <tr>
                    <td className="padding-0"><strong>Place of Supply:</strong></td>
                  </tr>
                  <tr>
                    <td className="muted padding-0">Karnataka</td>
                  </tr>
                </tbody>
              </table>
            </td>
            <td className="padding-0">
              <table className="invoice-meta small">
                <tbody>
                  <tr>
                    <td className="padding-0">Invoice No: <strong>INV-001</strong></td>
                  </tr>
                  <tr>
                    <td className="padding-0">Invoice Date: <strong>10-Sep-2025</strong></td>
                  </tr>
                  <tr>
                    <td className="padding-0">Bill to: <strong>Cash Sale</strong></td>
                  </tr>
                </tbody>
              </table>
            </td>
          </tr>
        </tbody>
      </table>

      <div className="hr-dashed"></div>

      <table>
        <colgroup>
          <col className="col-sn" />
          <col className="col-item" />
          <col className="col-qty" />
          <col className="col-rate" />
          <col className="col-mrp" />
          <col className="col-amt" />
        </colgroup>

        <thead>
          <tr>
            <th>SN</th>
            <th>Items</th>
            <th colSpan="4" className="right"></th>
          </tr>

          <tr>
            <th></th>
            <th></th>
            <th className="center">Qty</th>
            <th className="right">Rate</th>
            <th className="right">MRP</th>
            <th className="right">Amt</th>
          </tr>

          <tr>
            <th></th>
            <th className="small">Item Code</th>
            <th></th>
            <th className="small right">Disc</th>
            <th></th>
            <th className="small right">Tax</th>
          </tr>
        </thead>

        <tbody>
          <tr>
            <td>1</td>
            <td>
              Cleanic 100% bleach<br />
              <span className="muted">1.0 PCS</span>
            </td>
            <td className="center">1.0</td>
            <td className="right">168.64</td>
            <td className="right">199</td>
            <td className="right">189.05</td>
          </tr>
          <tr className="sub-row">
            <td></td>
            <td className="muted">-</td>
            <td></td>
            <td className="right">5.00%</td>
            <td></td>
            <td className="right">18.00%</td>
          </tr>

          <tr>
            <td>2</td>
            <td>
              AP Honey 500g<br />
              <span className="muted">2.0 PCS</span>
            </td>
            <td className="center">2.0</td>
            <td className="right">211.86</td>
            <td className="right">265</td>
            <td className="right">500.00</td>
          </tr>
          <tr className="sub-row">
            <td></td>
            <td className="muted">APH28292</td>
            <td></td>
            <td className="right">-</td>
            <td></td>
            <td className="right">18.00%</td>
          </tr>

          <tr>
            <td>3</td>
            <td>
              Colgate Electric Toothbrush<br />
              <span className="muted">1.0 PCS</span>
            </td>
            <td className="center">1.0</td>
            <td className="right">651.69</td>
            <td className="right">899</td>
            <td className="right">730.55</td>
          </tr>
          <tr className="sub-row">
            <td></td>
            <td className="muted">RTTE88292</td>
            <td></td>
            <td className="right">5.00%</td>
            <td></td>
            <td className="right">18.00%</td>
          </tr>
          <tr>
            <td>4</td>
            <td>
              Colgate Electric Toothbrush<br />
              <span className="muted">1.0 PCS</span>
            </td>
            <td className="center">1.0</td>
            <td className="right">651.69</td>
            <td className="right">899</td>
            <td className="right">730.55</td>
          </tr>
          <tr className="sub-row">
            <td></td>
            <td className="muted">RTTE88292</td>
            <td></td>
            <td className="right">5.00%</td>
            <td></td>
            <td className="right">18.00%</td>
          </tr>
          <tr>
            <td>5</td>
            <td>
              Colgate Electric Toothbrush<br />
              <span className="muted">1.0 PCS</span>
            </td>
            <td className="center">1.0</td>
            <td className="right">651.69</td>
            <td className="right">899</td>
            <td className="right">730.55</td>
          </tr>
          <tr className="sub-row">
            <td></td>
            <td className="muted">RTTE88292</td>
            <td></td>
            <td className="right">5.00%</td>
            <td></td>
            <td className="right">18.00%</td>
          </tr>
          <tr>
            <td>6</td>
            <td>
              Colgate Electric Toothbrush<br />
              <span className="muted">1.0 PCS</span>
            </td>
            <td className="center">1.0</td>
            <td className="right">651.69</td>
            <td className="right">899</td>
            <td className="right">730.55</td>
          </tr>
          <tr className="sub-row">
            <td></td>
            <td className="muted">RTTE88292</td>
            <td></td>
            <td className="right">5.00%</td>
            <td></td>
            <td className="right">18.00%</td>
          </tr>
        </tbody>
      </table>

      <div className="hr-dashed"></div>

      <table>
        <colgroup>
          <col />
          <col />
        </colgroup>
        <tbody>
          <tr>
            <td>Sub Total</td>
            <td className="right">₹1,419.60</td>
          </tr>

          <tr style={{ fontWeight: 700 }}>
            <td>Balance Amount</td>
            <td className="right">₹0.00</td>
          </tr>
        </tbody>
      </table>

      <div className="hr-dashed"></div>

      <table className="invoice-meta small">
        <tbody>
          <tr>
            <td className="center">GST BREAK UP</td>
          </tr>
        </tbody>
      </table>
      <div className="hr-dashed"></div>

      <table>
        <colgroup>
          <col className="col-sn" />
          <col className="col-item" />
          <col className="col-qty" />
          <col className="col-rate" />
          <col className="col-mrp" />
          <col className="col-amt" />
        </colgroup>

        <thead>
          <tr>
            <th style={{ width: '6%' }}>SN</th>
            <th className="right" style={{ width: '30%' }}>Taxable Amt.</th>
            <th className="right" style={{ width: '10%' }}>CGST</th>
            <th className="right" style={{ width: '10%' }}>SGST</th>
            <th className="right" style={{ width: '10%' }}>CESS</th>
            <th className="right" style={{ width: '30%' }}>Total Amount</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td className="right">12,00,00</td>
            <td className="right">2.0</td>
            <td className="right">211.86</td>
            <td className="right">265</td>
            <td className="right">500.00</td>
          </tr>
          <tr>
            <td>2</td>
            <td className="right">12,00,00</td>
            <td className="right">2.0</td>
            <td className="right">211.86</td>
            <td className="right">265</td>
            <td className="right">500.00</td>
          </tr>
          <tr>
            <td>3</td>
            <td className="right">12,00,00</td>
            <td className="right">2.0</td>
            <td className="right">211.86</td>
            <td className="right">265</td>
            <td className="right">500.00</td>
          </tr>
          <tr>
            <td>4</td>
            <td className="right">12,00,00</td>
            <td className="right">2.0</td>
            <td className="right">211.86</td>
            <td className="right">265</td>
            <td className="right">500.00</td>
          </tr>
          <tr>
            <td>5</td>
            <td className="right">12,00,00</td>
            <td className="right">2.0</td>
            <td className="right">211.86</td>
            <td className="right">265</td>
            <td className="right">500.00</td>
          </tr>
          <tr className="footer-total">
            <td>T:</td>
            <td className="right">12,00,00</td>
            <td className="right">2.0</td>
            <td className="right">211.86</td>
            <td className="right">265</td>
            <td className="right">500.00</td>
          </tr>
        </tbody>
      </table>

      <div className="notes">
        Notes:<br />
        We offer doorstep delivery for large orders. Enquire at cash counter or call us for details.<br />
        <strong>Terms and Conditions</strong><br />
        1. Goods once sold will not be taken back or exchanged.<br />
        2. All disputes are subject to PUNE jurisdiction only.
      </div>

      <div className="thanks">Thank you for your purchase</div>
    </div>
  );
};

export default ThermalPrint;
Editor is loading...
Leave a Comment