Spaces:

Corin1998
/

Invoice

Sleeping

App Files Files Community

Corin1998 commited on Aug 23, 2025

Commit

05d2672

verified ·

1 Parent(s): a5eb452

Update static/app.html

Browse files

Files changed (1) hide show

static/app.html +332 -305

static/app.html CHANGED Viewed

@@ -1,331 +1,358 @@
 <!doctype html>
 <html lang="ja">
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>Mini Invoice/Estimate SaaS</title>
-  <script>
-    const BASE = location.origin;
-    let API_KEY = localStorage.getItem("X_API_Key") || "dev";
-    async function api(path, method="GET", body=null) {
-      const res = await fetch(`${BASE}${path}`, {
-        method,
-        headers: {
-          "X-API-Key": API_KEY,
-          "Content-Type": "application/json"
-        },
-        body: body ? JSON.stringify(body) : null
-      });
-      if (!res.ok) {
-        const txt = await res.text();
-        throw new Error(`${res.status} ${txt}`);
-      }
-      const ct = res.headers.get("content-type") || "";
-      return ct.includes("application/json") ? res.json() : res.text();
-    }
-    function saveKey() {
-      API_KEY = document.querySelector("#api_key").value || "dev";
-      localStorage.setItem("X_API_Key", API_KEY);
-      log("X-API-Key を設定: " + API_KEY);
-    }
-    // ---- Customers ----
-    async function createCustomer() {
-      const name  = document.querySelector("#c_name").value;
-      const email = document.querySelector("#c_email").value;
-      const phone = document.querySelector("#c_phone").value;
-      const address = document.querySelector("#c_addr").value;
-      const city = document.querySelector("#c_city").value;
-      const country = document.querySelector("#c_country").value;
-      const r = await api("/customers", "POST", {name, email, phone, address, city, country});
-      document.querySelector("#customer_id").value = r.id;
-      log("顧客作成 OK: id=" + r.id);
-      await searchCustomers(); // 反映
-    }
-    async function searchCustomers() {
-      const q = document.querySelector("#c_query").value;
-      const url = q ? `/customers?q=${encodeURIComponent(q)}` : "/customers";
-      const r = await api(url, "GET");
-      const tbody = document.querySelector("#customers_tbody");
-      tbody.innerHTML = "";
-      for (const c of r.data || []) {
-        const tr = document.createElement("tr");
-        tr.innerHTML = `
-          <td>${c.id}</td>
-          <td>${c.name || ""}</td>
-          <td>${c.email || ""}</td>
-          <td>${c.phone || ""}</td>
-          <td><button data-id="${c.id}">選択</button></td>`;
-        tr.querySelector("button").onclick = () => {
-          document.querySelector("#customer_id").value = c.id;
-          log("顧客を選択: id=" + c.id);
-        };
-        tbody.appendChild(tr);
-      }
-    }
-    // ---- Quotes ----
-    async function createQuote() {
-      const customer_id = +document.querySelector("#customer_id").value;
-      const valid_until = document.querySelector("#q_valid").value || null;
-      const notes = document.querySelector("#q_notes").value || null;
-      const q = await api("/quotes", "POST", {customer_id, valid_until, notes});
-      document.querySelector("#quote_id").value = q.id;
-      log("見積作成 OK: id=" + q.id);
-    }
-    async function addQuoteItem() {
-      const id = +document.querySelector("#quote_id").value;
-      const description = document.querySelector("#qit_desc").value;
-      const quantity = parseFloat(document.querySelector("#qit_qty").value || "1");
-      const unit_price = parseFloat(document.querySelector("#qit_price").value || "0");
-      const tax_rate = parseFloat(document.querySelector("#qit_tax").value || "0");
-      await api(`/quotes/${id}/items`, "POST", {description, quantity, unit_price, tax_rate});
-      log("見積 明細追加 OK");
-    }
-    // ---- Invoices ----
-    async function createInvoice() {
-      const customer_id = +document.querySelector("#customer_id").value;
-      const due_date = document.querySelector("#i_due").value || null;
-      const notes = document.querySelector("#i_notes").value || null;
-      const quote_id = document.querySelector("#quote_to_copy").value ? +document.querySelector("#quote_to_copy").value : null;
-      const payload = {customer_id, due_date, notes};
-      if (quote_id) payload.quote_id = quote_id; // 見積→請求 変換
-      const r = await api("/invoices", "POST", payload);
-      document.querySelector("#invoice_id").value = r.id;
-      log("請求書作成 OK: id=" + r.id + (quote_id ? "（見積コピーあり）" : ""));
-    }
-    async function addInvoiceItem() {
-      const id = +document.querySelector("#invoice_id").value;
-      const description = document.querySelector("#it_desc").value;
-      const quantity = parseFloat(document.querySelector("#it_qty").value || "1");
-      const unit_price = parseFloat(document.querySelector("#it_price").value || "0");
-      const tax_rate = parseFloat(document.querySelector("#it_tax").value || "0");
-      await api(`/invoices/${id}/items`, "POST", {description, quantity, unit_price, tax_rate});
-      log("請求 明細追加 OK");
-    }
-    async function viewInvoice() {
-      const id = +document.querySelector("#invoice_id").value;
-      const r = await api(`/invoices/${id}`, "GET");
-      document.querySelector("#totals").textContent =
-        `小計: ${r.totals.subtotal} / 税額: ${r.totals.tax} / 合計: ${r.totals.total}`;
-      log("請求書取得 OK");
-      return r;
     }
