@controleonline/ui-common 1.2.70

package/src/react/components/inputs/InvoiceDueDateFilterInput.js

@@ -0,0 +1,74 @@
+import React, { useState } from 'react'
+import { View, Text, TextInput } from 'react-native'
+import { useStore } from '@store'
+import { normalizeDateInputToYmd } from '@controleonline/ui-common/src/react/utils/dateRangeFilter'
+import {
+  resolveInvoiceInvalidDateFormatMessage,
+  resolveInvoiceSingleDatePlaceholder,
+} from '@controleonline/ui-common/src/react/utils/invoiceDueDateMessages'
+import styles from './InvoiceDueDateFilterInput.styles'
+
+const InvoiceDueDateFilterInput = () => {
+  const invoiceStore = useStore('invoice')
+  const { actions: invoiceActions } = invoiceStore
+  const [inputValue, setInputValue] = useState('')
+  const [error, setError] = useState('')
+
+  const validateDate = (value) => {
+    if (value.trim() === '') {
+      setError('')
+      return true
+    }
+
+    const normalizedDate = normalizeDateInputToYmd(value)
+
+    if (normalizedDate) {
+      setError('')
+    } else {
+      setError(resolveInvoiceInvalidDateFormatMessage())
+    }
+
+    return Boolean(normalizedDate)
+  }
+
+  const handleTextChange = (value) => {
+    setInputValue(value)
+
+    if (value.trim() === '') {
+      invoiceActions.setFilterDueDate(null)
+      setError('')
+    } else if (validateDate(value)) {
+      invoiceActions.setFilterDueDate(normalizeDateInputToYmd(value))
+    }
+  }
+
+  const handleBlur = () => {
+    if (inputValue.trim() !== '' && !error) {
+      invoiceActions.fetchInvoices()
+    } else if (inputValue.trim() === '') {
+      invoiceActions.fetchInvoices()
+    }
+  }
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.label}>
+        {global.t?.t("invoice", "label", "dueDate")}
+      </Text>
+
+      <TextInput
+        style={[styles.input, error && styles.inputError]}
+        placeholder={resolveInvoiceSingleDatePlaceholder()}
+        value={inputValue}
+        onChangeText={handleTextChange}
+        onBlur={handleBlur}
+        placeholderTextColor="#999"
+        keyboardType="number-pad"
+      />
+
+      {error && <Text style={styles.errorText}>{error}</Text>}
+    </View>
+  )
+}
+
+export default InvoiceDueDateFilterInput

package/src/react/components/inputs/InvoiceDueDateFilterInput.styles.js

@@ -0,0 +1,34 @@
+import { StyleSheet } from 'react-native'
+
+const styles = StyleSheet.create({
+  container: {
+    marginVertical: 10,
+    marginHorizontal: 8,
+    flex: 1,
+  },
+  label: {
+    fontSize: 14,
+    fontWeight: '600',
+    marginBottom: 5,
+    color: '#333',
+  },
+  input: {
+    borderWidth: 1,
+    borderColor: '#ccc',
+    borderRadius: 6,
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    fontSize: 14,
+    backgroundColor: '#fff',
+  },
+  inputError: {
+    borderColor: '#c10015',
+  },
+  errorText: {
+    color: '#c10015',
+    fontSize: 12,
+    marginTop: 5,
+  },
+})
+
+export default styles

package/src/react/components/inputs/InvoiceDueDateRangeFilterInput.js

