样式修正

src/pages/Base/Order/index.tsx

@@ -44,53 +44,52 @@ 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"
-    }
-};
-
+// TODO type
 const historyData = [
     {
         type: '履歴',
-        date: '2025/06/16 10:00',
-        action: '指示書生成'
+        actionDate: '2025/06/16 10:00',
+        actionType: '指示書生成'
     },
     {
         type: '履歴',
-        date: '2025/06/16 15:24',
-        action: '指示書編集'
+        actionDate: '2025/06/16 15:24',
+        actionType: '指示書編集'
     },
     {
         type: '履歴',
-        date: '2025/06/16 15:24',
-        action: '指示書送付'
+        actionDate: '2025/06/16 15:24',
+        actionType: '指示書送付'
     }
 ];
 
 const weekTexts = ["火", "水", "木", "金", "土", "日", "月"];
 
 const GridExample = () => {
+     const [orderInfo, setOrderInfo] = useState({
+        deliveryPartner: {
+            id: "0311111111",
+            corpName: "AAA株式会社"
+        },
+        status: {
+            corpCode: "R000001",
+            orderStatus: "全承諾",
+            version: 1,
+            instructionDeliveryDate: "2025/6/25",
+            commitDate: "2025/6/25"
+        },
+        monthlyInstruction: {
+            versionOptions: ["ver-1", "ver-2", "ver-3", "ver-4", "ver-5"],
+            selectedVersion: "ver-1"
+        }
+    });
     const containerStyle = useMemo(() => ({ width: "100%" }), []);
     const gridStyle = useMemo(() => ({ width: "100%" }), []);
     const [rowData, setRowData] = useState(initializeRowData());
     const [showDialog, setShowDialog] = useState(false);
     const [modifiedCells, setModifiedCells] = useState<Set<string>>(new Set());
     const [selectedCell, setSelectedCell] = useState<{rowIndex: number | null, colId: string, currentValue: string} | null>(null);
-    const [cellReasons, setCellReasons] = useState<Record<string, string>>({}) ;
+    const [cellReasons, setCellReasons] = useState<Record<string, string>>({});
     const [showChat, setShowChat] = useState(false); // 控制聊天侧边栏显示的状态
 
     // 初始化样式
@@ -147,17 +146,17 @@ const GridExample = () => {
         font-weight: normal;
       }
 
-      .version-select-container {
+      .base-select-container {
         display: flex;
         align-items: center;
         margin-left: 20px;
       }
-      .version-select-container label {
+      .base-select-container label {
         margin-right: 10px;
         white-space: nowrap;
         font-size: 14px;
       }
-      .version-select-container select {
+      .base-select-container select {
         padding: 5px 35px;
         font-size: 14px;
         margin-left: 20px;
@@ -286,12 +285,14 @@ const GridExample = () => {
             columns.push({
                 headerName: i.toString(),
                 headerClass: "header-center date-group-header",
+            
                 children: [
                     {
                         field: colId,
                         headerName: weekTexts[weekIndex],
                         headerClass: "header-center",
-                        width: 55,
+                        flex: 1,
+                        minWidth: 55, 
                         cellRenderer: (params: ICellRendererParams) => {
                             const cellValue = params.value || "";
                             const rowIndex = params.node.rowIndex;
@@ -342,14 +343,14 @@ const GridExample = () => {
     function initializeRowData() {
         return [
             {
-                "AM": "",
-                "発": "032990",
-                "着": "025990",
-                "系統": "02",
-                "線便名": "大賀10t①",
-                "入庫場所": "羽田CGB",
-                "入庫時間": "21:00",
-                "使用車両(トン)": "13",
+                "amFlag": "",
+                "departureCode": "032990",
+                "arrivalCode": "025990",
+                "systemCode": "02",
+                "lineName": "大賀10t①",
+                "wareHouseLocation": "羽田CGB",
+                "wareHouseTime": "21:00",
+                "vehicleTon": "13",
                 "checkboxCol": "",
                 "tokyoBranchCol": "東京支店",
                 "approveStatus": "approved",
@@ -358,14 +359,14 @@ const GridExample = () => {
                 })).reduce((acc, curr) => ({...acc,...curr }), {})
             },
             {
-                "AM": "",
-                "発": "032990",
-                "着": "027990",
-                "系統": "23",
-                "線便名": "大賀10t②",
-                "入庫場所": "桜丘",
-                "入庫時間": "19:00",
-                "使用車両(トン)": "13",
+                "amFlag": "",
+                "departureCode": "032990",
+                "arrivalCode": "027990",
+                "systemCode": "23",
+                "lineName": "大賀10t②",
+                "wareHouseLocation": "桜丘",
+                "wareHouseTime": "19:00",
+                "vehicleTon": "13",
                 "checkboxCol": "",
                 "tokyoBranchCol": "神奈川支店",
                 "approveStatus": "unapproved",
@@ -374,14 +375,14 @@ const GridExample = () => {
                 })).reduce((acc, curr) => ({...acc,...curr }), {})
             },
             {
-                "AM": "＊",
-                "発": "032990",
-                "着": "027990",
-                "系統": "G8",
-                "線便名": "大賀10t③",
-                "入庫場所": "目黒",
-                "入庫時間": "18:00",
-                "使用車両(トン)": "13",
+                "amFlag": "＊",
+                "departureCode": "032990",
+                "arrivalCode": "027990",
+                "systemCode": "G8",
+                "lineName": "大賀10t③",
+                "wareHouseLocation": "目黒",
+                "wareHouseTime": "18:00",
+                "vehicleTon": "13",
                 "checkboxCol": "",
                 "tokyoBranchCol": "品川営業所",
                 "approveStatus": "approved",
@@ -390,14 +391,14 @@ const GridExample = () => {
                 })).reduce((acc, curr) => ({...acc,...curr }), {})
             },
             {
-                "AM": "",
-                "発": "032990",
-                "着": "027990",
-                "系統": "G9",
-                "線便名": "西大阪交表",
-                "入庫場所": "羽田CGB",
-                "入庫時間": "21:00",
-                "使用車両(トン)": "13",
+                "amFlag": "",
+                "departureCode": "032990",
+                "arrivalCode": "027990",
+                "systemCode": "G9",
+                "lineName": "西大阪交表",
+                "wareHouseLocation": "羽田CGB",
+                "wareHouseTime": "21:00",
+                "vehicleTon": "13",
                 "checkboxCol": "",
                 "tokyoBranchCol": "札幌支店",
                 "approveStatus": "unapproved",
@@ -406,14 +407,14 @@ const GridExample = () => {
                 })).reduce((acc, curr) => ({...acc,...curr }), {})
             },
             {
-                "AM": "",
-                "発": "061990",
-                "着": "032990",
-                "系統": "06",
-                "線便名": "羽田CG交裏",
-                "入庫場所": "西大阪B",
-                "入庫時間": "19:00",
-                "使用車両(トン)": "10",
+                "amFlag": "",
+                "departureCode": "061990",
+                "arrivalCode": "032990",
+                "systemCode": "06",
+                "lineName": "羽田CG交裏",
+                "wareHouseLocation": "西大阪B",
+                "wareHouseTime": "19:00",
+                "vehicleTon": "10",
                 "checkboxCol": "",
                 "tokyoBranchCol": "福岡支店",
                 "approveStatus": "approved",
@@ -422,14 +423,14 @@ const GridExample = () => {
                 })).reduce((acc, curr) => ({...acc,...curr }), {})
             },
             {
-                "AM": "",
-                "発": "032990",
-                "着": "032990",
-                "系統": "M8",
-                "線便名": "大賀10t⑥",
-                "入庫場所": "羽田CGB",
-                "入庫時間": "21:00",
-                "使用車両(トン)": "13",
+                "amFlag": "",
+                "departureCode": "032990",
+                "arrivalCode": "032990",
+                "systemCode": "M8",
+                "lineName": "大賀10t⑥",
+                "wareHouseLocation": "羽田CGB",
+                "wareHouseTime": "21:00",
+                "vehicleTon": "13",
                 "checkboxCol": "",
                 "tokyoBranchCol": "東京支店",
                 "approveStatus": "approved",
@@ -438,14 +439,14 @@ const GridExample = () => {
                 })).reduce((acc, curr) => ({...acc,...curr }), {})
             },
             {
-                "AM": "",
-                "発": "032990",
-                "着": "053990",
-                "系統": "06",
-                "線便名": "中部日祝",
-                "入庫場所": "成城",
-                "入庫時間": "19:00",
-                "使用車両(トン)": "13",
+                "amFlag": "",
+                "departureCode": "032990",
+                "arrivalCode": "053990",
+                "systemCode": "06",
+                "lineName": "中部日祝",
+                "wareHouseLocation": "成城",
+                "wareHouseTime": "19:00",
+                "vehicleTon": "13",
                 "checkboxCol": "",
                 "tokyoBranchCol": "神奈川支店",
                 "approveStatus": "unapproved",
@@ -454,14 +455,14 @@ const GridExample = () => {
                 })).reduce((acc, curr) => ({...acc,...curr }), {})
             },
             {
-                "AM": "＊",
-                "発": "032990",
-                "着": "027990",
-                "系統": "G8",
-                "線便名": "大賀10t③",
-                "入庫場所": "目黒",
-                "入庫時間": "18:00",
-                "使用車両(トン)": "13",
+                "amFlag": "＊",
+                "departureCode": "032990",
+                "arrivalCode": "027990",
+                "systemCode": "G8",
+                "lineName": "大賀10t③",
+                "wareHouseLocation": "目黒",
+                "wareHouseTime": "18:00",
+                "vehicleTon": "13",
                 "checkboxCol": "",
                 "tokyoBranchCol": "品川営業所",
                 "approveStatus": "approved",
@@ -470,14 +471,14 @@ const GridExample = () => {
                 })).reduce((acc, curr) => ({...acc,...curr }), {})
             },
             {
-                "AM": "",
-                "発": "032990",
-                "着": "132990",
-                "系統": "02",
-                "線便名": "大賀7t",
-                "入庫場所": "八幡山",
-                "入庫時間": "19:00",
-                "使用車両(トン)": "2",
+                "amFlag": "",
+                "departureCode": "032990",
+                "arrivalCode": "132990",
+                "systemCode": "02",
+                "lineName": "大賀7t",
+                "wareHouseLocation": "八幡山",
+                "wareHouseTime": "19:00",
+                "vehicleTon": "2",
                 "checkboxCol": "",
                 "tokyoBranchCol": "札幌支店",
                 "approveStatus": "unapproved",
@@ -486,14 +487,14 @@ const GridExample = () => {
                 })).reduce((acc, curr) => ({...acc,...curr }), {})
             },
             {
-                "AM": "",
-                "発": "061990",
-                "着": "032990",
-                "系統": "06",
-                "線便名": "羽田CG交裏",
-                "入庫場所": "西大阪B",
-                "入庫時間": "19:00",
-                "使用車両(トン)": "10",
+                "amFlag": "",
+                "departureCode": "061990",
+                "arrivalCode": "032990",
+                "systemCode": "06",
+                "lineName": "羽田CG交裏",
+                "wareHouseLocation": "西大阪B",
+                "wareHouseTime": "19:00",
+                "vehicleTon": "10",
                 "checkboxCol": "",
                 "tokyoBranchCol": "福岡支店",
                 "approveStatus": "approved",
@@ -542,17 +543,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>
                 ) : (
@@ -567,8 +582,9 @@ const GridExample = () => {
             headerClass: "header-center"
         },
         {
-            field: "AM",
+            field: "amFlag",
             headerClass: "header-center",
+            headerName: "AM",
             width: 60,
         },
         {
@@ -576,32 +592,37 @@ const GridExample = () => {
             headerClass: "header-center line-group-header",
             children: [
                 {
-                    field: "発",
+                    field: "departureCode",
                     headerClass: "header-center",
+                    headerName: "発",
                     width: 85,
                 },
                 {
-                    field: "着",
+                    field: "arrivalCode",
                     headerClass: "header-center",
+                    headerName: "着",
                     width: 85,
                 },
                 {
-                    field: "系統",
+                    field: "systemCode",
                     headerClass: "header-center",
+                    headerName: "系統",
                     width: 65,
                 },
                 {
-                    field: "線便名",
+                    field: "lineName",
                     headerClass: "header-center",
+                    headerName: "線便名",
                     width: 120,
                 },
             ],
         },
-        { field: "入庫場所", headerClass: "header-center", width: 110 },
-        { field: "入庫時間", headerClass: "header-center", width: 90 },
+        { field: "wareHouseLocation", headerClass: "header-center",headerName: "入庫場所", width: 110 },
+        { field: "wareHouseTime", headerClass: "header-center",headerName: "入庫時間", width: 90 },
         {
-            field: "使用車両(トン)",
+            field: "vehicleTon",
             headerClass: "header-center",
+            headerName: "使用車両(トン)",
             width: 125,
             cellRenderer: (params: ICellRendererParams) => {
                 return (
@@ -663,14 +684,14 @@ const GridExample = () => {
 
     const handleAddRow = () => {
         const newRow: any = {
-            "AM": "",
-            "発": "",
-            "着": "",
-            "系統": "",
-            "線便名": "",
-            "入庫場所": "",
-            "入庫時間": "",
-            "使用車両(トン)": "",
+            "amFlag": "",
+            "departureCode": "",
+            "arrivalCode": "",
+            "systemCode": "",
+            "lineName": "",
+            "wareHouseLocation": "",
+            "wareHouseTime": "",
+            "vehicleTon": "",
             "checkboxCol": "",
             "tokyoBranchCol": "",
             "approveStatus": ""
@@ -703,7 +724,7 @@ const GridExample = () => {
                         輸送パートナーID：{orderInfo.deliveryPartner.id}
                     </div>
                     <div className="order-info-row">
-                        輸送パートナー名：{orderInfo.deliveryPartner.name}
+                        輸送パートナー名：{orderInfo.deliveryPartner.corpName}
                     </div>
                 </div>
 
@@ -721,11 +742,11 @@ const GridExample = () => {
                         </thead>
                         <tbody>
                         <tr>
-                            <td>{orderInfo.status.companyCode}</td>
-                            <td>{orderInfo.status.status}</td>
+                            <td>{orderInfo.status.corpCode}</td>
+                            <td>{orderInfo.status.orderStatus}</td>
                             <td>{orderInfo.status.version}</td>
-                            <td>{orderInfo.status.instructionDate}</td>
-                            <td>{orderInfo.status.approvalDate}</td>
+                            <td>{orderInfo.status.instructionDeliveryDate}</td>
+                            <td>{orderInfo.status.commitDate}</td>
                         </tr>
                         </tbody>
                     </table>
@@ -733,9 +754,20 @@ const GridExample = () => {
 
                 <div className="order-info-section">
                     <h3>月間運行指示書</h3>
-                    <div className="version-select-container">
+                    <div className="base-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>
                             ))}
@@ -774,8 +806,8 @@ const GridExample = () => {
                     {historyData.map((item, index) => (
                         <tr key={index}>
                             <td className="type-td">{item.type}</td>
-                            <td className="date-td">{item.date}</td>
-                            <td className="action-td">{item.action}</td>
+                            <td className="date-td">{item.actionDate}</td>
+                            <td className="action-td">{item.actionType}</td>
                         </tr>
                     ))}
                     </tbody>

src/pages/Partner/Order/index.tsx

@@ -35,7 +35,7 @@ const reasonOptions = [
 ];
 
 const affiliationName = "羽田ベース"; 
-
+// TODO type
 const historyData = [
     {
         type: '履歴',
@@ -138,7 +138,7 @@ const GridExample = () => {
       }
 
        .confirm-request-btn {
-        margin-left:70%;
+        margin-left:65%;
         padding: 7px 50px;
         background-color: #000;
         color: #fff;
@@ -176,7 +176,7 @@ const GridExample = () => {
         position: relative;
         top: -17px;
       }
-      .edit-btn {
+      .save-btn {
         margin-left: auto;
         padding: 7px 50px;
         background-color: #000;
@@ -291,7 +291,8 @@ const GridExample = () => {
                         field: colId,
                         headerName: weekTexts[weekIndex],
                         headerClass: "header-center",
-                        width: 55,
+                        flex: 1,
+                        minWidth: 55, 
                         cellRenderer: (params: ICellRendererParams) => {
                             const cellValue = params.value || "";
                             const rowIndex = params.node.rowIndex;
@@ -637,7 +638,7 @@ const GridExample = () => {
                             ))}
                         </select>
                         <button  className="confirm-request-btn" > 確認依頼</button>
-                        <button className="edit-btn" onClick={handleEditClick}>
+                        <button className="save-btn" onClick={handleEditClick}>
                             保存
                         </button>
                     </div>
@@ -645,14 +646,16 @@ const GridExample = () => {
                          marginLeft: '20px', 
                          marginTop: '40px', 
                          display: 'flex',
-                         alignItems: 'flex-start'
+                         alignItems: 'flex-start',
+                         width: '100%',
+                         boxSizing: 'border-box'
                      }}> 
                          <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' }}> 
+                         <span style={{ marginLeft: '140px' }}>月間運行指示書</span>
+                         <div style={{ marginLeft: 'auto', fontSize: '14px' }}> 
                              <p>【{documentInfo.reportMonth}】</p>
                              <p>署名・捺印の上、送達願います。</p>
                              <p>（御社名+社員・納品担当者印）</p>