npm-pkg-hook 1.3.9 → 1.4.0

package/src/hooks/useFetchMoreInteractions/index.jsx

@@ -1,39 +1,39 @@
 import React, {
-    useEffect,
-    useRef,
-    useState
+  useEffect,
+  useRef,
+  useState
 } from 'react'
 
 export const useFetchMoreInteractions = ({
-    render,
-    fetchMore = true,
-    callback = () => {}
+  render,
+  fetchMore = true,
+  callback = () => {}
 }) => {
-    const loadingRef = useRef()
+  const loadingRef = useRef()
 
-    const useOnScreen = ref => {
-        const [isIntersecting, setIsIntersecting] = useState(false)
+  const useOnScreen = ref => {
+    const [isIntersecting, setIsIntersecting] = useState(false)
 
-        const observer = new IntersectionObserver(
-            ([entry]) => setIsIntersecting(entry.isIntersecting)
-        )
+    const observer = new IntersectionObserver(
+      ([entry]) => {return setIsIntersecting(entry.isIntersecting)}
+    )
 
-        useEffect(() => {
-            if (ref.current) observer.observe(ref.current)
-            // Remove the observer as soon as the component is unmounted
-            return () => { observer.disconnect() }
-        }, [ref, observer])
+    useEffect(() => {
+      if (ref.current) observer.observe(ref.current)
+      // Remove the observer as soon as the component is unmounted
+      return () => { observer.disconnect() }
+    }, [ref, observer])
 
-        return isIntersecting
-    }
+    return isIntersecting
+  }
 
-    const isVisible = useOnScreen(loadingRef)
+  const isVisible = useOnScreen(loadingRef)
 
-    useEffect(() => {
-        if (isVisible && fetchMore) callback()
-    }, [isVisible, callback, fetchMore])
+  useEffect(() => {
+    if (isVisible && fetchMore) callback()
+  }, [isVisible, callback, fetchMore])
 
-    return <div ref={loadingRef}>
-        {isVisible && fetchMore ? render || <div style={{ background: 'red' }} >Loading...{isVisible && 'lol'}</div> : <></>}
-    </div>
+  return <div ref={loadingRef}>
+    {isVisible && fetchMore ? render || <div style={{ background: 'red' }} >Loading...{isVisible && 'lol'}</div> : <></>}
+  </div>
 }

package/src/hooks/useFilterConfigs/index.ts

