POS開発 UIテンプレート集 — POS固有

// 商品カード — カートに追加（イベント委譲）
document.querySelector('.product-grid').addEventListener('click', (e) => {
  const btn = e.target.closest('.add-to-cart-btn');
  if (!btn) return;

  const card = btn.closest('.product-card');
  const item = {
    id: card.dataset.id,
    name: card.querySelector('.product-name').textContent,
    price: Number(card.dataset.price),
    quantity: 1
  };

  console.log('カートに追加:', item);
  // ここでカート配列に追加する処理を書く
  // 例: cart.push(item); renderCart();
});

// React: products を props で受け取り、onAdd で親に通知
function ProductGrid({ products, onAdd }) {
  return (
    <div className="product-grid">
      {products.map((p) => (
        <div key={p.id} className="product-card">
          <div className="product-img">画像</div>
          <div className="product-info">
            <p className="product-name">{p.name}</p>
            <p className="product-price">¥{p.price.toLocaleString()}</p>
          </div>
          {/* クロージャで商品オブジェクトを直接渡せる */}
          <button
            className="add-to-cart-btn"
            onClick={() => onAdd({ ...p, quantity: 1 })}
          >
            カートに追加
          </button>
        </div>
      ))}
    </div>
  );
}

// 使い方
const products = [
  { id: '001', name: 'コーヒー（S）', price: 350 },
  { id: '002', name: 'サンドイッチ', price: 500 },
];
<ProductGrid products={products} onAdd={(item) => console.log('追加:', item)} />

// ショッピングカート
const TAX_RATE = 0.10; // 消費税率 10%
let cart = [];

function addToCart(id, name, price) {
  const existing = cart.find(item => item.id === id);
  if (existing) {
    existing.quantity++;
  } else {
    cart.push({ id, name, price, quantity: 1 });
  }
  renderCart();
}

function updateQuantity(id, delta) {
  const item = cart.find(i => i.id === id);
  if (!item) return;
  item.quantity += delta;
  if (item.quantity < 1) cart = cart.filter(i => i.id !== id);
  renderCart();
}

function removeFromCart(id) {
  cart = cart.filter(i => i.id !== id);
  renderCart();
}

function renderCart() {
  const tbody = document.getElementById('cart-body');
  let subtotal = 0;

  tbody.innerHTML = cart.map(item => {
    const itemTotal = item.price * item.quantity;
    subtotal += itemTotal;
    return `<tr>
      <td>${item.name}</td>
      <td>&yen;${item.price.toLocaleString()}</td>
      <td>
        <div class="qty-control">
          <button class="qty-btn" onclick="updateQuantity('${item.id}', -1)">-</button>
          <span>${item.quantity}</span>
          <button class="qty-btn" onclick="updateQuantity('${item.id}', 1)">+</button>
        </div>
      </td>
      <td>&yen;${itemTotal.toLocaleString()}</td>
      <td><button class="remove-btn" onclick="removeFromCart('${item.id}')">&times;</button></td>
    </tr>`;
  }).join('');

  const tax = Math.floor(subtotal * TAX_RATE);
  document.getElementById('cart-subtotal').textContent = `¥${subtotal.toLocaleString()}`;
  document.getElementById('cart-tax').textContent = `¥${tax.toLocaleString()}`;
  document.getElementById('cart-total').textContent = `¥${(subtotal + tax).toLocaleString()}`;
}

// React: useReducer でカート操作を集約。render は state から自動導出
const TAX_RATE = 0.10;

function cartReducer(cart, action) {
  switch (action.type) {
    case 'ADD': {
      const existing = cart.find((i) => i.id === action.item.id);
      return existing
        ? cart.map((i) => i.id === action.item.id ? { ...i, quantity: i.quantity + 1 } : i)
        : [...cart, { ...action.item, quantity: 1 }];
    }
    case 'UPDATE_QTY':
      return cart
        .map((i) => i.id === action.id ? { ...i, quantity: i.quantity + action.delta } : i)
        .filter((i) => i.quantity > 0);
    case 'REMOVE':
      return cart.filter((i) => i.id !== action.id);
    default:
      return cart;
  }
}

