npm-pkg-hook 1.12.7 → 1.12.8

package/src/hooks/useChartData/useChartData/index.ts

@@ -0,0 +1,200 @@
+import { useQuery } from '@apollo/client'
+import { useState } from 'react'
+
+import { SPANISH_MONTHS } from '../../../utils/index'
+import { GET_ALL_SALES } from '../../useReport/queries'
+
+// Función para calcular el total de ventas por mes
+const calculateSalesByMonth = (salesData) => {
+  try {
+    const result = Array.from({ length: 12 }, (_, mes) => {return {
+      Mes: mes,
+      Year: new Date().getFullYear(),
+      totalProductsPrice: 0
+    }})
+
+    salesData?.forEach((value) => {
+      const mes = new Date(value.pDatCre).getMonth()
+      result[mes].totalProductsPrice += value.totalProductsPrice
+    })
+
+    return result
+  } catch (error) {
+    return []
+  }
+}
+
+// Función para llenar los meses faltantes
+const fillMissingMonths = (data) => {
+  try {
+    const allMonths = Array.from({ length: 12 }, (_, i) => {return i})
+    const missingMonths = allMonths.filter(month => {return !data.some(data => {return data.Mes === month})})
+    return data.concat(
+      missingMonths.map(element => {return {
+        Mes: element,
+        totalProductsPrice: 0,
+        Year: ''
+      }})
+    ).sort((a, b) => {return a.Mes - b.Mes})
+  } catch (error) {
+    return []
+  }
+}
+// eslint-disable-next-line prefer-const
+let chartTypeYear = ''
+// Función para obtener los datos del gráfico
+const getChartData = (asFilter, newResult, result, chartType) => {return {
+  labels: asFilter
+    ? newResult.map(data => {return SPANISH_MONTHS[data.Mes]})
+    : result.map(data => {return SPANISH_MONTHS[data.Mes]}),
+  datasets: [
+    {
+      label: `Ventas por meses del año ${asFilter ? chartTypeYear : ''}`,
+      data: asFilter
+        ? newResult.map(data => {return data.totalProductsPrice})
+        : result.map(data => {return data.totalProductsPrice}),
+      backgroundColor: [
+        'rgba(255, 99, 132, 0.2)',
+        'rgba(54, 162, 235, 0.2)',
+        'rgba(255, 206, 86, 0.2)',
+        'rgba(75, 192, 192, 0.2)',
+        'rgba(153, 102, 255, 0.2)',
+        'rgba(255, 159, 64, 0.2)'
+      ],
+      borderColor: chartType === 'bar'
+        ? [
+          'rgba(255, 99, 132, 1)',
+          'rgba(54, 162, 235, 1)',
+          'rgba(255, 206, 86, 1)',
+          'rgba(75, 192, 192, 1)',
+          'rgba(153, 102, 255, 1)',
+          'rgba(255, 159, 64, 1)'
+        ]
+        : 'rgb(255 0 0)',
+      tension: 0.6,
+      fill: false,
+      borderWidth: 1,
+      barPercentage: 1,
+      barThickness: 50,
+      minBarLength: 3
+    }
+  ]
+}}
+
+// Función para agrupar los datos por año
+const groupSalesByYear = (salesData = []) => {
+  const groupedData = {}
+  try {
+    salesData?.forEach((item) => {
+      const year = new Date(item.pDatCre).getFullYear()
+      if (!groupedData[year]) {
+        groupedData[year] = []
+      }
+      groupedData[year].push(item)
+    })
+    return groupedData
+  } catch (error) {
+    return groupedData
+  }
+}
+
+// Función para obtener años únicos
+const getUniqueYears = (salesData = []) => {
+  try {
+    const years = []
+    salesData?.forEach((item) => {
+      const y = new Date(item.pDatCre).getFullYear()
+      if (!years.includes(y)) {
+        years.push(y)
+      }
+    })
+    return years.sort((a, b) => {return b - a})
+  } catch (error) {
+    return []
+  }
+}
+
+export const useChartData = ({ year }) => {
+  const { data, loading } = useQuery(GET_ALL_SALES)
+  const [chartType, setChartType] = useState('Line')
+  const [chartTypeYear, setChartTypeYear] = useState(new Date().getFullYear())
+  const [asFilter, setFilter] = useState(false)
+  const [newResult, setNewResult] = useState([])
+
+  const result = calculateSalesByMonth(data?.getAllSalesStore)
+
+  const filledResult = fillMissingMonths(result)
+
+  const dataChart = getChartData(asFilter, newResult, filledResult, chartType)
+
+   
+  const groupedData = groupSalesByYear(data?.getAllSalesStore)
+  const years = getUniqueYears(data?.getAllSalesStore)
+
+  const handleChangeYear = (value) => {
+    setFilter(true)
+    const currentYear = parseInt(value)
+    setChartTypeYear(currentYear || '')
+
+    if (filledResult?.length > 0) {
+      const filterToYear = filledResult.filter((elem) => {return elem?.Year === currentYear})
+       
+      const missingNewMonths = allMonths?.filter(month => {return !filterToYear.some(data => {return data.Mes === month})})
+
+      const newFilteredResult = filterToYear.concat(
+        missingNewMonths.map(element => {return {
+          Mes: element,
+          totalProductsPrice: 0,
+          Year: ''
+        }})
+      ).sort((a, b) => {return a.Mes - b.Mes})
+
+      setNewResult(newFilteredResult)
+      return newFilteredResult
+    }
+  }
+
+  const cleanFilter = () => {
+    setFilter(false)
+    setChartTypeYear(new Date().getFullYear())
+  }
+
+  const sortYear = () => {return years.sort((a, b) => {return b - a})}
+  const labelTitle = `Ventas por meses del año ${asFilter ? chartTypeYear : ''}`
+  const organiceYears = sortYear()
+  const options = {
+    interaction: {
+      mode: 'index',
+      intersect: false
+    },
+    scales: {
+      x: {
+        stacked: true
+      },
+      y: {
+        stacked: true
+      }
+    },
+    plugins: {
+      title: {
+        display: true,
+        text: labelTitle
+      }
+    }
+  }
+  return {
+    handleChangeYear,
+    setFilter,
+    cleanFilter,
+    setChartType,
+    years: organiceYears,
+    asFilter,
+    chartTypeYear,
+    options,
+    chartType,
+    labelTitle,
+    result: filledResult,
+    dataChart,
+    loading
+  }
+}

