Driver Payment Summary - Copy this React, Tailwind Component to your project

PARA ATENCION DE OBSERVACIONES DE LA AUDITORIA INTERNA Crea una pantalla de resumen de pagos de choferes, donde se obtiene desde una API los servicios que no se han pagado. El reporte debe indicar cuantos servicios pendientes por pagar hay. Cada servicio debe visualizarse de forma independiente y debe indicar lo siguiente: -Folio (folio) -Consto Flete(el total de los campos services.monto) -Ruta (direcciónInicio a direcciónDestino) -Fechas (fechaInicio hasta fechaFin) -Dias de viaje (diastranscurridos entre fechaInicio hasta fechaFin) -Total de Km (kilómetros) -Rendimiento (kilómetros/2.5) -Total anticipos (una tabla con las columnas Fecha,Concepto,Monto,Referencia obtenida del campo deposits y calculando el total) En pantalla el usuario debe poder ver el resumen con lo siguiente: -Total de días en ruta (la suma de todos los días de los servicios) -Total de kilómetros recorridos (El total de los kilómetros de todos los servicios) -Total de depósitos (el total de los depósitos en todos los servicios) - Total costo Fletes ( el total de serivices.monto de todos los servicios) -Total Sueldo (sera igual al 16% de Total Costo Fletes) -Total a pagar (sera igual a Total sueldo menos Total depósitos) La información debe estar ordenada y debe ser mobileFirst. El objeto de cada servicio tiene la siguiente estructura: { "_id": { "$oid": "679dbc35337733896f3ea1f9" }, "cliente": "679dab5e82810e957419c8af", "tipoServicio": "Pago a Credito", "direccionInicio": "CALLE DEL TRABAJO MZ 226 LT 5", "direccionDestino": "ATIZAPAN DE ZARAGOZA ", "unidad": "679da25febec2e5182687b4b", "status": "Finalizado", "fechaInicio": "2025-01-03T00:05", "fechaFin": "2025-02-11T00:05", "estado": "Finalizado", "createAt": "2025-02-01T00:09", "caja": "679daa8782810e957419c8ad", "chofer": "679daad882810e957419c8ae", "services": [ { "concepto": "v", "monto": "15000" } ], "folio": "TR2025-00000", "clienteData": { "id": { "$oid": "679dab5e82810e957419c8af" }, "_id": { "$oid": "679dab5e82810e957419c8af" }, "razonSocial": "DHL MÉXICO 3 S.A. DE C.V.", "rfc": "DHLA901026SA3", "telefono": "5514374912", "correo": "saul@correo.com", "direccion": "Calle del trabajo Mz.226 Lt 5 Col. Lomas de la era, Del. A. Obregón, C.P. 01860", "contacto": "FERNANDO CONTRERAS", "telefonoContacto": "5533262860", "status": "Activo", "images": [], "createdAt": "2025-02-01T05:04:30.917Z" }, "unidadData": { "id": { "$oid": "679da25febec2e5182687b4b" }, "_id": { "$oid": "679da25febec2e5182687b4b" }, "marca": "International (Dina78)", "modelo": "2015", "placas": "ABC-1234", "color": "Blanco", "numEconomico": "1", "serie": "3578951", "status": "Activo", "esDisponible": "Disponible", "images": [ { "path": "uploads/vehicles/imagen_1738383967272-235550778.jpg", "filename": "imagen_1738383967272-235550778.jpg" } ], "createdAt": "2025-02-01T04:26:07.275Z" }, "choferData": { "id": { "$oid": "679daad882810e957419c8ae" }, "_id": { "$oid": "679daad882810e957419c8ae" }, "nombre": "ESTEBAN olvera garcia", "rfc": "MARA901026SA3", "telefono": "5589784112", "correo": "rosa.isella@siradiacion.com.mx", "direccion": "Calle del trabajo Mz.226 Lt 5 Col. Lomas de la era, Del. A. Obregón, C.P. 01860", "numLicencia": "680000116666", "status": "Activo", "esDisponible": "Disponible", "images": [ { "path": "uploads/drivers/licencia_1738386136742-203986547.pdf", "filename": "licencia_1738386136742-203986547.pdf" }, { "path": "uploads/drivers/imagen_1738386136747-111648341.png", "filename": "imagen_1738386136747-111648341.png" } ], "createdAt": "2025-02-01T05:02:16.749Z" }, "cajaData": { "id": { "$oid": "679daa8782810e957419c8ad" }, "_id": { "$oid": "679daa8782810e957419c8ad" }, "marca": "International (Dina78)", "modelo": "2015", "placas": "ABC-1234", "color": "Blanco", "numEconomico": "1", "serie": "3578951", "capacidad": "53", "status": "Activo", "esDisponible": "Disponible", "images": [ { "path": "uploads/boxes/imagen_1738386055973-15491800.jpg", "filename": "imagen_1738386055973-15491800.jpg" } ], "createdAt": "2025-02-01T05:00:55.977Z" }, "fechaSolicitud": { "$date": "2025-02-01T06:16:21.812Z" }, "year": 2025, "pays": [ { "fechaPago": "2025-02-11", "montoPago": "15000", "referenciaPago": "1515" } ], "totalMonto": 15000, "numEstado": 2, "deposits": [ { "fechaDeposito": "2025-02-11", "concepto": "Gas", "monto": "6000", "referencia": "1225" }, { "fechaDeposito": "2025-02-17", "concepto": "Gas", "monto": "5200", "referencia": "1225" } ], "estadoPagos": "Pagado", "adeudo": 0, "comprobanteFinal": "comprobanteFinal_1738391402479-430755817.pdf", "pagadoChofer": "Pendiente", "kilometros": 105 }