@@ -0,0 +1,115 @@
+import React, { useEffect, useState } from 'react'
+import { View, Text, TextInput } from 'react-native'
+import { useStore } from '@store'
+import { normalizeDateInputToYmd } from '@controleonline/ui-common/src/react/utils/dateRangeFilter'
+import {
+  resolveInvoiceInvalidDateFormatMessage,
+  resolveInvoiceRangeEndPlaceholder,
+  resolveInvoiceRangeLabel,
+  resolveInvoiceRangeStartPlaceholder,
+} from '@controleonline/ui-common/src/react/utils/invoiceDueDateMessages'
+import styles from './InvoiceDueDateRangeFilterInput.styles'
+
+const InvoiceDueDateRangeFilterInput = ({ onSearch }) => {
+  const invoiceStore = useStore('invoice')
+  const { actions: invoiceActions, getters: invoiceGetters } = invoiceStore
+  const [startValue, setStartValue] = useState('')
+  const [endValue, setEndValue] = useState('')
+  const [startError, setStartError] = useState('')
+  const [endError, setEndError] = useState('')
+
+  useEffect(() => {
+    const savedRange = invoiceGetters?.filters?.dueDate || {}
+    setStartValue(savedRange?.start || '')
+    setEndValue(savedRange?.end || '')
+  }, [invoiceGetters?.filters?.dueDate?.start, invoiceGetters?.filters?.dueDate?.end])
+
+  const normalizeDate = (value) => {
+    if (!value || value.trim() === '') return null
+    return normalizeDateInputToYmd(value)
+  }
+
+  const validateDate = (value, setError) => {
+    if (value.trim() === '') {
+      setError('')
+      return true
+    }
+    if (normalizeDate(value)) {
+      setError('')
+      return true
+    } else {
+      setError(resolveInvoiceInvalidDateFormatMessage())
+      return false
+    }
+  }
+
+  const syncRangeToStore = (startRaw, endRaw) => {
+    const start = normalizeDate(startRaw)
+    const end = normalizeDate(endRaw)
+
+    if (!start && !end) {
+      invoiceActions.setFilterDueDate(null)
+      return
+    }
+
+    invoiceActions.setFilterDueDate({ start, end })
+  }
+
+  const handleStartChange = (value) => {
+    setStartValue(value)
+    validateDate(value, setStartError)
+    syncRangeToStore(value, endValue)
+    if (value.trim() === '' || normalizeDate(value)) {
+      if (typeof onSearch === 'function') onSearch()
+    }
+  }
+
+  const handleEndChange = (value) => {
+    setEndValue(value)
+    validateDate(value, setEndError)
+    syncRangeToStore(startValue, value)
+    if (value.trim() === '' || normalizeDate(value)) {
+      if (typeof onSearch === 'function') onSearch()
+    }
+  }
+
+  const handleBlur = () => {
+    if (!startError && !endError) {
+      if (typeof onSearch === 'function') onSearch()
+    }
+  }
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.label}>
+        {resolveInvoiceRangeLabel()}
+      </Text>
+
+      <View style={styles.row}>
+        <TextInput
+          style={[styles.input, startError && styles.inputError]}
+          placeholder={resolveInvoiceRangeStartPlaceholder()}
+          value={startValue}
+          onChangeText={handleStartChange}
+          onBlur={handleBlur}
+          onSubmitEditing={handleBlur}
+          placeholderTextColor="#999"
+        />
+        <TextInput
+          style={[styles.input, endError && styles.inputError]}
+          placeholder={resolveInvoiceRangeEndPlaceholder()}
+          value={endValue}
+          onChangeText={handleEndChange}
+          onBlur={handleBlur}
+          onSubmitEditing={handleBlur}
+          placeholderTextColor="#999"
+        />
+      </View>
+
+      {startError && <Text style={styles.errorText}>{startError}</Text>}
+      {endError && <Text style={styles.errorText}>{endError}</Text>}
+    </View>
+  )
+}
+
+export default InvoiceDueDateRangeFilterInput

package/src/react/components/inputs/InvoiceDueDateRangeFilterInput.styles.js

@@ -0,0 +1,39 @@
+import { StyleSheet } from 'react-native'
+
+const styles = StyleSheet.create({
+  container: {
+    marginVertical: 10,
+    marginHorizontal: 8,
+    flex: 1,
+  },
+  label: {
+    fontSize: 14,
+    fontWeight: '600',
+    marginBottom: 5,
+    color: '#333',
+  },
+  input: {
+    flex: 1,
+    borderWidth: 1,
+    borderColor: '#ccc',
+    borderRadius: 6,
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    fontSize: 14,
+    backgroundColor: '#fff',
+  },
+  row: {
+    flexDirection: 'row',
+    gap: 8,
+  },
+  inputError: {
+    borderColor: '#c10015',
+  },
+  errorText: {
+    color: '#c10015',
+    fontSize: 12,
+    marginTop: 5,
+  },
+})
+
+export default styles

package/src/react/components/lists/CategoriesList.js