function Cart() {
  const [cart, dispatch] = useReducer(cartReducer, []);

  // 集計は毎回導出（useMemo でキャッシュ可）
  const subtotal = cart.reduce((s, i) => s + i.price * i.quantity, 0);
  const tax = Math.floor(subtotal * TAX_RATE);
  const total = subtotal + tax;

  return (
    <div className="cart">
      <h3>カート</h3>
      <table className="cart-table">
        <tbody>
          {cart.map((item) => (
            <tr key={item.id}>
              <td>{item.name}</td>
              <td>¥{item.price.toLocaleString()}</td>
              <td>
                <div className="qty-control">
                  <button className="qty-btn"
                    onClick={() => dispatch({ type: 'UPDATE_QTY', id: item.id, delta: -1 })}>−</button>
                  <span>{item.quantity}</span>
                  <button className="qty-btn"
                    onClick={() => dispatch({ type: 'UPDATE_QTY', id: item.id, delta: +1 })}>+</button>
                </div>
              </td>
              <td>¥{(item.price * item.quantity).toLocaleString()}</td>
              <td>
                <button className="remove-btn"
                  onClick={() => dispatch({ type: 'REMOVE', id: item.id })}>×</button>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
      <div className="cart-summary">
        <p>小計: ¥{subtotal.toLocaleString()}</p>
        <p>消費税: ¥{tax.toLocaleString()}</p>
        <p className="cart-total">合計: ¥{total.toLocaleString()}</p>
      </div>
    </div>
  );
}

// テンキー入力
let numpadValue = '0';
const numpadDisplay = document.getElementById('numpadDisplay');

function updateNumpadDisplay() {
  const num = parseInt(numpadValue) || 0;
  numpadDisplay.textContent = num.toLocaleString();
}

// 確定時のコールバック（用途に応じて書き換え）
function onNumpadEnter(value) {
  console.log('入力確定:', value);
}

document.querySelector('.numpad-keys').addEventListener('click', (e) => {
  const btn = e.target.closest('.numpad-btn');
  if (!btn) return;

  const num = btn.dataset.num;
  const action = btn.dataset.action;

  if (num) {
    numpadValue = numpadValue === '0' ? num : numpadValue + num;
  } else if (action === 'backspace') {
    numpadValue = numpadValue.slice(0, -1) || '0';
  } else if (action === 'clear') {
    numpadValue = '0';
  } else if (action === 'enter') {
    onNumpadEnter(parseInt(numpadValue) || 0);
    numpadValue = '0';
  }
  updateNumpadDisplay();
});

// React: 入力値は state で保持。onEnter コールバックで親に確定値を渡す
function NumPad({ onEnter }) {
  const [value, setValue] = useState('0');

  const press = (key) => {
    if (key === 'clear') return setValue('0');
    if (key === 'backspace') return setValue((v) => v.slice(0, -1) || '0');
    if (key === 'enter') {
      onEnter(parseInt(value) || 0);
      return setValue('0');
    }
    setValue((v) => v === '0' ? key : v + key);
  };

  const display = (parseInt(value) || 0).toLocaleString();

  return (
    <div className="numpad">
      <div className="numpad-display">{display}</div>
      <div className="numpad-keys">
        {['7','8','9','4','5','6','1','2','3','00','0'].map((n) => (
          <button key={n} className="numpad-btn" onClick={() => press(n)}>{n}</button>
        ))}
        <button className="numpad-btn numpad-backspace" onClick={() => press('backspace')}>⌫</button>
        <button className="numpad-btn numpad-clear" onClick={() => press('clear')}>C</button>
        <button className="numpad-btn numpad-enter"
          style={{ gridColumn: 'span 2' }}
          onClick={() => press('enter')}>確定</button>
      </div>
    </div>
  );
}

// 使い方: <NumPad onEnter={(v) => console.log('確定:', v)} />

// レシート生成
function generateReceipt(order) {
  // order = { items: [{name, price, quantity}], taxRate: 0.10 }
  const now = new Date();
  document.getElementById('receipt-date').textContent =
    now.toLocaleString('ja-JP');

  // 商品リスト
  const itemsEl = document.getElementById('receipt-items');
  let subtotal = 0;
  itemsEl.innerHTML = order.items.map(item => {
    const total = item.price * item.quantity;
    subtotal += total;
    return `<div class="receipt-item">
      <span>${item.name} x${item.quantity}</span>
      <span>¥${total.toLocaleString()}</span>
    </div>`;
  }).join('');

  // 合計
  const tax = Math.floor(subtotal * (order.taxRate || 0.10));
  document.getElementById('receipt-totals').innerHTML = `
    <div class="receipt-item"><span>小計</span><span>¥${subtotal.toLocaleString()}</span></div>
    <div class="receipt-item"><span>消費税</span><span>¥${tax.toLocaleString()}</span></div>
    <div class="receipt-item total-line"><span>合計</span><span>¥${(subtotal + tax).toLocaleString()}</span></div>
  `;
}

// 使用例:
// generateReceipt({
//   items: [
//     { name: 'コーヒー', price: 350, quantity: 2 },
//     { name: 'サンドイッチ', price: 500, quantity: 1 }
//   ],
//   taxRate: 0.10
// });

// React: order を props で受け取るだけ。innerHTML 構築は不要
function Receipt({ order }) {
  const subtotal = order.items.reduce(
    (s, i) => s + i.price * i.quantity, 0
  );
  const tax = Math.floor(subtotal * (order.taxRate ?? 0.10));
  const total = subtotal + tax;
  const date = new Date().toLocaleString('ja-JP');

  return (
    <>
      <div className="receipt">
        <div className="receipt-header">
          <h3>SHOP NAME</h3>
          <p>〒000-0000 東京都...</p>
          <p>TEL: 03-0000-0000</p>
        </div>
        <div className="receipt-divider"/>
        <p className="receipt-date">{date}</p>
        <div className="receipt-divider"/>
        <div>
          {order.items.map((item, i) => (
            <div key={i} className="receipt-item">
              <span>{item.name} x{item.quantity}</span>
              <span>¥{(item.price * item.quantity).toLocaleString()}</span>
            </div>
          ))}
        </div>
        <div className="receipt-divider"/>
        <div className="receipt-totals">
          <div className="receipt-item"><span>小計</span><span>¥{subtotal.toLocaleString()}</span></div>
          <div className="receipt-item"><span>消費税</span><span>¥{tax.toLocaleString()}</span></div>
          <div className="receipt-item total-line"><span>合計</span><span>¥{total.toLocaleString()}</span></div>
        </div>
      </div>
      <button className="print-btn" onClick={() => window.print()}>
        レシートを印刷
      </button>
    </>
  );
}

// バーコードスキャナー入力検知
const SCAN_THRESHOLD = 50; // ms — この時間内の入力はスキャナーと判定
let lastKeyTime = 0;
let isScanning = false;

const barcodeInput = document.getElementById('barcodeInput');
const barcodeStatus = document.getElementById('barcodeStatus');

// スキャン完了時のコールバック
function onBarcodeScanned(code) {
  console.log('スキャン:', code);
  barcodeStatus.textContent = 'スキャン完了';
  barcodeStatus.className = 'barcode-status scanned';
  setTimeout(() => { barcodeStatus.textContent = ''; barcodeStatus.className = 'barcode-status'; }, 2000);
  // ここで商品検索処理を実装
}

barcodeInput.addEventListener('keydown', (e) => {
  const now = Date.now();
  if (now - lastKeyTime < SCAN_THRESHOLD) isScanning = true;
  lastKeyTime = now;

  if (e.key === 'Enter') {
    e.preventDefault();
    const code = barcodeInput.value.trim();
    if (code) {
      onBarcodeScanned(code);
      barcodeInput.value = '';
    }
    isScanning = false;
  }
});

// ページ読み込み時に自動フォーカス
barcodeInput.focus();

// React: 入力値 / ステータスを state、useRef + useEffect で autofocus
function BarcodeInput({ onScan }) {
  const [value, setValue] = useState('');
  const [scanned, setScanned] = useState(false);
  const inputRef = useRef(null);

  // マウント時に自動フォーカス
  useEffect(() => { inputRef.current?.focus(); }, []);

  // スキャン完了表示を 2 秒で消す
  useEffect(() => {
    if (!scanned) return;
    const t = setTimeout(() => setScanned(false), 2000);
    return () => clearTimeout(t);
  }, [scanned]);

  const handleKeyDown = (e) => {
    if (e.key !== 'Enter') return;
    e.preventDefault();
    const code = value.trim();
    if (!code) return;
    onScan(code);
    setValue('');
    setScanned(true);
  };

  return (
    <div className="barcode-input-wrapper">
      <label>バーコード</label>
      <div className="barcode-field">
        <span className="barcode-icon">⚏</span>
        <input
          ref={inputRef}
          type="text"
          value={value}
          onChange={(e) => setValue(e.target.value)}
          onKeyDown={handleKeyDown}
          placeholder="スキャンまたは入力..."
          autoComplete="off"
        />
        <span className={`barcode-status ${scanned ? 'scanned' : ''}`}>
          {scanned ? 'スキャン完了' : ''}
        </span>
      </div>
    </div>
  );
}

// 支払い方法の切り替え
document.querySelectorAll('.payment-btn').forEach(btn => {
  btn.addEventListener('click', () => {
    document.querySelectorAll('.payment-btn').forEach(b => b.classList.remove('active'));
    btn.classList.add('active');
  });
});

// 会計ボタン
document.querySelector('.checkout-btn').addEventListener('click', () => {
  const method = document.querySelector('.payment-btn.active').dataset.method;
  console.log('会計処理:', method);
  // ここに会計処理を実装
  // 例: レシート生成、在庫更新、履歴保存など
});

// React: 会計画面は上記コンポーネント (Cart / NumPad / Receipt) を組み合わせる
// 支払い方法は state、合計は props から導出
const TAX_RATE = 0.10;

function Checkout({ items, onSubmit }) {
  const [method, setMethod] = useState('cash');

  const subtotal = items.reduce((s, i) => s + i.price * i.quantity, 0);
  const tax = Math.floor(subtotal * TAX_RATE);
  const total = subtotal + tax;

  const methods = [
    { id: 'cash', label: '現金' },
    { id: 'card', label: 'カード' },
    { id: 'epay', label: '電子マネー' },
  ];

  return (
    <div className="checkout-layout">
      <div className="checkout-items">
        <h3>注文内容</h3>
        <table className="checkout-table">
          <thead>
            <tr><th>商品</th><th>数量</th><th>小計</th></tr>
          </thead>
          <tbody>
            {items.map((item) => (
              <tr key={item.id}>
                <td>{item.name}</td>
                <td>{item.quantity}</td>
                <td>¥{(item.price * item.quantity).toLocaleString()}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      <div className="checkout-summary">
        <div className="checkout-totals">
          <div className="checkout-row"><span>小計</span><span>¥{subtotal.toLocaleString()}</span></div>
          <div className="checkout-row"><span>消費税(10%)</span><span>¥{tax.toLocaleString()}</span></div>
          <div className="checkout-row total"><span>合計</span><span>¥{total.toLocaleString()}</span></div>
        </div>

        <div className="payment-methods">
          <p>支払い方法</p>
          <div className="payment-buttons">
            {methods.map((m) => (
              <button
                key={m.id}
                className={`payment-btn ${method === m.id ? 'active' : ''}`}
                onClick={() => setMethod(m.id)}
              >
                {m.label}
              </button>
            ))}
          </div>
        </div>

        <button className="checkout-btn" onClick={() => onSubmit({ method, total })}>
          会計する
        </button>
      </div>
    </div>
  );
}