<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>
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter