// 橋本商会ポータル — Shared UI components // Globals expected: React const { useState, useEffect, useRef, useMemo, useCallback } = React; // ─────────── Icons (Lucide-style, 24x24) ─────────── const Ico = { mic: (p) => , stop: (p) => , check: (p) => , checkSmall: (p) => , copy: (p) => , plus: (p) => , search: (p) => , back: (p) => , chevR: (p) => , chevD: (p) => , bell: (p) => , home: (p) => , list: (p) => , user: (p) => , cal: (p) => , chat: (p) => , sparkle: (p) => , pin: (p) => , car: (p) => , phone: (p) => , edit: (p) => , x: (p) => , filter: (p) => , arrowR: (p) => , reset: (p) => , more: (p) => , }; // ─────────── Brand mark ─────────── function BrandMark({ size = 32 }) { return (
橋
); } // ─────────── Hashimoto wordmark (Variant B) ─────────── function HashimotoLogo({ size = 24 }) { // Render as inline SVG-like layout: L mark + HASHIMOTO text return (
HASHIMOTO
); } function HashimotoMark({ size = 32 }) { // Distinctive black-L + teal vertical, per brand HP const s = size; return ( {/* Black short vertical */} {/* Teal taller vertical */} {/* Black serif notch at bottom-left */} ); } // ─────────── Brand hero (tagline) ─────────── function BrandHero() { return (

Always the
best service.

「最高のサービス」をこれからもずっと。
); } // ─────────── Confidence Bar ─────────── function ConfidenceBar({ value = 0.5 }) { const pct = Math.round(value * 100); const tone = value >= 0.85 ? "var(--success)" : value >= 0.7 ? "var(--accent-strong, var(--primary))" : "var(--warning)"; return (
{pct}%
); } // ─────────── Fake QR (decorative, deterministic from string) ─────────── function FakeQR({ value = "", size = 96, fg = "var(--text)", bg = "var(--surface)" }) { // Generate 21x21 deterministic pattern with corner finders const cells = useMemo(() => { const N = 21; const grid = Array.from({ length: N }, () => Array(N).fill(0)); // Position finders const finder = (r, c) => { for (let dr = 0; dr < 7; dr++) for (let dc = 0; dc < 7; dc++) { const onBorder = dr === 0 || dr === 6 || dc === 0 || dc === 6; const inner = dr >= 2 && dr <= 4 && dc >= 2 && dc <= 4; grid[r + dr][c + dc] = (onBorder || inner) ? 1 : 0; } }; finder(0, 0); finder(0, N - 7); finder(N - 7, 0); // Hash from value let h = 0; for (let i = 0; i < value.length; i++) { h = (h * 31 + value.charCodeAt(i)) | 0; } const rand = () => { h = (h * 1664525 + 1013904223) | 0; return (h >>> 0) / 0xffffffff; }; // Fill data cells for (let r = 0; r < N; r++) for (let c = 0; c < N; c++) { const inFinder = (r < 8 && c < 8) || (r < 8 && c >= N - 8) || (r >= N - 8 && c < 8); if (inFinder) continue; grid[r][c] = rand() > 0.55 ? 1 : 0; } return grid; }, [value]); const cs = size / cells.length; return ( {cells.map((row, r) => row.map((v, c) => v ? ( ) : null))} ); } // ─────────── Status badge ─────────── function StatusBadge({ status }) { const s = STATUS_LABELS[status] || STATUS_LABELS.intake; return ( {s.label} ); } // ─────────── Case Key ─────────── function CaseKey({ value, size = "md", showCopy = true, onCopy }) { const [copied, setCopied] = useState(false); const handle = () => { setCopied(true); if (onCopy) onCopy(value); setTimeout(() => setCopied(false), 1500); }; if (size === "lg") { return (
案件キー
{value}
{showCopy && (
{copied ? <> コピーしました : <> タップでコピー}
)}
); } return ( {value} ); } // ─────────── Mic + Waveform ─────────── function Waveform({ active, level = 0.6 }) { const bars = 11; const [heights, setHeights] = useState(Array(bars).fill(6)); useEffect(() => { if (!active) { setHeights(Array(bars).fill(6)); return; } const t = setInterval(() => { setHeights(Array.from({ length: bars }, (_, i) => { const center = Math.abs(i - bars / 2) / (bars / 2); const base = (1 - center) * 22 + 6; return base + Math.random() * 8 * level; })); }, 110); return () => clearInterval(t); }, [active, level]); return (
{heights.map((h, i) => (
))}
); } function MicButton({ recording, onClick }) { return ( ); } // ─────────── Field ─────────── function Field({ label, value, required, low, empty, animateKey, children, onClick, right, placeholder, multiline, confidence }) { const cls = ["field"]; if (low) cls.push("low"); if (empty || (!value && !children)) cls.push("empty"); if (animateKey) cls.push("ai-just-filled"); return (
{label} {required && *} {right}
{children ? children : (
{value || placeholder || "—"}
)} {(animateKey || low || confidence != null) && (
{confidence != null ? ( <> {low ? "要確認" : "自動入力"} {Math.round(confidence * 100)}% ) : ( <> {low ? "要確認" : "AI"} )}
)}
); } // ─────────── Chip multi-select ─────────── function ChipMulti({ options, value, onChange }) { const toggle = (v) => { if (value.includes(v)) onChange(value.filter(x => x !== v)); else onChange([...value, v]); }; return (
{options.map(opt => ( ))}
); } // ─────────── Pill radio (segmented) ─────────── function PillRadio({ options, value, onChange }) { return (
{options.map(opt => ( ))}
); } // ─────────── Bottom Sheet ─────────── function Sheet({ open, onClose, title, children }) { return ( <>
{title}
{children}
); } // ─────────── Status stepper ─────────── function StatusStepper({ current }) { const steps = ["受付", "整備", "集配", "納車"]; const idx = steps.indexOf({ intake: "受付", progress: "整備", delivery: "集配", done: "納車" }[current] || "受付"); return (
{steps.map((s, i) => (
{i < idx ? : i + 1}
{s}
{i < steps.length - 1 &&
} ))}
); } // ─────────── Toast ─────────── function Toast({ show, children }) { return
{children}
; } // ─────────── Tab bar ─────────── function TabBar({ active, onNav }) { return (
); } // ─────────── App Bar (per-screen) ─────────── function AppBar({ title, sub, brand, left, right, big, variant = "navy" }) { return (
{left}
{brand && variant === "navy" && (
橋本商会ポータル
{sub || "Always the best service."}
)} {brand && variant === "brand" && (
{sub}
)} {!brand && !big && (
{title}
{sub &&
{sub}
}
)}
{right}
{big && ( <>

{title}

{sub &&
{sub}
} )}
); } Object.assign(window, { Ico, BrandMark, HashimotoLogo, HashimotoMark, BrandHero, ConfidenceBar, FakeQR, StatusBadge, CaseKey, MicButton, Waveform, Field, ChipMulti, PillRadio, Sheet, StatusStepper, Toast, TabBar, AppBar, });