function MainComponent() { const [searchParams, setSearchParams] = React.useState({ shipName: '', port: '', date: '' }); const [records, setRecords] = React.useState([ { ship: 'Ship A', port: 'Tokyo', role: 'Loading', arrivalTime: '2023-10-01 08:00', pobTime: '2023-10-01 08:30', allMadeFastTime: '2023-10-01 09:00', hoseConnectionTime: '2023-10-01 09:30', commencedCargoWorkTime: '2023-10-01 10:00', completedCargoWorkTime: '2023-10-01 18:00', hoseDisconnectionTime: '2023-10-01 18:30', lastLineCastOffTime: '2023-10-01 19:00', bunkerROBArrivalVLSFO: 500, bunkerROBArrivalLSMGO: 300, bunkerROBCastOffVLSFO: 450, bunkerROBCastOffLSMGO: 250, portCharge: '1000 USD' } ]); const handleSearchChange = (e)=>{ setSearchParams({ ...searchParams, [e.target.name]: e.target.value }); }; const filteredRecords = records.filter((record)=>{ return record.ship.includes(searchParams.shipName) && record.port.includes(searchParams.port) && record.arrivalTime.includes(searchParams.date); }); return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 37, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-crimson-text text-2xl mb-4", __source: { fileName: "", lineNumber: 38, columnNumber: 7 }, __self: this }, "船の運航記録"), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between mb-4", __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "船名で検索", className: "border p-2 w-[200px] font-crimson-text", name: "shipName", value: searchParams.shipName, onChange: handleSearchChange, __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "港で検索", className: "border p-2 w-[200px] font-crimson-text", name: "port", value: searchParams.port, onChange: handleSearchChange, __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "date", placeholder: "日付で検索", className: "border p-2 w-[200px] font-crimson-text", name: "date", value: searchParams.date, onChange: handleSearchChange, __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("table", { className: "table-auto w-full border-collapse border border-gray-300", __source: { fileName: "", lineNumber: 65, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { className: "bg-gray-200 font-crimson-text", __source: { fileName: "", lineNumber: 66, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "border border-gray-300 p-2", __source: { fileName: "", lineNumber: 68, columnNumber: 13 }, __self: this }, "船"), /*#__PURE__*/ React.createElement("th", { className: "border border-gray-300 p-2", __source: { fileName: "", lineNumber: 69, columnNumber: 13 }, __self: this }, "Port"), /*#__PURE__*/ React.createElement("th", { className: "border border-gray-300 p-2", __source: { fileName: "", lineNumber: 70, columnNumber: 13 }, __self: this }, "Role"), /*#__PURE__*/ React.createElement("th", { className: "border border-gray-300 p-2", __source: { fileName: "", lineNumber: 71, columnNumber: 13 }, __self: this }, "Arrival Time"), /*#__PURE__*/ React.createElement("th", { className: "border border-gray-300 p-2", __source: { fileName: "", lineNumber: 72, columnNumber: 13 }, __self: this }, "POB Time"), /*#__PURE__*/ React.createElement("th", { className: "border border-gray-300 p-2", __source: { fileName: "", lineNumber: 73, columnNumber: 13 }, __self: this }, "All Made Fast Time"), /*#__PURE__*/ React.createElement("th", { className: "border border-gray-300 p-2", __source: { fileName: "", lineNumber: 74, columnNumber: 13 }, __self: this }, "Hose Connection Time"), /*#__PURE__*/ React.createElement("th", { className: "border border-gray-300 p-2", __source: { fileName: "", lineNumber: 75, columnNumber: 13 }, __self: this }, "Commenced Cargo Work Time"), /*#__PURE__*/ React.createElement("th", { className: "border border-gray-300 p-2", __source: { fileName: "", lineNumber: 76, columnNumber: 13 }, __self: this }, "Completed Cargo Work Time"), /*#__PURE__*/ React.createElement("th", { className: "border border-gray-300 p-2", __source: { fileName: "", lineNumber: 77, columnNumber: 13 }, __self: this }, "Hose Disconnection Time"), /*#__PURE__*/ React.createElement("th", { className: "border border-gray-300 p-2", __source: { fileName: "", lineNumber: 78, columnNumber: 13 }, __self: this }, "Last Line Cast off Time"), /*#__PURE__*/ React.createElement("th", { className: "border border-gray-300 p-2", __source: { fileName: "", lineNumber: 79, columnNumber: 13 }, __self: this }, "Bunker ROB Arrival VLSFO"), /*#__PURE__*/ React.createElement("th", { className: "border border-gray-300 p-2", __source: { fileName: "", lineNumber: 80, columnNumber: 13 }, __self: this }, "Bunker ROB Arrival LSMGO"), /*#__PURE__*/ React.createElement("th", { className: "border border-gray-300 p-2", __source: { fileName: "", lineNumber: 81, columnNumber: 13 }, __self: this }, "Bunker ROB Cast off VLSFO"), /*#__PURE__*/ React.createElement("th", { className: "border border-gray-300 p-2", __source: { fileName: "", lineNumber: 82, columnNumber: 13 }, __self: this }, "Bunker ROB Cast off LSMGO"), /*#__PURE__*/ React.createElement("th", { className: "border border-gray-300 p-2", __source: { fileName: "", lineNumber: 83, columnNumber: 13 }, __self: this }, "Port Charge (USD or JPY)"))), /*#__PURE__*/ React.createElement("tbody", { className: "font-crimson-text", __source: { fileName: "", lineNumber: 86, columnNumber: 9 }, __self: this }, filteredRecords.map((record, index)=>/*#__PURE__*/ React.createElement("tr", { key: index, __source: { fileName: "", lineNumber: 88, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "border border-gray-300 p-2", __source: { fileName: "", lineNumber: 89, columnNumber: 15 }, __self: this }, record.ship), /*#__PURE__*/ React.createElement("td", { className: "border border-gray-300 p-2", __source: { fileName: "", lineNumber: 90, columnNumber: 15 }, __self: this }, record.port), /*#__PURE__*/ React.createElement("td", { className: "border border-gray-300 p-2", __source: { fileName: "", lineNumber: 91, columnNumber: 15 }, __self: this }, record.role), /*#__PURE__*/ React.createElement("td", { className: "border border-gray-300 p-2", __source: { fileName: "", lineNumber: 92, columnNumber: 15 }, __self: this }, record.arrivalTime), /*#__PURE__*/ React.createElement("td", { className: "border border-gray-300 p-2", __source: { fileName: "", lineNumber: 93, columnNumber: 15 }, __self: this }, record.pobTime), /*#__PURE__*/ React.createElement("td", { className: "border border-gray-300 p-2", __source: { fileName: "", lineNumber: 94, columnNumber: 15 }, __self: this }, record.allMadeFastTime), /*#__PURE__*/ React.createElement("td", { className: "border border-gray-300 p-2", __source: { fileName: "", lineNumber: 95, columnNumber: 15 }, __self: this }, record.hoseConnectionTime), /*#__PURE__*/ React.createElement("td", { className: "border border-gray-300 p-2", __source: { fileName: "", lineNumber: 96, columnNumber: 15 }, __self: this }, record.commencedCargoWorkTime), /*#__PURE__*/ React.createElement("td", { className: "border border-gray-300 p-2", __source: { fileName: "", lineNumber: 97, columnNumber: 15 }, __self: this }, record.completedCargoWorkTime), /*#__PURE__*/ React.createElement("td", { className: "border border-gray-300 p-2", __source: { fileName: "", lineNumber: 98, columnNumber: 15 }, __self: this }, record.hoseDisconnectionTime), /*#__PURE__*/ React.createElement("td", { className: "border border-gray-300 p-2", __source: { fileName: "", lineNumber: 99, columnNumber: 15 }, __self: this }, record.lastLineCastOffTime), /*#__PURE__*/ React.createElement("td", { className: "border border-gray-300 p-2", __source: { fileName: "", lineNumber: 100, columnNumber: 15 }, __self: this }, record.bunkerROBArrivalVLSFO), /*#__PURE__*/ React.createElement("td", { className: "border border-gray-300 p-2", __source: { fileName: "", lineNumber: 101, columnNumber: 15 }, __self: this }, record.bunkerROBArrivalLSMGO), /*#__PURE__*/ React.createElement("td", { className: "border border-gray-300 p-2", __source: { fileName: "", lineNumber: 102, columnNumber: 15 }, __self: this }, record.bunkerROBCastOffVLSFO), /*#__PURE__*/ React.createElement("td", { className: "border border-gray-300 p-2", __source: { fileName: "", lineNumber: 103, columnNumber: 15 }, __self: this }, record.bunkerROBCastOffLSMGO), /*#__PURE__*/ React.createElement("td", { className: "border border-gray-300 p-2", __source: { fileName: "", lineNumber: 104, columnNumber: 15 }, __self: this }, record.portCharge)))))); }