"use client"; function MainComponent() { const [showModal, setShowModal] = React.useState(false); const [apiKey, setApiKey] = React.useState(""); const [selectedService, setSelectedService] = React.useState(""); const [integrationStatus, setIntegrationStatus] = React.useState({ moneyforward: "未連携", zaico: "未連携", hubspot: "未連携" }); const [items, setItems] = React.useState([]); const handleIntegrationClick = (service)=>{ setSelectedService(service); if (service === "Zaico") { setShowModal(true); } else { setIntegrationStatus((prevStatus)=>({ ...prevStatus, [service.toLowerCase()]: "連携済み" })); } }; const handleApiKeySubmit = (e)=>{ e.preventDefault(); setIntegrationStatus((prevStatus)=>({ ...prevStatus, zaico: "連携済み" })); setShowModal(false); }; const handleSync = ()=>{ alert("在庫同期が完了しました"); }; React.useEffect(()=>{ const fetchData = async ()=>{ try { await fetch('/api/db/items-48', { method: 'POST', body: JSON.stringify({ query: "INSERT INTO `inventory` (`zaico_id`, `product_name`, `stock`) VALUES (?, ?, ?)", values: [ '52089870', '商品A', 1 ] }) }); const response = await fetch('/api/db/items-48', { method: 'POST', body: JSON.stringify({ query: "SELECT `zaico_id`, `product_name`, `stock` FROM `inventory`", values: [] }) }); const data = await response.json(); setItems(data); } catch (error) { console.error('Error fetching data:', error); } }; fetchData(); }, []); return /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4 py-8", __source: { fileName: "", lineNumber: 69, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold mb-8 text-center font-roboto", __source: { fileName: "", lineNumber: 70, columnNumber: 7 }, __self: this }, "在庫管理アプリ"), /*#__PURE__*/ React.createElement("div", { className: "mb-8 flex justify-center space-x-4", __source: { fileName: "", lineNumber: 74, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded", onClick: ()=>handleIntegrationClick("マネーフォワード"), __source: { fileName: "", lineNumber: 75, columnNumber: 9 }, __self: this }, "マネーフォワード連携"), /*#__PURE__*/ React.createElement("button", { className: "bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded", onClick: ()=>handleIntegrationClick("Zaico"), __source: { fileName: "", lineNumber: 81, columnNumber: 9 }, __self: this }, "Zaico連携"), /*#__PURE__*/ React.createElement("button", { className: "bg-orange-500 hover:bg-orange-600 text-white font-bold py-2 px-4 rounded", onClick: ()=>handleIntegrationClick("HubSpot"), __source: { fileName: "", lineNumber: 87, columnNumber: 9 }, __self: this }, "HubSpot連携")), /*#__PURE__*/ React.createElement("table", { className: "table-auto w-full mb-8", __source: { fileName: "", lineNumber: 95, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 96, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 97, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "px-4 py-2", __source: { fileName: "", lineNumber: 98, columnNumber: 13 }, __self: this }, "Zaico ID"), /*#__PURE__*/ React.createElement("th", { className: "px-4 py-2", __source: { fileName: "", lineNumber: 99, columnNumber: 13 }, __self: this }, "商品名"), /*#__PURE__*/ React.createElement("th", { className: "px-4 py-2", __source: { fileName: "", lineNumber: 100, columnNumber: 13 }, __self: this }, "在庫数"), /*#__PURE__*/ React.createElement("th", { className: "px-4 py-2", __source: { fileName: "", lineNumber: 101, columnNumber: 13 }, __self: this }, "アクション"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 104, columnNumber: 9 }, __self: this }, items.map((item)=>/*#__PURE__*/ React.createElement("tr", { key: item.zaico_id, __source: { fileName: "", lineNumber: 106, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "border px-4 py-2", __source: { fileName: "", lineNumber: 107, columnNumber: 15 }, __self: this }, item.zaico_id), /*#__PURE__*/ React.createElement("td", { className: "border px-4 py-2", __source: { fileName: "", lineNumber: 108, columnNumber: 15 }, __self: this }, item.product_name), /*#__PURE__*/ React.createElement("td", { className: "border px-4 py-2", __source: { fileName: "", lineNumber: 109, columnNumber: 15 }, __self: this }, item.stock), /*#__PURE__*/ React.createElement("td", { className: "border px-4 py-2", __source: { fileName: "", lineNumber: 110, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 hover:bg-blue-600 text-white font-bold py-1 px-2 rounded", __source: { fileName: "", lineNumber: 111, columnNumber: 17 }, __self: this }, "編集")))))), /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 120, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-[#1166aa] hover:bg-blue-600 text-white font-bold py-2 px-4 rounded", onClick: handleSync, __source: { fileName: "", lineNumber: 121, columnNumber: 9 }, __self: this }, "在庫同期（バッチ処理）")), /*#__PURE__*/ React.createElement("div", { className: "mt-8 space-y-2", __source: { fileName: "", lineNumber: 129, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-gray-500 text-sm", __source: { fileName: "", lineNumber: 130, columnNumber: 9 }, __self: this }, "マネーフォワード連携ステータス:", " ", /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 132, columnNumber: 11 }, __self: this }, integrationStatus.moneyforward)), /*#__PURE__*/ React.createElement("div", { className: "text-gray-500 text-sm", __source: { fileName: "", lineNumber: 134, columnNumber: 9 }, __self: this }, "Zaico連携ステータス:", " ", /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 136, columnNumber: 11 }, __self: this }, integrationStatus.zaico)), /*#__PURE__*/ React.createElement("div", { className: "text-gray-500 text-sm", __source: { fileName: "", lineNumber: 138, columnNumber: 9 }, __self: this }, "HubSpot連携ステータス:", " ", /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 140, columnNumber: 11 }, __self: this }, integrationStatus.hubspot))), showModal && /*#__PURE__*/ React.createElement("div", { className: "fixed z-10 inset-0 overflow-y-auto", __source: { fileName: "", lineNumber: 145, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0", __source: { fileName: "", lineNumber: 146, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 transition-opacity", "aria-hidden": "true", __source: { fileName: "", lineNumber: 147, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-gray-500 opacity-75", __source: { fileName: "", lineNumber: 151, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("span", { className: "hidden sm:inline-block sm:align-middle sm:h-screen", "aria-hidden": "true", __source: { fileName: "", lineNumber: 153, columnNumber: 13 }, __self: this }, ""), /*#__PURE__*/ React.createElement("div", { className: "inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full", __source: { fileName: "", lineNumber: 159, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4", __source: { fileName: "", lineNumber: 160, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "sm:flex sm:items-start", __source: { fileName: "", lineNumber: 161, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left", __source: { fileName: "", lineNumber: 162, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg leading-6 font-medium text-gray-900", __source: { fileName: "", lineNumber: 163, columnNumber: 21 }, __self: this }, "Zaicoとの連携"), /*#__PURE__*/ React.createElement("div", { className: "mt-2", __source: { fileName: "", lineNumber: 166, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-500", __source: { fileName: "", lineNumber: 167, columnNumber: 23 }, __self: this }, "APIキーを入力して、Zaicoとの連携を開始します。"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleApiKeySubmit, className: "mt-4", __source: { fileName: "", lineNumber: 170, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 171, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "api_key", className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 172, columnNumber: 27 }, __self: this }, "APIキー"), /*#__PURE__*/ React.createElement("div", { className: "mt-1", __source: { fileName: "", lineNumber: 178, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "api_key", id: "api_key", value: apiKey, onChange: (e)=>setApiKey(e.target.value), className: "shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md", placeholder: "APIキーを入力", __source: { fileName: "", lineNumber: 179, columnNumber: 29 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "mt-5 sm:mt-4 sm:flex sm:flex-row-reverse", __source: { fileName: "", lineNumber: 190, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm", __source: { fileName: "", lineNumber: 191, columnNumber: 27 }, __self: this }, "連携開始"), /*#__PURE__*/ React.createElement("button", { type: "button", className: "mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:w-auto sm:text-sm", onClick: ()=>setShowModal(false), __source: { fileName: "", lineNumber: 197, columnNumber: 27 }, __self: this }, "キャンセル"))))))))))); }