npm-pkg-hook 1.1.3 → 1.1.4

package/src/hooks/useChartData/index.js

@@ -1,2 +1,171 @@
+import { useQuery } from '@apollo/client';
+import { useState } from 'react';
+import { SPANISH_MONTHS } from "../../utils/index";
+import { GET_ALL_SALES } from "../useReport/queries";
 export * from './useChartData'
-export * from './useChartDataAllOrders'
+export * from './useChartDataAllOrders'
+
+export const useChartData = ({ year }) => {
+    // Construcción del nuevo array:
+    const { data, loading } = useQuery(GET_ALL_SALES)
+    const [chartType, setChartType] = useState('bar')
+    const [chartTypeYear, setChartTypeYear] = useState(new Date().getFullYear())
+    const [asFilter, setFilter] = useState(false)
+    const [newResult, setNewResult] = useState([])
+    let result = []
+    data?.getAllSalesStore?.length > 0 && data?.getAllSalesStore.reduce(function (res, value) {
+        // Creamos la posición del array para cada mes
+        let mes = new Date(value.pDatCre).getMonth()
+        let Year = new Date(value.pDatCre).getFullYear()
+        if (!res[mes]) {
+            res[mes] = { Mes: mes, Year }
+            // Inicializamos a 0 el valor de cada key
+            Object.keys(value).forEach((key) => {
+                if (key != 'pDatCre') {
+                    res[mes][key] = 0
+                }
+            })
+
+            result.push(res[mes])
+        }
+        // Sumamos el valor de cada clave dentro de un bucle
+        Object.keys(value).forEach(function (key) {
+            if (key != 'pDatCre') {
+                res[mes]['totalProductsPrice'] += value['totalProductsPrice']
+            }
+        })
+        return res
+    }, {})
+
+    let allMonths = Array.from({ length: 12 }, (_, i) => { return i })
+    let missingMonths = allMonths.filter(month => { return !result.some(data => { return data.Mes === month }) })
+
+    for (const element of missingMonths) {
+        result.push({
+            'Mes': element,
+            'totalProductsPrice': 0,
+            'Year': ''
+        })
+    }
+
+    result.sort((a, b) => { return a.Mes - b.Mes })
+
+    const labelTitle = `Ventas por meses del año ${asFilter ? chartTypeYear : ''}`
+    // Resultado:
+    const dataChart = {
+        labels: asFilter ? newResult.map(data => {
+            return SPANISH_MONTHS[data.Mes]
+        }) : result.map(data => {
+            return SPANISH_MONTHS[data.Mes]
+        }),
+        datasets: [
+            {
+                label: labelTitle,
+                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,
+            }
+        ]
+    }
+    const options =  {
+        interaction: {
+          mode: 'index',
+          intersect: false,
+        },
+        scales: {
+            x: {
+                stacked: true
+            },
+            y: {
+                stacked: true
+            }
+        },
+        plugins: {
+          title: {
+            display: true,
+            text: labelTitle
+          },
+        }
+      }
+    const groupedData = {}
+
+    data && data.getAllSalesStore.forEach((item) => {
+        const year = new Date(item.pDatCre).getFullYear()
+        if (!groupedData[year]) {
+            groupedData[year] = []
+        }
+        groupedData[year].push(item)
+    })
+    const years = []
+    data && data.getAllSalesStore.forEach((item) => {
+        const y = new Date(item.pDatCre).getFullYear()
+        if (!years.includes(y)) {
+            years.push(y)
+        }
+    })
+    const handleChangeYear = (value) => {
+        setFilter(true)
+        const currentYear = parseInt(value)
+        setChartTypeYear(currentYear || '')
+        if (result?.length > 0) {
+            const filterToYear = result.filter((elem) => {
+                return elem?.Year == currentYear
+            })
+            let missingNewMonths = allMonths.filter(month => { return !filterToYear.some(data => { return data.Mes === month }) })
+            for (const element of missingNewMonths) {
+                filterToYear.push({
+                    'Mes': element,
+                    'totalProductsPrice': 0,
+                    'Year': ''
+                })
+            }
+            filterToYear.sort((a, b) => { return a.Mes - b.Mes })
+            setNewResult(filterToYear)
+            return filterToYear
+        }
+    }
+    const cleanFilter = () => {
+        setFilter(false)
+        setChartTypeYear(new Date().getFullYear())
+    }
+    const sortYear = () => {
+        return  years.sort((a, b) => { return b - a });
+    }
+
+    const organiceYears = sortYear()
+    return {
+        handleChangeYear,
+        setFilter,
+        cleanFilter,
+        setChartType,
+        years: organiceYears,
+        asFilter,
+        chartTypeYear,
+        options,
+        chartType,
+        labelTitle,
+        result,
+        dataChart,
+        loading
+    }
+}

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

