Merge remote-tracking branch 'origin/main'

Also added SafeAreView to userid

ArtisanConnect/api/auth.jsx

@@ -0,0 +1,63 @@
+import axios from "axios";
+
+const API_URL = "https://hopp.zikor.pl/api/v1";
+
+export async function login(userData) {
+    try {
+        const response = await axios.post(`${API_URL}/auth/login`, userData, {
+            headers: {"Content-Type": "application/json"},
+        });
+        return response.data;
+    } catch (error) {
+        console.error("Login failed:", error);
+        throw error.response?.data?.message || "Login failed";
+    }
+}
+
+export async function register(userData) {
+    try {
+        const response = await axios.post(`${API_URL}/auth/register`, userData, {
+            headers: {"Content-Type": "application/json"},
+        });
+
+        return response.data;
+    } catch (error) {
+        console.error("Registration failed:", error);
+        throw error.response?.data?.message || "Registration failed";
+    }
+}
+
+export async function googleLogin(googleToken) {
+    try {
+        const response = await axios.post(
+            `${API_URL}/auth/google`,
+            { googleToken: googleToken },
+            {
+                headers: { "Content-Type": "application/json" },
+            }
+        );
+
+        return response.data;
+    } catch (error) {
+        console.error("Google login failed:", error);
+        throw error.response?.data?.message || "Google login failed";
+    }
+}
+
+export async function logout(token) {
+    const headers = token ? { Authorization: `Bearer ${token}` } : {};
+    try {
+        const response = await axios.post(
+            `${API_URL}/auth/logout`,
+            {},
+            {
+                headers: headers,
+            }
+        );
+
+        return response.data;
+    } catch (error) {
+        console.error("Logout failed:", error);
+        throw error.response?.data?.message || "Logout failed";
+    }
+}

ArtisanConnect/api/categories.jsx

@@ -1,12 +1,18 @@
 import axios from "axios";
