fix account

ArtisanConnect/api/categories.jsx

@@ -1,12 +1,16 @@
 import axios from "axios";
+import { useAuthStore } from "@/store/authStore";
 
 const API_URL = "https://hopp.zikor.pl/api/v1";
 
 export async function listCategories() {
-    try {
+  const { token } = useAuthStore.getState();
-        const response = await axios.get(`${API_URL}/vars/categories`);
+  const headers = token ? { Authorization: `Bearer ${token}` } : {};
-        return response.data;
+
-    } catch (err) {
+  try {
-        console.error("Nie udało się pobrać listy kategorii.", err.response.status);
+    const response = await axios.get(`${API_URL}/vars/categories`, { headers });
-    }
+    return response.data;
-}
+  } catch (err) {
+    console.error("Nie udało się pobrać listy kategorii.", err.response.status);
+  }
+}

ArtisanConnect/api/client.jsx

@@ -0,0 +1,16 @@
+import axios from "axios";
+
+const API_URL = "https://hopp.zikor.pl/api/v1";
+
+export async function getUserById(userId) {
+  try {
+    const response = await axios.get(`${API_URL}/clients/get/${userId}`);
+    return response.data;
+  } catch (err) {
+    console.error(
+      `Nie udało się pobrać danych użytkownika o ID ${userId}.`,
+      err.response.status
+    );
+    throw err;
+  }
+}

ArtisanConnect/api/notices.jsx

@@ -1,122 +1,129 @@
 import axios from "axios";
