Cambiar indicadores de color para el cliente Alen, Agregar el campo Fecha Entrega en Planta en la pestana de Informacion General

src/Components/Clientes/Traficos/RptClientesTraficos.tsx

@@ -32,6 +32,7 @@ import ClientesServices from '../../../Services/Catalogos/Clientes.Services'
 import reportesServices from '../../../Services/Reportes/reportes.services'
 import DTOFiltrosTraficosClientes from '../../../DTO/Corresponsales/DTOFiltrosTraficosClientes'
 import TraficoCliente from './TraficoCliente'
+import { AlenProgressBar } from '../../Reportes/customCells/AlenProgressBar'
 /* import '../../css/generic01.css' */
 
 interface IProps {}
@@ -92,7 +93,7 @@ export default function RptClientesTraficos(props: IProps) {
       center: true,
       sortable: true,
       filter: true,
-      cellRenderer: ProgressBar,
+      cellRenderer: AlenProgressBar,
     },
     {
       field: 'folioGemco',

src/Components/Clientes/Traficos/TraficoCliente.tsx

@@ -2202,7 +2202,7 @@ export default function TraficoCliente(props:IProps){
                       </Row>
                       <Row style={{padding: "5px 0"}}>
                         <Col sm={12} md={12} lg={4}>
-                          <Row>
+                          <Row className="align-items-center">
                             <Col sm={5}>
                               <Form.Label className="labelSize13px">
                                 Fecha de desaduanamiento
@@ -2231,14 +2231,14 @@ export default function TraficoCliente(props:IProps){
                             </Col>
                           </Row>
                         </Col>
-                        <Col sm={12} md={12} lg={8}>
+                        <Col sm={12} md={12} lg={4}>
-                          <Row>
+                          <Row className="align-items-center justify-content-between">
-                            <Col sm={2}>
+                            <Col sm={3}>
                               <Form.Label className="labelSize13px">
-                                Semaf. fiscal
+                                Semaforo fiscal
                               </Form.Label>
                             </Col>
-                            <Col sm={4}>
+                            <Col sm={8}>
                               <Form.Control
                                 as="select"
                                 className="form-select form-select-sm"
@@ -2254,12 +2254,30 @@ export default function TraficoCliente(props:IProps){
                                 <option value="1">Verde</option>
                               </Form.Control>
                             </Col>
-                            <Col sm={2}>
+                          </Row>
+                        </Col>
+                        <Col xs={12} md={12} lg={4}>
+                          <Row className="align-items-center">
+                            <Col sm={4}>
+                              <Form.Label className="labelSize13px">
+                                Fecha/hora entrega en planta
+                              </Form.Label>
+                            </Col>
+                            <Col sm={8}>
+                              <DatePicker
+                                selected={FHEntregaPlanta}
+                                disabled={Depto !== 'Corresponsalias'}
+                                onChange={(date: any) => setFHEntregaPlanta(date)}
+                                showTimeSelect
+                                timeClassName={handleColor}
+                                dateFormat="MM/dd/yyyy HH:mm:ss"
+                                placeholderText="No definido"
+                                isClearable
+                              />
                             </Col>
                           </Row>
                         </Col>
                         
-                        
                       </Row>
                       <Row style={{padding: "5px 0"}}>
                         <Col sm={12} md={12} lg={6}>

src/Components/Reportes/customCells/AlenProgressBar.tsx

@@ -0,0 +1,42 @@
+import { ICellRendererParams } from "ag-grid-community";
+import { FC, useState, useEffect } from "react";
+
+export const AlenProgressBar: FC<ICellRendererParams> = (props: ICellRendererParams) => {
+    const [Color, setColor] = useState('progress-bar bg-CORRESPONSAL_NORMAL')
+
+  useEffect(() => {
+    if (props.data.proceso === 1) setColor('progress-bar bg-RECHAZOS_PARA_CORRESPONSAL')
+    if (props.data.proceso === 2 || props.data.proceso === 3) {
+      setColor('progress-bar bg-FACTURACION_LISTOS_PARA_FACTURAR')
+    }
+    if (props.data.proceso === 4) setColor('progress-bar bg-CORRESPONSAL_NORMAL')
+  }, [props])
+
+  const getTooltipTitle = () => {
+    let proceso = props.data.proceso;
+    switch(proceso){
+      case 1:
+          return "Por Terminar"
+        break;
+      case 2:
+          return "Despachado Sin Facturar"
+        break;
+      case 3:
+          return "Despachado Sin Facturar"
+        break;
+      case 4:
+          return "Despachado y Facturado"
+        break;
+    }
+  }
+
+  return (
+    <div>
+      <div style={{ paddingTop: '20%' }}>
+        <div className='progress' style={{ maxWidth: '80%' }}>
+          <div className={Color} style={{ width: '100%' }} data-toggle="tooltip" data-placement="bottom" title={getTooltipTitle()}></div>
+        </div>
+      </div>
+    </div>
+  )
+}