TP-22332 | update | Aman Singh

2024-03-14 09:33:27 +05:30
parent e29eb4d63d
commit fbbaaf1ae4
38 changed files with 2083 additions and 121 deletions
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -0,0 +1,6 @@
+{
+    "cSpell.words": [
+        "Pressable",
+        "utlis"
+    ]
+}
--- a/android/app/google-services.json
+++ b/android/app/google-services.json
@@ -37,4 +37,4 @@
    }
  ],
  "configuration_version": "1"
-}
+}
--- a/src/assets/icons/CSAIcon.tsx
+++ b/src/assets/icons/CSAIcon.tsx
@@ -0,0 +1,35 @@
+import { IconProps } from "@rn-ui-lib/icons/types"
+import * as React from "react"
+import Svg, { Mask, Path, G } from "react-native-svg"
+
+const CSAIcon:React.FC<IconProps> = (props) => {
+    const {fillColor="#3591FE", size=16, style} = props;
+  return (
+    <Svg
+      width={size}
+      height={size}
+      viewBox={`0 0 ${size} ${size}`}
+      fill="none"
+      style={style}
+    >
+      <Mask
+        id="a"
+        maskUnits="userSpaceOnUse"
+        x={0}
+        y={0}
+        width={size}
+        height={size}
+      >
+        <Path fill="#D9D9D9" d="M0 0H16V16H0z" />
+      </Mask>
+      <G mask="url(#a)">
+        <Path
+          d="M7.333 14v-1.333h5.333V7.933c0-.644-.122-1.25-.366-1.816a4.72 4.72 0 00-1-1.484 4.718 4.718 0 00-1.484-1A4.537 4.537 0 008 3.267c-.645 0-1.25.122-1.817.366a4.718 4.718 0 00-1.483 1 4.718 4.718 0 00-1 1.484 4.537 4.537 0 00-.367 1.816V12h-.667c-.366 0-.68-.13-.941-.391a1.285 1.285 0 01-.392-.942V9.333c0-.255.061-.48.183-.675.123-.194.284-.352.484-.475l.05-.883c.1-.811.33-1.544.692-2.2.36-.656.81-1.211 1.35-1.667a6.067 6.067 0 016.016-1.058c.672.25 1.275.605 1.808 1.066.534.462.981 1.017 1.342 1.667.361.65.592 1.375.692 2.175l.05.867c.2.1.36.247.483.441.122.195.183.409.183.642v1.534c0 .244-.06.46-.183.65a1.211 1.211 0 01-.483.433v.817c0 .366-.13.68-.392.942-.261.26-.575.391-.942.391H7.333zM6 9.333a.643.643 0 01-.475-.192.643.643 0 01-.192-.474c0-.19.064-.348.192-.476A.645.645 0 016 8c.189 0 .347.064.475.191a.647.647 0 01.191.476.645.645 0 01-.191.474.646.646 0 01-.475.192zm4 0a.643.643 0 01-.475-.192.643.643 0 01-.192-.474c0-.19.064-.348.192-.476A.645.645 0 0110 8c.189 0 .347.064.475.191a.647.647 0 01.191.476.644.644 0 01-.191.474.646.646 0 01-.475.192zM4.016 8.3c-.044-.656.048-1.25.276-1.783.227-.534.533-.987.916-1.359A4.04 4.04 0 016.533 4.3c.5-.2 1-.3 1.5-.3 1.011 0 1.886.32 2.625.959A3.9 3.9 0 0112 7.35a5.183 5.183 0 01-2.834-.842A5.341 5.341 0 017.25 4.367a5.322 5.322 0 01-1.125 2.391A5.188 5.188 0 014.016 8.3z"
+          fill={fillColor}
+        />
+      </G>
+    </Svg>
+  )
+}
+
+export default CSAIcon;
--- a/src/assets/icons/CompletedCaseIcon.tsx
+++ b/src/assets/icons/CompletedCaseIcon.tsx
@@ -0,0 +1,38 @@
+import { StyleSheet, Text, View } from 'react-native'
+import React from 'react'
+import Svg, { Mask, Path, G } from "react-native-svg"
+import { IconProps } from '@rn-ui-lib/icons/types'
+
+const CompletedCaseIcon: React.FC<IconProps> = (props) => {
+    const { fillColor = "#969696", size = 16, style } = props;
+    return (
+        <Svg
+            width={size}
+            height={size}
+            viewBox={`0 0 ${size} ${size}`}
+            fill="none"
+            style={style}
+        >
+            <Mask
+                id="a"
+                maskUnits="userSpaceOnUse"
+                x={0}
+                y={0}
+                width={16}
+                height={16}
+            >
+                <Path fill="#D9D9D9" d="M0 0H16V16H0z" />
+            </Mask>
+            <G mask="url(#a)">
+                <Path
+                    d="M.667 13.333v-1.866c0-.378.097-.725.292-1.042.194-.317.452-.558.775-.725a9.911 9.911 0 012.1-.775 9.184 9.184 0 014.333 0c.711.172 1.411.43 2.1.775.322.167.58.408.775.725.194.317.292.664.292 1.042v1.866H.667zm12 0v-2c0-.489-.136-.958-.408-1.408-.273-.45-.659-.836-1.159-1.158a8.36 8.36 0 013 .933c.4.222.706.47.917.741.211.273.317.57.317.892v2h-2.667zM6 8a2.568 2.568 0 01-1.883-.783 2.568 2.568 0 01-.783-1.884c0-.733.26-1.36.783-1.883A2.568 2.568 0 016 2.667c.734 0 1.361.26 1.884.783.522.522.783 1.15.783 1.883 0 .734-.261 1.362-.783 1.884A2.568 2.568 0 016 8zm4 0c-.122 0-.277-.014-.466-.041a4.122 4.122 0 01-.467-.092c.3-.356.53-.75.691-1.184C9.92 6.25 10 5.8 10 5.333c0-.466-.08-.916-.242-1.35A3.959 3.959 0 009.067 2.8a2.04 2.04 0 01.467-.109c.155-.016.31-.024.466-.024.734 0 1.361.26 1.884.783.522.522.783 1.15.783 1.883 0 .734-.261 1.362-.783 1.884A2.568 2.568 0 0110 8zm-8 4h8v-.533a.65.65 0 00-.333-.567c-.6-.3-1.206-.525-1.817-.675a7.748 7.748 0 00-3.7 0 8.709 8.709 0 00-1.816.675.646.646 0 00-.334.567V12zm4-5.333c.367 0 .681-.13.942-.392.261-.261.392-.575.392-.942 0-.366-.13-.68-.392-.94A1.284 1.284 0 006 4c-.366 0-.68.13-.941.392-.261.261-.392.575-.392.941 0 .367.13.68.392.942.26.261.575.392.941.392z"
+                    fill={fillColor}
+                />
+            </G>
+        </Svg>
+    )
+}
+
+
+
+export default CompletedCaseIcon
--- a/src/assets/icons/CrossIcon.tsx
+++ b/src/assets/icons/CrossIcon.tsx
@@ -0,0 +1,37 @@
+import { IconProps } from "@rn-ui-lib/icons/types";
+import React, { FC } from "react";
+import Svg, { G, Mask, Path } from "react-native-svg";
+
+
+
+const CrossIcon: FC<IconProps> = (props) => {
+    const { size =16,  style, fillColor="#969696" } = props;
+  return (
+    <Svg
+      width={size}
+      height={size}
+      viewBox={`0 0 ${size} ${size}`}
+      fill="none"
+      style={style}
+    >
+      <Mask
+        id="a"
+        maskUnits="userSpaceOnUse"
+        x={0}
+        y={0}
+        width={16}
+        height={16}
+      >
+        <Path fill="#D9D9D9" d="M0 0H16V16H0z" />
+      </Mask>
+      <G mask="url(#a)">
+        <Path
+          d="M8 8.933L4.733 12.2a.632.632 0 01-.466.183.632.632 0 01-.467-.183.632.632 0 01-.183-.467c0-.189.06-.344.183-.466L7.067 8 3.8 4.733a.632.632 0 01-.183-.466c0-.19.06-.345.183-.467a.632.632 0 01.467-.183c.189 0 .344.06.466.183L8 7.067 11.267 3.8a.632.632 0 01.466-.183c.19 0 .345.06.467.183a.632.632 0 01.183.467.632.632 0 01-.183.466L8.933 8l3.267 3.267a.632.632 0 01.183.466.632.632 0 01-.183.467.632.632 0 01-.467.183.632.632 0 01-.466-.183L8 8.933z"
+          fill={fillColor}
+        />
+      </G>
+    </Svg>
+  );
+};
+
+export default CrossIcon;
--- a/src/assets/icons/FilterIconOutline.tsx
+++ b/src/assets/icons/FilterIconOutline.tsx
@@ -0,0 +1,40 @@
+import * as React from "react"
+import { StyleProp, ViewStyle } from "react-native"
+import Svg, { Mask, Path, G } from "react-native-svg"
+
+interface IFilterIconOutline {
+    style?: StyleProp<ViewStyle>;
+    fillColor?: string;
+}
+
+const FilterIconOutline: React.FC<IFilterIconOutline> = (props) => {
+    const { style, fillColor="#969696" } = props;
+    return (
+        <Svg
+            width={16}
+            height={16}
+            viewBox="0 0 16 16"
+            fill="none"
+            style={style}
+        >
+            <Mask
+                id="a"
+                maskUnits="userSpaceOnUse"
+                x={0}
+                y={0}
+                width={16}
+                height={16}
+            >
+                <Path fill="#D9D9D9" d="M0 0H16V16H0z" />
+            </Mask>
+            <G mask="url(#a)">
+                <Path
+                    d="M9.334 8.667v4a.644.644 0 01-.192.474.646.646 0 01-.475.192H7.334a.643.643 0 01-.475-.192.643.643 0 01-.192-.474v-4L2.8 3.733a.634.634 0 01-.074-.7c.116-.244.319-.366.608-.366h9.333c.289 0 .492.122.609.366a.635.635 0 01-.076.7L9.334 8.667zM8 8.2L11.3 4H4.7L8 8.2z"
+                    fill={fillColor}
+                />
+            </G>
+        </Svg>
+    )
+}
+
+export default FilterIconOutline
--- a/src/assets/icons/RequestIcon.tsx
+++ b/src/assets/icons/RequestIcon.tsx
@@ -0,0 +1,40 @@
+import { IconProps } from "@rn-ui-lib/icons/types"
+import * as React from "react"
+import Svg, { Rect, Mask, Path, G } from "react-native-svg"
+
+
+
+
+const RequestIcon:React.FC<IconProps> =(props) => {
+    const {fillColor = "#29A1A3", size=24, style} = props;
+  return (
+    <Svg
+      width={size}
+      height={size}
+      viewBox={`0 0 ${size} ${size}`}
+      fill="none"
+      style={style}
+    >
+      <Rect width={24} height={24} rx={4} fill="#EAF6F6" />
+      <Mask
+        id="a"
+
+        maskUnits="userSpaceOnUse"
+        x={4}
+        y={4}
+        width={16}
+        height={16}
+      >
+        <Path fill="#D9D9D9" d="M4 4H20V20H4z" />
+      </Mask>
+      <G mask="url(#a)">
+        <Path
+          d="M14.666 9.6l-5.933 5.933a.632.632 0 01-.467.183.632.632 0 01-.466-.183.632.632 0 01-.184-.467c0-.189.061-.344.184-.466l5.933-5.934H8.666a.645.645 0 01-.475-.191A.645.645 0 018 8c0-.19.063-.348.191-.475a.645.645 0 01.475-.192h6.667c.189 0 .347.064.475.192a.645.645 0 01.191.475v6.666a.645.645 0 01-.191.475.645.645 0 01-.475.192.645.645 0 01-.475-.192.645.645 0 01-.192-.475V9.6z"
+          fill={fillColor}
+        />
+      </G>
+    </Svg>
+  )
+}
+
+export default RequestIcon
--- a/src/assets/icons/SendIcon.tsx
+++ b/src/assets/icons/SendIcon.tsx
@@ -0,0 +1,39 @@
+import Svg, { Path, Mask, G } from "react-native-svg"
+import React from 'react'
+import { IconProps } from '@rn-ui-lib/icons/types';
+
+const SendIcon: React.FC<IconProps> = (props) => {
+    const { fillColor = "#D9D9D9", size = 40, style } = props;
+    return (
+        <Svg
+            width={size}
+            height={size}
+            viewBox={`0 0 ${size} ${size}`}
+            fill="none"
+            style={style}
+        >
+            <Path d="M0 7a7 7 0 017-7h33v33a7 7 0 01-7 7H0V7z" fill="#0276FE" />
+            <Mask
+                id="a"
+                maskUnits="userSpaceOnUse"
+                x={10}
+                y={10}
+                width={20}
+                height={20}
+            >
+                <Path fill={fillColor} d="M10 10H30V30H10z" />
+            </Mask>
+            <G mask="url(#a)">
+                <Path
+                    d="M13.91 27.273a.88.88 0 01-.844-.078.83.83 0 01-.4-.744v-4l7.112-1.778-7.111-1.778v-4a.83.83 0 01.4-.744.88.88 0 01.844-.078L27.6 19.85c.37.163.555.437.555.822 0 .385-.185.66-.555.822l-13.69 5.778z"
+                    fill="#fff"
+                />
+            </G>
+        </Svg>
+    )
+}
+
+
+
+
+export default SendIcon;
--- a/src/common/BlockerScreen.tsx
+++ b/src/common/BlockerScreen.tsx
@@ -166,16 +166,16 @@ const BlockerScreen = (props: IBlockerScreen) => {
    );
  }

