Creacion de solicitudes y reapertura de cuentas ya cerradas

src/Components/Corresponsales/SolicitudReapertura/AutorizarReapertura.tsx

@@ -0,0 +1,119 @@
+import { Button, Col, Form, FormLabel, Row } from "react-bootstrap";
+import { CiWarning } from "react-icons/ci";
+import { MsgInformativo } from "../../Utils/Toast/msgInformativo";
+import '../../../css/generic01.css'
+import { ICorresponsalTraficoSolicitudReapertura } from "../../../Interfaces/Corresponsales/ICorresponsalTraficoSolicitudReapertura";
+import { DTOTraficoSolicitudReapertura } from "../../../DTO/Corresponsales/DTOTraficoSolicitudReapertura";
+import CTrafDataService from "../../../Services/Corresponsalias/Corresponsales.Trafico.Services"
+import { useState } from "react";
+
+interface IProps {
+    solicitud: DTOTraficoSolicitudReapertura;
+    userId: number;
+    close: (estado: number) => void
+}
+export const AutorizarReapertura:React.FC<IProps> = (props) => {
+    const [Motivo, setMotivo] = useState('')
+    const [showMsg, setShowMsg] = useState(false)
+    const [msg, setMsg] = useState('')
+    const [header, setHeader] = useState('')
+    const [SelectedOption, setSelectedOption] = useState(2)
+
+    const AppendSolicitud = () =>{
+        if(SelectedOption === 0 && !Motivo){
+            setHeader('Error');
+            setMsg('Favor de capturar una razon válida.')
+            setShowMsg(true)
+            return;
+        }
+        if(SelectedOption === 0 &&  Motivo.length < 30){
+            setHeader('Error');
+            setMsg('La razón del rechazo debe contener al menos 30 caracteres')
+            setShowMsg(true)
+            return;
+        }
+        var solicitud: ICorresponsalTraficoSolicitudReapertura = {
+            id: props.solicitud.id,
+            idTrafico: props.solicitud.idTrafico,
+            idUsuarioSolicita: props.solicitud.idUsuarioSolicita,
+            fechaSolicita: props.solicitud.fechaSolicita,
+            motivoSolicita: props.solicitud.motivoSolicita,
+            idUsuarioAutoriza: props.userId,
+            fechaAutoriza: undefined,
+            motivoRechazo: Motivo,
+            estado: SelectedOption
+        }
+        CTrafDataService.AppendSolicitudReapertura(solicitud)
+        .then((resp) => {
+            if(resp.data.id > 0){
+                props.close(SelectedOption)
+            }
+        })
+        .catch(() => {
+            setHeader('Error');
+            setMsg('Ocurrió un error. Favor de intentar nuevamente')
+            setShowMsg(true)
+            return;
+        })
+    }
+
+    return(
+        <>
+            <h3>Solicitud de Reapertura de Cuenta</h3>
+            <hr/>
+            <Row>
+                <CiWarning style={{fontSize:'150px', color:'#ff3100'}} />
+            </Row>
+            <Row>
+                <Col xs={12}>
+                    <p style={{textAlign:'center'}}>
+                        {props.solicitud.usuarioSolicita} solicita la reapertura de esta cuenta por el motivo:
+                    </p>
+                    <p style={{textAlign:'center'}}>{props.solicitud.motivoSolicita}</p>
+                </Col>
+            </Row>
+            <Row className='justify-content-center'>
+                <Col xs={4}>
+                    <Form.Control 
+                        as='select'
+                        className="form-select form-select-sm"
+                        value={SelectedOption}
+                        style={{width:'100%', marginBottom:'10px'}}
+                        onChange={(e) => setSelectedOption(+e.target.value)}
+                    >
+                        <option value={2}>Autorizar</option>
+                        <option value={0}>Rechazar</option>
+                    </Form.Control>
+                </Col>
+            </Row>
+            <Row style={{visibility: SelectedOption === 0 ? 'visible' : 'hidden'}}>
+                <Col xs={12}>
+                    <FormLabel style={{width:'100%'}}>
+                        <Form.Control
+                            as="textarea"
+                            rows={3} 
+                            onChange={(e) => setMotivo(e.target?.value)}
+                            placeholder='ingrese el motivo del rechazo de la solicitud'
+                        />
+                    </FormLabel>
+                </Col>
+            </Row>
+            <Row className='justify-content-end'>
+                <Col xs={4} style={{textAlign:'end'}}>
+                    <Button variant='primary' onClick={() => {AppendSolicitud()}}>
+                        Guardar
+                    </Button>
+                </Col>
+            </Row>
+            <MsgInformativo
+                show={showMsg}
+                msg={msg}
+                header={header}
+                msgColor={'primary'}
+                closeToast={() => {
+                    setShowMsg(false)
+                }}
+            />
+        </>
+    )
+}