package/src/hooks/useChartData/useChartDataAllOrders/index.ts

@@ -0,0 +1,94 @@
+import { useGetAllSales } from '../../useGetAllSales'
+
+export const useChartDataAllOrders = ({
+  onScreen = false
+} = {}) => {
+  const { data, loading } = useGetAllSales({
+    onScreen
+  })
+
+  // Objeto para mapear los códigos de estado a sus nombres
+  const statusMap = {
+    1: 'ACCEPT',
+    2: 'PROCESSING',
+    3: 'READY',
+    4: 'CONCLUDES',
+    5: 'REJECTED'
+  }
+
+  // Objeto para almacenar los totales por estado
+  const totalsByStatus = {}
+
+  // Inicializar totales en 0 para todos los estados
+  for (const status in statusMap) {
+    totalsByStatus[status] = 0
+  }
+
+  // Procesar los datos y acumular los totales por estado
+  data?.forEach(item => {
+    const status = item.pSState
+    const totalPrice = item.totalProductsPrice
+    totalsByStatus[status] += totalPrice
+  })
+
+  // Preparar los datos en el formato requerido por Chart.js
+  const chartLabels = []
+  const chartData = []
+
+  // Iterar a través del statusMap para llenar los datos
+  for (const status in statusMap) {
+    const statusLabel = statusMap[status]
+    chartLabels?.push(statusLabel)
+    chartData?.push(totalsByStatus[status] || 0)
+  }
+
+  const chartJsData = {
+    labels: chartLabels,
+    datasets: [{
+      tension: 2,
+      fill: false,
+      borderWidth: 1,
+      barPercentage: 1,
+      barThickness: 50,
+      minBarLength: 3,
+      label: '',
+      data: chartData,
+      backgroundColor: [
+        '#FF5733', // Reddish color
+        '#FFC300', // Yellowish color
+        '#FF8C42', // Orange color
+        '#138D75', // Gold color
+        '#ff0000' // Tomato color
+      ]
+    }]
+  }
+
+  const defaultOptions = {
+    animation: {
+      animateRotate: true,
+      animateScale: true
+    },
+    responsive: true,
+    maintainAspectRatio: false,
+    legend: {
+      position: 'bottom'
+    },
+    tooltips: {
+      callbacks: {
+        label: (tooltipItem, data) => {
+          const dataset = data?.datasets[tooltipItem.datasetIndex]
+          const total = dataset?.data?.reduce((previousValue, currentValue) => {return previousValue + currentValue})
+          const currentValue = dataset?.data[tooltipItem?.index]
+          const percentage = ((currentValue / total) * 100).toFixed(2)
+          return `${data?.labels[tooltipItem?.index]}: ${currentValue} (${percentage}%)`
+        }
+      }
+    }
+  }
+
+  return {
+    loading,
+    data: loading ? [] : chartJsData,
+    option: loading ? [] : defaultOptions
+  }
+}