+import { useAuthStore } from "@/store/authStore";
 
 const API_URL = "https://hopp.zikor.pl/api/v1";
 
 export async function listCategories() {
-    try {
-        const response = await axios.get(`${API_URL}/vars/categories`);
-        return response.data;
-    } catch (err) {
-        console.error("Nie udało się pobrać listy kategorii.", err.response.status);
-    }
-}
+  const { token } = useAuthStore.getState();
+  const headers = token ? { Authorization: `Bearer ${token}` } : {};
+
+  try {
+    const response = await axios.get(`${API_URL}/vars/categories`, {
+      headers: 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,39 @@
+import axios from "axios";
+import { useAuthStore } from "@/store/authStore";
+
+const API_URL = "https://hopp.zikor.pl/api/v1";
+
+export async function getUserById(userId) {
+  const { token } = useAuthStore.getState();
+  const headers = token ? { Authorization: `Bearer ${token}` } : {};
+  try {
+    const response = await axios.get(`${API_URL}/clients/get/${userId}`, {
+      headers: headers,
+    });
+    return response.data;
+  } catch (err) {
+    console.error(
+      `Nie udało się pobrać danych użytkownika o ID ${userId}.`,
+      err.response.status
+    );
+    throw err;
+  }
+}
+
+export async function getAllUsers() {
+  const { token } = useAuthStore.getState();
+  const headers = token ? { Authorization: `Bearer ${token}` } : {};
+
+  try {
+    const response = await axios.get(`${API_URL}/clients/get/all`, {
+      headers: headers,
+    });
+    return response.data;
+  } catch (err) {
+    console.error(
+      `Nie udało się pobrać danych o użytkownikach`,
+      err.response.status
+    );
+    throw err;
+  }
+}

ArtisanConnect/api/email.jsx

@@ -0,0 +1,30 @@
+import { useAuthStore } from "@/store/authStore";
+
+const API_URL = "https://hopp.zikor.pl/api/v1";
+
+export const sendEmail = async (emailData) => {
+    const token = useAuthStore.getState().token;
+
+    try {
+        const response = await fetch(`${API_URL}/email/send`, {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json",
+                ...(token && { Authorization: `Bearer ${token}` }),
+            },
+            body: JSON.stringify(emailData),
+        });
+
+        if (!response.ok) {
+            const errorMessage = `HTTP error! Status: ${response.status}`;
+            console.error("Error przy wysyłaniu maila", errorMessage);
+            return { success: false, error: errorMessage };
+        }
+
+        const result = await response.text();
+        return { success: true, result };
+    } catch (error) {
+        console.error("Error przy wysyłaniu maila:", error.message);
+        return { success: false, error: error.message };
+    }
+};

ArtisanConnect/api/notices.jsx

@@ -1,122 +1,222 @@
 import axios from "axios";
-import FormData from 'form-data'
-import {useAuthStore} from "@/store/authStore";
-
-// const API_URL = "https://testowe.zikor.pl/api/v1";
+import FormData from "form-data";
+import { useAuthStore } from "@/store/authStore";
 
 const API_URL = "https://hopp.zikor.pl/api/v1";
 
 export async function listNotices() {
-    const { token } = useAuthStore.getState();
-    const headers = token ? { 'Authorization': `Bearer ${token}` } : {};
+  const { token } = useAuthStore.getState();
+  const headers = token ? { Authorization: `Bearer ${token}` } : {};
 
-    const response = await fetch(`${API_URL}/notices/get/all`, {
-        headers: headers
-    });
-    const data = await response.json();
-    if (!response.ok) {
-        throw new Error(response.toString());
-    }
-    return data;
+  const response = await fetch(`${API_URL}/notices/get/all`, {
+    headers: headers,
+  });
+  const data = await response.json();
+
+  if (!response.ok) {
+    throw new Error(response.toString());
+  }
+  // console.info("Notices fetched successfully:", 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();
-    if (!response.ok) {
-        throw new Error("Error");
-    }
-    return data;
+  const data = await response.json();
+  if (!response.ok) {
+    throw new Error("Error");
+  }
+  return data;
 }
 
 export async function createNotice(notice) {
-    try {
-        const response = await axios.post(`${API_URL}/notices/add`, notice, {
-            headers: {
-                "Content-Type": "application/json",
-            },
-        });
+  const { token } = useAuthStore.getState();
+  const headers = token ? { Authorization: `Bearer ${token}` } : {};
+  try {
+    const response = await axios.post(`${API_URL}/notices/add`, notice, {
+      headers: headers,
+    });
 
-        if (response.data.noticeId !== null) {
-            for (const imageUri of notice.image) {
-                await uploadImage(response.data.noticeId, imageUri);
-            }
+    if (response.data.noticeId !== null) {
+      for (const image of notice.image) {
+        if (notice.image.indexOf(image) === 0) {
+          await uploadImage(response.data.noticeId, image, true);
+        } else {
+          await uploadImage(response.data.noticeId, image, false);
         }
-
-        return response.data;
-    } catch (error) {
-        console.log("Error", error.response.data, error.response.status);
-        return null;
+        console.log("Image uploaded successfully");
+      }
     }
+
+    return response.data;
+  } catch (error) {
+    console.log("Error", error.response.data, error.response.status);
+    return null;
+  }
 }
 
 export async function getImageByNoticeId(noticeId) {
-    let imageUrl;
-    try {
-        const listResponse = await axios.get(`${API_URL}/images/list/${noticeId}`);
+  let imageUrl;
+  try {
+    const listResponse = await axios.get(`${API_URL}/images/list/${noticeId}`);
 
-        const imageName = listResponse.data[0];
-        imageUrl = `${API_URL}/images/get/${imageName}`;
+    const imageName = listResponse.data[0];
+    imageUrl = `${API_URL}/images/get/${imageName}`;
 
-        return imageUrl;
-    } catch (err) {
-        console.log(`Zdjęcie nie istnieje dla notice o id: ${noticeId}`);
-        imageUrl = "https://http.cat/404.jpg";
-        return imageUrl;
-    }
+    return imageUrl;
+  } catch (err) {
+    imageUrl = "https://http.cat/404.jpg";
+    return imageUrl;
+  }
 }
 
 export async function getAllImagesByNoticeId(noticeId) {
-    try {
-        const listResponse = await axios.get(`${API_URL}/images/list/${noticeId}`);
-
-        if (listResponse.data && listResponse.data.length > 0) {
-            return listResponse.data.map(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"];
-    }
-}
-
-export const uploadImage = async (noticeId, imageUri) => {
-    const formData = new FormData();
-
-    const filename = imageUri.split('/').pop();
-
-    const match = /\.(\w+)$/.exec(filename);
-    const type = match ? `image/${match[1]}` : 'image/jpeg';
-
-    formData.append('file', {
-        uri: imageUri,
-        name: filename,
-        type: type,
+  const { token } = useAuthStore.getState();
+  const headers = token ? { Authorization: `Bearer ${token}` } : {};
+  try {
+    const listResponse = await axios.get(`${API_URL}/images/list/${noticeId}`, {
+      headers: headers,
     });
 
-    try {
-        const response = await axios.post(
-            `${API_URL}/images/upload/${noticeId}`,
-            formData,
-            {
-                headers: {
-                    'Content-Type': 'multipart/form-data',
-                },
-            }
-        );
-        console.info('Upload successful:', response.data);
-        return response.data;
-    } catch (error) {
-        console.log("imageURI:", imageUri);
-        console.error('Error uploading image:', error.response.data, error.response.status);
-        throw error;
+    if (listResponse.data && listResponse.data.length > 0) {
+      return listResponse.data.map((imageName) => ({
+        uri: `${API_URL}/images/get/${imageName}`,
+        headers: headers,
+      }));
     }
-}
+
+    return [{ uri: "https://http.cat/404.jpg" }];
+  } catch (err) {
+    if (err.response.status === 404) {
+      // console.info(`Ogłoszenie o id: ${noticeId} nie posiada zdjęć.`);
+      return [{ uri: "https://http.cat/404.jpg" }];
+    }
+    console.warn(
+      `Nie udało się pobrać listy zdjęć dla ogłoszenia o id: ${noticeId}`,
+      err
+    );
+    return [{ uri: "https://http.cat/404.jpg" }];
+  }
+}
+
+export const uploadImage = async (noticeId, imageObj, isFirst) => {
+  const { token } = useAuthStore.getState();
+  const headers = {
+    ...(token ? { Authorization: `Bearer ${token}` } : {}),
+    "Content-Type": "multipart/form-data",
+  };
+  const formData = new FormData();
+
+  const filename = imageObj.split("/").pop();
+
+  const match = /\.(\w+)$/.exec(filename);
+  const type = match ? `image/${match[1]}` : "image/jpeg";
+
+  formData.append("file", {
+    uri: imageObj,
+    name: filename,
+    type: type,
+  });
+
+  try {
+    const response = await axios.post(
+      `${API_URL}/images/upload/${noticeId}?isMainImage=${isFirst}`,
+      formData,
+      {
+        headers: headers,
+      }
+    );
+    console.log("Upload successful:", response.data);
+    return response.data;
+  } catch (error) {
+    console.error(
+      "Error uploading image:",
+      error.response.data,
+      error.response.status
+    );
+    throw error;
+  }
+};
+
+export const deleteNotice = async (noticeId) => {
+  const { token } = useAuthStore.getState();
+  const headers = token ? { Authorization: `Bearer ${token}` } : {};
+
+  try {
+    const response = await axios.delete(
+      `${API_URL}/notices/delete/${noticeId}`,
+      { headers: headers }
+    );
+    return response.data;
+  } catch (error) {
+    console.error(
+      "Error deleting notice:",
+      error.response?.data,
+      error.response?.status
+    );
+    throw error;
+  }
+};
+
+export const editNotice = async (noticeId, notice) => {
+  const { token } = useAuthStore.getState();
+  const headers = token ? { Authorization: `Bearer ${token}` } : {};
+
+  try {
+    const response = await axios.put(
+      `${API_URL}/notices/edit/${noticeId}`,
+      {
+        title: notice.title,
+        description: notice.description,
+        price: notice.price,
+        category: notice.category,
+        status: notice.status,
+        attributes: notice.attributes,
+      },
+      {
+        headers: headers,
+      }
+    );
+
+    if (response.data && notice.image && notice.image.length > 0) {
+      for (let i = 0; i < notice.image.length; i++) {
+        const image = notice.image[i];
+        const isFirst = i === 0;
+
+        if (typeof image === "string" && !image.startsWith("http")) {
+          await uploadImage(noticeId, image, isFirst);
+        }
+      }
+    }
+
+    return response.data;
+  } catch (error) {
+    console.error(
+      "Error editing notice:",
+      error.response?.data,
+      error.response?.status
+    );
+    throw error;
+  }
+};
+
+export const deleteImage = async (filename) => {
+  const { token } = useAuthStore.getState();
+  const headers = token ? { Authorization: `Bearer ${token}` } : {};
+
+  try {
+    const response = await axios.delete(
+      `${API_URL}/images/delete/${filename}`,
+      { headers: headers }
+    );
+    return response.data;
+  } catch (error) {
+    console.error(
+      "Error deleting image:",
+      error.response?.data,
+      error.response?.status
+    );
+    throw error;
+  }
+};

ArtisanConnect/api/order.jsx

@@ -0,0 +1,76 @@
+import axios from "axios";
+import { useAuthStore } from "@/store/authStore";
+
+const API_URL = "https://hopp.zikor.pl/api/v1/orders";
+
+export async function createOrder(noticeId, orderType) {
+  const { token } = useAuthStore.getState();
+  const headers = token ? { Authorization: `Bearer ${token}` } : {};
+
+  try {
+    const response = await axios.post(
+      `${API_URL}/add`,
+      { noticeId: noticeId, orderType: orderType },
+      {
+        headers: headers,
+      }
+    );
+
+    return response.data;
+  } catch (error) {
+    console.log("Error", error.response?.data, error.response?.status);
+    return null;
+  }
+}
+
+export async function createPayment(orderId) {
+  const { token } = useAuthStore.getState();
+  const headers = token ? { Authorization: `Bearer ${token}` } : {};
+  try {
+    const response = await axios.post(
+      `${API_URL}/token?orderId=${orderId}`,
+      {},
+      {
+        headers: headers,
+      }
+    );
+    return response.data;
+  } catch (error) {
+    console.log("Error", error.response?.data, error.response?.status);
+    return null;
+  }
+}
+
+export async function getOrder(orderId) {
+  const { token } = useAuthStore.getState();
+  const headers = token ? { Authorization: `Bearer ${token}` } : {};
+
+  try {
+    const response = await axios.get(`${API_URL}/get/${orderId}`, { headers: headers });
+    return response.data;
+  } catch (error) {
+    console.error(
+      "Error fetching order:",
+      error.response?.data,
+      error.response?.status
+    );
+    throw error;
+  }
+}
+
+export async function listOrders() {
+  const { token } = useAuthStore.getState();
+  const headers = token ? { Authorization: `Bearer ${token}` } : {};
+
+  try {
+    const response = await axios.get(`${API_URL}/get/all`, { headers: headers });
+    return response.data;
+  } catch (error) {
+    console.error(
+      "Error fetching orders:",
+      error.response?.data,
+      error.response?.status
+    );
+    throw error;
+  }
+}

ArtisanConnect/api/wishlist.jsx

@@ -0,0 +1,37 @@
+import axios from "axios";
+import { useAuthStore } from "@/store/authStore";
+
+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: 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: headers });
+    return response.data;
+  } catch (error) {
+    console.error("Error fetching wishlist:", error);
+    throw error;
+  }
+}
+``;

ArtisanConnect/app.json

@@ -5,7 +5,7 @@
     "scheme": "com.hamx.artisanconnect",
     "version": "1.0.0",
     "orientation": "portrait",
-    "icon": "./assets/icon.png",
+    "icon": "./assets/AppIco.png",
     "userInterfaceStyle": "light",
     "newArchEnabled": true,
     "splash": {
@@ -18,6 +18,18 @@
       "bundleIdentifier": "com.hamx.artisanconnect"
     },
     "android": {
+      "intentFilters": [
+        {
+          "action": "VIEW",
+          "autoVerify": true,
+          "data": [
+            {
+              "scheme": "com.hamx.artisanconnect"
+            }
+          ],
+          "category": ["BROWSABLE", "DEFAULT"]
+        }
+      ],
       "adaptiveIcon": {
         "foregroundImage": "./assets/adaptive-icon.png",
         "backgroundColor": "#ffffff"

ArtisanConnect/app/(auth)/login.jsx

@@ -1,17 +1,17 @@
 import React, {useEffect, useState} from 'react';
-import {StyleSheet, ActivityIndicator, SafeAreaView, View, Platform} from 'react-native';
+import {StyleSheet, ActivityIndicator, SafeAreaView, View, Platform, KeyboardAvoidingView} from 'react-native';
 import {useAuthStore} from '@/store/authStore';
-import {useRouter, Link} from 'expo-router';
+import {useRouter} from 'expo-router';
 
 import {Box} from "@/components/ui/box"
 import {Button, ButtonText, ButtonIcon} from "@/components/ui/button"
 import {Center} from "@/components/ui/center"
 import {Heading} from "@/components/ui/heading"
-import {Input, InputField} from "@/components/ui/input"
+import {Input, InputField, InputIcon, InputSlot} from "@/components/ui/input"
 import {Text} from "@/components/ui/text"
 import {VStack} from "@/components/ui/vstack"
 import {HStack} from "@/components/ui/hstack"
-import {ArrowRightIcon} from "@/components/ui/icon"
+import {ArrowRightIcon, EyeIcon, EyeOffIcon} from "@/components/ui/icon"
 import {Divider} from '@/components/ui/divider';
 import {Ionicons} from "@expo/vector-icons";
 
@@ -30,6 +30,8 @@ WebBrowser.maybeCompleteAuthSession();
 export default function Login() {
     const [email, setEmail] = useState('');
     const [password, setPassword] = useState('');
+    const [emailError, setEmailError] = useState('');
+    const [showPassword, setShowPassword] = useState(false)
     const {signIn, isLoading, signInWithGoogle} = useAuthStore();
     const router = useRouter();
 
@@ -52,6 +54,11 @@ export default function Login() {
             return;
         }
 
+        if (!validateEmail(email)) {
+            setEmailError('Nieprawidłowy format adresu email');
+            return;
+        }
+
         try {
             await signIn(email, password);
             alert(`Zalogowano jako ${email}`);
@@ -69,10 +76,11 @@ export default function Login() {
         // const user = await AsyncStorage.getItem("@user");
         let user = null;
         if (!user) {
-            if(response.type === "success") {
+            if (response.type === "success") {
                 user = await getUserInfo(response.authentication.accessToken)
                 await signInWithGoogle(response.authentication.accessToken);
                 alert(`Zalogowano jako ${user.email}`);
+                router.replace('/');
             }
 
         } else {
@@ -82,7 +90,7 @@ export default function Login() {
     };
 
     const getUserInfo = async (token) => {
-        if(!token) {
+        if (!token) {
             return
         }
         try {
@@ -102,6 +110,17 @@ export default function Login() {
         }
     }
 
+    const validateEmail = (email) => {
+        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+        return emailRegex.test(email);
+    };
+
+    const handleShowPassword = () => {
+        setShowPassword((showState) => {
+            return !showState
+        })
+    }
+
     if (isLoading) {
         return (
             <View style={styles.container}>
@@ -111,49 +130,70 @@ export default function Login() {
     }
 
     return (
-        <SafeAreaView style={styles.container}>
-            <Center>
-                <Box className="p-5 max-w-96 border border-background-300 rounded-lg">
-                    <VStack className="pb-4" space="xs">
-                        <Heading className="leading-[30px]">Logowanie</Heading>
-                        <Box className="flex flex-row">
-                            <Link href="/registration" asChild>
-                                <Button variant="link" size="sm" className="p-0">
+        <KeyboardAvoidingView
+            behavior={Platform.OS === "ios" ? "padding" : "height"}
+            style={{flex: 1}}
+            keyboardVerticalOffset={Platform.OS === "ios" ? 64 : 0}
+        >
+            <SafeAreaView style={styles.container}>
+                <Center>
+                    <Box className="p-5 max-w-96 border border-background-300 rounded-lg">
+                        <VStack className="pb-4" space="xs">
+                            <Heading className="leading-[30px]">Logowanie</Heading>
+                            <Box className="flex flex-row">
+                                {/* <Link href="/registration" asChild> */}
+                                <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>
-                        </Box>
-                    </VStack>
-                    <VStack space="xl" className="py-2">
-                        <Input>
-                            <InputField className="py-2" placeholder="Login" onChangeText={setEmail}/>
-                        </Input>
-                        <Input>
-                            <InputField type="password" className="py-2" placeholder="Hasło"
-                                        onChangeText={setPassword}/>
-                        </Input>
-                    </VStack>
-                    <VStack space="lg" className="pt-4">
-                        <Button size="sm" onPress={handleInternalLogin}>
-                            <ButtonText>Zaloguj się</ButtonText>
-                        </Button>
-                    </VStack>
+                                {/* </Link> */}
+                            </Box>
+                        </VStack>
+                        <VStack space="xl" className="py-2">
+                            {emailError ? <Text style={styles.errorText}>{emailError}</Text> : null}
+                            <Input isRequired={true} isInvalid={!!emailError}>
+                                <InputField className="py-2" inputMode="email" placeholder="Login"
+                                            onChangeText={(text) => {
+                                                setEmail(text);
+                                                if (text && !validateEmail(text)) {
+                                                    setEmailError('Nieprawidłowy format adresu email');
+                                                } else {
+                                                    setEmailError('');
+                                                }
+                                            }}
+                                />
+                            </Input>
+                            <Input isRequired={true}>
+                                <InputField type={showPassword ? "text" : "password"} className="py-2"
+                                            placeholder="Hasło"
+                                            onChangeText={setPassword}/>
+                                <InputSlot className="pr-3" onPress={handleShowPassword}>
+                                    <InputIcon as={showPassword ? EyeIcon : EyeOffIcon}/>
+                                </InputSlot>
+                            </Input>
+                        </VStack>
+                        <VStack space="lg" className="pt-4">
+                            <Button size="sm" onPress={handleInternalLogin}>
+                                <ButtonText>Zaloguj się</ButtonText>
+                            </Button>
+                        </VStack>
 
-                    <HStack alignItems="center" space="sm" className="pt-6 pb-6">
-                        <Divider flex={1}/>
-                        <Text fontSize="$sm" className="text-gray-300">
-                            lub
-                        </Text>
-                        <Divider flex={1}/>
-                    </HStack>
-                    <Button size="sm" onPress={() => promptAsync()}>
-                        <Ionicons name="logo-google" color="#fff"/>
-                    </Button>
-                </Box>
-            </Center>
-        </SafeAreaView>
+                        <HStack alignItems="center" space="sm" className="pt-6 pb-6">
+                            <Divider flex={1}/>
+                            <Text fontSize="$sm" className="text-gray-300">
+                                lub
+                            </Text>
+                            <Divider flex={1}/>
+                        </HStack>
+                        <Button size="sm" onPress={() => promptAsync()}>
+                            <Ionicons name="logo-google" color="#fff"/>
+                        </Button>
+                    </Box>
+                </Center>
+            </SafeAreaView>
+        </KeyboardAvoidingView>
     );
 }
 
@@ -172,7 +212,7 @@ const styles = StyleSheet.create({
     },
     errorText: {
         color: 'red',
-        marginBottom: 10,
+        fontSize: 12,
     },
     signupbutton: {
         fontWeight: '300',

ArtisanConnect/app/(tabs)/_layout.jsx

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

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() {
-  return <Text>Użytkownik</Text>;
+import { VStack } from "@/components/ui/vstack";
+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";
+import { useAuthStore } from "@/store/authStore";
+
+export default function Account() {
+  const [user, setUser] = useState(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const currentUserId = useAuthStore((state) => state.user_id);
+  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=" flex-1 m-2">
+      <Box className="bg-white p-5 rounded-lg ">
+        <Box className="items-center pt-6 mb-4">
+          <Image
+            source={{
+              uri:
+                user.image ||
+                "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 rounded-lg">
+        <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=" text-gray-600 ">{user.email}</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 rounded-lg">
+        <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/userOrders" 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,214 @@
+import { useNoticesStore } from "@/store/noticesStore";
+import { NoticeCard } from "@/components/NoticeCard";
+import { Button, ButtonText } from "@/components/ui/button";
+import { usePathname } from "expo-router";
+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";
+import { createOrder, createPayment, getOrder } from "@/api/order";
+import { Ionicons } from "@expo/vector-icons";
+import { useToast, Toast, ToastTitle } from "@/components/ui/toast";
+import { useAuthStore } from "@/store/authStore";
+import * as WebBrowser from "expo-web-browser";
+import { useRouter } from "expo-router";
+
 export default function UserNotices() {
-  return <Text>Użytkownik</Text>;
+  const router = useRouter();
+  const pathname = usePathname();
+  const { notices, fetchNotices, deleteNotice } = useNoticesStore();
+  const [isLoading, setIsLoading] = useState(true);
+  const [isRedirecting, setIsRedirecting] = useState(false);
+  const toast = useToast();
+  const [toastId, setToastId] = useState(0);
+  const { user_id } = useAuthStore.getState();
+  const currentUserId = user_id;
+  const [orderId, setOrderId] = useState(null);
+
+  useEffect(() => {
+    WebBrowser.maybeCompleteAuthSession();
+  }, []);
+
+  useEffect(() => {
+    const loadNotices = async () => {
+      setIsLoading(true);
+      try {
+        await fetchNotices();
+      } catch (err) {
+        console.error("Błąd podczas pobierania ogłoszeń:", err);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    loadNotices();
+  }, [pathname, fetchNotices]);
+
+  const showNewToast = (title) => {
+    const newId = Math.random();
+    setToastId(newId);
+    toast.show({
+      id: newId,
+      placement: "top",
+      duration: 3000,
+      render: ({ id }) => {
+        const uniqueToastId = "toast-" + id;
+        return (
+          <Toast nativeID={uniqueToastId} action="muted" variant="solid">
+            <ToastTitle>{title}</ToastTitle>
+          </Toast>
+        );
+      },
+    });
+  };
+
+  const handleOrder = async (noticeId, type) => {
+    try {
+      const result = await createOrder(noticeId, type);
+      if (result) {
+        setOrderId(result);
+        try {
+          const paymentResult = await createPayment(result);
+          if (paymentResult) {
+            setIsRedirecting(true);
+
+            await WebBrowser.openAuthSessionAsync(paymentResult);
+
+            setTimeout(async () => {
+              setIsRedirecting(false);
+
+              try {
+                const lastOrder = await getOrder(result);
+                const lastPayments = lastOrder.payments;
+                const paymentStatus =
+                  lastPayments.length > 0
+                    ? lastPayments[lastPayments.length - 1].status
+                    : null;
+
+                if (paymentStatus === "CORRECT") {
+                  showNewToast("Płatność została zrealizowana.");
+                  await fetchNotices();
+                  router.replace("/notices");
+                } else {
+                  showNewToast("Sprawdzanie statusu płatności...");
+                }
+              } catch (err) {
+                console.log("Błąd podczas sprawdzania płatności:", err);
+                showNewToast("Nie udało się sprawdzić statusu płatności.");
+              }
+            }, 300);
+          } else {
+            console.log(`Nie udało się aktywować ogłoszenia ${noticeId}.`);
+          }
+        } catch (err) {
+          setIsRedirecting(false);
+          console.log("Błąd podczas aktywacji ogłoszenia:", err);
+        }
+      }
+    } catch (err) {
+      console.log("Błąd podczas aktywacji ogłoszenia:", err);
+    }
+  };
+
+  const handleDeleteNotice = async (noticeId) => {
+    try {
+      await deleteNotice(noticeId);
+    } catch (err) {
+      console.error("Błąd podczas usuwania ogłoszenia:", err);
+    }
+  };
+
+  const userNotices = notices
+    .filter((notice) => notice.clientId === currentUserId)
+    .sort((a, b) => new Date(b.publishDate) - new Date(a.publishDate));
+
+  if (isLoading) {
+    return (
+      <Box className="items-center justify-center flex-1">
+        <ActivityIndicator size="large" color="#787878" />
+      </Box>
+    );
+  }
+
+  return (
+    <VStack className="p-2">
+      {isRedirecting && (
+        <Box className="absolute inset-0 bg-white bg-opacity-30 justify-center items-center z-50">
+          <Ionicons name="card-outline" size={30} className="pt-4" />
+          <Text className="text-lg font-bold pt-2">
+            Przekierowanie do płatności...
+          </Text>
+        </Box>
+      )}
+      {/* <Text className="text-2xl font-bold mb-4">Moje ogłoszenia</Text> */}
+      {userNotices.length > 0 ? (
+        <FlatList
+          data={userNotices}
+          renderItem={({ item }) => (
+            <Box className="flex-1 mb-4 pb-2 bg-white rounded-lg">
+              <NoticeCard notice={item} />
+              <Box className="flex-row justify-between mt-2">
+                <Box className="flex-row items-center">
+                  <Button
+                    className="ml-2"
+                    onPress={() => handleDeleteNotice(item.noticeId)}
+                    size="md"
+                    variant="outline"
+                    action="primary"
+                  >
+                    <ButtonText>Usuń</ButtonText>
+                    <Ionicons name="trash-outline" size={14} />
+                  </Button>
+                  {item.status === "INACTIVE" && (
+                    <Button
+                      className="ml-2"
+                      onPress={() => {
+                        router.replace(`notice/edit/${item.noticeId}`);
+                      }}
+                      size="md"
+                      variant="outline"
+                      action="primary"
+                    >
+                      <ButtonText>Edytuj</ButtonText>
+                      <Ionicons name="pencil" size={14} />
+                    </Button>
+                  )}
+                </Box>
+                {item.status === "ACTIVE" ? (
+                  <Button
+                    className="mr-2"
+                    size="md"
+                    variant="solid"
+                    action="primary"
+                    onPress={() => handleOrder(item.noticeId, "BOOST")}
+                  >
+                    <ButtonText>Podbij</ButtonText>
+                    <Ionicons name="arrow-up" size={14} color="#fff" />
+                  </Button>
+                ) : (
+                  <Button
+                    className="mr-2"
+                    size="md"
+                    variant="solid"
+                    action="primary"
+                    onPress={() => handleOrder(item.noticeId, "ACTIVATION")}
+                  >
+                    <ButtonText>Aktywuj</ButtonText>
+                    <Ionicons
+                      name="arrow-redo-outline"
+                      size={14}
+                      color="#fff"
+                    />
+                  </Button>
+                )}
+              </Box>
+            </Box>
+          )}
+          keyExtractor={(item) => item.noticeId.toString()}
+        />
+      ) : (
+        <Text>Nie masz żadnych ogłoszeń.</Text>
+      )}
+    </VStack>
+  );
 }

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

@@ -0,0 +1,49 @@
+import { View, Text } from "react-native";
+import { useState, useEffect, use } from "react";
+import { FlatList, RefreshControl } from "react-native";
+import { listOrders } from "@/api/order";
+import { Box } from "@/components/ui/box";
+import { VStack } from "@/components/ui/vstack";
+import { HStack } from "@/components/ui/hstack";
+
+export default function UserOrders() {
+  const [orders, setOrders] = useState([]);
+
+  useEffect(() => {
+    const fetchOrders = async () => {
+      try {
+        const data = await listOrders();
+        setOrders(data);
+      } catch (err) {}
+    };
+    fetchOrders();
+  }, []);
+
+  if (orders.length === 0) {
+    return (
+      <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
+        <Text>Brak zamówień</Text>
+      </View>
+    );
+  }
+
+  return (
+    <FlatList
+      className="m-2"
+      data={orders}
+      renderItem={({ item }) => (
+        <Box className="p-4 rounded-md bg-white mb-2">
+          <VStack>
+            <HStack>
+              <Text>{item.orderId}</Text>
+              <Text className="ml-2">{item.orderType}</Text>
+            </HStack>
+            <Text className="mt-2">{item.status}</Text>
+            <Text className="mt-2">Cena: {item.amount} zł</Text>
+            <Text className="mt-2">{item.createdAt}</Text>
+          </VStack>
+        </Box>
+      )}
+    />
+  );
+}

ArtisanConnect/app/(tabs)/index.jsx

@@ -1,22 +1,65 @@
-import { View, Text } from "react-native";
-import { Link } from "expo-router";
-import { Button, ButtonText } from "@/components/ui/button";
+import { ScrollView } from "react-native";
+import { useNoticesStore } from "@/store/noticesStore";
+import { CategorySection } from "@/components/CategorySection";
+import { NoticeSection } from "@/components/NoticeSection";
+import { UserSection } from "@/components/UserSection";
+import { SearchSection } from "@/components/SearchSection";
+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 (
-    <View>
-      <Text>Home</Text>
-      <Link href="/notices" asChild>
-        <Button>
-          <ButtonText>Ogłoszenia</ButtonText>
-        </Button>
-      </Link>
+  const { token } = useAuthStore.getState();
+  const router = useRouter();
+  const [isReady, setIsReady] = useState(false);
+  const fetchNotices = useNoticesStore((state) => state.fetchNotices);
 
-      <Link href="/wishlist" asChild>
-        <Button variant="outline" className="mt-2">
-          <ButtonText>Ulubione</ButtonText>
-        </Button>
-      </Link>
-    </View>
+  useEffect(() => {
+    setIsReady(true);
+  }, []);
+
+  useEffect(() => {
+    if (isReady && !token) {
+      router.replace("/login");
+    }
+  }, [isReady, token, router]);
+
+  useEffect(() => {
+    if (token) {
+      fetchNotices();
+    }
+  }, [token]);
+
+  const notices = useNoticesStore((state) => state.notices);
+
+  const activeNotices = notices.filter((notice) => notice.status === "ACTIVE");
+  const latestNotices = [...activeNotices]
+    .sort((a, b) => new Date(b.publishDate) - new Date(a.publishDate))
+    .slice(0, 6);
+  const recomendedNotices = [...activeNotices]
+    .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={activeNotices} />
+        <NoticeSection
+          title="Najnowsze ogłoszenia"
+          notices={latestNotices}
+          ctaLink="/notices?sort=latest"
+        />
+        <UserSection title="Popularni sprzedawcy" notices={activeNotices} />
+        <NoticeSection
+          title="Proponowane ogłoszenia"
+          notices={recomendedNotices}
+          ctaLink="/notices"
+        />
+      </ScrollView>
+      {/* </View> */}
+    </SafeAreaView>
   );
 }

ArtisanConnect/app/(tabs)/notice/create.jsx

@@ -1,256 +1,330 @@
-import {useState, useEffect} from "react";
-import {Image, StyleSheet} from "react-native";
-import {Button, ButtonText} from "@/components/ui/button";
-import {FormControl} from "@/components/ui/form-control";
-import {Input, InputField} from "@/components/ui/input";
-import {Text} from "@/components/ui/text";
-import {VStack} from "@/components/ui/vstack";
-import {Textarea, TextareaInput} from "@/components/ui/textarea";
-import {ScrollView} from '@gluestack-ui/themed';
-import * as ImagePicker from 'expo-image-picker';
+import { useState, useEffect } from "react";
 import {
-    Select,
-    SelectTrigger,
-    SelectInput,
-    SelectIcon,
-    SelectPortal,
-    SelectBackdrop,
-    SelectContent,
-    SelectItem,
-    SelectScrollView,
+  Image,
+  StyleSheet,
+  KeyboardAvoidingView,
+  Platform,
+  ActivityIndicator,
+} from "react-native";
+import { Button, ButtonText } from "@/components/ui/button";
+import { FormControl } from "@/components/ui/form-control";
+import { Input, InputField } from "@/components/ui/input";
+import { Text } from "@/components/ui/text";
+import { VStack } from "@/components/ui/vstack";
+import { Textarea, TextareaInput } from "@/components/ui/textarea";
+import { ScrollView } from "@gluestack-ui/themed";
+import { Box } from "@/components/ui/box";
+import * as ImagePicker from "expo-image-picker";
+import {
+  Select,
+  SelectTrigger,
+  SelectInput,
+  SelectIcon,
+  SelectPortal,
+  SelectBackdrop,
+  SelectContent,
+  SelectItem,
+  SelectScrollView,
 } from "@/components/ui/select";
 
-import {ChevronDownIcon} from "@/components/ui/icon";
-import {useNoticesStore} from "@/store/noticesStore";
-import {listCategories} from "@/api/categories";
-import {useRouter} from "expo-router";
+import { ChevronDownIcon } from "@/components/ui/icon";
+import { useNoticesStore } from "@/store/noticesStore";
+import { listCategories } from "@/api/categories";
+import { useRouter } from "expo-router";
+import { attributes } from "@/data/attributesData"; // Assuming you have a separate file for attributes data}
 
 export default function CreateNotice() {
-    const router = useRouter();
-    const {addNotice, fetchNotices} = useNoticesStore();
-    const [title, setTitle] = useState("");
-    const [description, setDescription] = useState("");
-    const [price, setPrice] = useState("");
-    const [category, setCategory] = useState("");
-    const [image, setImage] = useState([]);
-    const [selectItems, setSelectItems] = useState([]);
-    const [isLoading, setIsLoading] = useState(false);
+  const router = useRouter();
+  const { addNotice, fetchNotices } = useNoticesStore();
+  const [title, setTitle] = useState("");
+  const [description, setDescription] = useState("");
+  const [price, setPrice] = useState("");
+  const [category, setCategory] = useState("");
+  const [image, setImage] = useState([]);
+  const [selectItems, setSelectItems] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [selectedAttributes, setSelectedAttributes] = useState({});
 
-    useEffect(() => {
-        let isMounted = true;
+  useEffect(() => {
+    let isMounted = true;
 
-        const fetchSelectItems = async () => {
-            try {
-                let data = await listCategories();
-                if (isMounted && Array.isArray(data)) {
-                    setSelectItems(data);
-                }
-            } catch (error) {
-                console.error('Error fetching select items:', error);
-            }
-        };
-
-        fetchSelectItems();
-
-        return () => {
-            isMounted = false;
-        };
-    }, []);
-
-    const [error, setError] = useState({
-        title: false,
-        description: false,
-        price: false,
-        category: false,
-    });
-
-    const styles = StyleSheet.create({
-        container: {
-            flex: 1,
-            alignItems: 'center',
-            justifyContent: 'center',
-        },
-        image: {
-            width: 100,
-            height: 100,
-        },
-    });
-
-    const handleAddNotice = async () => {
-        setError({
-            title: !title,
-            description: !description,
-            price: !price,
-            category: !category,
-        });
-
-        if (!title || !description || !price || !category) {
-            console.log("Error in form");
-            return;
-        }
-
-        setIsLoading(true);
-        try {
-            const result = await addNotice({
-                title: title,
-                clientId: 1,
-                description: description,
-                price: price,
-                category: category,
-                status: "ACTIVE",
-                image: image
-            });
-
-            if (result) {
-                console.log("Notice created successfully with ID: ", result.noticeId);
-                await fetchNotices();
-                clearForm();
-                router.push("/(tabs)/notices");
-            }
-        } catch (error) {
-            console.error("Error creating notice. Error message: ", error.message);
-        } finally {
-            setIsLoading(false);
+    const fetchSelectItems = async () => {
+      try {
+        let data = await listCategories();
+        if (isMounted && Array.isArray(data)) {
+          setSelectItems(data);
         }
+      } catch (error) {
+        console.error("Error fetching select items:", error);
+      }
     };
 
-    const takePicture = async () => {
-        const {status} = await ImagePicker.requestCameraPermissionsAsync();
-        if (status !== 'granted') {
-            return;
-        }
-        const result = await ImagePicker.launchCameraAsync({
-            allowsEditing: false,
-        });
+    fetchSelectItems();
 
-        if (!result.canceled && result.assets) {
-            setImage(result.assets.map(asset => asset.uri));
-        }
-    }
-
-    const pickImage = async () => {
-        let result = await ImagePicker.launchImageLibraryAsync({
-            mediaTypes: 'images',
-            selectionLimit: 8,
-            allowsEditing: false,
-            allowsMultipleSelection: true,
-            aspect: [4, 3],
-            quality: 0.5,
-        });
-
-        if (!result.canceled) {
-            setImage(result.assets.map(asset => asset.uri));
-        }
+    return () => {
+      isMounted = false;
     };
+  }, []);
 
-    const clearForm = () => {
-        setTitle("");
-        setDescription("");
-        setPrice("");
-        setCategory("");
-        setImage([]);
-        setError({
-            title: false,
-            description: false,
-            price: false,
-            category: false,
-        })
+  const [error, setError] = useState({
+    title: false,
+    description: false,
+    price: false,
+    category: false,
+  });
+
+  const styles = StyleSheet.create({
+    container: {
+      flex: 1,
+      alignItems: "center",
+      justifyContent: "center",
+    },
+    image: {
+      width: 100,
+      height: 100,
+    },
+  });
+
+  const handleAddNotice = async () => {
+    setError({
+      title: !title,
+      description: !description,
+      price: !price,
+      category: !category,
+    });
+
+    if (!title || !description || !price || !category) {
+      return;
     }
-
-    return (
-        <ScrollView h="$80" w="$80">
-            <FormControl className="p-4 border rounded-lg border-outline-300">
-                <VStack space="xl">
-                    <VStack space="md">
-                        <Text className="text-typography-500">Zdjęcia</Text>
-                        <Button onPress={pickImage}>
-                            <ButtonText>
-                                Wybierz zdjęcia
-                            </ButtonText>
-                        </Button>
-                        <Button onPress={takePicture}>
-                            <ButtonText>Zrób zdjęcie</ButtonText>
-                        </Button>
-                        <Text size="sm"
-                              bold="true"
-                        >
-                            Pierwsze zdjęcie będzie zdjęciem głównym</Text>
-                        {image && image.length > 0 && (
-                            <VStack space="xs" className="flex-row flex-wrap">
-                                {image.map((img, index) => (
-                                    <Image key={index} source={{uri: img}} style={styles.image} className="m-1"/>
-                                ))}
-                            </VStack>
-                        )}
-                    </VStack>
-
-                    <VStack space="xs">
-                        <Text className="text-typography-500">Tytuł</Text>
-                        <Input className="min-w-[250px]" isInvalid={error.title}>
-                            <InputField
-                                type="text"
-                                value={title}
-                                onChangeText={(value) => setTitle(value)}
-                            />
-                        </Input>
-                    </VStack>
-
-                    <VStack space="xs">
-                        <Text className="text-typography-500">Opis</Text>
-                        <Textarea
-                            size="md"
-                            className="min-w-[250px] "
-                            isInvalid={error.description}
-                        >
-                            <TextareaInput
-                                placeholder="Opisz produkt"
-                                value={description}
-                                onChangeText={(value) => setDescription(value)}
-                            />
-                        </Textarea>
-                    </VStack>
-
-                    <VStack space="xs">
-                        <Text className="text-typography-500">Cena</Text>
-                        <Input className="min-w-[250px]" isInvalid={error.price}>
-                            <InputField
-                                type="text"
-                                value={price}
-                                onChangeText={(value) => setPrice(value)}
-                            />
-                        </Input>
-                    </VStack>
-                    <VStack space="xs">
-                        <Text className="text-typography-500">Kategoria</Text>
-                        <Select
-                            onValueChange={(value) => setCategory(value)}
-                            isInvalid={error.category}
-                        >
-                            <SelectTrigger variant="outline" size="md">
-                                <SelectInput placeholder="Wybierz kategorię"/>
-                                <SelectIcon className="mr-3" as={ChevronDownIcon}/>
-                            </SelectTrigger>
-                            <SelectPortal>
-                                <SelectBackdrop/>
-                                <SelectContent style={{maxHeight: 400}}>
-                                    <SelectScrollView>
-                                        {selectItems.map((item) => (
-                                            <SelectItem key={item.value} label={item.label} value={item.value}/>
-                                        ))}
-                                    </SelectScrollView>
-                                </SelectContent>
-                            </SelectPortal>
-                        </Select>
-                    </VStack>
-                    <Button
-                        className="mt-5 w-full"
-                        onPress={handleAddNotice}
-                        disabled={isLoading}
-                    >
-                        <ButtonText className="text-typography-0">Dodaj</ButtonText>
-                    </Button>
-                </VStack>
-            </FormControl>
-        </ScrollView>
+    const formattedAttributes = Object.entries(selectedAttributes).map(
+      ([name, value]) => ({
+        name: name,
+        value: value,
+      })
     );
-}
+    setIsLoading(true);
+    try {
+      const result = await addNotice({
+        title: title,
+        description: description,
+        price: price,
+        category: category,
+        status: "INACTIVE",
+        image: image,
+        attributes: formattedAttributes,
+      });
+
+      if (result) {
+        console.log("Notice created successfully with ID: ", result.noticeId);
+        await fetchNotices();
+        clearForm();
+
+        router.push("/(tabs)/dashboard/userNotices");
+      }
+    } catch (error) {
+      console.error("Error creating notice. Error message: ", error.message);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const takePicture = async () => {
+    const { status } = await ImagePicker.requestCameraPermissionsAsync();
+    if (status !== "granted") {
+      return;
+    }
+    const result = await ImagePicker.launchCameraAsync({
+      allowsEditing: false,
+    });
+
+    if (!result.canceled && result.assets) {
+      setImage(result.assets.map((asset) => asset.uri));
+    }
+  };
+
+  const pickImage = async () => {
+    let result = await ImagePicker.launchImageLibraryAsync({
+      mediaTypes: "images",
+      selectionLimit: 8,
+      allowsEditing: false,
+      allowsMultipleSelection: true,
+      aspect: [4, 3],
+      quality: 0.5,
+    });
+
+    if (!result.canceled) {
+      setImage(result.assets.map((asset) => asset.uri));
+    }
+  };
+
+  const clearForm = () => {
+    setTitle("");
+    setDescription("");
+    setPrice("");
+    setCategory("");
+    setImage([]);
+    setSelectedAttributes({});
+    setError({
+      title: false,
+      description: false,
+      price: false,
+      category: false,
+    });
+  };
+
+  if (isLoading) {
+    return (
+      <Box className="items-center justify-center flex-1">
+        <ActivityIndicator size="large" color="#787878" />
+        <Text size="md" bold="true" className="mt-5">
+          Dodajemy ogłoszenie...
+        </Text>
+      </Box>
+    );
+  }
+
+  return (
+    <KeyboardAvoidingView
+      behavior={Platform.OS === "ios" ? "padding" : "height"}
+      style={{ flex: 1 }}
+      keyboardVerticalOffset={Platform.OS === "ios" ? 64 : 0}
+    >
+      <ScrollView h="$80" w="$80">
+        <FormControl className="p-4 border rounded-lg border-outline-300">
+          <VStack space="xl">
+            <VStack space="md">
+              <Text className="text-typography-500">Zdjęcia</Text>
+              <Button onPress={pickImage}>
+                <ButtonText>Wybierz zdjęcia</ButtonText>
+              </Button>
+              <Button onPress={takePicture}>
+                <ButtonText>Zrób zdjęcie</ButtonText>
+              </Button>
+              <Text size="sm" bold="true">
+                Pierwsze zdjęcie będzie zdjęciem głównym
+              </Text>
+              {image && image.length > 0 && (
+                <VStack space="xs" className="flex-row flex-wrap">
+                  {image.map((img, index) => (
+                    <Image
+                      key={index}
+                      source={{ uri: img }}
+                      style={styles.image}
+                      className="m-1"
+                    />
+                  ))}
+                </VStack>
+              )}
+            </VStack>
+
+            <VStack space="xs">
+              <Text className="text-typography-500">Tytuł*</Text>
+              <Input className="min-w-[250px]" isInvalid={error.title}>
+                <InputField
+                  type="text"
+                  value={title}
+                  onChangeText={(value) => setTitle(value)}
+                />
+              </Input>
+            </VStack>
+
+            <VStack space="xs">
+              <Text className="text-typography-500">Opis*</Text>
+              <Textarea
+                size="md"
+                className="min-w-[250px] "
+                isInvalid={error.description}
+              >
+                <TextareaInput
+                  placeholder="Opisz produkt"
+                  value={description}
+                  onChangeText={(value) => setDescription(value)}
+                />
+              </Textarea>
+            </VStack>
+
+            <VStack space="xs">
+              <Text className="text-typography-500">Cena*</Text>
+              <Input className="min-w-[250px]" isInvalid={error.price}>
+                <InputField
+                  type="text"
+                  value={price}
+                  onChangeText={(value) => setPrice(value)}
+                />
+              </Input>
+            </VStack>
+            <VStack space="xs">
+              <Text className="text-typography-500">Kategoria*</Text>
+              <Select
+                onValueChange={(value) => setCategory(value)}
+                isInvalid={error.category}
+              >
+                <SelectTrigger variant="outline" size="md">
+                  <SelectInput placeholder="Wybierz kategorię" />
+                  <SelectIcon className="mr-3" as={ChevronDownIcon} />
+                </SelectTrigger>
+                <SelectPortal>
+                  <SelectBackdrop />
+                  <SelectContent style={{ maxHeight: 400 }}>
+                    <SelectScrollView>
+                      {selectItems.map((item) => (
+                        <SelectItem
+                          key={item.value}
+                          label={item.label}
+                          value={item.value}
+                        />
+                      ))}
+                    </SelectScrollView>
+                  </SelectContent>
+                </SelectPortal>
+              </Select>
+            </VStack>
+
+            {Object.entries(attributes).map(([label, options]) => (
+              <VStack key={label} space="xs">
+                <Text className="text-typography-500">{label}</Text>
+                <Select
+                  onValueChange={(value) =>
+                    setSelectedAttributes((prev) => ({
+                      ...prev,
+                      [label]: value,
+                    }))
+                  }
+                >
+                  <SelectTrigger variant="outline" size="md">
+                    <SelectInput
+                      placeholder={`Wybierz ${label.toLowerCase()}`}
+                    />
+                    <SelectIcon className="mr-3" as={ChevronDownIcon} />
+                  </SelectTrigger>
+                  <SelectPortal>
+                    <SelectBackdrop />
+                    <SelectContent style={{ maxHeight: 400 }}>
+                      <SelectScrollView>
+                        {options.map((option) => (
+                          <SelectItem
+                            key={option}
+                            label={option}
+                            value={option}
+                          />
+                        ))}
+                      </SelectScrollView>
+                    </SelectContent>
+                  </SelectPortal>
+                </Select>
+              </VStack>
+            ))}
+
+            <Button
+              className="mt-5 w-full"
+              onPress={handleAddNotice}
+              disabled={isLoading}
+            >
+              <ButtonText className="text-typography-0">Dodaj</ButtonText>
+            </Button>
+          </VStack>
+        </FormControl>
+      </ScrollView>
+    </KeyboardAvoidingView>
+  );
+}

ArtisanConnect/app/(tabs)/notices.jsx

@@ -1,65 +1,455 @@
-import {FlatList, Text, ActivityIndicator, RefreshControl} from "react-native";
-import {useState, useEffect} from "react";
-import {useNoticesStore} from "@/store/noticesStore";
-import {NoticeCard} from "@/components/NoticeCard";
+import {
+  FlatList,
+  Text,
+  ActivityIndicator,
+  RefreshControl,
+  Dimensions,
+} from "react-native";
+import { useState, useEffect } from "react";
+import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
+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,
+  SelectScrollView,
+} from "@/components/ui/select";
+import { attributes } from "@/data/attributesData";
 
 export default function Notices() {
-    const {notices, fetchNotices} = useNoticesStore();
-    const [refreshing, setRefreshing] = useState(false);
-    const [isLoading, setIsLoading] = useState(true);
-    const [error, setError] = useState(null);
+  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 [selectedAttributes, setSelectedAttributes] = useState({});
+  const params = useLocalSearchParams();
+  const router = useRouter();
 
-    useEffect(() => {
-        loadData();
-    }, []);
-
-    const loadData = async () => {
-        setIsLoading(true);
-        try {
-            await fetchNotices();
-            setError(null);
-        } catch (err) {
-            setError(err);
-        } finally {
-            setIsLoading(false);
+  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();
+  }, []);
 
-    const onRefresh = async () => {
-        setRefreshing(true);
-        try {
-            await fetchNotices();
-        } catch (err) {
-            setError(err);
-        } finally {
-            setRefreshing(false);
-        }
-    };
+  useEffect(() => {
+    loadData();
+  }, []);
 
-    if (isLoading && !refreshing) {
-        return <ActivityIndicator/>;
+  useEffect(() => {
+    let result = notices.filter((notice) => notice.status === "ACTIVE");
+
+    if (params.category) {
+      result = result.filter((notice) => notice.category === params.category);
     }
 
-    if (error) {
-        return <Text>Nie udało sie pobrać listy. {error.message}</Text>;
+    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;
+        });
+      }
     }
 
-    return (
-        <FlatList
-            key={2}
-            data={notices}
-            numColumns={2}
-            columnContainerClassName="m-2"
-            columnWrapperClassName="gap-2 m-2"
-            renderItem={({item}) => <NoticeCard notice={item}/>}
-            refreshControl={
-                <RefreshControl
-                    refreshing={refreshing}
-                    onRefresh={onRefresh}
-                    colors={["#3b82f6"]}
-                    tintColor="#3b82f6"
-                />
-            }
-        />
-    );
-}
+    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);
+      });
+    }
+
+    Object.keys(params).forEach((key) => {
+      if (key.startsWith("attribute_")) {
+        const attributeName = key.replace("attribute_", "");
+        const attributeValue = params[key];
+
+        result = result.filter((notice) =>
+          notice.attributes?.some(
+            (attr) =>
+              attr.name === attributeName && attr.value === attributeValue
+          )
+        );
+      }
+    });
+
+    setFilteredNotices(result);
+  }, [
+    notices,
+    params.category,
+    params.sort,
+    params.priceFrom,
+    params.priceTo,
+    params.search,
+    params.attribute_Kolor,
+    params.attribute_Materiał,
+  ]);
+
+  let filterActive =
+    !!params.category ||
+    !!params.sort ||
+    !!params.priceFrom ||
+    !!params.priceTo ||
+    !!params.search ||
+    Object.keys(params).some((key) => key.startsWith("attribute_"));
+
+  const loadData = async () => {
+    setIsLoading(true);
+    try {
+      await fetchNotices();
+      setError(null);
+    } catch (err) {
+      setError(err);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  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 handleAttributeSelect = (attributeName, value) => {
+    const newParams = { ...params };
+
+    if (value) {
+      newParams[`attribute_${attributeName}`] = value;
+    }
+
+    router.replace({
+      pathname: "/notices",
+      params: newParams,
+    });
+  };
+
+  const handleClose = () => setShowActionsheet(false);
+
+  const handleSort = (value) => {
+    router.replace({
+      pathname: "/notices",
+      params: { ...params, sort: value },
+    });
+    setShowSortSheet(false);
+  };
+
+  const onRefresh = async () => {
+    setRefreshing(true);
+    try {
+      await fetchNotices();
+    } catch (err) {
+      setError(err);
+    } finally {
+      setRefreshing(false);
+    }
+  };
+
+  if (isLoading && !refreshing) {
+    return <ActivityIndicator />;
+  }
+
+  if (error) {
+    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 (
+    <>
+      <Box
+        style={{
+          flexDirection: "row",
+          padding: 8,
+          paddingTop: 16,
+          paddingBottom: 16,
+          backgroundColor: "white",
+          alignItems: "center",
+          justifyContent: "space-between",
+        }}
+      >
+        <Box style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
+          <Button variant="outline" onPress={() => setShowActionsheet(true)}>
+            <ButtonText>Filtruj</ButtonText>
+            <Ionicons name="filter-outline" size={20} color="black" />
+          </Button>
+          <Button variant="outline" onPress={() => setShowSortSheet(true)}>
+            <Ionicons name="chevron-expand-outline" size={20} color="black" />
+          </Button>
+        </Box>
+        {filterActive && (
+          <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>
+            <Box>
+              {Object.entries(attributes).map(([label, options]) => (
+                <Box className="mb-4" key={label}>
+                  {/* <Text className="text-typography-500">{label}</Text> */}
+                  <Select
+                    style={{ flex: 1 }}
+                    onValueChange={(value) =>
+                      handleAttributeSelect(label, value)
+                    }
+                  >
+                    <SelectTrigger variant="outline" size="md">
+                      <SelectInput
+                        style={{ flex: 1 }}
+                        placeholder={`Wybierz ${label.toLowerCase()}`}
+                        value={params[`attribute_${label}`] || ""}
+                      />
+                      <SelectIcon className="mr-3" as={ChevronDownIcon} />
+                    </SelectTrigger>
+                    <SelectPortal>
+                      <SelectBackdrop />
+                      <SelectContent style={{ maxHeight: 400 }}>
+                        <SelectScrollView>
+                          {options.map((option) => (
+                            <SelectItem
+                              key={option}
+                              label={option}
+                              value={option}
+                            />
+                          ))}
+                        </SelectScrollView>
+                      </SelectContent>
+                    </SelectPortal>
+                  </Select>
+                </Box>
+              ))}
+            </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}
+        // numColumns={2}
+        // columnContainerClassName="m-2"
+        columnWrapperClassName="m-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,17 +4,34 @@ import { NoticeCard } from "@/components/NoticeCard";
 import { Ionicons } from "@expo/vector-icons";
 import { Box } from "@/components/ui/box";
 import { Text } from "@/components/ui/text";
+import { useCallback } from "react";
+import { useFocusEffect } from "@react-navigation/native";
 
 export default function Wishlist() {
   const wishlistNotices = useWishlist((state) => state.wishlistNotices);
+  const fetchWishlist = useWishlist((state) => state.fetchWishlist);
+
+  useFocusEffect(
+    useCallback(() => {
+      fetchWishlist();
+    }, [fetchWishlist])
+  );
+
+  const styles = {
+    container: {
+      margin: 10,
+    },
+  };
+
   if (wishlistNotices.length === 0) {
     return (
-      <Box className="flex-row flex-1 justify-center">
+      <Box style={styles.container} className="flex-row flex-1 justify-center">
         <Ionicons name="sad-outline" size={24} color="black" />
         <Text>Brak ulubionych ogłoszeń</Text>
       </Box>
     );
   }
+
   return (
     <FlatList
       data={wishlistNotices}
@@ -22,7 +39,6 @@ export default function Wishlist() {
       numColumns={2}
       columnContainerClassName="m-2"
       columnWrapperClassName="gap-2 m-2"
-      k
       renderItem={({ item }) => <NoticeCard notice={item} />}
     />
   );

ArtisanConnect/app/_layout.jsx

@@ -1,23 +1,31 @@
-import { Stack } from "expo-router";
+import {Stack} from "expo-router";
 import "@/global.css";
-import { GluestackUIProvider } from "@/components/ui/gluestack-ui-provider";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import {GluestackUIProvider} from "@/components/ui/gluestack-ui-provider";
+import {QueryClient, QueryClientProvider} from "@tanstack/react-query";
 
 const queryClient = new QueryClient();
 export default function RootLayout() {
-  return (
-    <QueryClientProvider client={queryClient}>
-      <GluestackUIProvider>
-        <Stack
-          screenOptions={{
-            headerTintColor: "#1c1c1e",
-            headerBackTitleVisible: false,
-            headerBackTitle: "Wróć",
-          }}
-        >
-          <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
-        </Stack>
-      </GluestackUIProvider>
-    </QueryClientProvider>
-  );
+
+    return (
+        <QueryClientProvider client={queryClient}>
+            <GluestackUIProvider>
+                <Stack
+                    screenOptions={{
+                        headerTintColor: "#1c1c1e",
+                        headerBackTitleVisible: false,
+                        headerBackTitle: "Wróć",
+                    }}
+                >
+                    <Stack.Screen name="(tabs)" options={{headerShown: false}}/>
+                    {/*<Stack.Screen name="user" 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,520 @@
-import {Stack, useLocalSearchParams} from "expo-router";
-import {Box} from "@/components/ui/box";
-import {Card} from "@/components/ui/card";
-import {Heading} from "@/components/ui/heading";
-import {Image} from "@/components/ui/image";
-import {Text} from "@/components/ui/text";
-import {VStack} from "@/components/ui/vstack";
-import {Ionicons} from "@expo/vector-icons";
-import {ActivityIndicator} from "react-native";
-import {useEffect, useState} from "react";
-import {useNoticesStore} from "@/store/noticesStore";
-import {useWishlist} from "@/store/wishlistStore";
-import {Pressable} from "react-native";
+import { Stack, useLocalSearchParams } from "expo-router";
+import { KeyboardAvoidingView, Platform } from "react-native";
+import { Box } from "@/components/ui/box";
+import { Card } from "@/components/ui/card";
+import { Heading } from "@/components/ui/heading";
+import { useRouter } from "expo-router";
+import { Image } from "@/components/ui/image";
+import { Text } from "@/components/ui/text";
+import { VStack } from "@/components/ui/vstack";
+import { Ionicons } from "@expo/vector-icons";
+import {
+  Avatar,
+  AvatarImage,
+  AvatarFallbackText,
+} from "@/components/ui/avatar";
+import {
+  ActivityIndicator,
+  Dimensions,
+  FlatList,
+  View,
+  TextInput,
+  Alert,
+} 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";
+import * as ScreenOrientation from "expo-screen-orientation";
+import { useAuthStore } from "@/store/authStore";
+import { sendEmail } from "@/api/email";
+// import { Button } from "@gluestack-ui/themed";
+import { Button, ButtonText } from "@/components/ui/button";
+import { SafeAreaView } from "react-native-safe-area-context";
 
 export default function NoticeDetails() {
-    const {id} = useLocalSearchParams();
-    const [image, setImage] = useState(null);
-    const [isImageLoading, setIsImageLoading] = useState(true);
-    const [isLoading, setIsLoading] = useState(true);
-    const [error, setError] = useState(null);
-    const [notice, setNotice] = useState(null);
+  const { id } = useLocalSearchParams();
+  const [images, setImages] = useState([]);
+  const [isImageLoading, setIsImageLoading] = useState(true);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [notice, setNotice] = useState(null);
+  const [user, setUser] = useState(null);
+  const [isUserLoading, setIsUserLoading] = useState(true);
+  const [isLandscape, setIsLandscape] = useState(false);
+  const flatListRef = useRef(null);
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [isMessageFormVisible, setIsMessageFormVisible] = useState(false);
+  const [message, setMessage] = useState("");
+  const [isSending, setIsSending] = useState(false);
+  const router = useRouter();
 
-    const {getNoticeById, getAllImagesByNoticeId} = useNoticesStore();
-    const addNoticeToWishlist = useWishlist((state) => state.addNoticeToWishlist);
-    const removeNoticeFromWishlist = useWishlist((state) => state.removeNoticeFromWishlist);
-    const isInWishlist = useWishlist((state) =>
-        notice ? state.wishlistNotices.some((item) => item.noticeId === notice.noticeId) : false
+  const { width } = Dimensions.get("window");
+
+  const handleSendMessage = async () => {
+    setIsSending(true);
+
+    const { user_id, token } = useAuthStore.getState();
+
+    if (!user_id || !token) {
+      console.error("Brak danych zalogowanego użytkownika.");
+      Alert.alert("Błąd", "Zaloguj się, aby wysłać wiadomość.");
+      setIsSending(false);
+      return;
+    }
+
+    let currentUserEmail = "";
+    try {
+      const currentUser = await getUserById(user_id);
+      currentUserEmail = currentUser?.email;
+      if (!currentUserEmail) {
+        console.error("Nie znaleziono adresu email zalogowanego użytkownika.");
+        Alert.alert(
+          "Błąd",
+          "Nie znaleziono adresu email zalogowanego użytkownika."
+        );
+        setIsSending(false);
+        return;
+      }
+    } catch (error) {
+      console.error("Błąd podczas pobierania danych użytkownika:", error);
+      Alert.alert(
+        "Błąd",
+        "Nie udało się pobrać danych użytkownika. Spróbuj ponownie później."
+      );
+      setIsSending(false);
+      return;
+    }
+
+    const emailData = {
+      to: user?.email || "",
+      subject: `Zapytanie ${currentUserEmail} o ogłoszenie ${notice.title}`,
+      body: message,
+    };
+
+    if (!emailData.to || !emailData.subject || !emailData.body) {
+      console.error("Walidacja nieudana: brakujące pola w emailData.");
+      Alert.alert("Błąd", "Wszystkie pola są wymagane!");
+      setIsSending(false);
+      return;
+    }
+
+    const result = await sendEmail(emailData);
+    if (result.success) {
+      setIsMessageFormVisible(false);
+      setMessage("");
+      Alert.alert("Sukces", "Wiadomość została wysłana!");
+    } else {
+      console.error("Błąd podczas wysyłania wiadomości:", result.error);
+      Alert.alert(
+        "Błąd",
+        `Nie udało się wysłać wiadomości
+                  : $ { result.error }`
+      );
+    }
+    setIsSending(false);
+  };
+
+  const formatDate = (dateString) => {
+    const date = new Date(dateString);
+    return date.toLocaleDateString("pl-PL", {
+      year: "numeric",
+      month: "2-digit",
+      day: "2-digit",
+    });
+  };
+
+  const { getNoticeById, getAllImagesByNoticeId } = useNoticesStore();
+  const toggleNoticeInWishlist = useWishlist(
+    (state) => state.toggleNoticeInWishlist
+  );
+
+  const isInWishlist = useWishlist((state) =>
+    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 unlockOrientation = async () => {
+      try {
+        await ScreenOrientation.unlockAsync();
+      } catch (err) {
+        console.error("Error unlocking orientation:", err);
+      }
+    };
+
+    const getInitialOrientation = async () => {
+      try {
+        const orientation = await ScreenOrientation.getOrientationAsync();
+        setIsLandscape(
+          orientation === ScreenOrientation.Orientation.LANDSCAPE_LEFT ||
+            orientation === ScreenOrientation.Orientation.LANDSCAPE_RIGHT
+        );
+      } catch (err) {
+        console.error("Error getting initial orientation:", err);
+      }
+    };
+
+    unlockOrientation();
+    getInitialOrientation();
+
+    const subscription = ScreenOrientation.addOrientationChangeListener(
+      ({ orientationInfo }) => {
+        const isLandscapeMode =
+          orientationInfo.orientation ===
+            ScreenOrientation.Orientation.LANDSCAPE_LEFT ||
+          orientationInfo.orientation ===
+            ScreenOrientation.Orientation.LANDSCAPE_RIGHT;
+        setIsLandscape(isLandscapeMode);
+      }
     );
 
-    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.`));
-                }
-            } catch (err) {
-                setError(err);
-            } finally {
-                setIsLoading(false);
-            }
-        };
+    return () => {
+      ScreenOrientation.removeOrientationChangeListener(subscription);
+      ScreenOrientation.lockAsync(
+        ScreenOrientation.OrientationLock.PORTRAIT_UP
+      ).catch((err) =>
+        console.error("Error locking orientation on unmount:", err)
+      );
+    };
+  }, []);
 
-        fetchNotice();
-    }, [id]);
-
-    useEffect(() => {
-        const fetchImage = async () => {
-            setIsImageLoading(true);
-            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) {
-            fetchImage();
+  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) {
-        return <ActivityIndicator/>;
+    fetchNotice();
+  }, [id]);
+
+  useEffect(() => {
+    const fetchImage = async () => {
+      setIsImageLoading(true);
+      if (notice) {
+        try {
+          const fetchedImages = await getAllImagesByNoticeId(notice.noticeId);
+          setImages(
+            fetchedImages && fetchedImages.length > 0
+              ? fetchedImages
+              : { uri: "https://http.cat/404.jpg" }
+          );
+        } catch (err) {
+          console.error("Error while loading images:", err);
+          setImages({ uri: "https://http.cat/404.jpg" });
+        } finally {
+          setIsImageLoading(false);
+        }
+      }
+    };
+
+    if (notice) {
+      fetchImage();
     }
+  }, [notice]);
 
-    if (error) {
-        return <Text>Błąd, spróbuj ponownie póżniej: {error.message}</Text>;
-    }
+  useEffect(() => {
+    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) {
-        return <Text>Nie znaleziono ogłoszenia</Text>;
-    }
+    fetchUser();
+  }, [notice]);
 
-    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>
-            ) : (
-                <Image
-                    source={{
-                        uri: image,
-                    }}
-                    className="h-auto w-full rounded-md aspect-[1/1]"
-                    alt="image"
+  if (isLoading) {
+    return <ActivityIndicator />;
+  }
+
+  if (error) {
+    return <Text>Błąd, spróbuj ponownie póżniej: {error.message}</Text>;
+  }
+
+  if (!notice) {
+    return <Text>Nie znaleziono ogłoszenia</Text>;
+  }
+
+  return (
+    <SafeAreaView className="flex-1" edges={["right", "bottom", "left"]}>
+      <Card className="p-0 rounded-lg m-3 flex-1">
+        <Stack.Screen
+          options={{
+            title: notice.title,
+            headerShown: !isLandscape,
+          }}
+        />
+        {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"
+            style={
+              isLandscape
+                ? {
+                    position: "absolute",
+                    top: 0,
+                    left: 0,
+                    right: 0,
+                    bottom: 0,
+                    zIndex: 30,
+                  }
+                : {}
+            }
+          >
+            <FlatList
+              ref={flatListRef}
+              data={images}
+              horizontal
+              snapToAlignment="start"
+              snapToInterval={width}
+              decelerationRate="fast"
+              showsHorizontalScrollIndicator={false}
+              pagingEnabled
+              onViewableItemsChanged={onViewableItemsChanged}
+              viewabilityConfig={viewabilityConfig}
+              style={isLandscape ? { flex: 1 } : {}}
+              renderItem={({ item, index }) => (
+                <View style={{ width: width }} className="p-1">
+                  <Image
+                    source={item}
+                    // className="h-auto w-auto rounded-md aspect-[1/1]"
+                    alt={`Zdjęcie ${index + 1}`}
                     resizeMode="cover"
-                />
-            )}
+                    renderMode="contain"
+                    className={
+                      isLandscape
+                        ? "w-auto h-full"
+                        : "h-auto w-auto rounded-md aspect-[1/1]"
+                    }
+                    style={
+                      isLandscape
+                        ? {
+                            resizeMode: "contain",
+                          }
+                        : {}
+                    }
+                    // resizeMode={isLandscape ? "cover" : "contain"}
+                  />
+                </View>
+              )}
+              keyExtractor={(item, index) => index.toString()}
+            />
 
-            <VStack className="p-2">
-                <Text className="text-sm font-normal mb-2 text-typography-700">
-                    {notice.title}
+            {images.length > 1 && (
+              <Box className="flex-row justify-center mt-2">
+                {images.map((_, index) => (
+                  <Box
+                    key={index}
+                    className={`w-2 h-2 rounded-full mx-1 ${
+                      index === currentIndex ? "bg-primary-500" : "bg-gray-300"
+                    }`}
+                  />
+                ))}
+              </Box>
+            )}
+          </Box>
+        )}
+
+        <ScrollView showsVerticalScrollIndicator={false}>
+          <VStack className="p-2">
+            <Text className="text-sm font-normal mb-2 text-typography-700">
+              {formatDate(notice.publishDate)}
+            </Text>
+            <Text className="text-2xl text-gray-950 font-bold mb-2 text-left bg-gray-50 rounded-md p-2">
+              {notice.title}
+            </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>
-                <Box className="flex-row items-center">
-                    <Heading size="md" className="flex-1">
-                        {notice.price}zł
-                    </Heading>
-                    <Pressable
-                        onPress={() => {
-                            if (isInWishlist) {
-                                removeNoticeFromWishlist(notice.noticeId);
-                            } else {
-                                addNoticeToWishlist(notice);
-                            }
+              </Text>
+            </Box>
+            {notice.attributes && notice.attributes.length > 0 && (
+              <Box className="mt-4 bg-gray-50 p-3 rounded-lg shadow-sm">
+                {notice.attributes.map((attribute, index) => (
+                  <Text
+                    key={index}
+                    className="text-sm text-typography-500 mb-1"
+                  >
+                    {attribute.name}:{" "}
+                    <Text className="font-bold text-gray-950">
+                      {attribute.value}
+                    </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">
+                    <Avatar size="md">
+                      <AvatarImage
+                        source={{
+                          uri:
+                            user.image ||
+                            "https://th.bing.com/th/id/OIP.3coo_N8sieled8QNroQmkgHaHa?rs=1&pid=ImgDetMain",
                         }}
+                        alt="Zdjęcie profilowe"
+                      />
+                      <AvatarFallbackText>
+                        {user.firstName?.[0]}
+                        {user.lastName?.[0]}
+                      </AvatarFallbackText>
+                    </Avatar>
+                  </Box>
+
+                  <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"
                     >
-                        <Ionicons
-                            name={isInWishlist ? "heart" : "heart-outline"}
-                            size={24}
-                            color={"primary-heading-500"}
-                        />
+                      <Text className="text-white text-center font-bold">
+                        Wyślij wiadomość
+                      </Text>
                     </Pressable>
-                </Box>
-            </VStack>
-        </Card>
-    );
-}
+
+                    <Button
+                      variant="outline"
+                      className="mt-2"
+                      onPress={() => router.replace(`/user/${notice.clientId}`)}
+                    >
+                      <ButtonText>
+                        Zobacz więcej ogłoszeń od {user.firstName}
+                      </ButtonText>
+                    </Button>
+                  </Box>
+                </>
+              ) : (
+                <Text>Błąd podczas ładowania danych użytkownika</Text>
+              )}
+            </Box>
+          </VStack>
+        </ScrollView>
+        {isMessageFormVisible && (
+          <KeyboardAvoidingView
+            behavior={Platform.OS === "ios" ? "padding" : "height"}
+            className="absolute inset-0 bg-black/50 justify-center items-center z-20"
+          >
+            <View className="bg-white p-4 rounded-lg w-4/5 max-h-4/5">
+              <ScrollView showsVerticalScrollIndicator={false}>
+                <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">Temat:</Text>
+                <Text className="bg-gray-100 p-3 rounded text-gray-500">
+                  Zapytanie o ogłoszenie '
+                  {notice.title || "Brak nazwy ogłoszenia"}'
+                </Text>
+
+                <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-blue-500 py-2 px-4 rounded-md"
+                    disabled={isSending}
+                  >
+                    {isSending ? (
+                      <ActivityIndicator color="#fff" />
+                    ) : (
+                      <Text className="text-white">Wyślij</Text>
+                    )}
+                  </Pressable>
+                </View>
+              </ScrollView>
+            </View>
+          </KeyboardAvoidingView>
+        )}
+      </Card>
+    </SafeAreaView>
+  );
+}

ArtisanConnect/app/notice/edit/[id].jsx

@@ -0,0 +1,389 @@
+import { useState, useEffect } from "react";
+import {
+  Image,
+  StyleSheet,
+  KeyboardAvoidingView,
+  Platform,
+  ActivityIndicator,
+} from "react-native";
+import { Button, ButtonText } from "@/components/ui/button";
+import { FormControl } from "@/components/ui/form-control";
+import { Input, InputField } from "@/components/ui/input";
+import { Text } from "@/components/ui/text";
+import { VStack } from "@/components/ui/vstack";
+import { Textarea, TextareaInput } from "@/components/ui/textarea";
+import { ScrollView } from "@gluestack-ui/themed";
+import { Box } from "@/components/ui/box";
+import * as ImagePicker from "expo-image-picker";
+import {
+  Select,
+  SelectTrigger,
+  SelectInput,
+  SelectIcon,
+  SelectPortal,
+  SelectBackdrop,
+  SelectContent,
+  SelectItem,
+  SelectScrollView,
+} from "@/components/ui/select";
+
+import { ChevronDownIcon } from "@/components/ui/icon";
+import { useNoticesStore } from "@/store/noticesStore";
+import { listCategories } from "@/api/categories";
+import { useRouter } from "expo-router";
+import { attributes } from "@/data/attributesData";
+import { useLocalSearchParams, Stack } from "expo-router";
+import { Ionicons } from "@expo/vector-icons";
+
+export default function EditNotice() {
+  const { id } = useLocalSearchParams();
+  const router = useRouter();
+  const { editNotice, fetchNotices, notices } = useNoticesStore();
+  const [title, setTitle] = useState("");
+  const [description, setDescription] = useState("");
+  const [price, setPrice] = useState("");
+  const [category, setCategory] = useState("");
+  const [image, setImage] = useState([]);
+  const [isImageLoading, setIsImageLoading] = useState(true);
+  const [selectItems, setSelectItems] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [selectedAttributes, setSelectedAttributes] = useState({});
+  const { getNoticeById, getAllImagesByNoticeId } = useNoticesStore();
+
+  useEffect(() => {
+    let isMounted = true;
+    const fetchSelectItems = async () => {
+      try {
+        let data = await listCategories();
+        if (isMounted && Array.isArray(data)) {
+          setSelectItems(data);
+        }
+      } catch (error) {
+        console.error("Error fetching select items:", error);
+      }
+    };
+
+    fetchSelectItems();
+
+    return () => {
+      isMounted = false;
+    };
+  }, []);
+
+  useEffect(() => {
+    const notice = notices.find((notice) => notice.noticeId == id);
+    if (notice) {
+      setTitle(notice.title || "");
+      setDescription(notice.description || "");
+      setPrice(notice.price?.toString() || "");
+      setCategory(notice.category || "");
+
+      if (notice.attributes && Array.isArray(notice.attributes)) {
+        const attributesObj = {};
+        notice.attributes.forEach((attr) => {
+          attributesObj[attr.name] = attr.value;
+        });
+        setSelectedAttributes(attributesObj);
+      }
+    }
+
+    const fetchImage = async () => {
+      setIsImageLoading(true);
+      try {
+        const fetchedImages = await getAllImagesByNoticeId(notice.noticeId);
+        if (fetchedImages && fetchedImages.length > 0) {
+          setImage(fetchedImages);
+        } else {
+          setImage([]);
+        }
+      } catch (err) {
+        console.error("Error while loading images:", err);
+        setImage([]);
+      } finally {
+        setIsImageLoading(false);
+      }
+    };
+
+    if (notice) {
+      fetchImage();
+    }
+  }, [notices, id]);
+
+  const [error, setError] = useState({
+    title: false,
+    description: false,
+    price: false,
+    category: false,
+  });
+
+  const styles = StyleSheet.create({
+    container: {
+      flex: 1,
+      alignItems: "center",
+      justifyContent: "center",
+    },
+    image: {
+      width: 100,
+      height: 100,
+    },
+  });
+
+  const handleEditNotice = async () => {
+    setError({
+      title: !title,
+      description: !description,
+      price: !price,
+      category: !category,
+    });
+
+    if (!title || !description || !price || !category) {
+      console.log("Error in form");
+      return;
+    }
+    const formattedAttributes = Object.entries(selectedAttributes).map(
+      ([name, value]) => ({
+        name: name,
+        value: value,
+      })
+    );
+    setIsLoading(true);
+    try {
+      const result = await editNotice(id, {
+        title: title,
+        description: description,
+        price: price,
+        category: category,
+        status: "INACTIVE",
+        image: image,
+        attributes: formattedAttributes,
+      });
+
+      if (result) {
+        await fetchNotices();
+
+        router.push("/(tabs)/dashboard/userNotices");
+      }
+    } catch (error) {
+      console.error("Error editing notice. Error message: ", error.message);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const takePicture = async () => {
+    const { status } = await ImagePicker.requestCameraPermissionsAsync();
+    if (status !== "granted") {
+      return;
+    }
+    const result = await ImagePicker.launchCameraAsync({
+      allowsEditing: false,
+    });
+
+    if (!result.canceled && result.assets) {
+      setImage(result.assets.map((asset) => asset.uri));
+    }
+  };
+
+  const pickImage = async () => {
+    let result = await ImagePicker.launchImageLibraryAsync({
+      mediaTypes: "images",
+      selectionLimit: 8,
+      allowsEditing: false,
+      allowsMultipleSelection: true,
+      aspect: [4, 3],
+      quality: 0.5,
+    });
+
+    if (!result.canceled) {
+      setImage(result.assets.map((asset) => asset.uri));
+    }
+  };
+
+  if (isLoading) {
+    return (
+      <Box className="items-center justify-center flex-1">
+        <ActivityIndicator size="large" color="#787878" />
+        <Text size="md" bold="true" className="mt-5">
+          Edytuj ogłoszenie...
+        </Text>
+      </Box>
+    );
+  }
+
+  return (
+    <KeyboardAvoidingView
+      behavior={Platform.OS === "ios" ? "padding" : "height"}
+      style={{ flex: 1 }}
+      keyboardVerticalOffset={Platform.OS === "ios" ? 64 : 0}
+    >
+      <Stack.Screen
+        options={{
+          title: "Edycja",
+          headerLeft: () => (
+            <Button
+              variant="link"
+              size="sm"
+              onPress={() => router.replace("/(tabs)/dashboard/userNotices")}
+              className="mr-2"
+            >
+              <Ionicons name="arrow-back" size={24} color="#1c1c1e" />
+              <ButtonText className="text-typography-900">Wróć</ButtonText>
+            </Button>
+          ),
+        }}
+      />
+      <ScrollView h="$80" w="$80">
+        <FormControl className="p-4 border rounded-lg border-outline-300">
+          <VStack space="xl">
+            <VStack space="md">
+              <Text className="text-typography-500">Zdjęcia</Text>
+              <Button onPress={pickImage}>
+                <ButtonText>Wybierz zdjęcia</ButtonText>
+              </Button>
+              <Button onPress={takePicture}>
+                <ButtonText>Zrób zdjęcie</ButtonText>
+              </Button>
+              <Text size="sm" bold="true">
+                Pierwsze zdjęcie będzie zdjęciem głównym
+              </Text>
+              {image && image.length > 0 && (
+                <VStack space="xs" className="flex-row flex-wrap">
+                  {image.map((img, index) => {
+                    const imageSource =
+                      typeof img === "string" ? { uri: img } : img;
+
+                    return (
+                      <Image
+                        key={index}
+                        source={imageSource}
+                        style={styles.image}
+                        className="m-1"
+                        onError={(error) =>
+                          console.log(`Image ${index} error:`, error)
+                        }
+                      />
+                    );
+                  })}
+                </VStack>
+              )}
+            </VStack>
+
+            <VStack space="xs">
+              <Text className="text-typography-500">Tytuł*</Text>
+              <Input className="min-w-[250px]" isInvalid={error.title}>
+                <InputField
+                  type="text"
+                  value={title}
+                  onChangeText={(value) => setTitle(value)}
+                />
+              </Input>
+            </VStack>
+
+            <VStack space="xs">
+              <Text className="text-typography-500">Opis*</Text>
+              <Textarea
+                size="md"
+                className="min-w-[250px] "
+                isInvalid={error.description}
+              >
+                <TextareaInput
+                  placeholder="Opisz produkt"
+                  value={description}
+                  onChangeText={(value) => setDescription(value)}
+                />
+              </Textarea>
+            </VStack>
+
+            <VStack space="xs">
+              <Text className="text-typography-500">Cena*</Text>
+              <Input className="min-w-[250px]" isInvalid={error.price}>
+                <InputField
+                  type="text"
+                  value={price}
+                  onChangeText={(value) => setPrice(value)}
+                />
+              </Input>
+            </VStack>
+            <VStack space="xs">
+              <Text className="text-typography-500">Kategoria*</Text>
+              <Select
+                onValueChange={(value) => setCategory(value)}
+                isInvalid={error.category}
+                selectedValue={category || ""}
+              >
+                <SelectTrigger variant="outline" size="md">
+                  <SelectInput
+                    placeholder="Wybierz kategorię"
+                    value={
+                      selectItems.find((item) => item.value === category)
+                        ?.label || ""
+                    }
+                  />
+                  <SelectIcon className="mr-3" as={ChevronDownIcon} />
+                </SelectTrigger>
+                <SelectPortal>
+                  <SelectBackdrop />
+                  <SelectContent style={{ maxHeight: 400 }}>
+                    <SelectScrollView>
+                      {selectItems.map((item) => (
+                        <SelectItem
+                          key={item.value}
+                          label={item.label}
+                          value={item.value}
+                        />
+                      ))}
+                    </SelectScrollView>
+                  </SelectContent>
+                </SelectPortal>
+              </Select>
+            </VStack>
+
+            {Object.entries(attributes).map(([label, options]) => (
+              <VStack key={label} space="xs">
+                <Text className="text-typography-500">{label}</Text>
+                <Select
+                  selectedValue={selectedAttributes[label] || ""}
+                  onValueChange={(value) =>
+                    setSelectedAttributes((prev) => ({
+                      ...prev,
+                      [label]: value,
+                    }))
+                  }
+                >
+                  <SelectTrigger variant="outline" size="md">
+                    <SelectInput
+                      placeholder={`Wybierz ${label.toLowerCase()}`}
+                    />
+                    <SelectIcon className="mr-3" as={ChevronDownIcon} />
+                  </SelectTrigger>
+                  <SelectPortal>
+                    <SelectBackdrop />
+                    <SelectContent style={{ maxHeight: 400 }}>
+                      <SelectScrollView>
+                        {options.map((option) => (
+                          <SelectItem
+                            key={option}
+                            label={option}
+                            value={option}
+                          />
+                        ))}
+                      </SelectScrollView>
+                    </SelectContent>
+                  </SelectPortal>
+                </Select>
+              </VStack>
+            ))}
+
+            <Button
+              className="mt-5 w-full"
+              onPress={handleEditNotice}
+              disabled={isLoading}
+            >
+              <ButtonText className="text-typography-0">Edytuj</ButtonText>
+            </Button>
+          </VStack>
+        </FormControl>
+      </ScrollView>
+    </KeyboardAvoidingView>
+  );
+}

ArtisanConnect/app/registration.jsx

@@ -1,20 +1,24 @@
 import React, {useState} from 'react';
-import {StyleSheet, ActivityIndicator, SafeAreaView, View} from 'react-native';
+import {StyleSheet, ActivityIndicator, SafeAreaView, View, Platform, KeyboardAvoidingView} from 'react-native';
 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, EyeIcon, EyeOffIcon} from "@/components/ui/icon"
 import {Center} from "@/components/ui/center"
 import {Heading} from "@/components/ui/heading"
-import {Input, InputField} from "@/components/ui/input"
+import {Input, InputField, InputIcon, InputSlot} from "@/components/ui/input"
 import {VStack} from "@/components/ui/vstack"
+import {Text} from "@/components/ui/text";
 
 export default function Registration() {
     const [email, setEmail] = useState('');
     const [password, setPassword] = useState('');
     const [firstName, setFirstName] = useState('');
     const [lastName, setLastName] = useState('');
+    const [emailError, setEmailError] = useState('');
+    const [showPassword, setShowPassword] = useState(false)
     const {signUp, isLoading} = useAuthStore();
     const router = useRouter();
 
@@ -24,6 +28,11 @@ export default function Registration() {
             return;
         }
 
+        if (!validateEmail(email)) {
+            setEmailError('Nieprawidłowy format adresu email');
+            return;
+        }
+
         try {
             await signUp({email, password, firstName, lastName});
             alert(`Zalogowano jako ${email}`);
@@ -33,6 +42,17 @@ export default function Registration() {
         }
     }
 
+    const validateEmail = (email) => {
+        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+        return emailRegex.test(email);
+    };
+
+    const handleShowPassword = () => {
+        setShowPassword((showState) => {
+            return !showState
+        })
+    }
+
     if (isLoading) {
         return (
             <View style={styles.container}>
@@ -42,35 +62,66 @@ 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>
-                    </VStack>
-                    <VStack space="xl" className="py-2">
-                        <Input>
-                            <InputField type="email" className="py-2" placeholder="E-mail" onChangeText={setEmail}/>
-                        </Input>
-                        <Input>
-                            <InputField className="py-2" placeholder="Imię" onChangeText={setFirstName}/>
-                        </Input>
-                        <Input>
-                            <InputField className="py-2" placeholder="Nazwisko" onChangeText={setLastName}/>
-                        </Input>
-                        <Input>
-                            <InputField type="password" className="py-2" placeholder="Hasło"
-                                        onChangeText={setPassword}/>
-                        </Input>
-                    </VStack>
-                    <VStack space="lg" className="pt-4">
-                        <Button size="sm" onPress={handleInternalRegistration}>
-                            <ButtonText>Zarejestruj się</ButtonText>
-                        </Button>
-                    </VStack>
-                </Box>
-            </Center>
-        </SafeAreaView>
+        <KeyboardAvoidingView
+            behavior={Platform.OS === "ios" ? "padding" : "height"}
+            style={{flex: 1}}
+            keyboardVerticalOffset={Platform.OS === "ios" ? 64 : 0}
+        >
+            <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">
+                            {emailError ? <Text className="m-0 color-red-600">{emailError}</Text> : null}
+                            <Input isRequired={true}>
+                                <InputField type="email" className="py-2" placeholder="E-mail"
+                                            onChangeText={(text) => {
+                                                setEmail(text);
+                                                if (text && !validateEmail(text)) {
+                                                    setEmailError('Nieprawidłowy format adresu email');
+                                                } else {
+                                                    setEmailError('');
+                                                }
+                                            }}
+                                />
+                            </Input>
+                            <Input isRequired={true}>
+                                <InputField className="py-2" placeholder="Imię" onChangeText={setFirstName}/>
+                            </Input>
+                            <Input isRequired={true}>
+                                <InputField className="py-2" placeholder="Nazwisko" onChangeText={setLastName}/>
+                            </Input>
+                            <Input isRequired={true}>
+                                <InputField type={showPassword ? "text" : "password"} className="py-2"
+                                            placeholder="Hasło"
+                                            onChangeText={setPassword}/>
+                                <InputSlot className="pr-3" onPress={handleShowPassword}>
+                                    <InputIcon as={showPassword ? EyeIcon : EyeOffIcon}/>
+                                </InputSlot>
+                            </Input>
+                        </VStack>
+                        <VStack space="lg" className="pt-4">
+                            <Button size="sm" onPress={handleInternalRegistration}>
+                                <ButtonText>Zarejestruj się</ButtonText>
+                            </Button>
+                        </VStack>
+                    </Box>
+
+                </Center>
+            </SafeAreaView>
+        </KeyboardAvoidingView>
     );
 }
 
@@ -93,4 +144,8 @@ const styles = StyleSheet.create({
         color: 'red',
         marginBottom: 10,
     },
+    signupbutton: {
+        fontWeight: '300',
+        textAlign: 'left',
+    },
 });

ArtisanConnect/app/user/[userId].jsx

@@ -0,0 +1,86 @@
+import { useLocalSearchParams, Stack } from "expo-router";
+import { useState, useEffect } from "react";
+import {FlatList, ActivityIndicator, Text, SafeAreaView} 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 (
+      <SafeAreaView className="flex-1" edges={['right', 'bottom', 'left']}>
+    <VStack className="p-4">
+      <Stack.Screen
+        options={{
+          title: "Ogłoszenia użytkownika",
+        }}
+      />
+      <Box className="flex-row items-center mb-4">
+        <Image
+          source={{
+            uri:
+              user.image ||
+              "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",
+            gap: 8,
+          }}
+          renderItem={({ item }) => <NoticeCard notice={item} />}
+          keyExtractor={(item) => item.noticeId.toString()}
+        />
+      ) : (
+        <Text>Ten użytkownik nie ma żadnych ogłoszeń.</Text>
+      )}
+    </VStack>
+      </SafeAreaView>
+  );
+}

ArtisanConnect/components/CategorySection.jsx

@@ -0,0 +1,57 @@
+import { View, FlatList } from "react-native";
+import { useEffect, useState } from "react";
+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,10 +14,13 @@ import {useEffect, useState} from "react";
 export function NoticeCard({notice}) {
     const noticeId = notice?.noticeId;
 
-    const addNoticeToWishlist = useWishlist((state) => state.addNoticeToWishlist);
-    const removeNoticeFromWishlist = useWishlist((state) => state.removeNoticeFromWishlist);
+    const toggleNoticeInWishlist = useWishlist(
+        (state) => state.toggleNoticeInWishlist
+    );
     const isInWishlist = useWishlist((state) =>
-        noticeId ? state.wishlistNotices.some((item) => item.noticeId === noticeId) : false
+        noticeId
+            ? state.wishlistNotices.some((item) => item.noticeId === noticeId)
+            : false
     );
 
     const [image, setImage] = useState(null);
@@ -31,7 +34,7 @@ export function NoticeCard({notice}) {
         const fetchImage = async () => {
             if (!noticeId) {
                 if (isMounted) {
-                    setImage("https://http.cat/404.jpg");
+                    setImage({uri: "https://http.cat/404.jpg"});
                     setIsLoading(false);
                 }
                 return;
@@ -41,12 +44,14 @@ export function NoticeCard({notice}) {
             try {
                 const images = await getAllImagesByNoticeId(noticeId);
                 if (isMounted) {
-                    setImage(images && images.length > 0 ? images[0] : "https://http.cat/404.jpg");
+                    setImage(
+                        images && images.length > 0 ? images[0] : {uri: "https://http.cat/404.jpg"}
+                    );
                 }
             } catch (error) {
                 console.error(`Error while loading image: ${error}`);
                 if (isMounted) {
-                    setImage("https://http.cat/404.jpg");
+                    setImage({uri: "https://http.cat/404.jpg"});
                 }
             } finally {
                 if (isMounted) {
@@ -63,7 +68,7 @@ export function NoticeCard({notice}) {
     }, [noticeId]);
 
     if (!notice) {
-        return <View style={{flex: 1}} />;
+        return <View style={{flex: 1}}/>;
     }
 
     return (
@@ -72,13 +77,11 @@ export function NoticeCard({notice}) {
                 <Card className="p-0 rounded-lg max-w-[460px] flex-1">
                     {isLoading ? (
                         <Box className="h-auto w-full rounded-md aspect-[1/1] bg-gray-100 items-center justify-center">
-                            <ActivityIndicator size="large" color="#3b82f6" />
+                            <ActivityIndicator size="large" color="#3b82f6"/>
                         </Box>
                     ) : (
                         <Image
-                            source={{
-                                uri: image,
-                            }}
+                            source={image}
                             className="h-auto w-full rounded-md aspect-[1/1]"
                             alt="image"
                             resizeMode="cover"
@@ -94,11 +97,7 @@ export function NoticeCard({notice}) {
                             </Heading>
                             <Pressable
                                 onPress={() => {
-                                    if (isInWishlist) {
-                                        removeNoticeFromWishlist(noticeId);
-                                    } else {
-                                        addNoticeToWishlist(notice);
-                                    }
+                                    toggleNoticeInWishlist(noticeId);
                                 }}
                             >
                                 <Ionicons
@@ -113,4 +112,4 @@ export function NoticeCard({notice}) {
             </Pressable>
         </Link>
     );
-}
+}

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,35 @@
+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";
+import { Link } from "expo-router";
+
+export default function UserBlock({ user }) {
+  return (
+    <Link href={`/user/${user.id}`}>
+      <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 ||
+                  "https://th.bing.com/th/id/OIP.3coo_N8sieled8QNroQmkgHaHa?rs=1&pid=ImgDetMain",
+              }}
+            />
+          </Avatar>
+          <Heading size="sm">
+            {user.firstName} {user.lastName}
+          </Heading>
+        </VStack>
+      </Box>
+    </Link>
+  );
+}

ArtisanConnect/components/UserSection.jsx

@@ -0,0 +1,54 @@
+import { View } from "react-native";
+import { useEffect, useState } from "react";
+import { Heading } from "@/components/ui/heading";
+import { FlatList } from "react-native";
+import UserBlock from "@/components/UserBlock";
+import { getAllUsers } from "@/api/client";
+import { useAuthStore } from "@/store/authStore";
+
+export function UserSection({ notices, title }) {
+  const [users, setUsers] = useState([]);
+  const { token } = useAuthStore.getState();
+
+  useEffect(() => {
+    const fetchUsers = async () => {
+      try {
+        const data = await getAllUsers();
+        setUsers(data);
+      } catch (error) {
+        setUsers([]);
+      }
+    };
+
+    if (token) {
+        fetchUsers();
+    }
+  }, [token]);
+
+  const usersWithNoticeCount =
+    users && users.length > 0
+      ? 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/components/ui/toast/index.tsx

@@ -0,0 +1,240 @@
+'use client';
+import React from 'react';
+import { createToastHook } from '@gluestack-ui/toast';
+import { AccessibilityInfo, Text, View, ViewStyle } from 'react-native';
+import { tva } from '@gluestack-ui/nativewind-utils/tva';
+import { cssInterop } from 'nativewind';
+import {
+  Motion,
+  AnimatePresence,
+  MotionComponentProps,
+} from '@legendapp/motion';
+import {
+  withStyleContext,
+  useStyleContext,
+} from '@gluestack-ui/nativewind-utils/withStyleContext';
+import type { VariantProps } from '@gluestack-ui/nativewind-utils';
+
+type IMotionViewProps = React.ComponentProps<typeof View> &
+  MotionComponentProps<typeof View, ViewStyle, unknown, unknown, unknown>;
+
+const MotionView = Motion.View as React.ComponentType<IMotionViewProps>;
+
+const useToast = createToastHook(MotionView, AnimatePresence);
+const SCOPE = 'TOAST';
+
+cssInterop(MotionView, { className: 'style' });
+
+const toastStyle = tva({
+  base: 'p-4 m-1 rounded-md gap-1 web:pointer-events-auto shadow-hard-5 border-outline-100',
+  variants: {
+    action: {
+      error: 'bg-error-800',
+      warning: 'bg-warning-700',
+      success: 'bg-success-700',
+      info: 'bg-info-700',
+      muted: 'bg-background-800',
+    },
+
+    variant: {
+      solid: '',
+      outline: 'border bg-background-0',
+    },
+  },
+});
+
+const toastTitleStyle = tva({
+  base: 'text-typography-0 font-medium font-body tracking-md text-left',
+  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',
+    },
+  },
+  parentVariants: {
+    variant: {
+      solid: '',
+      outline: '',
+    },
+    action: {
+      error: '',
+      warning: '',
+      success: '',
+      info: '',
+      muted: '',
+    },
+  },
+  parentCompoundVariants: [
+    {
+      variant: 'outline',
+      action: 'error',
+      class: 'text-error-800',
+    },
+    {
+      variant: 'outline',
+      action: 'warning',
+      class: 'text-warning-800',
+    },
+    {
+      variant: 'outline',
+      action: 'success',
+      class: 'text-success-800',
+    },
+    {
+      variant: 'outline',
+      action: 'info',
+      class: 'text-info-800',
+    },
+    {
+      variant: 'outline',
+      action: 'muted',
+      class: 'text-background-800',
+    },
+  ],
+});
+
+const toastDescriptionStyle = tva({
+  base: 'font-normal font-body tracking-md text-left',
+  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',
+    },
+  },
+  parentVariants: {
+    variant: {
+      solid: 'text-typography-50',
+      outline: 'text-typography-900',
+    },
+  },
+});
+
+const Root = withStyleContext(View, SCOPE);
+type IToastProps = React.ComponentProps<typeof Root> & {
+  className?: string;
+} & VariantProps<typeof toastStyle>;
+
+const Toast = React.forwardRef<React.ComponentRef<typeof Root>, IToastProps>(
+  function Toast(
+    { className, variant = 'solid', action = 'muted', ...props },
+    ref
+  ) {
+    return (
+      <Root
+        ref={ref}
+        className={toastStyle({ variant, action, class: className })}
+        context={{ variant, action }}
+        {...props}
+      />
+    );
+  }
+);
+
+type IToastTitleProps = React.ComponentProps<typeof Text> & {
+  className?: string;
+} & VariantProps<typeof toastTitleStyle>;
+
+const ToastTitle = React.forwardRef<
+  React.ComponentRef<typeof Text>,
+  IToastTitleProps
+>(function ToastTitle({ className, size = 'md', children, ...props }, ref) {
+  const { variant: parentVariant, action: parentAction } =
+    useStyleContext(SCOPE);
+  React.useEffect(() => {
+    // Issue from react-native side
+    // Hack for now, will fix this later
+    AccessibilityInfo.announceForAccessibility(children as string);
+  }, [children]);
+
+  return (
+    <Text
+      {...props}
+      ref={ref}
+      aria-live="assertive"
+      aria-atomic="true"
+      role="alert"
+      className={toastTitleStyle({
+        size,
+        class: className,
+        parentVariants: {
+          variant: parentVariant,
+          action: parentAction,
+        },
+      })}
+    >
+      {children}
+    </Text>
+  );
+});
+
+type IToastDescriptionProps = React.ComponentProps<typeof Text> & {
+  className?: string;
+} & VariantProps<typeof toastDescriptionStyle>;
+
+const ToastDescription = React.forwardRef<
+  React.ComponentRef<typeof Text>,
+  IToastDescriptionProps
+>(function ToastDescription({ className, size = 'md', ...props }, ref) {
+  const { variant: parentVariant } = useStyleContext(SCOPE);
+  return (
+    <Text
+      ref={ref}
+      {...props}
+      className={toastDescriptionStyle({
+        size,
+        class: className,
+        parentVariants: {
+          variant: parentVariant,
+        },
+      })}
+    />
+  );
+});
+
+Toast.displayName = 'Toast';
+ToastTitle.displayName = 'ToastTitle';
+ToastDescription.displayName = 'ToastDescription';
+
+export { useToast, Toast, ToastTitle, ToastDescription };

ArtisanConnect/data/attributesData.jsx

@@ -0,0 +1,28 @@
+export const attributes = {
+  Kolor: [
+    "Zielony",
+    "Czerwony",
+    "Niebieski",
+    "Żółty",
+    "Biały",
+    "Czarny",
+    "Różowy",
+    "Szary",
+    "Fioletowy",
+    "Pomarańczowy",
+    "Inny",
+  ],
+  Materiał: [
+    "Bawełna",
+    "Wełna",
+    "Syntetyk",
+    "Skóra",
+    "Len",
+    "Jedwab",
+    "Poliester",
+    "Akryl",
+    "Wiskoza",
+    "Nylon",
+    "Inny",
+  ],
+};

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",
@@ -33,10 +36,11 @@
     "@tanstack/react-query": "^5.74.4",
     "axios": "^1.9.0",
     "babel-plugin-module-resolver": "^5.0.2",
-    "expo": "^53.0.0",
-    "expo-auth-session": "~6.1.5",
-    "expo-camera": "~16.1.6",
-    "expo-constants": "~17.1.6",
+    "expo": "^53.0.10",
+    "expo-auth-session": "~6.2.0",
+    "expo-camera": "~16.1.7",
+    "expo-constants": "~17.1.5",
+    "expo-crypto": "~14.1.4",
     "expo-image-picker": "~16.1.4",
     "expo-linking": "~7.1.4",
     "expo-router": "~5.0.5",
@@ -48,9 +52,10 @@
     "nativewind": "^4.1.23",
     "react": "19.0.0",
     "react-dom": "19.0.0",
-    "react-native": "0.79.2",
+    "react-native": "0.79.3",
     "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",
@@ -58,7 +63,7 @@
     "react-native-web": "~0.20.0",
     "tailwindcss": "^3.4.17",
     "zustand": "^5.0.3",
-    "expo-crypto": "~14.1.4"
+    "expo-screen-orientation": "~8.1.7"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",

ArtisanConnect/store/authStore.jsx

@@ -1,105 +1,97 @@
-import {create} from "zustand";
-import {createJSONStorage, persist} from "zustand/middleware";
+import { create } from "zustand";
+import { createJSONStorage, persist } from "zustand/middleware";
 import AsyncStorage from "@react-native-async-storage/async-storage";
 import axios from "axios";
+import * as api from "@/api/auth";
+import { router } from "expo-router";
 
-const API_URL = "https://hopp.zikor.pl/api/v1";
+let interceptorInitialized = false;
 
 export const useAuthStore = create(
-    persist(
-        (set) => ({
-            user_id: null,
-            token: null,
-            isLoading: false,
-            error: null,
+  persist(
+    (set, get) => {
+      if (!interceptorInitialized.current) {
+        axios.interceptors.response.use(
+          (response) => response,
+          (error) => {
+            if (
+              (error.response && error.response.status === 401) ||
+              error.response.status === 403
+            ) {
+              console.warn(error.response.data);
+              set({ user_id: null, token: null, isLoading: false });
+              delete axios.defaults.headers.common["Authorization"];
+              router.replace("/login");
+            }
+            return Promise.reject(error);
+          }
+        );
+        interceptorInitialized = true;
+      }
+      return {
+        user_id: null,
+        token: null,
+        isLoading: false,
+        error: null,
 
-            signIn: async (email, password) => {
-                set({isLoading: true, error: null});
-                try {
-                    const response = await axios.post(`${API_URL}/auth/login`, {
-                        email,
-                        password
-                    });
+        signIn: async (email, password) => {
+          set({ isLoading: true, error: null });
+          try {
+            const response = await api.login({email, password});
+            set({ user_id: response.user_id, token: response.token, isLoading: false });
+          } catch (error) {
+            set({
+              error: error.response?.data?.message || error.message,
+              isLoading: false,
+            });
+            throw error;
+          }
+        },
 
-                    const user_id = response.data.user_id;
-                    const token = response.data.token;
-                    set({user_id: user_id, token: token, isLoading: false});
+        signUp: async (userData) => {
+          set({ isLoading: true, error: null });
+          try {
+            const response = await api.register(userData);
+            set({ user_id: response.user_id, token: response.token, isLoading: false });
+          } catch (error) {
+            set({
+              error: error.response?.data?.message || error.message,
+              isLoading: false,
+            });
+            throw error;
+          }
+        },
 
-                    axios.defaults.headers.common["Authorization"] = `Bearer ${token}`;
-                } catch (error) {
-                    set({error: error.response?.data?.message || error.message, isLoading: false});
-                    throw error;
-                }
-            },
+        signInWithGoogle: async (googleToken) => {
+          set({ isLoading: true, error: null });
+          try {
+            const response = await api.googleLogin(googleToken);
+            set({ user_id: response.user_id, token: response.token, isLoading: false });
+          } catch (error) {
+            set({
+              error: error.response?.data?.message || error.message,
+              isLoading: false,
+            });
+            throw error;
+          }
+        },
 
-            signUp: async (userData) => {
-                set({isLoading: true, error: null});
-                try {
-                    const response = await axios.post(`${API_URL}/auth/register`, userData, {
-                        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});
-
-                    axios.defaults.headers.common["Authorization"] = `Bearer ${token}`;
-                } catch (error) {
-                    set({error: error.response?.data?.message || error.message, isLoading: false});
-                    throw error;
-                }
-            },
-
-            signInWithGoogle: async (googleToken) => {
-                set({isLoading: true, error: null});
-                try {
-                    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});
-
-                    axios.defaults.headers.common["Authorization"] = `Bearer ${token}`;
-                } catch (error) {
-                    set({error: error.response?.data?.message || error.message, isLoading: false});
-                    throw error;
-                }
-            },
-
-            signOut: async () => {
-                try {
-                    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});
-                }
-            },
-
-            checkAuth: async () => {
-                const {token} = useAuthStore.getState();
-                if (!token) return null;
-
-                set({isLoading: true});
-                try {
-                    axios.defaults.headers.common["Authorization"] = `Bearer ${token}`;
-
-                    const response = await axios.get(`${API_URL}/auth/me`);
-
-                    set({user_id: response.data, isLoading: false});
-                    return response.data;
-                } catch (error) {
-                    delete axios.defaults.headers.common["Authorization"];
-                    set({user_id: null, token: null, isLoading: false});
-                    return null;
-                }
-            },
-        }),
-        {
-            name: "auth-storage",
-            storage: createJSONStorage(() => AsyncStorage),
-        }
-    )
-);
+        signOut: async () => {
+          const { token } = get();
+          try {
+            await api.logout(token);
+          } catch (error) {
+            console.error("Logout error:", error);
+          } finally {
+            set({ user_id: null, token: null });
+            router.replace("/login");
+          }
+        },
+      };
+    },
+    {
+      name: "auth-storage",
+      storage: createJSONStorage(() => AsyncStorage),
+    }
+  )
+);

ArtisanConnect/store/noticesStore.jsx

@@ -1,41 +1,82 @@
-import {create} from "zustand";
+import { create } from "zustand";
 import * as api from "@/api/notices";
 
 export const useNoticesStore = create((set, get) => ({
-    notices: [],
-    fetchNotices: async () => {
-        set({error: null});
-        try {
-            const data = await api.listNotices();
-            set({notices: data});
-        } catch (error) {
-            set(error);
-        }
-    },
-
-    addNotice: async (notice) => {
-        try {
-            const newNotice = await api.createNotice(notice);
-            set((state) => ({
-                notices: [...state.notices, newNotice],
-            }));
-            return newNotice;
-        } catch (error) {
-            set({ error });
-            return null;
-        }
-    },
-
-    getNoticeById: (noticeId) => {
-        return get().notices.find((notice) => String(notice.noticeId) === String(noticeId));
-    },
-
-    getAllImagesByNoticeId: async (noticeId) => {
-        try {
-            return await api.getAllImagesByNoticeId(noticeId);
-        } catch (error) {
-            console.error("Error while getting images:", error);
-            return ["https://http.cat/404.jpg"];
-        }
+  notices: [],
+  fetchNotices: async () => {
+    set({ error: null });
+    try {
+      const data = await api.listNotices();
+      set({ notices: data });
+    } catch (error) {
+      set(error);
     }
-}));
+  },
+
+  addNotice: async (notice) => {
+    try {
+      const newNotice = await api.createNotice(notice);
+      set((state) => ({
+        notices: [...state.notices, newNotice],
+      }));
+      return newNotice;
+    } catch (error) {
+      set({ error });
+      return null;
+    }
+  },
+
+  editNotice: async (noticeId, notice) => {
+    try {
+      if (notice.image.length > 0 && typeof notice.image[0] == "string") {
+        const currentImages = await api.getAllImagesByNoticeId(noticeId);
+        if (currentImages && currentImages.length > 0) {
+          for (const image of currentImages) {
+            const filename = image.uri
+              ? image.uri.split("/").pop()
+              : image.split("/").pop();
+
+            await api.deleteImage(filename);
+          }
+        }
+      }
+      const updatedNotice = await api.editNotice(noticeId, notice);
+      set((state) => ({
+        notices: state.notices.map((n) =>
+          n.noticeId == noticeId ? updatedNotice : n
+        ),
+      }));
+      return updatedNotice;
+    } catch (error) {
+      console.error("Error editing notice:", error);
+      set({ error });
+      throw error;
+    }
+  },
+
+  getNoticeById: (noticeId) => {
+    return get().notices.find(
+      (notice) => String(notice.noticeId) === String(noticeId)
+    );
+  },
+
+  getAllImagesByNoticeId: async (noticeId) => {
+    try {
+      return await api.getAllImagesByNoticeId(noticeId);
+    } catch (error) {
+      console.error("Error while getting images:", error);
+      return ["https://http.cat/404.jpg"];
+    }
+  },
+
+  deleteNotice: async (noticeId) => {
+    try {
+      await api.deleteNotice(noticeId);
+      set((state) => ({
+        notices: state.notices.filter((notice) => notice.noticeId !== noticeId),
+      }));
+    } catch (error) {
+      console.error("Error deleting notice:", error);
+    }
+  },
+}));

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) =>
-    set((state) => ({
-      wishlistNotices: [...state.wishlistNotices, wishlistNotice],
-    })),
-  removeNoticeFromWishlist: (noticeId) =>
-    set((state) => ({
-      wishlistNotices: state.wishlistNotices.filter(
-        (item) => item.noticeId !== noticeId
-      ),
-    })),
+  toggleNoticeInWishlist: async (noticeId) => {
+    try {
+      await api.toggleNoticeStatus(noticeId);
+      set((state) => {
+        const exists = state.wishlistNotices.some(
+          (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);
+  }
+},
 }));