Merge pull request #3 from Endurance-Soft/client/view-details

Client/view details
Endurance-Soft · Mar 8, 2024 · 1162b39 · 1162b39
2 parents 313c57a + d9366ff
commit 1162b39
Show file tree

Hide file tree

Showing 14 changed files with 683 additions and 18 deletions.
diff --git a/AppNavigator.js b/AppNavigator.js
@@ -4,7 +4,8 @@ import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import { NavigationContainer } from '@react-navigation/native';
 import NewScreen from './src/screens/HomeScreen';
 import ClientSearchScreen from './src/screens/ClientSearchScreen';
-import CascadingEffectScreen from './src/screens/CascadingEffectScreen';
+import ClientPaymentScreen from './src/screens/ClientPaymentScreen';
+import ClientPaymentSelectedScreen from './src/screens/ClientPaymentSelectedScreen';
 
 const Stack = createNativeStackNavigator();
 
@@ -29,13 +30,19 @@ function AppNavigator() {
                 headerShown: false,
             }} 
         />
-        <Stack.Screen 
-            name='CascadingEffectScreen' 
-            component={CascadingEffectScreen} 
-            options={{
-                headerShown: false,
-            }} 
+        <Stack.Screen
+          name='ClientPaymentScreen'
+          component={ClientPaymentScreen}
+          options={{
+            headerShown: false,
+          }}
         />
+        <Stack.Screen
+          name='ClientPaymentSelectedScreen'
+          component={ClientPaymentSelectedScreen}
+          options={{
+            headerShown: false,
+          }}/>
       </Stack.Navigator>
     </NavigationContainer>
   );