@@ -0,0 +1,173 @@
+// useFilterConfigs.ts
+import { gql, useQuery } from '@apollo/client'
+
+/**
+ * GraphQL query: expects the backend to return a JSON (or custom scalar) containing filterTabs
+ */
+const GET_FILTER_CONFIGS = gql`
+  query GetFilterConfigs($idStore: String) {
+    filterConfigs(idStore: $idStore) {
+      id
+      idStore
+      filterTabs
+      active
+      priority
+      createdAt
+      updatedAt
+    }
+  }
+`
+
+/**
+ * Type definitions matching DB/json structure
+ */
+
+/**
+ * @typedef {Object} FilterValue
+ * @property {string} [id]
+ * @property {string} description
+ * @property {number|string|null} [value]
+ * @property {string|null} [imageUrn]
+ */
+export type FilterValue = {
+    id?: string
+    description: string
+    value?: number | string | null
+    imageUrn?: string | null
+}
+
+/**
+ * @typedef {Object} FilterGroup
+ * @property {string} id
+ * @property {string} description
+ * @property {string} displayType
+ * @property {FilterValue[]} values
+ */
+export type FilterGroup = {
+    id: string
+    description: string
+    displayType: string
+    values: FilterValue[]
+}
+
+/**
+ * @typedef {Object} FilterTab
+ * @property {string} id
+ * @property {string} name
+ * @property {FilterGroup[]} filterGroups
+ */
+export type FilterTab = {
+    id: string
+    name: string
+    filterGroups: FilterGroup[]
+}
+
+/**
+ * @typedef {Object} FilterConfigRecord
+ * @property {string} id
+ * @property {string|null} idStore
+ * @property {FilterTab[]} filterTabs
+ * @property {boolean} active
+ * @property {number} priority
+ */
+export type FilterConfigRecord = {
+    id: string
+    idStore: string | null
+    filterTabs: FilterTab[]
+    active: boolean
+    priority: number
+}
+
+/**
+ * Runtime guard to ensure shape is roughly correct
+ * @param anyData any
+ * @returns boolean
+ */
+const isFilterTabs = (anyData: any): any is FilterTab[] => {
+  if (!Array.isArray(anyData)) return false
+  for (const tab of anyData) {
+    if (typeof tab?.id !== 'string' || typeof tab?.name !== 'string') return false
+    if (!Array.isArray(tab.filterGroups)) return false
+    for (const g of tab.filterGroups) {
+      if (typeof g?.id !== 'string') return false
+      if (!Array.isArray(g.values)) return false
+    }
+  }
+  return true
+}
+
+/**
+ * Hook options
+ */
+export type UseFilterConfigsOptions = {
+    idStore?: string | null
+    pollIntervalMs?: number
+    skip?: boolean
+    onError?: (err: Error) => void
+}
+
+/**
+ * Hook return
+ */
+export type UseFilterConfigsResult = {
+    data: FilterTab[]
+    rawRecords: FilterConfigRecord[] | null
+    loading: boolean
+    error: Error | null
+    refetch: () => Promise<void>
+}
+
+/**
+ * Custom hook to fetch filter configs from GraphQL and expose typed, validated tabs.
+ * - Returns empty array when data is invalid (defensive).
+ * - Accepts idStore and poll interval as parameters for flexibility.
+ *
+ * @param {UseFilterConfigsOptions} options
+ * @returns {UseFilterConfigsResult}
+ */
+export const useFilterConfigs = ({
+  skip = false,
+  onError
+}: UseFilterConfigsOptions = {}): UseFilterConfigsResult => {
+  const { data, loading, error, refetch } = useQuery(
+    GET_FILTER_CONFIGS,
+    {
+      skip
+    }
+  )
+
+  if (error && onError) onError(error as Error)
+
+  const rawRecords =
+        Array.isArray((data as any)?.filterConfigs) ? (data as any).filterConfigs as FilterConfigRecord[] : null
+
+  let tabs: FilterTab[] = []
+
+  if (rawRecords && rawRecords.length > 0) {
+    // pick the active config with highest priority (lowest number)
+    const active = rawRecords
+      .filter(r => {return r.active !== false})
+      .sort((a, b) => {return (a.priority ?? 9999) - (b.priority ?? 9999)})[0]
+
+    const candidate = active ?? rawRecords[0]
+
+    if (candidate && isFilterTabs(candidate.filterTabs)) {
+      tabs = candidate.filterTabs
+    } else {
+      // defensive logging — don't throw to avoid crashing UI, return empty array
+       
+      console.warn('useFilterConfigs: invalid filterTabs structure', candidate?.filterTabs)
+      tabs = []
+    }
+  }
+
+  return {
+    data: [{ 'id': 'BASIC', 'name': 'Básicos', 'filterGroups': [{ 'id': 'DELIVERY_MODE', 'description': 'Modo de entrega', 'displayType': 'WORD_CLOUD_SINGLE', 'values': [{ 'id': 'DELIVERY', 'description': 'Entrega' }, { 'id': 'TAKEOUT', 'description': 'Pra retirar' }] }, { 'id': 'SORTING', 'description': 'Ordenar por', 'displayType': 'GRID', 'values': [{ 'id': 'DEFAULT', 'description': 'Ordenação Padrão' }, { 'id': 'PRICE_RANGE:ASC', 'description': 'Preço' }, { 'id': 'USER_RATING:DESC', 'description': 'Avaliação' }, { 'id': 'DELIVERY_TIME:ASC', 'description': 'Tempo de Entrega' }, { 'id': 'DELIVERY_FEE:ASC', 'description': 'Taxa de Entrega' }, { 'id': 'DISTANCE:ASC', 'description': 'Menor distância' }] }, { 'id': 'DISTANCE', 'description': 'Distância', 'displayType': 'SLIDER', 'values': [{ 'id': 'MIN_VALUE', 'description': '1' }, { 'id': 'MAX_VALUE', 'description': '10' }] }, { 'id': 'DELIVERY_FEE', 'description': 'Taxa de entrega', 'displayType': 'WORD_CLOUD_SINGLE', 'values': [{ 'id': 'FREE', 'description': 'Grátis', 'value': 0 }, { 'id': 'MAX_FIVE', 'description': 'até R$ 5,00', 'value': 5 }, { 'id': 'MAX_TEN', 'description': 'até R$ 10,00', 'value': 10 }] }, { 'id': 'TAGS', 'description': 'Filtros especiais', 'displayType': 'CHECKBOX', 'values': [{ 'id': 'SUPER_RESTAURANT', 'imageUrn': 'SUPER_RESTAURANT.png', 'description': 'Super-Restaurantes' }, { 'id': 'SUPPORTS_ORDER_TRACKING', 'imageUrn': 'SUPPORTS_ORDER_TRACKING.png', 'description': 'Entrega Parceira' }, { 'id': 'SUPPORTS_ANY_TRACKING', 'imageUrn': 'SUPPORTS_ANY_TRACKING.png', 'description': 'Entrega Rastreável' }, { 'id': 'SUPPORTS_SCHEDULING', 'imageUrn': 'SUPPORTS_SCHEDULING.png', 'description': 'Aceita agendamento' }] }] }, { 'id': 'CATEGORY', 'name': 'Categorias', 'filterGroups': [{ 'id': 'MERCHANT_TYPE', 'description': 'Tipo de loja', 'displayType': 'GRID', 'values': [{ 'id': 'ALL', 'description': 'Todas as lojas' }, { 'id': 'RESTAURANT', 'description': 'Restaurante' }, { 'id': 'MARKET', 'description': 'Mercado' }] }, { 'id': 'AVAILABLE_CATEGORIES', 'description': 'Categorias', 'displayType': 'WORD_CLOUD', 'values': [{ 'description': 'Africana', 'id': 'AF1' }, { 'description': 'Alemã', 'id': 'ALE' }, { 'description': 'Árabe', 'id': 'ARA' }, { 'description': 'Argentina', 'id': 'AR1' }, { 'description': 'Asiática', 'id': 'ASI' }, { 'description': 'Açaí', 'id': 'AC1' }, { 'description': 'Baiana', 'id': 'BA1' }, { 'description': 'Bebidas', 'id': 'BEB' }, { 'description': 'Brasileira', 'id': 'BRA' }, { 'description': 'Cafeteria', 'id': 'CA1' }, { 'description': 'Carnes', 'id': 'CAR' }, { 'description': 'Casa de Sucos', 'id': 'CS1' }, { 'description': 'Chinesa', 'id': 'CHI' }, { 'description': 'Colombiana', 'id': 'CO1' }, { 'description': 'Congelados Fit', 'id': 'CF1' }, { 'description': 'Congelados', 'id': 'CN1' }, { 'description': 'Contemporânea', 'id': 'CNT' }, { 'description': 'Conveniência', 'id': 'CV1' }, { 'description': 'Coreana', 'id': 'CR1' }, { 'description': 'Cozinha rápida', 'id': 'CRP' }, { 'description': 'Crepe', 'id': 'CP1' }, { 'description': 'Doces & Bolos', 'id': 'DCE' }, { 'description': 'Espanhola', 'id': 'ES1' }, { 'description': 'Francesa', 'id': 'FRA' }, { 'description': 'Frangos', 'id': 'FR1' }, { 'description': 'Frutos do mar', 'id': 'FRU' }, { 'description': 'Gaúcha', 'id': 'GA1' }, { 'description': 'Grega', 'id': 'GRC' }, { 'description': 'Hambúrguer', 'id': 'BUR' }, { 'description': 'Indiana', 'id': 'IND' }, { 'description': 'Italiana', 'id': 'ITA' }, { 'description': 'Japonesa', 'id': 'JAP' }, { 'description': 'Lanches', 'id': 'LCH' }, { 'description': 'Marmita', 'id': 'MA1' }, { 'description': 'Marroquina', 'id': 'MAR' }, { 'description': 'Mediterrânea', 'id': 'MED' }, { 'description': 'Mercado 🛒', 'id': 'MER' }, { 'description': 'Mexicana', 'id': 'MEX' }, { 'description': 'Mineira', 'id': 'MI1' }, { 'description': 'Nordestina', 'id': 'NO1' }, { 'description': 'Padaria', 'id': 'PA1' }, { 'description': 'Panqueca', 'id': 'PQC' }, { 'description': 'Paranaense', 'id': 'PR1' }, { 'description': 'Pastel', 'id': 'PAS' }, { 'description': 'Peixes', 'id': 'PX1' }, { 'description': 'Peruana', 'id': 'PER' }, { 'description': 'Pizza', 'id': 'PIZ' }, { 'description': 'Portuguesa', 'id': 'POR' }, { 'description': 'Presentes', 'id': 'PRE' }, { 'description': 'Salgados', 'id': 'SAG' }, { 'description': 'Saudável', 'id': 'SAU' }, { 'description': 'Sopas & Caldos', 'id': 'SP1' }, { 'description': 'Sorvetes', 'id': 'SOR' }, { 'description': 'Tailandesa', 'id': 'THA' }, { 'description': 'Tapioca', 'id': 'TA1' }, { 'description': 'Típica do Norte', 'id': 'TN1' }, { 'description': 'Variada', 'id': 'VAR' }, { 'description': 'Vegana', 'id': 'VE1' }, { 'description': 'Vegetariana', 'id': 'VEG' }, { 'description': 'Xis', 'id': 'XI1' }, { 'description': 'Yakisoba', 'id': 'YA1' }] }] }, { 'id': 'PAYMENT', 'name': 'Pagamentos', 'filterGroups': [{ 'id': 'MEDIUM_PRICE', 'description': 'Preço médio', 'displayType': 'WORD_CLOUD_SINGLE', 'values': [{ 'id': 'CHEAPEST', 'description': '$' }, { 'id': 'CHEAP', 'description': '$$' }, { 'id': 'MODERATE', 'description': '$$$' }, { 'id': 'EXPENSIVE', 'description': '$$$$' }, { 'id': 'MOST_EXPENSIVE', 'description': '$$$$$' }] }, { 'id': 'ONLINE_PAYMENTS', 'description': 'Pagamento pelo app', 'displayType': 'WORD_CLOUD', 'values': [{ 'id': 'PIX', 'description': 'pix' }, { 'id': 'ELO', 'description': 'Elo' }, { 'id': 'MC', 'description': 'Mastercard' }, { 'id': 'MCMA', 'description': 'Mastercard Maestro' }, { 'id': 'VIS', 'description': 'Visa' }, { 'id': 'VISE', 'description': 'Visa Electron' }, { 'id': 'AM', 'description': 'Amex' }, { 'id': 'DNR', 'description': 'Diners' }] }, { 'id': 'ONLINE_PAYMENTS_VR', 'description': 'Vale-refeição/alimentação pelo app', 'displayType': 'WORD_CLOUD', 'values': [{ 'id': 'IMV', 'description': 'iFood Refeição' }, { 'id': 'VRO', 'description': 'VR Refeição' }, { 'id': 'SRP', 'description': 'Sodexo Refeição' }, { 'id': 'ALR', 'description': 'Alelo Refeição' }, { 'id': 'TRO', 'description': 'Ticket' }, { 'id': 'BENRON', 'description': 'Ben Refeição' }] }, { 'id': 'OFFLINE_PAYMENTS', 'description': 'Pagamento na entrega', 'displayType': 'WORD_CLOUD', 'values': [{ 'id': 'DIN', 'description': 'Dinheiro' }, { 'id': 'RSODEX', 'description': 'Sodexo' }, { 'id': 'VVREST', 'description': 'Vale Alelo Refeição' }, { 'id': 'VR_SMA', 'description': 'VR Refeição' }, { 'id': 'BENVVR', 'description': 'Ben Refeição' }, { 'id': 'TRE', 'description': 'Ticket' }, { 'id': 'RDREST', 'description': 'Mastercard - Crédito' }, { 'id': 'MEREST', 'description': 'Mastercard' }, { 'id': 'VSREST', 'description': 'Visa - Crédito' }, { 'id': 'VIREST', 'description': 'Visa' }, { 'id': 'REC', 'description': 'Elo - Crédito' }, { 'id': 'RED', 'description': 'Elo' }, { 'id': 'RHIP', 'description': 'Hipercard' }, { 'id': 'TVER', 'description': 'Verocard' }, { 'id': 'RAM', 'description': 'American Express' }, { 'id': 'CPRCAR', 'description': 'Cooper Card' }, { 'id': 'GRNCAR', 'description': 'Green Card' }, { 'id': 'GRNCPL', 'description': 'Green Card (papel)' }, { 'id': 'RSELE', 'description': 'Refeisul' }, { 'id': 'VALECA', 'description': 'Vale Card' }, { 'id': 'BANRC', 'description': 'Banricompras - Crédito' }, { 'id': 'BANRD', 'description': 'Banricompras' }, { 'id': 'DNREST', 'description': 'Diners' }, { 'id': 'GOODC', 'description': 'Goodcard' }, { 'id': 'VERDEC', 'description': 'Verdecard' }, { 'id': 'CHE', 'description': 'Cheque' }] }] }],
+    rawRecords,
+    loading,
+    error: error ? (error as Error) : null,
+    refetch: async () => {
+      await refetch()
+    }
+  }
+}

