Merge remote-tracking branch 'origin/main' into feat/129-link-geusts-frontend-to-backend

Author: zaydaanjahangir

clients/mobile/app/(tabs)/_layout.tsx

@@ -28,7 +28,7 @@ const TabBarIcon = ({ name, focused, activeColor, label }: TabBarIconProps) => (
 );
 
 const PlusButton = () => (
-  <View className="bg-primary rounded-full w-14 h-14 items-center justify-center -mb-2">
+  <View className="bg-primary rounded-full size-16 items-center justify-center mb-6">
     <IconSymbol size={22} name="plus" color={Colors["light"].background} />
   </View>
 );
@@ -48,17 +48,15 @@ export default function TabLayout() {
         tabBarActiveTintColor: c.tabBarActive,
         tabBarInactiveTintColor: c.tabBarActive,
         tabBarItemStyle: {
-          paddingVertical: 10,
+          paddingVertical: 0,
         },
         tabBarStyle: {
-          height: 70,
+          paddingTop: 8,
+          paddingHorizontal: 20,
+          height: 68,
         },
       }}
     >
-      <Tabs.Screen
-        name="create-task-ai"
-        options={{ href: null, headerShown: false }}
-      />
       <Tabs.Screen
         name="tasks"
         options={{

clients/mobile/app/(tabs)/profile.tsx

@@ -1,15 +1,55 @@
-import LogoutButton from "@/components/Logout";
+import { View, Text, ScrollView, ActivityIndicator } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { useAuth } from "@clerk/clerk-expo";
 import { router } from "expo-router";
-import { View } from "react-native";
+import { useGetUser } from "@shared";
+import LogoutButton from "@/components/Logout";
+import { ProfileHero } from "@/components/profile/ProfileHero";
+import { ProfileInfoCard } from "@/components/profile/ProfileInfoCard";
 
 export default function Profile() {
+  const { userId } = useAuth();
+  const { data: user, isLoading } = useGetUser(userId ?? undefined);
+
   const onSignOut = () => {
     router.replace("/sign-in");
   };
 
+  const firstName = user?.first_name ?? "";
+  const lastName = user?.last_name ?? "";
+  const displayName = [firstName, lastName].filter(Boolean).join(" ") || "User";
+
   return (
-    <View className="flex-1 justify-center px-6">
-      <LogoutButton onSignOut={onSignOut} />
-    </View>
+    <SafeAreaView className="flex-1 bg-bg-primary" edges={["top"]}>
+      <View className="px-4 py-4 border-b border-stroke-subtle">
+        <Text className="text-2xl font-semibold text-text-default">
+          Profile
+        </Text>
+        <Text className="text-sm text-text-subtle">Overview of profile</Text>
+      </View>
+
+      {isLoading ? (
+        <View className="flex-1 items-center justify-center">
+          <ActivityIndicator size="large" />
+        </View>
+      ) : (
+        <ScrollView className="flex-1" contentContainerClassName="pb-12">
+          <ProfileHero
+            firstName={firstName}
+            lastName={lastName}
+            avatarUrl={user?.profile_picture ?? undefined}
+          />
+          <ProfileInfoCard
+            governmentName={displayName}
+            email={user?.primary_email ?? "—"}
+            phoneNumber={user?.phone_number ?? "—"}
+            department={user?.department ?? "—"}
+          />
+          <View className="px-4 mt-8">
+            <LogoutButton onSignOut={onSignOut} />
+          </View>
+        </ScrollView>
+      )}
+    </SafeAreaView>
   );
 }

clients/mobile/app/_layout.tsx

@@ -40,6 +40,7 @@ function AppLayout() {
     <ThemeProvider value={colorScheme === "dark" ? DarkTheme : DefaultTheme}>
       <Stack>
         <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
+        <Stack.Screen name="create-task-ai" options={{ headerShown: false }} />
         <Stack.Screen name="(auth)/sign-in" options={{ headerShown: false }} />
         <Stack.Screen
           name="modal"

…nts/mobile/app/(tabs)/create-task-ai.tsx clients/mobile/app/create-task-ai.tsxclients/mobile/app/(tabs)/create-task-ai.tsx renamed to clients/mobile/app/create-task-ai.tsx clients/mobile/app/(tabs)/create-task-ai.tsx renamed to clients/mobile/app/create-task-ai.tsx

@@ -28,6 +28,7 @@ import {
 import { useAPIClient } from "@shared/api/client";
 import { getConfig } from "@shared/api/config";
 import type { GenerateRequestResponse, MakeRequest } from "@shared";
+import { SkeletonCard } from "@/components/ui/SkeletonCard";
 
 // Token values for JSX props that can't use className (icon colors, placeholder, etc.)
 const colors = {
@@ -51,30 +52,6 @@ type GeneratedTask = {
   description?: string;
 };
 
-function SkeletonLine({ width }: { width: `${number}%` | number }) {
-  return (
-    <View
-      className="bg-stroke-subtle rounded-full h-[10px]"
-      style={{ width }}
-    />
-  );
-}
-
-function SkeletonCard() {
-  return (
-    <View className="bg-stroke-disabled rounded-lg px-4 py-4 gap-3">
-      <SkeletonLine width="100%" />
-      <SkeletonLine width="66%" />
-      <SkeletonLine width="84%" />
-      <View className="flex-row justify-between">
-        <SkeletonLine width="34%" />
-        <SkeletonLine width="34%" />
-      </View>
-      <SkeletonLine width="100%" />
-    </View>
-  );
-}
-
 type TaskFieldRowProps = {
   icon: React.ReactNode;
   label: string;

clients/mobile/components/profile/ProfileHero.tsx

@@ -0,0 +1,34 @@
+import { View, Text, Image } from "react-native";
+
+type ProfileHeroProps = {
+  firstName: string;
+  lastName: string;
+  avatarUrl: string | undefined;
+};
+
+export function ProfileHero({
+  firstName,
+  lastName,
+  avatarUrl,
+}: ProfileHeroProps) {
+  const displayName = [firstName, lastName].filter(Boolean).join(" ") || "User";
+  const initial = displayName.charAt(0).toUpperCase();
+
+  return (
+    <View className="items-center py-8 gap-4">
+      {avatarUrl ? (
+        <Image source={{ uri: avatarUrl }} className="w-24 h-24 rounded-full" />
+      ) : (
+        <View className="w-24 h-24 rounded-full bg-primary items-center justify-center">
+          <Text className="text-4xl font-semibold text-white">{initial}</Text>
+        </View>
+      )}
+      <View className="items-center gap-1">
+        <Text className="text-2xl font-bold text-text-default">
+          {displayName}
+        </Text>
+        <Text className="text-sm font-semibold text-primary">Hotel Chain</Text>
+      </View>
+    </View>
+  );
+}

clients/mobile/components/profile/ProfileInfoCard.tsx

@@ -0,0 +1,41 @@
+import { View, Text } from "react-native";
+import { formatPhoneNumber } from "@/utils";
+
+function DetailRow({ label, value }: { label: string; value: string }) {
+  return (
+    <View className="flex-row items-center py-4 border-b border-stroke-subtle">
+      <Text className="w-2/5 text-sm font-medium text-text-default">
+        {label}
+      </Text>
+      <Text className="flex-1 text-sm text-text-subtle">{value}</Text>
+    </View>
+  );
+}
+
+type ProfileInfoCardProps = {
+  governmentName: string;
+  email: string;
+  phoneNumber: string;
+  department: string;
+};
+
+export function ProfileInfoCard({
+  governmentName,
+  email,
+  phoneNumber,
+  department,
+}: ProfileInfoCardProps) {
+  return (
+    <View className="rounded-xl border border-stroke-subtle bg-white mx-4 px-4">
+      <DetailRow label="Government Name" value={governmentName} />
+      <DetailRow label="Email" value={email} />
+      <DetailRow label="Phone Number" value={formatPhoneNumber(phoneNumber)} />
+      <View className="flex-row items-center py-4">
+        <Text className="w-2/5 text-sm font-medium text-text-default">
+          Department
+        </Text>
+        <Text className="flex-1 text-sm text-text-subtle">{department}</Text>
+      </View>
+    </View>
+  );
+}

clients/mobile/components/ui/SkeletonCard.tsx

@@ -0,0 +1,54 @@
+import { useEffect, useRef } from "react";
+import { Animated, Easing, View } from "react-native";
+
+type SkeletonLineProps = {
+  width: `${number}%` | number;
+  opacity: Animated.Value;
+};
+
+function SkeletonLine({ width, opacity }: SkeletonLineProps) {
+  return (
+    <Animated.View
+      className="bg-stroke-subtle rounded-full h-[10px]"
+      style={[{ width }, { opacity }]}
+    />
+  );
+}
+
+export function SkeletonCard() {
+  const opacity = useRef(new Animated.Value(1)).current;
+
+  useEffect(() => {
+    Animated.loop(
+      Animated.sequence([
+        Animated.timing(opacity, {
+          toValue: 0.3,
+          duration: 700,
+          easing: Easing.inOut(Easing.ease),
+          useNativeDriver: true,
+        }),
+        Animated.timing(opacity, {
+          toValue: 1,
+          duration: 700,
+          easing: Easing.inOut(Easing.ease),
+          useNativeDriver: true,
+        }),
+      ]),
+    ).start();
+
+    return () => opacity.stopAnimation();
+  }, [opacity]);
+
+  return (
+    <View className="bg-stroke-disabled rounded-lg px-4 py-4 gap-3">
+      <SkeletonLine width="100%" opacity={opacity} />
+      <SkeletonLine width="66%" opacity={opacity} />
+      <SkeletonLine width="84%" opacity={opacity} />
+      <View className="flex-row justify-between">
+        <SkeletonLine width="34%" opacity={opacity} />
+        <SkeletonLine width="34%" opacity={opacity} />
+      </View>
+      <SkeletonLine width="100%" opacity={opacity} />
+    </View>
+  );
+}

clients/mobile/utils.ts

@@ -1,5 +1,22 @@
 import { Filter } from "@/components/ui/filters";
 
+/** Strip everything except digits, capped at 10. */
+export function parsePhoneDigits(value: string): string {
+  return value.replace(/\D/g, "").slice(0, 10);
+}
+
+/**
+ * Format a raw digit string (or already-formatted string) as (XXX) XXX-XXXX.
+ * Non-phone values like "—" are returned unchanged.
+ */
+export function formatPhoneNumber(value: string): string {
+  const d = parsePhoneDigits(value);
+  if (d.length === 0) return value; // preserve placeholder like "—"
+  if (d.length <= 3) return `(${d}`;
+  if (d.length <= 6) return `(${d.slice(0, 3)}) ${d.slice(3)}`;
+  return `(${d.slice(0, 3)}) ${d.slice(3, 6)}-${d.slice(6)}`;
+}
+
 const toFilterConfig = <T extends number | string>(
   options: T[],
   selected: T[],

clients/shared/src/api/users.ts

@@ -0,0 +1,39 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import type { User } from "./generated/models";
+import { useAPIClient } from "./client";
+
+export const getUserQueryKey = (userId: string | undefined) =>
+  ["user", userId] as const;
+
+export const useGetUser = (userId: string | undefined) => {
+  const api = useAPIClient();
+  return useQuery({
+    queryKey: getUserQueryKey(userId),
+    queryFn: () => api.get<User>(`/users/${userId}`),
+    enabled: !!userId,
+  });
+};
+
+export const useUpdateUser = (userId: string | undefined) => {
+  const api = useAPIClient();
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (updates: { phone_number?: string }) =>
+      api.put<User>(`/users/${userId}`, updates),
+    onMutate: async (updates) => {
+      await queryClient.cancelQueries({ queryKey: getUserQueryKey(userId) });
+      const previous = queryClient.getQueryData<User>(getUserQueryKey(userId));
+      queryClient.setQueryData<User>(getUserQueryKey(userId), (old) => ({
+        ...old!,
+        ...updates,
+      }));
+      return { previous };
+    },
+    onError: (_err, _vars, context) => {
+      queryClient.setQueryData(getUserQueryKey(userId), context?.previous);
+    },
+    onSettled: () => {
+      queryClient.invalidateQueries({ queryKey: getUserQueryKey(userId) });
+    },
+  });
+};

clients/shared/src/index.ts

@@ -72,6 +72,9 @@ export type {
   RoomRequestsResponse,
 } from "./api/generated/models";
 
+// User hooks
+export { getUserQueryKey, useGetUser, useUpdateUser } from "./api/users";
+
 // Department types and hooks
 export type { Department } from "./types/departments";