@@ -0,0 +1,56 @@
+import React, { useEffect } from 'react'
+import { View, Text } from 'react-native'
+import { Picker } from '@react-native-picker/picker'
+import { useStore } from '@store';
+import styles from './SelectList.styles';
+
+const CategorySelect = ({ context = null }) => {
+  const peopleStore = useStore('people');
+  const { getters: peopleGetters } = peopleStore;
+  const { currentCompany } = peopleGetters;
+
+  const { getters: categoryGetters, actions: categoryActions } = useStore('categories')
+
+  useEffect(() => {
+    categoryActions.getItems({ context:context, people:currentCompany?.id  })
+  }, [context, currentCompany])
+
+  const categories = categoryGetters.items || [];
+
+  const selectedValue = categoryGetters.item ? categoryGetters.item.id : ''
+
+  const handleChange = (value) => {
+
+    const selected = categories.find(s => s.id == value)
+    if (selected) {
+      categoryActions.setItem(selected)
+    }
+    else {
+      categoryActions.setItem({});
+    }
+  }
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.label}>{global.t?.t("invoice", "label", "category")}</Text>
+      <View style={styles.pickerWrapper}>
+        <Picker
+          selectedValue={selectedValue}
+          onValueChange={handleChange}
+        >
+          <Picker.Item label={global.t?.t("invoice", "label", "select")} value={''} />
+          {categories.map(category => (
+            <Picker.Item
+              key={category.id}
+              label={category.name}
+              value={category.id}
+              color={category.color}
+            />
+          ))}
+        </Picker>
+      </View>
+    </View>
+  )
+}
+
+export default CategorySelect

package/src/react/components/lists/PaymentTypeList.js

@@ -0,0 +1,55 @@
+import React, { useEffect } from 'react'
+import { View, Text } from 'react-native'
+import { Picker } from '@react-native-picker/picker'
+import { useStore } from '@store';
+import styles from './SelectList.styles';
+
+const PaymentTypeList = ({ context = null }) => {
+  const peopleStore = useStore('people');
+  const { getters: peopleGetters } = peopleStore;
+  const { currentCompany } = peopleGetters;
+
+  const { getters: paymentTypeGetters, actions: paymentTypeActions } = useStore('paymentType')
+
+  useEffect(() => {
+    paymentTypeActions.getItems({ context: context, people: currentCompany?.id })
+  }, [context, currentCompany])
+
+  const paymentMethods = paymentTypeGetters.items || [];
+
+  const selectedValue = paymentTypeGetters.item ? paymentTypeGetters.item.id : ''
+
+  const handleChange = (value) => {
+    const selected = paymentMethods.find(s => s.id == value)
+    if (selected) {
+      paymentTypeActions.setItem(selected)
+    }
+    else {
+      paymentTypeActions.setItem({});
+    }
+  }
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.label}>{global.t?.t("invoice", "label", "payment method")}</Text>
+
+      <View style={styles.pickerWrapper}>
+        <Picker
+          selectedValue={selectedValue}
+          onValueChange={handleChange}
+        >
+          <Picker.Item label={global.t?.t("invoice", "label", "select")} value={''} />
+          {paymentMethods.map(method => (
+            <Picker.Item
+              key={method.id}
+              label={method.paymentType} // TO DO // traduzir
+              value={method.id}
+            />
+          ))}
+        </Picker>
+      </View>
+    </View>
+  )
+}
+
+export default PaymentTypeList

package/src/react/components/lists/ReceiverList.js

@@ -0,0 +1,56 @@
+import React, { useEffect } from 'react'
+import { View, Text } from 'react-native'
+import { Picker } from '@react-native-picker/picker'
+import { useStore } from '@store';
+import styles from './SelectList.styles';
+
+const ReceiverList = ({ context = null }) => {
+  const peopleStore = useStore('people');
+  const { getters: peopleGetters } = peopleStore;
+  const { currentCompany } = peopleGetters;
+
+  const { getters: receiverGetters, actions: receiverActions } = useStore('people')
+
+  useEffect(() => {
+    receiverActions.getItems({ context:context, people:currentCompany?.id  })
+  }, [context, currentCompany])
+
+  const receivers = receiverGetters.items || [];
+
+  const selectedValue = receiverGetters.item ? receiverGetters.item.id : ''
+
+  const handleChange = (value) => {
+
+    const selected = receivers.find(s => s.id == value)
+    if (selected) {
+      receiverActions.setItem(selected)
+    }
+    else {
+      receiverActions.setItem({});
+    }
+  }
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.label}>{global.t?.t("invoice", "label", "receiver")}</Text>
+      <View style={styles.pickerWrapper}>
+        <Picker
+          selectedValue={selectedValue}
+          onValueChange={handleChange}
+        >
+          <Picker.Item label={global.t?.t("invoice", "label", "select")} value={''} />
+          {receivers.map(receiver => (
+            <Picker.Item
+              key={receiver.id}
+              label={receiver.name}
+              value={receiver.id}
+              color={receiver.color}
+            />
+          ))}
+        </Picker>
+      </View>
+    </View>
+  )
+}
+
+export default ReceiverList

