projeto-hit/frontend/src/pages/Report/index.js

import React, { useState, useEffect, useReducer, useContext, useRef} from "react";  
import MainContainer from "../../components/MainContainer"; 
import api from "../../services/api";  
import SelectField from "../../components/Report/SelectField"; 
//import { data } from '../../components/Report/MTable/data';   
import DatePicker1 from '../../components/Report/DatePicker' 
import DatePicker2 from '../../components/Report/DatePicker'  
import MTable from "../../components/Report/MTable";   
import PropTypes from 'prop-types';
import Box from '@mui/material/Box';
import { AuthContext } from "../../context/Auth/AuthContext";
import { Can } from "../../components/Can";

import { Button } from "@material-ui/core";  


// test del

// import ExportCSV from '../../components/Report/ExportCSV'

import { CSVLink } from "react-csv";

let columns = [
  { 
    key: 'ticket.whatsapp.name', 
    label: 'Loja', 
    
  },
  
  {
    key: 'id', 
    label: 'id Mensagem',  
  },

  {
    key: 'ticket.id', 
    label: 'id Conversa',  
  },

  {
    key: 'ticket.contact.name', 
    label: 'Cliente',  
  },

  {
    key: 'ticket.user.name', 
    label: 'Atendente',  
  }, 
  {
    key: 'body', 
    label: 'Mensagem',  
  }, 
  {
    key: 'fromMe', 
    label: 'Sentido',  
  },
  {
    key: 'createdAt', 
    label: 'Criada',  
  },
  {
    key: 'ticket.contact.number', 
    label: 'Telefone cliente',  
  },
  {
    key: 'ticket.queue.name', 
    label: 'Fila',  
  },
  {
    key: 'ticket.status', 
    label: 'Status',  
  },

]

//



const reducerQ = (state, action) =>{

  if(action.type === 'LOAD_QUERY'){
    
    
   const queries = action.payload
    const newQueries = []

    queries.forEach((query) => {
      
      const queryIndex = state.findIndex((q) => q.id === query.id)
      
      if(queryIndex !== -1){
        state[queryIndex] = query
      }
      else{
        newQueries.push(query)
      }

    })

    return [...state, ...newQueries]
  }
  
  if (action.type === "RESET") {
    return [];
  }

}



const reducer = (state, action) => {
  
  if (action.type === "LOAD_USERS") {
    const users = action.payload;
    const newUsers = [];

    users.forEach((user) => {
      const userIndex = state.findIndex((u) => u.id === user.id);
      if (userIndex !== -1) {
        state[userIndex] = user;
      } else {
        newUsers.push(user);
      }
    });

    return [...state, ...newUsers];
  } 

  if (action.type === "RESET") {
    return [];
  }
};

 


function Item(props) {
  const { sx, ...other } = props;
  return (
    <Box
      sx={{
        bgcolor: (theme) => (theme.palette.mode === 'dark' ? '#101010' : '#fff'),
        color: (theme) => (theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800'),
        border: '1px solid',
        borderColor: (theme) =>
          theme.palette.mode === 'dark' ? 'grey.800' : 'grey.300',
        p: 1,
        m: 1,
        borderRadius: 2,
        fontSize: '0.875rem',
        fontWeight: '700',
        ...sx,
      }}
      {...other}
    />
  );
}

Item.propTypes = {
  sx: PropTypes.oneOfType([
    PropTypes.arrayOf(
      PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool]),
    ),
    PropTypes.func,
    PropTypes.object,
  ]),
}; 


 
let columnsData = [
    { title: 'Unidade', field: 'whatsapp.name' },
    { title: 'Atendente', field: 'user.name' },
    { title: 'Contato', field: 'contact.number' },
    { title: 'Nome', field: 'contact.name' },
    { title: 'Assunto', field: 'queue.name' },
    { title: 'Status', field: 'status' },
    { title: 'Criado', field: 'createdAt' },
    
    { title: 'Atualizado', field: 'updatedAt',

    /*cellStyle: {
      backgroundColor: '#039be5',
      color: '#FFF'
    },
    headerStyle: {
      backgroundColor: '#039be5',
      fontSize: 12
    }*/
  
  },

    
  ];

  /*const currencies = [
    {
      value: '1',
      label: 'Adriano',
    },
    {
      value: '2',
      label: 'Aguinaldo',
    },
    {
      value: '3',
      label: 'Maria',
    },
    {
      value: '4',
      label: 'Suely',
    },
    {
      value: '0',
      label: '',
    },
    
  ];*/
 
 

