ds-yamato-bbi-base/src/pages/Partner/Order/index.tsx

"use client";

import React, { useMemo, useState, useEffect } from "react";
import { AgGridReact } from "ag-grid-react";
import {
    ClientSideRowModelModule,
    ColDef,
    ColGroupDef,
    ModuleRegistry,
    ValidationModule,
    ICellRendererParams,
    CellClassParams,
    CellClickedEvent,
    SelectEditorModule,
    CellStyleModule
} from "ag-grid-community";
import "ag-grid-community/styles/ag-theme-alpine.css";
import DateChangeDialog from "./DateChangeDialog";
import Chat from "./ChatPartner";

// 注册必要的模块
ModuleRegistry.registerModules([
    ClientSideRowModelModule,
    SelectEditorModule,
    CellStyleModule,
    ...(process.env.NODE_ENV!== "production"? [ValidationModule] : [])
]);

// 事由选项
const reasonOptions = [
    "臨時変更",
    "計画変更",
    "休日調整",
    "その他"
];

const affiliationName = "羽田ベース"; 
// TODO type
const historyData = [
    {
        type: '履歴',
        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());
    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 [showChat, setShowChat] = useState(false); // 控制聊天侧边栏显示的状态

    // 初始化样式
    useEffect(() => {
        const style = document.createElement('style');
        style.textContent = `
      .ag-theme-alpine .header-center .ag-header-cell-label {
        justify-content: center !important;
        text-align: center !important;
      }

      .ag-theme-alpine .header-center.ag-header-group-cell {
        text-align: center !important;
      }

      .ag-theme-alpine .header-center.ag-header-group-cell .ag-header-group-cell-label {
        justify-content: center !important;
        display: flex !important;
        width: 100% !important;
      }

      // .order-info-container {
      //   margin-bottom: 20px;
      //   padding: 15px;
      //   border: 1px solid #dcdcdc;
      //   border-radius: 4px;
      // }
      .order-info-section {
        margin-bottom: 35px;
      }
      .order-info-section h3 {
        margin: 0 0 5px 0;
        font-size: 14px;
        font-weight: bold;
      }
      .order-info-row {
        margin: 10px 0 10px 20px;
        font-size: 14px;
      }
      .status-section {
        width: 100%;
        border-collapse: collapse;
        margin-top: 8px;
        margin-left: 10px;
      }
      .status-section th,
      .status-section td {
        padding: 5px 10px;
        text-align: left;
        font-size: 14px;
      }

      .status-section th {
        font-weight: normal;
      }

       .confirm-request-btn {
        margin-left:80%;
        padding: 7px 50px;
        background-color: #000;
        color: #fff;
        border: none;
        cursor: pointer;
        font-size: 14px;
        margin-top: 50px;
        white-space: nowrap;
      }

      .partner-select-container {
        display: flex;
        align-items: center;
        margin-left: 20px;
      }
      .partner-select-container label {
        margin-right: 10px;
        white-space: nowrap;
        font-size: 14px;
        font-weight: bold;
      }
      .partner-select-container select {
        padding: 5px 35px;
        font-size: 14px;
        margin-left: 20px;
        padding-left: 10px;
      }

      .message-btn {
        float: right;
        padding: 7px 50px;
        background-color: #000;
        color: #fff;
        border: none;
        cursor: pointer;
        position: relative;
        top: -17px;
      }
      .save-btn {
        margin-left: auto;
        padding: 7px 50px;
        background-color: #000;
        color: #fff;
        border: none;
        cursor: pointer;
        margin-top: 50px;
        white-space: nowrap;
      }
      .action-buttons-container {
        display: flex;
        justify-content: flex-end; 
        gap: 10px; 
            
      }
      .add-row-btn {
        background: transparent;
        border: none;
        color: #0070c0;
        cursor: pointer;
        margin-left: 5px;
      }
      .action-btn {
        background-color: #000;
        color: #fff;
        border: none;
        padding: 7px 20px;
        cursor: pointer;
        font-size: 14px;
      }
      .history-table-custom {
        width: 100%;
        border-collapse: collapse;
      }
      .type-td {
        padding: 5px 20px;
      }
      .date-td {
        padding: 5px 20px;
      }
      .action-td {
        padding: 5px 20px;
      }
      .history-title-custom {
        font-size: 14px;
        font-weight: bold;
        margin-bottom: 8px;
        display: block;
      }
      .ag-header-cell-resize {
       &:after {
        display: none;
       }
      }
     .ag-theme-alpine .ag-cell {
       border-right: 1px solid #dcdcdc;
       text-align: center;
     }
     .ag-theme-alpine .ag-header-cell {
       border-right: 1px solid #dcdcdc;
     }
     .line-group-header {
       border-right: 1px solid #dcdcdc;
     }
     .date-group-header {
       border-right: 1px solid #dcdcdc !important;
     }
     .tokyoBranchCol{
       display: none;
     }
     .monthly-instruction-text {
       margin-left: 140px;
       white-space: nowrap;
      }
     .chat-sidebar {
       position: fixed;
       top: 0;
       right: 0;
       width: 1060px;
       height: 100vh;
       background-color: #fff;
       box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
       z-index: 1000;
       display: flex;
       flex-direction: column;
       padding: 20px;
       box-sizing: border-box;
       overflow: hidden;
     }
     .chat-messages-container {
       flex: 1;
       overflow-y: auto;
       margin-bottom: 16px;
     }
     .overlay {
       position: fixed;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       background-color: rgba(0, 0, 0, 0.5);
       z-index: 999;
     }
    .desktop-only {
      display: table-cell;
    }
    .mobile-only {
      display: none;
    }
    .desktop-button-only {
      display: table-cell;
    }
    .mobile-button-only {
      display: none;
    }
        @media (max-width: 1280px) {
         .title-main {
           margin-left: -10px; 
           letter-spacing: 1px !important;
        }
        .message-text {
          color: #0070c0;
          text-decoration: underline;
          cursor: pointer;
          float: right;
          margin-top: 20px;
      }
        .desktop-only {
          display: none !important;
          visibility: hidden !important; 
          height: 0 !important; 
          padding: 0 !important; 
          margin: 0 !important;
        }
        .mobile-only {
          display: table-cell;
        }
        .desktop-button-only {
          display: none;
        }
        .mobile-button-only {
          display: table-cell;
        }
        .mobile-button-only span {
          color: #0070c0;
          text-decoration: underline;
          cursor: pointer;
          white-space: nowrap;
        }
        .message-btn {
          padding: 4px 20px; 
          top: 20px;   
          margin-right: -25px;     
        }
        .partner-select-container select {
          margin-left: 5px;
          padding: 3px 15px;
        }
        .order-info-section {
          margin-bottom: 80px;
        }
        .partner-select-container {
          display: flex;
          align-items: center;
          gap: 10px;
          margin-left: 20px;
          margin-top: 20px;
          flex-wrap: nowrap;
          width: calc(100% - 40px);
        }

        .action-buttons-container {
          display: block;
          margin-top: 20px;
        }

        .confirm-request-btn,
        .save-btn {
          padding: 5px 30px;
          margin-top: 20px;
          margin-left: -10px;
          display: block; 
          width: 140px;
        }
        .monthly-instruction-text {
          margin-left: 10px; 
        }
        .company-info-right {
          margin-top: 120px !important;
          margin-left: -70px !important;
        }
        .payment-table {
          width: 100% !important; 
        }
        .payment-table tbody tr {
          display: block;
          margin-bottom: 10px; 
        }
        .payment-table tbody td {
          display: block; 
          width: 100% !important; 
          box-sizing: border-box; 
          padding: 5px 0 !important; 
        }
        .mobile-text{
          font-weight: bold;
          margin-left:-15px;
        }
        .btn-group-mobile {
          display: block !important;
          text-align: center;
          padding-right: 0 !important; 
          margin-top: 30px;
        }

        .btn-group-mobile .action-btn {
          display: block !important; 
          margin: 0 auto 25px auto !important;
          width: 200px; 
          padding: 8px 0 !important;
        }
        .request-info-section {
          border-bottom: 1px solid #000; 
          padding-bottom: 10px;
        }
      }

        @media (max-width: 345px) {
          .partner-select-container select {
            margin-left: -15px ; 
          }
          .order-info-month{
             margin-left:123px !important;
          }
          .order-info-affiliation{
             margin-left:80px !important;
          }
        }
    `;
        document.head.appendChild(style);

        return () => {
            document.head.removeChild(style);
        };
    }, []);

    // 生成1-31的日期列定义
    const generateDateColumns = () => {
        const columns: ColGroupDef[] = [];
        for (let i = 1; i <= 31; i++) {
            const weekIndex = (i - 1) % weekTexts.length;
            const colId = `date_${i}`;
            columns.push({
                headerName: i.toString(),
                headerClass: "header-center date-group-header",
                children: [
                    {
                        field: colId,
                        headerName: weekTexts[weekIndex],
                        headerClass: "header-center",
                        flex: 1,
                        minWidth: 55, 
                        cellRenderer: (params: ICellRendererParams) => {
                            const cellValue = params.value || "";
                            const rowIndex = params.node.rowIndex;
                            const cellKey = `${rowIndex}-${colId}`;
                            const reason = cellReasons[cellKey] || "";

                            return (
                                <div
                                    title={reason? `变更理由：${reason}` : ""}
                                    style={{
                                        minHeight: '100%',
                                        width: '100%',
                                        display: 'flex',
                                        alignItems: 'center',
                                        justifyContent: 'center'
                                    }}
                                >
                                    {cellValue}
                                </div>
                            );
                        },
                        onCellClicked: (params: CellClickedEvent) => {
                            setSelectedCell({
                                rowIndex: params.node.rowIndex,
                                colId: colId,
                                currentValue: params.value as string
                            });
                            setShowDialog(true);
                        },
                        cellStyle: (params: CellClassParams) => {
                            const rowIndex = params.node.rowIndex;
                            const cellKey = `${rowIndex}-${colId}`;
                            const isModified = modifiedCells.has(cellKey);
                            if (isModified) {
                                return { backgroundColor: '#3a8aca' };
                            }
                            return null;
                        }
                    }
                ]
            });
        }
        return columns;
    };


    // 初始化行数据
    function initializeRowData() {
        return [
            {
                "AM": "",
                "発": "032990",
                "着": "025990",
                "系統": "02",
                "線便名": "大賀10t①",
                "入庫場所": "羽田CGB",
                "入庫時間": "21:00",
                "使用車両(トン)": "13",
                "checkboxCol": "",
                ...Array.from({ length: 31 }, (_, i) => ({
                    [`date_${i + 1}`]: (i + 1) % 3 === 0? "〇" : ""
                })).reduce((acc, curr) => ({...acc,...curr }), {})
            },
            {
                "AM": "",
                "発": "032990",
                "着": "027990",
                "系統": "23",
                "線便名": "大賀10t②",
                "入庫場所": "桜丘",
                "入庫時間": "19:00",
                "使用車両(トン)": "13",
                "checkboxCol": "",
                ...Array.from({ length: 31 }, (_, i) => ({
                    [`date_${i + 1}`]: (i + 1) % 4 === 0? "〇" : ""
                })).reduce((acc, curr) => ({...acc,...curr }), {})
            },
            {
                "AM": "＊",
                "発": "032990",
                "着": "027990",
                "系統": "G8",
                "線便名": "大賀10t③",
                "入庫場所": "目黒",
                "入庫時間": "18:00",
                "使用車両(トン)": "13",
                "checkboxCol": "",
                ...Array.from({ length: 31 }, (_, i) => ({
                    [`date_${i + 1}`]: (i + 1) % 5 === 0? "〇" : ""
                })).reduce((acc, curr) => ({...acc,...curr }), {})
            },
            {
                "AM": "",
                "発": "032990",
                "着": "027990",
                "系統": "G9",
                "線便名": "西大阪交表",
                "入庫場所": "羽田CGB",
                "入庫時間": "21:00",
                "使用車両(トン)": "13",
                "checkboxCol": "",
                ...Array.from({ length: 31 }, (_, i) => ({
                    [`date_${i + 1}`]: (i + 1) % 2 === 0? "〇" : ""
                })).reduce((acc, curr) => ({...acc,...curr }), {})
            },
            {
                "AM": "",
                "発": "061990",
                "着": "032990",
                "系統": "06",
                "線便名": "羽田CG交裏",
                "入庫場所": "西大阪B",
                "入庫時間": "19:00",
                "使用車両(トン)": "10",
                "checkboxCol": "",
                ...Array.from({ length: 31 }, (_, i) => ({
                    [`date_${i + 1}`]: (i + 1) % 6 === 0? "〇" : ""
                })).reduce((acc, curr) => ({...acc,...curr }), {})
            },
            {
                "AM": "",
                "発": "032990",
                "着": "032990",
                "系統": "M8",
                "線便名": "大賀10t⑥",
                "入庫場所": "羽田CGB",
                "入庫時間": "21:00",
                "使用車両(トン)": "13",
                "checkboxCol": "",
                ...Array.from({ length: 31 }, (_, i) => ({
                    [`date_${i + 1}`]: (i + 1) % 3 === 0? "〇" : ""
                })).reduce((acc, curr) => ({...acc,...curr }), {})
            },
            {
                "AM": "",
                "発": "032990",
                "着": "053990",
                "系統": "06",
                "線便名": "中部日祝",
                "入庫場所": "成城",
                "入庫時間": "19:00",
                "使用車両(トン)": "13",
                "checkboxCol": "",
                ...Array.from({ length: 31 }, (_, i) => ({
                    [`date_${i + 1}`]: (i + 1) % 4 === 0? "〇" : ""
                })).reduce((acc, curr) => ({...acc,...curr }), {})
            },
            {
                "AM": "＊",
                "発": "032990",
                "着": "027990",
                "系統": "G8",
                "線便名": "大賀10t③",
                "入庫場所": "目黒",
                "入庫時間": "18:00",
                "使用車両(トン)": "13",
                "checkboxCol": "",
                ...Array.from({ length: 31 }, (_, i) => ({
                    [`date_${i + 1}`]: (i + 1) % 5 === 0? "〇" : ""
                })).reduce((acc, curr) => ({...acc,...curr }), {})
            },
            {
                "AM": "",
                "発": "032990",
                "着": "132990",
                "系統": "02",
                "線便名": "大賀7t",
                "入庫場所": "八幡山",
                "入庫時間": "19:00",
                "使用車両(トン)": "2",
                "checkboxCol": "",
                ...Array.from({ length: 31 }, (_, i) => ({
                    [`date_${i + 1}`]: (i + 1) % 2 === 0? "〇" : ""
                })).reduce((acc, curr) => ({...acc,...curr }), {})
            },
            {
                "AM": "",
                "発": "061990",
                "着": "032990",
                "系統": "06",
                "線便名": "羽田CG交裏",
                "入庫場所": "西大阪B",
                "入庫時間": "19:00",
                "使用車両(トン)": "10",
                "checkboxCol": "",
                ...Array.from({ length: 31 }, (_, i) => ({
                    [`date_${i + 1}`]: (i + 1) % 6 === 0? "〇" : ""
                })).reduce((acc, curr) => ({...acc,...curr }), {})
            },
        ];
    }

    // 构建列定义
    const columnDefs: (ColDef | ColGroupDef)[] = [
        {
            field: "checkboxCol",
            headerName: "",
            width: 50,
            cellRenderer: (params: ICellRendererParams) => {
                return <input type="checkbox" />;
            },
            headerClass: "header-center checkbox",
        },
        {
            field: "AM",
            headerClass: "header-center",
            width: 60,
        },
        {
            headerName: "線便",
            headerClass: "header-center line-group-header",
            children: [
                {
                    field: "発",
                    headerClass: "header-center",
                    width: 85,
                },
                {
                    field: "着",
                    headerClass: "header-center",
                    width: 85,
                },
                {
                    field: "系統",
                    headerClass: "header-center",
                    width: 65,
                },
                {
                    field: "線便名",
                    headerClass: "header-center",
                    width: 120,
                },
            ],
        },
        { field: "入庫場所", headerClass: "header-center", width: 110 },
        { field: "入庫時間", headerClass: "header-center", width: 90 },
        {
            field: "使用車両(トン)",
            headerClass: "header-center",
            width: 125,
            cellRenderer: (params: ICellRendererParams) => {
                return (
                    <div style={{ textAlign: 'right'}}>
                        {params.value || ''}
                    </div>
                );
            }
        },
        ...generateDateColumns()
    ];


    // 处理对话框确认
    const handleDialogConfirm = (reason: string, changeValue: string) => {
        if (!selectedCell || selectedCell.rowIndex === null) return;

        const newRowData = [...rowData];
        const currentValue = selectedCell.currentValue;
        const newValue = currentValue === "〇"? "" : "〇";
        const targetRowIndex = selectedCell.rowIndex;
        const targetColId = selectedCell.colId;

        newRowData[targetRowIndex] = {
            ...newRowData[targetRowIndex],
            [targetColId]: newValue
        };
        setRowData(newRowData);

        const cellKey = `${targetRowIndex}-${targetColId}`;
        setModifiedCells(prev => {
            const newSet = new Set(prev);
            newSet.add(cellKey);
            return newSet;
        });

        setCellReasons(prev => ({
            ...prev,
            [cellKey]: reason
        }));

        setShowDialog(false);
    };

    // 处理对话框取消
    const handleDialogCancel = () => {
        setShowDialog(false);
    };

    // 处理消息按钮点击 - 切换聊天侧边栏显示状态
    const handleMessageClick = () => {
        setShowChat(true);
    };

    // 处理编辑按钮点击
    const handleEditClick = () => {
        alert('保存按钮被点击');
    };

    // 关闭聊天侧边栏
    const closeChatSidebar = () => {
        setShowChat(false);
    };

    return (
        <div style={containerStyle}>
            <div className="order-info-container">
                <div className="order-info-section">
                    <div className="title-main" style={{ fontSize: '14px',letterSpacing:'5px' }}>受注詳細 指示書 ({affiliationName})</div>
                    <button className="message-btn desktop-only" onClick={handleMessageClick}>
                        メッセージ
                    </button>
                     <span 
                        className="message-text mobile-only" 
                        onClick={handleMessageClick}
                    >
                        メッセージ
                    </span>
                </div>

                <div className="order-info-section">
                    <h3>依頼情報 </h3>
                    <div className="request-info-section"></div>
                    <div className="order-info-row">
                         年月<span className="order-info-month"  style={{ marginLeft: '130px' }}>{orderInfo.deliveryPartner.monthYear}</span>
                    </div>
                    <div className="order-info-row">
                        依頼ベース<span className="order-info-affiliation" style={{ marginLeft: '87px' }}>{orderInfo.deliveryPartner.affiliationName}</span>
                    </div>
                </div>

               
                <div className="order-info-section">
                    <h3>月間運行指示書</h3>
                    <div className="request-info-section"></div>
                    <div className="partner-select-container">
                        <label>version選択</label>
                        <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>
                        <div className="mobile-button-only">
                          <span>ダウンロード</span>
                        </div>
                    </div>
                    <div className="action-buttons-container">
                      <button className="confirm-request-btn">確認依頼</button>
                      <button className="save-btn" onClick={handleEditClick}>保存</button>
                    </div>
                     <div style={{ 
                         marginLeft: '20px', 
                         marginTop: '40px', 
                         display: 'flex',
                         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',whiteSpace: 'nowrap' }}>{documentInfo.corpName}</span>
                         </div>
                         <span className="monthly-instruction-text">月間運行指示書</span>
                         <div style={{ marginLeft: 'auto', fontSize: '14px' }}> 
                          <div className="company-info-right" style={{ marginLeft: 'auto', 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>
            </div>

            <div style={gridStyle} className="ag-theme-alpine">
                <AgGridReact
                    rowData={rowData}
                    columnDefs={columnDefs}
                    domLayout="autoHeight"
                />
            </div>

            <div style={{ marginTop: '40px', marginLeft: '20px', fontSize: '14px' }}>
              <table className="payment-table" style={{ width: '100%', borderCollapse: 'collapse' }}> 
                <tbody>
                  <tr>
                    <td className="mobile-text" style={{ width: '150px', padding: '5px 0' }}>支払代金</td>
                    <td style={{ padding: '5px 0' }}>{paymentInfo.paymentAmountText}</td>
                    <td className="desktop-only"  style={{ width: '200px', padding: '5px 0'}}>
                      <span style={{ 
                        display: 'inline-block', 
                        marginLeft:'-800px', 
                      }}>
                        受付の署名又は捺印の上返信下さい
                      </span>
                    </td>
                  </tr>
                  <tr>
                    <td className="mobile-text">支払方法</td>
                    <td>{paymentInfo.paymentMethod}</td>
                    <td className="desktop-only" 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 className="mobile-text">支払期限</td>
                    <td>{paymentInfo.paymentDeadline}</td>
                  </tr>
                  <tr>
                    <td className="mobile-text">消費税</td>
                    <td>{paymentInfo.consumptionTaxText}</td>
                  </tr>
                  <tr>
                    <td className="mobile-text">振込手数料</td>
                    <td>{paymentInfo.transferFeeText}</td>
                  </tr>
                  <tr>
                   <td className="mobile-only"  style={{ width: '200px', padding: '5px 0'}}>
                      <span style={{ 
                        display: 'inline-block', 
                      }}>
                        受付の署名又は捺印の上返信下さい
                      </span>
                    </td>
                    <td className="mobile-only" rowSpan={3} style={{ 
                      verticalAlign: 'top', 
                      paddingTop: '40px', 
                      paddingLeft: '0',
                      position:'relative' 
                    }}>
                      <div style={{ 
                        position:'relative', 
                        marginLeft: '85%',
                        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>
                </tbody>
            </table>
        </div>

            <div className="btn-group-mobile" style={{ display: 'flex', justifyContent: 'space-between', marginTop: '30px', paddingRight: '700px' }}>
                <div>
                    <button className="action-btn">すべて承諾</button>
                    <button className="action-btn" style={{ marginLeft: '10px' }}>チェックした指示を承諾</button>
                </div>
                <div className="desktop-button-only">
                  <button className="action-btn">ダウンロード</button>
                </div>
            </div>

            <div style={{ marginTop: '80px' }}>
                <span className="history-title-custom">履歴管理</span>
                <table className="history-table-custom">
                    <tbody>
                    {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>
                        </tr>
                    ))}
                    </tbody>
                </table>
            </div>

            {/* 使用封装的对话框组件 */}
            <DateChangeDialog
                show={showDialog}
                onClose={handleDialogCancel}
                onConfirm={handleDialogConfirm}
                reasonOptions={reasonOptions}
            />

            {/* 聊天侧边栏 */}
            {showChat && (
                <>
                    {/* 半透明背景遮罩 */}
                    <div className="overlay" onClick={closeChatSidebar}></div>

                    {/* 聊天侧边栏容器 */}
                    <div className="chat-sidebar">
                        <Chat onClose={closeChatSidebar} />
                    </div>
                </>
            )}
        </div>
    );
};

export default GridExample;