feat(profile): complete profile page and related pages

.vscode/settings.json

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

package.json

@@ -25,6 +25,7 @@
     "@neondatabase/serverless": "^1.0.0",
     "@react-native-community/datetimepicker": "8.4.1",
     "@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,4 +1,5 @@
 packages:
+  - "src/*"
   - "."
 
 onlyBuiltDependencies:

src/app/dashboard/banking/index.tsx

@@ -5,6 +5,7 @@ import { mockDashboardData } from "~/data/mockData";
 import { SectionHeader } from "~/components/SectionHeader";
 import { AccountItem } from "~/components/AccountItem";
 import { useTranslation } from "react-i18next";
+import { Header } from "~/components/Header"; // ✅ keep header
 
 const Dashboard = () => {
   const { colors, isDark } = useTheme();
@@ -28,6 +29,9 @@ const Dashboard = () => {
       />
 
       <ScrollView className="flex-1 p-8" showsVerticalScrollIndicator={false}>
+        {/* Header */}
+        <Header title={`${mockDashboardData.user.name} - Dashboard`} />
+
         {/* Cards Section */}
         {/* <SectionHeader title="Cards" delay={100} />
         <SectionHeader title="Debitcard" size="medium" delay={150} />
@@ -79,7 +83,6 @@ const Dashboard = () => {
           />
         ))}
 
-        {/* Safe Accounts Section */}
         <SectionHeader title={t("dashboardSafeAccounts")} delay={1000} />
         {mockDashboardData.accounts.safe.map((account, index) => (
           <AccountItem
@@ -92,15 +95,15 @@ const Dashboard = () => {
           />
         ))}
 
-        <SectionHeader title={t("sharedFunds")} delay={1000} />
+        <SectionHeader title={t("sharedFunds")} delay={1200} />
         {mockDashboardData.sharedFunds && (
           <AccountItem
             key={mockDashboardData.sharedFunds.id}
             icon={mockDashboardData.sharedFunds.icon}
             name={mockDashboardData.sharedFunds.title}
             arrow={mockDashboardData.sharedFunds.arrow}
             iconWrapped
-            delay={1100}
+            delay={1300}
             onPress={() =>
               handleAccountPress(
                 mockDashboardData.sharedFunds.title,

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

@@ -27,6 +27,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="items-center justify-center rounded-2xl"
+      style={{
+        width: W_size,
+        height: H_size,
+        backgroundColor: colors.border,
+      }}
+    >
+      {children}
+    </View>
+  );
+
   return (
     <Animated.View
       entering={FadeInDown.delay(delay).springify()}
@@ -64,6 +85,7 @@ export const AccountItem: React.FC<AccountItemProps> = ({
             {amount}
           </AppText>
         )}
+
         {arrow && (
           <View className="ml-2">
             {typeof arrow === "string" ? (

src/components/BottomNavigation.tsx

@@ -0,0 +1,75 @@
+import type React from "react";
+import { View, TouchableOpacity, Image } from "react-native";
+import { useTheme } from "../contexts/ThemeContext";
+import AppText from "./ui/AppText";
+
+interface BottomNavigationProps {
+  activeTab: "Banking" | "Insights" | "Settings";
+  onTabPress: (tab: "Banking" | "Insights" | "Settings") => void;
+}
+
+export const BottomNavigation: React.FC<BottomNavigationProps> = ({
+  activeTab,
+  onTabPress,
+}) => {
+  const { colors } = useTheme();
+
+  const TabItem = ({
+    tab,
+    label,
+    iconSource,
+  }: {
+    tab: "Banking" | "Insights" | "Settings";
+    label: string;
+    iconSource: any;
+  }) => {
+    const isActive = activeTab === tab;
+    return (
+      <TouchableOpacity
+        className="flex-1 items-center py-3"
+        onPress={() => onTabPress(tab)}
+      >
+        <Image
+          source={iconSource}
+          style={{
+            width: 20,
+            height: 20,
+          }}
+          resizeMode="contain"
+        />
+        <AppText
+          className="mt-1 text-xs"
+          style={{ color: isActive ? colors.text : colors.text }}
+        >
+          {label}
+        </AppText>
+      </TouchableOpacity>
+    );
+  };
+
+  return (
+    <View
+      className="flex-row border-t pb-3"
+      style={{
+        borderTopColor: colors.border,
+        backgroundColor: colors.cardBackground,
+      }}
+    >
+      <TabItem
+        tab="Banking"
+        label="Banking"
+        iconSource={require("~/assets/Icons/banking.png")}
+      />
+      <TabItem
+        tab="Insights"
+        label="Insights"
+        iconSource={require("~/assets/Icons/insights.png")}
+      />
+      <TabItem
+        tab="Settings"
+        label="Settings"
+        iconSource={require("~/assets/Icons/settings.png")}
+      />
+    </View>
+  );
+};

src/components/Button.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import { TouchableOpacity } from "react-native";
+import AppText from "./ui/AppText";
+
+type ButtonProps = {
+  title: string;
+  onPress: () => void;
+  className?: string;
+  textClassName?: string;
+  disabled?: boolean;
+};
+
+export default function Button({
+  title,
+  onPress,
+  className = "",
+  textClassName = "",
+  disabled = false,
+}: ButtonProps) {
+  return (
+    <TouchableOpacity
+      onPress={onPress}
+      disabled={disabled}
+      className={`items-center justify-center rounded-xl px-4 py-3 ${
+        disabled ? "bg-gray-400" : "bg-blue-600"
+      } ${className}`}
+    >
+      <AppText
+        semibold
+        className={`text-base ${
+          disabled ? "text-gray-200" : "text-white"
+        } ${textClassName}`}
+        style={{ color: undefined }}
+      >
+        {title}
+      </AppText>
+    </TouchableOpacity>
+  );
+}

src/components/FloatingActionButton.tsx

@@ -0,0 +1,52 @@
+import type React from "react";
+import { TouchableOpacity, Image } from "react-native";
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withSpring,
+} from "react-native-reanimated";
+import { useTheme } from "~/contexts/ThemeContext";
+
+interface FloatingActionButtonProps {
+  onPress: () => void;
+}
+
+export const FloatingActionButton: React.FC<FloatingActionButtonProps> = ({
+  onPress,
+}) => {
+  const { colors } = useTheme();
+  const scale = useSharedValue(1);
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [{ scale: scale.value }],
+  }));
+
+  const handlePressIn = () => {
+    scale.value = withSpring(0.95);
+  };
+
+  const handlePressOut = () => {
+    scale.value = withSpring(1);
+  };
+
+  return (
+    <Animated.View
+      className="absolute bottom-24 right-5 h-12 w-12 items-center justify-center rounded-full shadow-lg"
+      style={[{ backgroundColor: colors.primary }, animatedStyle]}
+    >
+      <TouchableOpacity
+        className="h-full w-full items-center justify-center"
+        onPress={onPress}
+        onPressIn={handlePressIn}
+        onPressOut={handlePressOut}
+        activeOpacity={1}
+      >
+        <Image
+          source={require("~/assets/Icons/plus.png")}
+          style={{ width: 12, height: 12 }}
+          resizeMode="contain"
+        />
+      </TouchableOpacity>
+    </Animated.View>
+  );
+};