asdasd

  <h4 className="text-2xl font-bold my-10">{reportData.introdcution.performance_control.title}</h4>
    <p className="mb-6">{reportData.introdcution.performance_control.description}</p>
    <table className="table-auto w-full">
      <caption className="text-lg font-semibold mb-6">{reportData.introdcution.performance_control.table.caption}</caption>
      <thead>
        <tr className="bg-gray-200">
          {Object.values(reportData.introdcution.performance_control.table.column_names).map((columnName, index) => (
            <th key={index} className="px-4 py-2">{columnName}</th>
          ))}
        </tr>
      </thead>
      <tbody>
      {isEditing ? (
          reportData.introdcution.performance_control.table.data.map((rowData, rowIndex) => (
            <tr key={rowIndex} className="bg-white">
              <td className="px-4 py-2">
                <input
                  type="number"
                  className="w-full p-2 rounded-lg border border-gray-300"
                  value={editedData.introdcution.performance_control.table.data[rowIndex].insurance_revenue}
                  onChange={(e) => handleInputChange(e, `introdcution.performance_control.table.data[${rowIndex}].insurance_revenue`)}
                />
              </td>
              <td className="px-4 py-2">
                <input
                  type="number"
                  className="w-full p-2 rounded-lg border border-gray-300"
                  value={editedData.introdcution.performance_control.table.data[rowIndex].loss}
                  onChange={(e) => handleInputChange(e, `introdcution.performance_control.table.data[${rowIndex}].losse`)}
                />
              </td>
              <td className="px-4 py-2">
                <input
                  type="number"
                  className="w-full p-2 rounded-lg border border-gray-300"
                  value={editedData.introdcution.performance_control.table.data[rowIndex].commission_cost}
                  onChange={(e) => handleInputChange(e, `introdcution.performance_control.table.data[${rowIndex}].commission_cost`)}
                />
              </td>
              <td className="px-4 py-2">
                <input
                  type="number"
                  className="w-full p-2 rounded-lg border border-gray-300"
                  value={editedData.introdcution.performance_control.table.data[rowIndex].administrative_costs}
                  onChange={(e) => handleInputChange(e, `introdcution.performance_control.table.data[${rowIndex}].administrative_costs`)}
                />
              </td>
              <td className="px-4 py-2">
                <input
                  type="number"
                  className="w-full p-2 rounded-lg border border-gray-300"
                  value={editedData.introdcution.performance_control.table.data[rowIndex].other_operational_costs}
                  onChange={(e) => handleInputChange(e, `introdcution.performance_control.table.data[${rowIndex}].other_operational_costs`)}
                />
              </td>
              <td className="px-4 py-2">
                <input
                  type="number"
                  className="w-full p-2 rounded-lg border border-gray-300"
                  value={editedData.introdcution.performance_control.table.data[rowIndex].non_operational_costs}
                  onChange={(e) => handleInputChange(e, `introdcution.performance_control.table.data[${rowIndex}].non_operational_costs`)}
                />
              </td>
              <td className="px-4 py-2">
                <input
                  type="number"
                  className="w-full p-2 rounded-lg border border-gray-300"
                  value={editedData.introdcution.performance_control.table.data[rowIndex].personnel_costs}
                  onChange={(e) => handleInputChange(e, `introdcution.performance_control.table.data[${rowIndex}].personnel_costs`)}
                />
              </td>
              <td className="px-4 py-2">
                <input
                  type="number"
                  className="w-full p-2 rounded-lg border border-gray-300"
                  value={editedData.introdcution.performance_control.table.data[rowIndex].depreciation_costs}
                  onChange={(e) => handleInputChange(e, `introdcution.performance_control.table.data[${rowIndex}].depreciation_costs`)}
                />
              </td>
              <td className="px-4 py-2">
                <input
                  type="number"
                  className="w-full p-2 rounded-lg border border-gray-300"
                  value={editedData.introdcution.performance_control.table.data[rowIndex].cost_ratio}
                  onChange={(e) => handleInputChange(e, `introdcution.performance_control.table.data[${rowIndex}].cost_ratio`)}
                />
              </td>
              <td className="px-4 py-2">
                <input
                  type="number"
                  className="w-full p-2 rounded-lg border border-gray-300"
                  value={editedData.introdcution.performance_control.table.data[rowIndex].profit_lost}
                  onChange={(e) => handleInputChange(e, `introdcution.performance_control.table.data[${rowIndex}].profit_lost`)}
                />
              </td>
              
            </tr>
          ))
        ) : (
        reportData.introdcution.performance_control.table.data.map((rowData, rowIndex) => (
          <tr key={rowIndex} className={rowIndex % 2 === 0 ? "bg-gray-100" : "bg-white"}>
            <td className="px-4 py-2">{rowData.insurance_revenue}</td>
            <td className="px-4 py-2">{rowData.loss}</td>
            <td className="px-4 py-2">{rowData.commission_cost}</td>
            <td className="px-4 py-2">{rowData.administrative_costs}</td>
            <td className="px-4 py-2">{rowData.other_operational_costs}</td>
            <td className="px-4 py-2">{rowData.non_operational_costs}</td>
            <td className="px-4 py-2">{rowData.personnel_costs}</td>
            <td className="px-4 py-2">{rowData.depreciation_costs}</td>
            <td className="px-4 py-2">{rowData.cost_ratio}</td>
            <td className="px-4 py-2">{rowData.profit_lost}</td>
            </tr>
          ))
        )}
        
      </tbody>
    </table>