{selectedInvoice.id ? ( <>

伝票詳細

{selectedInvoice.id ? ( 伝票のスキャン画像

) : null}

e.preventDefault()} className="space-y-6" >

出報No

卸売会社名

農協コード

農協名

出荷日

ステータス

品名コード

品名

荷姿

容量

備考

</div>
                      <div>
                        <label className="block text-sm font-medium text-gray-700 mb-1">
                          上場数量合計
                        </label>
                        <input
                          type="number"
                          name="totalListingQuantity"
                          defaultValue={selectedInvoice.totalListingQuantity}
                          className="w-full border border-gray-300 rounded-md p-2"
                        />
                      </div>
                      <div>
                        <label className="block text-sm font-medium text-gray-700 mb-1">
                          出荷箱数
                        </label>
                        <input
                          type="number"
                          name="shippingBoxes"
                          defaultValue={selectedInvoice.shippingBoxes}
                          className="w-full border border-gray-300 rounded-md p-2"
                        />
                      </div>
                      <div>
                        <label className="block text-sm font-medium text-gray-700 mb-1">
                          品目
                        </label>
                        <input
                          type="text"
                          name="items"
                          defaultValue={selectedInvoice.items}
                          className="w-full border border-gray-300 rounded-md p-2"
                        />
                      </div>
                      <div className="flex justify-end">
                        <button
                          type="submit"
                          className="bg-[#0078D4] text-white px-4 py-2 rounded hover:bg-blue-700"
                        >
                          保存
                        </button>
                      </div>
                    </form>
                  </div>
                </div>
              </>
            ) : (
              <div className="bg-white rounded-lg shadow p-6">
                <div className="flex items-center mb-6">
                  <button
                    onClick={() => setSelectedInvoice(null)}
                    className="mr-4 text-gray-600"
                  >
                    <i className="fas fa-arrow-left"></i>
                  </button>
                  <h2 className="text-2xl font-semibold text-gray-800">
                    新規スキャン
                  </h2>
                </div>
                <div className="space-y-4">
                  <input
                    type="file"
                    accept="image/*"
                    onChange={(e) => {
                      if (e.target.files) {
                        setFiles([e.target.files[0]]);
                      }
                    }}
                    className="w-full p-2 border border-gray-300 rounded"
                  />
                  <button
                    onClick={handleFileUpload}
                    disabled={loading || !files.length}
                    className="bg-[#0078D4] text-white px-4 py-2 rounded disabled:opacity-50"
                  >
                    {loading ? "アップロード中..." : "スキャン開始"}
                  </button>
                </div>
              </div>
            )}
          </div>
        ) : (
          <div>
            <div className="flex items-center mb-6">
              <h2 className="text-2xl font-semibold text-gray-800">
                データ確認・スキャン
              </h2>
            </div>
            <div className="bg-white rounded-lg shadow p-6">
              <div className="flex justify-between items-center mb-6">
                <div className="flex items-center space-x-4">
                  <button
                    onClick={() => setSelectedInvoice({})}
                    className="bg-[#0078D4] text-white px-6 py-3 rounded-lg hover:bg-blue-700 flex items-center"
                  >
                    <i className="fas fa-qrcode mr-2"></i>
                    スキャン開始
                  </button>
                  <div className="relative">
                    <input
                      type="text"
                      placeholder="伝票を検索..."
                      className="pl-10 pr-4 py-2 border border-gray-300 rounded-lg w-64"
                    />
                    <i className="fas fa-search absolute left-3 top-3 text-gray-400"></i>
                  </div>
                </div>
                <div className="flex items-center space-x-4">
                  <select
                    className="border border-gray-300 rounded-md p-2"
                    value={selectedStatus}
                    onChange={(e) => setSelectedStatus(e.target.value)}
                  >
                    <option value="all">全て</option>
                    <option value="pending">未確認</option>
                    <option value="confirmed">確認済み</option>
                    <option value="error">エラー</option>
                  </select>
                  <button className="bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 flex items-center">
                    <i className="fas fa-file-export mr-2"></i>
                    エクスポート
                  </button>
                </div>
              </div>
              <div className="overflow-x-auto">
                <table className="min-w-full">
                  <thead>
                    <tr className="bg-gray-50">
                      <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        出報No
                      </th>
                      <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        卸売会社名
                      </th>
                      <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        農協名
                      </th>
                      <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        品名
                      </th>
                      <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        出荷月日
                      </th>
                      <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        ステータス
                      </th>
                      <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        操作
                      </th>
                    </tr>
                  </thead>
                  <tbody className="bg-white divide-y divide-gray-200">
                    {[
                      {
                        id: "INV-001",
                        wholesaler: "株式会社A商事",
                        cooperative: "B農業協同組合",
                        product: "トマト",
                        shipmentDate: "2024/01/15",
                        status: "confirmed",
                      },
                      {
                        id: "INV-002",
                        wholesaler: "C物産株式会社",
                        cooperative: "D農業協同組合",
                        product: "キュウリ",
                        shipmentDate: "2024/01/16",
                        status: "pending",
                      },
                      {
                        id: "INV-003",
                        wholesaler: "E商事株式会社",
                        cooperative: "F農業協同組合",
                        product: "ナス",
                        shipmentDate: "2024/01/17",
                        status: "error",
                      },
                    ]
                      .filter(
                        (invoice) =>
                          selectedStatus === "all" ||
                          invoice.status === selectedStatus,
                      )
                      .map((invoice) => (
                        <tr
                          key={invoice.id}
                          className="cursor-pointer hover:bg-gray-50"
                          onClick={() =>
                            setSelectedInvoice({
                              id: invoice.id,
                              wholesaler: invoice.wholesaler,
                              cooperativeCode: "12345",
                              cooperative: invoice.cooperative,
                              shipmentDate: invoice.shipmentDate,
                              status: invoice.status,
                              productCode: "P001",
                              product: invoice.product,
                              packaging: "段ボール",
                              capacity: "10kg",
                              notes: "特記事項なし",
                              totalListingQuantity: 100,
                              shippingBoxes: 10,
                              items: "野菜",
                            })
                          }
                        >
                          <td className="px-6 py-4 whitespace-nowrap">
                            {invoice.id}
                          </td>
                          <td className="px-6 py-4 whitespace-nowrap">
                            {invoice.wholesaler}
                          </td>
                          <td className="px-6 py-4 whitespace-nowrap">
                            {invoice.cooperative}
                          </td>
                          <td className="px-6 py-4 whitespace-nowrap">
                            {invoice.product}
                          </td>
                          <td className="px-6 py-4 whitespace-nowrap">
                            {invoice.shipmentDate}
                          </td>
                          <td className="px-6 py-4 whitespace-nowrap">
                            <span
                              className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${
                                invoice.status === "confirmed"
                                  ? "bg-green-100 text-green-800"
                                  : invoice.status === "error"
                                    ? "bg-red-100 text-red-800"
                                    : "bg-yellow-100 text-yellow-800"
                              }`}
                            >
                              {invoice.status === "confirmed"
                                ? "確認済み"
                                : invoice.status === "error"
                                  ? "エラー"
                                  : "未確認"}
                            </span>
                          </td>
                          <td className="px-6 py-4 whitespace-nowrap text-sm text-[#0078D4]">
                            詳細を見る
                          </td>
                        </tr>
                      ))}
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        );
      case "dashboard":
        return (
          <div>
            <div className="flex items-center mb-6">
              <h2 className="text-2xl font-semibold text-gray-800">
                ダッシュボード
              </h2>
            </div>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
              <div className="bg-white rounded-lg shadow p-6">
                <div className="flex items-center justify-between mb-4">
                  <h3 className="text-lg font-medium text-gray-700">
                    未処理伝票
                  </h3>
                  <span className="text-[#0078D4]">詳細</span>
                </div>
                <div className="text-3xl font-bold text-gray-800">24</div>
              </div>
              <div className="bg-white rounded-lg shadow p-6">
                <div className="flex items-center justify-between mb-4">
                  <h3 className="text-lg font-medium text-gray-700">
                    エラー件数
                  </h3>
                  <span className="text-[#E81123]">詳細</span>
                </div>
                <div className="text-3xl font-bold text-gray-800">3</div>
              </div>
              <div className="bg-white rounded-lg shadow p-6">
                <div className="flex items-center justify-between mb-4">
                  <h3 className="text-lg font-medium text-gray-700">
                    処理済件数
                  </h3>
                  <span className="text-[#107C10]">詳細</span>
                </div>
                <div className="text-3xl font-bold text-gray-800">156</div>
              </div>
            </div>
          </div>
        );
      default:
        return null;
    }
  };

return (
    <div className="min-h-screen flex font-roboto bg-gray-100">
      {sidebarOpen && (
        <div
          className="fixed inset-0 bg-black bg-opacity-50 z-20"
          onClick={() => setSidebarOpen(false)}
        ></div>
      )}
      <div
        className={`fixed inset-y-0 left-0 z-30 w-64 bg-[#0078D4] transform ${
          sidebarOpen ? "translate-x-0" : "-translate-x-full"
        } md:relative md:translate-x-0 transition duration-200 ease-in-out`}
      >
        <div className="h-16 flex items-center justify-center border-b border-blue-400">
          <h1 className="text-white text-xl">伝票処理システム</h1>
        </div>
        <nav className="mt-4">
          <a
            onClick={() => setSelectedMenu("dashboard")}
            className={`flex items-center px-6 py-3 text-white hover:bg-blue-600 ${
              selectedMenu === "dashboard" ? "bg-blue-700" : ""
            }`}
          >
            <i className="fas fa-chart-bar w-6"></i>
            <span className="ml-3">ダッシュボード</span>
          </a>
          <a
            onClick={() => setSelectedMenu("verify")}
            className={`flex items-center px-6 py-3 text-white hover:bg-blue-600 ${
              selectedMenu === "verify" ? "bg-blue-700" : ""
            }`}
          >
            <i className="fas fa-qrcode w-6"></i>
            <span className="ml-3">データ確認・スキャン</span>
          </a>
        </nav>
      </div>

<div className="flex-1">
        <header className="h-16 bg-white shadow-sm flex items-center justify-between px-6">
          <button
            onClick={() => setSidebarOpen(!sidebarOpen)}
            className="md:hidden text-gray-600"
          >
            <i className="fas fa-bars text-xl"></i>
          </button>

<div className="flex items-center space-x-4">
            <button className="relative">
              <i className="fas fa-bell text-gray-600"></i>
              <span className="absolute -top-1 -right-1 bg-[#E81123] text-white text-xs rounded-full w-4 h-4 flex items-center justify-center">
                3
              </span>
            </button>
            <div className="flex items-center">
              <i className="fas fa-user-circle text-2xl text-gray-600"></i>
              <span className="ml-2 text-gray-700">ユーザー名</span>
            </div>
          </div>
        </header>
        <main className="p-6">{renderContent()}</main>
      </div>
    </div>
  );
}</article></body></html>