added login modal

src/screens/status/ui/Status.tsx

@@ -1,3 +1,4 @@
+import AsyncStorage from '@react-native-async-storage/async-storage';
 import { useQuery } from '@tanstack/react-query';
 import packetsApi from 'api/packets';
 import Layout from 'components/Layout';
@@ -19,11 +20,13 @@ import { DataInfo } from '../lib/data';
 import Filter from './Filter';
 import Order from './Order';
 import OrderDetailModal from './OrderDetailModal';
+import PaymentFilter from './PaymentFilter';
 import Tabs from './Tabs';
 
 const Status = () => {
   const { width: screenWidth } = useWindowDimensions();
   const scale = screenWidth < 360 ? 0.85 : 1;
+  const [paymentStatus, setPaymentStatus] = useState('NEW');
 
   const [filter, setFilter] = useState<
     | 'COLLECTING'
@@ -38,7 +41,7 @@ const Status = () => {
   const [transportTypes, setTransportTypes] = useState<
     // 'all'|
     'AUTO' | 'AVIA'
-  >('AUTO');
+  >('AVIA');
   const [page, setPage] = useState(0);
   const {
     data: statusData,
@@ -46,15 +49,21 @@ const Status = () => {
     isLoading,
     isFetching,
   } = useQuery({
-    queryKey: ['status', filter, transportTypes, page],
+    queryKey: ['status', filter, transportTypes, page, paymentStatus],
     queryFn: () =>
       packetsApi.getPacketsStatus(filter, {
         page,
         size: 10,
         cargoType: transportTypes,
+        sort: 'id',
+        paymentStatus: paymentStatus,
+        direction: 'DESC',
       }),
   });
 
+  console.log(AsyncStorage.getItem('token'));
+  console.log('statusData', statusData);
+
   const [modalVisible, setModalVisible] = useState(false);
   const scaleAnim = React.useRef(new Animated.Value(0.8)).current;
   const opacityAnim = React.useRef(new Animated.Value(0)).current;
@@ -144,20 +153,30 @@ const Status = () => {
     );
   }
 
-  if (statusData?.data.length === 0) {
+  if (statusData?.data.length === 0 || statusData === undefined) {
     return (
       <Layout>
         <Tabs filter={filter} setFilter={setFilter} />
         <View style={styles.controls}>
-          <View style={{ position: 'relative' }}>
+          <View
+            style={{
+              position: 'relative',
+              flexDirection: 'row',
+              gap: 8,
+            }}
+          >
             <Filter
               transportTypes={transportTypes}
               setTransportTypes={setTransportTypes}
               reys={reys}
               setReys={setReys}
-              data={statusData!}
+              data={statusData}
               setSelectedData={setSelectedData}
             />
+            <PaymentFilter
+              paymentStatus={paymentStatus}
+              setPaymentStatus={setPaymentStatus}
+            />
           </View>
         </View>
         <NoResult message={t("Hech qanday ma'lumot topilmadi")} />
@@ -182,7 +201,13 @@ const Status = () => {
               />
               <View style={styles.searchIcon}>{searchIcon}</View>
             </View> */}
-          <View style={{ position: 'relative' }}>
+          <View
+            style={{
+              position: 'relative',
+              flexDirection: 'row',
+              gap: 8,
+            }}
+          >
             <Filter
               transportTypes={transportTypes}
               setTransportTypes={setTransportTypes}
@@ -191,6 +216,10 @@ const Status = () => {
               data={statusData!}
               setSelectedData={setSelectedData}
             />
+            <PaymentFilter
+              paymentStatus={paymentStatus}
+              setPaymentStatus={setPaymentStatus}
+            />
           </View>
         </View>
         <Order