-  if (!isTimeSynced) {
-    const { heading, instructions } = BLOCKER_SCREEN_DATA.TIME_UNSYNC;
-    return (
-      <BlockerInstructions
-        heading={heading}
-        instructions={instructions}
-        actionBtn={{ title: 'Go to settings', action: handleOpenSettings }}
-      />
-    );
-  }
+  // if (!isTimeSynced) {
+  //   const { heading, instructions } = BLOCKER_SCREEN_DATA.TIME_UNSYNC;
+  //   return (
+  //     <BlockerInstructions
+  //       heading={heading}
+  //       instructions={instructions}
+  //       actionBtn={{ title: 'Go to settings', action: handleOpenSettings }}
+  //     />
+  //   );
+  // }

  if (!isDeviceLocationEnabled) {
    const { heading, instructions } = BLOCKER_SCREEN_DATA.DEVICE_LOCATION_OFF;
--- a/src/components/utlis/apiHelper.ts
+++ b/src/components/utlis/apiHelper.ts
@@ -263,10 +263,10 @@ axiosInstance.interceptors.response.use(
          });
        }

-        if ([API_STATUS_CODE.UNAUTHORIZED, API_STATUS_CODE.FORBIDDEN].includes(response.status)) {
-          // Reset user info
-          dispatch(handleLogout());
-        }
+        // if ([API_STATUS_CODE.UNAUTHORIZED, API_STATUS_CODE.FORBIDDEN].includes(response.status)) {
+        //   // Reset user info
+        //   dispatch(handleLogout());
+        // }

        return Promise.reject(error);
      }
--- a/src/constants/config.js
+++ b/src/constants/config.js
@@ -1,14 +1,14 @@
 import { MILLISECONDS_IN_A_MINUTE, MINUTES_IN_AN_HOUR } from '../../RN-UI-LIB/src/utlis/common';

-export const BASE_AV_APP_URL = 'https://longhorn.navi.com/field-app';
+export const BASE_AV_APP_URL = 'https://qa-longhorn-portal.np.navi-tech.in/field-app';
 export const SENTRY_DSN =
-  'https://5daa4832fade44b389b265de9b26c2fd@longhorn.navi.com/glitchtip-events/172';
-export const JANUS_SERVICE_URL = 'https://longhorn.navi.com/api/events/json';
-export const ENV = 'prod';
+  'https://acef93c884c1424cacc4ec899562e203@qa-longhorn-portal.np.navi-tech.in/glitchtip-events/173';
+export const JANUS_SERVICE_URL = 'https://qa-longhorn-portal.np.navi-tech.in/api/events/json';
+export const ENV = 'qa';
 export const IS_SSO_ENABLED = true;
 export const APM_APP_NAME = 'cosmos-app';
-export const APM_BASE_URL = 'https://longhorn.navi.com/apm-events';
+export const APM_BASE_URL = 'https://qa-longhorn-portal.np.navi-tech.in/apm-events';
 export const IS_DATA_SYNC_REQUIRED = true;
 export const DATA_SYNC_TIME_INTERVAL = 2 * MINUTES_IN_AN_HOUR * MILLISECONDS_IN_A_MINUTE; // 2hr
 export const GOOGLE_SSO_CLIENT_ID =
-  '136591056725-ev8db4hrlud2m23n0o03or3cmmp3a3cq.apps.googleusercontent.com';
+  '60755663443-40k0fbrbbqv4ci4hrjlbrphab5fj387b.apps.googleusercontent.com';
--- a/src/reducer/allCasesSlice.ts
+++ b/src/reducer/allCasesSlice.ts
@@ -61,6 +61,7 @@ interface IAllCasesSlice {
  geolocations?: IGeolocation[];
  selectedCaseId: string;
  filteredListToast: FilteredListToast;
+  shouldHideTabBar: boolean;
 }

 const initialState: IAllCasesSlice = {
@@ -89,6 +90,7 @@ const initialState: IAllCasesSlice = {
    showToast: false,
    caseType: '',
  },
+  shouldHideTabBar: false,
 };

 const getCaseListComponents = (casesList: ICaseItem[], caseDetails: Record<string, CaseDetail>) => {
@@ -588,6 +590,9 @@ const allCasesSlice = createSlice({
    setFilteredListToast: (state, action) => {
      state.filteredListToast = action.payload;
    },
+    setShouldHideTabBar: (state, action) => {
+      state.shouldHideTabBar = action.payload;
+    }
  },
 });

@@ -611,6 +616,7 @@ export const {
  setCasesImageUri,
  setSelectedCaseId,
  setFilteredListToast,
+  setShouldHideTabBar
 } = allCasesSlice.actions;

 export default allCasesSlice.reducer;
--- a/src/screens/Profile/Navigation/constants.ts
+++ b/src/screens/Profile/Navigation/constants.ts
@@ -0,0 +1,60 @@
+import { logout } from "@actions/authActions";
+import CSAIcon from "@assets/icons/CSAIcon";
+import CompletedCaseIcon from "@assets/icons/CompletedCaseIcon";
+import { CLICKSTREAM_EVENT_NAMES } from "@common/Constants";
+import { navigateToScreen } from "@components/utlis/navigationUtlis";
+import { MY_CASE_ITEM } from "@reducers/userSlice";
+import LogoutIcon from "@rn-ui-lib/icons/LogoutIcon";
+import { CaseDetailStackEnum } from "@screens/caseDetails/CaseDetailStack";
+import { addClickstreamEvent } from "@services/clickstreamEventService";
+import store from "@store";
+import { Alert } from "react-native";
+import { ProfileScreenStackEnum } from "../ProfileStack";
+
+
+const {isTeamLead, selectedAgent} = store.getState().user;
+
+export const NavigationLinks = [
+    {
+        name: "Completed cases",
+        icon: CompletedCaseIcon,
+        isVisible: !isTeamLead || selectedAgent?.referenceId === MY_CASE_ITEM.referenceId,
+        onPress: () => navigateToScreen("completedCases")
+    },
+    {
+        name: "Tele support",
+        icon: CSAIcon,
+        isVisible: true,
+        onPress: () => navigateToScreen(ProfileScreenStackEnum.TELE_SUPPORT, {
+            from: "profile"
+        }),
+        isNew: true
+    },
+    {
+        name: "Logout",
+        icon: LogoutIcon,
+        isVisible: true,
+        onPress: () => {
+            addClickstreamEvent(CLICKSTREAM_EVENT_NAMES.AV_PROFILE_PAGE_LOGOUT_BUTTON_CLICKED);
+            addClickstreamEvent(CLICKSTREAM_EVENT_NAMES.AV_PROFILE_PAGE_LOGOUT_CONFIRMATION_OPEN);
+            Alert.alert('Confirm', 'Are you sure you want to logout? ', [
+                {
+                    text: 'Cancel',
+                    style: 'cancel',
+                    onPress: () => {
+                        addClickstreamEvent(CLICKSTREAM_EVENT_NAMES.AV_PROFILE_PAGE_LOGOUT_CONFIRMATION_CLOSED);
+                    },
+                },
+                {
+                    text: 'Logout',
+                    onPress: () => {
+                        addClickstreamEvent(CLICKSTREAM_EVENT_NAMES.AV_PROFILE_PAGE_LOGOUT_CONFIRMATION_CLICKED);
+                        store.dispatch(logout());
+                    },
+                    style: 'destructive',
+                },
+            ]);
+        }
+
+    }
+];
--- a/src/screens/Profile/ProfileButton.tsx
+++ b/src/screens/Profile/ProfileButton.tsx
@@ -0,0 +1,74 @@
+import { COLORS } from '@rn-ui-lib/colors';
+import Chevron from '@rn-ui-lib/icons/Chevron';
+import { IconProps } from '@rn-ui-lib/icons/types';
+import { GenericStyles } from '@rn-ui-lib/styles';
+import React, { useState } from 'react';
+import { StyleSheet, Text, TouchableHighlight, View } from 'react-native';
+
+interface ProfileButtonProps {
+  onPress: () => void;
+  name: string;
+  Icon: React.FC<IconProps>;
+  tag: string;
+  NewComponent?: React.FC;
+};
+
+
+const ProfileButton: React.FC<ProfileButtonProps> = (props) => {
+  const { onPress, name, Icon, NewComponent } = props;
+
+  const [isPressed, setIsPressed] = useState(false);
+  const handleOnPress = () => {
+    setIsPressed(true);
+  };
+  const handleOnPressOut = () => {
+    setIsPressed(false);
+  };
+  return (
+    <TouchableHighlight
+      underlayColor={COLORS.BACKGROUND.BLUE}
+      onPressIn={handleOnPress}
+      onPress={onPress}
+      onPressOut={handleOnPressOut}
+      style={[
+        GenericStyles.pv12,
+        GenericStyles.ph12,
+        GenericStyles.br4,
+        styles.borderBottom
+      ]}
+    >
+      <View style={[
+        GenericStyles.row,
+        GenericStyles.alignCenter,
+        GenericStyles.justifyContentSpaceBetween
+      ]}>
+        <View
+          style={[
+            GenericStyles.row,
+            GenericStyles.alignCenter,
+          ]}
+        >
+          <Icon size={16} fillColor={isPressed ? COLORS.TEXT.BLUE : COLORS.TEXT.LIGHT} />
+          <Text style={GenericStyles.ml4}>{name}</Text>
+        </View>
+        <View>
+          {NewComponent ? <NewComponent /> : null}
+          <Chevron fillColor={isPressed ? COLORS.TEXT.BLUE : COLORS.TEXT.LIGHT} />
+        </View>
+      </View>
+    </TouchableHighlight>
+  )
+}
+
+
+
+const styles = StyleSheet.create({
+  borderBottom: {
+    borderBottomColor: COLORS.BORDER.GREY,
+    borderBottomWidth: 1
+  }
+})
+
+
+
+export default ProfileButton;
--- a/src/screens/Profile/ProfileStack.tsx
+++ b/src/screens/Profile/ProfileStack.tsx
@@ -0,0 +1,63 @@
+import { getScreenFocusListenerObj } from '@components/utlis/commonFunctions';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import CompletedCase from '@screens/allCases/CompletedCase';
+import { DEFAULT_SCREEN_OPTIONS } from '@screens/auth/ProtectedRouter';
+import { RequestDetail, ViewRequestHistory } from '@screens/cosmosSupport';
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import Profile from '.';
+
+
+const Stack = createNativeStackNavigator();
+
+
+export enum ProfileScreenStackEnum {
+    PROFILE = 'profile',
+    COMPLETED_CASES = 'completedCases',
+    TELE_SUPPORT = 'teleSupport',
+    PROFILE_TICKET_DETAIL = 'profileTicketDetail',
+
+}
+
+
+const ProfileStack = () => {
+
+    return (
+        <Stack.Navigator
+            screenListeners={getScreenFocusListenerObj}
+            screenOptions={
+                DEFAULT_SCREEN_OPTIONS
+            }
+            initialRouteName={ProfileScreenStackEnum.PROFILE}
+        >
+            <Stack.Screen
+                name={ProfileScreenStackEnum.PROFILE}
+                component={Profile}
+                
+
+            />
+            <Stack.Screen
+                name={ProfileScreenStackEnum.COMPLETED_CASES}
+                component={CompletedCase}
+            />
+            <Stack.Group
+                navigationKey={ProfileScreenStackEnum.TELE_SUPPORT}
+            >
+                <Stack.Screen
+                    name={ProfileScreenStackEnum.TELE_SUPPORT}
+                    // @ts-ignore
+                    component={ViewRequestHistory}
+                />
+                <Stack.Screen
+                    name={ProfileScreenStackEnum.PROFILE_TICKET_DETAIL}
+                    // @ts-ignore
+                    component={RequestDetail}
+                />
+            </Stack.Group>
+        </Stack.Navigator>
+    )
+}
+
+const styles = StyleSheet.create({})
+
+export default ProfileStack
--- a/src/screens/Profile/index.tsx
+++ b/src/screens/Profile/index.tsx
@@ -39,6 +39,8 @@ import FloatingBannerCta from '@common/FloatingBannerCta';
 import AttendanceIcon from '@assets/icons/AttendanceIcon';
 import GoogleFormModal from '@screens/allCases/GoogleFormModal';
 import { PageRouteEnum } from '@screens/auth/ProtectedRouter';
+import ProfileButton from './ProfileButton';
+import { NavigationLinks } from './Navigation/constants';

 const Profile: React.FC = () => {
  const [buttonPressedCount, setButtonPressedCount] = useState(0);
@@ -126,12 +128,12 @@ const Profile: React.FC = () => {

  const helpButtonClickHandler = () => Linking.openURL(supportLink);

-  
+
  const hideUploadImageBtn =
    approvalStatus === ImageApprovalStatus.PENDING ||
    approvalStatus === ImageApprovalStatus.APPROVED;

-  
+

  const showCompletedCases = !isTeamLead || selectedAgent?.referenceId === MY_CASE_ITEM.referenceId;

@@ -155,16 +157,16 @@ const Profile: React.FC = () => {
                addClickstreamEvent(CLICKSTREAM_EVENT_NAMES.FA_ID_CARD_CLICKED);
                navigateToScreen(PageRouteEnum.AGENT_ID_CARD);
              }}
-                style={styles.bottomActionable}
+              style={styles.bottomActionable}
            >
-                <View style={[GenericStyles.row, GenericStyles.alignStart]}>
-                  <Text small style={styles.whiteText}>
-                    View ID card
-                  </Text>
-                  <View style={{ transform: [{ rotate: '180deg' }] }}>
-                    <ArrowSolidIcon fillColor={COLORS.TEXT.WHITE} />
-                  </View>
+              <View style={[GenericStyles.row, GenericStyles.alignStart]}>
+                <Text small style={styles.whiteText}>
+                  View ID card
+                </Text>
+                <View style={{ transform: [{ rotate: '180deg' }] }}>
+                  <ArrowSolidIcon fillColor={COLORS.TEXT.WHITE} />
                </View>
+              </View>
            </Pressable>
          ) : null
        }
@@ -185,70 +187,33 @@ const Profile: React.FC = () => {
          )
        }
      />
