|
|
<!doctype html> |
|
|
<html lang="ja"> |
|
|
<meta charset="utf-8"> |
|
|
<title>かんたん請求書作成</title> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1"> |
|
|
<style> |
|
|
body{font-family:system-ui,-apple-system,"Noto Sans JP",sans-serif;margin:24px} |
|
|
h1{font-size:28px;margin-bottom:12px} |
|
|
.row{display:flex;gap:16px;flex-wrap:wrap} |
|
|
.card{border:1px solid #e5e7eb;border-radius:14px;padding:16px;flex:1;min-width:320px;background:#fff} |
|
|
label{display:block;font-size:12px;color:#374151;margin-top:8px} |
|
|
input,textarea{width:100%;padding:10px;border:1px solid #d1d5db;border-radius:8px} |
|
|
table{width:100%;border-collapse:collapse} |
|
|
th,td{border-bottom:1px solid #eee;padding:8px;text-align:left} |
|
|
.btn{padding:10px 14px;border-radius:8px;border:1px solid #0ea5e9;background:#0ea5e9;color:#fff;cursor:pointer} |
|
|
.btn.secondary{background:#fff;color:#0ea5e9} |
|
|
.muted{color:#6b7280;font-size:12px} |
|
|
.right{ text-align:right } |
|
|
</style> |
|
|
<body> |
|
|
<h1>かんたん請求書作成</h1> |
|
|
<div style="margin-bottom:10px"> |
|
|
API Key <input id="apiKey" style="width:160px" placeholder="dev"> <button class="btn secondary" id="saveKey">保存</button> |
|
|
<span class="muted" style="margin-left:8px">※ /docs の Authorize と同じキーです（既定: dev）</span> |
|
|
</div> |
|
|
|
|
|
<div class="row"> |
|
|
<div class="card" style="max-width:520px"> |
|
|
<h3>顧客</h3> |
|
|
<label>既存顧客を検索</label> |
|
|
<input id="q" placeholder="社名・メール・電話"> |
|
|
<div style="margin-top:6px"><button class="btn secondary" id="refresh">一覧更新</button></div> |
|
|
<div id="custErr" class="muted" style="margin-top:6px;color:#ef4444"></div> |
|
|
<div style="max-height:180px;overflow:auto;margin-top:6px;border:1px solid #eee;border-radius:8px"> |
|
|
<table> |
|
|
<thead><tr><th>ID</th><th>社名</th><th>連絡先</th><th></th></tr></thead> |
|
|
<tbody id="custTb"></tbody> |
|
|
</table> |
|
|
</div> |
|
|
|
|
|
<div class="muted" style="margin-top:12px">新規作成する場合はこちらに入力</div> |
|
|
<label>会社名*</label><input id="c_name"> |
|
|
<label>メール</label><input id="c_email"> |
|
|
<label>電話</label><input id="c_phone"> |
|
|
<label>住所</label><input id="c_addr"> |
|
|
<div class="row"> |
|
|
<div style="flex:1"><label>市区町村</label><input id="c_city"></div> |
|
|
<div style="flex:1"><label>国</label><input id="c_country" placeholder="JP"></div> |
|
|
</div> |
|
|
<div class="muted" style="margin-top:6px">※ 既存顧客をクリックすると上記 <code>customer_id</code> として選択されます。</div> |
|
|
<div id="chosen" class="muted" style="margin-top:6px">選択中の customer_id: <b id="cid">（未選択）</b></div> |
|
|
</div> |
|
|
|
|
|
<div class="card"> |
|
|
<h3>明細</h3> |
|
|
<table> |
|
|
<thead><tr><th>内容</th><th class="right">数量</th><th class="right">単価</th><th class="right">税率</th><th></th></tr></thead> |
|
|
<tbody id="items"></tbody> |
|
|
</table> |
|
|
<div style="margin-top:6px"><button class="btn secondary" id="add">＋ 行を追加</button></div> |
|
|
|
|
|
<div class="row" style="margin-top:16px"> |
|
|
<div class="card" style="min-width:280px"> |
|
|
<h4>請求情報</h4> |
|
|
<label>支払期日</label><input type="date" id="due"> |
|
|
<label>備考</label><textarea id="notes" rows="4" placeholder="いつもお世話になっております…"></textarea> |
|
|
<div style="margin-top:10px;display:flex;gap:8px;flex-wrap:wrap"> |
|
|
<button class="btn" id="btnCreate">一括で作成</button> |
|
|
<button class="btn secondary" id="btnAi">AI文面（件名＋本文）</button> |
|
|
</div> |
|
|
<div id="msg" class="muted" style="margin-top:8px;color:#ef4444"></div> |
|
|
</div> |
|
|
|
|
|
<div class="card" style="min-width:260px"> |
|
|
<h4>合計</h4> |
|
|
<div>小計 <span id="sub" class="right" style="float:right">0</span></div> |
|
|
<div>税額 <span id="tax" class="right" style="float:right">0</span></div> |
|
|
<div style="font-weight:700">合計 <span id="tot" class="right" style="float:right">0</span></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="muted" style="margin-top:8px"> |
|
|
作成後：PDFダウンロードは <code>GET /invoices/{id}/pdf</code>、メール送信は <code>POST /invoices/{id}/email</code>。 |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
const BASE = location.origin; |
|
|
const LSKEY = "mini_invoice_api_key"; |
|
|
|
|
|
const apiKeyEl = document.getElementById('apiKey'); |
|
|
apiKeyEl.value = localStorage.getItem(LSKEY) || "dev"; |
|
|
document.getElementById('saveKey').onclick = () => { |
|
|
localStorage.setItem(LSKEY, apiKeyEl.value.trim()); |
|
|
alert("API Key を保存しました"); |
|
|
loadCustomers(); |
|
|
}; |
|
|
|
|
|
const headers = () => ({ |
|
|
"Content-Type": "application/json", |
|
|
"X-API-Key": (localStorage.getItem(LSKEY) || "dev") |
|
|
}); |
|
|
|
|
|
|
|
|
const fmtDate = (s) => { |
|
|
if (!s) return null; |
|
|
const t = String(s).trim().replace(/\//g,"-"); |
|
|
const d = new Date(t); |
|
|
if (isNaN(d)) return null; |
|
|
return d.toISOString().slice(0,10); |
|
|
}; |
|
|
|
|
|
let selectedCustomerId = null; |
|
|
const cidEl = document.getElementById('cid'); |
|
|
const msgEl = document.getElementById('msg'); |
|
|
|
|
|
function rowItem(desc="", qty=1, price=0, tax=0.1){ |
|
|
const tr = document.createElement('tr'); |
|
|
tr.innerHTML = ` |
|
|
<td><input class="d" value="${desc}"></td> |
|
|
<td class="right"><input class="q" type="number" step="0.01" value="${qty}" style="width:90px"></td> |
|
|
<td class="right"><input class="p" type="number" step="1" value="${price}" style="width:110px"></td> |
|
|
<td class="right"><input class="t" type="number" step="0.01" value="${tax}" style="width:90px"></td> |
|
|
<td><button class="btn secondary del">×</button></td> |
|
|
`; |
|
|
tr.querySelector('.del').onclick = () => { tr.remove(); recalc(); }; |
|
|
return tr; |
|
|
} |
|
|
|
|
|
function recalc(){ |
|
|
const rows = [...document.querySelectorAll('#items tr')]; |
|
|
let sub = 0, tax = 0; |
|
|
rows.forEach(r=>{ |
|
|
const q = parseFloat(r.querySelector('.q').value || 0); |
|
|
const p = parseFloat(r.querySelector('.p').value || 0); |
|
|
const t = parseFloat(r.querySelector('.t').value || 0); |
|
|
const line = q*p; sub += line; tax += line*t; |
|
|
}); |
|
|
document.getElementById('sub').innerText = Math.round(sub).toLocaleString(); |
|
|
document.getElementById('tax').innerText = Math.round(tax).toLocaleString(); |
|
|
document.getElementById('tot').innerText = Math.round(sub+tax).toLocaleString(); |
|
|
} |
|
|
|
|
|
document.getElementById('add').onclick = ()=>{ |
|
|
const tr = rowItem("Webサイト制作一式", 1, 300000, 0.1); |
|
|
document.getElementById('items').append(tr); |
|
|
recalc(); |
|
|
}; |
|
|
document.getElementById('add').click(); |
|
|
|
|
|
async function loadCustomers(){ |
|
|
const q = document.getElementById('q').value.trim(); |
|
|
const url = new URL(BASE + "/customers"); |
|
|
if(q) url.searchParams.set("q", q); |
|
|
const res = await fetch(url, {headers:headers()}); |
|
|
const tb = document.getElementById('custTb'); tb.innerHTML=""; |
|
|
if(!res.ok){ |
|
|
document.getElementById('custErr').innerText = "読み込みエラー: " + (await res.text()); |
|
|
return; |
|
|
} |
|
|
document.getElementById('custErr').innerText = ""; |
|
|
const js = await res.json(); |
|
|
(js.data||[]).forEach(c=>{ |
|
|
const tr = document.createElement('tr'); |
|
|
tr.innerHTML = `<td>${c.id}</td><td>${c.name}</td><td>${[c.email,c.phone].filter(Boolean).join(" / ")}</td><td><button class="btn secondary">選択</button></td>`; |
|
|
tr.querySelector('button').onclick = ()=>{ |
|
|
selectedCustomerId = c.id; cidEl.innerText = c.id; |
|
|
document.getElementById('c_name').value = c.name||""; |
|
|
document.getElementById('c_email').value = c.email||""; |
|
|
document.getElementById('c_phone').value = c.phone||""; |
|
|
document.getElementById('c_addr').value = c.address||""; |
|
|
document.getElementById('c_city').value = c.city||""; |
|
|
document.getElementById('c_country').value = c.country||""; |
|
|
}; |
|
|
tb.append(tr); |
|
|
}); |
|
|
} |
|
|
document.getElementById('refresh').onclick = loadCustomers; |
|
|
loadCustomers(); |
|
|
|
|
|
|
|
|
document.getElementById('btnCreate').onclick = async ()=>{ |
|
|
msgEl.style.color = "#ef4444"; |
|
|
const items = [...document.querySelectorAll('#items tr')].map(r=>({ |
|
|
description: r.querySelector('.d').value, |
|
|
quantity: parseFloat(r.querySelector('.q').value||0), |
|
|
unit_price: parseFloat(r.querySelector('.p').value||0), |
|
|
tax_rate: parseFloat(r.querySelector('.t').value||0), |
|
|
})); |
|
|
const cust = selectedCustomerId ? {id:selectedCustomerId} : { |
|
|
name: document.getElementById('c_name').value||null, |
|
|
email: document.getElementById('c_email').value||null, |
|
|
phone: document.getElementById('c_phone').value||null, |
|
|
address: document.getElementById('c_addr').value||null, |
|
|
city: document.getElementById('c_city').value||null, |
|
|
country: document.getElementById('c_country').value||null, |
|
|
}; |
|
|
const payload = { |
|
|
customer: cust, |
|
|
due_date: fmtDate(document.getElementById('due').value), |
|
|
notes: document.getElementById('notes').value || null, |
|
|
items |
|
|
}; |
|
|
const res = await fetch(BASE + "/wizard/invoice", { |
|
|
method:"POST", headers: headers(), body: JSON.stringify(payload) |
|
|
}); |
|
|
if(!res.ok){ |
|
|
const t = await res.text(); |
|
|
msgEl.innerText = "作成に失敗: " + t; |
|
|
return; |
|
|
} |
|
|
const js = await res.json(); |
|
|
msgEl.style.color = "#16a34a"; |
|
|
msgEl.innerText = `作成成功！ invoice_id=${js.invoice_id} / 合計=${js.totals.total}`; |
|
|
}; |
|
|
|
|
|
|
|
|
document.getElementById('btnAi').onclick = async ()=>{ |
|
|
msgEl.style.color = "#ef4444"; |
|
|
const company_name = document.getElementById('c_name').value || "（社名）"; |
|
|
const customer_name = company_name + " 御中"; |
|
|
const items = [...document.querySelectorAll('#items tr')].map(r=>({ |
|
|
description: r.querySelector('.d').value, |
|
|
quantity: parseFloat(r.querySelector('.q').value||0), |
|
|
unit_price: parseFloat(r.querySelector('.p').value||0), |
|
|
tax_rate: parseFloat(r.querySelector('.t').value||0), |
|
|
})); |
|
|
const due = fmtDate(document.getElementById('due').value); |
|
|
const res = await fetch(BASE + "/ai/generate-email", { |
|
|
method:"POST", headers: headers(), |
|
|
body: JSON.stringify({ kind:"invoice", company_name, customer_name, language:"ja", items, due_date: due, tone:"polite" }) |
|
|
}); |
|
|
if(!res.ok){ msgEl.innerText = "AI文面生成に失敗しました: " + await res.text(); return; } |
|
|
const js = await res.json(); |
|
|
alert(js.email); |
|
|
}; |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
