Agrega input de fecha y nro

src/components/Input.tsx

@@ -26,7 +26,7 @@ export const Input:FC <Props>  = ({name,label, control}) => {
         value={field.value}
         onChangeText={field.onChange}
         placeholder={label}
-        className='p-2 m-2 w-max border rounded-xl focus:outline-offset-4 focus:outline-sky-500 focus:border-solid border-sky-500' 
+        className='p-2 m-2 w-max border rounded-xl border-sky-500' 
       />
    </View>
     

src/components/InputDate.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { FC } from 'react'
+import { useController } from 'react-hook-form';
+import { Datepicker, Icon, IconElement, Layout } from '@ui-kitten/components';
+
+
+interface Props {
+  name: string,
+  label: string,
+  control: any
+}
+
+const CalendarIcon = (props:any): IconElement => (
+  <Icon
+    {...props}
+    name='calendar'
+  />
+);
+
+export const InputDate: FC<Props> = ({ name, label, control }) => {
+
+  const { field } = useController({
+    control,
+    defaultValue: 0.0,
+    name,
+  })
+
+  return (
+    <>
+      <Layout className='flex flex-col' level='1'>
+      <Datepicker
+        label={''}
+        caption='Caption'
+        placeholder='Pick Date'
+        date={new Date(field.value)}
+        onSelect={field.onChange}
+        accessoryRight={CalendarIcon}
+        className='p-2 m-2 w-max border rounded-xl border-sky-500'
+      />        
+      </Layout>
+    </>
+  )
+}

src/components/InputNumber.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { FC } from 'react'
+import { useController } from 'react-hook-form';
+import { Text, TextInput, View } from 'react-native';
+
+interface Props {
+  name: string,
+  label: string,
+  control: any
+}
+
+export const InputNumber: FC<Props> = ({ name, label, control }) => {
+
+  const { field } = useController({
+    control,
+    defaultValue: 0.0,
+    name,
+  })
+
+  return (
+    <>
+      <View className='flex flex-col'>
+        <TextInput
+          id={name}
+          value={String(field.value)}
+          onChangeText={field.onChange}
+          placeholder={label}
+          keyboardType="numeric"
+          className='p-2 m-2 w-max border rounded-xl border-sky-500'
+        />
+      </View>
+    </>
+  )
+}

src/components/ManyToOne.tsx

@@ -1,13 +1,7 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, FC } from 'react';
-import { FC } from 'react'
+import { View } from 'react-native';
-import { IndexPath, Select, SelectItem, Text } from '@ui-kitten/components';
+import { IndexPath, Select, SelectItem } from '@ui-kitten/components';
-import { StyleSheet, TextInput, View } from 'react-native';
+import { Controller} from 'react-hook-form';
-
-
-import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome'
-import { faMagnifyingGlass } from '@fortawesome/free-solid-svg-icons/faMagnifyingGlass'
-
-import { FieldValues, Controller, Control } from 'react-hook-form';
 import { useFetchWithAuth } from '../hooks/useFetchWithAuth';
 
 interface Props {
@@ -22,15 +16,13 @@ interface Props {
 export const ManyToOne: FC<Props> = ({ entity, control,columname,columnvalue }) => {
 
   const [values, setValues] = useState([{id:0, columnvalue: 'Seleccione'}]);
-  const [selectedIndex, setSelectedIndex] = React.useState<IndexPath | IndexPath[]>(new IndexPath(0));
+  const [selectedIndex] = React.useState<IndexPath | IndexPath[]>(new IndexPath(0));
-  const displayValue = values[(selectedIndex as IndexPath).row];
   useEffect(() => {
     async function fetchData() {
       try {
         const { data, error } = await useFetchWithAuth(entity.toLowerCase());
         const result = data as {id: number, columnvalue: string}[]
         setValues (result);
-        console.log(entity.toLowerCase())
       } catch (error) {
         console.error(error);
       }
@@ -41,24 +33,21 @@ export const ManyToOne: FC<Props> = ({ entity, control,columname,columnvalue })
 
   return (
     <>
-      <View className='flex flex-col'>
+      <View className='flex flex-col py-2'>
         <Controller
           name={columname}
           control={control}
           render={({ field: {onChange,value} }) =>
             <Select
+            status='info'
             selectedIndex={selectedIndex}
-            accessibilityLabel="time unit"
             value={value ? value.nombre : "Seleccione"}
             onSelect={(index) => {
               onChange(values[(index as IndexPath).row])
-              //setSelectedIndex(index)
-             console.log(values[(index as IndexPath).row])
-              //onChange((index as IndexPath).row)
-              
             }}>
             {values.map((item) => (
               <SelectItem
+                
                 key={`select-option-${item.id}`}
                 title={(item as { [columnvalue: string]: any }) [columnvalue]}
               />

src/components/cardList/CardList.tsx

@@ -7,10 +7,11 @@ import { NativeStackNavigationProp } from '@react-navigation/native-stack';
 
 interface Props {
     entities: [],
-    screenName: string
+    screenName: string,
+    columnDisplay: string
 }
 
-export const CardList:FC <Props> = ({entities, screenName}) => {
+export const CardList:FC <Props> = ({entities, screenName, columnDisplay}) => {
 
     const navitation = useNavigation<NativeStackNavigationProp<any>>();
 
@@ -29,7 +30,7 @@ export const CardList:FC <Props> = ({entities, screenName}) => {
                     .navigate(screenName , {id:item['id']} )}
             >
                 <Text>
-                    {item["nombre"]}
+                    {item[columnDisplay]}
                 </Text>
             </TouchableOpacity>
         </CardItem>

src/navigator/TabScreen.tsx

@@ -1,17 +1,13 @@
 import { FC } from 'react'
-import { Dimensions, Text, View } from 'react-native'
+import { Dimensions, View } from 'react-native'
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
-import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
-
-import { CompanyScreen } from '../screens/company/CompanyScreen';
-import { MenuItem } from '../components/navbar/MenuItem';
 import { TabItem } from '../components/navbar/TabItem';
-import { SalesOrderScreen } from '../screens/salesorder/SalesOrderScreen';
+import { SalesOrderStack } from '../screens/salesorder/SalesOrderStack';
-import { ProductScreen } from '../screens/product/ProductScreen';
 import { ExitScreen } from '../screens/exit/ExitScreen';
-import { CustomerListScreen } from '../screens/customer/CustomerListScreen';
 import { CustomerStack } from '../screens/customer/CustomerStack';
-import CompanyStack from '../screens/company/CompanyStack';
+import { CompanyStack } from '../screens/company/CompanyStack';
+import { ProductStack } from '../screens/product/ProductStack';
+
 
 
 interface Props {
@@ -25,7 +21,7 @@ export const TabScreen:FC <Props> = () => {
     className="h-screen"
   >
     <Tab.Navigator 
-          initialRouteName="SalesOrderScreen"
+          initialRouteName="SalesOrderStack"
           screenOptions={{
             headerShown: false,
             tabBarActiveTintColor: '#1e40af',
@@ -59,8 +55,8 @@ export const TabScreen:FC <Props> = () => {
             }}
           />
           <Tab.Screen
-            name="SalesOrderScreen"
+            name="SalesOrderStack"
-            component={SalesOrderScreen}
+            component={SalesOrderStack}
             options={{
               tabBarLabel: 'Pedidos',
               tabBarIcon: ({ focused }) => (
@@ -70,7 +66,7 @@ export const TabScreen:FC <Props> = () => {
           />
           <Tab.Screen
             name="ProductScreen"
-            component={ProductScreen}
+            component={ProductStack}
             options={{
               tabBarLabel: 'Productos',
               tabBarIcon: ({ focused }) => (

src/screens/company/CompanyFormScreen.tsx

@@ -1,8 +1,89 @@
-const CompanyFormScreen = () => {
+import { useEffect } from 'react'
-        return(
+import { Text } from 'react-native'
+import { Background } from '../../components/Background'
+import { Button } from '../../components/Button';
+import { Card } from '../../components/Card';
+import { Input } from '../../components/Input';
+import { useForm } from 'react-hook-form';
+import { NativeStackScreenProps } from '@react-navigation/native-stack';
+import { RootStackParams } from './CompanyStack';
+import { useFetchWithAuth } from '../../hooks/useFetchWithAuth';
+import { saveWithAuth } from '../../hooks/saveWithAuth';
+import { ManyToOne } from '../../components/ManyToOne';
+
+
+
+interface Props extends NativeStackScreenProps<RootStackParams, 'CompanyFormScreen'> { };
+
+export const CompanyFormScreen = ({ route, navigation }: Props) => {
+
+    const { control, handleSubmit, setValue, formState: { errors } } = useForm({
+    defaultValues: {
+        id: 0,
+        nombre: '',
+        ruc: '',
+        direccion: ''
+    }
+    });
+    let id: string = "0";
+    if (route.params?.id != undefined) {
+    id = String(route.params.id);
+    }
+
+    const getInitData = async () => {
+    if (!id || id == "0")
+        return;
+    const { data, error } = await useFetchWithAuth("compania/" + id);
+
+    if (!error) {
+
+        if (data.id != 0) {
+        setValue("id", data['id'])
+        setValue("nombre", data['nombre'])
+        setValue("ruc", data['ruc'])
+        setValue("direccion", data['direccion'])
+        }
+
+    } else {
+        console.log(error)
+    }
+    }
+
+
+    useEffect(() => {
+    getInitData();
+    }, [])
+
+    const onSubmit = async (entity: any) => {
+    try {
+        let endpoint = "compania";
+        //entity['compania'] = { id: entity['compania'].id }
+        const { data, error } = await saveWithAuth(endpoint, id, entity);
+        if (error) {
+        console.log(error);
+        } else {
+        navigation.navigate("CompanyListScreen")
+        }
+    } catch (e) {
+        console.log("Post error:");
+        console.table(e);
+    }
+    }
+
+    return (
     <>
+        <Background >
+        <Card>
+            <Text className='text-xl text-center my-4'>Registro de clientes</Text>
+            <Input name="ruc" label='RUC' control={control} />
+            <Input name="nombre" label='Nombre' control={control} />
+            <Input name="direccion" label='Dirección' control={control} />
+            <Button
+            title='Guardar'
+            onPress={handleSubmit(onSubmit)}
+            />
+        </Card>
+        </Background>
     </>
     )
 }
-
-export default CompanyFormScreen;

src/screens/company/CompanyListScreen.tsx

@@ -1,12 +1,63 @@
-import { Text } from "react-native";
+import { useEffect, useState } from 'react'
+import { FlatList, RefreshControl, Text, View } from 'react-native'
+import { useNavigation } from '@react-navigation/native';
+import { Card } from '../../components/Card'
+import { CardList } from '../../components/cardList/CardList'
+import { Button } from '../../components/Button'
+import { useFetchWithAuth } from '../../hooks/useFetchWithAuth'
 
-const CompanyListScreen = () => {
+export const CompanyListScreen = () => {
+    const navigation = useNavigation();
+    const [refreshing, setRefreshing] = useState(false);
+    const endpoints = "compania";
+    let defaultData: [] = [];
+
+    const [entities, setEntities] = useState(defaultData);
+
+    const getInitData = async () => {
+    const { data, error } = await useFetchWithAuth(endpoints);
+    if (!error) {
+        setEntities(data);
+    } else {
+        console.log(error)
+    }
+    }
+
+    useEffect(() => {
+    getInitData();
+    }, [refreshing])
+
+    const onRefresh = () => {
+    setRefreshing(true);
+    setTimeout(() => {
+        setRefreshing(false);
+    }, 1000);
+    };
 
     return (
-        <>
+    <View className='bg-sky-100'>
-        <Text>Compañia lista</Text>
+        <Button
-        </>
+        title=' + '
+        additionalStyle='z-10 absolute bottom-2 right-0'
+        onPress={() => navigation.navigate("CompanyFormScreen" as never)} />
+        <FlatList
+        refreshControl={
+            <RefreshControl
+            refreshing={refreshing}
+            onRefresh={onRefresh}
+            />
+        }
+        data={[""]}
+        renderItem={({ item }) =>
+            <View id={item} className='flex-1 items-center'>
+            <Card>
+                <Text className='text-xl text-center my-4'>Listado de compania</Text>
+                <CardList screenName="CompanyFormScreen" columnDisplay="nombre" entities={entities} />
+            </Card>
+            </View>
+        }
+        keyExtractor={item => item}
+        />
+    </View>
     )
 }
-
-export default CompanyListScreen;

src/screens/company/CompanyScreen.tsx

@@ -1,13 +0,0 @@
-import { FC } from 'react'
-import { Text } from 'react-native'
-
-interface Props {
-}
-
-export const CompanyScreen:FC <Props> = () => {
- return (
-   <>
-   <Text>Compañia</Text>
-   </>
- )
-}

src/screens/company/CompanyStack.tsx

@@ -1,24 +1,30 @@
-import { createNativeStackNavigator } from "@react-navigation/native-stack";
+import { useContext } from 'react'
-import CompanyListScreen from "./CompanyListScreen";
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
-import CompanyFormScreen from "./CompanyFormScreen";
+import { AuthContext } from '../login/AuthContext';
+import { CompanyFormScreen } from './CompanyFormScreen';
+import { CompanyListScreen } from './CompanyListScreen';
 
-const Stack = createNativeStackNavigator();
+export type RootStackParams = {
+    CompanyListScreen: undefined,
+    CompanyFormScreen: { id: number }
+}
+const Stack = createNativeStackNavigator<RootStackParams>();
 
-const CompanyStack = () => {
+export const CompanyStack = () => {
+    const { isAuthenticated } = useContext(AuthContext)
 
-    return(
+    return (
         <Stack.Navigator
-            screenOptions={
+            screenOptions={{
-                {
+                headerShown: true,
-                    headerShown:true
+            }}
-                }
-            }
         >
+            {isAuthenticated && (
+                <>
                     <Stack.Screen name="CompanyListScreen" component={CompanyListScreen} />
-            <Stack.Screen name="CompanyFormScreen" component={CompanyFormScreen}/>
+                    <Stack.Screen name="CompanyFormScreen" component={CompanyFormScreen} />
+                </>
+            )}
         </Stack.Navigator>
     )
-        
 }
-
-export default CompanyStack;

src/screens/customer/CustomerFormScreen.tsx

@@ -1,8 +1,6 @@
-import { FC, useEffect } from 'react'
+import { useEffect } from 'react'
 import { Text } from 'react-native'
-import { NavBar } from '../../components/navbar/NavBar'
 import { Background } from '../../components/Background'
-import { useNavigation } from '@react-navigation/native';
 import { Button } from '../../components/Button';
 import { Card } from '../../components/Card';
 import { Input } from '../../components/Input';
@@ -14,43 +12,41 @@ import { saveWithAuth } from '../../hooks/saveWithAuth';
 import { ManyToOne } from '../../components/ManyToOne';
 
 
-interface Props extends NativeStackScreenProps<RootStackParams, 'CustomerFormScreen'>{};
+interface Props extends NativeStackScreenProps<RootStackParams, 'CustomerFormScreen'> { };
 
-export const CustomerFormScreen = ({route , navigation }: Props) => {
+export const CustomerFormScreen = ({ route, navigation }: Props) => {
 
-
+  const { control, handleSubmit, setValue, formState: { errors } } = useForm({
-
-  const { control, handleSubmit, getValues, setValue, formState: { errors } } = useForm({
     defaultValues: {
       id: 0,
       nombre: '',
       telefono: '',
-      compania: {id:0}
+      compania: { id: 0 }
     }
   });
-  let id:string = "0";
+  let id: string = "0";
-  if (route.params?.id!= undefined) {
+  if (route.params?.id != undefined) {
     id = String(route.params.id);
   }
 
   const getInitData = async () => {
-    if (!id || id=="0")
+    if (!id || id == "0")
       return;
     const { data, error } = await useFetchWithAuth("cliente/" + id);
 
     if (!error) {
 
-        if (data.id!=0){
+      if (data.id != 0) {
         setValue("id", data['id'])
         setValue("nombre", data['nombre'])
         setValue("telefono", data['telefono'])
-            setValue("compania",data['compania'])
+        setValue("compania", data['compania'])
       }
 
     } else {
       console.log(error)
     }
-}
+  }
 
 
   useEffect(() => {
@@ -60,9 +56,7 @@ export const CustomerFormScreen = ({route , navigation }: Props) => {
   const onSubmit = async (entity: any) => {
     try {
       let endpoint = "cliente";
-          console.log(entity)
+      entity['compania'] = { id: entity['compania'].id }
-          entity['compania'] = {id: entity['compania'].id}
-          console.log(entity)
       const { data, error } = await saveWithAuth(endpoint, id, entity);
       if (error) {
         console.log(error);
@@ -75,7 +69,6 @@ export const CustomerFormScreen = ({route , navigation }: Props) => {
     }
   }
 
-  console.debug(id)
   return (
     <>
       <Background >
@@ -83,15 +76,13 @@ export const CustomerFormScreen = ({route , navigation }: Props) => {
           <Text className='text-xl text-center my-4'>Registro de clientes</Text>
           <Input name="nombre" label='Nombre' control={control} />
           <Input name="telefono" label='Telefono' control={control} />
-        <ManyToOne entity='compania' columname='compania' columnvalue="nombre" control={control}/>
+          <ManyToOne entity='compania' columname='compania' columnvalue="nombre" control={control} />
           <Button
             title='Guardar'
             onPress={handleSubmit(onSubmit)}
           />
         </Card>
-
       </Background>
-   
     </>
   )
 }

src/screens/customer/CustomerListScreen.tsx

@@ -1,27 +1,21 @@
-import { FC, useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 import { FlatList, RefreshControl, Text, View } from 'react-native'
-import { Card } from '../../components/Card'
-import { Button } from '../../components/Button'
 import { useNavigation } from '@react-navigation/native';
+import { Card } from '../../components/Card'
 import { CardList } from '../../components/cardList/CardList'
+import { Button } from '../../components/Button'
 import { useFetchWithAuth } from '../../hooks/useFetchWithAuth'
 
-interface Props {
+export const CustomerListScreen = () => {
-}
-
-export const CustomerListScreen:FC <Props> = () => {
   const navigation = useNavigation();
   const [refreshing, setRefreshing] = useState(false);
   const endpoints = "cliente";
-  let defaultData:[] = [];
+  let defaultData: [] = [];
 
   const [entities, setEntities] = useState(defaultData);
 
-    console.log("Inicio  list customer")
   const getInitData = async () => {
-        
     const { data, error } = await useFetchWithAuth(endpoints);
-
     if (!error) {
       setEntities(data);
     } else {
@@ -30,12 +24,9 @@ export const CustomerListScreen:FC <Props> = () => {
   }
 
   useEffect(() => {
-        console.log("Disparo useEffect  list customer")
     getInitData();
   }, [refreshing])
 
-    
-
   const onRefresh = () => {
     setRefreshing(true);
     setTimeout(() => {
@@ -48,7 +39,7 @@ export const CustomerListScreen:FC <Props> = () => {
       <Button
         title=' + '
         additionalStyle='z-10 absolute bottom-2 right-0'
-        onPress={()=>navigation.navigate("CustomerFormScreen" as never)} />
+        onPress={() => navigation.navigate("CustomerFormScreen" as never)} />
       <FlatList
         refreshControl={
           <RefreshControl
@@ -57,22 +48,16 @@ export const CustomerListScreen:FC <Props> = () => {
           />
         }
         data={[""]}
-          renderItem={({item}) => 
+        renderItem={({ item }) =>
           <View id={item} className='flex-1 items-center'>
             <Card>
               <Text className='text-xl text-center my-4'>Listado de clientes</Text>
-              <CardList screenName="CustomerFormScreen" entities={entities} />        
+              <CardList screenName="CustomerFormScreen" columnDisplay="nombre" entities={entities} />
             </Card>
-            
           </View>
-
         }
         keyExtractor={item => item}
-      
       />
-      
     </View>
-
- 
   )
 }

src/screens/customer/CustomerStack.tsx

@@ -6,27 +6,25 @@ import { CustomerListScreen } from './CustomerListScreen';
 
 export type RootStackParams = {
     CustomerListScreen: undefined,
-    CustomerFormScreen: {id:number}
+    CustomerFormScreen: { id: number }
 }
 const Stack = createNativeStackNavigator<RootStackParams>();
 
 export const CustomerStack = () => {
-    const {isAuthenticated}  = useContext(AuthContext)
+    const { isAuthenticated } = useContext(AuthContext)
 
     return (
         <Stack.Navigator
             screenOptions={{
                 headerShown: true,
             }}
-        
         >
-        {isAuthenticated&&(
+            {isAuthenticated && (
                 <>
                     <Stack.Screen name="CustomerListScreen" component={CustomerListScreen} />
                     <Stack.Screen name="CustomerFormScreen" component={CustomerFormScreen} />
                 </>
             )}
-            
         </Stack.Navigator>
     )
 }

src/screens/product/ProductFormScreen.tsx

@@ -0,0 +1,91 @@
+import { useEffect } from 'react'
+import { Text } from 'react-native'
+import { Background } from '../../components/Background'
+import { Button } from '../../components/Button';
+import { Card } from '../../components/Card';
+import { Input } from '../../components/Input';
+import { useForm } from 'react-hook-form';
+import { NativeStackScreenProps } from '@react-navigation/native-stack';
+import { RootStackParams } from './ProductStack';
+import { useFetchWithAuth } from '../../hooks/useFetchWithAuth';
+import { saveWithAuth } from '../../hooks/saveWithAuth';
+import { InputNumber } from '../../components/InputNumber';
+import { InputDate } from '../../components/InputDate';
+
+
+interface Props extends NativeStackScreenProps<RootStackParams, 'ProductFormScreen'> { };
+
+export const ProductFormScreen = ({ route, navigation }: Props) => {
+
+    const { control, handleSubmit, setValue, formState: { errors } } = useForm({
+        defaultValues: {
+            id: 0,
+            nombre: '',
+            codigo: '',
+            precio: 0,
+            creado: new Date()
+        }
+    });
+    let id: string = "0";
+    if (route.params?.id != undefined) {
+        id = String(route.params.id);
+    }
+
+    const getInitData = async () => {
+        if (!id || id == "0")
+            return;
+        const { data, error } = await useFetchWithAuth("producto/" + id);
+        if (!error) {
+
+            if (data.id != 0) {
+                setValue("id", data['id'])
+                setValue("nombre", data['nombre'])
+                setValue("codigo", data['codigo'])
+                setValue("precio", data['precio'])
+                setValue("creado", data['creado'])
+            }
+
+        } else {
+            console.log(error)
+        }
+    }
+
+
+    useEffect(() => {
+        getInitData();
+    }, [])
+
+    const onSubmit = async (entity: any) => {
+        try {
+            let endpoint = "producto";
+            //entity['creado'] = entity['creado']
+            const { data, error } = await saveWithAuth(endpoint, id, entity);
+            if (error) {
+                console.log(error);
+            } else {
+                navigation.navigate("ProductListScreen")
+            }
+        } catch (e) {
+            console.log("Post error:");
+            console.log(e);
+        }
+    }
+
+    return (
+        <>
+            <Background >
+                <Card>
+                    <Text className='text-xl text-center my-4'>Registro de Productos</Text>
+                    <Input name="codigo" label='Código' control={control} />
+                    <Input name="nombre" label='Nombre' control={control} />
+                    <InputNumber name="precio" label='Precio' control={control} />
+                    <InputDate name="creado" label='creado' control={control} />
+                    <Button
+                        title='Guardar'
+                        onPress={handleSubmit(onSubmit)}
+                    />
+                </Card>
+            </Background>
+        </>
+    )
+}

src/screens/product/ProductListScreen.tsx

@@ -0,0 +1,63 @@
+import { useEffect, useState } from 'react'
+import { FlatList, RefreshControl, Text, View } from 'react-native'
+import { useNavigation } from '@react-navigation/native';
+import { Card } from '../../components/Card'
+import { CardList } from '../../components/cardList/CardList'
+import { Button } from '../../components/Button'
+import { useFetchWithAuth } from '../../hooks/useFetchWithAuth'
+
+export const ProductListScreen = () => {
+    const navigation = useNavigation();
+    const [refreshing, setRefreshing] = useState(false);
+    const endpoints = "producto";
+    let defaultData: [] = [];
+
+    const [entities, setEntities] = useState(defaultData);
+
+    const getInitData = async () => {
+    const { data, error } = await useFetchWithAuth(endpoints);
+    if (!error) {
+        setEntities(data);
+    } else {
+        console.log(error)
+    }
+    }
+
+    useEffect(() => {
+    getInitData();
+    }, [refreshing])
+
+    const onRefresh = () => {
+    setRefreshing(true);
+    setTimeout(() => {
+        setRefreshing(false);
+    }, 1000);
+    };
+
+    return (
+    <View className='bg-sky-100'>
+        <Button
+        title=' + '
+        additionalStyle='z-10 absolute bottom-2 right-0'
+        onPress={() => navigation.navigate("ProductFormScreen" as never)} />
+        <FlatList
+        refreshControl={
+            <RefreshControl
+            refreshing={refreshing}
+            onRefresh={onRefresh}
+            />
+        }
+        data={[""]}
+        renderItem={({ item }) =>
+            <View id={item} className='flex-1 items-center'>
+            <Card>
+                <Text className='text-xl text-center my-4'>Listado de Produtos</Text>
+                <CardList screenName="ProductFormScreen" columnDisplay="nombre" entities={entities} />
+            </Card>
+            </View>
+        }
+        keyExtractor={item => item}
+        />
+    </View>
+    )
+}

src/screens/product/ProductScreen.tsx

@@ -1,13 +0,0 @@
-import { FC } from 'react'
-import { Text } from 'react-native'
-
-interface Props {
-}
-
-export const ProductScreen:FC <Props> = () => {
- return (
-   <>
-    <Text>Producto</Text>
-   </>
- )
-}

src/screens/product/ProductStack.tsx

@@ -0,0 +1,30 @@
+import { useContext } from 'react'
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { AuthContext } from '../login/AuthContext';
+import { ProductFormScreen } from './ProductFormScreen';
+import { ProductListScreen } from './ProductListScreen';
+
+export type RootStackParams = {
+    ProductListScreen: undefined,
+    ProductFormScreen: { id: number }
+}
+const Stack = createNativeStackNavigator<RootStackParams>();
+
+export const ProductStack = () => {
+    const { isAuthenticated } = useContext(AuthContext)
+
+    return (
+        <Stack.Navigator
+            screenOptions={{
+                headerShown: true,
+            }}
+        >
+            {isAuthenticated && (
+                <>
+                    <Stack.Screen name="ProductListScreen" component={ProductListScreen} />
+                    <Stack.Screen name="ProductFormScreen" component={ProductFormScreen} />
+                </>
+            )}
+        </Stack.Navigator>
+    )
+}

src/screens/salesorder/SalesOrderFormScreen.tsx

@@ -0,0 +1,85 @@
+import { useEffect } from 'react'
+import { Text } from 'react-native'
+import { Background } from '../../components/Background'
+import { Button } from '../../components/Button';
+import { Card } from '../../components/Card';
+import { Input } from '../../components/Input';
+import { useForm } from 'react-hook-form';
+import { NativeStackScreenProps } from '@react-navigation/native-stack';
+import { useFetchWithAuth } from '../../hooks/useFetchWithAuth';
+import { saveWithAuth } from '../../hooks/saveWithAuth';
+import { ManyToOne } from '../../components/ManyToOne';
+import { RootStackParams } from './SalesOrderStack';
+
+
+interface Props extends NativeStackScreenProps<RootStackParams, 'SalesOrderFormScreen'> { };
+
+export const SalesOrderFormScreen = ({ route, navigation }: Props) => {
+
+    const { control, handleSubmit, setValue, formState: { errors } } = useForm({
+    defaultValues: {
+        id: 0,
+        numero: '',
+        cliente: { id: 0 }
+    }
+    });
+    let id: string = "0";
+    if (route.params?.id != undefined) {
+    id = String(route.params.id);
+    }
+
+    const getInitData = async () => {
+    if (!id || id == "0")
+        return;
+    const { data, error } = await useFetchWithAuth("pedido/" + id);
+
+    if (!error) {
+
+        if (data.id != 0) {
+        setValue("id", data['id'])
+        setValue("numero", data['numero'])
+        setValue("cliente", data['cliente'])
+        }
+
+    } else {
+        console.log(error)
+    }
+    }
+
+
+    useEffect(() => {
+    getInitData();
+    }, [])
+
+    const onSubmit = async (entity: any) => {
+    try {
+        let endpoint = "pedido";
+        entity['cliente'] = { id: entity['cliente'].id }
+        const { data, error } = await saveWithAuth(endpoint, id, entity);
+        if (error) {
+        console.log(error);
+        } else {
+        navigation.navigate("SalesOrderListScreen")
+        }
+    } catch (e) {
+        console.log("Post error:");
+        console.table(e);
+    }
+    }
+
+    return (
+    <>
+        <Background >
+        <Card>
+            <Text className='text-xl text-center my-4'>Registro de Pedido</Text>
+            <Input name="numero" label='Número' control={control} />
+            <ManyToOne entity='cliente' columname='cliente' columnvalue="nombre" control={control} />
+            <Button
+            title='Guardar'
+            onPress={handleSubmit(onSubmit)}
+            />
+        </Card>
+        </Background>
+    </>
+    )
+}

src/screens/salesorder/SalesOrderListScreen.tsx

@@ -0,0 +1,63 @@
+import { useEffect, useState } from 'react'
+import { FlatList, RefreshControl, Text, View } from 'react-native'
+import { useNavigation } from '@react-navigation/native';
+import { Card } from '../../components/Card'
+import { CardList } from '../../components/cardList/CardList'
+import { Button } from '../../components/Button'
+import { useFetchWithAuth } from '../../hooks/useFetchWithAuth'
+
+export const SalesOrderListScreen = () => {
+    const navigation = useNavigation();
+    const [refreshing, setRefreshing] = useState(false);
+    const endpoints = "pedido";
+    let defaultData: [] = [];
+
+    const [entities, setEntities] = useState(defaultData);
+
+    const getInitData = async () => {
+    const { data, error } = await useFetchWithAuth(endpoints);
+    if (!error) {
+        setEntities(data);
+    } else {
+        console.log(error)
+    }
+    }
+
+    useEffect(() => {
+    getInitData();
+    }, [refreshing])
+
+    const onRefresh = () => {
+    setRefreshing(true);
+    setTimeout(() => {
+        setRefreshing(false);
+    }, 1000);
+    };
+
+    return (
+    <View className='bg-sky-100'>
+        <Button
+        title=' + '
+        additionalStyle='z-10 absolute bottom-2 right-0'
+        onPress={() => navigation.navigate("SalesOrderFormScreen" as never)} />
+        <FlatList
+        refreshControl={
+            <RefreshControl
+            refreshing={refreshing}
+            onRefresh={onRefresh}
+            />
+        }
+        data={[""]}
+        renderItem={({ item }) =>
+            <View id={item} className='flex-1 items-center'>
+            <Card>
+                <Text className='text-xl text-center my-4'>Listado de pedidos</Text>
+                <CardList screenName="SalesOrderFormScreen" columnDisplay="numero" entities={entities} />
+            </Card>
+            </View>
+        }
+        keyExtractor={item => item}
+        />
+    </View>
+    )
+}

src/screens/salesorder/SalesOrderScreen.tsx

@@ -1,34 +0,0 @@
-import { FC, useContext } from 'react'
-import { Text } from 'react-native'
-import { Button } from '../../components/Button'
-import { StackScreenProps } from '@react-navigation/stack';
-import { View } from 'react-native';
-import { AuthContext } from '../login/AuthContext';
-import { Background } from '../../components/Background';
-import { NavBar } from '../../components/navbar/NavBar';
-
-interface Props extends StackScreenProps<any, any> {
-
-}
-
-export const SalesOrderScreen:FC <Props> = ({navigation}) => {
-  const {isAuthenticated, logOut} = useContext(AuthContext);
-  
-  const exit = () => {
-          logOut();
-          navigation.navigate("CustomerScreen");
-  }
-
- return (
-   <>
-    <Background >
-      <Text>Pedidos</Text>
-      <Button title='Clientes' onClick={()=>navigation.navigate("CustomerScreen")}/>
-      <Button title='LogOut' onClick={()=>exit()} />
-      
-   </Background>
-  
-   </>
-
- )
-}

src/screens/salesorder/SalesOrderStack.tsx

@@ -0,0 +1,30 @@
+import { useContext } from 'react'
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { AuthContext } from '../login/AuthContext';
+import { SalesOrderFormScreen } from './SalesOrderFormScreen';
+import { SalesOrderListScreen } from './SalesOrderListScreen';
+
+export type RootStackParams = {
+    SalesOrderListScreen: undefined,
+    SalesOrderFormScreen: { id: number }
+}
+const Stack = createNativeStackNavigator<RootStackParams>();
+
+export const SalesOrderStack = () => {
+    const { isAuthenticated } = useContext(AuthContext)
+
+    return (
+        <Stack.Navigator
+            screenOptions={{
+                headerShown: true,
+            }}
+        >
+            {isAuthenticated && (
+                <>
+                    <Stack.Screen name="SalesOrderListScreen" component={SalesOrderListScreen} />
+                    <Stack.Screen name="SalesOrderFormScreen" component={SalesOrderFormScreen} />
+                </>
+            )}
+        </Stack.Navigator>
+    )
+}