-      <ScrollView style={GenericStyles.fill}>
-        {showCompletedCases ? (
-          <View
-            style={[
-              GenericStyles.ph16,
-              GenericStyles.pt16,
-              numberOfCompletedCases === 2 ? { paddingBottom: 6 } : {},
-            ]}
-          >
-            {hideUploadImageBtn ? null : <IDCardImageCapture />}
-            <View
-              style={[
-                GenericStyles.row,
-                GenericStyles.alignCenter,
-                numberOfCompletedCases ? { paddingBottom: 12 } : GenericStyles.pb16,
-              ]}
-            >
-              <View style={[GenericStyles.ml4, GenericStyles.mr8]}>
-                <GroupIcon />
-              </View>
-              <Text>Completed cases ({numberOfCompletedCases})</Text>
-            </View>
-            {numberOfCompletedCases
-              ? completeCasesList.slice(0, 2).map((caseItem) => {
-                  const caseDetailItem = caseDetails[caseItem.caseReferenceId] as CaseDetail;
-                  return (
-                    <CaseItem
-                      key={caseItem.caseReferenceId}
-                      caseDetailObj={caseDetailItem}
-                      isCompleted={true}
-                    />
-                  );
-                })
-              : null}
-            {numberOfCompletedCases > 2 ? (
-              <Button
-                title="View all completed cases"
-                variant="primaryText"
-                style={[
-                  GenericStyles.w100,
-                  GenericStyles.br8,
-                  GenericStyles.mt6,
-                  GenericStyles.mb12,
-                  GenericStyles.whiteBackground,
-                ]}
-                onPress={handleViewAllCases}
+      <ScrollView
+        contentContainerStyle={[
+          GenericStyles.p16,
+          GenericStyles.whiteBackground,
+          GenericStyles.fill
+        ]}
+      >
+        {hideUploadImageBtn ? null : <IDCardImageCapture />}
+        {
+          NavigationLinks.map((link, index) => {
+            if(!link.isVisible) return null;
+            return (
+              <ProfileButton
+                key={index}
+                onPress={link.onPress}
+                name={link.name}
+                Icon={link.icon}
+                tag={''}
              />
-            ) : null}
-          </View>
-        ) : null}
-        <View style={[styles.logoutContainer, GenericStyles.whiteBackground]}>
-          <TouchableOpacity
-            onPress={handleLogout}
-            style={[GenericStyles.row, GenericStyles.centerAligned, GenericStyles.fill]}
-          >
-            <LogoutIcon />
-            <Text style={styles.logoutText}>Logout</Text>
-          </TouchableOpacity>
-        </View>
+            );
+          })
+        }
+        
        <Pressable
          style={[
            GenericStyles.row,
            GenericStyles.centerAligned,
-            GenericStyles.fill,
            GenericStyles.w100,
            GenericStyles.mt8,
          ]}
@@ -275,7 +240,7 @@ const Profile: React.FC = () => {
      )}
      <GoogleFormModal showForm={showForm} setShowForm={setShowForm} />

-      
+
    </View>
  );
 };
--- a/src/screens/allCases/CompletedCase.tsx
+++ b/src/screens/allCases/CompletedCase.tsx
@@ -1,15 +1,15 @@
+import { setShouldHideTabBar } from '@reducers/allCasesSlice';
+import React, { useEffect } from 'react';
 import { StyleSheet, View, VirtualizedList } from 'react-native';
-import React from 'react';
-import { ICaseItem } from './interface';
-import { COLORS } from '../../../RN-UI-LIB/src/styles/colors';
-import { EmptyListMessages } from './constants';
-import { GenericStyles } from '../../../RN-UI-LIB/src/styles';
-import EmptyList from './EmptyList';
 import NavigationHeader from '../../../RN-UI-LIB/src/components/NavigationHeader';
+import { GenericStyles } from '../../../RN-UI-LIB/src/styles';
+import { COLORS } from '../../../RN-UI-LIB/src/styles/colors';
 import { goBack } from '../../components/utlis/navigationUtlis';
-import { useAppSelector } from '../../hooks';
-import CaseItem from './CaseItem';
+import { useAppDispatch, useAppSelector } from '../../hooks';
 import { CaseDetail } from '../caseDetails/interface';
+import CaseItem from './CaseItem';
+import EmptyList from './EmptyList';
+import { ICaseItem } from './interface';

 const getItem = (item: Array<ICaseItem>, index: number) => item[index];

@@ -22,6 +22,15 @@ const CompletedCase: React.FC = () => {
    (state) => state.allCases
  );

