p4-発注詳細

src/pages/Base/Order/index.tsx

@@ -541,17 +541,31 @@ const GridExample = () => {
                 const status = params.data?.approveStatus;
                 const content = status === "approved"? (
                     <span>
-        承認済
-        <a
-            href="#"
-            style={{
-                marginLeft: "5px",
-                color: "#3a8aca"
-            }}
-        >
-          差戻し
-        </a>
-      </span>
+  承認済
+  <a
+    href="#"
+    style={{
+      marginLeft: "5px",
+      color: "#3a8aca",
+      cursor: "pointer",
+      textDecoration: "underline"
+    }}
+    onClick={(e) => {
+      e.preventDefault();
+      const rowIndex = params.node.rowIndex;
+      if (rowIndex!== null) {
+        const newRowData = [...rowData];
+        newRowData[rowIndex] = {
+         ...newRowData[rowIndex],
+          approveStatus: "unapproved"
+        };
+        setRowData(newRowData);
+      }
+    }}
+  >
+    差戻し
+  </a>
+</span>
                 ) : status === "unapproved"? (
                     <span>未承認</span>
                 ) : (
@@ -737,7 +751,6 @@ const GridExample = () => {
                          <select 
                             value={orderInfo.monthlyInstruction.selectedVersion}
                             onChange={(e) => {
-                                // 更新选中的version，保持其他字段不变
                                 setOrderInfo(prev => ({
                                    ...prev,
                                     monthlyInstruction: {

src/pages/Partner/Order/Chat.tsx

@@ -1,420 +0,0 @@
-import React, { useState, useRef, useEffect } from "react";
-
-// 聊天组件 props 类型
-type ChatProps = {
-  onClose: () => void;
-};
-
-// 聊天消息类型定义
-type ChatMessage = {
-  id: string;
-  sender: "other" | "me";
-  content: string;
-  timestamp: string;
-  attachment?: {
-    name: string;
-    url: string;
-  };
-};
-
-// 聊天组件 props 类型
-type ChatComponentProps = {
-  messageList: ChatMessage[];
-  onClose: () => void;
-};
-
-const ChatComponent: React.FC<ChatComponentProps> = ({ messageList, onClose }) => {
-  const messagesEndRef = useRef<HTMLDivElement>(null);
-
-  const baseMessageStyle = {
-    display: "flex",
-    marginBottom: "12px",
-    width: "100%",
-  } as React.CSSProperties;
-
-  const senderInfoStyle = {
-    display: "flex",
-    alignItems: "center",
-    marginBottom: "4px",
-  } as React.CSSProperties;
-
-  const iconStyle = {
-    width: "20px",
-    height: "20px",
-    marginRight: "4px",
-  } as React.CSSProperties;
-
-  const senderNameStyle = {
-    fontSize: "14px",
-    fontWeight: "bold",
-  } as React.CSSProperties;
-
-  const bubbleStyle = {
-    padding: "10px 14px",
-    borderRadius: "8px",
-    boxShadow: "0 1px 2px rgba(0,0,0,0.1)",
-    maxWidth: "70%",
-    wordWrap: "break-word",
-  } as React.CSSProperties;
-
-  const contentStyle = {
-    marginBottom: "0",
-    lineHeight: "1.5",
-    fontSize: "14px",
-    textAlign: "left",
-  } as React.CSSProperties;
-
-  const attachmentContainerStyle = {
-    display: "flex",
-    alignItems: "center",
-    marginBottom: "4px",
-    gap: "8px",
-  } as React.CSSProperties;
-
-  const fileNameWrapStyle = {
-    border: "1px solid #ccc",
-    borderRadius: "4px",
-    padding: "6px 8px",
-    display: "inline-block",
-  } as React.CSSProperties;
-
-  const attachmentNameStyle = {
-    fontSize: "14px",
-    color: "#000",
-    whiteSpace: "nowrap",
-    overflow: "hidden",
-    textOverflow: "ellipsis",
-    maxWidth: "200px",
-  } as React.CSSProperties;
-
-  const downloadLinkStyle = {
-    fontSize: "14px",
-    color: "#0066cc",
-    textDecoration: "underline",
-    cursor: "pointer",
-    whiteSpace: "nowrap",
-  } as React.CSSProperties;
-
-  const timestampStyle = {
-    fontSize: "14px",
-    color: "#000",
-  } as React.CSSProperties;
-
-  useEffect(() => {
-    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
-  }, [messageList]);
-
-  return (
-    <div>
-      <div
-        style={{
-          marginBottom: "10px",
-          display: "flex",
-          alignItems: "center",
-          marginLeft: "-10px",
-        }}
-      >
-        <img
-          src="/return.svg"
-          alt="返回箭头"
-          style={{ width: "25px", height: "25px" }}
-        />
-        <span
-          style={{ fontSize: "14px", cursor: "pointer" }}
-          onClick={onClose}
-        > 戻る </span>
-      </div>
-
-      {messageList.map((msg) => (
-        <div
-          key={msg.id}
-          style={{
-            ...baseMessageStyle,
-            justifyContent: msg.sender === "other"? "flex-start" : "flex-end",
-            display: "flex",
-            flexDirection: "column",
-            alignItems: msg.sender === "other"? "flex-start" : "flex-end",
-            paddingLeft: "40px",
-          }}
-        >
-          {/* 根据发送方显示对应的名称和图标 */}
-          {msg.sender === "other" && (
-            <div style={senderInfoStyle}>
-              <img
-                src="/usr.png"
-                alt="AAA株式会社图标"
-                style={iconStyle}
-              />
-              <span style={senderNameStyle}>AAA株式会社</span>
-            </div>
-          )}
-          {msg.sender === "me" && (
-            <div style={senderInfoStyle}>
-              <span style={senderNameStyle}>羽田ベース</span>
-              <img
-                src="/cat.png"
-                alt="羽田ベース图标"
-                style={{...iconStyle, marginLeft: "4px", marginRight: "0" }}
-              />
-            </div>
-          )}
-
-          {/*聊天内容气泡：内容非空时才显示 */}
-          {msg.content.trim()!== "" && (
-            <div
-              style={{
-                ...bubbleStyle,
-                backgroundColor: msg.sender === "other"? "#d9d9d9" : "#deebf7",
-                marginBottom: "4px",
-              }}
-            >
-              <div style={contentStyle}>
-                {msg.content.split("\n").map((line, index) => (
-                  <React.Fragment key={index}>
-                    {line}
-                    {index < msg.content.split("\n").length - 1 && <br />}
-                  </React.Fragment>
-                ))}
-              </div>
-            </div>
-          )}
-
-          {/* 附件区域 */}
-          {msg.attachment && (
-            <div style={attachmentContainerStyle}>
-              <div style={fileNameWrapStyle}>
-                <span style={attachmentNameStyle}>{msg.attachment.name}</span>
-              </div>
-              <a
-                href={msg.attachment.url}
-                download={msg.attachment.name}
-                style={downloadLinkStyle}
-              >
-                ダウンロード
-              </a>
-            </div>
-          )}
-
-          {/* 时间戳 */}
-          <div
-            style={{
-              ...timestampStyle,
-              marginLeft: msg.sender === "other"? "10px" : "0",
-              marginRight: msg.sender === "me"? "10px" : "0",
-              textAlign: msg.sender === "other"? "left" : "right",
-            }}
-          >
-            {msg.timestamp}
-          </div>
-        </div>
-      ))}
-
-      {/* 用于自动滚动的参考点 */}
-      <div ref={messagesEndRef} />
-    </div>
-  );
-};
-
-// 输入区域组件
-const InputArea: React.FC<{ onSendMessage: (content: string, file: File | null) => void }> = ({ onSendMessage }) => {
-  const [inputValue, setInputValue] = useState("");
-  const [selectedFile, setSelectedFile] = useState<File | null>(null);
-
-  const handleSend = () => {
-    if (inputValue.trim() || selectedFile) {
-      onSendMessage(inputValue.trim(), selectedFile);
-      setInputValue("");
-      setSelectedFile(null);
-    }
-  };
-
-  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    if (e.target.files && e.target.files.length > 0) {
-      setSelectedFile(e.target.files[0]);
-    }
-  };
-
-  const handleRemoveFile = () => {
-    setSelectedFile(null);
-  };
-
-  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
-    if (e.key === 'Enter' &&!e.shiftKey) {
-      e.preventDefault();
-      handleSend();
-    }
-  };
-
-  return (
-    <div
-      style={{
-        width: "100%",
-        maxWidth: "600px",
-        margin: "0 auto",
-        padding: "16px",
-        display: "flex",
-        flexDirection: "column",
-        gap: "8px",
-      }}
-    >
-      <textarea
-        value={inputValue}
-        onChange={(e) => setInputValue(e.target.value)}
-        onKeyDown={handleKeyDown}
-        placeholder="メッセージを入力する..."
-        style={{
-          width: "100%",
-          height: "180px",
-          padding: "8px",
-          borderRadius: "4px",
-          border: "1px solid #ccc",
-          resize: "none",
-        }}
-      />
-      {selectedFile && (
-        <div
-          style={{
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "space-between",
-            backgroundColor: "#f9f9f9",
-            padding: "8px",
-            borderRadius: "4px",
-          }}
-        >
-          <div style={{ display: "flex", alignItems: "center" }}>
-            <span style={{ marginRight: "8px", color: "#0066cc" }}>
-              {selectedFile.name.split('.').pop()?.toUpperCase() || 'FILE'}
-            </span>
-            <span>{selectedFile.name}</span>
-          </div>
-          <span
-            style={{
-              cursor: "pointer",
-              color: "#000",
-              fontWeight: "bold",
-              fontSize: "16px",
-            }}
-            onClick={handleRemoveFile}
-          >
-            ×
-          </span>
-        </div>
-      )}
-      <div
-        style={{
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "space-between",
-        }}
-      >
-        <label
-          htmlFor="fileInput"
-          style={{
-            color: "#0066cc",
-            textDecoration: "underline",
-            cursor: "pointer",
-          }}
-        >
-          ファイルアップロード
-        </label>
-        <input
-          type="file"
-          id="fileInput"
-          onChange={handleFileChange}
-          style={{
-            display: "none",
-          }}
-        />
-        <button
-          style={{
-            padding: "8px 16px",
-            backgroundColor: "#000",
-            color: "#fff",
-            border: "none",
-            borderRadius: "4px",
-            cursor: "pointer",
-          }}
-          onClick={handleSend}
-        >
-          送信
-        </button>
-      </div>
-    </div>
-  );
-};
-
-// 示例数据
-const initialMessages: ChatMessage[] = [
-  {
-    id: "1",
-    sender: "other",
-    content: "実積を確認しました。\n21日は追加で稼働していませんが、実積に反映されていません。",
-    timestamp: "2025-7-1 12:21",
-  },
-  {
-    id: "2",
-    sender: "me",
-    content: "ご確認ありがとうございます。\n恐れ入りますが、運行の証跡がかかるものをアップロードいただけますでしょうか。",
-    timestamp: "2025-7-1 12:25",
-  },
-  {
-    id: "3",
-    sender: "other",
-    content: "1ファイルを送ります。\nこちらでご確認お願いします。",
-    timestamp: "2025-7-1 13:07",
-    attachment: {
-      name: "6月運行証明.xlsx",
-      url: "#",
-    },
-  },
-  {
-    id: "4",
-    sender: "me",
-    content: "ありがとうございます。\n内容確認して、再度ご連絡させていただきます。",
-    timestamp: "2025-7-1 13:31",
-  },
-];
-
-const Chat: React.FC<ChatProps> = ({ onClose }) => {
-  const [messages, setMessages] = useState<ChatMessage[]>(initialMessages);
-
-  const handleSendMessage = (content: string, file: File | null) => {
-    const newMessage: ChatMessage = {
-      id: Date.now().toString(),
-      sender: "me",
-      content,
-      timestamp: new Date()
-        .toLocaleString("ja-JP", {
-          year: "numeric",
-          month: "long",
-          day: "numeric",
-          hour: "2-digit",
-          minute: "2-digit",
-        })
-        .replace(/[年月]/g, "-")
-        .replace("日", ""),
-    };
-
-    if (file) {
-      newMessage.attachment = {
-        name: file.name,
-        url: "#", // 实际需替换为后端返回的下载链接
-      };
-    }
-
-    setMessages([...messages, newMessage]);
-  };
-
-  return (
-    <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
-      <div className="chat-messages-container">
-        <ChatComponent messageList={messages} onClose={onClose} />
-      </div>
-      <InputArea onSendMessage={handleSendMessage} />
-    </div>
-  );
-};
-
-export default Chat;
-

src/pages/Partner/Order/index.tsx

@@ -10,15 +10,13 @@ import {
     ValidationModule,
     ICellRendererParams,
     CellClassParams,
-    ValueFormatterParams,
     CellClickedEvent,
-    ISelectCellEditorParams,
     SelectEditorModule,
     CellStyleModule
 } from "ag-grid-community";
 import "ag-grid-community/styles/ag-theme-alpine.css";
 import DateChangeDialog from "./DateChangeDialog";
-import Chat from "./Chat";
+import Chat from "./ChatPartner";
 
 // 注册必要的模块
 ModuleRegistry.registerModules([
@@ -28,15 +26,6 @@ ModuleRegistry.registerModules([
     ...(process.env.NODE_ENV!== "production"? [ValidationModule] : [])
 ]);
 
-// 支店选项
-const branchOptions = [
-    "東京支店",
-    "神奈川支店",
-    "品川営業所",
-    "札幌支店",
-    "福岡支店"
-];
-
 // 事由选项
 const reasonOptions = [
     "臨時変更",
@@ -45,45 +34,46 @@ const reasonOptions = [
     "その他"
 ];
 
-const orderInfo = {
-    deliveryPartner: {
-        id: "0311111111",
-        name: "AAA株式会社"
-    },
-    status: {
-        companyCode: "R000001",
-        status: "全承諾",
-        version: 1,
-        instructionDate: "2025/6/25",
-        approvalDate: "2025/6/25"
-    },
-    monthlyInstruction: {
-        versionOptions: ["ver-1", "ver-2", "ver-3", "ver-4", "ver-5"],
-        selectedVersion: "ver-1"
-    }
-};
+const affiliationName = "羽田ベース"; 
 
 const historyData = [
     {
         type: '履歴',
-        date: '2025/06/16 10:00',
-        action: '指示書生成'
-    },
-    {
-        type: '履歴',
-        date: '2025/06/16 15:24',
-        action: '指示書編集'
-    },
-    {
-        type: '履歴',
-        date: '2025/06/16 15:24',
-        action: '指示書送付'
+        date: '2025/01/05 10:00',
+        action: '指示書受領'
     }
 ];
 
 const weekTexts = ["火", "水", "木", "金", "土", "日", "月"];
 
 const GridExample = () => {
+  const [orderInfo, setOrderInfo] = useState({
+    deliveryPartner: {
+        monthYear: "2025年7月",
+        affiliationName: "羽田ベース"
+    },
+    monthlyInstruction: {
+        versionOptions: ["ver-1", "ver-2", "ver-3", "ver-4", "ver-5"],
+        selectedVersion: "ver-1"
+    }
+});
+  const [documentInfo, setDocumentInfo] = useState({
+    corpCode: "3888888888", 
+    reportMonth: "2025年6月度",
+    company: "ヤマト運輸株式会社",
+    branch: "羽田CGB",
+    corpPhone: "03-6756-7164",
+    corpName: "(有)AAAA 御中",
+});
+
+ const [paymentInfo, setPaymentInfo] = useState({
+    paymentAmountText: "支払代金は現行の値下駄契約書明細の定めのとおり",
+    paymentMethod: "全額現金口座振込",
+    paymentDeadline: "毎月未納め、翌々月10日支払い（出発日基準）",
+    consumptionTaxText: "法定税率による消費税額・地方消費税額は加算して決済します",
+    transferFeeText: "請求金額より差し引いて振込いたします",
+  });
+
     const containerStyle = useMemo(() => ({ width: "100%" }), []);
     const gridStyle = useMemo(() => ({ width: "100%" }), []);
     const [rowData, setRowData] = useState(initializeRowData());
@@ -147,6 +137,17 @@ const GridExample = () => {
         font-weight: normal;
       }
 
+       .confirm-request-btn {
+        margin-left:70%;
+        padding: 7px 50px;
+        background-color: #000;
+        color: #fff;
+        border: none;
+        cursor: pointer;
+        font-size: 14px;
+        margin-top: 50px;
+      }
+
       .version-select-container {
         display: flex;
         align-items: center;
@@ -156,6 +157,7 @@ const GridExample = () => {
         margin-right: 10px;
         white-space: nowrap;
         font-size: 14px;
+        font-weight: bold;
       }
       .version-select-container select {
         padding: 5px 35px;
@@ -181,6 +183,7 @@ const GridExample = () => {
         color: #fff;
         border: none;
         cursor: pointer;
+        margin-top: 50px;
       }
       .add-row-btn {
         background: transparent;
@@ -234,9 +237,6 @@ const GridExample = () => {
      .date-group-header {
        border-right: 1px solid #dcdcdc !important;
      }
-     .checkbox{
-       display: none;
-     }
      .tokyoBranchCol{
        display: none;
      }
@@ -351,8 +351,6 @@ const GridExample = () => {
                 "入庫時間": "21:00",
                 "使用車両(トン)": "13",
                 "checkboxCol": "",
-                "tokyoBranchCol": "東京支店",
-                "approveStatus": "approved",
                 ...Array.from({ length: 31 }, (_, i) => ({
                     [`date_${i + 1}`]: (i + 1) % 3 === 0? "〇" : ""
                 })).reduce((acc, curr) => ({...acc,...curr }), {})
@@ -367,8 +365,6 @@ const GridExample = () => {
                 "入庫時間": "19:00",
                 "使用車両(トン)": "13",
                 "checkboxCol": "",
-                "tokyoBranchCol": "神奈川支店",
-                "approveStatus": "unapproved",
                 ...Array.from({ length: 31 }, (_, i) => ({
                     [`date_${i + 1}`]: (i + 1) % 4 === 0? "〇" : ""
                 })).reduce((acc, curr) => ({...acc,...curr }), {})
@@ -383,8 +379,6 @@ const GridExample = () => {
                 "入庫時間": "18:00",
                 "使用車両(トン)": "13",
                 "checkboxCol": "",
-                "tokyoBranchCol": "品川営業所",
-                "approveStatus": "approved",
                 ...Array.from({ length: 31 }, (_, i) => ({
                     [`date_${i + 1}`]: (i + 1) % 5 === 0? "〇" : ""
                 })).reduce((acc, curr) => ({...acc,...curr }), {})
@@ -399,8 +393,6 @@ const GridExample = () => {
                 "入庫時間": "21:00",
                 "使用車両(トン)": "13",
                 "checkboxCol": "",
-                "tokyoBranchCol": "札幌支店",
-                "approveStatus": "unapproved",
                 ...Array.from({ length: 31 }, (_, i) => ({
                     [`date_${i + 1}`]: (i + 1) % 2 === 0? "〇" : ""
                 })).reduce((acc, curr) => ({...acc,...curr }), {})
@@ -415,8 +407,6 @@ const GridExample = () => {
                 "入庫時間": "19:00",
                 "使用車両(トン)": "10",
                 "checkboxCol": "",
-                "tokyoBranchCol": "福岡支店",
-                "approveStatus": "approved",
                 ...Array.from({ length: 31 }, (_, i) => ({
                     [`date_${i + 1}`]: (i + 1) % 6 === 0? "〇" : ""
                 })).reduce((acc, curr) => ({...acc,...curr }), {})
@@ -431,8 +421,6 @@ const GridExample = () => {
                 "入庫時間": "21:00",
                 "使用車両(トン)": "13",
                 "checkboxCol": "",
-                "tokyoBranchCol": "東京支店",
-                "approveStatus": "approved",
                 ...Array.from({ length: 31 }, (_, i) => ({
                     [`date_${i + 1}`]: (i + 1) % 3 === 0? "〇" : ""
                 })).reduce((acc, curr) => ({...acc,...curr }), {})
@@ -447,8 +435,6 @@ const GridExample = () => {
                 "入庫時間": "19:00",
                 "使用車両(トン)": "13",
                 "checkboxCol": "",
-                "tokyoBranchCol": "神奈川支店",
-                "approveStatus": "unapproved",
                 ...Array.from({ length: 31 }, (_, i) => ({
                     [`date_${i + 1}`]: (i + 1) % 4 === 0? "〇" : ""
                 })).reduce((acc, curr) => ({...acc,...curr }), {})
@@ -463,8 +449,6 @@ const GridExample = () => {
                 "入庫時間": "18:00",
                 "使用車両(トン)": "13",
                 "checkboxCol": "",
-                "tokyoBranchCol": "品川営業所",
-                "approveStatus": "approved",
                 ...Array.from({ length: 31 }, (_, i) => ({
                     [`date_${i + 1}`]: (i + 1) % 5 === 0? "〇" : ""
                 })).reduce((acc, curr) => ({...acc,...curr }), {})
@@ -479,8 +463,6 @@ const GridExample = () => {
                 "入庫時間": "19:00",
                 "使用車両(トン)": "2",
                 "checkboxCol": "",
-                "tokyoBranchCol": "札幌支店",
-                "approveStatus": "unapproved",
                 ...Array.from({ length: 31 }, (_, i) => ({
                     [`date_${i + 1}`]: (i + 1) % 2 === 0? "〇" : ""
                 })).reduce((acc, curr) => ({...acc,...curr }), {})
@@ -495,8 +477,6 @@ const GridExample = () => {
                 "入庫時間": "19:00",
                 "使用車両(トン)": "10",
                 "checkboxCol": "",
-                "tokyoBranchCol": "福岡支店",
-                "approveStatus": "approved",
                 ...Array.from({ length: 31 }, (_, i) => ({
                     [`date_${i + 1}`]: (i + 1) % 6 === 0? "〇" : ""
                 })).reduce((acc, curr) => ({...acc,...curr }), {})
@@ -516,57 +496,6 @@ const GridExample = () => {
             headerClass: "header-center checkbox",
         },
         {
-            field: "tokyoBranchCol",
-            headerName: "",
-            width: 110,
-            headerClass: "header-center tokyoBranchCol",
-            editable: true,
-            cellEditor: "agSelectCellEditor",
-            cellEditorParams: {
-                values: branchOptions
-            } as ISelectCellEditorParams,
-            valueFormatter: (params: ValueFormatterParams) => params.value || "",
-            cellRenderer: (params: ICellRendererParams) => {
-                return (
-                    <div style={{ textAlign: 'left'}}>
-                        {params.value || ''}
-                    </div>
-                );
-            }
-        },
-        {
-            field: "approveStatus",
-            headerName: "",
-            width: 130,
-            cellRenderer: (params: ICellRendererParams) => {
-                const status = params.data?.approveStatus;
-                const content = status === "approved"? (
-                    <span>
-        承認済
-        <a
-            href="#"
-            style={{
-                marginLeft: "5px",
-                color: "#3a8aca"
-            }}
-        >
-          差戻し
-        </a>
-      </span>
-                ) : status === "unapproved"? (
-                    <span>未承認</span>
-                ) : (
-                    <span></span>
-                );
-                return (
-                    <div style={{ textAlign: 'left'}}>
-                        {content}
-                    </div>
-                );
-            },
-            headerClass: "header-center"
-        },
-        {
             field: "AM",
             headerClass: "header-center",
             width: 60,
@@ -658,28 +587,7 @@ const GridExample = () => {
 
     // 处理编辑按钮点击
     const handleEditClick = () => {
-        alert('編集按钮被点击');
-    };
-
-    const handleAddRow = () => {
-        const newRow: any = {
-            "AM": "",
-            "発": "",
-            "着": "",
-            "系統": "",
-            "線便名": "",
-            "入庫場所": "",
-            "入庫時間": "",
-            "使用車両(トン)": "",
-            "checkboxCol": "",
-            "tokyoBranchCol": "",
-            "approveStatus": ""
-        };
-        for (let i = 1; i <= 31; i++) {
-            newRow[`date_${i}`] = "";
-        }
-
-        setRowData([...rowData, newRow]);
+        alert('保存按钮被点击');
     };
 
     // 关闭聊天侧边栏
@@ -691,59 +599,68 @@ const GridExample = () => {
         <div style={containerStyle}>
             <div className="order-info-container">
                 <div className="order-info-section">
-                    <div style={{ fontSize: '14px' }}>発注詳細</div>
+                    <div style={{ fontSize: '14px',letterSpacing:'5px' }}>受注詳細 指示書 ({affiliationName})</div>
                     <button className="message-btn" onClick={handleMessageClick}>
                         メッセージ
                     </button>
                 </div>
 
                 <div className="order-info-section">
-                    <h3>輸送パートナー </h3>
+                    <h3>依頼情報 </h3>
                     <div className="order-info-row">
-                        輸送パートナーID：{orderInfo.deliveryPartner.id}
+                         年月<span style={{ marginLeft: '130px' }}>{orderInfo.deliveryPartner.monthYear}</span>
                     </div>
                     <div className="order-info-row">
-                        輸送パートナー名：{orderInfo.deliveryPartner.name}
+                        依頼ベース<span style={{ marginLeft: '87px' }}>{orderInfo.deliveryPartner.affiliationName}</span>
                     </div>
                 </div>
 
-                <div className="order-info-section">
-                    <h3>状態</h3>
-                    <table className="status-section">
-                        <thead>
-                        <tr>
-                            <th>会社コード</th>
-                            <th>ステータス</th>
-                            <th>version</th>
-                            <th>指示書送付</th>
-                            <th>承諾</th>
-                        </tr>
-                        </thead>
-                        <tbody>
-                        <tr>
-                            <td>{orderInfo.status.companyCode}</td>
-                            <td>{orderInfo.status.status}</td>
-                            <td>{orderInfo.status.version}</td>
-                            <td>{orderInfo.status.instructionDate}</td>
-                            <td>{orderInfo.status.approvalDate}</td>
-                        </tr>
-                        </tbody>
-                    </table>
-                </div>
-
+               
                 <div className="order-info-section">
                     <h3>月間運行指示書</h3>
                     <div className="version-select-container">
                         <label>version選択</label>
-                        <select value={orderInfo.monthlyInstruction.selectedVersion}>
+                        <select 
+                            value={orderInfo.monthlyInstruction.selectedVersion}
+                            onChange={(e) => {
+                                setOrderInfo(prev => ({
+                                   ...prev,
+                                    monthlyInstruction: {
+                                       ...prev.monthlyInstruction,
+                                        selectedVersion: e.target.value
+                                    }
+                                }));
+                            }}
+                        >
                             {orderInfo.monthlyInstruction.versionOptions.map(version => (
                                 <option key={version} value={version}>{version}</option>
                             ))}
                         </select>
+                        <button  className="confirm-request-btn" > 確認依頼</button>
                         <button className="edit-btn" onClick={handleEditClick}>
-                            編集
+                            保存
                         </button>
                     </div>
+                     <div style={{ 
+                         marginLeft: '20px', 
+                         marginTop: '40px', 
+                         display: 'flex',
+                         alignItems: 'flex-start'
+                     }}> 
+                         <div style={{ display: 'flex', flexDirection: 'column' }}> 
+                             <span style={{ marginRight: '10px' }}>{documentInfo.corpCode}</span>
+                             <span style={{ marginTop: '15px' }}>{documentInfo.corpName}</span>
+                         </div>
+                         <span style={{ marginLeft: '240px' }}>月間運行指示書</span>
+                         <div style={{ marginLeft: '960px', fontSize: '14px' }}> 
+                             <p>【{documentInfo.reportMonth}】</p>
+                             <p>署名・捺印の上、送達願います。</p>
+                             <p>（御社名+社員・納品担当者印）</p>
+                             <p>{documentInfo.company} {documentInfo.branch}</p>
+                             <p>TEL {documentInfo.corpPhone}</p>
+                             <p>FAX 03-6756-7376/7378</p>
+                        </div>
+                     </div>
                 </div>
             </div>
 
@@ -755,20 +672,86 @@ const GridExample = () => {
                 />
             </div>
 
-            <button className="add-row-btn" onClick={handleAddRow}>
-                +追加
-            </button>
+            <div style={{ marginTop: '40px', marginLeft: '20px', fontSize: '14px' }}>
+              <table style={{ width: '100%', borderCollapse: 'collapse' }}>
+                <tbody>
+                  <tr>
+                    <td style={{ width: '150px', padding: '5px 0' }}>支払代金</td>
+                    <td style={{ padding: '5px 0' }}>{paymentInfo.paymentAmountText}</td>
+                    <td style={{ width: '200px', padding: '5px 0'}}>
+                      <span style={{ 
+                        display: 'inline-block', 
+                        marginLeft:'-800px', 
+                      }}>
+                        受付の署名又は捺印の上返信下さい
+                      </span>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>支払方法</td>
+                    <td>{paymentInfo.paymentMethod}</td>
+                    <td rowSpan={3} style={{ 
+                      verticalAlign: 'top', 
+                      paddingTop: '40px', 
+                      paddingLeft: '0',
+                      position:'relative' 
+                    }}>
+                      <div style={{ 
+                        position:'relative', 
+                        marginLeft: '-590px',
+                        display: 'inline-block' 
+                      }}>
+                        <div style={{ 
+                          border: '1px solid #000', 
+                          width: '60px', 
+                          height: '60px', 
+                          display: 'flex',
+                          justifyContent: 'center',
+                          alignItems: 'center',
+        
+                        }}
+                      >
+                        受付印
+                      </div>
+                      <div 
+                        style={{ 
+                          position: 'absolute',
+                          bottom: 0,
+                          left: '-200px',
+                          width: '200px',
+                          height: '1px',
+                          backgroundColor: '#000',
+                        }}
+                      />
+                     </div>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>支払期限</td>
+                    <td>{paymentInfo.paymentDeadline}</td>
+                  </tr>
+                  <tr>
+                    <td>消費税</td>
+                    <td>{paymentInfo.consumptionTaxText}</td>
+                  </tr>
+                  <tr>
+                    <td>振込手数料</td>
+                    <td>{paymentInfo.transferFeeText}</td>
+                  </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: '30px' }}>
+            <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: '30px', paddingRight: '700px' }}>
                 <div>
-                    <button className="action-btn">変更を保存</button>
-                    <button className="action-btn" style={{ marginLeft: '10px' }}>輸送パートナーに送付する</button>
+                    <button className="action-btn">すべて承諾</button>
+                    <button className="action-btn" style={{ marginLeft: '10px' }}>チェックした指示を承諾</button>
                 </div>
-                <button className="action-btn">代理承諾</button>
+                <button className="action-btn">ダウンロード</button>
             </div>
 
             <div style={{ marginTop: '80px' }}>
-                <span className="history-title-custom">状態・アクション履歴</span>
+                <span className="history-title-custom">履歴管理</span>
                 <table className="history-table-custom">
                     <tbody>
                     {historyData.map((item, index) => (
@@ -806,5 +789,4 @@ const GridExample = () => {
     );
 };
 
-export default GridExample;
-
+export default GridExample;