fix UI invoice

package.json

@@ -18,6 +18,7 @@
     "@react-native-community/checkbox": "^0.5.8",
     "@react-native-community/masked-view": "^0.1.11",
     "@react-navigation/bottom-tabs": "^5.11.11",
+    "@react-navigation/core": "^5.15.3",
     "@react-navigation/drawer": "^5.12.5",
     "@react-navigation/native": "^5.9.4",
     "@react-navigation/stack": "^5.14.5",

src/components/ItemCartProduct/index.style.ts

@@ -3,24 +3,26 @@ import { StyleSheet } from "react-native";
 
 const styles = StyleSheet.create({
 
-  inputLogin: {
-    flexDirection: "row",
-    height: 40,
-    alignItems: "center",
-    borderBottomColor: '#FFFFFF',
-    borderBottomWidth: 0.5,
+  container: {
+    flexDirection: 'row',
+    padding: 10,
   },
-  inputText: {
-    paddingLeft: 5,
-    paddingBottom: 8,
-    width: '100%',
+  image: {
+    width: 60,
+    height: 60,
   },
-  validateText: {
-    color: 'red',
-    fontSize: 11,
-    marginLeft: 0,
-    alignItems: "center",
+  infoContainer: {
+    marginLeft: 10,
+    justifyContent: 'space-between',
+    padding: 5,
   },
+  textName: {
+    fontSize: 16,
+    fontWeight: 'bold'
+  },
+  textInfo: {
+    fontSize: 16,
+  }
 });
 
 export default styles;
\ No newline at end of file

src/components/ItemCartProduct/index.tsx

@@ -4,20 +4,23 @@ import { View, Text, Image, TextInput } from 'react-native';
 import styles from './index.style'
 
 type Props = {
-    drg_drug_cd: string, drg_drug_name: string, price: number, quantity: number
+    image_url:string, drg_drug_cd: string, drg_drug_name: string, price: number, quantity: number
 }
 const ItemCartProduct = (props: Props) => {
 
     return (
 
-        <View>
-            <Text>
+        <View style={styles.container}>
+            <Image style={styles.image} source={{ uri: props.image_url }} />
+            <View style={styles.infoContainer}>
+                <Text style={styles.textName}>
                     {`${props.drg_drug_cd} - ${props.drg_drug_name}`}
                 </Text>
-            <Text>
-                {`Giá: ${props.price} - Số lượng: ${props.quantity} - Tổng: ${props.price*props.quantity}VNĐ`}
+                <Text style={styles.textInfo}>
+                    {`Giá: ${props.price} - Số lượng: ${props.quantity} - Tổng: ${props.price*props.quantity} VNĐ`}
                 </Text>
             </View>
+        </View>
     );
 };
 

src/model/cart.ts

@@ -8,6 +8,7 @@ export type Product = {
     drg_drug_name: string,
     drug_id: number,
     drug_unit_id: number,
+    dosage: string
     inv_id: number,
     lot: string,
     price: number,

src/screens/HomeCreateBill/index.tsx

@@ -20,6 +20,7 @@ import axios from "axios";
 import config from "../../configs"
 import ItemCartProduct from '../../components/ItemCartProduct';
 import { RootState } from '../../redux/reducers';
+import { Product } from '../../model/cart';
 
 const App = () => {
   const navigation = useNavigation()
@@ -54,19 +55,19 @@ const App = () => {
     >
       <Image style={styles.iconAdd}
         source={require('../../assets/icon/iconHome/icon-cart-2.jpg')} />
-      <Text style={styles.textAdd}>Đơn hàng của bạn chưa có</Text>
-      <Text style={styles.textAdd}>sản phẩm nào</Text>
+      <Text style={styles.textAdd}>Thêm sản phẩm vào</Text>
+      <Text style={styles.textAdd}>hóa đơn</Text>
     </TouchableOpacity>
   )
   /////////////////////////////////////////////////////////////////////////////
-  const products = useSelector((state) => state.product)
+  const products = useSelector((state: RootState) => state.product.data)
   console.log('///////////////////////////////////////////////////////////////////////////////\n', products)
   const [product, setProduct] = useState(products)
   useEffect(() => {
     setProduct(products);
   }, [products]);
   //----------------------------------------------------------------------------------------
-  const cartProducts = useSelector((state:RootState) => state.cart.products)
+  const cartProducts = useSelector((state: RootState) => state.cart.products)
   console.log('CART: ', cartProducts)
   const sumCart = (product: Array<Data>) => {
     let sum = 0
@@ -81,10 +82,11 @@ const App = () => {
   // const totalAmount = sumCart(cartProducts)
   // console.log('TONG: CART', totalAmount)
 
-  const _renderCart = (product: Data) => {
+  const _renderCart = (product: Product) => {
     return (
       <View >
         <ItemCartProduct
+          image_url='https://image.voso.vn/users/vosoimage/images/71752bbe24f2fe10ffb321ae2387c03b?t%5B0%5D=maxSize%3Awidth%3D256%2Cheight%3D256&t%5B1%5D=compress%3Alevel%3D100&accessToken=0c6bdd26523088c81ced410395f2bce36f325d046a00861c8da30e46ee79a8f8'
           drg_drug_cd={product.drg_drug_cd}
           drg_drug_name={product.drg_drug_name}
           price={product.price}
@@ -93,6 +95,18 @@ const App = () => {
       </View>
     )
   }
+  const ItemSeparatorView = () => {
+    return (
+      // Flat List Item Separator ______________________________________________
+      <View
+        style={{
+          height: 1,
+          width: '100%',
+          backgroundColor: '#C8C8C8',
+        }}
+      />
+    );
+  };
   //----------------------------------------------------------------------------------------
   const [amount, setAmount] = useState(35264)
   const [amountPaid, setAmountPaid] = useState('0')
@@ -135,7 +149,7 @@ const App = () => {
 
   //----------------------------------------------------------------------------------------
 
-  const token = useSelector((state:RootState) => state.auth.token);
+  const token = useSelector((state: RootState) => state.auth.token);
   console.log('BillToken: ', token)
   const submit = () => {
     console.log('Sending....')
@@ -149,30 +163,30 @@ const App = () => {
       'issue_datetime': "2021-07-05T15:45:16+07:00", 'pay_method': "CS", 'pay_reference': "\"\"", 'status': 2, 'vat': 10,
       //--------------------
       'amount': amount,
-      'amount_paid': amount*1.1,
-      'amount_vat': amount*0.1,
+      'amount_paid': amount * 1.1,
+      'amount_vat': amount * 0.1,
       'current_pay': 40000,
       'note': note,
     }
-    const newProduct = {
-      base_quantity: 1,
-      discount: 0,
-      discount_type: "VNĐ",
-      discount_unit: 0,
-      dosage: cartProducts.dosage,
-      drg_drug_cd: cartProducts.drg_drug_cd,
-      drg_drug_name: cartProducts.drg_drug_name,
-      drug_id: cartProducts.drug_id,
-      drug_unit_id: cartProducts.drug_unit_id,
-      import_price: 0,
-      inv_id: cartProducts.inv_id,
-      lot: cartProducts.lot,
-      price: cartProducts.price,
-      promotion_flg: 0,
-      quantity: 2,
-      unit_id: 14,
-      unit_name: "Viên"
-    }
+    // const newProduct = {
+    //   base_quantity: 1,
+    //   discount: 0,
+    //   discount_type: "VNĐ",
+    //   discount_unit: 0,
+    //   dosage: products.dosage,
+    //   drg_drug_cd: cartProducts.drg_drug_cd,
+    //   drg_drug_name: cartProducts.drg_drug_name,
+    //   drug_id: cartProducts.drug_id,
+    //   drug_unit_id: cartProducts.drug_unit_id,
+    //   import_price: 0,
+    //   inv_id: cartProducts.inv_id,
+    //   lot: cartProducts.lot,
+    //   price: cartProducts.price,
+    //   promotion_flg: 0,
+    //   quantity: 2,
+    //   unit_id: 14,
+    //   unit_name: "Viên"
+    // }
     console.log('function', cartProducts)
     const body = {
       'invoice': invoice,
@@ -242,8 +256,9 @@ const App = () => {
         {_renderButtonAdd()}
         <FlatList
           data={cartProducts}
+          ItemSeparatorComponent={ItemSeparatorView}
           renderItem={({ item }) => _renderCart(item)}
-          keyExtractor={(item) => item}
+        // keyExtractor={(item) => item}
         />
         {_renderBillDate()}
         {_renderCustomerInfo()}

src/screens/HomeProductCreate/index.tsx

@@ -86,6 +86,7 @@ const App = () => {
       drg_drug_name: product.drg_drug_name,
       drug_id: product.drug_id,
       drug_unit_id: product.drug_unit_id,
+      dosage: product.dosage,
       inv_id: product.inv_id,
       lot: product.lot,
       price: product.price,

yarn.lock

@@ -1137,7 +1137,7 @@
 
 "@react-navigation/core@^5.15.3":
   version "5.15.3"
-  resolved "https://registry.npmjs.org/@react-navigation/core/-/core-5.15.3.tgz"
+  resolved "https://registry.yarnpkg.com/@react-navigation/core/-/core-5.15.3.tgz#dce7090bf3ea0d302993d742c706825e495b812e"
   integrity sha512-3ZdyDInh8qg1kygCNkmh9lFgpDf29lTvPsaMe2mm/qvmxLKSgttWBz07P2fc181aV9jTdgQpzYfWZ5KWT036zw==
   dependencies:
     "@react-navigation/routers" "^5.7.2"