@@ -1,7 +1,11 @@
 import { useGetAllSales } from "../../useSales/useGetAllSales"
 
-export const useChartDataAllOrders = () => {
-  const { data, loading } = useGetAllSales({})
+export const useChartDataAllOrders = ({
+  onScreen = false
+} = {}) => {
+  const { data, loading } = useGetAllSales({
+    onScreen
+  })
 
   // Objeto para mapear los códigos de estado a sus nombres
   const statusMap = {
@@ -21,7 +25,7 @@ export const useChartDataAllOrders = () => {
   }
 
   // Procesar los datos y acumular los totales por estado
-  data.forEach(item => {
+  data?.forEach(item => {
     const status = item.pSState;
     const totalPrice = item.totalProductsPrice;
     totalsByStatus[status] += totalPrice;
@@ -34,8 +38,8 @@ export const useChartDataAllOrders = () => {
   // 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);
+    chartLabels?.push(statusLabel);
+    chartData?.push(totalsByStatus[status] || 0);
   }
 
   const chartJsData = {
@@ -72,17 +76,18 @@ export const useChartDataAllOrders = () => {
     tooltips: {
       callbacks: {
         label: (tooltipItem, data) => {
-          const dataset = data.datasets[tooltipItem.datasetIndex];
-          const total = dataset.data.reduce((previousValue, currentValue) => previousValue + currentValue);
-          const currentValue = dataset.data[tooltipItem.index];
+          const dataset = data?.datasets[tooltipItem.datasetIndex];
+          const total = dataset?.data?.reduce((previousValue, currentValue) => previousValue + currentValue);
+          const currentValue = dataset?.data[tooltipItem?.index];
           const percentage = ((currentValue / total) * 100).toFixed(2);
-          return `${data.labels[tooltipItem.index]}: ${currentValue} (${percentage}%)`;
+          return `${data?.labels[tooltipItem?.index]}: ${currentValue} (${percentage}%)`;
         },
       },
     },
   };
 
   return {
+    loading,
     data: loading ? [] : chartJsData,
     option: loading ? [] : defaultOptions
   };

package/src/hooks/useCheckbox/index.js

@@ -15,7 +15,7 @@ import { useCallback, useState } from 'react'
  *  - clearAll (callback)
  */
 
-export const useCheckboxState = (elem, selectedIds = [], disabledIds = [], calBack = () => { return }) => {
+export const useCheckboxState = (elem, selectedIds = [], disabledIds = []) => {
   const numTotalItems = elem?.length
   const [checkedItems, setCheckedItems] = useState(new Set(selectedIds))
   const [disabledItems, setDisabledItems] = useState(new Set(disabledIds))
@@ -23,17 +23,14 @@ export const useCheckboxState = (elem, selectedIds = [], disabledIds = [], calBa
   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)
       }
-      calBack([...newState])
       return newState
     })
-    // eslint-disable-next-line
   }, [])
 
   const setAll = useCallback(
@@ -109,9 +106,9 @@ export const useCheckboxState = (elem, selectedIds = [], disabledIds = [], calBa
     disabledItems,
     handleChangeCheck,
     toggleAll,
-    setCheckedItems,
     selectAll,
     clearAll,
+    setCheckedItems,
     enableCheckboxes,
     disableCheckboxes
   }

package/src/hooks/useClients/index.js

@@ -1,4 +1,5 @@
 import { useQuery, useMutation, useLazyQuery } from '@apollo/client'
+import { useState } from 'react'
 import {
   CREATE_CLIENTS,
   DELETE_ONE_CLIENTS,
@@ -10,25 +11,15 @@ import {
 export const useGetClients = ({
   max,
   search,
-  fromDate, // Agrega las variables fromDate y toDate
-  toDate,
   sendNotification = () => { return }
 } = {}) => {
-  const { 
-    loading, 
-    error, 
-    called, 
-    data
-  } = useQuery(GET_ALL_CLIENTS, {
-    variables: {
-      search: search,
-      fromDate: fromDate, // Usa las variables aquí
-      toDate: toDate
-    }
-  });
-
-  return [data?.getAllClients || [], { loading: called ? false : loading, error }];
-};
+    const { loading, error, called, data } = useQuery(GET_ALL_CLIENTS, {
+      variables: {
+        search: search
+      }
+  })
+  return [data?.getAllClients || [], { loading: called ? false : loading, error }]
+}
 
 export const useDeleteClients = ({ sendNotification = () => { return } } = {}) => {
   const [deleteClient, {  loading, error }] = useMutation(DELETE_ONE_CLIENTS)

package/src/hooks/useCreateProduct/index.js

@@ -10,14 +10,11 @@ import {
 import { useStore } from '../useStore'
 import { useTagsProducts } from './../useProductsFood/usetagsProducts'
 import { useEditImageProduct } from './helpers/useEditImageProduct'
-import { errorHandler } from '../../config/client'
-import { useLogout } from '../useLogout'
 
 export const useCreateProduct = ({
+  setAlertBox = () => { },
   router,
-  sendNotification = () => { },
-  handleCloseCreateProduct = () => { },
-  setAlertBox = () => { }
+  sendNotification = () => { }
 }) => {
   const [errors, setErrors] = useState({
     names: ''
@@ -54,7 +51,7 @@ export const useCreateProduct = ({
 
   const handleCheck = (e) => {
     const { name, checked } = e.target
-    return setCheck((prev) => ({ ...prev, [name]: checked }))
+    return setCheck((prev) =>({ ...prev, [name]: checked }))
   }
 
   const handleUpdateBanner = event => {
@@ -123,15 +120,14 @@ export const useCreateProduct = ({
           alt: files[0].name
         }
         : initialState
-    )
+        )
   }
   const onTargetClick = () => {
     fileInputRef.current.click()
   }
   const { img } = useEditImageProduct({ sendNotification, initialState })
-  const [onClickLogout] = useLogout()
-
-  const handleRegister = async ({ callBack = () => { return} } = {}) => {
+  console.log(values)
+  const handleRegister = async () => {
     const {
       ProPrice,
       ProDescuento,
@@ -150,93 +146,67 @@ export const useCreateProduct = ({
     const pCode = RandomCode(9)
     const formatPrice = ProPrice ? parseFloat(ProPrice.replace(/\./g, '')) : 0
     try {
-      if (names.trim() !== '') {
-        updateProductFoods({
-          variables: {
-            input: {
-              idStore: dataStore?.getStore?.idStore || '',
-              ProPrice: check?.desc ? 0 : formatPrice,
-              ProDescuento: check?.desc ? 0 : parseInt(ProDescuento),
-              ValueDelivery: check?.desc ? 0 : parseFloat(ValueDelivery),
-              ProDescription,
-              pName: names,
-              pCode,
-              carProId,
-              pState: 1,
-              sTateLogistic: 1,
-              ProStar: 0,
-              ProImage,
-              ProHeight: parseFloat(ProHeight),
-              ProWeight,
-              ProOutstanding: check?.desc ? 1 : 0,
-              ProDelivery: check?.desc ? 1 : 0
-            }
-          }, update(cache) {
-            cache.modify({
-              fields: {
-                productFoodsAll(dataOld = []) {
-                  return cache.writeQuery({ query: GET_ALL_FOOD_PRODUCTS, data: dataOld })
-                }
-              }
-            })
+      updateProductFoods({
+        variables: {
+          input: {
+            idStore: dataStore?.getStore?.idStore || '',
+            ProPrice: check?.desc ? 0 : formatPrice,
+            ProDescuento: check?.desc ? 0 : parseInt(ProDescuento),
+            ValueDelivery: check?.desc ? 0 : parseFloat(ValueDelivery),
+            ProDescription,
+            pName: names,
+            pCode,
+            carProId,
+            pState: 1,
+            sTateLogistic: 1,
+            ProStar: 0,
+            ProImage,
+            ProHeight: parseFloat(ProHeight),
+            ProWeight,
+            ProOutstanding: check?.desc ? 1 : 0,
+            ProDelivery: check?.desc ? 1 : 0
           }
-        }).then((res) => {
-
-          const { updateProductFoods } = res?.data || {}
-          const { pId } = updateProductFoods || {}
-
-          if (res?.errors?.length > 0) {
-            const errors = {
-              errors: res?.errors
-            }
-            const responseError = errorHandler(errors);
-            if (responseError) {
-              handleCloseCreateProduct()
-              return onClickLogout()
-            }
-          } else {
-            router.push(
-              {
-                query: {
-                  ...router.query,
-                  food: pId
-                }
-              },
-              undefined,
-              { shallow: true }
-            )
-            if (pId){
-              setPid(pId ?? null)
-              sendNotification({
-                backgroundColor: 'success',
-                title: 'Success',
-                description: `El producto ${names} subido con éxito`
-              })
-              callBack()
-            }
-            const objTag = {
-              aName: tags?.tag,
-              nameTag: tags?.tag,
-              pId
+        },
+        update (cache) {
+          cache.modify({
+            fields: {
+              productFoodsAll (dataOld = []) {
+                return cache.writeQuery({ query: GET_ALL_FOOD_PRODUCTS, data: dataOld })
+              }
             }
-            handleRegisterTags(objTag)
-            setValues({})
-          }
-        }).catch(err => {
-          return sendNotification({
-            backgroundColor: 'error',
-            title: 'Error inesperado',
-            description: `${err}`
           })
+        }
+      }).then((res) => {
+        const { updateProductFoods } = res?.data || {}
+        const { pId } = updateProductFoods || {}
+        setPid(pId ?? null)
+        router.push(
+          {
+            query: {
+              ...router.query,
+              food: pId
+            }
+          },
+          undefined,
+          { shallow: true }
+        )
+        sendNotification({
+          backgroundColor: 'success',
+          title: 'Success',
+          description: `El producto ${names} subido con éxito`
         })
-
-      } else {
-        return sendNotification({
-          backgroundColor: 'warning',
-          title: 'Alerta',
-          description: 'El nombre del producto no debe estar vacio'
-        })
-      }
+        const objTag = {
+          aName: tags.tag,
+          nameTag: tags.tag,
+          pId
+        }
+        handleRegisterTags(objTag)
+        // setValues({})
+      }).catch(err => { return sendNotification({
+        backgroundColor: 'error',
+        title: `${err}`,
+        description: 'Error inesperado'
+      }) })
       if (image !== null) {
         setImageProducts({
           variables: {
@@ -249,7 +219,7 @@ export const useCreateProduct = ({
         }).catch((error) => {
           sendNotification({
             backgroundColor: 'error',
-            title: `Ocurrió un error en la imagen en el producto ${names}`,
+            title: `Ocurrió un error en la imagen en el producto ${names}`, 
             description: 'error'
           })
         })

package/src/hooks/useDrag/index.js

@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react'
 
 export function useDrag2 (ref) {
   useEffect(() => {
+    if (!ref || !ref?.current) return null
     const target = ref?.current
     if (!target) return
     const previousOffset = { x: 0, y: 0 }

package/src/hooks/useEmployee/index.js

@@ -1,16 +1,13 @@
 import { useQuery } from '@apollo/client'
+import { useEffect, useState } from 'react'
 import { GET_EMPLOYEES } from './queries'
 
 export const useEmployee = () => {
-  const { data, loading, error, fetchMore } = useQuery(GET_EMPLOYEES, {
-    onError: (error) => {
-      console.error(error)
-    }
-  })
-  const employees = data?.employees || []
-  return [employees, { 
-    loading, 
-    error,
-    fetchMore
-  }]
+  const [clientes, setClients] = useState([])
+  const [more, setMore] = useState(100)
+  const { data, loading, error, fetchMore } = useQuery(GET_EMPLOYEES)
+  useEffect(() => {
+    setClients(data)
+  }, [clientes, data])
+  return [clientes?.employees, { loading, error, fetchMore, setMore, more }]
 }

package/src/hooks/useFormTools/index.js

@@ -75,7 +75,7 @@ export const useFormTools = ({ sendNotification = () => { } } = {}) => {
 
     // Ejecuta la accion si es válido
     if (!errSub && action) {
-      action()?.then(res => {
+      action().then(res => {
         if (res) {
           sendNotification({
             message: msgSuccess || 'Operación exitosa',

package/src/hooks/useFullScreenMode/index.js

@@ -1,10 +1,7 @@
-import React, { 
-  useState, 
-  useRef, 
-  useEffect
-} from 'react'
+import React, { useState, useRef, useEffect } from 'react'
+import styled from 'styled-components'
 
-export const useFullScreenMode = () => {
+export const useFullscreenMode = () => {
   const [isFullscreen, setFullscreen] = useState(false)
   const elementRef = useRef()
 
@@ -59,7 +56,10 @@ export const useFullScreenMode = () => {
   }
 
   const ToggleIcon = (
-    <button onDoubleClick={() => {return (!isFullscreen ? goFullscreen() : exitFullScreen())}}>{!isFullscreen ? 'FullScreen' : 'Normal'}</button>
+    <Button onDoubleClick={() => {return (!isFullscreen ? goFullscreen() : exitFullScreen())}}>{!isFullscreen ? 'FullScreen' : 'Normal'}</Button>
   )
   return [elementRef, ToggleIcon] //Icon, ref
-}
+}
+const Button = styled.button`
+
+`