{
  "id": "electricity",
  "title": "Electricity bill — residential",
  "category": "Electricity",
  "note": "Not affiliated with any utility company; layout templates for demonstration.",
  "fields": [
    {
      "field": "customerName",
      "id": "elec-customer-name",
      "xpath": "//*[@id='elec-customer-name']",
      "value": "Mr. CHAN TAI MAN 陳大文",
      "depth": 0
    },
    {
      "field": "mailingAddress",
      "id": "elec-mailing-address",
      "xpath": "//*[@id='elec-mailing-address']",
      "value": "FLAT A, 1/F<br>EXAMPLE HOUSE<br>SAMPLE ESTATE<br>SAMPLE DISTRICT, HONG KONG",
      "depth": 0
    },
    {
      "field": "supplyAddress",
      "id": "elec-supply-address",
      "xpath": "//*[@id='elec-supply-address']",
      "value": "Mr. CHAN TAI MAN<br>FLAT A, 1/F<br>EXAMPLE HOUSE<br>1 SAMPLE STREET<br>SAMPLE DISTRICT",
      "depth": 0
    },
    {
      "field": "accountNumber",
      "id": "elec-account-number",
      "xpath": "//*[@id='elec-account-number']",
      "value": "0000-0000-0000",
      "depth": 0
    },
    {
      "field": "accountType",
      "id": "elec-account-type",
      "xpath": "//*[@id='elec-account-type']",
      "value": "00",
      "depth": 0
    },
    {
      "field": "tariffType",
      "id": "elec-tariff-type",
      "xpath": "//*[@id='elec-tariff-type']",
      "value": "住宅用電",
      "depth": 0
    },
    {
      "field": "billDate",
      "id": "elec-bill-date",
      "xpath": "//*[@id='elec-bill-date']",
      "value": "27-07-26",
      "depth": 0
    },
    {
      "field": "billingPeriod",
      "id": "elec-billing-period",
      "xpath": "//*[@id='elec-billing-period']",
      "value": "由 <b>28-05-26</b> 至 <b>27-07-26</b><br>共 <b>61</b> 日用電量",
      "depth": 0
    },
    {
      "field": "deposit",
      "id": "elec-deposit",
      "xpath": "//*[@id='elec-deposit']",
      "value": "$800.00",
      "depth": 0
    },
    {
      "field": "energyCharge",
      "id": "elec-energy-charge",
      "xpath": "//*[@id='elec-energy-charge']",
      "value": "$793.80",
      "depth": 0
    },
    {
      "field": "fuelAdjustment",
      "id": "elec-fuel-adjustment",
      "xpath": "//*[@id='elec-fuel-adjustment']",
      "value": "$303.20",
      "depth": 0
    },
    {
      "field": "othersTotal",
      "id": "elec-others-total",
      "xpath": "//*[@id='elec-others-total']",
      "value": "-$1.00",
      "depth": 0
    },
    {
      "field": "totalDue",
      "id": "elec-total-due",
      "xpath": "//*[@id='elec-total-due']",
      "value": "$1,096.00",
      "depth": 0
    },
    {
      "field": "dueDate",
      "id": "elec-due-date",
      "xpath": "//*[@id='elec-due-date']",
      "value": "11-08-26",
      "depth": 0
    },
    {
      "field": "lastPaymentAmount",
      "id": "elec-last-payment",
      "xpath": "//*[@id='elec-last-payment']",
      "value": "$1,000.00",
      "depth": 0
    },
    {
      "field": "lastPaymentDate",
      "id": "elec-last-payment-date",
      "xpath": "//*[@id='elec-last-payment-date']",
      "value": "09-06-26",
      "depth": 0
    },
    {
      "field": "tariffTable",
      "id": "elec-tariff-table",
      "xpath": "//*[@id='elec-tariff-table']",
      "value": "\n              <thead><tr style=\"border-bottom:1px solid #1c1c1a;\">\n                <th style=\"text-align:left; padding:3px 2px; font-weight:400;\">用電級別</th>\n                <th style=\"text-align:right; padding:3px 2px; font-weight:400;\">每度(¢)</th>\n                <th style=\"text-align:right; padding:3px 2px; font-weight:400;\">度數</th>\n                <th style=\"text-align:right; padding:3px 2px; font-weight:400;\">費用($)</th>\n              </tr></thead>\n              <tbody>\n                <tr><td style=\"padding:3px 2px;\">首 400度</td><td id=\"elec-rate-1\" data-field=\"rate1\" style=\"text-align:right;\">100.0</td><td id=\"elec-units-1\" data-field=\"units1\" style=\"text-align:right;\">400</td><td id=\"elec-amount-1\" data-field=\"amount1\" style=\"text-align:right;\">400.00</td></tr>\n                <tr><td style=\"padding:3px 2px;\">次 600度</td><td id=\"elec-rate-2\" data-field=\"rate2\" style=\"text-align:right;\">110.0</td><td id=\"elec-units-2\" data-field=\"units2\" style=\"text-align:right;\">358</td><td id=\"elec-amount-2\" data-field=\"amount2\" style=\"text-align:right;\">393.80</td></tr>\n                <tr style=\"border-top:1px solid #1c1c1a; font-weight:700;\"><td style=\"padding:3px 2px;\">小計</td><td></td><td id=\"elec-total-units\" data-field=\"totalUnits\" style=\"text-align:right;\">758</td><td id=\"elec-energy-subtotal\" data-field=\"energySubtotal\" style=\"text-align:right;\">$793.80</td></tr>\n              </tbody>\n            ",
      "depth": 0
    },
    {
      "field": "rate1",
      "id": "elec-rate-1",
      "xpath": "//*[@id='elec-rate-1']",
      "value": "100.0",
      "depth": 1
    },
    {
      "field": "units1",
      "id": "elec-units-1",
      "xpath": "//*[@id='elec-units-1']",
      "value": "400",
      "depth": 1
    },
    {
      "field": "amount1",
      "id": "elec-amount-1",
      "xpath": "//*[@id='elec-amount-1']",
      "value": "400.00",
      "depth": 1
    },
    {
      "field": "rate2",
      "id": "elec-rate-2",
      "xpath": "//*[@id='elec-rate-2']",
      "value": "110.0",
      "depth": 1
    },
    {
      "field": "units2",
      "id": "elec-units-2",
      "xpath": "//*[@id='elec-units-2']",
      "value": "358",
      "depth": 1
    },
    {
      "field": "amount2",
      "id": "elec-amount-2",
      "xpath": "//*[@id='elec-amount-2']",
      "value": "393.80",
      "depth": 1
    },
    {
      "field": "totalUnits",
      "id": "elec-total-units",
      "xpath": "//*[@id='elec-total-units']",
      "value": "758",
      "depth": 1
    },
    {
      "field": "energySubtotal",
      "id": "elec-energy-subtotal",
      "xpath": "//*[@id='elec-energy-subtotal']",
      "value": "$793.80",
      "depth": 1
    },
    {
      "field": "fuelSubtotal",
      "id": "elec-fuel-subtotal",
      "xpath": "//*[@id='elec-fuel-subtotal']",
      "value": "$303.20",
      "depth": 0
    },
    {
      "field": "depositInterest",
      "id": "elec-deposit-interest",
      "xpath": "//*[@id='elec-deposit-interest']",
      "value": "-$0.60",
      "depth": 0
    },
    {
      "field": "balanceBroughtForward",
      "id": "elec-balance-bf",
      "xpath": "//*[@id='elec-balance-bf']",
      "value": "0.14",
      "depth": 0
    },
    {
      "field": "balanceCarriedForward",
      "id": "elec-balance-cf",
      "xpath": "//*[@id='elec-balance-cf']",
      "value": "-0.54",
      "depth": 0
    },
    {
      "field": "othersSubtotal",
      "id": "elec-others-subtotal",
      "xpath": "//*[@id='elec-others-subtotal']",
      "value": "-$1.00",
      "depth": 0
    },
    {
      "field": "usageChart",
      "id": "elec-usage-chart",
      "xpath": "//*[@id='elec-usage-chart']",
      "value": "\n              \n                <div style=\"display:flex; flex-direction:column; align-items:center; gap:2px; width:15px;\">\n                  <div style=\"font-size:9.5px;\">16</div>\n                  <div style=\"width:8px; background:#1c1c1a; height: 28px;\"></div>\n                </div>\n              \n                <div style=\"display:flex; flex-direction:column; align-items:center; gap:2px; width:15px;\">\n                  <div style=\"font-size:9.5px;\">20</div>\n                  <div style=\"width:8px; background:#1c1c1a; height: 35px;\"></div>\n                </div>\n              \n                <div style=\"display:flex; flex-direction:column; align-items:center; gap:2px; width:15px;\">\n                  <div style=\"font-size:9.5px;\">15</div>\n                  <div style=\"width:8px; background:#1c1c1a; height: 27px;\"></div>\n                </div>\n              \n                <div style=\"display:flex; flex-direction:column; align-items:center; gap:2px; width:15px;\">\n                  <div style=\"font-size:9.5px;\">9</div>\n                  <div style=\"width:8px; background:#1c1c1a; height: 16px;\"></div>\n                </div>\n              \n                <div style=\"display:flex; flex-direction:column; align-items:center; gap:2px; width:15px;\">\n                  <div style=\"font-size:9.5px;\">5</div>\n                  <div style=\"width:8px; background:#1c1c1a; height: 9px;\"></div>\n                </div>\n              \n                <div style=\"display:flex; flex-direction:column; align-items:center; gap:2px; width:15px;\">\n                  <div style=\"font-size:9.5px;\">6</div>\n                  <div style=\"width:8px; background:#1c1c1a; height: 11px;\"></div>\n                </div>\n              \n                <div style=\"display:flex; flex-direction:column; align-items:center; gap:2px; width:15px;\">\n                  <div style=\"font-size:9.5px;\">10</div>\n                  <div style=\"width:8px; background:#1c1c1a; height: 18px;\"></div>\n                </div>\n              \n                <div style=\"display:flex; flex-direction:column; align-items:center; gap:2px; width:15px;\">\n                  <div style=\"font-size:9.5px;\">14</div>\n                  <div style=\"width:8px; background:#1c1c1a; height: 25px;\"></div>\n                </div>\n              \n                <div style=\"display:flex; flex-direction:column; align-items:center; gap:2px; width:15px;\">\n                  <div style=\"font-size:9.5px;\">14</div>\n                  <div style=\"width:8px; background:#1c1c1a; height: 25px;\"></div>\n                </div>\n              \n                <div style=\"display:flex; flex-direction:column; align-items:center; gap:2px; width:15px;\">\n                  <div style=\"font-size:9.5px;\">9</div>\n                  <div style=\"width:8px; background:#1c1c1a; height: 16px;\"></div>\n                </div>\n              \n                <div style=\"display:flex; flex-direction:column; align-items:center; gap:2px; width:15px;\">\n                  <div style=\"font-size:9.5px;\">5</div>\n                  <div style=\"width:8px; background:#1c1c1a; height: 9px;\"></div>\n                </div>\n              \n                <div style=\"display:flex; flex-direction:column; align-items:center; gap:2px; width:15px;\">\n                  <div style=\"font-size:9.5px;\">3</div>\n                  <div style=\"width:8px; background:#1c1c1a; height: 5px;\"></div>\n                </div>\n              \n                <div style=\"display:flex; flex-direction:column; align-items:center; gap:2px; width:15px;\">\n                  <div style=\"font-size:9.5px;\">10</div>\n                  <div style=\"width:8px; background:#1c1c1a; height: 18px;\"></div>\n                </div>\n              \n                <div style=\"display:flex; flex-direction:column; align-items:center; gap:2px; width:15px;\">\n                  <div style=\"font-size:9.5px;\">12</div>\n                  <div style=\"width:8px; background:#1c1c1a; height: 21px;\"></div>\n                </div>\n              \n            ",
      "depth": 0
    },
    {
      "field": "meterNumber",
      "id": "elec-meter-number",
      "xpath": "//*[@id='elec-meter-number']",
      "value": "00000000",
      "depth": 0
    },
    {
      "field": "meterMultiplier",
      "id": "elec-meter-multiplier",
      "xpath": "//*[@id='elec-meter-multiplier']",
      "value": "1",
      "depth": 0
    },
    {
      "field": "previousReading",
      "id": "elec-previous-reading",
      "xpath": "//*[@id='elec-previous-reading']",
      "value": "1000",
      "depth": 0
    },
    {
      "field": "currentReading",
      "id": "elec-current-reading",
      "xpath": "//*[@id='elec-current-reading']",
      "value": "1758",
      "depth": 0
    },
    {
      "field": "govtReliefBalance",
      "id": "elec-govt-relief",
      "xpath": "//*[@id='elec-govt-relief']",
      "value": "$0.00",
      "depth": 0
    },
    {
      "field": "govtSubsidyBalance",
      "id": "elec-govt-subsidy",
      "xpath": "//*[@id='elec-govt-subsidy']",
      "value": "$0.00",
      "depth": 0
    },
    {
      "field": "stubAccountNumber",
      "id": "elec-stub-account",
      "xpath": "//*[@id='elec-stub-account']",
      "value": "0000-0000-0000",
      "depth": 0
    },
    {
      "field": "stubTotalDue",
      "id": "elec-stub-total",
      "xpath": "//*[@id='elec-stub-total']",
      "value": "$1,096.00",
      "depth": 0
    },
    {
      "field": "ocrLine",
      "id": "elec-ocr-line",
      "xpath": "//*[@id='elec-ocr-line']",
      "value": "000000000000⌡ 0000109600⌐ 00Y 0⌡",
      "depth": 0
    },
    {
      "field": "co2PerUnit",
      "id": "elec-co2",
      "xpath": "//*[@id='elec-co2']",
      "value": "0.50 千克",
      "depth": 0
    }
  ]
}