package/src/react/components/lists/SelectList.styles.js

@@ -0,0 +1,18 @@
+import { StyleSheet } from 'react-native'
+
+const styles = StyleSheet.create({
+  container: {
+    marginVertical: 10,
+  },
+  label: {
+    fontSize: 16,
+    marginBottom: 5,
+  },
+  pickerWrapper: {
+    borderWidth: 1,
+    borderColor: '#ccc',
+    borderRadius: 6,
+  },
+})
+
+export default styles

package/src/react/components/lists/StatusList.js

@@ -0,0 +1,55 @@
+import React, { useEffect } from 'react'
+import { View, Text } from 'react-native'
+import { Picker } from '@react-native-picker/picker'
+import { useStore } from '@store';
+import styles from './SelectList.styles';
+
+const StatusSelect = ({ context = 'null' }) => {
+  const { getters: statusGetters, actions: statusActions } = useStore('status')
+
+  useEffect(() => {
+    statusActions.getItems({ context })
+  }, [context])
+
+  const statuses = (statusGetters.items || []).filter(
+    item => item.context === context
+  )
+
+  const selectedValue = statusGetters.item ? statusGetters.item.id : ''
+
+  const handleChange = (value) => {
+
+    const selected = statuses.find(s => s.id == value)
+    if (selected) {
+      statusActions.setItem(selected)
+    }
+    else {
+      statusActions.setItem({});
+    }
+  }
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.label}>{global.t?.t("invoice", "label", "status")}</Text>
+      
+      <View style={styles.pickerWrapper}>
+        <Picker
+          selectedValue={selectedValue}
+          onValueChange={handleChange}
+        >
+          <Picker.Item label={global.t?.t("invoice", "label", "select")} value={''} />
+          {statuses.map(status => (
+            <Picker.Item
+              key={status.id}
+              label={global.t?.t("invoice", "label", status.status)}
+              value={status.id}
+              color={status.color}
+            />
+          ))}
+        </Picker>
+      </View>
+    </View>
+  )
+}
+
+export default StatusSelect

package/src/react/components/lists/WalletList.js

@@ -0,0 +1,54 @@
+import React, { useEffect } from 'react'
+import { View, Text } from 'react-native'
+import { Picker } from '@react-native-picker/picker'
+import { useStore } from '@store';
+import styles from './SelectList.styles';
+
+const WalletSelect = ({ people_id }) => {
+  const { getters: walletGetters, actions: walletActions } = useStore('wallet')
+
+  useEffect(() => {
+    if (people_id)
+      walletActions.getItems({ people: people_id })
+  }, [people_id])
+
+    const wallets = walletGetters.items || [];
+
+  const selectedValue = walletGetters.item ? walletGetters.item.id : ''
+
+  const handleChange = (value) => {
+
+    const selected = wallets.find(s => s.id == value)
+    if (selected) {
+      walletActions.setItem(selected)
+    }
+    else {
+      walletActions.setItem({});
+    }
+  }
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.label}>{global.t?.t("invoice", "label", "wallet")}</Text>
+      
+      <View style={styles.pickerWrapper}>
+        <Picker
+          selectedValue={selectedValue}
+          onValueChange={handleChange}
+        >
+          <Picker.Item label={global.t?.t("invoice", "label", "select")} value={''} />
+          {wallets.map(wallet => (
+            <Picker.Item
+              key={wallet.id}
+              label={wallet.wallet}
+              value={wallet.id}
+              color={wallet.color}
+            />
+          ))}
+        </Picker>
+      </View>
+    </View>
+  )
+}
+
+export default WalletSelect