-import FormData from 'form-data'
+import FormData from "form-data";
-import {useAuthStore} from "@/store/authStore";
+import { useAuthStore } from "@/store/authStore";
 
 // const API_URL = "https://testowe.zikor.pl/api/v1";
 
 const API_URL = "https://hopp.zikor.pl/api/v1";
 
 export async function listNotices() {
-    const { token } = useAuthStore.getState();
+  const { token } = useAuthStore.getState();
-    const headers = token ? { 'Authorization': `Bearer ${token}` } : {};
+  const headers = token ? { Authorization: `Bearer ${token}` } : {};
 
-    const response = await fetch(`${API_URL}/notices/get/all`, {
+  const response = await fetch(`${API_URL}/notices/get/all`, {
-        headers: headers
+    headers: headers,
-    });
+  });
-    const data = await response.json();
+  const data = await response.json();
-    if (!response.ok) {
+  if (!response.ok) {
-        throw new Error(response.toString());
+    throw new Error(response.toString());
-    }
+  }
-    return data;
+  return data;
 }
 
 export async function getNoticeById(noticeId) {
-    const response = await fetch(`${API_URL}/notices/get/${noticeId}`);
+  const response = await fetch(`${API_URL}/notices/get/${noticeId}`);
 
-    const data = await response.json();
+  const data = await response.json();
-    if (!response.ok) {
+  if (!response.ok) {
-        throw new Error("Error");
+    throw new Error("Error");
-    }
+  }
-    return data;
+  return data;
 }
 
 export async function createNotice(notice) {
-    try {
+  try {
-        const response = await axios.post(`${API_URL}/notices/add`, notice, {
+    const response = await axios.post(`${API_URL}/notices/add`, notice, {
-            headers: {
+      headers: {
-                "Content-Type": "application/json",
+        "Content-Type": "application/json",
-            },
+      },
-        });
+    });
 
-        if (response.data.noticeId !== null) {
+    if (response.data.noticeId !== null) {
-            for (const imageUri of notice.image) {
+      for (const imageUri of notice.image) {
-                await uploadImage(response.data.noticeId, imageUri);
+        await uploadImage(response.data.noticeId, imageUri);
-            }
+      }
-        }
-
-        return response.data;
-    } catch (error) {
-        console.log("Error", error.response.data, error.response.status);
-        return null;
     }
+
+    return response.data;
+  } catch (error) {
+    console.log("Error", error.response.data, error.response.status);
+    return null;
+  }
 }
 
 export async function getImageByNoticeId(noticeId) {
-    let imageUrl;
+  let imageUrl;
-    try {
+  try {
-        const listResponse = await axios.get(`${API_URL}/images/list/${noticeId}`);
+    const listResponse = await axios.get(`${API_URL}/images/list/${noticeId}`);
 
-        const imageName = listResponse.data[0];
+    const imageName = listResponse.data[0];
-        imageUrl = `${API_URL}/images/get/${imageName}`;
+    imageUrl = `${API_URL}/images/get/${imageName}`;
 
-        return imageUrl;
+    return imageUrl;
-    } catch (err) {
+  } catch (err) {
-        console.log(`Zdjęcie nie istnieje dla notice o id: ${noticeId}`);
+    console.log(`Zdjęcie nie istnieje dla notice o id: ${noticeId}`);
-        imageUrl = "https://http.cat/404.jpg";
+    imageUrl = "https://http.cat/404.jpg";
-        return imageUrl;
+    return imageUrl;
-    }
+  }
 }
 
 export async function getAllImagesByNoticeId(noticeId) {
-    try {
+  try {
-        const listResponse = await axios.get(`${API_URL}/images/list/${noticeId}`);
+    const listResponse = await axios.get(`${API_URL}/images/list/${noticeId}`);
 
-        if (listResponse.data && listResponse.data.length > 0) {
+    if (listResponse.data && listResponse.data.length > 0) {
-            return listResponse.data.map(imageName =>
+      return listResponse.data.map(
-                `${API_URL}/images/get/${imageName}`
+        (imageName) => `${API_URL}/images/get/${imageName}`
-            );
+      );
-        }
-
-        return ["https://http.cat/404.jpg"];
-    } catch (err) {
-        if(err.response.status === 404) {
-            console.info(`Ogłoszenie o id: ${noticeId} nie posiada zdjęć.`);
-            return ["https://http.cat/404.jpg"];
-        }
-        console.warn(`Nie udało się pobrać listy zdjęć dla ogłoszenia o id: ${noticeId}`, err);
-        return ["https://http.cat/404.jpg"];
     }
+
+    return ["https://http.cat/404.jpg"];
+  } catch (err) {
+    if (err.response.status === 404) {
+      // console.info(`Ogłoszenie o id: ${noticeId} nie posiada zdjęć.`);
+      return ["https://http.cat/404.jpg"];
+    }
+    console.warn(
+      `Nie udało się pobrać listy zdjęć dla ogłoszenia o id: ${noticeId}`,
+      err
+    );
+    return ["https://http.cat/404.jpg"];
+  }
 }
 
 export const uploadImage = async (noticeId, imageUri) => {
-    const formData = new FormData();
+  const formData = new FormData();
 
-    const filename = imageUri.split('/').pop();
+  const filename = imageUri.split("/").pop();
 
-    const match = /\.(\w+)$/.exec(filename);
+  const match = /\.(\w+)$/.exec(filename);
-    const type = match ? `image/${match[1]}` : 'image/jpeg';
+  const type = match ? `image/${match[1]}` : "image/jpeg";
 
-    formData.append('file', {
+  formData.append("file", {
-        uri: imageUri,
+    uri: imageUri,
-        name: filename,
+    name: filename,
-        type: type,
+    type: type,
-    });
+  });
 
-    try {
+  try {
-        const response = await axios.post(
+    const response = await axios.post(
-            `${API_URL}/images/upload/${noticeId}`,
+      `${API_URL}/images/upload/${noticeId}`,
-            formData,
+      formData,
-            {
+      {
-                headers: {
+        headers: {
-                    'Content-Type': 'multipart/form-data',
+          "Content-Type": "multipart/form-data",
-                },
+        },
-            }
+      }
-        );
+    );
-        console.info('Upload successful:', response.data);
+    console.info("Upload successful:", response.data);
-        return response.data;
+    return response.data;
-    } catch (error) {
+  } catch (error) {
-        console.log("imageURI:", imageUri);
+    console.log("imageURI:", imageUri);
-        console.error('Error uploading image:', error.response.data, error.response.status);
+    console.error(
-        throw error;
+      "Error uploading image:",
-    }
+      error.response.data,
-}
+      error.response.status
+    );
+    throw error;
+  }
+};

ArtisanConnect/api/wishlist.jsx

@@ -0,0 +1,38 @@
+import axios from "axios";
+import { useAuthStore } from "@/store/authStore";
+// import FormData from 'form-data'
+
+const API_URL = "https://hopp.zikor.pl/api/v1/wishlist";
+
+export async function toggleNoticeStatus(noticeId) {
+  const { token } = useAuthStore.getState();
+  const headers = token ? { Authorization: `Bearer ${token}` } : {};
+
+  try {
+    const response = await axios.post(
+      `${API_URL}/toggle/${noticeId}`,
+      {},
+      {
+        headers,
+      }
+    );
+    return response.data;
+  } catch (error) {
+    console.error("Error toggling wishlist item:", error);
+    throw error;
+  }
+}
+
+export async function getWishlist() {
+  const { token } = useAuthStore.getState();
+  const headers = token ? { Authorization: `Bearer ${token}` } : {};
+
+  try {
+    const response = await axios.get(`${API_URL}/`, { headers });
+    console.log("Wishlist response:", response.data);
+    return response.data;
+  } catch (error) {
+    console.error("Error fetching wishlist:", error);
+    throw error;
+  }
+}

ArtisanConnect/app/(auth)/login.jsx

@@ -117,13 +117,13 @@ export default function Login() {
                     <VStack className="pb-4" space="xs">
                         <Heading className="leading-[30px]">Logowanie</Heading>
                         <Box className="flex flex-row">
-                            <Link href="/registration" asChild>
+                            {/* <Link href="/registration" asChild> */}
-                                <Button variant="link" size="sm" className="p-0">
+                                <Button variant="link" size="sm" className="p-0" onPress={() => router.replace("/registration")}>
                                     <ButtonText style={styles.signupbutton}>Nie masz jeszcze konta? Załóz je
                                         tutaj!</ButtonText>
                                     <ButtonIcon className="mr-1" size="md" as={ArrowRightIcon}/>
                                 </Button>
-                            </Link>
+                            {/* </Link> */}
                         </Box>
                     </VStack>
                     <VStack space="xl" className="py-2">

ArtisanConnect/app/(tabs)/_layout.jsx

@@ -1,75 +1,70 @@
-import {Tabs} from "expo-router";
+import { Tabs, Redirect } from "expo-router";
-import {Ionicons} from "@expo/vector-icons";
+import { Ionicons } from "@expo/vector-icons";
+import { useAuthStore } from "@/store/authStore";
 
 export default function TabLayout() {
-    return (
+  const token = useAuthStore((state) => state.token);
-        <Tabs
+
-            screenOptions={{
+  if (!token) {
-                tabBarActiveTintColor: "rgb(var(--color-primary-500))",
+    return <Redirect href="/login" />;
-            }}
+  }
-        >
+  return (
-            <Tabs.Screen
+    <Tabs
-                name="index"
+      screenOptions={{
-                options={{
+        tabBarActiveTintColor: "rgb(var(--color-primary-500))",
-                    title: "Home",
+      }}
-                    tabBarLabel: "Home",
+    >
-                    tabBarIcon: ({color, size}) => (
+      <Tabs.Screen
-                        <Ionicons name="home-outline" size={size} color={color}/>
+        name="index"
-                    ),
+        options={{
-                }}
+          title: "Home",
-            />
+          tabBarLabel: "Home",
-            <Tabs.Screen
+          tabBarIcon: ({ color, size }) => (
-                name="notices"
+            <Ionicons name="home-outline" size={size} color={color} />
-                options={{
+          ),
-                    title: "Ogłoszenia",
+        }}
-                    tabBarLabel: "Ogłoszenia",
+      />
-                    tabBarIcon: ({color, size}) => (
+      <Tabs.Screen
-                        <Ionicons name="list-outline" size={size} color={color}/>
+        name="notices"
-                    ),
+        options={{
-                }}
+          title: "Ogłoszenia",
-            />
+          tabBarLabel: "Ogłoszenia",
-            <Tabs.Screen
+          tabBarIcon: ({ color, size }) => (
-                name="notice/create"
+            <Ionicons name="list-outline" size={size} color={color} />
-                options={{
+          ),
-                    title: "Dodaj",
+        }}
-                    tabBarLabel: "Dodaj",
+      />
-                    tabBarIcon: ({color, size}) => (
+      <Tabs.Screen
-                        <Ionicons name="add-circle-outline" size={size} color={color}/>
+        name="notice/create"
-                    ),
+        options={{
-                }}
+          title: "Dodaj",
-            />
+          tabBarLabel: "Dodaj",
-            <Tabs.Screen
+          tabBarIcon: ({ color, size }) => (
-                name="wishlist"
+            <Ionicons name="add-circle-outline" size={size} color={color} />
-                options={{
+          ),
-                    title: "Ulubione",
+        }}
-                    tabBarLabel: "Ulubione",
+      />
-                    tabBarIcon: ({color, size}) => (
+      <Tabs.Screen
-                        <Ionicons name="heart-outline" size={size} color={color}/>
+        name="wishlist"
-                    ),
+        options={{
-                }}
+          title: "Ulubione",
-            />
+          tabBarLabel: "Ulubione",
-            <Tabs.Screen
+          tabBarIcon: ({ color, size }) => (
-                name="login"
+            <Ionicons name="heart-outline" size={size} color={color} />
-                options={{
+          ),
-                    headerShown: false, // Ukryj nagłówek dla Drawer
+        }}
-                    title: "Authentication",
+      />
-                    tabBarLabel: "Authentication",
+      <Tabs.Screen
-                    tabBarIcon: ({color, size}) => (
+        name="dashboard"
-                        <Ionicons name="key" size={size} color={color}/>
+        options={{
-                    ),
+          headerShown: false,
-                }}
+          title: "Konto",
-            />
+          tabBarLabel: "Konto",
-            <Tabs.Screen
+          tabBarIcon: ({ color, size }) => (
-                name="dashboard"
+            <Ionicons name="person-outline" size={size} color={color} />
-                options={{
+          ),
-                    headerShown: false, // Ukryj nagłówek dla Drawer
+        }}
-                    title: "Konto",
+      />
-                    tabBarLabel: "Konto",
+    </Tabs>
-                    tabBarIcon: ({color, size}) => (
+  );
-                        <Ionicons name="person-outline" size={size} color={color}/>
-                    ),
-                }}
-            />
-        </Tabs>
-    );
 }

ArtisanConnect/app/(tabs)/dashboard/_layout.jsx

@@ -1,6 +1,15 @@
+import { DrawerItem } from "@react-navigation/drawer";
 import { Drawer } from "expo-router/drawer";
+import { useAuthStore } from "@/store/authStore";
+
+import {
+  DrawerContentScrollView,
+  DrawerItemList,
+} from "@react-navigation/drawer";
 
 export default function AccountDrawerLayout() {
+  const signOut = useAuthStore((state) => state.signOut);
+
   return (
     <Drawer
       screenOptions={{
@@ -9,10 +18,19 @@ export default function AccountDrawerLayout() {
         drawerActiveBackgroundColor: "#f0f0f0",
         drawerItemStyle: {
           borderRadius: 8,
-          // backgroundColor: "transparent",
         },
         headerTintColor: "#1c1c1e",
       }}
+      drawerContent={(props) => (
+        <DrawerContentScrollView {...props}>
+          <DrawerItemList {...props} />
+          <DrawerItem
+            label="Wyloguj"
+            onPress={signOut}
+            labelStyle={{ color: "red" }}
+          />
+        </DrawerContentScrollView>
+      )}
     >
       <Drawer.Screen name="account" options={{ title: "Konto" }} />
       <Drawer.Screen

ArtisanConnect/app/(tabs)/dashboard/account.jsx

@@ -1,4 +1,105 @@
+import { Link } from "expo-router";
+import { Pressable } from "react-native";
+import { Box } from "@/components/ui/box";
 import { Text } from "@/components/ui/text";
-export default function User() {
+import { VStack } from "@/components/ui/vstack";
-  return <Text>Użytkownik</Text>;
+import { Image } from "@/components/ui/image";
+import { ActivityIndicator } from "react-native";
+import { useEffect, useState } from "react";
+import { getUserById } from "@/api/client";
+import { HStack } from "@gluestack-ui/themed";
+
+export default function Account() {
+  const [user, setUser] = useState(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const currentUserId = 2; // Tymczasowo, do czasu zaimplementowania logowania bo nie moge pobrac usera
+
+  useEffect(() => {
+    const fetchUser = async () => {
+      setIsLoading(true);
+      try {
+        const userData = await getUserById(currentUserId);
+        setUser(userData);
+      } catch (err) {
+        console.error("Błąd podczas pobierania danych użytkownika:", err);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    fetchUser();
+  }, []);
+
+  if (isLoading) {
+    return <ActivityIndicator />;
+  }
+
+  if (!user) {
+    return <Text>Nie udało się pobrać danych użytkownika.</Text>;
+  }
+
+  return (
+    <VStack className="bg-gray-50 flex-1">
+      <Box className="bg-white pb-6 shadow-sm">
+        <Box className="items-center pt-6 mb-4">
+          <Image
+            source={{
+              uri:
+                user.profileImage ||
+                "https://th.bing.com/th/id/OIP.3coo_N8sieled8QNroQmkgHaHa?rs=1&pid=ImgDetMain",
+            }}
+            className="h-24 w-24 rounded-full border-4 border-white shadow-md"
+            alt="Zdjęcie profilowe"
+          />
+        </Box>
+
+        <Text className="text-2xl font-bold text-center mb-1">
+          {user.firstName} {user.lastName}
+        </Text>
+      </Box>
+
+      <Box className="bg-white mt-4 p-5 border-t border-b border-gray-200">
+        <Text className="font-bold text-lg mb-3">Moje dane</Text>
+
+        <HStack className="mb-3">
+          <Text className="text-gray-600 w-24">E-mail</Text>
+          <Text className="flex-1">{user.email || "brak danych"}</Text>
+        </HStack>
+
+        <Pressable
+          className="border border-[#002f34] rounded-md py-2 px-4 self-start"
+          onPress={() => console.log("Edytuj dane użytkownika")}
+        >
+          <Text className="text-[#002f34] font-medium">Edytuj profil</Text>
+        </Pressable>
+      </Box>
+
+      <Box className="bg-white mt-4 p-5">
+        <Text className="font-bold text-lg mb-3">Moje konto</Text>
+
+        <Link href="/dashboard/userNotices" asChild>
+          <Pressable className="py-3 flex-row items-center border-b border-gray-100">
+            <Text className="text-lg flex-1">Moje ogłoszenia</Text>
+            <Text>▶</Text>
+          </Pressable>
+        </Link>
+
+        {/*Tak dodałem, można zmienić na coś innego*/}
+        <Link href="/dashboard/userPaymentHistory" asChild>
+          <Pressable className="py-3 flex-row items-center border-b border-gray-100">
+            <Text className="text-lg flex-1">Historia płatności</Text>
+            <Text>▶</Text>
+          </Pressable>
+        </Link>
+
+        {/* <Pressable className="py-3 flex-row items-center">
+          <Text className="text-lg flex-1">Ustawienia powiadomień</Text>
+          <Text>▶</Text>
+        </Pressable> */}
+      </Box>
+
+      {/* <Pressable className="mt-8 mx-5 p-4 bg-white rounded-md items-center shadow-sm">
+        <Text className="text-red-500 font-medium">Wyloguj się</Text>
+      </Pressable> */}
+    </VStack>
+  );
 }

ArtisanConnect/app/(tabs)/dashboard/userNotices.jsx

@@ -1,4 +1,75 @@
-import { Text } from "@/components/ui/text";
+import { useNoticesStore } from "@/store/noticesStore";
+import { NoticeCard } from "@/components/NoticeCard";
+import {Button} from "react-native";
+import {Box} from "@/components/ui/box";
+import {Text} from "@/components/ui/text";
+import {VStack} from "@/components/ui/vstack";
+import {ActivityIndicator, FlatList } from "react-native";
+import {useEffect, useState} from "react";
+
 export default function UserNotices() {
-  return <Text>Użytkownik</Text>;
+  const { notices, fetchNotices } = useNoticesStore();
-}
+  const [isLoading, setIsLoading] = useState(true);
+  const currentUserId = 1; // Tymczasowo, do czasu zaimplementowania logowania bo nie moge pobrac usera
+
+  useEffect(() => {
+    const loadNotices = async () => {
+      setIsLoading(true);
+      try {
+        await fetchNotices();
+      } catch (err) {
+        console.error("Błąd podczas pobierania ogłoszeń:", err);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    loadNotices();
+  }, []);
+
+  const userNotices = notices.filter(notice => notice.clientId === currentUserId);
+
+  if (isLoading) {
+    return <ActivityIndicator />;
+  }
+
+  return (
+      <VStack className="p-4">
+        <Text className="text-2xl font-bold mb-4">Moje ogłoszenia</Text>
+        {userNotices.length > 0 ? (
+            <FlatList
+                data={userNotices}
+                numColumns={2}
+                columnWrapperStyle={{ marginBottom: 10, justifyContent: "space-between" }}
+                renderItem={({ item }) => (
+                    <Box className="flex-1">
+                      <NoticeCard notice={item} />
+                      <Box className="flex-row justify-between mt-2">
+                        <Button
+                            title="Promuj"
+                            onPress={() => {
+                              // TODO: Implementacja promocji ogłoszenia
+                              console.log(`Promuj ogłoszenie ${item.noticeId}`);
+                            }}
+                            className="bg-primary-500 py-2 px-4 rounded-md"
+                        >
+                        </Button>
+                        <Button
+                            title="Podbij"
+                            onPress={() => {
+                              // TODO: Implementacja podbicia ogłoszenia
+                              console.log(`Podbij ogłoszenie ${item.noticeId}`);
+                            }}
+                            className="bg-primary-500 py-2 px-4 rounded-md"
+                        >
+                        </Button>
+                      </Box>
+                    </Box>
+                )}
+                keyExtractor={(item) => item.noticeId.toString()}
+            />
+        ) : (
+            <Text>Nie masz żadnych ogłoszeń.</Text>
+        )}
+      </VStack>
+  );
+}

ArtisanConnect/app/(tabs)/index.jsx

@@ -1,22 +1,66 @@
-import { View, Text } from "react-native";
+import { ScrollView, View } from "react-native";
-import { Link } from "expo-router";
+import { useNoticesStore } from "@/store/noticesStore";
-import { Button, ButtonText } from "@/components/ui/button";
+import { CategorySection } from "@/components/CategorySection";
+import { NoticeSection } from "@/components/NoticeSection";
+import { UserSection } from "@/components/UserSection";
+import { SearchSection } from "@/components/SearchSection";
+import { FlatList } from "react-native";
+import { useAuthStore } from "@/store/authStore";
+import { useRouter } from "expo-router";
+import { useEffect, useState } from "react";
+import { SafeAreaView } from "react-native";
 
 export default function Home() {
-  return (
+  const token = useAuthStore((state) => state.token);
-    <View>
+  const router = useRouter();
-      <Text>Home</Text>
+  const [isReady, setIsReady] = useState(false);
-      <Link href="/notices" asChild>
+  const fetchNotices = useNoticesStore((state) => state.fetchNotices);
-        <Button>
-          <ButtonText>Ogłoszenia</ButtonText>
-        </Button>
-      </Link>
 
-      <Link href="/wishlist" asChild>
+  useEffect(() => {
-        <Button variant="outline" className="mt-2">
+    setIsReady(true);
-          <ButtonText>Ulubione</ButtonText>
+  }, []);
-        </Button>
+
-      </Link>
+  useEffect(() => {
-    </View>
+    if (isReady && !token) {
+      router.replace("/login");
+    }
+  }, [isReady, token, router]);
+
+  useEffect(() => {
+    if (token) {
+      fetchNotices();
+    }
+  }, [token, fetchNotices]);
+
+  const notices = useNoticesStore((state) => state.notices);
+  // console.log("Notices:", notices);
+
+  const latestNotices = [...notices]
+    .sort((a, b) => new Date(b.publishDate) - new Date(a.publishDate))
+    .slice(0, 6);
+  const recomendedNotices = [...notices]
+    .sort(() => Math.random() - 0.5)
+    .slice(0, 6);
+
+  return (
+    <SafeAreaView className="flex-1 m-2">
+      {/* <View>    */}
+      <SearchSection />
+      <ScrollView showsVerticalScrollIndicator={false}>
+        <CategorySection title="Polecane kategorie" notices={notices} />
+        <NoticeSection
+          title="Najnowsze ogłoszenia"
+          notices={latestNotices}
+          ctaLink="/notices?sort=latest"
+        />
+        <UserSection title="Popularni sprzedawcy" notices={notices} />
+        <NoticeSection
+          title="Proponowane ogłoszenia"
+          notices={recomendedNotices}
+          ctaLink="/notices"
+        />
+      </ScrollView>
+      {/* </View> */}
+    </SafeAreaView>
   );
 }

ArtisanConnect/app/(tabs)/notices.jsx

@@ -1,18 +1,144 @@
-import {FlatList, Text, ActivityIndicator, RefreshControl} from "react-native";
+import { FlatList, Text, ActivityIndicator, RefreshControl, Dimensions } from "react-native";
-import {useState, useEffect} from "react";
+import { useState, useEffect } from "react";
-import {useNoticesStore} from "@/store/noticesStore";
+import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
-import {NoticeCard} from "@/components/NoticeCard";
+import { useNoticesStore } from "@/store/noticesStore";
+import { NoticeCard } from "@/components/NoticeCard";
+import { useLocalSearchParams, useRouter } from "expo-router";
+import { Box } from "@/components/ui/box";
+import { Button, ButtonText } from "@/components/ui/button";
+import { ChevronDownIcon } from "@/components/ui/icon";
+import { listCategories } from "@/api/categories";
+import { FormControl, FormControlLabel } from "@/components/ui/form-control";
+import { Input, InputField } from "@/components/ui/input";
+import { HStack } from "@/components/ui/hstack";
+import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
+import { KeyboardAvoidingView, Platform } from "react-native";
+import {
+    Actionsheet,
+    ActionsheetContent,
+    ActionsheetItem,
+    ActionsheetItemText,
+    ActionsheetDragIndicator,
+    ActionsheetDragIndicatorWrapper,
+    ActionsheetBackdrop,
+} from "@/components/ui/actionsheet";
+import {
+    Select,
+    SelectTrigger,
+    SelectInput,
+    SelectIcon,
+    SelectPortal,
+    SelectBackdrop,
+    SelectContent,
+    SelectDragIndicator,
+    SelectDragIndicatorWrapper,
+    SelectItem,
+} from "@/components/ui/select";
+import { ScrollView } from "react-native-gesture-handler";
 
 export default function Notices() {
-    const {notices, fetchNotices} = useNoticesStore();
+    // Hooks
+    const { notices, fetchNotices } = useNoticesStore();
     const [refreshing, setRefreshing] = useState(false);
     const [isLoading, setIsLoading] = useState(true);
     const [error, setError] = useState(null);
+    const [showActionsheet, setShowActionsheet] = useState(false);
+    const [showSortSheet, setShowSortSheet] = useState(false);
+    const [categories, setCategories] = useState([]);
+    const [filteredNotices, setFilteredNotices] = useState([]);
+    const params = useLocalSearchParams();
+    const router = useRouter();
+
+    useEffect(() => {
+        const fetchSelectItems = async () => {
+            try {
+                const data = await listCategories();
+                if (Array.isArray(data)) {
+                    setCategories(data);
+                } else {
+                    console.error('listCategories did not return an array:', data);
+                    setError(new Error('Invalid categories data'));
+                }
+            } catch (error) {
+                console.error('Error fetching select items:', error);
+                setError(error);
+            }
+        };
+        fetchSelectItems();
+    }, []);
 
     useEffect(() => {
         loadData();
     }, []);
 
+    useEffect(() => {
+        let result = notices;
+
+        if (params.category) {
+            result = result.filter(notice => notice.category === params.category);
+        }
+
+        if (params.sort) {
+            if( params.sort == "latest"){
+                result = [...result].sort(
+                    (a, b) => new Date(b.publishDate) - new Date(a.publishDate)
+                );
+            }else if (params.sort == "oldest") {
+                result = [...result].sort(
+                    (a, b) => new Date(a.publishDate) - new Date(b.publishDate)
+                );
+            }else if (params.sort == "cheapest") {
+                result = [...result].sort((a, b) => {
+                    const priceA = parseFloat(a.price);
+                    const priceB = parseFloat(b.price);
+                    return isNaN(priceA) || isNaN(priceB) ? 0 : priceA - priceB;
+                });
+            }else if (params.sort == "expensive") {
+                result = [...result].sort((a, b) => {
+                    const priceA = parseFloat(a.price);
+                    const priceB = parseFloat(b.price);
+                    return isNaN(priceA) || isNaN(priceB) ? 0 : priceB - priceA;
+                });
+            }
+
+        }
+
+        if (params.priceFrom) {
+            result = result.filter(notice => {
+                const price = parseFloat(notice.price);
+                const priceFrom = parseFloat(params.priceFrom);
+                return !isNaN(price) && price >= priceFrom;
+            });
+        }
+
+        if (params.priceTo) {
+            result = result.filter(notice => {
+                const price = parseFloat(notice.price);
+                const priceTo = parseFloat(params.priceTo);
+                return !isNaN(price) && price <= priceTo;
+            });
+        }
+
+
+        if (params.search) {
+            const searchTerm = params.search.toLowerCase();
+            result = result.filter(notice => {
+                return notice.title.toLowerCase().includes(searchTerm);
+            });
+        }
+
+        setFilteredNotices(result);
+    }, [notices,
+    params.category,
+    params.sort,
+    params.priceFrom,
+    params.priceTo,
+    params.search]);
+
+
+    let filterActive = !!params.category || !!params.sort || !!params.priceFrom || !!params.priceTo || !!params.search;
+
+
     const loadData = async () => {
         setIsLoading(true);
         try {
@@ -25,6 +151,37 @@ export default function Notices() {
         }
     };
 
+    const handleCategorySelect = (value) => {
+        router.replace({
+            pathname: "/notices",
+            params: { ...params, category: value }
+        });
+    };
+
+    const handlePriceFrom = (value) => {
+        router.replace({
+            pathname: "/notices",
+            params: { ...params, priceFrom: value }
+        });
+    }
+
+    const handlePriceTo = (value) => {
+        router.replace({
+            pathname: "/notices",
+            params: { ...params, priceTo: value }
+        });
+    }
+
+    const handleClose = () => setShowActionsheet(false);
+
+    const handleSort = (value) => {
+        router.replace({
+            pathname: "/notices",
+            params: { ...params, sort: value }
+        });
+        setShowSortSheet(false);
+    }
+
     const onRefresh = async () => {
         setRefreshing(true);
         try {
@@ -37,29 +194,162 @@ export default function Notices() {
     };
 
     if (isLoading && !refreshing) {
-        return <ActivityIndicator/>;
+        return <ActivityIndicator />;
     }
 
     if (error) {
-        return <Text>Nie udało sie pobrać listy. {error.message}</Text>;
+        return <Text>Nie udało się pobrać listy. {error.message}</Text>;
     }
 
+    const SCREEN_HEIGHT = Dimensions.get('window').height;
+
+    const selectedCategory = params.category && categories?.find(
+        (cat) => cat.value === params.category
+    ) || null;
+
     return (
-        <FlatList
+        <>
-            key={2}
+            <Box style={{ flexDirection: "row", padding: 8, paddingTop: 16, paddingBottom: 16, backgroundColor: "white", alignItems: "center", justifyContent: "space-between" }}>
-            data={notices}
+                <Box style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
-            numColumns={2}
+                    <Button variant="outline" onPress={() => setShowActionsheet(true)}>
-            columnContainerClassName="m-2"
+                        <ButtonText>Filtruj</ButtonText>
-            columnWrapperClassName="gap-2 m-2"
+                        <Ionicons name="filter-outline" size={20} color="black" />
-            renderItem={({item}) => <NoticeCard notice={item}/>}
+                    </Button>
-            refreshControl={
+                    <Button variant="outline" onPress={() => setShowSortSheet(true)}>
-                <RefreshControl
+                        <Ionicons name="chevron-expand-outline" size={20} color="black" />
-                    refreshing={refreshing}
+                    </Button>
-                    onRefresh={onRefresh}
+                </Box>
-                    colors={["#3b82f6"]}
+                {filterActive && (
-                    tintColor="#3b82f6"
+                    <Button variant="link" onPress={() => router.replace("/notices")}>
-                />
+                        <ButtonText>Wyczyść</ButtonText>
-            }
+                    </Button>
-        />
+                )}
+            </Box>
+            <Actionsheet isOpen={showActionsheet} onClose={handleClose}>
+                <ActionsheetBackdrop />
+                <ActionsheetContent  style={{ maxHeight: SCREEN_HEIGHT * 0.6, width: '100%' }} >
+    <KeyboardAwareScrollView
+      contentContainerStyle={{ flexGrow: 1, width: '100%' }}
+      enableOnAndroid={true}
+      extraScrollHeight={40}
+      >
+                    <ActionsheetDragIndicatorWrapper>
+                        <ActionsheetDragIndicator />
+                    </ActionsheetDragIndicatorWrapper>
+                    <Box className="mb-4" style={{ width: "100%" }}>
+                        <HStack space="md" style={{ width: "100%" }}>
+                            <FormControl
+                                style={{ flex: 1 }}>
+                                <Input>
+                                    <InputField
+                                        keyboardType="numeric"
+                                        placeholder="Od:"
+                                        value={params.priceFrom || ''}
+                                        onChangeText={handlePriceFrom}
+                                    />
+                                </Input>
+                            </FormControl>
+                            <FormControl
+                                style={{ flex: 1 }}>
+                                <Input>
+                                    <InputField
+                                        keyboardType="numeric"
+                                        placeholder="Do:"
+                                        value={params.priceTo || ''}
+                                        onChangeText={handlePriceTo}
+                                    />
+                                </Input>
+                            </FormControl>
+                        </HStack>
+                    </Box>
+                    <Box className="mb-4" style={{ flex: 1 }}>
+                        <Select
+                            style={{  flex: 1  }}
+                            selectedValue={params.category || ''}
+                            onValueChange={handleCategorySelect}
+                        >
+                            <SelectTrigger variant="outline" size="md">
+                                <SelectInput
+                                style={{ flex: 1 }}
+                                    placeholder="Wybierz kategorię"
+                                    value={selectedCategory ? selectedCategory.label : ""}
+                                />
+                                <SelectIcon style={{ marginRight: 12 }} as={ChevronDownIcon} />
+                            </SelectTrigger>
+                            <SelectPortal>
+                                <SelectBackdrop />
+                                <SelectContent
+                                    style={{ maxHeight: SCREEN_HEIGHT * 0.6}}
+                                >
+                                    <SelectDragIndicatorWrapper>
+                                        <SelectDragIndicator />
+                                    </SelectDragIndicatorWrapper>
+                                    <FlatList
+                                        style={{ width: '100%' }}
+                                        data={categories}
+                                        keyExtractor={(item) => item.value?.toString() || item.id?.toString() || Math.random().toString()}
+                                        renderItem={({ item }) => (
+                                            <SelectItem
+                                                label={item.label}
+                                                value={item.value}
+                                            />
+                                        )}
+                                    />
+                                </SelectContent>
+                            </SelectPortal>
+                        </Select>
+                    </Box>
+</KeyboardAwareScrollView>
+                </ActionsheetContent>
+            </Actionsheet>
+            <Actionsheet isOpen={showSortSheet} onClose={() => setShowSortSheet(false)}>
+                <ActionsheetBackdrop />
+                <ActionsheetContent>
+                    <ActionsheetDragIndicatorWrapper>
+                        <ActionsheetDragIndicator />
+                    </ActionsheetDragIndicatorWrapper>
+                    <ActionsheetItem 
+                    className={ !params.sort ? 'bg-gray-200' : ''}
+                    onPress={() => handleSort()}>
+                        <ActionsheetItemText>Trafność</ActionsheetItemText>
+                    </ActionsheetItem>
+                    <ActionsheetItem 
+                     className={ params.sort == 'latest' ? 'bg-gray-200' : ''}
+                    onPress={() => handleSort('latest')}>
+                        <ActionsheetItemText>Najnowsze</ActionsheetItemText>
+                    </ActionsheetItem>
+                    <ActionsheetItem 
+                     className={ params.sort == 'oldest' ? 'bg-gray-200' : ''}
+                    onPress={() => handleSort('oldest')}>
+                        <ActionsheetItemText>Najstarsze</ActionsheetItemText>
+                    </ActionsheetItem>
+                    <ActionsheetItem 
+                     className={ params.sort == 'cheapest' ? 'bg-gray-200' : ''}
+                     onPress={() => handleSort('cheapest')}>
+                        <ActionsheetItemText>Najtańsze</ActionsheetItemText>
+                    </ActionsheetItem>
+                    <ActionsheetItem
+                     className={ params.sort == 'expensive' ? 'bg-gray-200' : ''}
+                    onPress={() => handleSort('expensive')}>
+                        <ActionsheetItemText>Najdroższe</ActionsheetItemText>
+                    </ActionsheetItem>
+                </ActionsheetContent>
+            </Actionsheet>
+            <FlatList
+                data={filteredNotices}
+                numColumns={2}
+                columnWrapperStyle={{ gap: 8, marginHorizontal: 8 }}
+                contentContainerStyle={{ paddingBottom: 16 }}
+                renderItem={({ item }) => <NoticeCard notice={item} />}
+                refreshControl={
+                    <RefreshControl
+                        refreshing={refreshing}
+                        onRefresh={onRefresh}
+                        colors={["#3b82f6"]}
+                        tintColor="#3b82f6"
+                    />
+                }
+            />
+        </>
     );
 }

ArtisanConnect/app/(tabs)/wishlist.jsx

@@ -4,9 +4,17 @@ import { NoticeCard } from "@/components/NoticeCard";
 import { Ionicons } from "@expo/vector-icons";
 import { Box } from "@/components/ui/box";
 import { Text } from "@/components/ui/text";
+import { useEffect } from "react";
 
 export default function Wishlist() {
   const wishlistNotices = useWishlist((state) => state.wishlistNotices);
+  const fetchWishlist = useWishlist((state) => state.fetchWishlist);
+
+  useEffect(() => {
+    fetchWishlist();
+  }, []);
+
+  // console.log("Wishlist notices:", wishlistNotices);
   if (wishlistNotices.length === 0) {
     return (
       <Box className="flex-row flex-1 justify-center">

ArtisanConnect/app/_layout.jsx

@@ -1,11 +1,12 @@
-import { Stack } from "expo-router";
+import { Stack, Redirect } from "expo-router";
 import "@/global.css";
 import { GluestackUIProvider } from "@/components/ui/gluestack-ui-provider";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 
 const queryClient = new QueryClient();
 export default function RootLayout() {
-  return (
+  
+return (
     <QueryClientProvider client={queryClient}>
       <GluestackUIProvider>
         <Stack
@@ -16,6 +17,12 @@ export default function RootLayout() {
           }}
         >
           <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
+          <Stack.Screen
+            name="(auth)/login"
+            options={{ headerShown: false }}/>
+          <Stack.Screen 
+          name="registration"
+          options={{ headerShown: false }}/>
         </Stack>
       </GluestackUIProvider>
     </QueryClientProvider>

ArtisanConnect/app/notice/[id].jsx

@@ -1,133 +1,337 @@
-import {Stack, useLocalSearchParams} from "expo-router";
+import { Link, Stack, useLocalSearchParams } from "expo-router";
-import {Box} from "@/components/ui/box";
+import { Box } from "@/components/ui/box";
-import {Card} from "@/components/ui/card";
+import { Card } from "@/components/ui/card";
-import {Heading} from "@/components/ui/heading";
+import { Heading } from "@/components/ui/heading";
-import {Image} from "@/components/ui/image";
+import { Image } from "@/components/ui/image";
-import {Text} from "@/components/ui/text";
+import { Text } from "@/components/ui/text";
-import {VStack} from "@/components/ui/vstack";
+import { VStack } from "@/components/ui/vstack";
-import {Ionicons} from "@expo/vector-icons";
+import { Ionicons } from "@expo/vector-icons";
-import {ActivityIndicator} from "react-native";
+import {
-import {useEffect, useState} from "react";
+  ActivityIndicator,
-import {useNoticesStore} from "@/store/noticesStore";
+  Dimensions,
-import {useWishlist} from "@/store/wishlistStore";
+  FlatList,
-import {Pressable} from "react-native";
+  View,
+  TextInput,
+} from "react-native";
+import { useEffect, useState, useRef } from "react";
+import { useNoticesStore } from "@/store/noticesStore";
+import { useWishlist } from "@/store/wishlistStore";
+import { Pressable, ScrollView } from "react-native";
+import { getUserById } from "@/api/client";
+
+const { width } = Dimensions.get("window");
 
 export default function NoticeDetails() {
-    const {id} = useLocalSearchParams();
+  const { id } = useLocalSearchParams();
-    const [image, setImage] = useState(null);
+  const [images, setImages] = useState([]);
-    const [isImageLoading, setIsImageLoading] = useState(true);
+  const [isImageLoading, setIsImageLoading] = useState(true);
-    const [isLoading, setIsLoading] = useState(true);
+  const [isLoading, setIsLoading] = useState(true);
-    const [error, setError] = useState(null);
+  const [error, setError] = useState(null);
-    const [notice, setNotice] = useState(null);
+  const [notice, setNotice] = useState(null);
+  const [user, setUser] = useState(null);
+  const [isUserLoading, setIsUserLoading] = useState(true);
+  const flatListRef = useRef(null);
+  const [currentIndex, setCurrentIndex] = useState(0);
 
-    const {getNoticeById, getAllImagesByNoticeId} = useNoticesStore();
+  const [isMessageFormVisible, setIsMessageFormVisible] = useState(false);
-    const addNoticeToWishlist = useWishlist((state) => state.addNoticeToWishlist);
+  const [message, setMessage] = useState("");
-    const removeNoticeFromWishlist = useWishlist((state) => state.removeNoticeFromWishlist);
+  const [Email, setEmail] = useState("");
-    const isInWishlist = useWishlist((state) =>
+  const handleSendMessage = () => {
-        notice ? state.wishlistNotices.some((item) => item.noticeId === notice.noticeId) : false
+    console.log("Wiadomość do:", user?.email);
-    );
+    console.log("Email nadawcy:", Email);
+    console.log("Treść:", message);
 
-    useEffect(() => {
+    setIsMessageFormVisible(false);
-        const fetchNotice = async () => {
+    setMessage("");
-            setIsLoading(true);
+    setEmail("");
-            try {
+  };
-                const noticeData = getNoticeById(Number(id));
-                if (noticeData) {
-                    setNotice(noticeData);
-                    setError(null);
-                } else {
-                    setError(new Error(`Notice with ID ${id} not found.`));
-                }
-            } catch (err) {
-                setError(err);
-            } finally {
-                setIsLoading(false);
-            }
-        };
 
-        fetchNotice();
+  const formatDate = (dateString) => {
-    }, [id]);
+    const date = new Date(dateString);
+    return date.toLocaleDateString("pl-PL", {
+      year: "numeric",
+      month: "2-digit",
+      day: "2-digit",
+    });
+  };
 
-    useEffect(() => {
+  const { getNoticeById, getAllImagesByNoticeId } = useNoticesStore();
-        const fetchImage = async () => {
+  const toggleNoticeInWishlist = useWishlist(
-            setIsImageLoading(true);
+    (state) => state.toggleNoticeInWishlist
-            if (notice) {
+  );
-                try {
-                    const images = await getAllImagesByNoticeId(notice.noticeId);
-                    setImage(images && images.length > 0 ? images[0] : "https://http.cat/404.jpg");
-                } catch (err) {
-                    console.error("Error while loading images:", err);
-                    setImage("https://http.cat/404.jpg");
-                } finally {
-                    setIsImageLoading(false);
-                }
-            }
-        };
 
-        if (notice) {
+  const isInWishlist = useWishlist((state) =>
-            fetchImage();
+    id ? state.wishlistNotices.some((item) => item.noticeId == id) : false
+  );
+  const onViewableItemsChanged = useRef(({ viewableItems }) => {
+    if (viewableItems.length > 0) {
+      setCurrentIndex(viewableItems[0].index);
+    }
+  }).current;
+
+  const viewabilityConfig = useRef({
+    itemVisiblePercentThreshold: 70,
+  }).current;
+
+  useEffect(() => {
+    const fetchNotice = async () => {
+      setIsLoading(true);
+      try {
+        const noticeData = getNoticeById(Number(id));
+        if (noticeData) {
+          setNotice(noticeData);
+          setError(null);
+        } else {
+          setError(new Error(`Notice with ID ${id} not found.`));
         }
-    }, [notice]);
+      } catch (err) {
+        setError(err);
+      } finally {
+        setIsLoading(false);
+      }
+    };
 
-    if (isLoading) {
+    fetchNotice();
-        return <ActivityIndicator/>;
+  }, [id]);
+
+  useEffect(() => {
+    const fetchImage = async () => {
+      setIsImageLoading(true);
+      if (notice) {
+        try {
+          const fetchedImages = await getAllImagesByNoticeId(notice.noticeId);
+          setImages(
+            fetchedImages && fetchedImages.length > 0
+              ? fetchedImages
+              : ["https://http.cat/404.jpg"]
+          );
+        } catch (err) {
+          console.error("Error while loading images:", err);
+          setImage("https://http.cat/404.jpg");
+        } finally {
+          setIsImageLoading(false);
+        }
+      }
+    };
+
+    if (notice) {
+      fetchImage();
     }
+  }, [notice]);
 
-    if (error) {
+  useEffect(() => {
-        return <Text>Błąd, spróbuj ponownie póżniej: {error.message}</Text>;
+    const fetchUser = async () => {
-    }
+      if (notice && notice.clientId) {
+        setIsUserLoading(true);
+        try {
+          const userData = await getUserById(notice.clientId);
+          setUser(userData);
+        } catch (err) {
+          console.error("Nie udało się pobrać danych użytkownika:", err);
+        } finally {
+          setIsUserLoading(false);
+        }
+      }
+    };
 
-    if (!notice) {
+    fetchUser();
-        return <Text>Nie znaleziono ogłoszenia</Text>;
+  }, [notice]);
-    }
 
-    return (
+  if (isLoading) {
-        <Card className="p-0 rounded-lg m-3 flex-1">
+    return <ActivityIndicator />;
-            <Stack.Screen
+  }
-                options={{
+
-                    title: notice.title,
+  if (error) {
-                }}
+    return <Text>Błąd, spróbuj ponownie póżniej: {error.message}</Text>;
-            />
+  }
-            {isImageLoading ? (
+
-                <Box className="h-auto w-full rounded-md aspect-[1/1] bg-gray-100 items-center justify-center">
+  if (!notice) {
-                    <ActivityIndicator size="large" color="#3b82f6" />
+    return <Text>Nie znaleziono ogłoszenia</Text>;
-                </Box>
+  }
-            ) : (
+
+  return (
+    <Card className="p-0 rounded-lg m-3 flex-1">
+      <Stack.Screen
+        options={{
+          title: notice.title,
+        }}
+      />
+      {isImageLoading ? (
+        <Box className="h-auto w-full rounded-md aspect-[1/1] bg-gray-100 items-center justify-center">
+          <ActivityIndicator size="large" color="#3b82f6" />
+        </Box>
+      ) : (
+        <Box className="sticky top-0 z-10 bg-white">
+          <FlatList
+            ref={flatListRef}
+            data={images}
+            horizontal
+            snapToAlignment="center"
+            decelerationRate="fast"
+            showsHorizontalScrollIndicator={false}
+            pagingEnabled
+            onViewableItemsChanged={onViewableItemsChanged}
+            viewabilityConfig={viewabilityConfig}
+            renderItem={({ item, index }) => (
+              <View style={{ width: width }}>
                 <Image
-                    source={{
+                  source={{ uri: item }}
-                        uri: image,
+                  className="h-auto w-full rounded-md aspect-square"
-                    }}
+                  alt={`Zdjęcie ${index + 1}`}
-                    className="h-auto w-full rounded-md aspect-[1/1]"
+                  resizeMode="contain"
-                    alt="image"
-                    resizeMode="cover"
                 />
+              </View>
             )}
+            keyExtractor={(item, index) => index.toString()}
+          />
 
-            <VStack className="p-2">
+          {images.length > 1 && (
-                <Text className="text-sm font-normal mb-2 text-typography-700">
+            <Box className="flex-row justify-center mt-2">
-                    {notice.title}
+              {images.map((_, index) => (
-                </Text>
+                <Box
-                <Box className="flex-row items-center">
+                  key={index}
-                    <Heading size="md" className="flex-1">
+                  className={`w-2 h-2 rounded-full mx-1 ${
-                        {notice.price}zł
+                    index === currentIndex ? "bg-primary-500" : "bg-gray-300"
-                    </Heading>
+                  }`}
-                    <Pressable
+                />
-                        onPress={() => {
+              ))}
-                            if (isInWishlist) {
+            </Box>
-                                removeNoticeFromWishlist(notice.noticeId);
+          )}
-                            } else {
+        </Box>
-                                addNoticeToWishlist(notice);
+      )}
-                            }
+
-                        }}
+      <ScrollView showsVerticalScrollIndicator={false}>
-                    >
+        <VStack className="p-2">
-                        <Ionicons
+          <Text className="text-sm font-normal mb-2 text-typography-700">
-                            name={isInWishlist ? "heart" : "heart-outline"}
+            {formatDate(notice.publishDate)}
-                            size={24}
+          </Text>
-                            color={"primary-heading-500"}
+          <Text className="text-2xl text-gray-950 font-bold mb-2 text-center bg-gray-50 rounded-md p-2">
-                        />
+            {notice.title}
-                    </Pressable>
+          </Text>
+
+          <Box className="flex-row items-center  bg-gray-50 rounded-md p-2">
+            <Heading size="md" className="flex-1 text-xl text-gray-950">
+              <Text className="text-sm text-typography-500">Cena: </Text>
+              {notice.price} zł
+            </Heading>
+
+            <Pressable
+              onPress={() => {
+                toggleNoticeInWishlist(id);
+              }}
+            >
+              <Ionicons
+                name={isInWishlist ? "heart" : "heart-outline"}
+                size={24}
+                color={"primary-heading-500"}
+              />
+            </Pressable>
+          </Box>
+          <Box className="mt-4 bg-gray-50 p-3 rounded-lg shadow-sm">
+            <Text className="text-sm text-typography-500">
+              Kategoria:{" "}
+              <Text className="font-bold text-gray-950">{notice.category}</Text>
+            </Text>
+          </Box>
+          <Box className="mt-4 bg-gray-50 p-3 rounded-lg shadow-sm">
+            <Text className="text-2xl text-gray-950">Opis ogloszenia</Text>
+            <Text className="text-sm text-typography-700">
+              {notice.description}
+            </Text>
+          </Box>
+
+          <Box className="mt-4 bg-gray-50 p-3 rounded-lg shadow-sm">
+            <Text className="text-sm text-typography-500">Uzytkownik:</Text>
+            {isUserLoading ? (
+              <ActivityIndicator />
+            ) : user ? (
+              <>
+                <Box className="mr-4">
+                  <Image
+                    source={{
+                      uri:
+                        user.profileImage ||
+                        "https://th.bing.com/th/id/OIP.3coo_N8sieled8QNroQmkgHaHa?rs=1&pid=ImgDetMain",
+                    }} // Domyślny obraz, jeśli brak zdjęcia profilowego
+                    className="h-12 w-12 rounded-full"
+                    alt="Zdjęcie profilowe"
+                  />
                 </Box>
-            </VStack>
+
-        </Card>
+                <Box className="flex-1">
-    );
+                  <Text className="text-xl font-bold text-gray-950">
-}
+                    {user.firstName} {user.lastName}
+                  </Text>
+                  <Text className="text-sm text-typography-700">
+                    Email: {user.email}
+                  </Text>
+                  <Pressable
+                    onPress={() => setIsMessageFormVisible(true)}
+                    className="mt-3 bg-primary-500 py-2 px-4 rounded-md"
+                  >
+                    <Text className="text-white text-center font-bold">
+                      Wyślij wiadomość
+                    </Text>
+                  </Pressable>
+                  <Link href={`/user/${notice.clientId}`}>
+                    <Text className="text-xl p-3 font-bold text-center text-typography-700 mt-3">
+                      Zobacz więcej ogłoszeń od {user.firstName}
+                    </Text>
+                  </Link>
+                </Box>
+              </>
+            ) : (
+              <Text>Błąd podczas ładowania danych użytkownika</Text>
+            )}
+          </Box>
+        </VStack>
+      </ScrollView>
+      {isMessageFormVisible && (
+        <View className="absolute inset-0 bg-black bg-opacity-50 justify-center items-center z-20">
+          <View className="bg-white p-4 rounded-lg w-4/5">
+            <Text className="text-lg font-bold mb-4">
+              Wyślij wiadomość do {user?.firstName}
+            </Text>
+
+            <Text className="text-sm font-medium mb-1">Do:</Text>
+            <Text className="bg-gray-100 p-3 rounded text-gray-500">
+              {user?.email || "Brak adresu e-mail"}
+            </Text>
+            <Text className="text-sm font-medium mb-1">Twój e-mail:</Text>
+            <TextInput
+              className="border border-gray-300 p-2 rounded"
+              placeholder="Wpisz swój adres e-mail"
+              value={Email}
+              onChangeText={setEmail}
+            />
+
+            <TextInput
+              className="border border-gray-300 rounded-md p-2 mb-4 h-32 text-left"
+              multiline
+              numberOfLines={4}
+              placeholder="Napisz swoją wiadomość..."
+              value={message}
+              onChangeText={setMessage}
+            />
+
+            <View className="flex-row justify-end space-x-2">
+              <Pressable
+                onPress={() => setIsMessageFormVisible(false)}
+                className="bg-gray-300 py-2 px-4 rounded-md"
+              >
+                <Text className="text-gray-800">Anuluj</Text>
+              </Pressable>
+
+              <Pressable
+                onPress={handleSendMessage}
+                className="bg-primary-500 py-2 px-4 rounded-md"
+              >
+                <Text className="text-white">Wyślij</Text>
+              </Pressable>
+            </View>
+          </View>
+        </View>
+      )}
+    </Card>
+  );
+}

ArtisanConnect/app/registration.jsx

@@ -4,11 +4,13 @@ import {useAuthStore} from '@/store/authStore';
 import {useRouter} from 'expo-router';
 
 import {Box} from "@/components/ui/box"
-import {Button, ButtonText} from "@/components/ui/button"
+import {Button, ButtonText,ButtonIcon} from "@/components/ui/button"
+import {ArrowRightIcon} from "@/components/ui/icon"
 import {Center} from "@/components/ui/center"
 import {Heading} from "@/components/ui/heading"
 import {Input, InputField} from "@/components/ui/input"
 import {VStack} from "@/components/ui/vstack"
+import {Link} from "expo-router"
 
 export default function Registration() {
     const [email, setEmail] = useState('');
@@ -44,9 +46,18 @@ export default function Registration() {
     return (
         <SafeAreaView style={styles.container}>
             <Center>
+    
                 <Box className="p-5 w-[80%] border border-background-300 rounded-lg">
                     <VStack className="pb-4" space="xs">
                         <Heading className="leading-[30px]">Rejestracja</Heading>
+                        <Box className="flex flex-row">
+                           {/* <Link href="/login" asChild> */}
+                                <Button variant="link" size="sm" className="p-0" onPress={() => router.replace("/login")}>
+                                    <ButtonText style={styles.signupbutton}>Masz już konto? Zaloguj się!</ButtonText>
+                                    <ButtonIcon className="mr-1" size="md" as={ArrowRightIcon}/>
+                                </Button>
+                            {/* </Link>  */}
+                        </Box>
                     </VStack>
                     <VStack space="xl" className="py-2">
                         <Input>
@@ -69,6 +80,7 @@ export default function Registration() {
                         </Button>
                     </VStack>
                 </Box>
+             
             </Center>
         </SafeAreaView>
     );
@@ -93,4 +105,8 @@ const styles = StyleSheet.create({
         color: 'red',
         marginBottom: 10,
     },
+     signupbutton: {
+        fontWeight: '300',
+        textAlign: 'left',
+    },
 });

ArtisanConnect/app/user/[userId].jsx

@@ -0,0 +1,69 @@
+import { useLocalSearchParams } from "expo-router";
+import { useState, useEffect } from "react";
+import { FlatList, ActivityIndicator, Text } from "react-native";
+import { Box } from "@/components/ui/box";
+import { Image } from "@/components/ui/image";
+import { VStack } from "@/components/ui/vstack";
+import { Heading } from "@/components/ui/heading";
+import { getUserById } from "@/api/client";
+import { useNoticesStore } from "@/store/noticesStore";
+import { NoticeCard } from "@/components/NoticeCard";
+
+export default function UserProfile() {
+    const { userId } = useLocalSearchParams();
+    const [user, setUser] = useState(null);
+    const [isUserLoading, setIsUserLoading] = useState(true);
+    const { notices } = useNoticesStore();
+
+    useEffect(() => {
+        const fetchUser = async () => {
+            setIsUserLoading(true);
+            try {
+                const userData = await getUserById(Number(userId));
+                setUser(userData);
+            } catch (err) {
+                console.error("Błąd podczas pobierania danych użytkownika:", err);
+                setUser(null);
+            } finally {
+                setIsUserLoading(false);
+            }
+        };
+        fetchUser();
+    }, [userId]);
+
+    if (isUserLoading) {
+        return <ActivityIndicator />;
+    }
+
+    if (!user) {
+        return <Text>Nie znaleziono użytkownika</Text>;
+    }
+
+    const userNotices = notices.filter(notice => notice.clientId === Number(userId));
+
+    return (
+        <VStack className="p-4">
+            <Box className="flex-row items-center mb-4">
+                <Image
+                    source={{ uri: user.profileImage || "https://th.bing.com/th/id/OIP.3coo_N8sieled8QNroQmkgHaHa?rs=1&pid=ImgDetMain" }}
+                    className="h-16 w-16 rounded-full mr-4"
+                    alt="Zdjęcie profilowe"
+                />
+                <Heading size="lg">
+                    {user.firstName} {user.lastName}
+                </Heading>
+            </Box>
+            {userNotices.length > 0 ? (
+                <FlatList
+                    data={userNotices}
+                    numColumns={2}
+                    columnWrapperStyle={{ marginBottom: 10, justifyContent: "space-between" }}
+                    renderItem={({ item }) => <NoticeCard notice={item} />}
+                    keyExtractor={(item) => item.noticeId.toString()}
+                />
+            ) : (
+                <Text>Ten użytkownik nie ma żadnych ogłoszeń.</Text>
+            )}
+        </VStack>
+    );
+}

ArtisanConnect/components/CategorySection.jsx

@@ -0,0 +1,59 @@
+import { View, FlatList } from "react-native";
+import { useEffect, useState } from "react";
+import { useAuthStore } from "@/store/authStore";
+import { Heading } from "@/components/ui/heading";
+import { Text } from "@/components/ui/text";
+import { Link } from "expo-router";
+import { Pressable } from "@/components/ui/pressable";
+import { listCategories } from "@/api/categories";
+
+export function CategorySection({ notices, title }) {
+  const [categoryMap, setCategoryMap] = useState({});
+
+  useEffect(() => {
+    const fetchCategories = async () => {
+      let data = await listCategories();
+      if (Array.isArray(data)) {
+        setCategoryMap(data);
+      }
+    };
+
+    fetchCategories();
+  });
+
+  const categories = Array.from(
+    new Set(notices.map((notice) => notice.category))
+  ).filter(Boolean);
+
+  const getCount = (category) =>
+    notices.filter((notice) => notice.category === category).length;
+
+  if (!categoryMap || Object.keys(categoryMap).length === 0) {
+    return null;
+  }
+
+  return (
+    <View className="mb-6">
+      <Heading className="text-2xl font-bold mb-4 mt-4">{title}</Heading>
+      <FlatList
+        data={categories}
+        keyExtractor={(item) => item}
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        contentContainerStyle={{ paddingHorizontal: 8, gap: 12 }}
+        renderItem={({ item }) => {
+          const categoryObj = categoryMap.find((cat) => cat.value === item);
+          return (
+            <Link href={`/notices?category=${item}`} asChild>
+              <Pressable className="bg-gray-200 p-4 rounded-lg mr-2">
+                <Text>
+                  {categoryObj ? categoryObj.label : item} ({getCount(item)})
+                </Text>
+              </Pressable>
+            </Link>
+          );
+        }}
+      />
+    </View>
+  );
+}

ArtisanConnect/components/NoticeCard.jsx

@@ -14,8 +14,7 @@ import {useEffect, useState} from "react";
 export function NoticeCard({notice}) {
     const noticeId = notice?.noticeId;
 
-    const addNoticeToWishlist = useWishlist((state) => state.addNoticeToWishlist);
+    const toggleNoticeInWishlist = useWishlist((state) => state.toggleNoticeInWishlist);
-    const removeNoticeFromWishlist = useWishlist((state) => state.removeNoticeFromWishlist);
     const isInWishlist = useWishlist((state) =>
         noticeId ? state.wishlistNotices.some((item) => item.noticeId === noticeId) : false
     );
@@ -94,11 +93,7 @@ export function NoticeCard({notice}) {
                             </Heading>
                             <Pressable
                                 onPress={() => {
-                                    if (isInWishlist) {
+                                 toggleNoticeInWishlist(noticeId);
-                                        removeNoticeFromWishlist(noticeId);
-                                    } else {
-                                        addNoticeToWishlist(notice);
-                                    }
                                 }}
                             >
                                 <Ionicons

ArtisanConnect/components/NoticeSection.jsx

@@ -0,0 +1,35 @@
+import { View} from 'react-native';
+import { Heading } from '@/components/ui/heading';
+import { Link } from 'expo-router';
+import { FlatList } from 'react-native';
+import {NoticeCard} from "@/components/NoticeCard";
+import { Box } from '@/components/ui/box';
+import { HStack } from "@/components/ui/hstack"
+import { VStack } from '@/components/ui/vstack';
+import { Button, ButtonText } from "@/components/ui/button"
+
+export function NoticeSection({ notices, title, ctaLink=''}) {
+  const rows = [];
+  for (let i = 0; i < notices.length; i += 2) {
+    rows.push(
+      <HStack key={i} space="md">
+        <NoticeCard notice={notices[i]} />
+        {notices[i + 1] && <NoticeCard notice={notices[i + 1]} />}
+      </HStack>
+    );
+  }
+  return (
+    <View className="mb-6">
+      <Heading className="text-2xl font-bold mb-4 mt-4">{title}</Heading>      
+      <VStack space="md">
+        {rows}
+      </VStack>
+      {ctaLink && (
+        <Link href={ctaLink} asChild>
+      <Button className="mt-6" size="md" variant="solid" action="primary">
+      <ButtonText>Zobacz więcej</ButtonText>
+    </Button>
+    </Link>)}
+    </View>
+  );
+}

ArtisanConnect/components/SearchSection.jsx

@@ -0,0 +1,31 @@
+import { Input, InputField, InputIcon, InputSlot } from "@/components/ui/input"
+import { SearchIcon } from "@/components/ui/icon"
+import { Box } from "@/components/ui/box"
+import { useRouter } from "expo-router";
+import { View } from "react-native";
+
+export function SearchSection({ searchQuery, setSearchQuery }) {
+    const router = useRouter();
+
+  const handleSubmit = (e) => {
+    const value = e.nativeEvent.text;
+    router.push({
+      pathname: "/notices",
+      params: { search: value }
+    });
+  };
+  return (
+    <Box className="mb-2 bg-white p-2 rounded-md">
+      <Input className="p-2">
+        <InputSlot>
+          <InputIcon as={SearchIcon} />
+        </InputSlot>
+        <InputField placeholder="Wyszukaj..."
+          value={searchQuery}
+          onChangeText={setSearchQuery}
+          onSubmitEditing={handleSubmit}
+          returnKeyType="search" />
+      </Input>
+    </Box>
+  )
+}

ArtisanConnect/components/UserBlock.jsx

@@ -0,0 +1,23 @@
+import { VStack } from '@/components/ui/vstack';
+import { Avatar, AvatarImage, AvatarFallbackText } from "@/components/ui/avatar";
+import { Heading } from "@/components/ui/heading";
+import { Box } from '@/components/ui/box';
+
+export default function UserBlock({ user }) {
+      
+      return (
+      <Box className="rounded-md bg-white p-4 items-center justify-center mb-6" >
+      <VStack space="md" className='items-center'>
+        <Avatar>
+          <AvatarFallbackText>{user.firstName} {user.lastName}</AvatarFallbackText>
+          <AvatarImage
+            source={{
+              uri: user.image,
+            }}
+          />
+        </Avatar>
+          <Heading size="sm">{user.firstName} {user.lastName}</Heading>
+      </VStack>
+      </Box>
+      );
+}

ArtisanConnect/components/UserSection.jsx

@@ -0,0 +1,46 @@
+import { View } from "react-native";
+import { useEffect, useState } from "react";
+import { Heading } from "@/components/ui/heading";
+import { FlatList } from "react-native";
+import axios from "axios";
+import UserBlock from "@/components/UserBlock";
+import { useAuthStore } from "@/store/authStore";
+
+export function UserSection({ notices, title }) {
+  const token = useAuthStore((state) => state.token);
+  const headers = token ? { Authorization: `Bearer ${token}` } : {};
+  const [users, setUsers] = useState([]);
+
+  useEffect(() => {
+    if (token) {
+      axios
+        .get("https://hopp.zikor.pl/api/v1/clients/get/all", { headers })
+        .then((res) => setUsers(res.data))
+        .catch(() => setUsers([]));
+    }
+  }, [token]);
+
+  const usersWithNoticeCount = users.map((user) => {
+    const count = notices.filter((n) => n.clientId === user.id).length;
+    return { ...user, noticeCount: count };
+  });
+
+  const topUsers = usersWithNoticeCount
+    .sort((a, b) => b.noticeCount - a.noticeCount)
+    .slice(0, 5);
+
+  return (
+    <View className="mb-6">
+      <Heading className="text-2xl font-bold mb-4 mt-4">{title}</Heading>
+      <FlatList
+        data={topUsers}
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        contentContainerStyle={{ paddingHorizontal: 8, gap: 12 }}
+        renderItem={({ item }) => {
+          return <UserBlock user={item} />;
+        }}
+      />
+    </View>
+  );
+}

ArtisanConnect/components/ui/actionsheet/index.tsx

@@ -0,0 +1,569 @@
+'use client';
+import React from 'react';
+import { H4 } from '@expo/html-elements';
+import { createActionsheet } from '@gluestack-ui/actionsheet';
+import {
+  Pressable,
+  View,
+  Text,
+  ScrollView,
+  VirtualizedList,
+  FlatList,
+  SectionList,
+  PressableProps,
+  ViewStyle,
+} from 'react-native';
+import { PrimitiveIcon, UIIcon } from '@gluestack-ui/icon';
+import { tva } from '@gluestack-ui/nativewind-utils/tva';
+import type { VariantProps } from '@gluestack-ui/nativewind-utils';
+import { cssInterop } from 'nativewind';
+import {
+  Motion,
+  AnimatePresence,
+  createMotionAnimatedComponent,
+  MotionComponentProps,
+} from '@legendapp/motion';
+
+const ItemWrapper = React.forwardRef<
+  React.ComponentRef<typeof Pressable>,
+  PressableProps
+>(function ItemWrapper({ ...props }, ref) {
+  return <Pressable {...props} ref={ref} />;
+});
+
+type IMotionViewProps = React.ComponentProps<typeof View> &
+  MotionComponentProps<typeof View, ViewStyle, unknown, unknown, unknown>;
+
+const MotionView = Motion.View as React.ComponentType<IMotionViewProps>;
+
+type IAnimatedPressableProps = React.ComponentProps<typeof Pressable> &
+  MotionComponentProps<typeof Pressable, ViewStyle, unknown, unknown, unknown>;
+
+const AnimatedPressable = createMotionAnimatedComponent(
+  Pressable
+) as React.ComponentType<IAnimatedPressableProps>;
+
+export const UIActionsheet = createActionsheet({
+  Root: View,
+  Content: MotionView,
+  Item: ItemWrapper,
+  ItemText: Text,
+  DragIndicator: View,
+  IndicatorWrapper: View,
+  Backdrop: AnimatedPressable,
+  ScrollView: ScrollView,
+  VirtualizedList: VirtualizedList,
+  FlatList: FlatList,
+  SectionList: SectionList,
+  SectionHeaderText: H4,
+  Icon: UIIcon,
+  AnimatePresence: AnimatePresence,
+});
+
+cssInterop(UIActionsheet, { className: 'style' });
+cssInterop(UIActionsheet.Content, { className: 'style' });
+cssInterop(ItemWrapper, { className: 'style' });
+cssInterop(UIActionsheet.ItemText, { className: 'style' });
+cssInterop(UIActionsheet.DragIndicator, { className: 'style' });
+cssInterop(UIActionsheet.DragIndicatorWrapper, { className: 'style' });
+cssInterop(UIActionsheet.Backdrop, { className: 'style' });
+cssInterop(UIActionsheet.ScrollView, {
+  className: 'style',
+  contentContainerClassName: 'contentContainerStyle',
+  indicatorClassName: 'indicatorStyle',
+});
+cssInterop(UIActionsheet.VirtualizedList, {
+  className: 'style',
+  ListFooterComponentClassName: 'ListFooterComponentStyle',
+  ListHeaderComponentClassName: 'ListHeaderComponentStyle',
+  contentContainerClassName: 'contentContainerStyle',
+  indicatorClassName: 'indicatorStyle',
+});
+cssInterop(UIActionsheet.FlatList, {
+  className: 'style',
+  ListFooterComponentClassName: 'ListFooterComponentStyle',
+  ListHeaderComponentClassName: 'ListHeaderComponentStyle',
+  columnWrapperClassName: 'columnWrapperStyle',
+  contentContainerClassName: 'contentContainerStyle',
+  indicatorClassName: 'indicatorStyle',
+});
+cssInterop(UIActionsheet.SectionList, { className: 'style' });
+cssInterop(UIActionsheet.SectionHeaderText, { className: 'style' });
+
+cssInterop(PrimitiveIcon, {
+  className: {
+    target: 'style',
+    nativeStyleToProp: {
+      height: true,
+      width: true,
+      fill: true,
+      color: 'classNameColor',
+      stroke: true,
+    },
+  },
+});
+
+const actionsheetStyle = tva({ base: 'w-full h-full web:pointer-events-none' });
+
+const actionsheetContentStyle = tva({
+  base: 'items-center rounded-tl-3xl rounded-tr-3xl p-5 pt-2 bg-background-0 web:pointer-events-auto web:select-none shadow-hard-5 border border-b-0 border-outline-100',
+});
+
+const actionsheetItemStyle = tva({
+  base: 'w-full flex-row items-center p-3 rounded-sm data-[disabled=true]:opacity-40 data-[disabled=true]:web:pointer-events-auto data-[disabled=true]:web:cursor-not-allowed hover:bg-background-50 active:bg-background-100 data-[focus=true]:bg-background-100 web:data-[focus-visible=true]:bg-background-100 web:data-[focus-visible=true]:outline-indicator-primary gap-2',
+});
+
+const actionsheetItemTextStyle = tva({
+  base: 'text-typography-700 font-normal font-body',
+  variants: {
+    isTruncated: {
+      true: '',
+    },
+    bold: {
+      true: 'font-bold',
+    },
+    underline: {
+      true: 'underline',
+    },
+    strikeThrough: {
+      true: 'line-through',
+    },
+    size: {
+      '2xs': 'text-2xs',
+      'xs': 'text-xs',
+      'sm': 'text-sm',
+      'md': 'text-base',
+      'lg': 'text-lg',
+      'xl': 'text-xl',
+      '2xl': 'text-2xl',
+      '3xl': 'text-3xl',
+      '4xl': 'text-4xl',
+      '5xl': 'text-5xl',
+      '6xl': 'text-6xl',
+    },
+  },
+});
+
+const actionsheetDragIndicatorStyle = tva({
+  base: 'w-16 h-1 bg-background-400 rounded-full',
+});
+
+const actionsheetDragIndicatorWrapperStyle = tva({
+  base: 'w-full py-1 items-center',
+});
+
+const actionsheetBackdropStyle = tva({
+  base: 'absolute left-0 top-0 right-0 bottom-0 bg-background-dark web:cursor-default web:pointer-events-auto',
+});
+
+const actionsheetScrollViewStyle = tva({
+  base: 'w-full h-auto',
+});
+
+const actionsheetVirtualizedListStyle = tva({
+  base: 'w-full h-auto',
+});
+
+const actionsheetFlatListStyle = tva({
+  base: 'w-full h-auto',
+});
+
+const actionsheetSectionListStyle = tva({
+  base: 'w-full h-auto',
+});
+
+const actionsheetSectionHeaderTextStyle = tva({
+  base: 'leading-5 font-bold font-heading my-0 text-typography-500 p-3 uppercase',
+  variants: {
+    isTruncated: {
+      true: '',
+    },
+    bold: {
+      true: 'font-bold',
+    },
+    underline: {
+      true: 'underline',
+    },
+    strikeThrough: {
+      true: 'line-through',
+    },
+    size: {
+      '5xl': 'text-5xl',
+      '4xl': 'text-4xl',
+      '3xl': 'text-3xl',
+      '2xl': 'text-2xl',
+      'xl': 'text-xl',
+      'lg': 'text-lg',
+      'md': 'text-base',
+      'sm': 'text-sm',
+      'xs': 'text-xs',
+    },
+
+    sub: {
+      true: 'text-xs',
+    },
+    italic: {
+      true: 'italic',
+    },
+    highlight: {
+      true: 'bg-yellow500',
+    },
+  },
+  defaultVariants: {
+    size: 'xs',
+  },
+});
+
+const actionsheetIconStyle = tva({
+  base: 'text-background-500 fill-none',
+  variants: {
+    size: {
+      '2xs': 'h-3 w-3',
+      'xs': 'h-3.5 w-3.5',
+      'sm': 'h-4 w-4',
+      'md': 'w-[18px] h-[18px]',
+      'lg': 'h-5 w-5',
+      'xl': 'h-6 w-6',
+    },
+  },
+});
+
+type IActionsheetProps = VariantProps<typeof actionsheetStyle> &
+  React.ComponentPropsWithoutRef<typeof UIActionsheet>;
+
+type IActionsheetContentProps = VariantProps<typeof actionsheetContentStyle> &
+  React.ComponentPropsWithoutRef<typeof UIActionsheet.Content> & {
+    className?: string;
+  };
+
+type IActionsheetItemProps = VariantProps<typeof actionsheetItemStyle> &
+  React.ComponentPropsWithoutRef<typeof UIActionsheet.Item>;
+
+type IActionsheetItemTextProps = VariantProps<typeof actionsheetItemTextStyle> &
+  React.ComponentPropsWithoutRef<typeof UIActionsheet.ItemText>;
+
+type IActionsheetDragIndicatorProps = VariantProps<
+  typeof actionsheetDragIndicatorStyle
+> &
+  React.ComponentPropsWithoutRef<typeof UIActionsheet.DragIndicator>;
+
+type IActionsheetDragIndicatorWrapperProps = VariantProps<
+  typeof actionsheetDragIndicatorWrapperStyle
+> &
+  React.ComponentPropsWithoutRef<typeof UIActionsheet.DragIndicatorWrapper>;
+
+type IActionsheetBackdropProps = VariantProps<typeof actionsheetBackdropStyle> &
+  React.ComponentPropsWithoutRef<typeof UIActionsheet.Backdrop> & {
+    className?: string;
+  };
+
+type IActionsheetScrollViewProps = VariantProps<
+  typeof actionsheetScrollViewStyle
+> &
+  React.ComponentPropsWithoutRef<typeof UIActionsheet.ScrollView>;
+
+type IActionsheetVirtualizedListProps = VariantProps<
+  typeof actionsheetVirtualizedListStyle
+> &
+  React.ComponentPropsWithoutRef<typeof UIActionsheet.VirtualizedList>;
+
+type IActionsheetFlatListProps = VariantProps<typeof actionsheetFlatListStyle> &
+  React.ComponentPropsWithoutRef<typeof UIActionsheet.FlatList>;
+
+type IActionsheetSectionListProps = VariantProps<
+  typeof actionsheetSectionListStyle
+> &
+  React.ComponentPropsWithoutRef<typeof UIActionsheet.SectionList>;
+
+type IActionsheetSectionHeaderTextProps = VariantProps<
+  typeof actionsheetSectionHeaderTextStyle
+> &
+  React.ComponentPropsWithoutRef<typeof UIActionsheet.SectionHeaderText>;
+
+type IActionsheetIconProps = VariantProps<typeof actionsheetIconStyle> &
+  React.ComponentPropsWithoutRef<typeof UIActionsheet.Icon> & {
+    className?: string;
+    as?: React.ElementType;
+    height?: number;
+    width?: number;
+  };
+
+const Actionsheet = React.forwardRef<
+  React.ComponentRef<typeof UIActionsheet>,
+  IActionsheetProps
+>(function Actionsheet({ className, ...props }, ref) {
+  return (
+    <UIActionsheet
+      className={actionsheetStyle({
+        class: className,
+      })}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+
+const ActionsheetContent = React.forwardRef<
+  React.ComponentRef<typeof UIActionsheet.Content>,
+  IActionsheetContentProps
+>(function ActionsheetContent({ className, ...props }, ref) {
+  return (
+    <UIActionsheet.Content
+      className={actionsheetContentStyle({
+        class: className,
+      })}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+
+const ActionsheetItem = React.forwardRef<
+  React.ComponentRef<typeof UIActionsheet.Item>,
+  IActionsheetItemProps
+>(function ActionsheetItem({ className, ...props }, ref) {
+  return (
+    <UIActionsheet.Item
+      className={actionsheetItemStyle({
+        class: className,
+      })}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+
+const ActionsheetItemText = React.forwardRef<
+  React.ComponentRef<typeof UIActionsheet.ItemText>,
+  IActionsheetItemTextProps
+>(function ActionsheetItemText(
+  {
+    isTruncated,
+    bold,
+    underline,
+    strikeThrough,
+    size = 'sm',
+    className,
+    ...props
+  },
+  ref
+) {
+  return (
+    <UIActionsheet.ItemText
+      className={actionsheetItemTextStyle({
+        class: className,
+        isTruncated,
+        bold,
+        underline,
+        strikeThrough,
+        size,
+      })}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+
+const ActionsheetDragIndicator = React.forwardRef<
+  React.ComponentRef<typeof UIActionsheet.DragIndicator>,
+  IActionsheetDragIndicatorProps
+>(function ActionsheetDragIndicator({ className, ...props }, ref) {
+  return (
+    <UIActionsheet.DragIndicator
+      className={actionsheetDragIndicatorStyle({
+        class: className,
+      })}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+
+const ActionsheetDragIndicatorWrapper = React.forwardRef<
+  React.ComponentRef<typeof UIActionsheet.DragIndicatorWrapper>,
+  IActionsheetDragIndicatorWrapperProps
+>(function ActionsheetDragIndicatorWrapper({ className, ...props }, ref) {
+  return (
+    <UIActionsheet.DragIndicatorWrapper
+      className={actionsheetDragIndicatorWrapperStyle({
+        class: className,
+      })}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+
+const ActionsheetBackdrop = React.forwardRef<
+  React.ComponentRef<typeof UIActionsheet.Backdrop>,
+  IActionsheetBackdropProps
+>(function ActionsheetBackdrop({ className, ...props }, ref) {
+  return (
+    <UIActionsheet.Backdrop
+      initial={{
+        opacity: 0,
+      }}
+      animate={{
+        opacity: 0.5,
+      }}
+      exit={{
+        opacity: 0,
+      }}
+      {...props}
+      className={actionsheetBackdropStyle({
+        class: className,
+      })}
+      ref={ref}
+    />
+  );
+});
+
+const ActionsheetScrollView = React.forwardRef<
+  React.ComponentRef<typeof UIActionsheet.ScrollView>,
+  IActionsheetScrollViewProps
+>(function ActionsheetScrollView({ className, ...props }, ref) {
+  return (
+    <UIActionsheet.ScrollView
+      className={actionsheetScrollViewStyle({
+        class: className,
+      })}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+
+const ActionsheetVirtualizedList = React.forwardRef<
+  React.ComponentRef<typeof UIActionsheet.VirtualizedList>,
+  IActionsheetVirtualizedListProps
+>(function ActionsheetVirtualizedList({ className, ...props }, ref) {
+  return (
+    <UIActionsheet.VirtualizedList
+      className={actionsheetVirtualizedListStyle({
+        class: className,
+      })}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+
+const ActionsheetFlatList = React.forwardRef<
+  React.ComponentRef<typeof UIActionsheet.FlatList>,
+  IActionsheetFlatListProps
+>(function ActionsheetFlatList({ className, ...props }, ref) {
+  return (
+    <UIActionsheet.FlatList
+      className={actionsheetFlatListStyle({
+        class: className,
+      })}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+
+const ActionsheetSectionList = React.forwardRef<
+  React.ComponentRef<typeof UIActionsheet.SectionList>,
+  IActionsheetSectionListProps
+>(function ActionsheetSectionList({ className, ...props }, ref) {
+  return (
+    <UIActionsheet.SectionList
+      className={actionsheetSectionListStyle({
+        class: className,
+      })}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+
+const ActionsheetSectionHeaderText = React.forwardRef<
+  React.ComponentRef<typeof UIActionsheet.SectionHeaderText>,
+  IActionsheetSectionHeaderTextProps
+>(function ActionsheetSectionHeaderText(
+  {
+    className,
+    isTruncated,
+    bold,
+    underline,
+    strikeThrough,
+    size,
+    sub,
+    italic,
+    highlight,
+    ...props
+  },
+  ref
+) {
+  return (
+    <UIActionsheet.SectionHeaderText
+      className={actionsheetSectionHeaderTextStyle({
+        class: className,
+        isTruncated,
+        bold,
+        underline,
+        strikeThrough,
+        size,
+        sub,
+        italic,
+        highlight,
+      })}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+
+const ActionsheetIcon = React.forwardRef<
+  React.ComponentRef<typeof UIActionsheet.Icon>,
+  IActionsheetIconProps
+>(function ActionsheetIcon({ className, size = 'sm', ...props }, ref) {
+  if (typeof size === 'number') {
+    return (
+      <UIActionsheet.Icon
+        ref={ref}
+        {...props}
+        className={actionsheetIconStyle({ class: className })}
+        size={size}
+      />
+    );
+  } else if (
+    (props.height !== undefined || props.width !== undefined) &&
+    size === undefined
+  ) {
+    return (
+      <UIActionsheet.Icon
+        ref={ref}
+        {...props}
+        className={actionsheetIconStyle({ class: className })}
+      />
+    );
+  }
+  return (
+    <UIActionsheet.Icon
+      className={actionsheetIconStyle({
+        class: className,
+        size,
+      })}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+
+export {
+  Actionsheet,
+  ActionsheetContent,
+  ActionsheetItem,
+  ActionsheetItemText,
+  ActionsheetDragIndicator,
+  ActionsheetDragIndicatorWrapper,
+  ActionsheetBackdrop,
+  ActionsheetScrollView,
+  ActionsheetVirtualizedList,
+  ActionsheetFlatList,
+  ActionsheetSectionList,
+  ActionsheetSectionHeaderText,
+  ActionsheetIcon,
+};

ArtisanConnect/components/ui/avatar/index.tsx

@@ -0,0 +1,185 @@
+'use client';
+import React from 'react';
+import { createAvatar } from '@gluestack-ui/avatar';
+
+import { View, Text, Image, Platform } from 'react-native';
+
+import { tva } from '@gluestack-ui/nativewind-utils/tva';
+import {
+  withStyleContext,
+  useStyleContext,
+} from '@gluestack-ui/nativewind-utils/withStyleContext';
+const SCOPE = 'AVATAR';
+import type { VariantProps } from '@gluestack-ui/nativewind-utils';
+
+const UIAvatar = createAvatar({
+  Root: withStyleContext(View, SCOPE),
+  Badge: View,
+  Group: View,
+  Image: Image,
+  FallbackText: Text,
+});
+
+const avatarStyle = tva({
+  base: 'rounded-full justify-center items-center relative bg-primary-600 group-[.avatar-group]/avatar-group:-ml-2.5',
+  variants: {
+    size: {
+      'xs': 'w-6 h-6',
+      'sm': 'w-8 h-8',
+      'md': 'w-12 h-12',
+      'lg': 'w-16 h-16',
+      'xl': 'w-24 h-24',
+      '2xl': 'w-32 h-32',
+    },
+  },
+});
+
+const avatarFallbackTextStyle = tva({
+  base: 'text-typography-0 font-semibold overflow-hidden text-transform:uppercase web:cursor-default',
+
+  parentVariants: {
+    size: {
+      'xs': 'text-2xs',
+      'sm': 'text-xs',
+      'md': 'text-base',
+      'lg': 'text-xl',
+      'xl': 'text-3xl',
+      '2xl': 'text-5xl',
+    },
+  },
+});
+
+const avatarGroupStyle = tva({
+  base: 'group/avatar-group flex-row-reverse relative avatar-group',
+});
+
+const avatarBadgeStyle = tva({
+  base: 'w-5 h-5 bg-success-500 rounded-full absolute right-0 bottom-0 border-background-0 border-2',
+  parentVariants: {
+    size: {
+      'xs': 'w-2 h-2',
+      'sm': 'w-2 h-2',
+      'md': 'w-3 h-3',
+      'lg': 'w-4 h-4',
+      'xl': 'w-6 h-6',
+      '2xl': 'w-8 h-8',
+    },
+  },
+});
+
+const avatarImageStyle = tva({
+  base: 'h-full w-full rounded-full absolute',
+});
+
+type IAvatarProps = Omit<
+  React.ComponentPropsWithoutRef<typeof UIAvatar>,
+  'context'
+> &
+  VariantProps<typeof avatarStyle>;
+
+const Avatar = React.forwardRef<
+  React.ComponentRef<typeof UIAvatar>,
+  IAvatarProps
+>(function Avatar({ className, size = 'md', ...props }, ref) {
+  return (
+    <UIAvatar
+      ref={ref}
+      {...props}
+      className={avatarStyle({ size, class: className })}
+      context={{ size }}
+    />
+  );
+});
+
+type IAvatarBadgeProps = React.ComponentPropsWithoutRef<typeof UIAvatar.Badge> &
+  VariantProps<typeof avatarBadgeStyle>;
+
+const AvatarBadge = React.forwardRef<
+  React.ComponentRef<typeof UIAvatar.Badge>,
+  IAvatarBadgeProps
+>(function AvatarBadge({ className, size, ...props }, ref) {
+  const { size: parentSize } = useStyleContext(SCOPE);
+
+  return (
+    <UIAvatar.Badge
+      ref={ref}
+      {...props}
+      className={avatarBadgeStyle({
+        parentVariants: {
+          size: parentSize,
+        },
+        size,
+        class: className,
+      })}
+    />
+  );
+});
+
+type IAvatarFallbackTextProps = React.ComponentPropsWithoutRef<
+  typeof UIAvatar.FallbackText
+> &
+  VariantProps<typeof avatarFallbackTextStyle>;
+const AvatarFallbackText = React.forwardRef<
+  React.ComponentRef<typeof UIAvatar.FallbackText>,
+  IAvatarFallbackTextProps
+>(function AvatarFallbackText({ className, size, ...props }, ref) {
+  const { size: parentSize } = useStyleContext(SCOPE);
+
+  return (
+    <UIAvatar.FallbackText
+      ref={ref}
+      {...props}
+      className={avatarFallbackTextStyle({
+        parentVariants: {
+          size: parentSize,
+        },
+        size,
+        class: className,
+      })}
+    />
+  );
+});
+
+type IAvatarImageProps = React.ComponentPropsWithoutRef<typeof UIAvatar.Image> &
+  VariantProps<typeof avatarImageStyle>;
+
+const AvatarImage = React.forwardRef<
+  React.ComponentRef<typeof UIAvatar.Image>,
+  IAvatarImageProps
+>(function AvatarImage({ className, ...props }, ref) {
+  return (
+    <UIAvatar.Image
+      ref={ref}
+      {...props}
+      className={avatarImageStyle({
+        class: className,
+      })}
+      // @ts-expect-error : This is a workaround to fix the issue with the image style on web.
+      style={
+        Platform.OS === 'web'
+          ? { height: 'revert-layer', width: 'revert-layer' }
+          : undefined
+      }
+    />
+  );
+});
+
+type IAvatarGroupProps = React.ComponentPropsWithoutRef<typeof UIAvatar.Group> &
+  VariantProps<typeof avatarGroupStyle>;
+
+const AvatarGroup = React.forwardRef<
+  React.ComponentRef<typeof UIAvatar.Group>,
+  IAvatarGroupProps
+>(function AvatarGroup({ className, ...props }, ref) {
+  return (
+    <UIAvatar.Group
+      ref={ref}
+      {...props}
+      className={avatarGroupStyle({
+        class: className,
+      })}
+    />
+  );
+});
+
+export { Avatar, AvatarBadge, AvatarFallbackText, AvatarImage, AvatarGroup };

ArtisanConnect/components/ui/center/index.tsx

@@ -0,0 +1,22 @@
+import { View, ViewProps } from 'react-native';
+import React from 'react';
+import { centerStyle } from './styles';
+import type { VariantProps } from '@gluestack-ui/nativewind-utils';
+
+type ICenterProps = ViewProps & VariantProps<typeof centerStyle>;
+
+const Center = React.forwardRef<React.ComponentRef<typeof View>, ICenterProps>(
+  function Center({ className, ...props }, ref) {
+    return (
+      <View
+        className={centerStyle({ class: className })}
+        {...props}
+        ref={ref}
+      />
+    );
+  }
+);
+
+Center.displayName = 'Center';
+
+export { Center };

ArtisanConnect/components/ui/center/index.web.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { centerStyle } from './styles';
+
+import type { VariantProps } from '@gluestack-ui/nativewind-utils';
+
+type ICenterProps = React.ComponentPropsWithoutRef<'div'> &
+  VariantProps<typeof centerStyle>;
+
+const Center = React.forwardRef<HTMLDivElement, ICenterProps>(function Center(
+  { className, ...props },
+  ref
+) {
+  return (
+    <div className={centerStyle({ class: className })} {...props} ref={ref} />
+  );
+});
+
+Center.displayName = 'Center';
+
+export { Center };

ArtisanConnect/components/ui/center/styles.tsx

@@ -0,0 +1,8 @@
+import { tva } from '@gluestack-ui/nativewind-utils/tva';
+import { isWeb } from '@gluestack-ui/nativewind-utils/IsWeb';
+
+const baseStyle = isWeb ? 'flex flex-col relative z-0' : '';
+
+export const centerStyle = tva({
+  base: `justify-center items-center ${baseStyle}`,
+});

ArtisanConnect/components/ui/divider/index.tsx

@@ -0,0 +1,40 @@
+'use client';
+import React from 'react';
+import { tva } from '@gluestack-ui/nativewind-utils/tva';
+import { Platform, View } from 'react-native';
+import type { VariantProps } from '@gluestack-ui/nativewind-utils';
+
+const dividerStyle = tva({
+  base: 'bg-background-200',
+  variants: {
+    orientation: {
+      vertical: 'w-px h-full',
+      horizontal: 'h-px w-full',
+    },
+  },
+});
+
+type IUIDividerProps = React.ComponentPropsWithoutRef<typeof View> &
+  VariantProps<typeof dividerStyle>;
+
+const Divider = React.forwardRef<
+  React.ComponentRef<typeof View>,
+  IUIDividerProps
+>(function Divider({ className, orientation = 'horizontal', ...props }, ref) {
+  return (
+    <View
+      ref={ref}
+      {...props}
+      aria-orientation={orientation}
+      role={Platform.OS === 'web' ? 'separator' : undefined}
+      className={dividerStyle({
+        orientation,
+        class: className,
+      })}
+    />
+  );
+});
+
+Divider.displayName = 'Divider';
+
+export { Divider };

ArtisanConnect/components/ui/hstack/index.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import type { VariantProps } from '@gluestack-ui/nativewind-utils';
+import { View } from 'react-native';
+import type { ViewProps } from 'react-native';
+import { hstackStyle } from './styles';
+
+type IHStackProps = ViewProps & VariantProps<typeof hstackStyle>;
+
+const HStack = React.forwardRef<React.ComponentRef<typeof View>, IHStackProps>(
+  function HStack({ className, space, reversed, ...props }, ref) {
+    return (
+      <View
+        className={hstackStyle({ space, reversed, class: className })}
+        {...props}
+        ref={ref}
+      />
+    );
+  }
+);
+
+HStack.displayName = 'HStack';
+
+export { HStack };

ArtisanConnect/components/ui/hstack/index.web.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import type { VariantProps } from '@gluestack-ui/nativewind-utils';
+import { hstackStyle } from './styles';
+
+type IHStackProps = React.ComponentPropsWithoutRef<'div'> &
+  VariantProps<typeof hstackStyle>;
+
+const HStack = React.forwardRef<React.ComponentRef<'div'>, IHStackProps>(
+  function HStack({ className, space, reversed, ...props }, ref) {
+    return (
+      <div
+        className={hstackStyle({ space, reversed, class: className })}
+        {...props}
+        ref={ref}
+      />
+    );
+  }
+);
+
+HStack.displayName = 'HStack';
+
+export { HStack };

ArtisanConnect/components/ui/hstack/styles.tsx

@@ -0,0 +1,25 @@
+import { isWeb } from '@gluestack-ui/nativewind-utils/IsWeb';
+import { tva } from '@gluestack-ui/nativewind-utils/tva';
+
+const baseStyle = isWeb
+  ? 'flex relative z-0 box-border border-0 list-none min-w-0 min-h-0 bg-transparent items-stretch m-0 p-0 text-decoration-none'
+  : '';
+
+export const hstackStyle = tva({
+  base: `flex-row ${baseStyle}`,
+  variants: {
+    space: {
+      'xs': 'gap-1',
+      'sm': 'gap-2',
+      'md': 'gap-3',
+      'lg': 'gap-4',
+      'xl': 'gap-5',
+      '2xl': 'gap-6',
+      '3xl': 'gap-7',
+      '4xl': 'gap-8',
+    },
+    reversed: {
+      true: 'flex-row-reverse',
+    },
+  },
+});

ArtisanConnect/components/ui/pressable/index.tsx

@@ -0,0 +1,39 @@
+'use client';
+import React from 'react';
+import { createPressable } from '@gluestack-ui/pressable';
+import { Pressable as RNPressable } from 'react-native';
+
+import { tva } from '@gluestack-ui/nativewind-utils/tva';
+import { withStyleContext } from '@gluestack-ui/nativewind-utils/withStyleContext';
+import type { VariantProps } from '@gluestack-ui/nativewind-utils';
+
+const UIPressable = createPressable({
+  Root: withStyleContext(RNPressable),
+});
+
+const pressableStyle = tva({
+  base: 'data-[focus-visible=true]:outline-none data-[focus-visible=true]:ring-indicator-info data-[focus-visible=true]:ring-2 data-[disabled=true]:opacity-40',
+});
+
+type IPressableProps = Omit<
+  React.ComponentProps<typeof UIPressable>,
+  'context'
+> &
+  VariantProps<typeof pressableStyle>;
+const Pressable = React.forwardRef<
+  React.ComponentRef<typeof UIPressable>,
+  IPressableProps
+>(function Pressable({ className, ...props }, ref) {
+  return (
+    <UIPressable
+      {...props}
+      ref={ref}
+      className={pressableStyle({
+        class: className,
+      })}
+    />
+  );
+});
+
+Pressable.displayName = 'Pressable';
+export { Pressable };

ArtisanConnect/components/ui/slider/index.tsx

@@ -0,0 +1,264 @@
+'use client';
+import { createSlider } from '@gluestack-ui/slider';
+import { Pressable } from 'react-native';
+import { View } from 'react-native';
+import React from 'react';
+import { tva } from '@gluestack-ui/nativewind-utils/tva';
+import {
+  withStyleContext,
+  useStyleContext,
+} from '@gluestack-ui/nativewind-utils/withStyleContext';
+import type { VariantProps } from '@gluestack-ui/nativewind-utils';
+import { cssInterop } from 'nativewind';
+
+const SCOPE = 'SLIDER';
+const Root = withStyleContext(View, SCOPE);
+export const UISlider = createSlider({
+  Root: Root,
+  Thumb: View,
+  Track: Pressable,
+  FilledTrack: View,
+  ThumbInteraction: View,
+});
+
+cssInterop(UISlider.Track, { className: 'style' });
+
+const sliderStyle = tva({
+  base: 'justify-center items-center data-[disabled=true]:opacity-40 data-[disabled=true]:web:pointer-events-none',
+  variants: {
+    orientation: {
+      horizontal: 'w-full',
+      vertical: 'h-full',
+    },
+    size: {
+      sm: '',
+      md: '',
+      lg: '',
+    },
+    isReversed: {
+      true: '',
+      false: '',
+    },
+  },
+});
+
+const sliderThumbStyle = tva({
+  base: 'bg-primary-500 absolute rounded-full data-[focus=true]:bg-primary-600 data-[active=true]:bg-primary-600 data-[hover=true]:bg-primary-600 data-[disabled=true]:bg-primary-500 web:cursor-pointer web:data-[active=true]:outline web:data-[active=true]:outline-4 web:data-[active=true]:outline-primary-400 shadow-hard-1',
+
+  parentVariants: {
+    size: {
+      sm: 'h-4 w-4',
+      md: 'h-5 w-5',
+      lg: 'h-6 w-6',
+    },
+  },
+});
+
+const sliderTrackStyle = tva({
+  base: 'bg-background-300 rounded-lg overflow-hidden',
+  parentVariants: {
+    orientation: {
+      horizontal: 'w-full',
+      vertical: 'h-full',
+    },
+    isReversed: {
+      true: '',
+      false: '',
+    },
+    size: {
+      sm: '',
+      md: '',
+      lg: '',
+    },
+  },
+  parentCompoundVariants: [
+    {
+      orientation: 'horizontal',
+      size: 'sm',
+      class: 'h-1 flex-row',
+    },
+    {
+      orientation: 'horizontal',
+      size: 'sm',
+      isReversed: true,
+      class: 'h-1 flex-row-reverse',
+    },
+    {
+      orientation: 'horizontal',
+      size: 'md',
+      class: 'h-1 flex-row',
+    },
+    {
+      orientation: 'horizontal',
+      size: 'md',
+      isReversed: true,
+      class: 'h-[5px] flex-row-reverse',
+    },
+    {
+      orientation: 'horizontal',
+      size: 'lg',
+      class: 'h-1.5 flex-row',
+    },
+    {
+      orientation: 'horizontal',
+      size: 'lg',
+      isReversed: true,
+      class: 'h-1.5 flex-row-reverse',
+    },
+    {
+      orientation: 'vertical',
+      size: 'sm',
+      class: 'w-1 flex-col-reverse',
+    },
+    {
+      orientation: 'vertical',
+      size: 'sm',
+      isReversed: true,
+      class: 'w-1 flex-col',
+    },
+    {
+      orientation: 'vertical',
+      size: 'md',
+      class: 'w-[5px] flex-col-reverse',
+    },
+    {
+      orientation: 'vertical',
+      size: 'md',
+      isReversed: true,
+      class: 'w-[5px] flex-col',
+    },
+    {
+      orientation: 'vertical',
+      size: 'lg',
+      class: 'w-1.5 flex-col-reverse',
+    },
+    {
+      orientation: 'vertical',
+      size: 'lg',
+      isReversed: true,
+      class: 'w-1.5 flex-col',
+    },
+  ],
+});
+
+const sliderFilledTrackStyle = tva({
+  base: 'bg-primary-500 data-[focus=true]:bg-primary-600 data-[active=true]:bg-primary-600 data-[hover=true]:bg-primary-600',
+  parentVariants: {
+    orientation: {
+      horizontal: 'h-full',
+      vertical: 'w-full',
+    },
+  },
+});
+
+type ISliderProps = React.ComponentProps<typeof UISlider> &
+  VariantProps<typeof sliderStyle>;
+
+const Slider = React.forwardRef<
+  React.ComponentRef<typeof UISlider>,
+  ISliderProps
+>(function Slider(
+  {
+    className,
+    size = 'md',
+    orientation = 'horizontal',
+    isReversed = false,
+    ...props
+  },
+  ref
+) {
+  return (
+    <UISlider
+      ref={ref}
+      isReversed={isReversed}
+      orientation={orientation}
+      {...props}
+      className={sliderStyle({
+        orientation,
+        isReversed,
+        class: className,
+      })}
+      context={{ size, orientation, isReversed }}
+    />
+  );
+});
+
+type ISliderThumbProps = React.ComponentProps<typeof UISlider.Thumb> &
+  VariantProps<typeof sliderThumbStyle>;
+
+const SliderThumb = React.forwardRef<
+  React.ComponentRef<typeof UISlider.Thumb>,
+  ISliderThumbProps
+>(function SliderThumb({ className, size, ...props }, ref) {
+  const { size: parentSize } = useStyleContext(SCOPE);
+
+  return (
+    <UISlider.Thumb
+      ref={ref}
+      {...props}
+      className={sliderThumbStyle({
+        parentVariants: {
+          size: parentSize,
+        },
+        size,
+        class: className,
+      })}
+    />
+  );
+});
+
+type ISliderTrackProps = React.ComponentProps<typeof UISlider.Track> &
+  VariantProps<typeof sliderTrackStyle>;
+
+const SliderTrack = React.forwardRef<
+  React.ComponentRef<typeof UISlider.Track>,
+  ISliderTrackProps
+>(function SliderTrack({ className, ...props }, ref) {
+  const {
+    orientation: parentOrientation,
+    size: parentSize,
+    isReversed,
+  } = useStyleContext(SCOPE);
+
+  return (
+    <UISlider.Track
+      ref={ref}
+      {...props}
+      className={sliderTrackStyle({
+        parentVariants: {
+          orientation: parentOrientation,
+          size: parentSize,
+          isReversed,
+        },
+        class: className,
+      })}
+    />
+  );
+});
+
+type ISliderFilledTrackProps = React.ComponentProps<
+  typeof UISlider.FilledTrack
+> &
+  VariantProps<typeof sliderFilledTrackStyle>;
+
+const SliderFilledTrack = React.forwardRef<
+  React.ComponentRef<typeof UISlider.FilledTrack>,
+  ISliderFilledTrackProps
+>(function SliderFilledTrack({ className, ...props }, ref) {
+  const { orientation: parentOrientation } = useStyleContext(SCOPE);
+
+  return (
+    <UISlider.FilledTrack
+      ref={ref}
+      {...props}
+      className={sliderFilledTrackStyle({
+        parentVariants: {
+          orientation: parentOrientation,
+        },
+        class: className,
+      })}
+    />
+  );
+});
+
+export { Slider, SliderThumb, SliderTrack, SliderFilledTrack };

ArtisanConnect/package.json

@@ -13,6 +13,7 @@
     "@expo/vector-icons": "^14.1.0",
     "@gluestack-style/react": "^1.0.57",
     "@gluestack-ui/actionsheet": "^0.2.53",
+    "@gluestack-ui/avatar": "^0.1.18",
     "@gluestack-ui/button": "^1.0.14",
     "@gluestack-ui/divider": "^0.1.10",
     "@gluestack-ui/form-control": "^0.1.19",
@@ -22,7 +23,9 @@
     "@gluestack-ui/input": "^0.1.38",
     "@gluestack-ui/nativewind-utils": "^1.0.26",
     "@gluestack-ui/overlay": "^0.1.22",
+    "@gluestack-ui/pressable": "^0.1.23",
     "@gluestack-ui/select": "^0.1.31",
+    "@gluestack-ui/slider": "^0.1.32",
     "@gluestack-ui/textarea": "^0.1.25",
     "@gluestack-ui/themed": "^1.1.73",
     "@gluestack-ui/toast": "^1.0.9",
@@ -51,6 +54,7 @@
     "react-native": "0.79.2",
     "react-native-css-interop": "^0.1.22",
     "react-native-gesture-handler": "~2.24.0",
+    "react-native-keyboard-aware-scroll-view": "^0.9.5",
     "react-native-reanimated": "~3.17.4",
     "react-native-safe-area-context": "5.4.0",
     "react-native-screens": "~4.11.1",

ArtisanConnect/store/authStore.jsx

@@ -1,105 +1,141 @@
-import {create} from "zustand";
+import { create } from "zustand";
-import {createJSONStorage, persist} from "zustand/middleware";
+import { createJSONStorage, persist } from "zustand/middleware";
 import AsyncStorage from "@react-native-async-storage/async-storage";
 import axios from "axios";
 
 const API_URL = "https://hopp.zikor.pl/api/v1";
 
 export const useAuthStore = create(
-    persist(
+  persist(
-        (set) => ({
+    (set, get) => {
-            user_id: null,
+      // Dodaj interceptor tylko raz
-            token: null,
+      if (!axios.interceptors.response.handlers.length) {
-            isLoading: false,
+        axios.interceptors.response.use(
-            error: null,
+          (response) => response,
+          (error) => {
+            if (
+              (error.response && error.response.status === 401) ||
+              error.response.status === 403
+            ) {
+              set({ user: null, token: null, isLoading: false });
+              delete axios.defaults.headers.common["Authorization"];
+            }
+            return Promise.reject(error);
+          }
+        );
+      }
 
-            signIn: async (email, password) => {
+      return {
-                set({isLoading: true, error: null});
+        user_id: null,
-                try {
+        token: null,
-                    const response = await axios.post(`${API_URL}/auth/login`, {
+        isLoading: false,
-                        email,
+        error: null,
-                        password
-                    });
 
-                    const user_id = response.data.user_id;
+        signIn: async (email, password) => {
-                    const token = response.data.token;
+          set({ isLoading: true, error: null });
-                    set({user_id: user_id, token: token, isLoading: false});
+          try {
+            const response = await axios.post(`${API_URL}/auth/login`, {
+              email,
+              password,
+            });
 
-                    axios.defaults.headers.common["Authorization"] = `Bearer ${token}`;
+            const user_id = response.data.user_id;
-                } catch (error) {
+            const token = response.data.token;
-                    set({error: error.response?.data?.message || error.message, isLoading: false});
+            set({ user_id: user_id, token: token, isLoading: false });
-                    throw error;
-                }
-            },
 
-            signUp: async (userData) => {
+            axios.defaults.headers.common["Authorization"] = `Bearer ${token}`;
-                set({isLoading: true, error: null});
+          } catch (error) {
-                try {
+            set({
-                    const response = await axios.post(`${API_URL}/auth/register`, userData, {
+              error: error.response?.data?.message || error.message,
-                        headers: {'Content-Type': 'application/json'}
+              isLoading: false,
-                    });
+            });
+            throw error;
+          }
+        },
 
-                    const user_id = response.data.user_id;
+        signUp: async (userData) => {
-                    const token = response.data.token;
+          set({ isLoading: true, error: null });
-                    set({user_id: user_id, token: token, isLoading: false});
+          try {
+            const response = await axios.post(
+              `${API_URL}/auth/register`,
+              userData,
+              {
+                headers: { "Content-Type": "application/json" },
+              }
+            );
 
-                    axios.defaults.headers.common["Authorization"] = `Bearer ${token}`;
+            const user_id = response.data.user_id;
-                } catch (error) {
+            const token = response.data.token;
-                    set({error: error.response?.data?.message || error.message, isLoading: false});
+            set({ user_id: user_id, token: token, isLoading: false });
-                    throw error;
-                }
-            },
 
-            signInWithGoogle: async (googleToken) => {
+            axios.defaults.headers.common["Authorization"] = `Bearer ${token}`;
-                set({isLoading: true, error: null});
+          } catch (error) {
-                try {
+            set({
-                    const response = await axios.post(`${API_URL}/auth/google`, {googleToken: googleToken}, {
+              error: error.response?.data?.message || error.message,
-                        headers: {'Content-Type': 'application/json'}
+              isLoading: false,
-                    });
+            });
-                    const user_id = response.data.user_id;
+            throw error;
-                    const token = response.data.token;
+          }
-                    set({user_id: user_id, token: token, isLoading: false});
+        },
 
-                    axios.defaults.headers.common["Authorization"] = `Bearer ${token}`;
+        signInWithGoogle: async (googleToken) => {
-                } catch (error) {
+          set({ isLoading: true, error: null });
-                    set({error: error.response?.data?.message || error.message, isLoading: false});
+          try {
-                    throw error;
+            const response = await axios.post(
-                }
+              `${API_URL}/auth/google`,
-            },
+              { googleToken: googleToken },
+              {
+                headers: { "Content-Type": "application/json" },
+              }
+            );
+            const user_id = response.data.user_id;
+            const token = response.data.token;
+            set({ user_id: user_id, token: token, isLoading: false });
 
-            signOut: async () => {
+            axios.defaults.headers.common["Authorization"] = `Bearer ${token}`;
-                try {
+          } catch (error) {
-                    await axios.post(`${API_URL}/auth/logout`);
+            set({
-                } catch (error) {
+              error: error.response?.data?.message || error.message,
-                    console.error("Logout error:", error);
+              isLoading: false,
-                } finally {
+            });
-                    delete axios.defaults.headers.common["Authorization"];
+            throw error;
-                    set({user_id: null, token: null});
+          }
-                }
+        },
-            },
 
-            checkAuth: async () => {
+        signOut: async () => {
-                const {token} = useAuthStore.getState();
+          try {
-                if (!token) return null;
+            await axios.post(`${API_URL}/auth/logout`);
+          } catch (error) {
+            console.error("Logout error:", error);
+          } finally {
+            delete axios.defaults.headers.common["Authorization"];
+            set({ user_id: null, token: null });
+          }
+        },
 
-                set({isLoading: true});
+        // checkAuth: async () => {
-                try {
+        //   const { token } = useAuthStore.getState();
-                    axios.defaults.headers.common["Authorization"] = `Bearer ${token}`;
+        //   if (!token) return null;
 
-                    const response = await axios.get(`${API_URL}/auth/me`);
+        //   set({ isLoading: true });
+        //   try {
+        //     axios.defaults.headers.common["Authorization"] = `Bearer ${token}`;
 
-                    set({user_id: response.data, isLoading: false});
+        //     const response = await axios.get(`${API_URL}/auth/me`);
-                    return response.data;
+
-                } catch (error) {
+        //     set({ user_id: response.data, isLoading: false });
-                    delete axios.defaults.headers.common["Authorization"];
+        //     return response.data;
-                    set({user_id: null, token: null, isLoading: false});
+        //   } catch (error) {
-                    return null;
+        //     delete axios.defaults.headers.common["Authorization"];
-                }
+        //     set({ user_id: null, token: null, isLoading: false });
-            },
+        //     return null;
-        }),
+        //   }
-        {
+        // },
-            name: "auth-storage",
+      };
-            storage: createJSONStorage(() => AsyncStorage),
+    },
-        }
+    {
-    )
+      name: "auth-storage",
-);
+      storage: createJSONStorage(() => AsyncStorage),
+    }
+  )
+);

ArtisanConnect/store/wishlistStore.jsx

@@ -1,15 +1,38 @@
 import { create } from "zustand";
+import * as api from "@/api/wishlist";
 
 export const useWishlist = create((set) => ({
   wishlistNotices: [],
-  addNoticeToWishlist: (wishlistNotice) =>
+  toggleNoticeInWishlist: async (noticeId) => {
-    set((state) => ({
+    try {
-      wishlistNotices: [...state.wishlistNotices, wishlistNotice],
+      await api.toggleNoticeStatus(noticeId);
-    })),
+      set((state) => {
-  removeNoticeFromWishlist: (noticeId) =>
+        const exists = state.wishlistNotices.some(
-    set((state) => ({
+          (item) => item.noticeId == noticeId
-      wishlistNotices: state.wishlistNotices.filter(
+        );
-        (item) => item.noticeId !== noticeId
+        return exists
-      ),
+          ? {
-    })),
+              wishlistNotices: state.wishlistNotices.filter(
+                (item) => item.noticeId != noticeId
+              ),
+            }
+          : {
+              wishlistNotices: [
+                ...state.wishlistNotices,
+                { noticeId },
+              ],
+            };
+      });
+    } catch (error) {
+      console.error("Error toggling wishlist notice:", error);
+    }
+  },
+  fetchWishlist: async () => {
+  try {
+    const data = await api.getWishlist();
+    set({ wishlistNotices: data });
+  } catch (error) {
+    console.error("Error fetching wishlist:", error);
+  }
+},
 }));