+  const dispatch = useAppDispatch();
+
+  useEffect(() => {
+    dispatch(setShouldHideTabBar(true))
+    return () => {
+      dispatch(setShouldHideTabBar(false))
+    }
+  }, [])
+
  return (
    <View style={[GenericStyles.fill, styles.container]}>
      <NavigationHeader
--- a/src/screens/allCases/index.tsx
+++ b/src/screens/allCases/index.tsx
@@ -24,7 +24,7 @@ import FullScreenLoaderWrapper from '@common/FullScreenLoaderWrapper';
 import DashboardIcon from '../../assets/icons/DashboardIcon';
 import DashBoardScreens from '../Dashboard/DashBoardScreens';
 import { isAgentDashboardVisible } from '@screens/Dashboard/utils';
-import { AppState, AppStateStatus, StyleSheet } from 'react-native';
+import { AppState, AppStateStatus, StyleSheet, View } from 'react-native';
 import { COLORS } from '@rn-ui-lib/colors';
 import DailyCommitmentIcon from '@rn-ui-lib/icons/DailyCommitmentIcon';
 import DailyCommitmentBottomSheet from '../dailyCommitment/DailyCommitmentBottomSheet';
@@ -32,9 +32,11 @@ import { getVisibilityStatus } from '@screens/dailyCommitment/actions';
 import { logError } from '@components/utlis/errorUtils';
 import FloatingBannerCta from '@common/FloatingBannerCta';
 import { AppStates } from '@interfaces/appStates';
+import ProfileStack from '@screens/Profile/ProfileStack';
+import { GenericStyles } from '@rn-ui-lib/styles';

 const AllCasesMain = () => {
-  const { pendingList, pinnedList, completedList, loading } = useAppSelector(
+  const { pendingList, pinnedList, completedList, loading, shouldHideTabBar } = useAppSelector(
    (state) => state.allCases
  );
  const userState = useAppSelector((state: RootState) => state.user);
@@ -157,18 +159,20 @@ const AllCasesMain = () => {

    bottomSheetScreens.push({
      name: BOTTOM_TAB_ROUTES.Profile,
-      component: () => (
-        <>
-          <Profile />
-          {shouldShowBanner ? <FloatingBannerCta
-            title={"Update your daily commitment"}
-            onPressHandler={openCommitmentScreen}
-            containerStyle={styles.container}
-            icon={<DailyCommitmentIcon />}
-            textStyle={styles.titleText}
-          /> : null}
-        </>
-      ),
+      component: () => {
+        return (
+          <>
+            <ProfileStack />
+            {shouldShowBanner && !shouldHideTabBar ? <FloatingBannerCta
+              title={"Update your daily commitment"}
+              onPressHandler={openCommitmentScreen}
+              containerStyle={styles.container}
+              icon={<DailyCommitmentIcon />}
+              textStyle={styles.titleText}
+            /> : null}
+          </>
+        )
+      },
      icon: ProfileIcon,
    });
    return bottomSheetScreens;
@@ -178,6 +182,7 @@ const AllCasesMain = () => {
    isTeamLead,
    showAgentDashboard,
    shouldShowBanner,
+    shouldHideTabBar
  ]);

  const onTabPressHandler = (e: any) => {
@@ -204,6 +209,7 @@ const AllCasesMain = () => {
        screens={HOME_SCREENS}
        initialRoute={isTeamLead ? BOTTOM_TAB_ROUTES.Cases : BOTTOM_TAB_ROUTES.VisitPlan}
        onTabPress={(e) => onTabPressHandler(e)}
+        shouldHideTabBar={shouldHideTabBar}
      />
      <CasesActionButtons />
      {!isCommitmentSubmitted && isCommitmentFormVisible && <DailyCommitmentBottomSheet
--- a/src/screens/auth/AuthRouter.tsx
+++ b/src/screens/auth/AuthRouter.tsx
@@ -129,9 +129,9 @@ function AuthRouter() {

  return isLoggedIn ? (
    <TrackingComponent>
-      <BlockerScreen>
+      {/* <BlockerScreen> */}
        <ProtectedRouter />
-      </BlockerScreen>
+      {/* </BlockerScreen> */}
    </TrackingComponent>
  ) : (
    <BlockerScreen>
--- a/src/screens/auth/ProtectedRouter.tsx
+++ b/src/screens/auth/ProtectedRouter.tsx
@@ -116,7 +116,7 @@ const ProtectedRouter = () => {
        }}
      />
      <Stack.Screen name={PageRouteEnum.TODO_LIST} component={TodoList} />
-      <Stack.Screen name={PageRouteEnum.COMPLETED_CASES} component={CompletedCase} />
+      {/* <Stack.Screen name={PageRouteEnum.COMPLETED_CASES} component={CompletedCase} /> */}
      <Stack.Screen name={PageRouteEnum.NOTIFICATIONS} component={Notifications} />
      <Stack.Screen name={PageRouteEnum.IMPERSONATED_LOGIN} component={ImpersonatedUser} />
      <Stack.Screen name={PageRouteEnum.AGENT_ID_CARD} component={AgentIdCard} />
--- a/src/screens/caseDetails/CaseDetailHeader.tsx
+++ b/src/screens/caseDetails/CaseDetailHeader.tsx
@@ -1,23 +1,73 @@
-import React from 'react';
+import React, { useState } from 'react';
 import NavigationHeader from '../../../RN-UI-LIB/src/components/NavigationHeader';
-import { goBack } from '../../components/utlis/navigationUtlis';
+import { goBack, navigateToScreen } from '../../components/utlis/navigationUtlis';
 import { CaseDetail } from './interface';
 import { View } from 'react-native';
 import NotificationMenu from '../../components/notificationMenu';
 import { GenericStyles } from '../../../RN-UI-LIB/src/styles';
+import Text from '@rn-ui-lib/components/Text';
+import Button from '@rn-ui-lib/components/Button';
+import BottomSheetWrapper from '@common/BottomSheetWrapper';
+import { Header } from 'react-native/Libraries/NewAppScreen';
+import Heading from '@rn-ui-lib/components/Heading';
+import IconButton from '@rn-ui-lib/components/IconButton';
+import CloseIcon from '@rn-ui-lib/icons/CloseIcon';
+import { CaseDetailStackEnum } from './CaseDetailStack';
+
+const HeaderNode = () => {
+  return (
+    <View
+      style={[
+        GenericStyles.ph16,
+        GenericStyles.pb16,
+      ]}
+    >
+      <Heading type='h3'>Tele support</Heading>
+    </View>
+  )
+}

 const CaseDetailHeader: React.FC<{ caseDetail: CaseDetail }> = (props) => {
+  const [openCSABottomSheet, setOpenCSABottomSheet] = useState(false);
+  const handleOpenCSABottomSheet = () => setOpenCSABottomSheet(prev => !prev);
+
+  const handleOpenCSATicket = () => {
+    navigateToScreen(CaseDetailStackEnum.RAISE_REQUEST, { caseDetail: props.caseDetail });
+    handleOpenCSABottomSheet();
+  }
+
+  const handleOpenRequestHistory = () => {
+    navigateToScreen(CaseDetailStackEnum.VIEW_RequestHistory, { caseDetail: props.caseDetail });
+    handleOpenCSABottomSheet();
+  }
  return (
    <View style={{ position: 'relative' }}>
      <NavigationHeader
        title={''}
        onBack={goBack}
        rightActionable={
-          <View style={GenericStyles.pr12}>
+          <View
+            style={[
+              GenericStyles.pr12,
+              GenericStyles.row,
+              GenericStyles.alignCenter
+            ]}>
+            <Button onPress={handleOpenCSABottomSheet} title='Open CSA' />
            <NotificationMenu />
          </View>
        }
      />
+      <BottomSheetWrapper
+        visible={openCSABottomSheet}
+        setVisible={handleOpenCSABottomSheet}
+        heightPercentage={30}
+        HeaderNode={HeaderNode}
+      >
+        <View style={GenericStyles.ph16}>
+          <Button onPress={handleOpenCSATicket} variant='primaryText' style={{ width: '100%' }} title='Request support' />
+          <Button onPress={handleOpenRequestHistory} variant='primaryText' style={{ width: '100%' }} title='View request history' />
+        </View>
+      </BottomSheetWrapper>
    </View>
  );
 };
--- a/src/screens/caseDetails/CaseDetailStack.tsx
+++ b/src/screens/caseDetails/CaseDetailStack.tsx
@@ -20,6 +20,9 @@ import { RootState } from '@store';
 import { _map } from '@rn-ui-lib/utils/common';
 import EmiSchedule from '@screens/emiSchedule';
 import AddNewNumber from '@screens/addNewNumber';
+import ViewRequestHistory from '@screens/cosmosSupport/ViewRequestHistory';
+import { RequestDetail } from '@screens/cosmosSupport';
+import RequestSupport from '@screens/cosmosSupport/RequestSupport';

 const Stack = createNativeStackNavigator();

@@ -37,6 +40,9 @@ export enum CaseDetailStackEnum {
  PAST_FEEDBACK_DETAIL = 'pastFeedbackDetail',
  EMI_SCHEDULE = 'EmiSchedule',
  ADD_NEW_NUMBER = 'AddNewNumber',
+  VIEW_RequestHistory = 'viewRequestHistory',
+  VIEW_REQUEST_DETAIL = 'viewRequestDetail',
+  RAISE_REQUEST = 'raiseRequest',
 }

 const CaseDetailStack = () => {
@@ -72,6 +78,15 @@ const CaseDetailStack = () => {
        name={CaseDetailStackEnum.PAST_FEEDBACK_DETAIL}
        component={FeedbackDetailContainer}
      />
+      <Stack.Screen
+        name={CaseDetailStackEnum.VIEW_RequestHistory}
+        component={ViewRequestHistory}
+      />
+      <Stack.Screen
+        name={CaseDetailStackEnum.VIEW_REQUEST_DETAIL}
+        component={RequestDetail}
+      />
+      <Stack.Screen name={CaseDetailStackEnum.RAISE_REQUEST} component={RequestSupport} />
      {_map(collectionTemplate?.widget, (key) => (
        <Stack.Screen
          key={getTemplateRoute(key, CaseAllocationType.COLLECTION_CASE)}
--- a/src/screens/cosmosSupport/CSAFilters.tsx
+++ b/src/screens/cosmosSupport/CSAFilters.tsx
@@ -0,0 +1,123 @@
+import { Pressable, StyleSheet, Text, TouchableHighlight, View } from 'react-native'
+import React, { useState } from 'react'
+import { GenericStyles, getShadowStyle } from '@rn-ui-lib/styles'
+import Button from '@rn-ui-lib/components/Button'
+import FilterIconOutline from '@assets/icons/FilterIconOutline'
+import BottomSheetWrapper from '@common/BottomSheetWrapper'
+import Heading from '@rn-ui-lib/components/Heading'
+import Options from '@rn-ui-lib/components/dropdown/Options'
+import CloseIconSmall from '@rn-ui-lib/icons/CloseIconSmall'
+import CrossIcon from '@assets/icons/CrossIcon'
+import { COLORS } from '@rn-ui-lib/colors'
+
+
+const HeaderNode = () => {
+    return (
+        <View
+            style={[
+                GenericStyles.ph16,
+                GenericStyles.pb16,
+            ]}
+        >
+            <Heading dark type='h3'>Filter by</Heading>
+        </View>
+    )
+}
+
+enum FilterOptions {
+    pending = 'pending',
+    done = 'done'
+}
+
+const CSAFilters = () => {
+    const [openFilterBottomSheet, setOpenFilterBottomSheet] = useState(false);
+    const [selectedFilter, setSelectedFilter] = useState<keyof typeof FilterOptions>();
+    const [viewUnread, setViewUnread] = useState(false);
+    const handleOpenFilterBottomSheet = () => setOpenFilterBottomSheet(prev => !prev);
+    const handleFilterSelection = (id: string) => {
+        setSelectedFilter(id as keyof typeof FilterOptions);
+        setOpenFilterBottomSheet(false);
+    }
+    const handleFilterClick = () => {
+        if (selectedFilter) {
+            setSelectedFilter(undefined);
+            return;
+        }
+        handleOpenFilterBottomSheet();
+    };
+
+    const handleViewUnread = () => setViewUnread(prev => !prev);
+
+    return (
+        <>
+            <View
+                style={[
+                    GenericStyles.p16,
+                    GenericStyles.row,
+                    GenericStyles.justifyContentSpaceBetween,
+                    { ...getShadowStyle(1) },
+                    GenericStyles.whiteBackground,
+                ]}
+            >
+                <Button
+                    variant="secondary"
+                    title="Filter by"
+                    style={styles.fleBasis48}
+                    onPress={handleFilterClick}
+                    buttonStyle={selectedFilter ? styles.selectedButtonStyle : {}}
+                    textStyle={selectedFilter ? styles.testStyle : {}}
+                    leftIcon={<FilterIconOutline fillColor={selectedFilter ? COLORS.TEXT.BLUE : undefined} style={GenericStyles.mr4} />}
+                    rightIcon={selectedFilter ? <CrossIcon style={GenericStyles.ml4} /> : null}
+                />
+                <Button
+                    variant="secondary"
+                    title="View unread"
+                    style={styles.fleBasis48}
+                    onPress={handleViewUnread}
+                    buttonStyle={viewUnread ? styles.selectedButtonStyle : {}}
+                    textStyle={viewUnread ? styles.testStyle : {}}
+                    leftIcon={<FilterIconOutline fillColor={viewUnread ? COLORS.TEXT.BLUE : undefined} style={GenericStyles.mr4} />}
+                    rightIcon={viewUnread ? <CrossIcon style={GenericStyles.ml4} /> : null}
+                />
+            </View>
+
+            <BottomSheetWrapper
+                visible={openFilterBottomSheet}
+                setVisible={handleOpenFilterBottomSheet}
+                heightPercentage={30}
+                HeaderNode={HeaderNode}
+            >
+                <Options
+                    handleSelection={handleFilterSelection}
+                    id={FilterOptions.pending}
+                    label="Pending"
+                    selectedValue={selectedFilter}
+                />
+                <Options
+                    handleSelection={handleFilterSelection}
+                    id={FilterOptions.done}
+                    selectedValue={selectedFilter}
+                    label="Done"
+                />
+
+            </BottomSheetWrapper>
+        </>
+    )
+}
+
+
+const styles = StyleSheet.create({
+    fleBasis48: {
+        flexBasis: '48%',
+    },
+    testStyle: {
+        color: COLORS.TEXT.BLUE
+    },
+    selectedButtonStyle: {
+        backgroundColor: COLORS.BACKGROUND.BLUE_LIGHT_3,
+        borderColor: COLORS.BORDER.LIGHT_BLUE,
+    }
+});
+
+export default CSAFilters;
+
--- a/src/screens/cosmosSupport/CustomerCard.tsx
+++ b/src/screens/cosmosSupport/CustomerCard.tsx
@@ -0,0 +1,114 @@
+import { Pressable, StyleSheet, View } from 'react-native'
+import React from 'react'
+import { GenericStyles } from '@rn-ui-lib/styles';
+import Heading from '@rn-ui-lib/components/Heading';
+import Text from '@rn-ui-lib/components/Text';
+import { formatAmount } from '@rn-ui-lib/utils/amount';
+import Tag, { TagVariant } from '@rn-ui-lib/components/Tag';
+import SuspenseLoader from '@rn-ui-lib/components/suspense_loader/SuspenseLoader';
+import LineLoader from '@rn-ui-lib/components/suspense_loader/LineLoader';
+import ChevronDown from '@assets/icons/ChevronDown';
+
+interface ICustomerCard {
+  customerName: string;
+  Dpd: string;
+  Pos: number;
+  status: string;
+  isRefreshing: boolean;
+  isEditable?: boolean;
+};
+
+const CustomerCard: React.FC<ICustomerCard> = (props) => {
+  const { customerName, Dpd, Pos, status, isRefreshing, isEditable } = props;
+  const Component = isEditable ?  Pressable: View ;
+  return (
+    <View style={[
+      GenericStyles.silverBackground,
+      GenericStyles.p16,
+      GenericStyles.br8
+    ]}>
+      <SuspenseLoader fallBack={<LineLoader height={26} width={150} />} loading={isRefreshing}>
+        <Heading type='h4' numberOfLines={1}>
+          {customerName}
+        </Heading>
+      </SuspenseLoader>
+      <View
+        style={[
+        ]}
+      >
+        <View
+          style={[
+            GenericStyles.row,
+            GenericStyles.spaceBetween,
+            GenericStyles.mt16
+          ]}
+        >
+          <Text
+            dark
+            style={styles.flexBasis30}
+          >
+            <SuspenseLoader fallBack={<LineLoader height={20} width={50} />} loading={isRefreshing}>
+              {Dpd}
+            </SuspenseLoader>
+          </Text>
+          <Text
+            dark
+            style={styles.flexBasis30}
+          >
+            <SuspenseLoader fallBack={<LineLoader height={20} width={50} />} loading={isRefreshing}>
+              {formatAmount(Pos)}
+            </SuspenseLoader>
+          </Text>
+          <Component
+            onPress={() => {
+              alert('Pressed');
+             }}
+            style={[
+              styles.flexBasis30,
+              GenericStyles.row
+            ]}
+          >
+            <SuspenseLoader fallBack={<LineLoader height={18} width={50} />} loading={isRefreshing}>
+              <Tag
+                text={status}
+                variant={TagVariant.success}
+              />
+              <ChevronDown />
+            </SuspenseLoader>
+          </Component>
+        </View>
+        <View
+          style={[
+            GenericStyles.row,
+            GenericStyles.spaceBetween,
+            GenericStyles.mt16
+          ]}>
+          <Text
+            style={styles.flexBasis30}
+          >
+            DPD
+          </Text>
+          <Text
+            style={styles.flexBasis30}
+          >
+            POS
+          </Text>
+          <Text
+            style={styles.flexBasis30}
+          >
+            Status
+          </Text>
+        </View>
+      </View>
+    </View>
+  )
+}
+
+
+const styles = StyleSheet.create({
+  flexBasis30: {
+    flexBasis: '30%'
+  }
+});
+
+export default CustomerCard;
--- a/src/screens/cosmosSupport/ListItem.tsx
+++ b/src/screens/cosmosSupport/ListItem.tsx
@@ -0,0 +1,96 @@
+import { navigateToScreen } from '@components/utlis/navigationUtlis'
+import { COLORS } from '@rn-ui-lib/colors'
+import Tag, { TagVariant } from '@rn-ui-lib/components/Tag'
+import Text from '@rn-ui-lib/components/Text'
+import ArrowRightOutlineIcon from '@rn-ui-lib/icons/ArrowRightOutlineIcon'
+import { GenericStyles } from '@rn-ui-lib/styles'
+import { CaseDetailStackEnum } from '@screens/caseDetails/CaseDetailStack'
+import React from 'react'
+import { Pressable, StyleSheet, TouchableHighlight, View } from 'react-native'
+import RelativeTime from './RelativeTime'
+import { ProfileScreenStackEnum } from '@screens/Profile/ProfileStack'
+
+const ListItem = (props: any) => {
+    const { form, route } = props;
+    return (
+        <TouchableHighlight
+            underlayColor={COLORS.BACKGROUND.BLUE}
+            onPress={() => navigateToScreen(form === "profile" ? ProfileScreenStackEnum.PROFILE_TICKET_DETAIL : CaseDetailStackEnum.VIEW_REQUEST_DETAIL, props)}
+            style={[
+                GenericStyles.p16,
+                GenericStyles.row,
+                GenericStyles.justifyContentSpaceBetween,
+                GenericStyles.alignCenter,
+                styles.lineItem
+            ]}
+        >
+            <>
+                <View
+                    style={styles.flexBasis}
+                >
+                    <Text small style={styles.updateStyle} >1 update</Text>
+                    <View
+                        style={[
+                            GenericStyles.row,
+                            GenericStyles.alignCenter,
+                        ]}
+                    >
+                        <View
+                            style={[
+                                GenericStyles.row,
+                                GenericStyles.alignCenter
+                            ]}
+                        >
+                            <View
+                                style={[
+                                    styles.dot,
+                                    GenericStyles.mr10
+                                ]}
+                            />
+                            <Text dark small>Visit</Text>
+
+                        </View>
+                        <Tag style={[GenericStyles.ml10]} variant={TagVariant.success} text='Done' />
+                    </View>
+                    <RelativeTime prefix='Requested' date={'Thu Feb 29 2024 15:31:24 GMT+0530'} />
+                </View>
+                {form === "profile" ? null : <ArrowRightOutlineIcon fillColor={COLORS.BASE.BLUE} />}
+            </>
+        </TouchableHighlight>
+    )
+}
+
+const styles = StyleSheet.create({
+    flexBasis: {
+        flexBasis: '95%'
+    },
+    updateStyle: {
+        lineHeight: 18,
+        fontWeight: "500",
+        color: "#518CFF"
+    },
+    type: {
+        lineHeight: 16,
+        fontWeight: "500",
+    },
+    requestedON: {
+        lineHeight: 20,
+        fontWeight: "400",
+        fontSize: 13,
+        color: COLORS.BORDER.SECONDARY
+    },
+    dot: {
+        height: 4,
+        width: 4,
+        borderRadius: 2,
+        backgroundColor: COLORS.BASE.BLUE,
+    },
+    lineItem: {
+        borderBottomWidth: 1,
+        borderBottomColor: COLORS.BORDER.GREY,
+        paddingBottom: 16,
+        paddingTop: 16
+    }
+})
+
+export default ListItem
--- a/src/screens/cosmosSupport/ListItemLoading.tsx
+++ b/src/screens/cosmosSupport/ListItemLoading.tsx
@@ -0,0 +1,26 @@
+import { StyleSheet, Text, View } from 'react-native'
+import React from 'react'
+import { GenericStyles } from '@rn-ui-lib/styles';
+import LineLoader from '@rn-ui-lib/components/suspense_loader/LineLoader';
+import ArrowRightOutlineIcon from '@rn-ui-lib/icons/ArrowRightOutlineIcon';
+import { COLORS } from '@rn-ui-lib/colors';
+
+const ListItemLoading = () => (
+    <View
+      style={[
+        GenericStyles.p16,
+        GenericStyles.row,
+        GenericStyles.justifyContentSpaceBetween,
+        GenericStyles.alignCenter
+      ]}
+    >
+      <View>
+        <LineLoader height={10} width={50} />
+        <LineLoader style={[GenericStyles.mt12]} height={10} width={100} />
+        <LineLoader style={[GenericStyles.mt12]} height={10} width={200} />
+      </View>
+      <ArrowRightOutlineIcon fillColor={COLORS.BASE.BLUE} />
+    </View>
+  );
+
+export default ListItemLoading
--- a/src/screens/cosmosSupport/RelativeTime.tsx
+++ b/src/screens/cosmosSupport/RelativeTime.tsx
@@ -0,0 +1,109 @@
+import Text from '@rn-ui-lib/components/Text';
+import { BUSINESS_DATE_FORMAT, dateFormat } from '@rn-ui-lib/utils/dates';
+import React, { useEffect, useState } from 'react';
+
+type DATE = string | number | Date;
+
+interface RelativeTimeProps {
+  date: DATE,
+  prefix: string
+}
+
+const coveters = {
+  convertInMinutes: 1000 * 60,
+  convertInHours: 1000 * 60 * 60
+}
+
+
+
+const formatRelativeTime = (value: DATE, unit: string, prefix: string): string => {
+
+  const now = new Date();
+  const timeDifference = now.getTime() - new Date(value).getTime();
+  const minutesDifference = Math.round(timeDifference / coveters.convertInMinutes);
+  const hoursDifference = Math.round(timeDifference / coveters.convertInHours);
+  const units: Record<string, [string, string]> = {
+    minute: ['minute', 'minutes'],
+    hour: ['hour', 'hours'],
+    day: ['day', 'days']
+  };
+  const unitStrings = units[unit];
+
+  if (!unitStrings) {
+    throw new Error(`Unsupported unit: ${unit}`);
+  }
+
+  const [singular, plural] = unitStrings;
+
+  if (unit === 'minute') {
+    if (minutesDifference < 60) {
+      return minutesDifference > 0 ? `${prefix} ${minutesDifference} ${singular} ago` : ` Requested ${-minutesDifference} ${plural} ago`;
+    } else {
+      return minutesDifference > 0 ? `${prefix} ${minutesDifference} ${plural} ago` : ` Requested ${-minutesDifference} ${plural} ago`;
+    }
+  }
+
+  if (unit === 'hour') {
+    if (hoursDifference < 24) {
+      return hoursDifference > 0 ? `${prefix} ${hoursDifference} ${singular} ago` : ` Requested ${-hoursDifference} ${singular} ago`;
+    } else {
+      return hoursDifference > 0 ? `${prefix} ${hoursDifference} ${plural} ago` : ` Requested ${-hoursDifference} ${plural} ago`;
+    }
+  }
+
+
+  return `${prefix} ${dateFormat(new Date(value), BUSINESS_DATE_FORMAT)}`
+
+};
+
+const getPollingInterval = (timeDifference: string | number | Date): number => {
+  const diff = new Date().getTime() - new Date(timeDifference).getTime();
+  const minutesDifference = Math.round(diff / coveters.convertInMinutes);
+  const hoursDifference = Math.round(diff / coveters.convertInHours);
+  if (minutesDifference < 60) {
+    return 60* 1000; // Poll every min if within a minute
+  } else if (hoursDifference < 60 * 60) {
+    return 60000; // Poll every minute if within an hour
+  } else {
+    return 0; // Don't poll if more than 24 hours
+  }
+};
+
+const RelativeTime: React.FC<RelativeTimeProps> = ({ date, prefix }) => {
+  const [formattedDate, setFormattedDate] = useState<string | null>(null);
+  useEffect(() => {
+    let intervalId: number;
+
+    const updateRelativeTime = () => {
+      const now = new Date();
+      const timeDifference = now.getTime() - new Date(date).getTime();
+      const pollingInterval = getPollingInterval(date);
+      if (pollingInterval === 0) {
+        clearInterval(intervalId);
+        setFormattedDate(formatRelativeTime(date, 'day', prefix));
+      } else {
+        const minutesDifference = Math.round(timeDifference / coveters.convertInMinutes);
+        const hoursDifference = Math.round(timeDifference / coveters.convertInHours);
+        if (minutesDifference < 60) {
+          setFormattedDate(formatRelativeTime(date, 'minute', prefix));
+        } else if (hoursDifference < 24) {
+          setFormattedDate(formatRelativeTime(date, 'hour', prefix));
+        } else {
+          setFormattedDate(formatRelativeTime(date, 'day', prefix));
+        }
+      }
+    };
+
+    updateRelativeTime();
+
+    if (getPollingInterval(date) > 0) {
+      intervalId = setInterval(updateRelativeTime, getPollingInterval(date));
+    }
+
+    return () => clearInterval(intervalId);
+  }, [date, prefix]);
+
+  return <Text>{formattedDate}</Text>;
+};
+
+export default RelativeTime;
--- a/src/screens/cosmosSupport/RenderCommentsTimeline.tsx
+++ b/src/screens/cosmosSupport/RenderCommentsTimeline.tsx
@@ -0,0 +1,121 @@
+import { StyleSheet, View } from 'react-native'
+import React from 'react'
+import Avatar from '@rn-ui-lib/components/Avatar';
+import { COLORS } from '@rn-ui-lib/colors';
+import { GenericStyles } from '@rn-ui-lib/styles';
+import Text from '@rn-ui-lib/components/Text';
+import { RelativeTime } from './';
+import SuspenseLoader from '@rn-ui-lib/components/suspense_loader/SuspenseLoader';
+import LineLoader from '@rn-ui-lib/components/suspense_loader/LineLoader';
+
+interface IRenderCommentsTimeline {
+    comments: Array<ICardComponent>;
+    isRefreshing: boolean;
+};
+
+interface ICardComponent {
+    name: string;
+    time: string;
+    comment: string;
+}
+
+const RenderCommentsTimeline: React.FC<IRenderCommentsTimeline> = (props) => {
+    const { comments, isRefreshing } = props;
+    
+    const fallback = isRefreshing ? [...Array(5)] : comments;
+
+    return (
+        <>
+            {fallback.map((comment, index) => {
+                return (
+                    <CardComponent
+                        key={index}
+                        name={comment?.name}
+                        time={comment?.time}
+                        comment={comment?.comment}
+                    />
+                )
+            })}
+        </>
+    )
+}
+
+
+const CardComponent: React.FC<ICardComponent> = (props) => {
+    const { name, time, comment } = props;
+    return (
+        <View
+            style={[GenericStyles.mt32, GenericStyles.row]}
+        >
+            <SuspenseLoader
+                loading={!name}
+                fallBack={<LineLoader height={40} width={40} style={styles.imageFallBack} />}
+            >
+                <Avatar
+                    loading
+                    dataURI=''
+                    size={40}
+                    name={name}
+                    style={styles.avatarStyle}
+                    textStyle={styles.avatarText}
+                />
+            </SuspenseLoader>
+            <View>
+                <View style={[GenericStyles.row, GenericStyles.alignCenter, GenericStyles.ml4]}>
+                    <SuspenseLoader
+                        loading={!name}
+                        fallBack={<LineLoader height={14} width={100} />}
+                    >
+                        <Text>
+                            {name}
+                        </Text>
+                    </SuspenseLoader>
+                    <View style={styles.dot} />
+                    <SuspenseLoader
+                        loading={!time}
+                        fallBack={<LineLoader height={14} width={150} />}
+                    >
+                        <RelativeTime prefix='' date={time} />
+                    </SuspenseLoader>
+                </View>
+                <SuspenseLoader
+                    loading={!comment}
+                    fallBack={
+                        <View style={[GenericStyles.mt6, GenericStyles.ml4]}>
+                            <LineLoader height={14} width={"100%"} />
+                            <LineLoader style={GenericStyles.mt4} height={14} width={"100%"} />
+                        </View>
+                    }
+                >
+                    <Text selectable style={[GenericStyles.ml4]}>
+                        {comment}
+                    </Text>
+                </SuspenseLoader>
+            </View>
+        </View>
+    )
+}
+
+const styles = StyleSheet.create({
+    avatarText: {
+        color: COLORS.TEXT.WHITE,
+        fontSize: 13,
+        fontWeight: '500'
+    },
+    avatarStyle: {
+        backgroundColor: COLORS.BASE.BLUE,
+        borderColor: COLORS.BASE.BLUE,
+    },
+    dot: {
+        height: 4,
+        width: 4,
+        borderRadius: 2,
+        backgroundColor: COLORS.BORDER.SECONDARY,
+        marginHorizontal: 4
+    },
+    imageFallBack: {
+        borderRadius: 20
+    }
+});
+
+export default RenderCommentsTimeline
--- a/src/screens/cosmosSupport/RequestDetail.tsx
+++ b/src/screens/cosmosSupport/RequestDetail.tsx
@@ -0,0 +1,115 @@
+import { goBack } from '@components/utlis/navigationUtlis';
+import { COLORS } from '@rn-ui-lib/colors';
+import Heading from '@rn-ui-lib/components/Heading';
+import NavigationHeader from '@rn-ui-lib/components/NavigationHeader';
+import { GenericStyles } from '@rn-ui-lib/styles';
+import React, { useState } from 'react';
+import { RefreshControl, ScrollView, StyleSheet, View } from 'react-native';
+import CustomerCard from './CustomerCard';
+import RenderCommentsTimeline from './RenderCommentsTimeline';
+import TextFieldWithInput from './TextFieldWithInput';
+
+
+
+
+
+interface IRequestDetail {
+    route: {
+        params: {
+            caseDetail: {
+                customerName: string;
+                loanAccountNumber: number;
+            };
+        };
+    };
+
+}
+
+const RequestDetail: React.FC<IRequestDetail> = (props) => {
+
+    const [isRefreshing, setRefreshing] = useState(false);
+    const scrollViewRef = React.useRef<ScrollView>(null);
+    const onRefresh = () => {
+        // Simulate a refresh process
+        setRefreshing(true);
+        setTimeout(() => {
+            setRefreshing(false);
+        }, 2000);
+    };
+
+    const handleBackPress = () => {
+        goBack();
+    };
+
+
+
+
+
+
+    return (
+        <View style={[GenericStyles.fill, GenericStyles.whiteBackground]}>
+            <NavigationHeader
+                title={'Request Detail'}
+                subTitle='For Aman Kumar Singh'
+                onBack={handleBackPress}
+                subTitleStyle={styles.navigationContainerSubtitle}
+                titleStyle={styles.navigationContainerTitle}
+                containerStyle={styles.navigationContainerStyle}
+            />
+            <ScrollView
+                ref={scrollViewRef}
+                contentContainerStyle={GenericStyles.p16}
+                refreshControl={
+                    <RefreshControl
+
+                        refreshing={isRefreshing}
+                        onRefresh={onRefresh}
+                        colors={[COLORS.BASE.BLUE]} // Adjust the color as needed
+                    />
+                }
+            >
+                <CustomerCard
+                    Dpd='30'
+                    Pos={150000}
+                    customerName='Aman Kumar Singh'
+                    status='Active'
+                    key={"randomValue"} //todo
+                    isRefreshing={isRefreshing}
+                    isEditable
+                />
+                <Heading dark type='h4' style={GenericStyles.mt16}>Activity</Heading>
+                
+                <TextFieldWithInput />
+
+                <RenderCommentsTimeline 
+                    comments={[]}
+                    isRefreshing={isRefreshing}
+                />
+                
+            </ScrollView>
+        </View>
+    )
+}
+
+
+const styles = StyleSheet.create({
+    navigationContainerStyle: {
+        paddingVertical: 9
+    },
+    navigationContainerSubtitle: {
+        marginTop: 0
+    },
+    navigationContainerTitle: {
+        fontWeight: '500',
+        lineHeight: 20
+    },
+    callingType: {
+        fontSize: 14,
+        fontWeight: '400',
+        lineHeight: 20,
+        letterSpacing: -.175
+    },
+
+});
+
+export default RequestDetail
--- a/src/screens/cosmosSupport/RequestSupport.tsx
+++ b/src/screens/cosmosSupport/RequestSupport.tsx
@@ -0,0 +1,148 @@
+import { SafeAreaView, ScrollView, StyleSheet, View } from 'react-native'
+import React from 'react'
+import { GenericStyles } from '@rn-ui-lib/styles';
+import NavigationHeader from '@rn-ui-lib/components/NavigationHeader';
+import { goBack } from '@components/utlis/navigationUtlis';
+import Text from '@rn-ui-lib/components/Text';
+import Tag, { TagVariant } from '@rn-ui-lib/components/Tag';
+import Chip from '@screens/caseDetails/Chip';
+import { Controller, useForm } from 'react-hook-form';
+import TextInput from '@rn-ui-lib/components/TextInput';
+import Button from '@rn-ui-lib/components/Button';
+import PressableChip from '@rn-ui-lib/components/PressableChip';
+
+const supportTypes = [
+    {
+        label: "Soft calling",
+        value: "soft_calling"
+    },
+    {
+        label: "Hard calling",
+        value: "hard_calling"
+    },
+    {
+        label: "PTP follow up",
+        value: "ptp_follow_up"
+    },
+    {
+        label: "Skip Tracing",
+        value: "skip_tracing"
+    }
+];
+
+const RequestSupport = () => {
+
+    const {
+        control,
+        handleSubmit,
+        formState: { errors },
+        watch
+    } = useForm({});
+
+
+    const watchRequestType = watch('requestType');
+
+
+
+    const handleSubmitForm = (data: any) => {
+        console.log('data', data);
+    }
+
+    const handleBackPress = () => {
+        goBack();
+    };
+    return (
+        <SafeAreaView
+            style={[GenericStyles.fill, GenericStyles.whiteBackground]}
+        >
+            <NavigationHeader
+                title={'Request Support'}
+                subTitle='For Aman Kumar Singh'
+                onBack={handleBackPress}
+                subTitleStyle={styles.navigationContainerSubtitle}
+                titleStyle={styles.navigationContainerTitle}
+                containerStyle={styles.navigationContainerStyle}
+            />
+
+            <ScrollView contentContainerStyle={GenericStyles.p16}>
+                <View
+                    style={GenericStyles.fill}
+                >
+                    <Text>Select request type</Text>
+                    <View style={[GenericStyles.row, GenericStyles.flexWrap]}>
+                        {supportTypes.map((type, index) => (
+                            <Controller
+                                key={type.value}
+                                control={control}
+                                name='requestType'
+                                rules={{ required: true }}
+                                render={({ field: { onChange, value } }) => (
+                                    <PressableChip
+                                        key={index}
+                                        label={type.label}
+                                        onSelectionChange={(meta, data) => onChange(data)}
+                                        checked={value === type.value}
+                                        meta={type.value}
+                                    />
+                                )}
+                            />
+                        ))}
+                    </View>
+
+                    <Controller
+                        control={control}
+                        name='requestDescription'
+                        rules={{ required: false }}
+                        render={({ field: { onChange } }) => (
+                            <TextInput
+                                title='Comments (optional)'
+                                numberOfLines={5}
+                                style={styles.textInput}
+                                containerStyle={GenericStyles.mt32}
+                                multiline={true}
+                                placeholder='Enter comments...'
+                                onChangeText={onChange}
+                            // Adjust other TextInput props as needed
+                            />
+                        )}
+                    />
+                </View>
+            </ScrollView>
+            <View
+                style={GenericStyles.p16}
+            >
+                <Button
+                    title='Submit'
+                    style={[GenericStyles.mt16, GenericStyles.w100]}
+                    onPress={handleSubmit(handleSubmitForm)}
+                    disabled={!watchRequestType}
+                />
+            </View>
+        </SafeAreaView>
+    )
+}
+
+
+const styles = StyleSheet.create({
+    navigationContainerStyle: {
+        paddingVertical: 9
+    },
+    navigationContainerSubtitle: {
+        marginTop: 0
+    },
+    navigationContainerTitle: {
+        fontWeight: '500',
+        lineHeight: 20
+    },
+    tagContainer: {
+        borderRadius: 40,
+        padding: 4
+    },
+    textInput: {
+        textAlignVertical: 'top',
+        maxHeight: 100,
+    },
+});
+
+
+export default RequestSupport
--- a/src/screens/cosmosSupport/TagComponent.tsx
+++ b/src/screens/cosmosSupport/TagComponent.tsx
@@ -0,0 +1,41 @@
+import { StyleSheet, Text, View } from 'react-native'
+import React from 'react'
+import Tag, { TagVariant } from '@rn-ui-lib/components/Tag'
+import { COLORS } from '@rn-ui-lib/colors';
+import { GenericStyles } from '@rn-ui-lib/styles';
+
+interface ITagComponent {
+    text: string;
+}
+
+const TagComponent: React.FC<ITagComponent> = (props) => {
+    const { text } = props;
+    return (
+        <View style={[GenericStyles.relative, styles.container]}>
+            <Tag
+                variant={TagVariant.yellow}
+                text={text}
+            />
+            <View style={styles.dot} />
+        </View>
+    )
+}
+
+
+const styles = StyleSheet.create({
+    dot: {
+        width: 8,
+        height: 8,
+        borderRadius: 5,
+        backgroundColor: COLORS.BASE.BLUE,
+        position: 'absolute',
+        top: -2,
+        right: 0
+    },
+    container: {
+        position: 'absolute',
+        right: -50
+    }
+})
+
+export default TagComponent;
--- a/src/screens/cosmosSupport/TaskForMe.tsx
+++ b/src/screens/cosmosSupport/TaskForMe.tsx
@@ -0,0 +1,80 @@
+import { COLORS } from '@rn-ui-lib/colors';
+import { GenericStyles } from '@rn-ui-lib/styles';
+import React, { useEffect, useState } from 'react';
+import { ListRenderItemInfo, RefreshControl, View, VirtualizedList } from 'react-native';
+import { ListItemLoading } from './';
+import CSAFilters from './CSAFilters';
+import ListItem from './ListItem';
+import { SCREEN_MAP } from './constant';
+
+// Define the item type
+interface ListItem {
+  id: string;
+  text: string;
+}
+
+const data: ListItem[] = Array.from({ length: 10 }, (_, index) => ({
+  id: index.toString(),
+  text: `Item ${index + 1}`,
+}));
+
+interface ITaskForMe {
+  route: {
+    key: keyof typeof SCREEN_MAP,
+    title: string
+  }
+  from?: string;
+}
+
+
+
+// Define the component type
+const TaskForMe: React.FC<ITaskForMe> = (props) => {
+  const { from, route } = props;
+  const [isRefreshing, setRefreshing] = useState(false);
+  const onRefresh = () => {
+    // Simulate a refresh process
+    setRefreshing(true);
+    setTimeout(() => {
+      setRefreshing(false);
+    }, 2000);
+  };
+
+  useEffect(() => {
+    // todo api call 
+    console.log("route changed", props?.route?.key)
+  }, [route?.key])
+
+
+  const renderItemLoadingState = () => <ListItemLoading />;
+  const renderItem = (props:ListRenderItemInfo<any>) => <ListItem form ={from}  {...props} />;
+  const getItemCount = () => data.length;
+  const getItem = (data: ListItem[], index: number) => data[index];
+
+  return (
+    <View style={GenericStyles.fill}>
+      <CSAFilters />
+      <VirtualizedList
+        style={GenericStyles.whiteBackground}
+        data={isRefreshing ? data : data}
+        keyExtractor={(item) => item.id}
+        renderItem={isRefreshing ? renderItemLoadingState : renderItem}
+        getItemCount={getItemCount}
+        getItem={getItem}
+        initialNumToRender={5} // Adjust as needed
+        maxToRenderPerBatch={10} // Adjust as needed
+        windowSize={10} // Adjust as needed
+        refreshControl={
+          <RefreshControl
+            refreshing={isRefreshing}
+            onRefresh={onRefresh}
+            colors={[COLORS.BASE.BLUE]} // Adjust the color as needed
+          />
+        }
+      />
+    </View>
+  );
+};
+
+
+export default TaskForMe;
--- a/src/screens/cosmosSupport/TeleSupport.tsx
+++ b/src/screens/cosmosSupport/TeleSupport.tsx
@@ -0,0 +1,15 @@
+import { StyleSheet, Text, View } from 'react-native'
+import React from 'react'
+
+const TeleSupport = () => {
+  return (
+    <View>
+      <Text>TeleSupport</Text>
+    </View>
+  )
+}
+
+
+const styles = StyleSheet.create({})
+
+export default TeleSupport;
--- a/src/screens/cosmosSupport/TextFieldWithInput.tsx
+++ b/src/screens/cosmosSupport/TextFieldWithInput.tsx
@@ -0,0 +1,51 @@
+import { Pressable, StyleSheet, Text, View } from 'react-native'
+import React from 'react'
+import { GenericStyles } from '@rn-ui-lib/styles';
+import TextInput from '@rn-ui-lib/components/TextInput';
+import { COLORS } from '@rn-ui-lib/colors';
+import SendIcon from '@assets/icons/SendIcon';
+
+const TextFieldWithInput = () => {
+    return (
+        <View style={[
+            GenericStyles.mt16,
+            GenericStyles.relative
+        ]}>
+            <TextInput
+                numberOfLines={5}
+                style={styles.textInput}
+                multiline={true}
+                placeholder='Leave a comment...'
+            // Adjust other TextInput props as needed
+            />
+            <Pressable
+                style={styles.buttonStyle}
+                onPress={() => alert('Request')}
+            >
+                <SendIcon />
+            </Pressable>
+        </View>
+    )
+}
+
+
+const styles = StyleSheet.create({
+    textInput: {
+        textAlignVertical: 'top',
+        maxHeight: 100,
+    },
+    buttonStyle: {
+        position: 'absolute',
+        bottom: 5,
+        right: 5,
+        height: 30,
+        width: 30,
+        backgroundColor: COLORS.BASE.BLUE,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: "center",
+        borderRadius: 4,
+    }
+});
+
+export default TextFieldWithInput;
--- a/src/screens/cosmosSupport/ViewRequestHistory.tsx
+++ b/src/screens/cosmosSupport/ViewRequestHistory.tsx
@@ -0,0 +1,170 @@
+import React, { useEffect } from 'react';
+import {
+  SafeAreaView,
+  StyleSheet,
+  View,
+  useWindowDimensions
+} from 'react-native';
+
+import { goBack } from '@components/utlis/navigationUtlis';
+import { useAppDispatch } from '@hooks';
+import { setShouldHideTabBar } from '@reducers/allCasesSlice';
+import { COLORS } from '@rn-ui-lib/colors';
+import NavigationHeader from '@rn-ui-lib/components/NavigationHeader';
+import Text from '@rn-ui-lib/components/Text';
+import { GenericStyles } from '@rn-ui-lib/styles';
+import { TabBar, TabView } from 'react-native-tab-view';
+import { TaskForMe } from './';
+import TagComponent from './TagComponent';
+import { SCREEN_MAP } from './constant';
+
+
+
+// const renderScene = SceneMap({
+//   [SCREEN_MAP.TASK_FOR_ME]: TaskForMe,
+//   [SCREEN_MAP.TELE_SUPPORT]: TaskForMe,
+// });
+
+
+type SCENE = keyof typeof SCREEN_MAP
+
+
+enum From {
+  PROFILE = 'profile',
+  CASE_DETAIL = 'caseDetail'
+}
+
+
+interface IViewRequestHistory {
+  route: {
+    params: {
+      caseDetail: {
+        customerName: string;
+        loanAccountNumber: number;
+      };
+      from?: From;
+    };
+  };
+}
+
+
+const ViewRequestHistory = (props: IViewRequestHistory) => {
+  const { from, caseDetail } = props?.route?.params;
+  const layout = useWindowDimensions();
+  const [index, setIndex] = React.useState(0);
+  const dispatch = useAppDispatch();
+  const [routes] = React.useState([
+    { key: SCREEN_MAP.TASK_FOR_ME, title: 'Tasks for me' },
+    { key: SCREEN_MAP.TELE_SUPPORT, title: 'Tele support' },
+  ]);
+
+  const hasUpdates = (scene: SCENE) => {
+    // Add your logic to determine if there are updates
+    // For example, check a state or fetch data from somewhere
+    return true; // Replace this with your actual logic
+  };
+
+
+  // todo fix the count logic
+  const number = Math.floor(Math.random() * 1000 % 10);
+
+  const renderScene = ({ route }: { route: { key: string } }) => {
+    switch (route.key) {
+      case SCREEN_MAP.TASK_FOR_ME:
+        return (
+          <TaskForMe
+            route={{
+              key: SCREEN_MAP.TASK_FOR_ME as SCENE,
+              title: "Task for me"
+            }}
+            from={from}
+          />
+        );
+      case SCREEN_MAP.TELE_SUPPORT:
+        return (
+          <TaskForMe
+            route={{
+              key: SCREEN_MAP.TELE_SUPPORT as SCENE,
+              title: "Tele support"
+            }}
+            from={from}
+          />
+        );
+      default:
+        return null;
+    }
+  };
+
+
+
+  useEffect(() => {
+    dispatch(setShouldHideTabBar(true))
+    return () => {
+      dispatch(setShouldHideTabBar(false))
+    }
+  }, [])
+  
+
+  return (
+    <SafeAreaView style={GenericStyles.fill}>
+      <NavigationHeader
+        onBack={goBack}
+        title={from === From.PROFILE ? 'All Request' : `Request History`}
+        subTitle={from === From.PROFILE ? undefined : `For ${props?.route?.params?.caseDetail?.customerName}`}
+        subTitleStyle={styles.navigationContainerSubtitle}
+        titleStyle={styles.navigationContainerTitle}
+        containerStyle={styles.navigationContainerStyle}
+      />
+      <TabView
+        lazy
+        navigationState={{ index, routes }}
+        renderScene={renderScene}
+        onIndexChange={setIndex}
+        initialLayout={{ width: layout.width }}
+        renderTabBar={(props) => <TabBar
+          renderLabel={({ route, color }) => (
+            <View
+              style={[
+                GenericStyles.row,
+                GenericStyles.alignCenter
+              ]}
+            >
+              <Text style={{ color, marginRight: 10 }}>
+                {route.title}
+              </Text>
+              {hasUpdates(route.key as SCENE) && <TagComponent text={`${number} new`} />}
+            </View>
+          )}
+          labelStyle={styles.labelStyle}
+          indicatorStyle={styles.indicatorStyle}
+          inactiveColor={COLORS.TEXT.LIGHT}
+          activeColor={COLORS.TEXT.BLUE}
+          style={GenericStyles.whiteBackground}
+          {...props}
+        />
+        }
+      />
+    </SafeAreaView>
+  );
+};
+
+export default ViewRequestHistory;
+
+const styles = StyleSheet.create({
+  labelStyle: {
+    textTransform: 'none'
+  },
+  indicatorStyle: {
+    backgroundColor: COLORS.BASE.BLUE
+  },
+  navigationContainerStyle: {
+    paddingVertical: 9
+  },
+  navigationContainerSubtitle: {
+    marginTop: 0
+  },
+  navigationContainerTitle: {
+    fontWeight: '500',
+    lineHeight: 20
+  }
+});
--- a/src/screens/cosmosSupport/constant/index.ts
+++ b/src/screens/cosmosSupport/constant/index.ts
@@ -0,0 +1,4 @@
+export const SCREEN_MAP = {
+    TELE_SUPPORT : 'TELE_SUPPORT',
+    TASK_FOR_ME : 'TASK_FOR_ME'
+};
--- a/src/screens/cosmosSupport/index.ts
+++ b/src/screens/cosmosSupport/index.ts
@@ -0,0 +1,20 @@
+import ViewRequestHistory from "./ViewRequestHistory";
+import TaskForMe from "./TaskForMe";
+import TeleSupport from "./TeleSupport";
+import ListItemLoading from "./ListItemLoading";
+import RequestDetail from "./RequestDetail";
+import CustomerCard from "./CustomerCard";
+import TextFieldWithInput from "./TextFieldWithInput";
+import RelativeTime from "./RelativeTime";
+
+
+export {
+    ViewRequestHistory,
+    TaskForMe,
+    TeleSupport,
+    ListItemLoading,
+    RequestDetail,
+    CustomerCard,
+    TextFieldWithInput,
+    RelativeTime
+}
--- a/yarn.lock
+++ b/yarn.lock
@@ -24,6 +24,14 @@
  dependencies:
    "@babel/highlight" "^7.18.6"

+"@babel/code-frame@^7.23.5":
+  version "7.23.5"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.23.5.tgz#9009b69a8c602293476ad598ff53e4562e15c244"
+  integrity sha512-CgH3s1a96LipHCmSUmYFPwY7MNx8C3avkq7i4Wl3cfa662ldtUe4VM1TPXX70pfmrlWTb6jLqTYrZyT2ZTJBgA==
+  dependencies:
+    "@babel/highlight" "^7.23.4"
+    chalk "^2.4.2"
+
 "@babel/code-frame@~7.10.4":
  version "7.10.4"
  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.10.4.tgz#168da1a36e90da68ae8d49c0f1b48c7c6249213a"
@@ -114,6 +122,13 @@
  dependencies:
    "@babel/types" "^7.18.6"

+"@babel/helper-annotate-as-pure@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.22.5.tgz#e7f06737b197d580a01edf75d97e2c8be99d3882"
+  integrity sha512-LvBTxu8bQSQkcyKOU+a1btnNFQ1dMAd0R6PyW3arXes06F6QLWLIrd681bxRPIXlrMGR3XYnW9JyML7dP3qgxg==
+  dependencies:
+    "@babel/types" "^7.22.5"
+
 "@babel/helper-builder-binary-assignment-operator-visitor@^7.18.6":
  version "7.18.9"
  resolved "https://registry.yarnpkg.com/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.18.9.tgz#acd4edfd7a566d1d51ea975dff38fd52906981bb"
@@ -159,6 +174,21 @@
    "@babel/helper-skip-transparent-expression-wrappers" "^7.20.0"
    "@babel/helper-split-export-declaration" "^7.18.6"

+"@babel/helper-create-class-features-plugin@^7.23.6":
+  version "7.23.10"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.23.10.tgz#25d55fafbaea31fd0e723820bb6cc3df72edf7ea"
+  integrity sha512-2XpP2XhkXzgxecPNEEK8Vz8Asj9aRxt08oKOqtiZoqV2UGZ5T+EkyP9sXQ9nwMxBIG34a7jmasVqoMop7VdPUw==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.22.5"
+    "@babel/helper-environment-visitor" "^7.22.20"
+    "@babel/helper-function-name" "^7.23.0"
+    "@babel/helper-member-expression-to-functions" "^7.23.0"
+    "@babel/helper-optimise-call-expression" "^7.22.5"
+    "@babel/helper-replace-supers" "^7.22.20"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.22.5"
+    "@babel/helper-split-export-declaration" "^7.22.6"
+    semver "^6.3.1"
+
 "@babel/helper-create-regexp-features-plugin@^7.18.6", "@babel/helper-create-regexp-features-plugin@^7.20.5":
  version "7.20.5"
  resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.20.5.tgz#5ea79b59962a09ec2acf20a963a01ab4d076ccca"
@@ -184,6 +214,11 @@
  resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.18.9.tgz#0c0cee9b35d2ca190478756865bb3528422f51be"
  integrity sha512-3r/aACDJ3fhQ/EVgFy0hpj8oHyHpQc+LPtJoY9SzTThAsStm4Ptegq92vqKoE3vD706ZVFWITnMnxucw+S9Ipg==

+"@babel/helper-environment-visitor@^7.22.20":
+  version "7.22.20"
+  resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.20.tgz#96159db61d34a29dba454c959f5ae4a649ba9167"
+  integrity sha512-zfedSIzFhat/gFhWfHtgWvlec0nqB9YEIVrpuwjruLlXfUSnA8cJB0miHKwqDnQ7d32aKo2xt88/xZptwxbfhA==
+
 "@babel/helper-explode-assignable-expression@^7.18.6":
  version "7.18.6"
  resolved "https://registry.yarnpkg.com/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.18.6.tgz#41f8228ef0a6f1a036b8dfdfec7ce94f9a6bc096"
@@ -207,6 +242,14 @@
    "@babel/template" "^7.20.7"
    "@babel/types" "^7.21.0"

+"@babel/helper-function-name@^7.23.0":
+  version "7.23.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.23.0.tgz#1f9a3cdbd5b2698a670c30d2735f9af95ed52759"
+  integrity sha512-OErEqsrxjZTJciZ4Oo+eoZqeW9UIiOcuYKRJA4ZAgV9myA+pOXhhmpfNCKjEH/auVfEYVFJ6y1Tc4r0eIApqiw==
+  dependencies:
+    "@babel/template" "^7.22.15"
+    "@babel/types" "^7.23.0"
+
 "@babel/helper-hoist-variables@^7.18.6":
  version "7.18.6"
  resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.18.6.tgz#d4d2c8fb4baeaa5c68b99cc8245c56554f926678"
@@ -228,6 +271,13 @@
  dependencies:
    "@babel/types" "^7.20.7"

+"@babel/helper-member-expression-to-functions@^7.22.15", "@babel/helper-member-expression-to-functions@^7.23.0":
+  version "7.23.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.23.0.tgz#9263e88cc5e41d39ec18c9a3e0eced59a3e7d366"
+  integrity sha512-6gfrPwh7OuT6gZyJZvd6WbTfrqAo7vm4xCzAXOusKqq/vWdKXphTpj5klHKNmRUU6/QRGlBsyU9mAIPaWHlqJA==
+  dependencies:
+    "@babel/types" "^7.23.0"
+
 "@babel/helper-module-imports@^7.18.6":
  version "7.18.6"
  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.18.6.tgz#1e3ebdbbd08aad1437b428c50204db13c5a3ca6e"
@@ -235,6 +285,13 @@
  dependencies:
    "@babel/types" "^7.18.6"

+"@babel/helper-module-imports@^7.22.15":
+  version "7.22.15"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.22.15.tgz#16146307acdc40cc00c3b2c647713076464bdbf0"
+  integrity sha512-0pYVBnDKZO2fnSPCrgM/6WMc7eS20Fbok+0r88fp+YtWVLZrp4CkafFGIp+W0VKw4a22sgebPT99y+FDNMdP4w==
+  dependencies:
+    "@babel/types" "^7.22.15"
+
 "@babel/helper-module-transforms@^7.12.1", "@babel/helper-module-transforms@^7.19.6", "@babel/helper-module-transforms@^7.20.2":
  version "7.20.2"
  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.20.2.tgz#ac53da669501edd37e658602a21ba14c08748712"
@@ -249,6 +306,17 @@
    "@babel/traverse" "^7.20.1"
    "@babel/types" "^7.20.2"

+"@babel/helper-module-transforms@^7.23.3":
+  version "7.23.3"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.23.3.tgz#d7d12c3c5d30af5b3c0fcab2a6d5217773e2d0f1"
+  integrity sha512-7bBs4ED9OmswdfDzpz4MpWgSrV7FXlc3zIagvLFjS5H+Mk7Snr21vQ6QwrsoCGMfNC4e4LQPdoULEt4ykz0SRQ==
+  dependencies:
+    "@babel/helper-environment-visitor" "^7.22.20"
+    "@babel/helper-module-imports" "^7.22.15"
+    "@babel/helper-simple-access" "^7.22.5"
+    "@babel/helper-split-export-declaration" "^7.22.6"
+    "@babel/helper-validator-identifier" "^7.22.20"
+
 "@babel/helper-optimise-call-expression@^7.18.6":
  version "7.18.6"
  resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.18.6.tgz#9369aa943ee7da47edab2cb4e838acf09d290ffe"
@@ -256,11 +324,23 @@
  dependencies:
    "@babel/types" "^7.18.6"

+"@babel/helper-optimise-call-expression@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.22.5.tgz#f21531a9ccbff644fdd156b4077c16ff0c3f609e"
+  integrity sha512-HBwaojN0xFRx4yIvpwGqxiV2tUfl7401jlok564NgB9EHS1y6QT17FmKWm4ztqjeVdXLuC4fSvHc5ePpQjoTbw==
+  dependencies:
+    "@babel/types" "^7.22.5"
+
 "@babel/helper-plugin-utils@^7.0.0", "@babel/helper-plugin-utils@^7.10.4", "@babel/helper-plugin-utils@^7.12.13", "@babel/helper-plugin-utils@^7.14.5", "@babel/helper-plugin-utils@^7.16.7", "@babel/helper-plugin-utils@^7.18.6", "@babel/helper-plugin-utils@^7.18.9", "@babel/helper-plugin-utils@^7.19.0", "@babel/helper-plugin-utils@^7.20.2", "@babel/helper-plugin-utils@^7.8.0":
  version "7.20.2"
  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.20.2.tgz#d1b9000752b18d0877cff85a5c376ce5c3121629"
  integrity sha512-8RvlJG2mj4huQ4pZ+rU9lqKi9ZKiRmuvGuM2HlWmkmgOhbs6zEAw6IEiJ5cQqGbDzGZOhwuOQNtZMi/ENLjZoQ==

+"@babel/helper-plugin-utils@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz#dd7ee3735e8a313b9f7b05a773d892e88e6d7295"
+  integrity sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==
+
 "@babel/helper-remap-async-to-generator@^7.18.6", "@babel/helper-remap-async-to-generator@^7.18.9":
  version "7.18.9"
  resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.18.9.tgz#997458a0e3357080e54e1d79ec347f8a8cd28519"
@@ -294,6 +374,15 @@
    "@babel/traverse" "^7.20.7"
    "@babel/types" "^7.20.7"

+"@babel/helper-replace-supers@^7.22.20":
+  version "7.22.20"
+  resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.22.20.tgz#e37d367123ca98fe455a9887734ed2e16eb7a793"
+  integrity sha512-qsW0In3dbwQUbK8kejJ4R7IHVGwHJlV6lpG6UA7a9hSa2YEiAib+N1T2kr6PEeUT+Fl7najmSOS6SmAwCHK6Tw==
+  dependencies:
+    "@babel/helper-environment-visitor" "^7.22.20"
+    "@babel/helper-member-expression-to-functions" "^7.22.15"
+    "@babel/helper-optimise-call-expression" "^7.22.5"
+
 "@babel/helper-simple-access@^7.19.4", "@babel/helper-simple-access@^7.20.2":
  version "7.20.2"
  resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.20.2.tgz#0ab452687fe0c2cfb1e2b9e0015de07fc2d62dd9"
@@ -301,6 +390,13 @@
  dependencies:
    "@babel/types" "^7.20.2"

+"@babel/helper-simple-access@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.22.5.tgz#4938357dc7d782b80ed6dbb03a0fba3d22b1d5de"
+  integrity sha512-n0H99E/K+Bika3++WNL17POvo4rKWZ7lZEp1Q+fStVbUi8nxPQEBOlTmCOxW/0JsS56SKKQ+ojAe2pHKJHN35w==
+  dependencies:
+    "@babel/types" "^7.22.5"
+
 "@babel/helper-skip-transparent-expression-wrappers@^7.18.9", "@babel/helper-skip-transparent-expression-wrappers@^7.20.0":
  version "7.20.0"
  resolved "https://registry.yarnpkg.com/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.20.0.tgz#fbe4c52f60518cab8140d77101f0e63a8a230684"
@@ -308,6 +404,13 @@
  dependencies:
    "@babel/types" "^7.20.0"

+"@babel/helper-skip-transparent-expression-wrappers@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.22.5.tgz#007f15240b5751c537c40e77abb4e89eeaaa8847"
+  integrity sha512-tK14r66JZKiC43p8Ki33yLBVJKlQDFoA8GYN67lWCDCqoL6EMMSuM9b+Iff2jHaM/RRFYl7K+iiru7hbRqNx8Q==
+  dependencies:
+    "@babel/types" "^7.22.5"
+
 "@babel/helper-split-export-declaration@^7.18.6":
  version "7.18.6"
  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.18.6.tgz#7367949bc75b20c6d5a5d4a97bba2824ae8ef075"
@@ -315,21 +418,43 @@
  dependencies:
    "@babel/types" "^7.18.6"

+"@babel/helper-split-export-declaration@^7.22.6":
+  version "7.22.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.22.6.tgz#322c61b7310c0997fe4c323955667f18fcefb91c"
+  integrity sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g==
+  dependencies:
+    "@babel/types" "^7.22.5"
+
 "@babel/helper-string-parser@^7.19.4":
  version "7.19.4"
  resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.19.4.tgz#38d3acb654b4701a9b77fb0615a96f775c3a9e63"
  integrity sha512-nHtDoQcuqFmwYNYPz3Rah5ph2p8PFeFCsZk9A/48dPc/rGocJ5J3hAAZ7pb76VWX3fZKu+uEr/FhH5jLx7umrw==

+"@babel/helper-string-parser@^7.23.4":
+  version "7.23.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.23.4.tgz#9478c707febcbbe1ddb38a3d91a2e054ae622d83"
+  integrity sha512-803gmbQdqwdf4olxrX4AJyFBV/RTr3rSmOj0rKwesmzlfhYNDEs+/iOcznzpNWlJlIlTJC2QfPFcHB6DlzdVLQ==
+
 "@babel/helper-validator-identifier@^7.18.6", "@babel/helper-validator-identifier@^7.19.1":
  version "7.19.1"
  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.19.1.tgz#7eea834cf32901ffdc1a7ee555e2f9c27e249ca2"
  integrity sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w==

+"@babel/helper-validator-identifier@^7.22.20":
+  version "7.22.20"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz#c4ae002c61d2879e724581d96665583dbc1dc0e0"
+  integrity sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==
+
 "@babel/helper-validator-option@^7.18.6":
  version "7.18.6"
  resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.18.6.tgz#bf0d2b5a509b1f336099e4ff36e1a63aa5db4db8"
  integrity sha512-XO7gESt5ouv/LRJdrVjkShckw6STTaB7l9BrpBaAHDeF5YZT+01PCwmR0SJHnkW6i8OwW/EVWRShfi4j2x+KQw==

+"@babel/helper-validator-option@^7.22.15":
+  version "7.23.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.23.5.tgz#907a3fbd4523426285365d1206c423c4c5520307"
+  integrity sha512-85ttAOMLsr53VgXkTbkx8oA6YTfT4q7/HzXSLEYmjcSTJPMPQtvq1BD79Byep5xMUYbGRzEpDsjUf3dyp54IKw==
+
 "@babel/helper-wrap-function@^7.18.9":
  version "7.20.5"
  resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.20.5.tgz#75e2d84d499a0ab3b31c33bcfe59d6b8a45f62e3"
@@ -358,6 +483,15 @@
    chalk "^2.0.0"
    js-tokens "^4.0.0"

+"@babel/highlight@^7.23.4":
+  version "7.23.4"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.23.4.tgz#edaadf4d8232e1a961432db785091207ead0621b"
+  integrity sha512-acGdbYSfp2WheJoJm/EBBBLh/ID8KDc64ISZ9DYtBmC8/Q204PZJLHyzeB5qMzJ5trcOkybd78M4x2KWsUq++A==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.22.20"
+    chalk "^2.4.2"
+    js-tokens "^4.0.0"
+
 "@babel/parser@^7.1.0", "@babel/parser@^7.12.7", "@babel/parser@^7.13.16", "@babel/parser@^7.14.0", "@babel/parser@^7.14.7", "@babel/parser@^7.18.10", "@babel/parser@^7.20.5":
  version "7.20.5"
  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.20.5.tgz#7f3c7335fe417665d929f34ae5dceae4c04015e8"
@@ -373,6 +507,11 @@
  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.21.4.tgz#94003fdfc520bbe2875d4ae557b43ddb6d880f17"
  integrity sha512-alVJj7k7zIxqBZ7BTRhz0IqJFxW1VJbm6N8JbcYhQ186df9ZBPbZBmWSqAMXwHGsCJdYks7z/voa3ibiS5bCIw==

+"@babel/parser@^7.23.9":
+  version "7.23.9"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.23.9.tgz#7b903b6149b0f8fa7ad564af646c4c38a77fc44b"
+  integrity sha512-9tcKgqKbs3xGJ+NtKF2ndOBBLVwPjl1SHxPQkd36r3Dlirw3xWUeGaTbqr7uGZcTaxkVNwc+03SVP7aCdWrTlA==
+
 "@babel/plugin-proposal-async-generator-functions@^7.0.0":
  version "7.20.1"
  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.20.1.tgz#352f02baa5d69f4e7529bdac39aaa02d41146af9"
@@ -516,6 +655,13 @@
  dependencies:
    "@babel/helper-plugin-utils" "^7.18.6"

+"@babel/plugin-syntax-jsx@^7.23.3":
+  version "7.23.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.23.3.tgz#8f2e4f8a9b5f9aa16067e142c1ac9cd9f810f473"
+  integrity sha512-EB2MELswq55OHUoRZLGg/zC7QWUKfNLpE57m/S2yr1uEneIgsTgrSzXP3NXEsMkVn76OlaVVnzN+ugObuYGwhg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.22.5"
+
 "@babel/plugin-syntax-logical-assignment-operators@^7.8.3":
  version "7.10.4"
  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.10.4.tgz#ca91ef46303530448b906652bac2e9fe9941f699"
@@ -572,6 +718,13 @@
  dependencies:
    "@babel/helper-plugin-utils" "^7.19.0"

+"@babel/plugin-syntax-typescript@^7.23.3":
+  version "7.23.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.23.3.tgz#24f460c85dbbc983cd2b9c4994178bcc01df958f"
+  integrity sha512-9EiNjVJOMwCO+43TqoTrgQ8jMwcAd0sWyXi9RPfIsLTj4R2MADDDQXELhffaUx/uJv2AYcxBgPwH6j4TIA4ytQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.22.5"
+
 "@babel/plugin-transform-arrow-functions@^7.0.0":
  version "7.18.6"
  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.18.6.tgz#19063fcf8771ec7b31d742339dac62433d0611fe"
@@ -686,6 +839,15 @@
    "@babel/helper-plugin-utils" "^7.19.0"
    "@babel/helper-simple-access" "^7.19.4"

+"@babel/plugin-transform-modules-commonjs@^7.23.3":
+  version "7.23.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.23.3.tgz#661ae831b9577e52be57dd8356b734f9700b53b4"
+  integrity sha512-aVS0F65LKsdNOtcz6FRCpE4OgsP2OFnW46qNxNIX9h3wuzaNcSQsJysuMwqSibC98HPrf2vCgtxKNwS0DAlgcA==
+  dependencies:
+    "@babel/helper-module-transforms" "^7.23.3"
+    "@babel/helper-plugin-utils" "^7.22.5"
+    "@babel/helper-simple-access" "^7.22.5"
+
 "@babel/plugin-transform-named-capturing-groups-regex@^7.0.0":
  version "7.20.5"
  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.20.5.tgz#626298dd62ea51d452c3be58b285d23195ba69a8"
@@ -694,6 +856,13 @@
    "@babel/helper-create-regexp-features-plugin" "^7.20.5"
    "@babel/helper-plugin-utils" "^7.20.2"

+"@babel/plugin-transform-object-assign@^7.16.7":
+  version "7.23.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-assign/-/plugin-transform-object-assign-7.23.3.tgz#64177e8cf943460c7f0e1c410277546804f59625"
+  integrity sha512-TPJ6O7gVC2rlQH2hvQGRH273G1xdoloCj9Pc07Q7JbIZYDi+Sv5gaE2fu+r5E7qK4zyt6vj0FbZaZTRU5C3OMA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.22.5"
+
 "@babel/plugin-transform-object-super@^7.0.0":
  version "7.18.6"
  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.18.6.tgz#fb3c6ccdd15939b6ff7939944b51971ddc35912c"
@@ -798,6 +967,16 @@
    "@babel/helper-plugin-utils" "^7.20.2"
    "@babel/plugin-syntax-typescript" "^7.20.0"

+"@babel/plugin-transform-typescript@^7.23.3":
+  version "7.23.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.23.6.tgz#aa36a94e5da8d94339ae3a4e22d40ed287feb34c"
+  integrity sha512-6cBG5mBvUu4VUD04OHKnYzbuHNP8huDsD3EDqqpIpsswTDoqHCjLoHb6+QgsV1WsT2nipRqCPgxD3LXnEO7XfA==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.22.5"
+    "@babel/helper-create-class-features-plugin" "^7.23.6"
+    "@babel/helper-plugin-utils" "^7.22.5"
+    "@babel/plugin-syntax-typescript" "^7.23.3"
+
 "@babel/plugin-transform-unicode-regex@^7.0.0":
  version "7.18.6"
  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.18.6.tgz#194317225d8c201bbae103364ffe9e2cea36cdca"
@@ -824,6 +1003,17 @@
    "@babel/helper-validator-option" "^7.18.6"
    "@babel/plugin-transform-typescript" "^7.18.6"

+"@babel/preset-typescript@^7.16.7":
+  version "7.23.3"
+  resolved "https://registry.yarnpkg.com/@babel/preset-typescript/-/preset-typescript-7.23.3.tgz#14534b34ed5b6d435aa05f1ae1c5e7adcc01d913"
+  integrity sha512-17oIGVlqz6CchO9RFYn5U6ZpWRZIngayYCtrPRSgANSwC2V1Jb+iP74nVxzzXJte8b8BYxrL1yY96xfhTBrNNQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.22.5"
+    "@babel/helper-validator-option" "^7.22.15"
+    "@babel/plugin-syntax-jsx" "^7.23.3"
+    "@babel/plugin-transform-modules-commonjs" "^7.23.3"
+    "@babel/plugin-transform-typescript" "^7.23.3"
+
 "@babel/register@^7.13.16":
  version "7.18.9"
  resolved "https://registry.yarnpkg.com/@babel/register/-/register-7.18.9.tgz#1888b24bc28d5cc41c412feb015e9ff6b96e439c"
@@ -882,6 +1072,15 @@
    "@babel/parser" "^7.20.7"
    "@babel/types" "^7.20.7"

+"@babel/template@^7.22.15":
+  version "7.23.9"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.23.9.tgz#f881d0487cba2828d3259dcb9ef5005a9731011a"
+  integrity sha512-+xrD2BWLpvHKNmX2QbpdpsBaWnRxahMwJjO+KZk2JOElj5nSmKezyS1B4u+QbHMTX69t4ukm6hh9lsYQ7GHCKA==
+  dependencies:
+    "@babel/code-frame" "^7.23.5"
+    "@babel/parser" "^7.23.9"
+    "@babel/types" "^7.23.9"
+
 "@babel/traverse@^7.1.0", "@babel/traverse@^7.12.9", "@babel/traverse@^7.14.0", "@babel/traverse@^7.19.1", "@babel/traverse@^7.20.1", "@babel/traverse@^7.20.5":
  version "7.20.5"
  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.20.5.tgz#78eb244bea8270fdda1ef9af22a5d5e5b7e57133"
@@ -957,6 +1156,15 @@
    "@babel/helper-validator-identifier" "^7.19.1"
    to-fast-properties "^2.0.0"

+"@babel/types@^7.22.15", "@babel/types@^7.22.5", "@babel/types@^7.23.0", "@babel/types@^7.23.9":
+  version "7.23.9"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.23.9.tgz#1dd7b59a9a2b5c87f8b41e52770b5ecbf492e002"
+  integrity sha512-dQjSq/7HaSjRM43FFGnv5keM2HsxpmyV1PfaSVm0nzzjwwTmjOe6J4bC8e3+pTEIgHaHj+1ZlLThRJ2auc/w1Q==
+  dependencies:
+    "@babel/helper-string-parser" "^7.23.4"
+    "@babel/helper-validator-identifier" "^7.22.20"
+    to-fast-properties "^2.0.0"
+
 "@bam.tech/react-native-image-resizer@3.0.5":
  version "3.0.5"
  resolved "https://registry.yarnpkg.com/@bam.tech/react-native-image-resizer/-/react-native-image-resizer-3.0.5.tgz#6661ba020de156268f73bdc92fbb93ef86f88a13"
@@ -992,6 +1200,13 @@
    "@cobo/apm-rum-react-native-core" "^0.5.0"
    opentracing "^0.14.3"

+"@egjs/hammerjs@^2.0.17":
+  version "2.0.17"
+  resolved "https://registry.yarnpkg.com/@egjs/hammerjs/-/hammerjs-2.0.17.tgz#5dc02af75a6a06e4c2db0202cae38c9263895124"
+  integrity sha512-XQsZgjm2EcVUiZQf11UBJQfmZeEmOW8DpI1gsFeln6w0ae0ii4dMQEQ0kjl6DspdWX1aGY1/loyXnP0JS06e/A==
+  dependencies:
+    "@types/hammerjs" "^2.0.36"
+
 "@elastic/apm-rum-core@^5.17.0":
  version "5.17.0"
  resolved "https://registry.yarnpkg.com/@elastic/apm-rum-core/-/apm-rum-core-5.17.0.tgz#660b02b46cb2e98063f2438b1b41350d88f28489"
@@ -1983,6 +2198,11 @@
  dependencies:
    "@types/node" "*"

+"@types/hammerjs@^2.0.36":
+  version "2.0.45"
+  resolved "https://registry.yarnpkg.com/@types/hammerjs/-/hammerjs-2.0.45.tgz#ffa764bb68a66c08db6efb9c816eb7be850577b1"
+  integrity sha512-qkcUlZmX6c4J8q45taBKTL3p+LbITgyx7qhlPYOdOHZB7B31K0mXbP5YA7i7SgDeEGuI9MnumiKPEMrxg8j3KQ==
+
 "@types/hoist-non-react-statics@^3.3.1":
  version "3.3.1"
  resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
@@ -3029,7 +3249,7 @@ chalk@5.2.0:
  resolved "https://registry.yarnpkg.com/chalk/-/chalk-5.2.0.tgz#249623b7d66869c673699fb66d65723e54dfcfb3"
  integrity sha512-ree3Gqw/nazQAPuJJEy+avdl7QfZMcUvmHIKgEZkGL+xOBzRvup5Hxo6LHuMceSxOabuJLJm5Yp/92R9eMmMvA==

-chalk@^2.0.0:
+chalk@^2.0.0, chalk@^2.4.2:
  version "2.4.2"
  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
  integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==
@@ -3328,6 +3548,11 @@ convert-source-map@^1.4.0, convert-source-map@^1.6.0, convert-source-map@^1.7.0:
  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.9.0.tgz#7faae62353fb4213366d0ca98358d22e8368b05f"
  integrity sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==

+convert-source-map@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-2.0.0.tgz#4b560f649fc4e918dd0ab75cf4961e8bc882d82a"
+  integrity sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==
+
 cookiejar@^2.1.2, cookiejar@^2.1.4:
  version "2.1.4"
  resolved "https://registry.yarnpkg.com/cookiejar/-/cookiejar-2.1.4.tgz#ee669c1fea2cf42dc31585469d193fef0d65771b"
@@ -7867,6 +8092,17 @@ react-native-geolocation-service@5.3.1:
  resolved "https://registry.yarnpkg.com/react-native-geolocation-service/-/react-native-geolocation-service-5.3.1.tgz#4ce1017789da6fdfcf7576eb6f59435622af4289"
  integrity sha512-LTXPtPNmrdhx+yeWG47sAaCgQc3nG1z+HLLHlhK/5YfOgfLcAb9HAkhREPjQKPZOUx8pKZMIpdGFUGfJYtimXQ==

+react-native-gesture-handler@^2.15.0:
+  version "2.15.0"
+  resolved "https://registry.yarnpkg.com/react-native-gesture-handler/-/react-native-gesture-handler-2.15.0.tgz#f8e6c0451a7bdf065edb7b9be605480db402baa0"
+  integrity sha512-cmMGW8k86o/xgVTBZZOPohvR5re4Vh65PUxH4HbBBJAYTog4aN4wTVTUlnoky01HuSN8/X4h3tI/K3XLPoDnsg==
+  dependencies:
+    "@egjs/hammerjs" "^2.0.17"
+    hoist-non-react-statics "^3.3.0"
+    invariant "^2.2.4"
+    lodash "^4.17.21"
+    prop-types "^15.7.2"
+
 react-native-get-random-values@^1.8.0:
  version "1.8.0"
  resolved "https://registry.yarnpkg.com/react-native-get-random-values/-/react-native-get-random-values-1.8.0.tgz#1cb4bd4bd3966a356e59697b8f372999fe97cb16"
@@ -7922,6 +8158,16 @@ react-native-qrcode-svg@^6.2.0:
    prop-types "^15.8.0"
    qrcode "^1.5.1"

+react-native-reanimated@^3.7.1:
+  version "3.7.1"
+  resolved "https://registry.yarnpkg.com/react-native-reanimated/-/react-native-reanimated-3.7.1.tgz#b0948b67343fcb16196cd3c07e5fd888c0bbd1af"
+  integrity sha512-bapCxhnS58+GZynQmA/f5U8vRlmhXlI/WhYg0dqnNAGXHNIc+38ahRWcG8iK8e0R2v9M8Ky2ZWObEC6bmweofg==
+  dependencies:
+    "@babel/plugin-transform-object-assign" "^7.16.7"
+    "@babel/preset-typescript" "^7.16.7"
+    convert-source-map "^2.0.0"
+    invariant "^2.2.4"
+
 react-native-safe-area-context@4.4.1:
  version "4.4.1"
  resolved "https://registry.yarnpkg.com/react-native-safe-area-context/-/react-native-safe-area-context-4.4.1.tgz#239c60b8a9a80eac70a38a822b04c0f1d15ffc01"
@@ -8467,7 +8713,7 @@ scheduler@^0.22.0:
  resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.2.tgz#48d55db737c3287cd4835e17fa13feace1c41ef8"
  integrity sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==

-semver@^6.0.0, semver@^6.1.1, semver@^6.1.2, semver@^6.3.0:
+semver@^6.0.0, semver@^6.1.1, semver@^6.1.2, semver@^6.3.0, semver@^6.3.1:
  version "6.3.1"
  resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.1.tgz#556d2ef8689146e46dcea4bfdd095f3434dffcb4"
  integrity sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==