const Report = () => { 
  
  const csvLink = useRef()   

  const { user: userA } = useContext(AuthContext); 
  
  //-------- 
  const [searchParam] = useState("");
  //const [loading, setLoading] = useState(false);
  //const [hasMore, setHasMore] = useState(false); 
  const [pageNumber, setPageNumber] = useState(1);  
  const [users, dispatch] = useReducer(reducer, []); 
  //const [columns, setColums] = useState([]) 
  const [startDate, setDatePicker1] = useState(new Date()) 
  const [endDate, setDatePicker2] = useState(new Date()) 
  const [userId, setUser] = useState(null)  
  const [query, dispatchQ] = useReducer(reducerQ, [])

  const [dataCSV, setDataCSV] = useState([])  
  const [isMount, setIsMount] = useState(true);

  useEffect(() => {
     dispatch({ type: "RESET" });
    dispatchQ({ type: "RESET" })
    
    setPageNumber(1);
  }, [searchParam]);

  useEffect(() => {
    //setLoading(true); 

    const delayDebounceFn = setTimeout(() => {

      const fetchUsers = async () => {
        try {
          const { data } = await api.get("/users/", {
            params: { searchParam, pageNumber },
          }); 
          
          dispatch({ type: "LOAD_USERS", payload: data.users });
          //setHasMore(data.hasMore);
          //setLoading(false);
        } catch (err) {
          console.log(err);
        }
      };

      fetchUsers();

    }, 500);
    return () => clearTimeout(delayDebounceFn);
  }, [searchParam, pageNumber]);
 


  useEffect(() => {

   //setLoading(true);

    const delayDebounceFn = setTimeout(() => {

      const fetchQueries = async () => {
        try {

          const  dataQuery  = await api.get("/reports/", {params: {userId, startDate, endDate },}); 
          dispatchQ({ type: "RESET" })
          dispatchQ({ type: "LOAD_QUERY", payload: dataQuery.data }); 

          //setLoading(false);

        //  console.log('dataQuery: ', dataQuery.data)

          console.log() 

        } catch (err) {
          console.log(err);
        }
      };

      fetchQueries();

    }, 500);
    return () => clearTimeout(delayDebounceFn);

  }, [userId, startDate, endDate]);
  

// Get from child 1
const datePicker1Value = (data) => { 
    
    setDatePicker1(data)
}

// Get from child 2
const datePicker2Value = (data) => {
    
    setDatePicker2(data)
}

// Get from child 3
const textFieldSelectUser = (data) => {
    
    setUser(data)
}



 

// test del  

const handleCSVMessages = () =>{ 
 
  // setLoading(true); 

  const fetchQueries = async () => {

    try {

      const  dataQuery  = await api.get("/reports/messages", {params: {userId, startDate, endDate },});  

     // console.log('dataQuery messages: ', dataQuery.data) 

      if(dataQuery.data.length > 0){

        let dataCSVFormat = dataQuery.data ;

        for(var i = 0; i<dataCSVFormat.length; i++){
          if(dataCSVFormat[i].fromMe){
            dataCSVFormat[i].fromMe = 'Atendente'
          }
          else{
            dataCSVFormat[i].fromMe = 'Cliente'
          }
        }

      //  console.log('dataCSVFormat: ', dataCSVFormat)
        
           setDataCSV(dataCSVFormat)
        // setDataCSV(dataQuery.data)
      } 

      // setLoading(false);  

    } catch (err) {
      console.log(err);
    }
  };

  fetchQueries();

}


useEffect(() => {

  if(isMount){
    setIsMount(false);
    return;
  }
  
  csvLink.current.link.click()

}, [dataCSV]);

  

  return (  

    <Can
    role={userA.profile}
    perform="ticket-report:show"
    yes={() => (

      <MainContainer>   
          <Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)' }}> 
           
            <Item><SelectField func={textFieldSelectUser} emptyField={true} header={'Usuário'} currencies={users.map((obj)=>{
              return {'value': obj.id, 'label': obj.name}
            })}/></Item> 
            
            <Item><DatePicker1 func={datePicker1Value} minDate={false} startEmpty={false} title={'Data inicio'}/></Item>
            <Item><DatePicker2 func={datePicker2Value} minDate={false} startEmpty={false} title={'Data fim'}/></Item>
            
            <Item sx={{ gridColumn: '4 / 5' }}>

            <Button
                  variant="contained"
                  color="primary"
                  onClick={(e) => handleCSVMessages()}
                >
                  {"CSV ALL"}
                </Button>
              
              <div> 
                <CSVLink 
                data={dataCSV} 
                headers={columns}                
                filename=  {'Relatorio_detalhado_atendimento_atendentes.csv'} 
                target={'_blank'}
                ref={csvLink}/>
              </div>  
              
            </Item> 
            
          </Box>

          <Box  sx={{
              display: 'grid',  
            }}>
          
            <Item  sx={{ gridColumn: '1', gridRow: 'span 1' }}>  
              <MTable data={query} 
              columns={columnsData} 
              hasChild={true}  
              removeClickRow={false}
              table_title={'Relatório de atendimento por atendentes'}/>  
            </Item> 

          </Box>  
        </MainContainer>
      
    )}
  /> 
  )
};

export default Report;