package/src/hooks/useChatRoomSubscription/index.ts

@@ -0,0 +1,28 @@
+import { useSubscription, gql } from '@apollo/client'
+
+const NEW_CHAT_ROOM_MESSAGE_SUBSCRIPTION = gql`
+  subscription NewChatRoomMessage($codeRoom: String!) {
+    newChatRoomMessage(codeRoom: $codeRoom) {
+      uuid
+      content
+      aDatCre
+      from
+      to
+    }
+  }
+`
+
+export const chatRoomSubscription = (codeRoom, onMessageReceived) => {
+  const subscription = useSubscription(NEW_CHAT_ROOM_MESSAGE_SUBSCRIPTION, {
+    variables: { codeRoom },
+    onSubscriptionData: ({ client, subscriptionData }) => {
+      if (subscriptionData.data && subscriptionData.data.newChatRoomMessage) {
+        // Llama a la función proporcionada cuando se recibe un nuevo mensaje
+        onMessageReceived(subscriptionData.data.newChatRoomMessage)
+      }
+    }
+  })
+
+  // Puedes ajustar lo que devuelve el hook según tus necesidades
+  return subscription
+}

package/src/hooks/useCheckbox/index.ts

@@ -0,0 +1,115 @@
+import { useCallback, useState } from 'react'
+
+/**
+ * Hook for managing multiple checkbox states
+ *
+ * @param {Array<String | Number>} elem - list of all elem
+ * @param {Array<String | Number>} selectedIds - list of selected elem (optional)
+ *
+ * @returns {Object}
+ *  - checkboxStates (state object),
+ *  - numSelectedItems (number),
+ *  - handleChangeCheck (callback),
+ *  - toggleAll (callback),
+ *  - selectAll (callback),
+ *  - clearAll (callback)
+ */
+
+export const useCheckboxState = (elem, selectedIds = [], disabledIds = [], setArray = () => { }) => {
+  const numTotalItems = elem?.length
+  const [checkedItems, setCheckedItems] = useState(new Set(selectedIds))
+  const [disabledItems, setDisabledItems] = useState(new Set(disabledIds))
+
+  const handleChangeCheck = useCallback((event, id) => {
+    const target = event.target
+    setCheckedItems(prevState => {
+      const newState = new Set(prevState)
+      if (target.checked) {
+        newState.add(id)
+      } else {
+        newState.delete(id)
+      }
+      return newState
+    })
+  }, [])
+
+  const setAll = useCallback(
+    isChecked => {
+      setCheckedItems(prevState => {
+        const newState = new Set(prevState)
+        for (const id of elem) {
+          if (disabledItems.has(id)) {
+            continue
+          }
+          if (isChecked) {
+            newState.add(id)
+          } else {
+            newState.delete(id)
+          }
+        }
+        return newState
+      })
+    },
+    [elem, disabledItems]
+  )
+
+  const selectAll = useCallback(() => {
+    if (checkedItems.size === numTotalItems) {
+      return
+    }
+    setAll(true)
+  }, [checkedItems, numTotalItems, setAll])
+
+  const clearAll = useCallback(() => {
+    if (checkedItems.size === 0) {
+      return
+    }
+    setAll(false)
+  }, [checkedItems, setAll])
+
+  const toggleAll = useCallback(() => {
+    const numDisabledAndChecked = [...disabledItems].reduce((count, id) => {
+      if (checkedItems.has(id)) {
+        return count + 1
+      }
+      return count
+    }, 0)
+    if (checkedItems.size - numDisabledAndChecked === 0) {
+      selectAll()
+    } else {
+      clearAll()
+    }
+  }, [checkedItems, disabledItems, selectAll, clearAll])
+
+  const enableCheckboxes = useCallback((...elem) => {
+    setDisabledItems(prevState => {
+      const newState = new Set(prevState)
+      for (const id of elem) {
+        newState.delete(id)
+      }
+      return newState
+    })
+  }, [])
+
+  const disableCheckboxes = useCallback((...elem) => {
+    setDisabledItems(prevState => {
+      const newState = new Set(prevState)
+      for (const id of elem) {
+        newState.add(id)
+      }
+      return newState
+    })
+  }, [])
+
+  return {
+    checkedItems,
+    disabledItems,
+    handleChangeCheck,
+    toggleAll,
+    selectAll,
+    clearAll,
+    setCheckedItems,
+    enableCheckboxes,
+    disableCheckboxes
+  }
+}