src/Components/Corresponsales/SolicitudReapertura/SolicitudReapertura.tsx

@@ -6,13 +6,18 @@ import { ICorresponsalTraficoSolicitudReapertura } from "../../../Interfaces/Cor
 
 interface IProps{
     idTrafico: number,
-    idUsuario: number
+    idUsuario: number,
+    close: () => void
 }
 export const SolicitudReapertura:React.FC<IProps> = (props) => {
     const [Motivo, setMotivo] = useState('')
     const [showMsg, setShowMsg] = useState(false)
     const [msg, setMsg] = useState('')
     const [header, setHeader] = useState('')
+    const [Perfil, setPerfil] = useState(() => {
+    const stickyValue = window.localStorage.getItem('Perfil')
+        return stickyValue !== null ? JSON.parse(stickyValue) : ''
+    }) 
 
     const SolicitarReapertura = (motivo: string) => {
         if(!motivo){
@@ -31,15 +36,17 @@ export const SolicitudReapertura:React.FC<IProps> = (props) => {
             id: 0,
             idTrafico: props.idTrafico,
             idUsuarioSolicita: props.idUsuario,
-            fechaSolicita: "",
+            fechaSolicita: undefined,
             motivoSolicita: Motivo,
-            idUsuarioAutoriza: 0,
+            idUsuarioAutoriza: Perfil === 'Sup. Facturacion' ? props.idUsuario : 0,
-            fechaAutoriza: "",
+            fechaAutoriza: undefined,
             motivoRechazo: "",
-            estado: 1
+            estado: Perfil === 'Sup. Facturacion' ? 2 : 1
         }
         CTrafDataService.AppendSolicitudReapertura(solicitud)
-        .then((resp) => {})
+        .then((resp) => {
+            props.close()
+        })
         .catch(() => {
             setHeader('Error');
             setMsg('Ocurrió un error. Favor de intentar nuevamente')

src/Components/Corresponsales/TraficoCorresponsales.tsx

@@ -130,6 +130,8 @@ import { populateRectificaciones } from '../../store/features/Corresponsales/Cor
 import { NuevaRectificacion } from './Rectificaciones/NuevaRectificacion'
 import DTORectificacionHistorico from '../../DTO/Corresponsales/DTORectificacionHistorico'
 import { SolicitudReapertura } from './SolicitudReapertura/SolicitudReapertura'
+import { AutorizarReapertura } from './SolicitudReapertura/AutorizarReapertura'
+import { DTOTraficoSolicitudReapertura } from '../../DTO/Corresponsales/DTOTraficoSolicitudReapertura'
 
 interface IProps {
   IDTrafico: number
@@ -353,6 +355,16 @@ export default function TraficoCorresponsales (props:IProps) {
   const msgColor = 'primary'
   const [IsDisabled, setIsDisabled] = useState(false); 
   const hiddenFileInputRef = useRef<HTMLInputElement>(null);
+  const btnCuenta = useRef<HTMLButtonElement>(null);
+  const [solicitudReapertura, setSolicitudReapertura] =  useState<DTOTraficoSolicitudReapertura>({
+    id: 0,
+    idTrafico: 0,
+    idUsuarioSolicita: 0,
+    usuarioSolicita: '',
+    motivoSolicita: '',
+    fechaSolicita: '',
+    estado: 0
+  })
   var txtContenedores: ICorresponsalContenedores[] = [];
   var txtFacturas: ICorresponsalFacturas[] = [];
   const itemsTrafico = [
@@ -571,6 +583,22 @@ export default function TraficoCorresponsales (props:IProps) {
 
   const LoadEverything = () => {
     let clientes: IClientes[] = [];
+    //Primero se valida si el tráfico tiene solicitud de reapertura de cuenta
+    CTrafDataService.GetSolicitudReapertura(props.IDTrafico)
+    .then(resp => {
+      if(resp.data.id > 0){
+        setSolicitudReapertura(solicitud => ({
+          ...solicitud,
+          ...resp.data
+        }))
+        if(Perfil === 'Sup. Facturacion'){//Validar si el usuario puede autorizar la petición
+          showModalBox(16, 'modal-30w', true)//Si puede se muestra el modal para autorizar la petición
+        }
+        //Se cambia el texto del botón con el que se hace la solicitud
+        btnCuenta.current!.innerText = 'Pediente de Autorizar';
+        btnCuenta.current!.disabled = true;
+      }
+    })
     ClavesPedimentosService.getAllClavesPedimentos()
     .then(response => setClavesPedimentos(response.data))
     .catch((e: Error) => {
@@ -1432,11 +1460,6 @@ export default function TraficoCorresponsales (props:IProps) {
     })
   }
 
-  const solicitarReapertura = () => {
-    setLoadComponent(15)
-    setShowModal(true)
-  }
-
   const GetClientesZip = () => {
     FileManagerServices.GetClientesZip(IDTrafico)
     .then(response => {
@@ -4170,9 +4193,10 @@ export default function TraficoCorresponsales (props:IProps) {
                       </Button>
                       <Button 
                         variant='primary'
-                        onClick={
+                        onClick={() =>
-                          Proceso === 4 ? solicitarReapertura : cerrarTrafico
+                          Proceso === 4 ? showModalBox(15, 'modal-50w', true) : cerrarTrafico
                         }
+                        ref={btnCuenta}
                       >
                         {Proceso === 4 ? 'Habilitar Cuenta' : 'Cerrar Cuenta'}
                       </Button>                      
@@ -4299,8 +4323,38 @@ export default function TraficoCorresponsales (props:IProps) {
             </div>
           ) : null}
           {LoadComponent===15 ? (
-            <div style={{ height: '280px', overflowX: 'hidden' }}>
+            <div style={{ height: '250px', overflowX: 'hidden' }}>
-              <SolicitudReapertura idTrafico={IDTrafico} idUsuario={UserId}></SolicitudReapertura>
+              <SolicitudReapertura idTrafico={IDTrafico} idUsuario={UserId} close={()=>{
+                setShowModal(false)
+                if(Perfil === 'Sup. Facturacion'){
+                  setHeader('Informativo');
+                  setMsg('Cuenta habilitada correctamente.')
+                  setShowMsg(true)
+                  setProceso(3)
+                  return;
+                }
+                else{
+                  btnCuenta.current!.disabled = true;
+                  setHeader('Informativo');
+                  setMsg('Solicitud creada correctamente.')
+                  setShowMsg(true)
+                  return;
+                }
+              }}/>
+            </div>
+          ) : null}
+          {LoadComponent===16 ? (
+            <div style={{ height: '475px', overflowX: 'hidden' }}>
+              <AutorizarReapertura solicitud={solicitudReapertura} userId={UserId} 
+              close={(estado:number)=>{
+                let texto = estado === 0 ? 'rechazada' : 'autorizada'
+                setProceso(estado === 2 ? 3 : 4)
+                setShowModal(false)
+                setHeader('Informativo');
+                setMsg(`Solicitud ${texto} correctamente.`)
+                setShowMsg(true)
+                return;
+              }}/>
             </div>
           ) : null}
         </Modal.Body>

src/Components/Dashboard/Dashboard.tsx

@@ -15,7 +15,10 @@ export default function Dashboard(props: IProps) {
     const stickyValue = window.localStorage.getItem('User')
     return stickyValue !== null ? JSON.parse(stickyValue) : 0
   })
-
+  const [Perfil, setPerfil] = useState(() => {
+    const stickyValue = window.localStorage.getItem('Perfil')
+    return stickyValue !== null ? JSON.parse(stickyValue) : ''
+  })
   return (
     <div>
       <br />
@@ -29,7 +32,7 @@ export default function Dashboard(props: IProps) {
           {[['Direccion', 'Sistemas', 'Contabilidad'].includes(Depto) ? <DashboardContabilidad Depto={Depto} /> : ''].map((item) => {
             return <React.Fragment>{item}</React.Fragment>
           })}
-          {[['Direccion', 'Sistemas', 'Facturacion'].includes(Depto) ? <DashboardFacturacion Depto={Depto}/> : ''].map((item) => {
+          {[['Direccion', 'Sistemas', 'Facturacion'].includes(Depto) ? <DashboardFacturacion Depto={Depto} Perfil={Perfil}/> : ''].map((item) => {
             return <React.Fragment>{item}</React.Fragment>
           })}
         </Row>

src/Components/Dashboard/DashboardFacturacion.tsx

@@ -10,15 +10,18 @@ import ReactApexChart from 'react-apexcharts'
 import { FaReply } from 'react-icons/fa'
 import { FcSurvey } from 'react-icons/fc'
 import DashboardCorresponsales from './DashboardCorresponsales'
+import { MdTimer } from 'react-icons/md'
 
 interface IProps {
   Depto: string;
+  Perfil: string;
 }
 
 export const DashboardFacturacion: FC<IProps> = (props) => {
   const [labels, setlabels] = useState<string[]>([]);
   const [series, setseries] = useState<number[]>([]);
   const [RechazosContabilidad, setRechazosContabilidad] = useState(0);
+  const [SolicitudesReapertura, setSolicitudesReapertura] = useState(0);
   const navigate = useNavigate();
   const [ChartOptions, setChartOptions] = useState<ApexOptions>({
     labels: [
@@ -43,6 +46,9 @@ export const DashboardFacturacion: FC<IProps> = (props) => {
     }).catch((e: Error) => {
       return;
     })
+    DashboardFacturacionDataService.getSolicitudesReapertura().then((response) => {
+      setSolicitudesReapertura(response.data.total)
+    }).catch((e: Error) => {return;})
     DashboardFacturacionDataService.getFacturacion()
       .then((response) => {
         console.log(response.data);
@@ -158,6 +164,31 @@ export const DashboardFacturacion: FC<IProps> = (props) => {
           </Card>
         </Col> : ""
       }
+      {props.Perfil === 'Sup. Facturacion' ?
+        <Col>
+          <Card style={{ width: '18rem' }} className='dashboardComponentFont'>
+            <Card.Header>Facturación </Card.Header>
+            <Card.Body style={{ paddingBottom: '50px' }}>
+              <Card.Title>Solicitudes de reapertura de cuenta<br/><br/></Card.Title>
+              <div style={{ fontSize: '6em' }} className='text-center'>
+                <IconContext.Provider value={{ color: '#ff671b' }}>
+                  <FcSurvey style={{fontSize:'larger'}}/>
+                  <MdTimer style={{fontSize:'70px', margin:'0 0 0 -4rem', position:"absolute", bottom: '6rem'}}/>
+                </IconContext.Provider>
+                {SolicitudesReapertura}
+            </div>
+            </Card.Body>
+            <Card.Footer style={{ paddingRight: '5px' }}>
+              <Link
+                to='../RptCorresponsalesTraficos/proc=3/modo=4'
+                style={{ textDecoration: 'none', float: 'right', paddingRight: '10px' }}
+              >
+                Ver mas...
+              </Link>
+            </Card.Footer>
+          </Card>
+        </Col> : ""
+      }
     </>
   )
 }

src/DTO/Corresponsales/DTOTraficoSolicitudReapertura.ts

@@ -0,0 +1,9 @@
+export interface DTOTraficoSolicitudReapertura{
+    id: number,
+    idTrafico: number,
+    idUsuarioSolicita: number,
+    usuarioSolicita: string,
+    motivoSolicita: string,
+    fechaSolicita: string,
+    estado: number
+}

src/Interfaces/Corresponsales/ICorresponsalTraficoSolicitudReapertura.ts

@@ -2,10 +2,10 @@ export interface ICorresponsalTraficoSolicitudReapertura{
     id:number,
     idTrafico: number,
     idUsuarioSolicita: number,
-    fechaSolicita: string,
+    fechaSolicita?: string,
     motivoSolicita: string,
     idUsuarioAutoriza: number,
-    fechaAutoriza: string, 
+    fechaAutoriza?: string, 
     motivoRechazo: string,
     estado: number
 }

src/Services/Corresponsalias/Corresponsales.Trafico.Services.ts

@@ -8,6 +8,7 @@ import ICorresponsalRectificacionHistorico from "../../Interfaces/Corresponsales
 import DTORectificacionHistorico from "../../DTO/Corresponsales/DTORectificacionHistorico";
 import IReporteOperacionesNewell from "../../Interfaces/ReportesClientes/IReporteOperacionesNewell";
 import { ICorresponsalTraficoSolicitudReapertura } from "../../Interfaces/Corresponsales/ICorresponsalTraficoSolicitudReapertura";
+import { DTOTraficoSolicitudReapertura } from "../../DTO/Corresponsales/DTOTraficoSolicitudReapertura";
 
 class Corresponsales_Trafico_DataService {
   GetAll(id: number) {
@@ -49,5 +50,8 @@ class Corresponsales_Trafico_DataService {
   AppendSolicitudReapertura(solicitud: ICorresponsalTraficoSolicitudReapertura){
     return http.post<ICorresponsalTraficoSolicitudReapertura>(`/Corresponsalias/Traficos/Solicitud/Append`, solicitud)
   }
+  GetSolicitudReapertura(idTrafico: number){
+    return http.get<DTOTraficoSolicitudReapertura>(`/Corresponsalias/Traficos/Solicitud?idTrafico=${idTrafico}`)
+  }
 }
 export default new Corresponsales_Trafico_DataService();

src/Services/Dashboard/Dashboard.Facturacion.Service.ts

@@ -5,5 +5,8 @@ class Dashboard_Facturacion_DataService {
  getFacturacion(){
     return http.get<DashboardCorresponsales[]>(`/Dashboard/Corresponsales/GetFacturacionDashboard`);
  }
+ getSolicitudesReapertura(){
+   return http.get<DashboardCorresponsales>(`/Dashboard/Corresponsales/SolicitudesReapertura`);
+ }
 }
 export default new Dashboard_Facturacion_DataService();

src/css/generic01.css

@@ -9,6 +9,11 @@
        padding: 5px 5px 5px 5px;
    }
 
+   .modal-30w {
+    width: 31%;
+    max-width: none !important;
+}
+   
    .modal-50w {
        width: 50%;
        max-width: none !important;