-    async function markPaid() {
-      const id = +document.querySelector("#invoice_id").value;
-      const paid_amount = parseFloat(document.querySelector("#paid_amount").value || "0");
-      const payment_method = document.querySelector("#paid_method").value || "bank_transfer";
-      const r = await api(`/invoices/${id}/pay`, "POST", {paid_amount, payment_method});
-      log("入金登録 OK: " + JSON.stringify(r.invoice));
-    }
-    function downloadPDF() {
-      const id = +document.querySelector("#invoice_id").value;
-      const url = `${BASE}/invoices/${id}/pdf`;
-      fetch(url, { headers: { "X-API-Key": API_KEY }})
-        .then(res => {
-          if (!res.ok) throw new Error("PDF生成に失���");
-          return res.blob();
-        })
-        .then(blob => {
-          const a = document.createElement("a");
-          a.href = URL.createObjectURL(blob);
-          a.download = `invoice_${id}.pdf`;
-          a.click();
-        }).catch(e => log("PDF失敗: " + e.message));
-    }
-    async function sendEmail() {
-      const id = +document.querySelector("#invoice_id").value;
-      const to = document.querySelector("#m_to").value;
-      const subject = document.querySelector("#m_subject").value;
-      const body = document.querySelector("#m_body").value;
-      const r = await api(`/invoices/${id}/email`, "POST", {to, subject, body, attach_pdf: true});
-      log("メール送信: " + (r.ok ? "OK" : "NG") + " / " + r.detail);
-    }
-    // ---- AI 文面生成（/ai/generate-email）----
-    async function generateAIEmail() {
-      const id = +document.querySelector("#invoice_id").value;
-      if (!id) {
-        log("先に請求書を作成し、invoice_id を入力してください");
-        return;
-      }
-      const detail = await viewInvoice(); // invoice, items, totals を取得
-      const invoice = detail.invoice;
-      const items = (detail.items || []).map(it => ({
-        description: it.description,
-        quantity: it.quantity,
-        unit_price: it.unit_price,
-        tax_rate: it.tax_rate
-      }));
-      // 顧客名を取得（請求先の見栄え強化）
-      let customerName = `Customer #${invoice.customer_id}`;
-      try {
-        const custList = await api(`/customers?q=${invoice.customer_id}`, "GET");
-        const hit = (custList.data || []).find(c => c.id === invoice.customer_id);
-        if (hit && hit.name) customerName = hit.name + " 御中";
-      } catch {}
-      const payload = {
         kind: "invoice",
-        company_name: "HitC Inc.",
-        customer_name: customerName,
         language: "ja",
         tone: "polite",
-        due_date: invoice.due_date || null,
-        notes: invoice.notes || null,
-        items
       };
-      try {
-        const res = await api("/ai/generate-email", "POST", payload);
-        // モデルは「件名と本文」を返すよう実装済み
-        // ヒューリスティックで件名/本文に分割
-        const txt = res.email || "";
-        const m = txt.match(/^(?:件名|Subject)[:：]\s*(.+)\n([\s\S]*)$/m);
-        if (m) {
-          document.querySelector("#m_subject").value = m[1].trim();
-          document.querySelector("#m_body").value = m[2].trim();
-        } else {
-          document.querySelector("#m_subject").value = "ご請求書送付の件";
-          document.querySelector("#m_body").value = txt;
-        }
-        log("AI 文面生成 OK");
-      } catch (e) {
-        log("AI 文面生成に失敗: " + e.message);
       }
-    }
-    function log(msg) {
-      const el = document.querySelector("#log");
-      el.textContent = `[${new Date().toLocaleTimeString()}] ${msg}\n` + el.textContent;
-    }
-    window.addEventListener("load", () => {
-      document.querySelector("#api_key").value = API_KEY;
-      searchCustomers().catch(()=>{});
-    });
-  </script>
-  <style>
-    body { font-family: system-ui, sans-serif; margin: 16px; }
-    fieldset { border: 1px solid #ddd; padding: 12px; margin-bottom: 12px; }
-    legend { padding: 0 6px; }
-    label { display:block; margin-top:6px; }
-    input, textarea { width: 100%; padding: 6px; }
-    button { margin-top: 8px; padding: 6px 10px; }
-    table { width:100%; border-collapse: collapse; margin-top: 6px; }
-    th, td { border:1px solid #eee; padding:6px; }
-    th { background:#fafafa; }
-    #log { white-space: pre-wrap; border:1px solid #eee; padding:8px; min-height:80px; }
-    .row { display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
-    @media (max-width: 800px){ .row { grid-template-columns: 1fr; } }
-  </style>
-</head>
-<body>
-  <h1>Mini Invoice/Estimate SaaS</h1>
-  <fieldset>
-    <legend>設定</legend>
-    <label> X-API-Key <input id="api_key" placeholder="dev"/></label>
-    <button onclick="saveKey()">保存</button>
-    <div>UI: <code>/app</code> / API例: <code>/invoices</code> / AI: <code>/ai/generate-email</code></div>
-  </fieldset>
-  <div class="row">
-    <fieldset>
-      <legend>顧客（作成）</legend>
-      <label>会社名 <input id="c_name" /></label>
-      <label>メール <input id="c_email" /></label>
-      <label>電話 <input id="c_phone" /></label>
-      <label>住所 <input id="c_addr" /></label>
-      <label>市区町村 <input id="c_city" /></label>
-      <label>国 <input id="c_country" value="JP" /></label>
-      <button onclick="createCustomer()">顧客を作成</button>
-      <label>customer_id <input id="customer_id" placeholder="自動セット"/></label>
-    </fieldset>
-    <fieldset>
-      <legend>顧客（一覧/検索）</legend>
-      <label>キーワード <input id="c_query" placeholder="社名/メール/電話"/></label>
-      <button onclick="searchCustomers()">検索</button>
-      <table>
-        <thead><tr><th>ID</th><th>名称</th><th>メール</th><th>電話</th><th>操作</th></tr></thead>
-        <tbody id="customers_tbody"></tbody>
-      </table>
-    </fieldset>
-  </div>
-  <div class="row">
-    <fieldset>
-      <legend>見積</legend>
-      <label>有効期限(yyyy-mm-dd) <input id="q_valid" /></label>
-      <label>備考 <input id="q_notes" /></label>
-      <button onclick="createQuote()">見積を作成</button>
-      <label>quote_id <input id="quote_id" placeholder="自動セット"/></label>
-      <h4>見積 明細</h4>
-      <label>内容 <input id="qit_desc" /></label>
-      <label>数量 <input id="qit_qty" value="1" /></label>
-      <label>単価 <input id="qit_price" value="0" /></label>
-      <label>税率(例 0.1) <input id="qit_tax" value="0.1" /></label>
-      <button onclick="addQuoteItem()">見積 明細を追加</button>
-    </fieldset>
-    <fieldset>
-      <legend>請求書</legend>
-      <label>支払期日(yyyy-mm-dd) <input id="i_due" /></label>
-      <label>備考 <input id="i_notes" /></label>
-      <label>見積IDからコピー（任意） <input id="quote_to_copy" placeholder="例: 1"/></label>
-      <button onclick="createInvoice()">請求書を作成</button>
-      <label>invoice_id <input id="invoice_id" placeholder="自動セット"/></label>
-      <h4>請求 明細</h4>
-      <label>内容 <input id="it_desc" /></label>
-      <label>数量 <input id="it_qty" value="1" /></label>
-      <label>単価 <input id="it_price" value="0" /></label>
-      <label>税率(例 0.1) <input id="it_tax" value="0.1" /></label>
-      <button onclick="addInvoiceItem()">請求 明細を追加</button>
-      <button onclick="viewInvoice()">合計を表示</button>
-      <div id="totals" style="margin-top:6px;color:#0a0"></div>
-    </fieldset>
-  </div>
-  <div class="row">
-    <fieldset>
-      <legend>入金登録</legend>
-      <label>受取金額 <input id="paid_amount" value="0" /></label>
-      <label>方法 <input id="paid_method" value="bank_transfer" /></label>
-      <button onclick="markPaid()">入金反映</button>
-    </fieldset>
-    <fieldset>
-      <legend>PDF / メール</legend>
-      <button onclick="downloadPDF()">PDFダウンロード</button>
-      <hr/>
-      <label>宛先(To) <input id="m_to" /></label>
-      <label>件名 <input id="m_subject" value="ご請求書送付の件" /></label>
-      <label>本文 <textarea id="m_body" rows="8">いつもお世話になっております。ご請求書をお送りします。ご確認をお願いいたします。</textarea></label>
-      <div style="display:flex; gap:8px; flex-wrap:wrap;">
-        <button onclick="generateAIEmail()">AIで文面作成</button>
-        <button onclick="sendEmail()">メール送信（PDF添付）</button>
-      </div>
-      <div style="color:#888; margin-top:6px;">※ SMTP が未設定の場合は送信スキップ（詳細はレスポンスに表示）</div>
-    </fieldset>
-  </div>
-  <fieldset>
-    <legend>ログ</legend>
-    <div id="log"></div>
-  </fieldset>
 </body>
 </html>

 <!doctype html>
 <html lang="ja">
+<meta charset="utf-8" />
+<title>Mini Invoice/Estimate SaaS</title>
+<meta name="viewport" content="width=device-width,initial-scale=1" />
+<style>
+  :root { --gap:12px }
+  body { font-family: system-ui, sans-serif; margin: 24px; line-height: 1.5; }
+  h1 { margin: 0 0 8px }
+  .row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
+  .card { border: 1px solid #ddd; border-radius: 12px; padding: 16px; margin: 0 0 var(--gap); }
+  label { display:block; font-size: 12px; color:#555; margin:8px 0 4px }
+  input, textarea, select { width: 100%; padding: 10px; border:1px solid #ccc; border-radius:8px; font: inherit; }
+  button { padding: 10px 14px; border: 0; border-radius: 10px; background:#155EEF; color:#fff; cursor:pointer; }
+  button.secondary { background:#666; }
+  .ok { color: #0a7; font-weight: bold; }
+  .err { color: #c33; white-space: pre-wrap; }
+  .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
+  .grid-3 { display:grid; grid-template-columns: 1fr 1fr 1fr; gap:var(--gap) }
+  .muted { color:#666; font-size:12px }
+  .table { width:100%; border-collapse: collapse; }
+  .table th,.table td { border:1px solid #eee; padding:6px 8px; text-align:left }
+  .flex { display:flex; gap:8px; align-items:center }
+</style>
+<body>
+  <h1>Mini Invoice/Estimate SaaS</h1>
+  <p class="muted">同一オリジンの API を呼びます。最初に X-API-Key を設定してください（デフォルト <code>dev</code>）。</p>
+  <!-- 設定 -->
+  <div class="card">
+    <h3>設定</h3>
+    <div class="row">
+      <div>
+        <label>API Base URL</label>
+        <input id="base" placeholder="例: （空なら同一オリジン）" />
+      </div>
+      <div>
+        <label>X-API-Key</label>
+        <input id="apikey" value="dev" />
+      </div>
+    </div>
+    <div class="flex">
+      <button onclick="saveCfg()">保存</button>
+      <span id="cfg_msg" class="muted"></span>
+      <a href="/docs" target="_blank" class="muted">/docs を開く →</a>
+    </div>
+  </div>
+  <!-- 顧客 -->
+  <div class="card">
+    <h3>顧客</h3>
+    <div class="grid-3">
+      <div><label>会社名</label><input id="c_name" /></div>
+      <div><label>メール</label><input id="c_email" /></div>
+      <div><label>電話</label><input id="c_phone" /></div>
+    </div>
+    <div class="row">
+      <div><label>住所</label><input id="c_addr" /></div>
+      <div class="grid-3">
+        <div><label>市区町村</label><input id="c_city" /></div>
+        <div><label>国</label><input id="c_country" value="JP" /></div>
+        <div style="display:flex;align-items:end"><button onclick="createCustomer()">顧客を作成</button></div>
+      </div>
+    </div>
+    <div class="row">
+      <div>
+        <div class="flex">
+          <label style="margin:0">検索</label>
+          <input id="c_q" placeholder="name/email/phone を含む" />
+          <button class="secondary" onclick="searchCustomers()">検索</button>
+        </div>
+        <table class="table" id="c_table"></table>
+      </div>
+      <div>
+        <label>選択中 customer_id</label>
+        <input id="customer_id" class="mono" readonly />
+      </div>
+    </div>
+    <div id="c_msg" class="muted"></div>
+  </div>
+  <!-- 請求 -->
+  <div class="card">
+    <h3>請求書</h3>
+    <div class="row">
+      <div>
+        <label>支払期日 (YYYY-MM-DD)</label><input id="inv_due" placeholder="例: 2025-09-30" />
+      </div>
+      <div>
+        <label>備考</label><input id="inv_notes" />
+      </div>
+    </div>
+    <div class="row">
+      <div>
+        <label>見積IDからコピー (任意)</label><input id="inv_from_quote" class="mono" placeholder="quote_id" />
+      </div>
+      <div style="display:flex;align-items:end"><button onclick="createInvoice()">請求書を作成</button></div>
+    </div>
+    <div class="row">
+      <div>
+        <label>invoice_id</label><input id="invoice_id" class="mono" readonly />
+      </div>
+      <div id="inv_msg" class="muted"></div>
+    </div>
+  </div>
+  <!-- 明細 -->
+  <div class="card">
+    <h3>明細</h3>
+    <div class="grid-3">
+      <div><label>内容</label><input id="it_desc" /></div>
+      <div><label>数量</label><input id="it_qty" type="number" step="0.01" value="1" /></div>
+      <div><label>単価</label><input id="it_price" type="number" step="0.01" value="300000" /></div>
+    </div>
+    <div class="row">
+      <div><label>税率(例 0.1)</label><input id="it_tax" type="number" step="0.01" value="0.1" /></div>
+      <div style="display:flex;align-items:end"><button onclick="addItem()">請求 明細を追加</button></div>
+    </div>
+    <div class="row">
+      <div style="display:flex;gap:8px;align-items:center">
+        <button class="secondary" onclick="fetchTotals()">合計を表示</button>
+        <span id="totals" class="mono"></span>
+      </div>
+    </div>
+    <div id="it_msg" class="muted"></div>
+  </div>
+  <!-- 送付 -->
+  <div class="card">
+    <h3>送付（PDF・メール）</h3>
+    <div class="row">
+      <div class="flex">
+        <button class="secondary" onclick="downloadPDF()">PDFダウンロード</button>
+        <span id="pdf_msg" class="muted"></span>
+      </div>
+    </div>
+    <div class="row">
+      <div><label>宛先</label><input id="m_to" placeholder="you@example.com" /></div>
+      <div><label>件名</label><input id="m_subj" /></div>
+    </div>
+    <div>
+      <div class="flex" style="justify-content:space-between">
+        <label>本文</label>
+        <button class="secondary" onclick="aiEmail()">AIで文面作成</button>
+      </div>
+      <textarea id="m_body" rows="6"></textarea>
+    </div>
+    <div class="flex">
+      <button onclick="sendMail()">メール送信</button>
+      <span class="muted">※ SMTP未設定なら「send skipped」になります</span>
+    </div>
+    <div id="mail_msg" class="muted"></div>
+  </div>
+  <!-- 入金 -->
+  <div class="card">
+    <h3>入金処理</h3>
+    <div class="row">
+      <div><label>受領金額</label><input id="p_amount" type="number" step="0.01" /></div>
+      <div><label>受領日 (空=今)</label><input id="p_date" placeholder="YYYY-MM-DDTHH:MM:SS" /></div>
+    </div>
+    <div class="flex">
+      <button onclick="pay()">入金反映</button>
+      <span id="pay_msg" class="muted"></span>
+    </div>
+  </div>
+<script>
+  // ------- 設定の保存/読込 -------
+  const S = {
+    get base(){ return localStorage.getItem("base") || "" },
+    set base(v){ localStorage.setItem("base", v||"") },
+    get key(){ return localStorage.getItem("apikey") || "dev" },
+    set key(v){ localStorage.setItem("apikey", v||"") },
+  };
+  function el(id){ return document.getElementById(id) }
+  function saveCfg(){
+    S.base = el("base").value.trim();
+    S.key = el("apikey").value.trim() || "dev";
+    el("cfg_msg").textContent = "保存しました";
+    setTimeout(()=>el("cfg_msg").textContent="", 1500);
+  }
+  // UI初期化
+  (function(){
+    el("base").value = S.base;
+    el("apikey").value = S.key;
+  })();
+  function url(p){ return (S.base ? S.base.replace(/\/$/,"") : "") + p }
+  async function api(p, opt={}){
+    const headers = Object.assign({"Content-Type":"application/json","X-API-Key": S.key}, opt.headers||{});
+    const res = await fetch(url(p), Object.assign(opt,{headers}));
+    if(!res.ok){
+      const t = await res.text();
+      throw new Error(`HTTP ${res.status}: ${t}`);
     }
+    // pdf は blob, それ以外は json
+    if (p.endsWith("/pdf")) return await res.blob();
+    return await res.json();
+  }
+  // ------- 顧客 -------
+  async function createCustomer(){
+    try{
+      const body = {
+        name: el("c_name").value,
+        email: el("c_email").value || null,
+        phone: el("c_phone").value || null,
+        address: el("c_addr").value || null,
+        city: el("c_city").value || null,
+        country: el("c_country").value || null,
+      };
+      const r = await api("/customers",{method:"POST",body:JSON.stringify(body)});
+      el("customer_id").value = r.id;
+      el("c_msg").innerHTML = `<span class="ok">作成しました (id=${r.id})</span>`;
+    }catch(e){ el("c_msg").innerHTML = `<span class="err">${e.message}</span>`; }
+  }
+  async function searchCustomers(){
+    try{
+      const q = el("c_q").value.trim();
+      const r = await api(`/customers${q?`?q=${encodeURIComponent(q)}`:""}`);
+      const rows = r.data || [];
+      const tbl = [["ID","会社名","メール","電話"]];
+      rows.forEach(x=>tbl.push([x.id, x.name||"", x.email||"", x.phone||""]));
+      el("c_table").innerHTML = tbl.map((row,i)=>`<tr>${row.map((c,j)=>`<${i? "td":"th"}>${c}</${i? "td":"th"}>`).join("")}</tr>`).join("");
+      // 行クリックで選択
+      [...el("c_table").querySelectorAll("tr")].forEach((tr,i)=>{
+        if(!i) return;
+        tr.style.cursor="pointer";
+        tr.onclick = ()=>{ el("customer_id").value = tr.children[0].innerText; };
+      });
+      el("c_msg").textContent = `${rows.length}件`;
+    }catch(e){ el("c_msg").innerHTML = `<span class="err">${e.message}</span>`; }
+  }
+  // ------- 請求 -------
+  async function createInvoice(){
+    try{
+      const customer_id = +el("customer_id").value;
+      if(!customer_id) throw new Error("customer_id を選択してください");
+      const body = {
+        customer_id,
+        due_date: el("inv_due").value || null,
+        notes: el("inv_notes").value || null,
+        quote_id: el("inv_from_quote").value ? +el("inv_from_quote").value : null,
+      };
+      const r = await api("/invoices",{method:"POST",body:JSON.stringify(body)});
+      el("invoice_id").value = r.id;
+      el("inv_msg").innerHTML = `<span class="ok">作成しました (id=${r.id})</span>`;
+    }catch(e){ el("inv_msg").innerHTML = `<span class="err">${e.message}</span>`; }
+  }
+  // ------- 明細 -------
+  async function addItem(){
+    try{
+      const invoice_id = +el("invoice_id").value;
+      if(!invoice_id) throw new Error("invoice_id を先に作成してください");
+      const body = {
+        description: el("it_desc").value,
+        quantity: +el("it_qty").value,
+        unit_price: +el("it_price").value,
+        tax_rate: +el("it_tax").value,
+      };
+      const r = await api(`/invoices/${invoice_id}/items`,{method:"POST",body:JSON.stringify(body)});
+      el("it_msg").innerHTML = `<span class="ok">追加しました (item id=${r.id})</span>`;
+    }catch(e){ el("it_msg").innerHTML = `<span class="err">${e.message}</span>`; }
+  }
+  async function fetchTotals(){
+    try{
+      const id = +el("invoice_id").value;
+      if(!id) throw new Error("invoice_id が未設定です");
+      const r = await api(`/invoices/${id}`);
+      const t = r.totals || {};
+      el("totals").textContent = `小計 ${t.subtotal ?? "-"} / 税 ${t.tax ?? "-"} / 合計 ${t.total ?? "-"}`;
+    }catch(e){ el("it_msg").innerHTML = `<span class="err">${e.message}</span>`; }
+  }
+  // ------- PDF / メール -------
+  async function downloadPDF(){
+    try{
+      const id = +el("invoice_id").value;
+      if(!id) throw new Error("invoice_id が未設定です");
+      const blob = await api(`/invoices/${id}/pdf`);
+      const a = document.createElement("a");
+      a.href = URL.createObjectURL(blob);
+      a.download = `invoice_${id}.pdf`;
+      a.click();
+      URL.revokeObjectURL(a.href);
+      el("pdf_msg").textContent = "PDF をダウンロードしました";
+    }catch(e){ el("pdf_msg").innerHTML = `<span class="err">${e.message}</span>`; }
+  }
+  async function sendMail(){
+    try{
+      const id = +el("invoice_id").value;
+      if(!id) throw new Error("invoice_id が未設定です");
+      const body = {
+        to: el("m_to").value,
+        subject: el("m_subj").value,
+        body: el("m_body").value,
+        attach_pdf: true
+      };
+      const r = await api(`/invoices/${id}/email`,{method:"POST",body:JSON.stringify(body)});
+      el("mail_msg").textContent = r.ok ? `送信: ${r.detail}` : `失敗: ${r.detail}`;
+    }catch(e){ el("mail_msg").innerHTML = `<span class="err">${e.message}</span>`; }
+  }
+  // ------- AI 文面 -------
+  async function aiEmail(){
+    try{
+      const id = +el("invoice_id").value;
+      const custId = +el("customer_id").value;
+      if(!id || !custId) throw new Error("先に 顧客 と 請求書 を作成してください");
+      // 請求の明細と���計を取得
+      const inv = await api(`/invoices/${id}`);
+      const items = inv.items || [];
+      const due = inv.invoice?.due_date || "";
+      const total = inv.totals?.total || "";
+      // 顧客名を取るため一旦顧客検索（簡易）
+      const custList = await api(`/customers?q=`);
+      const target = (custList.data||[]).find(c => c.id === custId);
+      const customer_name = target?.name || "ご担当者様";
+      const reqBody = {
         kind: "invoice",
+        company_name: "貴社",
+        customer_name,
         language: "ja",
+        due_date: due,
         tone: "polite",
+        items: items.map(it => ({
+          description: it.description,
+          quantity: it.quantity,
+          unit_price: it.unit_price,
+          tax_rate: it.tax_rate
+        })),
+        notes: `合計金額: ${total}`
       };
+      const r = await api("/ai/generate-email",{
+        method:"POST",
+        body: JSON.stringify(reqBody)
+      });
+      // 返却は {email: "..."}（件名と本文が含まれる想定）
+      const txt = r.email || "";
+      // ざっくり件名/本文を分離（"Subject:" を使っていれば）
+      const m = txt.match(/(件名|Subject)\s*[:：]\s*(.+)\n([\s\S]*)/);
+      if(m){
+        el("m_subj").value = m[2].trim();
+        el("m_body").value = m[3].trim();
+      }else{
+        el("m_body").value = txt;
       }
+    }catch(e){ alert("AI文面の作成に失敗: " + e.message); }
+  }
+</script>
 </body>
 </html>