package/src/hooks/useFingerprintjs/{index.js → index.ts}

@@ -1,5 +1,8 @@
-import md5 from 'md5'
+// import md5 from 'md5'
 
+/**
+ *
+ */
 async function getCPUInfo () {
   if (navigator.hardwareConcurrency) {
     try {
@@ -25,6 +28,9 @@ async function getCPUInfo () {
   }
 }
 
+/**
+ *
+ */
 async function generateFingerprint () {
   const canvas = document.createElement('canvas')
   const audioContext = new (window.AudioContext || window.webkitAudioContext)()
@@ -50,7 +56,7 @@ async function generateFingerprint () {
       language,
       colorDepth,
       availableScreenHeight,
-      plugins: Array.from(navigator.plugins).map(plugin => plugin.name).join(','),
+      plugins: Array.from(navigator.plugins).map(plugin => {return plugin.name}).join(','),
       timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
       hardwareConcurrency: cpuInfo.logicalCores || 'unknown',
       platformVersion: navigator.platformVersion || 'unknown'
@@ -68,12 +74,15 @@ async function generateFingerprint () {
   }
 
   const fingerprint = JSON.stringify(fingerprintData)
-  const uniqueID = md5(fingerprint)
-
-  return uniqueID
+  // const uniqueID = md5(fingerprint)
+  return fingerprint
 }
 
 // Función para generar huella digital del audio
+/**
+ *
+ * @param audioContext
+ */
 async function generateAudioFingerprint (audioContext) {
   if (audioContext) {
     try {
@@ -95,6 +104,10 @@ async function generateAudioFingerprint (audioContext) {
 }
 
 // Función para generar huella digital del canvas
+/**
+ *
+ * @param canvas
+ */
 async function generateCanvasFingerprint (canvas) {
   if (canvas) {
     try {
@@ -124,6 +137,9 @@ async function generateCanvasFingerprint (canvas) {
   return { width: 0, height: 0 }
 }
 
+/**
+ *
+ */
 async function getWebGLInfo () {
   if ('WebGLRenderingContext' in window) {
     const canvas = document.createElement('canvas')
@@ -142,6 +158,9 @@ async function getWebGLInfo () {
   return 'webgl-info-not-supported'
 }
 
+/**
+ *
+ */
 function getInstalledFonts () {
   const fonts = []
 
@@ -154,6 +173,9 @@ function getInstalledFonts () {
   return fonts.join(',')
 }
 
+/**
+ *
+ */
 function getTouchscreenInfo () {
   if ('maxTouchPoints' in navigator) {
     const maxTouchPoints = navigator.maxTouchPoints
@@ -165,8 +187,11 @@ function getTouchscreenInfo () {
   return 'touchscreen-info-not-supported'
 }
 
+/**
+ *
+ */
 export async function fingerprintJs () {
   const fingerprint = await generateFingerprint()
-  const uniqueID = md5(fingerprint)
-  return uniqueID
+  // const uniqueID = md5(fingerprint)
+  return fingerprint
 }

package/src/hooks/useFormTools/index.ts

@@ -0,0 +1,143 @@
+import {
+  useCallback,
+  useEffect,
+  useState
+} from 'react'
+
+import { validationSubmitHooks } from '../../utils'
+
+
+interface UseFormToolsProps {
+  initialValues?: Record<string, any>;
+  sendNotification?: ({
+    title,
+    description,
+    backgroundColor
+  }: {
+    title?: string;
+    description?: string;
+    backgroundColor?: string;
+  }) => void;
+}
+
+/**
+ * @param root0
+ * @param root0.initialValues
+ * @param root0.sendNotification
+ * @version 0.0.1
+ * @description Hook con herramientas de validación y eventos de cambio
+ * @return {Array} devuelve la función onChange a ejecutar y el estado de error de cada input
+ */
+export const useFormTools = ({
+  initialValues = {},
+  sendNotification = ({
+    title = '',
+    description = '',
+    backgroundColor = ''
+  }) => {
+    console.log({ title, description, backgroundColor })
+  }
+}: UseFormToolsProps = {}) => {
+  const [dataForm, setDataForm] = useState<Record<string, any>>({ ...initialValues })
+  const [errorForm, setErrorForm] = useState<Record<string, boolean>>({})
+  const [errorSubmit, setErrorSubmit] = useState(false)
+  const [calledSubmit, setCalledSubmit] = useState(false)
+  // Handle Change
+  const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement>, error: boolean) => {
+    setDataForm({ ...dataForm, [e.target.name]: e.target.value })
+    setErrorForm({ ...errorForm, [e.target.name]: error })
+  }, [setDataForm, dataForm, errorForm, setErrorForm])
+
+  // Forzar datos desde una ventana externa
+  const handleForcedData = useCallback((data: Record<string, any>) => {
+    setDataForm(data)
+  }, [setDataForm])
+
+  // Forzar datos de error desde una ventana externa
+  const setForcedError = useCallback((errors: Record<string, boolean>) => {
+    setErrorForm(errors)
+  }, [setErrorForm])
+
+  // Handle submit, al enviar formulario
+  const listErrors = Object.values(errorForm)
+  const errors = listErrors.find((error) => {
+    return error === true
+  })
+
+  const handleSubmit = ({
+    event,
+    msgError = '',
+    msgSuccess,
+    action = () => { return Promise.resolve() },
+    actionAfterSuccess = () => { }
+  }: {
+    event: React.FormEvent<HTMLFormElement>,
+    msgError?: string,
+    msgSuccess?: string,
+    action?: () => Promise<any>,
+    actionAfterSuccess?: () => void
+  }) => {
+    event.preventDefault()
+    setCalledSubmit(true)
+    let errSub = false
+
+    // Valida los errores locales
+    for (const x in errorForm) {
+      if (errorForm[x]) errSub = true
+    }
+    if (errSub) {
+      sendNotification({
+        description: 'Completa los campos requeridos',
+        title: 'Error',
+        backgroundColor: 'error'
+      })
+    }
+    if (errors) {
+      setErrorSubmit(true)
+      return setForcedError({ ...errorForm })
+    }
+
+    if (errSub) return setErrorSubmit(errSub)
+
+    // Valida los errores desde el evento
+    const errores = validationSubmitHooks(event.currentTarget.elements)
+    setErrorForm(errores)
+    for (const x in errores) {
+      // @ts-ignore
+      if (errores[x]) errSub = true
+    }
+    if (errSub) return setErrorSubmit(errSub)
+
+    // Ejecuta la accion si es válido
+    if (!errSub && typeof action === 'function') {
+      const result = action()
+      if (result && typeof result.then === 'function') {
+        result.then((res) => {
+          if (res) {
+            sendNotification({
+              title: msgSuccess ?? 'Operación exitosa',
+              description: 'Operación exitosa',
+              backgroundColor: 'success'
+            })
+            if (actionAfterSuccess) actionAfterSuccess()
+          }
+        }).catch((e) => {
+          sendNotification({
+            title: msgError || e?.message || 'Ha ocurrido un error',
+            backgroundColor: 'error'
+          })
+        })
+      }
+    }
+
+    setErrorSubmit(errSub)
+  }
+
+  useEffect(() => { return setCalledSubmit(false) }, [calledSubmit])
+  useEffect(() => {
+    return setCalledSubmit(false)
+  },
+  [])
+
+  return [handleChange, handleSubmit, handleForcedData, { dataForm, errorForm, errorSubmit, calledSubmit, setForcedError }]
+}

package/src/hooks/useFormatDate/index.ts

@@ -0,0 +1,91 @@
+interface UseFormatDateProps {
+  date?: string | number | Date;
+  local?: string;
+}
+
+export const useFormatDate = ({
+  date,
+  local = 'ES-CO'
+}: UseFormatDateProps = {}) => {
+  const dateToFormat = new Date(date ?? Date.now())
+  const fullDate = dateToFormat.toLocaleDateString(local, { year: 'numeric', month: '2-digit', day: '2-digit' })
+  const day = fullDate.split('/')[0]
+  const month = fullDate.split('/')[1]
+  const year = fullDate.split('/')[2]
+  const yearMonthDay = dateToFormat.toLocaleDateString('ES-CO')
+  const numberDay = dateToFormat.getDay()
+  const shortDayName = dateToFormat.toLocaleDateString(local, { weekday: 'short' })
+  const longDayName = dateToFormat.toLocaleDateString(local, { weekday: 'long' })
+  const hourMinutes12 = dateToFormat.toLocaleTimeString('ES-CO', { hour: '2-digit', minute: '2-digit' })
+  const hourMinutes24 = dateToFormat.toLocaleTimeString('ES-CO', { hour: '2-digit', minute: '2-digit', hour12: false })
+  const handleHourPmAM = (hour: string) => {
+    const hourPmAm = new Date(`1/1/1999 ${hour}`).toLocaleString('en-US', { hour: 'numeric', minute: 'numeric', hour12: true })
+    return hour ? hourPmAm : ''
+  }
+  /**
+   * Formats a date into Colombian time zone and Spanish locale for POS display.
+   * Example output: "15 de mayo de 2025 a las 14:23"
+   *
+   * @param {string | number | Date} dateInput - Date to format (ISO string, timestamp or Date object)
+   * @returns {string} - Formatted date string in Colombian time
+   */
+  function formatDateInTimeZone (dateInput : string | number | Date): string {
+    const timeZone = 'America/Bogota'
+    const locale = 'es-CO'
+    const options: Intl.DateTimeFormatOptions = {
+      timeZone,
+      year: 'numeric',
+      month: 'long',
+      day: '2-digit',
+      hour: '2-digit',
+      minute: '2-digit',
+      hour12: false
+    }
+
+    const date = new Date(dateInput)
+    const formatted = new Intl.DateTimeFormat(locale, options).format(date)
+
+    // Cambiar coma por "a las" para mejor legibilidad
+    return formatted.replace(',', ' a las')
+  }
+  /**
+   * Formats a date into YYYY-MM-DD using a given IANA timezone.
+   *
+   * @param {string | number | Date} inputDate - The date to format.
+   * @param {string} timeZone - IANA timezone string (default is "America/Bogota").
+   * @returns {string} Formatted date string in YYYY-MM-DD.
+   * @throws {Error} If the input date is invalid.
+   */
+  const formatToLocalDateYMD = (inputDate: string | number | Date, timeZone = 'America/Bogota') => {
+    const date = new Date(inputDate)
+
+    if (isNaN(date.getTime())) {
+      throw new Error('Invalid date input provided to formatToLocalDateYMD')
+    }
+
+    const localDateStr = date.toLocaleString('en-US', { timeZone })
+    const localDate = new Date(localDateStr)
+
+    const year = localDate.getFullYear()
+    const month = String(localDate.getMonth() + 1).padStart(2, '0')
+    const day = String(localDate.getDate()).padStart(2, '0')
+
+    return `${year}-${month}-${day}`
+  }
+
+  return {
+    day,
+    fullDate,
+    formatToLocalDateYMD,
+    hourMinutes12,
+    numberDay,
+    yearMonthDay,
+    hourMinutes24,
+    longDayName,
+    shortDayName,
+    month,
+    year,
+    handleHourPmAM,
+    formatDateInTimeZone
+  }
+}

package/src/hooks/useFullScreenMode/{index.js → index.ts}

@@ -1,5 +1,4 @@
 import React, { useState, useRef, useEffect } from 'react'
-import styled from 'styled-components'
 
 export const useFullscreenMode = () => {
   const [isFullscreen, setFullscreen] = useState(false)
@@ -56,10 +55,7 @@ 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`
-
-`

package/src/hooks/useGetAllLocationUser/index.ts

@@ -0,0 +1,13 @@
+import { useQuery } from '@apollo/client'
+
+import { GET_ALL_LOCATIONS } from './queries'
+
+/**
+ * useGetAllLocationUser
+ * @returns {any}
+ */
+export const useGetAllLocationUser = () => {
+  const { data, loading } = useQuery(GET_ALL_LOCATIONS)
+
+  return [data, { loading }]
+}

package/src/hooks/useGetAllLocationUser/queries.ts

@@ -0,0 +1,44 @@
+import { gql } from '@apollo/client'
+
+export const GET_ALL_LOCATIONS = gql`
+
+query getUserLocations {
+  getUserLocations {
+    locationId
+    # id
+    cId
+    dId
+    ctId
+    uLatitud
+    uLongitude
+    uLocationKnow
+    uPiso
+    DatCre
+    DatMod
+       pais {
+        cId
+        cName
+        cCalCod
+        cState
+        cDatCre
+        cDatMod
+      }
+      city {
+        ctId
+        dId
+        cName
+        cState
+        cDatCre
+        cDatMod
+      } 
+      department {
+        dId
+        cId
+        dName
+        dState
+        dDatCre
+        dDatMod
+      }
+  }
+}
+`

package/src/hooks/{useSales/useGetAllSales/index.js → useGetAllSales/index.ts}

@@ -1,5 +1,6 @@
-import { useQuery } from '@apollo/client'
-import { GET_ALL_SALES_STATISTICS } from '../queries'
+import { useQuery } from '@apollo/client'
+
+import { GET_ALL_SALES_STATISTICS } from '../useSales/queries'
 
 export const useGetAllSales = ({
   fromDate = '',