package/src/hooks/useCities/index.ts

@@ -0,0 +1,14 @@
+import { useLazyQuery } from '@apollo/client'
+
+import { GET_ALL_CITIES } from './queries'
+
+/**
+ * Custom hook to fetch cities lazily based on the provided department ID.
+ *
+ * @returns {Array} - Returns an array containing a function to execute the query, and an object containing data and any associated query state/error.
+ */
+export function useCities () {
+  const [getCities, { data, loading, error }] = useLazyQuery(GET_ALL_CITIES)
+
+  return [getCities, { data: data ? data?.cities : [], loading, error }]
+}

package/src/hooks/useCities/queries.ts

@@ -0,0 +1,12 @@
+import gql from 'graphql-tag'
+
+export const GET_ALL_CITIES = gql`
+    query getAllCities($dId: ID!) {
+        cities(dId: $dId) {
+            ctId
+            dId
+            cName
+            cState
+        }
+    }
+`

package/src/hooks/useClients/index.ts

@@ -0,0 +1,97 @@
+import {
+  useQuery,
+  useMutation,
+  useLazyQuery
+} from '@apollo/client'
+
+import {
+  CREATE_CLIENTS,
+  DELETE_ONE_CLIENTS,
+  GET_ALL_CLIENTS,
+  GET_ONE_CLIENT,
+  EDIT_ONE_CLIENT
+} from './queries'
+
+export const useGetClients = ({
+  max,
+  order = 'DESC',
+  search,
+  sendNotification = () => { }
+} = {}) => {
+  const {
+    loading,
+    error,
+    called,
+    data,
+    refetch
+  } = useQuery(GET_ALL_CLIENTS, {
+    onError: () => {
+      sendNotification({
+        title: 'Error',
+        description: 'Algo salió mal',
+        backgroundColor: 'error'
+      })
+    },
+    variables: {
+      search,
+      max: max || 100,
+      order
+    }
+  })
+  return [data?.getAllClients || [], {
+    loading: called ? false : loading,
+    buttonLoading: loading,
+    error,
+    refetch
+  }]
+}
+
+export const useDeleteClients = ({ sendNotification = () => { } } = {}) => {
+  const [deleteClient, { loading, error }] = useMutation(DELETE_ONE_CLIENTS)
+  return [deleteClient, { loading, error }]
+}
+
+export const useCreateClient = ({ sendNotification = () => { } } = {}) => {
+  const [createClients, { loading, error }] = useMutation(CREATE_CLIENTS, {
+    onError: (data) => {
+      sendNotification({
+        title: '',
+        description: 'Error',
+        backgroundColor: 'error'
+      })
+    }
+  })
+
+  return [createClients || [], { loading, error }]
+}
+
+export const useEditClient = ({ sendNotification = () => { } } = {}) => {
+  const [editOneClient, { loading, error, data }] = useMutation(EDIT_ONE_CLIENT, {
+    onCompleted: (data) => {
+      if (data?.editOneClient?.success) {
+        return sendNotification({
+          title: 'Éxito',
+          description: data?.editOneClient?.message,
+          backgroundColor: 'success'
+        })
+      }
+    },
+    onError: (data) => {
+      if (data?.editOneClient) {
+        return sendNotification({
+          title: 'Error',
+          description: data?.editOneClient?.message,
+          backgroundColor: 'error'
+        })
+      }
+    }
+  })
+
+  return [editOneClient, { loading, error, data }]
+}
+
+export const useGetOneClient = ({ sendNotification = () => { } } = {}) => {
+  const [getOneClients, { data, loading, error }] = useLazyQuery(GET_ONE_CLIENT)
+
+  return [getOneClients || [], { loading, error, data }]
+}