feat(profile): complete profile page and related pages

.vscode/settings.json

@@ -1,3 +1,6 @@
 {
-  "java.compile.nullAnalysis.mode": "automatic"
+  "java.compile.nullAnalysis.mode": "automatic",
+  "cSpell.words": [
+    "Verticborder"
+  ]
 }

package.json

@@ -24,6 +24,7 @@
     "@neondatabase/serverless": "^1.0.0",
     "@react-native-community/datetimepicker": "8.3.0",
     "@react-navigation/bottom-tabs": "^7.2.0",
+    "@react-navigation/native": "^7.1.17",
     "@t3-oss/env-core": "^0.13.6",
     "@tanstack/react-query": "^5.75.7",
     "@trpc/client": "^11.1.2",

pnpm-workspace.yaml

@@ -1,3 +1,5 @@
+packages:
+  - 'src/*'
 onlyBuiltDependencies:
   - '@clerk/shared'
   - browser-tabs-lock

src/app/profile/index.tsx

@@ -0,0 +1,47 @@
+import React from "react"
+import { ThemeProvider } from "~/contexts/ThemeContext"
+import { ProfileScreen } from "~/components/profile/ProfileScreen"
+import { LimitsScreen } from "~/components/profile/Limits"
+import { IncomeScreen } from "~/components/profile/Income"
+import { NotificationScreen } from "~/components/profile/Notification"
+import { UserProfileScreen } from "~/components/profile/UserProfile"
+import { BankAccountsScreen } from "~/components/profile/BankAccounts"
+
+const ProfileAppContent: React.FC = () => {
+  const [currentScreen, setCurrentScreen] = React.useState("Profile")
+
+  const handleNavigate = (screen: string) => {
+    setCurrentScreen(screen)
+  }
+
+  const renderScreen = () => {
+    switch (currentScreen) {
+      case "Profile":
+        return <ProfileScreen onNavigate={handleNavigate} />
+      case "Limits":
+        return <LimitsScreen onNavigate={handleNavigate} />
+      case "Income":
+        return <IncomeScreen onNavigate={handleNavigate} />
+      case "Notification":
+        return <NotificationScreen onNavigate={handleNavigate} />
+      case "UserProfile":
+        return <UserProfileScreen onNavigate={handleNavigate} />
+      case "BankAccounts":
+        return <BankAccountsScreen onNavigate={handleNavigate} />
+      default:
+        return <ProfileScreen onNavigate={handleNavigate} />
+    }
+  }
+
+  return renderScreen()
+}
+
+const ProfileApp: React.FC = () => {
+  return (
+    <ThemeProvider>
+      <ProfileAppContent />
+    </ThemeProvider>
+  )
+}
+
+export default ProfileApp

src/components/AccountItem.tsx

@@ -23,6 +23,27 @@ export const AccountItem: React.FC<AccountItemProps> = ({
 
   const Component = onPress ? TouchableOpacity : View
 
+  const IconWrapper = ({
+    children,
+    H_size = 40,
+    W_size = 60,
+  }: {
+    children: React.ReactNode
+    H_size?: number
+    W_size?: number
+  }) => (
+    <View
+      className="rounded-2xl items-center justify-center"
+      style={{
+        width: W_size,
+        height: H_size,
+        backgroundColor: colors.border,
+      }}
+    >
+      {children}
+    </View>
+  )
+
   return (
     <Animated.View
       entering={FadeInDown.delay(delay).springify()}
@@ -38,22 +59,18 @@ export const AccountItem: React.FC<AccountItemProps> = ({
         }}
       >
         <View className="w-10 h-10 mr-4">{icon}</View>
-
         <AppText
           medium
           className="flex-1 text-base"
           style={{ color: colors.text }}
         >
           {name}
         </AppText>
-
-        <AppText
-          semibold
-          className="text-base"
-          style={{ color: colors.accent }}
-        >
-          {amount}
-        </AppText>
+        <IconWrapper H_size={40} W_size={60}>
+          <AppText semibold className="text-base" style={{ color: colors.text }}>
+            {amount}
+          </AppText>
+        </IconWrapper>
       </Component>
     </Animated.View>
   )

src/components/AppText.tsx

@@ -1,15 +1,15 @@
-import React from "react";
-import { Text, StyleSheet } from "react-native";
-import { useFonts } from "expo-font";
+import React from "react"
+import { Text } from "react-native"
+import { useFonts } from "expo-font"
 
 type AppTextProps = {
-  semibold?: boolean;
-  children: React.ReactNode;
-  medium?: boolean;
-  bold?: boolean;
-  className?: string;
-  style?: object;
-};
+  semibold?: boolean
+  children: React.ReactNode
+  medium?: boolean
+  bold?: boolean
+  className?: string
+  style?: object
+}
 
 export default function AppText({
   children,
@@ -20,29 +20,36 @@ export default function AppText({
   style,
   ...rest
 }: AppTextProps & Omit<React.ComponentProps<typeof Text>, keyof AppTextProps>) {
-  // This is a Component that we use to render text with custom fonts
+
   const [fontsLoaded] = useFonts({
     Raleway: require("~/assets/fonts/Raleway-Regular.ttf"),
     RalewayMedium: require("~/assets/fonts/Raleway-Medium.ttf"),
     RalewaySemiBold: require("~/assets/fonts/Raleway-SemiBold.ttf"),
     RalewayBold: require("~/assets/fonts/Raleway-Bold.ttf"),
-  });
+  })
 
   if (!fontsLoaded) {
-    return null;
+    return null
   }
 
   const fontFamily = semibold
     ? "RalewaySemiBold"
     : medium
-      ? "RalewayMedium"
-      : bold
-        ? "RalewayBold"
-        : "Raleway";
+    ? "RalewayMedium"
+    : bold
+    ? "RalewayBold"
+    : "Raleway"
 
   return (
-    <Text className={className} style={{ fontFamily, ...style }} {...rest}>
+    <Text
+      className={className}
+      style={[
+        { fontFamily},
+        style,
+      ]}
+      {...rest}
+    >
       {children}
     </Text>
-  );
+  )
 }