diff --git a/constants.js b/constants.js
@@ -43,7 +43,7 @@ export const DATA = [
     balance: "4670 Bs.",
     pendingNotes: "5",
     lastPayment: "10/03/22",
-  },
+  }
 ];
 export const theme = {
   colors: {
@@ -87,56 +87,227 @@ export const HISTORY_DATA = [
     name: "Samuel Herbas",
     amount: "130.00",
     date: "2024-03-01T12:32:00",
+    note: "150",
   },
-  { id: "2", name: "Henry Peña", amount: "70.00", date: "2024-03-01T09:16:00" },
+  { id: "2", 
+    name: "Henry Peña", 
+    amount: "70.00", 
+    date: "2024-03-01T09:16:00", 
+    note: "170" },
   {
     id: "3",
     name: "Louisa Cespedez",
     amount: "200.00",
     date: "2024-03-01T06:30:00",
+    note: "171"
   },
   {
     id: "4",
     name: "Samuel Herbas",
     amount: "130.00",
     date: "2024-03-01T12:32:00",
+    note: "151",
   },
-  { id: "5", name: "Henry Peña", amount: "70.00", date: "2024-03-01T09:16:00" },
+  { id: "5", 
+    name: "Henry Peña",
+    amount: "70.00", 
+    date: "2024-03-01T09:16:00",
+    note: "161" },
   {
     id: "6",
     name: "Louisa Cespedez",
     amount: "200.00",
     date: "2024-03-01T06:30:00",
+    note: "172",
   },
   {
     id: "7",
     name: "Samuel Herbas",
     amount: "130.00",
     date: "2024-03-01T12:32:00",
+    note: "150"
   },
-  { id: "8", name: "Henry Peña", amount: "70.00", date: "2024-03-01T09:16:00" },
+  { id: "8", 
+    name: "Henry Peña", 
+    amount: "70.00", 
+    date: "2024-03-01T09:16:00", 
+    note:"121" },
   {
     id: "9",
     name: "Louisa Cespedez",
     amount: "200.00",
     date: "2024-03-01T06:30:00",
+    note: "161",
   },
   {
     id: "10",
     name: "Samuel Herbas",
     amount: "130.00",
     date: "2024-03-01T12:32:00",
+    note: "150",
   },
   {
     id: "11",
     name: "Henry Peña",
     amount: "70.00",
     date: "2024-03-01T09:16:00",
+    note: "180",
   },
   {
     id: "12",
     name: "Louisa Cespedez",
     amount: "200.00",
     date: "2024-03-01T06:30:00",
+    note: "190",
+  },
+];
+
+export const HISTORY_DATA2 = [
+  {
+    id: "1",
+    name: "Samuel Herbas",
+    amount: "130.00",
+    date: "2024/03/01",
+    note: "150",
+  },
+  { id: "2", 
+    name: "Henry Peña", 
+    amount: "70.00", 
+    date: "2024/03/01",
+    note: "170" },
+  {
+    id: "3",
+    name: "Louisa Cespedez",
+    amount: "200.00",
+    date: "2024/03/01",
+    note: "171"
+  },
+  {
+    id: "4",
+    name: "Samuel Herbas",
+    amount: "130.00",
+    date: "2024/03/01",
+    note: "151",
+  },
+  { id: "5", 
+    name: "Henry Peña",
+    amount: "70.00", 
+    date: "2024/03/01",
+    note: "161" },
+  {
+    id: "6",
+    name: "Louisa Cespedez",
+    amount: "200.00",
+    date: "2024/03/01",
+    note: "172",
+  },
+  {
+    id: "7",
+    name: "Samuel Herbas",
+    amount: "130.00",
+    date: "2024/03/01",
+    note: "130"
+  },
+  { id: "8", 
+    name: "Henry Peña", 
+    amount: "70.00", 
+    date: "2024/03/01", 
+    note:"121" },
+  {
+    id: "9",
+    name: "Louisa Cespedez",
+    amount: "200.00",
+    date: "2024/03/01",
+    note: "167",
+  },
+  {
+    id: "10",
+    name: "Samuel Herbas",
+    amount: "130.00",
+    date: "2024/03/01",
+    note: "159",
+  },
+  {
+    id: "11",
+    name: "Henry Peña",
+    amount: "70.00",
+    date: "2024/03/01",
+    note: "180",
+  },
+  {
+    id: "12",
+    name: "Louisa Cespedez",
+    amount: "200.00",
+    date: "2024/03/ 01",
+    note: "190",
+  },
+];
+
+export const NOTE_DATA = [
+  {
+    id: "1",
+    amount: "80.00",
+    date: "2024/03/01",
+    note: "150",
+  },
+  { id: "2", 
+    amount: "70.00", 
+    date: "2024/03/01",
+    note: "170" },
+  {
+    id: "3",
+    amount: "200.00",
+    date: "2024/03/01",
+    note: "170"
+  },
+  {
+    id: "4",
+    amount: "70.00",
+    date: "2024/03/01",
+    note: "190",
+  },
+  { id: "5", 
+    amount: "10.00", 
+    date: "2024/03/01",
+    note: "180" },
+  {
+    id: "6",
+    amount: "20.00",
+    date: "2024/03/01",
+    note: "172",
+  },
+  {
+    id: "7",
+    amount: "10.00",
+    date: "2024/03/01",
+    note: "172"
+  },
+  { id: "8",  
+    amount: "20.00", 
+    date: "2024/03/01", 
+    note:"150" },
+  {
+    id: "9",
+    amount: "20.00",
+    date: "2024/03/01",
+    note: "161",
+  },
+  {
+    id: "10",
+    amount: "30.00",
+    date: "2024/03/01",
+    note: "150"
+  },
+  {
+    id: "11",
+    amount: "10.00",
+    date: "2024/03/01",
+    note: "180"
+  },
+  {
+    id: "12",
+    amount: "20.00",
+    date: "2024/03/01",
+    note: "190"
   },
 ];
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/ClientDebit.js b/src/components/ClientDebit.js
@@ -0,0 +1,36 @@
+//ClientDebit.js
+import React, { useEffect, useState } from "react";
+import { View, Text, TouchableOpacity } from "react-native";
+import { clientDebitStyles } from './styles/ClientDebitStyles';
+import { HISTORY_DATA } from "../../constants";
+import { styles } from "./styles/ProfileHeaderStyles";
+
+const ClientDebit = ({clientInfo}) => {
+    const [totalDebit, setTotalDebit] = useState(0);
+
+    const calculation = (array) =>{
+        return array.reduce((prev, current)=> prev + current, 0 )
+    }
+    useEffect(()=> {
+        const concentration = HISTORY_DATA.filter(
+            (client)=> client.name == clientInfo.name)
+        const total = calculation(
+            concentration.map(obj => parseFloat(obj.amount)));
+        setTotalDebit(total); 
+    }, [clientInfo]);   
+
+    return(
+        <View style={clientDebitStyles.container}>
+            <Text style={clientDebitStyles.text}> {totalDebit} Bs</Text>
+            <View style={clientDebitStyles.spaceButtons}>
+                <TouchableOpacity onPress={()=>{}} style={clientDebitStyles.button}>
+                    <Text style={clientDebitStyles.textButton}>Automático</Text>
+                </TouchableOpacity>
+                <TouchableOpacity onPress={()=>{}} style={clientDebitStyles.button}>
+                    <Text style={clientDebitStyles.textButton}>Recibo</Text>
+                </TouchableOpacity>
+            </View>
+        </View>
+    )
+}
+export default ClientDebit;
diff --git a/src/components/DropdownSelector.js b/src/components/DropdownSelector.js
@@ -5,7 +5,7 @@ import { FontAwesome5 } from "@expo/vector-icons";
 import { Menu, MenuOptions, MenuOption, MenuTrigger } from "react-native-popup-menu";
 import {styles} from './styles/DropdownSelectorStyles'
 
-const DropdownSelector = ({ selectedOption, onOptionChange }) => {
+const DropdownSelector = ({ title, options, selectedOption, onOptionChange }) => {
   const [menuVisible, setMenuVisible] = useState(false);
 
   const toggleMenu = () => {
@@ -15,7 +15,7 @@ const DropdownSelector = ({ selectedOption, onOptionChange }) => {
   return (
     <View style={styles.container}>
       <View style={styles.label}>
-        <Text style={styles.optionText}>Actividad</Text>
+        <Text style={styles.optionText}>{title}</Text>
       </View>
       <Menu opened={menuVisible} onBackdropPress={() => setMenuVisible(false)}>
         <MenuTrigger onPress={toggleMenu} style={styles.trigger}>
@@ -29,7 +29,7 @@ const DropdownSelector = ({ selectedOption, onOptionChange }) => {
           </View>
         </MenuTrigger>
         <MenuOptions customStyles={{ optionsContainer: styles.optionsContainer, optionsWrapper: styles.optionsWrapper, }}>
-          {['Hoy', 'Esta Semana', 'Este Mes', 'Todo'].map((option) => (
+          {options.map((option) => (
             <MenuOption key={option} onSelect={() => { onOptionChange(option); setMenuVisible(false); }}>
               <View style={{ flexDirection: "row", alignItems: "center" }}>
                 <Text style={styles.optionsText}>{option}</Text>

diff --git a/src/components/NoteBelongs.js b/src/components/NoteBelongs.js
@@ -0,0 +1,27 @@
+//NoteBelongs.js
+import React from "react";
+import { View, Text, TouchableOpacity } from "react-native";
+import { noteBelongstyles } from "./styles/NoteBelongStyles";
+
+const NoteBelongs = ({ note, onSelect }) => {
+  return (
+    <TouchableOpacity onPress={() => onSelect(note.name)} style={noteBelongstyles}>
+      <View style={noteBelongstyles.container}>
+        <View>
+          <Text style={noteBelongstyles.textNro}>N° {note.note}</Text>
+          <Text style={noteBelongstyles.textDate}>{note.date}</Text>
+        </View>
+        <View>
+          <Text style={noteBelongstyles.amount}>{note.amount} Bs</Text>
+        </View>
+        <View>
+          <TouchableOpacity onPress={() => {}} style={noteBelongstyles.button}>
+            <Text style={noteBelongstyles.textButton}>Pagar</Text>
+          </TouchableOpacity>
+        </View>
+      </View>
+    </TouchableOpacity>
+  )
+};
+
+export default NoteBelongs;