From f05bce7664fe74cdc3634406f0bbf45cea8f7242 Mon Sep 17 00:00:00 2001
From: Taron <taron.aleksanyan.20@gmail.com>
Date: Fri, 6 Dec 2024 14:44:21 +0400
Subject: [PATCH 01/66] ui layout improvments

---
 apps/vite/src/routes/__root.tsx               |  4 +-
 packages/app/components/card/CustomCard.tsx   |  6 +-
 packages/app/components/carousel/index.tsx    |  2 +-
 packages/app/components/layout/Layout.tsx     |  5 +-
 .../components/HeroSection/HeroSection.tsx    |  2 -
 .../dashboard/components/Section/Section.tsx  |  1 +
 .../DashboardScreen/DashboardScreen.tsx       | 87 +++++++++----------
 .../app/modules/feed/components/FeedList.tsx  |  4 +-
 .../app/modules/feed/screens/FeedScreen.tsx   | 70 +--------------
 .../modules/pack/components/AddPackForm.tsx   |  4 -
 packages/app/screens/about/about.style.tsx    |  4 -
 packages/ui/src/MainContentWeb/index.tsx      | 20 ++---
 12 files changed, 67 insertions(+), 142 deletions(-)

diff --git a/apps/vite/src/routes/__root.tsx b/apps/vite/src/routes/__root.tsx
index bdb2dbab9..4da6e130c 100644
--- a/apps/vite/src/routes/__root.tsx
+++ b/apps/vite/src/routes/__root.tsx
@@ -11,10 +11,8 @@ import Footer from 'app/components/footer/Footer';
 const ThemedMainContentWeb = () => {
   const { isDark } = useContext(ThemeContext);
 
-  const backgroundColor = isDark ? '#000000' : '#F5F5F5';
-
   return (
-    <MainContentWeb style={{ backgroundColor, paddingTop: 80 }}>
+    <MainContentWeb isDark={!!isDark}>
       <Navbar />
       <Outlet />
       <Footer />
diff --git a/packages/app/components/card/CustomCard.tsx b/packages/app/components/card/CustomCard.tsx
index 7997a2e7e..26e3edc83 100644
--- a/packages/app/components/card/CustomCard.tsx
+++ b/packages/app/components/card/CustomCard.tsx
@@ -56,8 +56,6 @@ export const CustomCard = ({
         },
         isWeb && {
           borderRadius: 10,
-          padding: isWeb ? '15 25' : 0,
-          width: '80%',
         },
       ]}
     >
@@ -121,7 +119,8 @@ const loadStyles = (theme) => {
   const { isDark, currentTheme } = theme;
   return {
     mainContainer: {
-      backgroundColor: currentTheme.colors.border,
+      borderColor: currentTheme.colors.border,
+      borderWidth: 1,
       flex: 1,
       gap: 45,
       justifyContent: 'space-between',
@@ -129,6 +128,7 @@ const loadStyles = (theme) => {
       alignItems: 'center',
       marginBottom: 20,
       border: '1',
+      boxShadow: '0px 4px 8px rgba(0,0,0,0.1)',
       alignSelf: 'center',
     },
   };
diff --git a/packages/app/components/carousel/index.tsx b/packages/app/components/carousel/index.tsx
index 099405f72..4c41c92d6 100644
--- a/packages/app/components/carousel/index.tsx
+++ b/packages/app/components/carousel/index.tsx
@@ -49,7 +49,7 @@ const Carousel: React.FC<CarouselProps> = ({
     <RStack
       style={{
         alignSelf: 'center',
-        width: Platform.OS === 'web' ? '90%' : screenWidth, // Full width on native
+        width: '100%',
         justifyContent: 'center',
         alignItems: 'center',
         flexDirection: 'row',
diff --git a/packages/app/components/layout/Layout.tsx b/packages/app/components/layout/Layout.tsx
index bbe93b348..82f3f3c80 100644
--- a/packages/app/components/layout/Layout.tsx
+++ b/packages/app/components/layout/Layout.tsx
@@ -1,5 +1,5 @@
-import { StyleProp, ViewStyle } from 'react-native';
-import { View } from 'react-native';
+import React from 'react';
+import { View, type StyleProp, type ViewStyle } from 'react-native';
 
 const Layout = ({
   children,
@@ -16,6 +16,7 @@ const Layout = ({
           flex: 1,
           justifyContent: 'center',
           marginTop: 20,
+          paddingHorizontal: 16,
           marginBottom: 20,
           alignItems: 'center',
           backgroundColor: 'transparent',
diff --git a/packages/app/modules/dashboard/components/HeroSection/HeroSection.tsx b/packages/app/modules/dashboard/components/HeroSection/HeroSection.tsx
index a1138644f..64a6db02e 100644
--- a/packages/app/modules/dashboard/components/HeroSection/HeroSection.tsx
+++ b/packages/app/modules/dashboard/components/HeroSection/HeroSection.tsx
@@ -108,7 +108,6 @@ const loadStyles = (theme: any) => {
   return {
     banner: {
       width: '100%',
-      padding: 20,
       backgroundColor: currentTheme.colors.background,
       alignItems: 'center',
       justifyContent: 'center',
@@ -133,7 +132,6 @@ const loadStyles = (theme: any) => {
     },
     searchBar: {
       width: '100%',
-      padding: 10,
       borderRadius: 5,
       backgroundColor: currentTheme.colors.inputBackground,
       color: currentTheme.colors.text,
diff --git a/packages/app/modules/dashboard/components/Section/Section.tsx b/packages/app/modules/dashboard/components/Section/Section.tsx
index b4010e113..c9f65d156 100644
--- a/packages/app/modules/dashboard/components/Section/Section.tsx
+++ b/packages/app/modules/dashboard/components/Section/Section.tsx
@@ -30,6 +30,7 @@ const loadStyles = (theme: any) => {
       alignItems: 'center',
       width: '100%',
       borderRadius: 8,
+      padding: 0,
       backgroundColor: currentTheme.colors.background,
     },
   };
diff --git a/packages/app/modules/dashboard/screens/DashboardScreen/DashboardScreen.tsx b/packages/app/modules/dashboard/screens/DashboardScreen/DashboardScreen.tsx
index 7142e1111..739c37ca2 100644
--- a/packages/app/modules/dashboard/screens/DashboardScreen/DashboardScreen.tsx
+++ b/packages/app/modules/dashboard/screens/DashboardScreen/DashboardScreen.tsx
@@ -17,48 +17,50 @@ export const DashboardScreen = () => {
 
   return (
     <Layout>
-      <RScrollView contentContainerStyle={styles.content} horizontal={false}>
-        <RStack
-          style={[
-            styles.container,
-            Platform.OS === 'web' ? { minHeight: '100vh' } : null,
-          ]}
-        >
-          <HeroSection style={styles.heroBanner} />
-          {Platform.OS === 'web' ? (
-            <Stack
-              style={{
-                flexDirection: 'row',
-                alignItems: 'center',
-                alignSelf: 'flex-end',
-                paddingRight: 16,
-                gap: 8,
-              }}
-            >
-              <FAB />
-              <Button
-                style={{ alignSelf: 'flex-end' }}
-                onPress={() => router.push('/pack-templates')}
+      <View style={{ width: '100%' }}>
+        <RScrollView contentContainerStyle={styles.content} horizontal={false}>
+          <RStack
+            style={[
+              styles.container,
+              Platform.OS === 'web' ? { minHeight: '100vh' } : null,
+            ]}
+          >
+            <HeroSection style={styles.heroBanner} />
+            {Platform.OS === 'web' ? (
+              <Stack
+                style={{
+                  flexDirection: 'row',
+                  alignItems: 'center',
+                  alignSelf: 'flex-end',
+                  paddingRight: 16,
+                  gap: 8,
+                }}
               >
-                Templates
-              </Button>
-            </Stack>
-          ) : null}
+                <FAB />
+                <Button
+                  style={{ alignSelf: 'flex-end' }}
+                  onPress={() => router.push('/pack-templates')}
+                >
+                  Templates
+                </Button>
+              </Stack>
+            ) : null}
 
-          <View style={styles.gridContainer}>
-            <View style={styles.gridItem}>
-              <Section>
-                <SectionHeader
-                  iconName="newspaper-outline"
-                  text="Feed"
-                  textStyle={styles.sectionHeaderText}
-                />
-                <FeedPreview feedType="public" />
-              </Section>
+            <View style={styles.gridContainer}>
+              <View style={styles.gridItem}>
+                <Section>
+                  <SectionHeader
+                    iconName="newspaper-outline"
+                    text="Feed"
+                    textStyle={styles.sectionHeaderText}
+                  />
+                  <FeedPreview feedType="public" />
+                </Section>
+              </View>
             </View>
-          </View>
-        </RStack>
-      </RScrollView>
+          </RStack>
+        </RScrollView>
+      </View>
     </Layout>
   );
 };
@@ -77,13 +79,6 @@ const loadStyles = (theme) => {
       flexGrow: 1,
       justifyContent: 'flex-start',
       alignItems: 'stretch',
-      paddingHorizontal: 20,
-      width:
-        Platform.OS === 'web'
-          ? screenWidth <= SCREEN_WIDTH
-            ? '100vw'
-            : '90vw'
-          : '100%',
     },
     heroBanner: {
       width: '100%',
diff --git a/packages/app/modules/feed/components/FeedList.tsx b/packages/app/modules/feed/components/FeedList.tsx
index 927185520..d88114e8c 100644
--- a/packages/app/modules/feed/components/FeedList.tsx
+++ b/packages/app/modules/feed/components/FeedList.tsx
@@ -57,8 +57,10 @@ export const FeedList = ({
           numColumns={numColumns}
           data={data}
           keyExtractor={keyExtractor || ((item, index) => index.toString())}
+          contentContainerStyle={{ gap: 10 }}
+          columnWrapperStyle={{ gap: 10 }}
           renderItem={({ item }) => (
-            <View style={{ flex: 1, padding: 10 }}>
+            <View style={{ flex: 1 }}>
               <CardComponent item={item} />
             </View>
           )}
diff --git a/packages/app/modules/feed/screens/FeedScreen.tsx b/packages/app/modules/feed/screens/FeedScreen.tsx
index a16c512d4..c613a016e 100644
--- a/packages/app/modules/feed/screens/FeedScreen.tsx
+++ b/packages/app/modules/feed/screens/FeedScreen.tsx
@@ -20,6 +20,7 @@ import { Pagination, RButton, RText } from '@packrat/ui';
 import { useAuthUser } from 'app/modules/auth';
 import { type FeedType } from '../model';
 import { ConnectionGate } from 'app/components/ConnectionGate';
+import Layout from 'app/components/layout/Layout';
 
 const URL_PATHS = {
   userPacks: '/pack/',
@@ -48,11 +49,9 @@ const Feed = memo(function Feed({ feedType = 'public', listStyle }: FeedProps) {
   });
   const [searchQuery, setSearchQuery] = useState('');
   const [refreshing, setRefreshing] = useState(false);
-  const [isFetchingNextPage, setIsFetchingNextPage] = useState(false);
 
   const user = useAuthUser();
   const ownerId = user?.id;
-  const styles = useCustomStyles(loadStyles);
   const {
     data,
     isLoading,
@@ -78,20 +77,6 @@ const Feed = memo(function Feed({ feedType = 'public', listStyle }: FeedProps) {
     setRefreshing(false);
   };
 
-  // const filteredData = useMemo(() => {
-  //   if (!data) return [];
-  //   const keys = ['name', 'items.name', 'items.category'];
-  //   const options = {
-  //     threshold: 0.4,
-  //     location: 0,
-  //     distance: 100,
-  //     maxPatternLength: 32,
-  //     minMatchCharLength: 1,
-  //   };
-  //   const results = fuseSearch(data, searchQuery, keys, options);
-  //   return searchQuery ? results.map((result) => result.item) : data;
-  // }, [searchQuery, data]);
-
   const handleTogglePack = () => {
     setSelectedTypes((prevState) => ({
       ...prevState,
@@ -116,11 +101,9 @@ const Feed = memo(function Feed({ feedType = 'public', listStyle }: FeedProps) {
   };
 
   return (
-    <View style={styles.mainContainer}>
+    <Layout>
       <SearchProvider>
-        <View
-          style={{ flex: 1, paddingBottom: Platform.OS === 'web' ? 10 : 0 }}
-        >
+        <View style={{ width: '100%' }}>
           <ConnectionGate mode="connected">
             <FeedSearchFilter
               feedType={feedType}
@@ -133,41 +116,6 @@ const Feed = memo(function Feed({ feedType = 'public', listStyle }: FeedProps) {
               handleCreateClick={handleCreateClick}
             />
           </ConnectionGate>
-          {/* <FlatList
-            data={data}
-            horizontal={false}
-            ItemSeparatorComponent={() => (
-              <View style={{ height: 12, width: '100%' }} />
-            )}
-            keyExtractor={(item, index) => `${item?.id}_${item?.type}_${index}`} // Ensure unique keys
-            renderItem={({ item }) => (
-              <FeedCard
-                key={item?.id}
-                item={item}
-                cardType="primary"
-                feedType={item.type}
-              />
-            )}
-            ListFooterComponent={() =>
-              isFetchingNextPage || isLoading ? (
-                <ActivityIndicator size="small" color="#0000ff" />
-              ) : (
-                <View style={{ height: 50 }} />
-              )
-            }
-            ListEmptyComponent={() => (
-              <RText style={{ textAlign: 'center', marginTop: 20 }}>
-                {ERROR_MESSAGES[feedType]}
-              </RText>
-            )}
-            refreshControl={
-              <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
-            }
-            // onEndReached={fetchNextPage} // Trigger next page fetch
-            onEndReachedThreshold={0.5} // Trigger when 50% from the bottom
-            showsVerticalScrollIndicator={false}
-            maxToRenderPerBatch={2}
-          /> */}
           <FeedList
             data={data}
             style={listStyle}
@@ -194,18 +142,8 @@ const Feed = memo(function Feed({ feedType = 'public', listStyle }: FeedProps) {
           ) : null}
         </View>
       </SearchProvider>
-    </View>
+    </Layout>
   );
 });
 
-const loadStyles = (theme) => ({
-  mainContainer: {
-    flex: 1,
-    backgroundColor: theme.currentTheme.colors.background,
-    fontSize: 18,
-    padding: 15,
-    ...(Platform.OS !== 'web' && { paddingBottom: 15, paddingTop: 0 }),
-  },
-});
-
 export default Feed;
diff --git a/packages/app/modules/pack/components/AddPackForm.tsx b/packages/app/modules/pack/components/AddPackForm.tsx
index f1e7cbe17..5d8eedb65 100644
--- a/packages/app/modules/pack/components/AddPackForm.tsx
+++ b/packages/app/modules/pack/components/AddPackForm.tsx
@@ -122,9 +122,7 @@ const loadStyles = (theme, appTheme) => {
       textAlign: 'center',
       justifyContent: 'center',
       width: '100%',
-      paddingHorizontal: 18,
       gap: 20,
-      paddingTop: 20,
       backgroundColor: currentTheme.colors.background,
     },
     desktopStyle: {
@@ -132,7 +130,6 @@ const loadStyles = (theme, appTheme) => {
       flexDirection: 'row',
       alignItems: 'center',
       justifyContent: 'center',
-      paddingVertical: 25,
       gap: 5,
     },
 
@@ -141,7 +138,6 @@ const loadStyles = (theme, appTheme) => {
       flexDirection: 'column',
       justifyContent: 'space-between',
       alignItems: 'center',
-      paddingHorizontal: 25,
       gap: 25,
     },
 
diff --git a/packages/app/screens/about/about.style.tsx b/packages/app/screens/about/about.style.tsx
index 3fee64f4a..ca59f4895 100644
--- a/packages/app/screens/about/about.style.tsx
+++ b/packages/app/screens/about/about.style.tsx
@@ -4,13 +4,11 @@ const loadStyles = (theme: any) => {
     container: {
       flex: 1,
       backgroundColor: currentTheme.colors.background,
-      padding: 20,
       alignItems: 'center',
     },
     containerDark: {
       flex: 1,
       backgroundColor: currentTheme.colors.background,
-      padding: 20,
       alignItems: 'center',
     },
     headerContainer: {
@@ -86,7 +84,6 @@ const loadStyles = (theme: any) => {
       letterSpacing: 1,
       // fontFamily: "sans-serif",
       color: currentTheme.colors.tertiaryBlue,
-      textAlign: 'center',
       marginBottom: 20,
     },
     tertiaryBlue: {
@@ -95,7 +92,6 @@ const loadStyles = (theme: any) => {
       letterSpacing: 1,
       // fontFamily: "sans-serif",
       color: currentTheme.colors.white,
-      textAlign: 'center',
       marginBottom: 20,
     },
     logoContainer: {
diff --git a/packages/ui/src/MainContentWeb/index.tsx b/packages/ui/src/MainContentWeb/index.tsx
index c2d3ddde6..39874bfae 100644
--- a/packages/ui/src/MainContentWeb/index.tsx
+++ b/packages/ui/src/MainContentWeb/index.tsx
@@ -1,14 +1,14 @@
-import { View, ViewProps } from 'tamagui';
+import React, { useContext } from 'react';
+import ThemeContext from 'app/context/theme';
+
+import { View, type ViewProps } from 'tamagui';
 
 interface ExtendedViewProps extends ViewProps {
-  paddingTop?: number;
+  isDark?: boolean;
 }
 
-export const MainContentWeb: React.FC<ExtendedViewProps> = (props) => (
-  <View
-    style={{
-      paddingTop: 83,
-    }}
-    {...props}
-  />
-);
+export const MainContentWeb: React.FC<ExtendedViewProps> = (props) => {
+  const backgroundColor = props.isDark ? '#000000' : '#F5F5F5';
+
+  return <View style={{ backgroundColor, paddingTop: 80 }} {...props} />;
+};

From ff2ee49cc82f80b70ee97de2a363902e5d9046f2 Mon Sep 17 00:00:00 2001
From: Taron <taron.aleksanyan.20@gmail.com>
Date: Fri, 6 Dec 2024 14:57:54 +0400
Subject: [PATCH 02/66] fix mobile layout

---
 packages/app/components/layout/Layout.tsx         | 10 ++++++----
 packages/app/modules/feed/components/FeedList.tsx |  2 +-
 packages/app/modules/feed/screens/FeedScreen.tsx  |  2 +-
 3 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/packages/app/components/layout/Layout.tsx b/packages/app/components/layout/Layout.tsx
index 82f3f3c80..7f125a0f1 100644
--- a/packages/app/components/layout/Layout.tsx
+++ b/packages/app/components/layout/Layout.tsx
@@ -1,5 +1,6 @@
+import useTheme from 'app/hooks/useTheme';
 import React from 'react';
-import { View, type StyleProp, type ViewStyle } from 'react-native';
+import { Platform, View, type StyleProp, type ViewStyle } from 'react-native';
 
 const Layout = ({
   children,
@@ -8,18 +9,19 @@ const Layout = ({
   children: React.ReactNode;
   customStyle?: StyleProp<ViewStyle>;
 }) => {
+  const { currentTheme } = useTheme();
   return (
     <View
       style={[
         {
           display: 'flex',
+          backgroundColor: currentTheme.colors.background,
           flex: 1,
-          justifyContent: 'center',
-          marginTop: 20,
+          justifyContent: Platform.OS === 'web' ? 'center' : 'flex-start',
+          paddingTop: 20,
           paddingHorizontal: 16,
           marginBottom: 20,
           alignItems: 'center',
-          backgroundColor: 'transparent',
           width: '100%',
         },
         customStyle,
diff --git a/packages/app/modules/feed/components/FeedList.tsx b/packages/app/modules/feed/components/FeedList.tsx
index d88114e8c..e907cf1dd 100644
--- a/packages/app/modules/feed/components/FeedList.tsx
+++ b/packages/app/modules/feed/components/FeedList.tsx
@@ -58,7 +58,7 @@ export const FeedList = ({
           data={data}
           keyExtractor={keyExtractor || ((item, index) => index.toString())}
           contentContainerStyle={{ gap: 10 }}
-          columnWrapperStyle={{ gap: 10 }}
+          columnWrapperStyle={numColumns > 1 ? { gap: 10 } : undefined}
           renderItem={({ item }) => (
             <View style={{ flex: 1 }}>
               <CardComponent item={item} />
diff --git a/packages/app/modules/feed/screens/FeedScreen.tsx b/packages/app/modules/feed/screens/FeedScreen.tsx
index c613a016e..41320b4f6 100644
--- a/packages/app/modules/feed/screens/FeedScreen.tsx
+++ b/packages/app/modules/feed/screens/FeedScreen.tsx
@@ -103,7 +103,7 @@ const Feed = memo(function Feed({ feedType = 'public', listStyle }: FeedProps) {
   return (
     <Layout>
       <SearchProvider>
-        <View style={{ width: '100%' }}>
+        <View style={{ width: '100%', backgroundColor: 'transparent' }}>
           <ConnectionGate mode="connected">
             <FeedSearchFilter
               feedType={feedType}

From f06034bf731661612911eaf771370d42a74c2cc7 Mon Sep 17 00:00:00 2001
From: Taron <taron.aleksanyan.20@gmail.com>
Date: Sat, 7 Dec 2024 00:27:03 +0400
Subject: [PATCH 03/66] add error component

---
 .../app/components/ErrorCard/ErrorCard.tsx    | 62 +++++++++++++++++++
 packages/app/components/ErrorCard/index.ts    |  1 +
 2 files changed, 63 insertions(+)
 create mode 100644 packages/app/components/ErrorCard/ErrorCard.tsx
 create mode 100644 packages/app/components/ErrorCard/index.ts

diff --git a/packages/app/components/ErrorCard/ErrorCard.tsx b/packages/app/components/ErrorCard/ErrorCard.tsx
new file mode 100644
index 000000000..85f1503b4
--- /dev/null
+++ b/packages/app/components/ErrorCard/ErrorCard.tsx
@@ -0,0 +1,62 @@
+import React, { type FC } from 'react';
+import { RButton, RText, XStack, YStack } from '@packrat/ui';
+import { XCircle } from '@tamagui/lucide-icons';
+import useTheme from 'app/hooks/useTheme';
+import { View } from 'react-native';
+
+interface ErrorCardProps {
+  title: string;
+  message: string;
+
+  onRetry: () => void;
+}
+
+export const ErrorCard: FC<ErrorCardProps> = ({ message, title, onRetry }) => {
+  const { currentTheme } = useTheme();
+
+  return (
+    <YStack
+      style={{
+        borderColor: currentTheme.colors.error,
+        backgroundColor: `${currentTheme.colors.error}70`,
+        borderWidth: 1,
+        borderRadius: 8,
+        gap: 16,
+        padding: 16,
+      }}
+    >
+      <XStack gap={8} style={{ alignItems: 'flex-start', width: 320 }}>
+        <XCircle
+          size={20}
+          style={{ color: currentTheme.colors.error, marginTop: 4 }}
+        />
+        <View style={{ flex: 1 }}>
+          <RText style={{ color: currentTheme.colors.error, fontWeight: 600 }}>
+            {title}
+          </RText>
+          <RText
+            style={{
+              color: currentTheme.colors.error,
+              paddingTop: 8,
+            }}
+          >
+            {message}
+          </RText>
+        </View>
+      </XStack>
+      <RButton
+        style={{
+          padding: 0,
+          width: 72,
+          marginTop: 8,
+          backgroundColor: 'white',
+          color: currentTheme.colors.error,
+          fontWeight: 600,
+        }}
+        onPress={onRetry}
+      >
+        Retry
+      </RButton>
+    </YStack>
+  );
+};
diff --git a/packages/app/components/ErrorCard/index.ts b/packages/app/components/ErrorCard/index.ts
new file mode 100644
index 000000000..70a92b5a5
--- /dev/null
+++ b/packages/app/components/ErrorCard/index.ts
@@ -0,0 +1 @@
+export { ErrorCard } from './ErrorCard';

From 349a8c63fc3654a018ea86ea65a0f99fdf668596 Mon Sep 17 00:00:00 2001
From: Taron <taron.aleksanyan.20@gmail.com>
Date: Sun, 8 Dec 2024 02:30:42 +0400
Subject: [PATCH 04/66] redesign add pack screen

---
 .../modules/pack/components/AddPackForm.tsx   | 83 ++++++++++---------
 packages/app/modules/pack/constants.ts        |  2 +
 .../modules/pack/screens/AddPackScreen.tsx    | 77 ++++++++++-------
 3 files changed, 94 insertions(+), 68 deletions(-)
 create mode 100644 packages/app/modules/pack/constants.ts

diff --git a/packages/app/modules/pack/components/AddPackForm.tsx b/packages/app/modules/pack/components/AddPackForm.tsx
index f1e7cbe17..5cb023af5 100644
--- a/packages/app/modules/pack/components/AddPackForm.tsx
+++ b/packages/app/modules/pack/components/AddPackForm.tsx
@@ -5,6 +5,7 @@ import {
   RStack,
   RSwitch,
   RText,
+  XStack,
   SubmitButton,
 } from '@packrat/ui';
 import { addPackSchema } from '@packrat/validations';
@@ -12,9 +13,10 @@ import { useAddNewPack } from '../hooks';
 import { useRouter } from 'app/hooks/router';
 import useCustomStyles from 'app/hooks/useCustomStyles';
 import useResponsive from 'app/hooks/useResponsive';
-import { View } from 'react-native';
+import { Platform, View } from 'react-native';
 import { Switch } from 'tamagui';
 import useTheme from '../../../hooks/useTheme';
+import { Users } from '@tamagui/lucide-icons';
 
 export const AddPackForm = ({
   isCreatingTrip = false,
@@ -74,32 +76,45 @@ export const AddPackForm = ({
           validationSchema={addPackSchema}
         >
           <FormInput
-            placeholder="Name"
+            containerProps={{ style: { width: '100%' } }}
+            helperTextProps={{ fontSize: 14, lineHeight: 20 }}
+            helperText='Choose a descriptive name, e.g., "Summer Beach Trip" or "Business Conference".'
+            placeholder="Add pack name"
             name="name"
-            label="Name"
-            style={{
-              textAlign: 'left',
-              width: 200,
-              alignItems: 'inherit',
-              justifyContent: 'center',
-            }}
+            label="Pack name"
           />
-          <RStack
-            style={{
-              flexDirection: 'row',
-              alignItems: 'center',
-              justifyContent: 'space-between',
-            }}
-          >
-            <RText>Public </RText>
-            <RSwitch
-              checked={isPublic}
-              onCheckedChange={handleOnValueChange}
-              size="$1.5"
+          <View style={{ width: '100%' }}>
+            <RStack
+              style={{
+                width: '100%',
+                flexDirection: 'row',
+                justifyContent: 'space-between',
+                backgroundColor: currentTheme.colors.textSecondary,
+                alignItems: 'center',
+                borderRadius: 8,
+                padding: 12,
+              }}
             >
-              <Switch.Thumb />
-            </RSwitch>
-          </RStack>
+              <XStack gap={10}>
+                <Users />
+                <RText style={{ fontSize: 16, fontWeight: 600 }}>
+                  Make This Pack Public{' '}
+                </RText>
+              </XStack>
+              <RSwitch
+                checked={isPublic}
+                onCheckedChange={handleOnValueChange}
+                size="$2"
+                style={{ backgroundColor: '#e4e4e7' }}
+              >
+                <Switch.Thumb unstyled style={{ backgroundColor: '#fff' }} />
+              </RSwitch>
+            </RStack>
+            <RText style={{ fontSize: 14, marginTop: 8, lineHeight: 20 }}>
+              Public packs can be viewed and copied by other users. Private
+              packs are visible only to you.
+            </RText>
+          </View>
           <SubmitButton style={styles.btn} onSubmit={handleAddPack}>
             <RText style={{ color: currentTheme.colors.white }}>
               {isLoading ? 'Loading...' : 'Add Pack'}
@@ -118,21 +133,13 @@ const loadStyles = (theme, appTheme) => {
   return {
     container: {
       flexDirection: 'column',
-      alignItems: 'center',
-      textAlign: 'center',
-      justifyContent: 'center',
-      width: '100%',
-      paddingHorizontal: 18,
+      width: Platform.OS === 'web' ? '100%' : 'undefined',
       gap: 20,
-      paddingTop: 20,
-      backgroundColor: currentTheme.colors.background,
+      maxWidth: 440,
     },
     desktopStyle: {
       flex: 1,
       flexDirection: 'row',
-      alignItems: 'center',
-      justifyContent: 'center',
-      paddingVertical: 25,
       gap: 5,
     },
 
@@ -141,8 +148,7 @@ const loadStyles = (theme, appTheme) => {
       flexDirection: 'column',
       justifyContent: 'space-between',
       alignItems: 'center',
-      paddingHorizontal: 25,
-      gap: 25,
+      gap: 24,
     },
 
     input: {
@@ -156,9 +162,8 @@ const loadStyles = (theme, appTheme) => {
       paddingVertical: 12,
     },
     btn: {
-      width: '200px',
-      marginTop: 40,
-      marginBottom: 20,
+      backgroundColor: '#000000',
+      width: '100%',
     },
   };
 };
diff --git a/packages/app/modules/pack/constants.ts b/packages/app/modules/pack/constants.ts
new file mode 100644
index 000000000..d53ab2a3f
--- /dev/null
+++ b/packages/app/modules/pack/constants.ts
@@ -0,0 +1,2 @@
+export const ADD_PACK_FORM_TITLE = 'Create New Pack';
+export const ADD_PACK_FORM_DESCRIPTION = `Create a customized packing list for your next adventure.  Whether it's a weekend getaway or a business trip, stay organized and never forget the essentials.`;
diff --git a/packages/app/modules/pack/screens/AddPackScreen.tsx b/packages/app/modules/pack/screens/AddPackScreen.tsx
index d2d30ac30..eb9b54df9 100644
--- a/packages/app/modules/pack/screens/AddPackScreen.tsx
+++ b/packages/app/modules/pack/screens/AddPackScreen.tsx
@@ -2,12 +2,13 @@ import React from 'react';
 import { AddPackForm } from '../components';
 import { RText } from '@packrat/ui';
 import { useRouter } from '@packrat/crosspath';
-import { Button, Card, XStack } from 'tamagui';
-import { Backpack } from '@tamagui/lucide-icons';
+import { Button, Card, XStack, YStack } from 'tamagui';
+import { Backpack, Search } from '@tamagui/lucide-icons';
 import Layout from 'app/components/layout/Layout';
 import useResponsive from 'app/hooks/useResponsive';
 import useTheme from 'app/hooks/useTheme';
-import { Platform } from 'react-native';
+import { Platform, View } from 'react-native';
+import { ADD_PACK_FORM_DESCRIPTION, ADD_PACK_FORM_TITLE } from '../constants';
 
 export const AddPackScreen = ({
   isCreatingTrip = false,
@@ -34,37 +35,55 @@ export const AddPackScreen = ({
       ]}
     >
       <Card
-        alignSelf="center"
+        bordered
         style={{
-          marginRight: 2,
-          marginLeft: 2,
+          width: '100%',
+          maxWidth: 440,
         }}
       >
-        <XStack
-          jc="space-between"
-          ai="center"
-          py="$2"
-          px="$0.5"
-          mx="$2"
-          gap={gtSm ? '$12' : '$3'}
-          fw="wrap"
-        >
-          <XStack ai="center" jc="flex-start" gap="$2">
-            <Backpack size={gtSm ? 'auto' : '$1.5'} />
-            <RText size={gtSm ? 'auto' : '$4'}>
-              Need help getting started?
+        <View style={{ padding: 24 }}>
+          <YStack gap={8} style={{ paddingBottom: 24 }}>
+            <RText style={{ fontWeight: 600, fontSize: 24, lineHeight: 32 }}>
+              {ADD_PACK_FORM_TITLE}
             </RText>
-          </XStack>
-          <Button
-            onPress={() => router.push('/pack-templates')}
-            size={gtSm ? '$3.5' : '$3'}
-            ml="auto"
-          >
-            Browse Templates
-          </Button>
-        </XStack>
+            <RText style={{ textAlign: 'left', lineHeight: 20 }}>
+              {ADD_PACK_FORM_DESCRIPTION}
+            </RText>
+            <XStack
+              gap={4}
+              jc="space-between"
+              style={{
+                width: '100%',
+                backgroundColor: theme.currentTheme.colors.textSecondary,
+                alignItems: 'center',
+                borderRadius: 8,
+                padding: 12,
+              }}
+            >
+              <RText style={{ fontSize: 14 }}>Looking For Ideas?</RText>
+              <Button
+                onPress={() => router.push('/pack-templates')}
+                icon={<Search size={14} />}
+                style={{
+                  backgroundColor: 'transparent',
+                  height: 'auto',
+                  padding: 0,
+                  fontSize: 14,
+                  fontWeight: 600,
+                }}
+                hoverStyle={{
+                  borderBlockColor: 'transparent',
+                }}
+                space={4}
+                ml="auto"
+              >
+                Explore Pack Templates
+              </Button>
+            </XStack>
+          </YStack>
+          <AddPackForm isCreatingTrip={isCreatingTrip} onSuccess={onSuccess} />
+        </View>
       </Card>
-      <AddPackForm isCreatingTrip={isCreatingTrip} onSuccess={onSuccess} />
     </Layout>
   );
 };

From 6cab98f26f09f569ecb17fd788188d2620d51ade Mon Sep 17 00:00:00 2001
From: Anmol Verma <anmolverma2810@gmail.com>
Date: Mon, 9 Dec 2024 23:11:11 +0530
Subject: [PATCH 05/66] packdetails layout changes

---
 .../pack/components/PackTable/ItemList.tsx    | 393 +++++++++++++-----
 .../components/PackTable/TableContainer.tsx   |  56 +--
 .../pack/screens/PackDetailsScreen.tsx        | 193 +++++----
 3 files changed, 417 insertions(+), 225 deletions(-)

diff --git a/packages/app/modules/pack/components/PackTable/ItemList.tsx b/packages/app/modules/pack/components/PackTable/ItemList.tsx
index 69e5f7781..a09a3bbe9 100644
--- a/packages/app/modules/pack/components/PackTable/ItemList.tsx
+++ b/packages/app/modules/pack/components/PackTable/ItemList.tsx
@@ -1,5 +1,5 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { RIconButton, RInput, RStack, RText } from '@packrat/ui';
+import React, { useEffect, useState } from 'react';
+import { RStack, RText, RIconButton, RInput } from '@packrat/ui';
 import { ListItem } from 'tamagui';
 import { AntDesign, MaterialIcons } from '@expo/vector-icons';
 import { convertWeight } from 'app/utils/convertWeight';
@@ -27,136 +27,341 @@ export const ItemList = ({
       onSubmitQuantity(item.id, value),
     );
 
-  return (
-    <ListItem hoverTheme pressTheme>
-      <RStack
+  const renderHeader = () => (
+    <RStack
+      style={{
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        paddingVertical: 10,
+        borderBottomWidth: 1,
+        borderBottomColor: currentTheme.colors.border,
+      }}
+    >
+      <RText
+        style={{
+          flexBasis: '25%',
+          fontWeight: 'bold',
+          color: currentTheme.colors.text,
+        }}
+      >
+        Name
+      </RText>
+      <RText
+        style={{
+          flexBasis: '20%',
+          textAlign: 'center',
+          fontWeight: 'bold',
+          color: currentTheme.colors.text,
+        }}
+      >
+        Category
+      </RText>
+      <RText
+        style={{
+          flexBasis: '20%',
+          textAlign: 'center',
+          fontWeight: 'bold',
+          color: currentTheme.colors.text,
+        }}
+      >
+        Weight
+      </RText>
+      <RText
         style={{
-          width: '100%',
-          flexDirection: 'row',
-          justifyContent: 'space-between',
-          alignItems: 'center',
+          flexBasis: '25%',
+          textAlign: 'center',
+          fontWeight: 'bold',
+          color: currentTheme.colors.text,
         }}
       >
+        Quantity
+      </RText>
+      {isActionsEnabled && (
         <RText
-          numberOfLines={1}
-          ellipsizeMode="tail"
           style={{
-            marginTop: 10,
-            color: currentTheme.colors.text,
-            fontSize: responsive.xxs ? 12 : responsive.sm ? 14 : 16,
+            flexBasis: '10%',
+            textAlign: 'center',
             fontWeight: 'bold',
-            flexBasis: '25%',
+            color: currentTheme.colors.text,
           }}
         >
-          {item.name}
+          Actions
         </RText>
+      )}
+    </RStack>
+  );
 
-        {isActionsEnabled ? (
+  if (responsive.sm) {
+    return (
+      <>
+        <RStack
+          style={{
+            backgroundColor: currentTheme.colors.background,
+            padding: 16,
+            borderRadius: 8,
+            marginBottom: 10,
+            shadowOpacity: 0.2,
+            shadowRadius: 4,
+            shadowOffset: { width: 0, height: 2 },
+            elevation: 3,
+          }}
+        >
           <RStack
             style={{
               flexDirection: 'row',
+              justifyContent: 'space-between',
               alignItems: 'center',
-              justifyContent: 'center',
-              flexBasis: '25%',
             }}
           >
-            <RIconButton
-              onPress={decrease}
+            <RText
               style={{
-                width: responsive.xxs ? 18 : responsive.sm ? 20 : 25,
-                height: responsive.xxs ? 18 : responsive.sm ? 20 : 25,
-                padding: 0,
+                fontWeight: 'bold',
+                fontSize: responsive.xxs ? 14 : 16,
+                color: currentTheme.colors.text,
               }}
             >
-              <AntDesign
-                name="minus"
-                size={responsive.xxs ? 10 : responsive.sm ? 12 : 14}
-                color={currentTheme.colors.text}
-              />
-            </RIconButton>
-
-            <RInput
-              value={String(value)}
-              onChangeText={(text) => setValue(Number(text))}
-              onBlur={(e) => submit(Number(e.target.value))}
+              {item.name}
+            </RText>
+            <RText
               style={{
-                width: 40,
-                padding: 0,
-                textAlign: 'center',
-                height: responsive.xxs ? 25 : 30,
-                color: currentTheme.colors.text,
-                fontSize: 12,
-                borderWidth: 1,
-                borderColor: hasError ? 'red' : '',
+                fontSize: responsive.xxs ? 12 : 14,
+                color: currentTheme.colors.textSecondary,
               }}
-            />
-
-            <RIconButton
-              onPress={increase}
+            >
+              {item.category.name}
+            </RText>
+          </RStack>
+          <RStack style={{ marginTop: 10 }}>
+            <RText
               style={{
-                width: responsive.xxs ? 18 : responsive.sm ? 20 : 25,
-                height: responsive.xxs ? 18 : responsive.sm ? 20 : 25,
-                padding: 0,
+                fontSize: responsive.xxs ? 12 : 14,
+                color: currentTheme.colors.textSecondary,
               }}
             >
-              <AntDesign
-                name="plus"
-                size={responsive.xxs ? 10 : responsive.sm ? 12 : 14}
-                color={currentTheme.colors.text}
-              />
-            </RIconButton>
+              {`Weight: ${convertWeight(
+                item.weight,
+                SMALLEST_ITEM_UNIT,
+                item.unit,
+              )} ${item.unit}`}
+            </RText>
+            {isActionsEnabled ? (
+              <RStack
+                style={{
+                  flexDirection: 'row',
+                  alignItems: 'center',
+                  justifyContent: 'space-between',
+                  marginTop: 10,
+                }}
+              >
+                <RStack
+                  style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                  }}
+                >
+                  <RIconButton
+                    onPress={decrease}
+                    style={{
+                      width: 25,
+                      height: 25,
+                      padding: 0,
+                    }}
+                  >
+                    <AntDesign
+                      name="minus"
+                      size={14}
+                      color={currentTheme.colors.text}
+                    />
+                  </RIconButton>
+                  <RInput
+                    value={String(value)}
+                    onChangeText={(text) => setValue(Number(text))}
+                    onBlur={(e) => submit(Number(e.target.value))}
+                    style={{
+                      width: 50,
+                      padding: 0,
+                      textAlign: 'center',
+                      height: 30,
+                      color: currentTheme.colors.text,
+                      fontSize: 12,
+                      borderWidth: 1,
+                      borderColor: hasError
+                        ? 'red'
+                        : currentTheme.colors.border,
+                      marginHorizontal: 8,
+                    }}
+                  />
+                  <RIconButton
+                    onPress={increase}
+                    style={{
+                      width: 25,
+                      height: 25,
+                      padding: 0,
+                    }}
+                  >
+                    <AntDesign
+                      name="plus"
+                      size={14}
+                      color={currentTheme.colors.text}
+                    />
+                  </RIconButton>
+                </RStack>
+                <RStack
+                  style={{
+                    marginTop: 10,
+                    flexDirection: 'row',
+                    justifyContent: 'flex-end',
+                  }}
+                >
+                  <RIconButton
+                    onPress={() => handleDeleteItem(item.id)}
+                    style={{
+                      backgroundColor: 'transparent',
+                    }}
+                  >
+                    <MaterialIcons
+                      name="delete"
+                      size={24}
+                      color={currentTheme.colors.text}
+                    />
+                  </RIconButton>
+                </RStack>
+              </RStack>
+            ) : (
+              <RText
+                style={{
+                  fontSize: 12,
+                  color: currentTheme.colors.text,
+                  marginTop: 10,
+                }}
+              >
+                Quantity: {value}
+              </RText>
+            )}
           </RStack>
-        ) : (
-          <RText
-            style={{ paddingRight: 16, fontSize: 12, alignSelf: 'center' }}
-          >
-            {value}
-          </RText>
-        )}
+        </RStack>
+      </>
+    );
+  }
 
+  return (
+    <>
+      {renderHeader()}
+      <ListItem hoverTheme pressTheme>
         <RStack
           style={{
-            flexBasis: '20%',
+            width: '100%',
+            flexDirection: 'row',
+            justifyContent: 'space-between',
             alignItems: 'center',
           }}
         >
           <RText
             style={{
+              marginTop: 10,
               color: currentTheme.colors.text,
-              marginLeft: responsive.xxs ? 10 : 20,
-              width: responsive.xxs ? 80 : 110,
-              fontSize: responsive.xxs ? 10 : responsive.sm ? 12 : 14,
+              fontSize: 16,
+              fontWeight: 'bold',
+              flexBasis: '25%',
             }}
           >
-            {`Weight: ${convertWeight(item.weight, SMALLEST_ITEM_UNIT, item.unit)} ${item.unit}`}
+            {item.name}
           </RText>
-        </RStack>
-
-        <RText
-          style={{
-            color: currentTheme.colors.text,
-            fontSize: responsive.xxs ? 11 : responsive.sm ? 12 : 14,
-            flexBasis: '20%',
-            textAlign: 'center',
-          }}
-        >
-          {item.category.name}
-        </RText>
-
-        {isActionsEnabled && (
-          <RIconButton
-            onPress={() => handleDeleteItem(item.id)}
-            style={{ backgroundColor: 'transparent' }}
+          <RText
+            style={{
+              color: currentTheme.colors.text,
+              fontSize: 14,
+              flexBasis: '20%',
+              textAlign: 'center',
+            }}
+          >
+            {item.category.name}
+          </RText>
+          <RText
+            style={{
+              color: currentTheme.colors.text,
+              flexBasis: '20%',
+              textAlign: 'center',
+            }}
           >
-            <MaterialIcons
-              name="delete"
-              size={responsive.xxs ? 18 : responsive.sm ? 20 : 24}
-              color={currentTheme.colors.text}
-            />
-          </RIconButton>
-        )}
-      </RStack>
-    </ListItem>
+            {`${convertWeight(item.weight, SMALLEST_ITEM_UNIT, item.unit)} ${item.unit}`}
+          </RText>
+          <RStack
+            style={{
+              flexDirection: 'row',
+              alignItems: 'center',
+              justifyContent: 'center',
+              flexBasis: '25%',
+            }}
+          >
+            {isActionsEnabled ? (
+              <>
+                <RIconButton
+                  onPress={decrease}
+                  style={{
+                    width: 25,
+                    height: 25,
+                    padding: 0,
+                  }}
+                >
+                  <AntDesign
+                    name="minus"
+                    size={14}
+                    color={currentTheme.colors.text}
+                  />
+                </RIconButton>
+                <RInput
+                  value={String(value)}
+                  onChangeText={(text) => setValue(Number(text))}
+                  onBlur={(e) => submit(Number(e.target.value))}
+                  style={{
+                    width: 40,
+                    padding: 0,
+                    textAlign: 'center',
+                    height: 30,
+                    color: currentTheme.colors.text,
+                    fontSize: 12,
+                    borderWidth: 1,
+                    borderColor: hasError ? 'red' : currentTheme.colors.border,
+                  }}
+                />
+                <RIconButton
+                  onPress={increase}
+                  style={{
+                    width: 25,
+                    height: 25,
+                    padding: 0,
+                  }}
+                >
+                  <AntDesign
+                    name="plus"
+                    size={14}
+                    color={currentTheme.colors.text}
+                  />
+                </RIconButton>
+              </>
+            ) : (
+              <RText style={{ fontSize: 12, color: currentTheme.colors.text }}>
+                {value}
+              </RText>
+            )}
+          </RStack>
+          {isActionsEnabled && (
+            <RIconButton
+              onPress={() => handleDeleteItem(item.id)}
+              style={{ backgroundColor: 'transparent', flexBasis: '10%' }}
+            >
+              <MaterialIcons
+                name="delete"
+                size={24}
+                color={currentTheme.colors.text}
+              />
+            </RIconButton>
+          )}
+        </RStack>
+      </ListItem>
+    </>
   );
 };
 
diff --git a/packages/app/modules/pack/components/PackTable/TableContainer.tsx b/packages/app/modules/pack/components/PackTable/TableContainer.tsx
index 64a1d6d1f..42ab6e39d 100644
--- a/packages/app/modules/pack/components/PackTable/TableContainer.tsx
+++ b/packages/app/modules/pack/components/PackTable/TableContainer.tsx
@@ -73,7 +73,7 @@ export const TableContainer = ({
     <View style={styles.container}>
       {data?.length ? (
         <View style={styles.layoutContainer}>
-          <YGroup alignSelf="stretch" size="$8" style={styles.itemsList}>
+          <YGroup alignSelf="stretch" size="$8">
             {data.map((item) => (
               <YGroup.Item key={item.id}>
                 <ItemList
@@ -88,28 +88,26 @@ export const TableContainer = ({
 
           {copy && <RButton onPress={handleDuplicate}>Copy</RButton>}
 
-          <View style={styles.summarySection}>
-            <TotalWeightBox
-              label="Base Weight"
-              weight={totalBaseWeight}
-              unit={weightUnit}
-            />
-            <TotalWeightBox
-              label="Water + Food Weight"
-              weight={totalWaterWeight + totalFoodWeight}
-              unit={weightUnit}
-            />
-            <RSeparator style={styles.separator} />
-            <TotalWeightBox
-              label="Total Weight"
-              weight={totalWeight}
-              unit={weightUnit}
-            />
-            <WeightUnitDropdown
-              value={weightUnit}
-              onChange={(itemValue: string) => setWeightUnit(itemValue as any)}
-            />
-          </View>
+          <TotalWeightBox
+            label="Base Weight"
+            weight={totalBaseWeight}
+            unit={weightUnit}
+          />
+          <TotalWeightBox
+            label="Water + Food Weight"
+            weight={totalWaterWeight + totalFoodWeight}
+            unit={weightUnit}
+          />
+          <RSeparator style={styles.separator} />
+          <TotalWeightBox
+            label="Total Weight"
+            weight={totalWeight}
+            unit={weightUnit}
+          />
+          <WeightUnitDropdown
+            value={weightUnit}
+            onChange={(itemValue: string) => setWeightUnit(itemValue as any)}
+          />
         </View>
       ) : (
         <RText style={styles.noItemsText}>Add your First Item</RText>
@@ -129,17 +127,8 @@ const loadStyles = (theme: any) => {
       width: '100%',
     },
     layoutContainer: {
-      flexDirection: sm ? 'column' : 'row',
+      flexDirection: 'column',
       justifyContent: 'space-between',
-    },
-    itemsList: {
-      flex: 2,
-      marginRight: 20,
-      backgroundColor: currentTheme.colors.card,
-      width: '100%',
-      height: '100%',
-    },
-    summarySection: {
       marginTop: sm ? 20 : 0,
       flex: 1,
       padding: sm ? 10 : 5,
@@ -147,6 +136,7 @@ const loadStyles = (theme: any) => {
       elevation: 8,
       backgroundColor: currentTheme.colors.card,
     },
+
     separator: {
       marginVertical: 10,
     },
diff --git a/packages/app/modules/pack/screens/PackDetailsScreen.tsx b/packages/app/modules/pack/screens/PackDetailsScreen.tsx
index d70381958..6b7d2539e 100644
--- a/packages/app/modules/pack/screens/PackDetailsScreen.tsx
+++ b/packages/app/modules/pack/screens/PackDetailsScreen.tsx
@@ -28,9 +28,8 @@ import { ConnectionGate } from 'app/components/ConnectionGate';
 const SECTION = {
   TABLE: 'TABLE',
   CTA: 'CTA',
-  SCORECARD: 'SCORECARD',
+  SCORE_SIMILAR: 'SCORE_SIMILAR',
   CHAT: 'CHAT',
-  SIMILAR_PACKS: 'SIMILAR_PACKS',
 };
 
 export function PackDetailsScreen() {
@@ -53,6 +52,7 @@ export function PackDetailsScreen() {
   } = useFetchSinglePack(packId);
   const isAuthUserPack = useIsAuthUserPack(currentPack);
   const router = useRouter();
+  const { sm } = useResponsive();
 
   // const styles = useCustomStyles(loadStyles);
   const currentPackId = currentPack && currentPack.id;
@@ -85,6 +85,58 @@ export function PackDetailsScreen() {
             error={error as any}
             additionalComps={
               <>
+                <ConnectionGate mode="connected">
+                  {isAuthUserPack ? (
+                    <View
+                      style={{
+                        display: 'flex',
+                        flexDirection: 'row',
+                        width: '100%',
+                        justifyContent: 'center',
+                        gap: 5,
+                        marginBottom: 16, // Spacing below the buttons
+                      }}
+                    >
+                      <AddItemModal
+                        currentPackId={currentPackId || ''}
+                        currentPack={currentPack}
+                        isAddItemModalOpen={isAddItemModalOpen}
+                        setIsAddItemModalOpen={setIsAddItemModalOpen}
+                        setRefetch={() => setRefetch((prev) => !prev)}
+                      />
+                      <ImportItemModal
+                        currentPackId={currentPackId || ''}
+                        currentPack={currentPack}
+                        isImportItemModalOpen={isImportItemModalOpen}
+                        setIsImportItemModalOpen={setIsImportItemModalOpen}
+                      />
+                    </View>
+                  ) : (
+                    <RText
+                      style={{
+                        textAlign: 'center',
+                        fontWeight: 600,
+                        marginBottom: 16, // Spacing below the text
+                      }}
+                    >
+                      <RText style={{ marginRight: 2 }}>
+                        You don't have permission to edit this pack. You can
+                        create your own pack{' '}
+                      </RText>
+                      <TextLink href="/pack/create">
+                        <RText
+                          style={{
+                            color: 'blue',
+                            fontWeight: 700,
+                          }}
+                        >
+                          here
+                        </RText>
+                      </TextLink>
+                    </RText>
+                  )}
+                </ConnectionGate>
+
                 <FlatList
                   data={Object.entries(SECTION)}
                   contentContainerStyle={{ paddingBottom: 80 }}
@@ -99,99 +151,53 @@ export function PackDetailsScreen() {
                             hasPermissions={isAuthUserPack}
                           />
                         );
-                      case SECTION.CTA:
+                      case SECTION.SCORE_SIMILAR:
                         return (
-                          <ConnectionGate mode="connected">
-                            {isAuthUserPack ? (
-                              <View
-                                style={{
-                                  display: 'flex',
-                                  flexDirection: 'row',
-                                  width: '100%',
-                                  justifyContent: 'center',
-                                  gap: 5,
-                                }}
-                              >
-                                <AddItemModal
-                                  currentPackId={currentPackId || ''}
-                                  currentPack={currentPack}
-                                  isAddItemModalOpen={isAddItemModalOpen}
-                                  setIsAddItemModalOpen={setIsAddItemModalOpen}
-                                  // refetch={refetch}
-                                  setRefetch={() => setRefetch((prev) => !prev)}
-                                />
-                                <ImportItemModal
-                                  currentPackId={currentPackId || ''}
-                                  currentPack={currentPack}
-                                  isImportItemModalOpen={isImportItemModalOpen}
-                                  setIsImportItemModalOpen={
-                                    setIsImportItemModalOpen
-                                  }
-                                />
-                              </View>
-                            ) : (
-                              <RText
-                                style={{ textAlign: 'center', fontWeight: 600 }}
-                              >
-                                <RText style={{ marginRight: 2 }}>
-                                  You don't have permission to edit this pack.
-                                  You can create your own pack{' '}
-                                </RText>
-                                <TextLink href="/pack/create">
-                                  <RText
+                          <View
+                            style={{
+                              display: 'flex',
+                              flexDirection: sm ? 'column' : 'row',
+                              gap: 8,
+                            }}
+                          >
+                            <View style={{ flex: 1 }}>
+                              <ScoreContainer
+                                type="pack"
+                                data={currentPack}
+                                isOwner={isOwner}
+                              />
+                            </View>
+                            <View style={{ flex: 1 }}>
+                              <ConnectionGate mode="connected">
+                                <LargeCard
+                                  customStyle={{
+                                    width: '100%',
+                                    backgroundColor:
+                                      currentTheme.colors.secondaryBlue,
+                                    paddingBottom: 24,
+                                    marginTop: 28,
+                                    paddingTop: 0,
+                                  }}
+                                >
+                                  <RH3
                                     style={{
-                                      color: 'blue',
-                                      fontWeight: 700,
+                                      color: currentTheme.colors.text,
+                                      fontSize: 24,
+                                      alignSelf: 'center',
                                     }}
                                   >
-                                    here
-                                  </RText>
-                                </TextLink>
-                              </RText>
-                            )}
-                          </ConnectionGate>
-                        );
-                      case SECTION.SCORECARD:
-                        return (
-                          <View>
-                            <ScoreContainer
-                              type="pack"
-                              data={currentPack}
-                              isOwner={isOwner}
-                            />
+                                    Similar Packs
+                                  </RH3>
+                                  <FeedPreview
+                                    feedType="similarPacks"
+                                    id={currentPackId}
+                                  />
+                                </LargeCard>
+                              </ConnectionGate>
+                            </View>
                           </View>
                         );
-                      case SECTION.SIMILAR_PACKS:
-                        return (
-                          <ConnectionGate mode="connected">
-                            <LargeCard
-                              customStyle={{
-                                width: '100%',
-                                backgroundColor:
-                                  currentTheme.colors.secondaryBlue,
-                                paddingBottom: 24,
-                                marginTop: 20,
-                                paddingTop: 0,
-                              }}
-                            >
-                              <RH3
-                                style={{
-                                  // textTransform: 'capitalize',
-                                  color: currentTheme.colors.text,
-                                  fontSize: 24,
-                                  // fontWeight: 'bold',
-                                  alignSelf: 'center',
-                                }}
-                              >
-                                Similar Packs
-                              </RH3>
-                              <FeedPreview
-                                feedType="similarPacks"
-                                id={currentPackId}
-                              />
-                            </LargeCard>
-                          </ConnectionGate>
-                        );
+
                       default:
                         return null;
                     }
@@ -231,14 +237,6 @@ export function PackDetailsScreen() {
               alignSelf: 'flex-end',
             }}
           >
-            {/* <View
-            style={{
-              width: 50,
-              height: 50,
-              justifyContent: 'center',
-              alignItems: 'center',
-            }}
-          > */}
             <RIconButton
               backgroundColor="transparent"
               style={{
@@ -266,7 +264,6 @@ export function PackDetailsScreen() {
               }}
             />
           </View>
-          // </View>
         )}
       </ConnectionGate>
     </Layout>

From 987ce03e66870205aca7f58c9c154583c40ddda8 Mon Sep 17 00:00:00 2001
From: Anmol Verma <anmolverma2810@gmail.com>
Date: Mon, 9 Dec 2024 23:25:17 +0530
Subject: [PATCH 06/66] Revert "packdetails layout changes"

This reverts commit 6cab98f26f09f569ecb17fd788188d2620d51ade.
---
 .../pack/components/PackTable/ItemList.tsx    | 393 +++++-------------
 .../components/PackTable/TableContainer.tsx   |  56 ++-
 .../pack/screens/PackDetailsScreen.tsx        | 193 ++++-----
 3 files changed, 225 insertions(+), 417 deletions(-)

diff --git a/packages/app/modules/pack/components/PackTable/ItemList.tsx b/packages/app/modules/pack/components/PackTable/ItemList.tsx
index a09a3bbe9..69e5f7781 100644
--- a/packages/app/modules/pack/components/PackTable/ItemList.tsx
+++ b/packages/app/modules/pack/components/PackTable/ItemList.tsx
@@ -1,5 +1,5 @@
-import React, { useEffect, useState } from 'react';
-import { RStack, RText, RIconButton, RInput } from '@packrat/ui';
+import React, { useEffect, useRef, useState } from 'react';
+import { RIconButton, RInput, RStack, RText } from '@packrat/ui';
 import { ListItem } from 'tamagui';
 import { AntDesign, MaterialIcons } from '@expo/vector-icons';
 import { convertWeight } from 'app/utils/convertWeight';
@@ -27,341 +27,136 @@ export const ItemList = ({
       onSubmitQuantity(item.id, value),
     );
 
-  const renderHeader = () => (
-    <RStack
-      style={{
-        flexDirection: 'row',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        paddingVertical: 10,
-        borderBottomWidth: 1,
-        borderBottomColor: currentTheme.colors.border,
-      }}
-    >
-      <RText
-        style={{
-          flexBasis: '25%',
-          fontWeight: 'bold',
-          color: currentTheme.colors.text,
-        }}
-      >
-        Name
-      </RText>
-      <RText
-        style={{
-          flexBasis: '20%',
-          textAlign: 'center',
-          fontWeight: 'bold',
-          color: currentTheme.colors.text,
-        }}
-      >
-        Category
-      </RText>
-      <RText
-        style={{
-          flexBasis: '20%',
-          textAlign: 'center',
-          fontWeight: 'bold',
-          color: currentTheme.colors.text,
-        }}
-      >
-        Weight
-      </RText>
-      <RText
+  return (
+    <ListItem hoverTheme pressTheme>
+      <RStack
         style={{
-          flexBasis: '25%',
-          textAlign: 'center',
-          fontWeight: 'bold',
-          color: currentTheme.colors.text,
+          width: '100%',
+          flexDirection: 'row',
+          justifyContent: 'space-between',
+          alignItems: 'center',
         }}
       >
-        Quantity
-      </RText>
-      {isActionsEnabled && (
         <RText
+          numberOfLines={1}
+          ellipsizeMode="tail"
           style={{
-            flexBasis: '10%',
-            textAlign: 'center',
-            fontWeight: 'bold',
+            marginTop: 10,
             color: currentTheme.colors.text,
+            fontSize: responsive.xxs ? 12 : responsive.sm ? 14 : 16,
+            fontWeight: 'bold',
+            flexBasis: '25%',
           }}
         >
-          Actions
+          {item.name}
         </RText>
-      )}
-    </RStack>
-  );
 
-  if (responsive.sm) {
-    return (
-      <>
-        <RStack
-          style={{
-            backgroundColor: currentTheme.colors.background,
-            padding: 16,
-            borderRadius: 8,
-            marginBottom: 10,
-            shadowOpacity: 0.2,
-            shadowRadius: 4,
-            shadowOffset: { width: 0, height: 2 },
-            elevation: 3,
-          }}
-        >
+        {isActionsEnabled ? (
           <RStack
             style={{
               flexDirection: 'row',
-              justifyContent: 'space-between',
               alignItems: 'center',
+              justifyContent: 'center',
+              flexBasis: '25%',
             }}
           >
-            <RText
+            <RIconButton
+              onPress={decrease}
               style={{
-                fontWeight: 'bold',
-                fontSize: responsive.xxs ? 14 : 16,
-                color: currentTheme.colors.text,
+                width: responsive.xxs ? 18 : responsive.sm ? 20 : 25,
+                height: responsive.xxs ? 18 : responsive.sm ? 20 : 25,
+                padding: 0,
               }}
             >
-              {item.name}
-            </RText>
-            <RText
+              <AntDesign
+                name="minus"
+                size={responsive.xxs ? 10 : responsive.sm ? 12 : 14}
+                color={currentTheme.colors.text}
+              />
+            </RIconButton>
+
+            <RInput
+              value={String(value)}
+              onChangeText={(text) => setValue(Number(text))}
+              onBlur={(e) => submit(Number(e.target.value))}
               style={{
-                fontSize: responsive.xxs ? 12 : 14,
-                color: currentTheme.colors.textSecondary,
+                width: 40,
+                padding: 0,
+                textAlign: 'center',
+                height: responsive.xxs ? 25 : 30,
+                color: currentTheme.colors.text,
+                fontSize: 12,
+                borderWidth: 1,
+                borderColor: hasError ? 'red' : '',
               }}
-            >
-              {item.category.name}
-            </RText>
-          </RStack>
-          <RStack style={{ marginTop: 10 }}>
-            <RText
+            />
+
+            <RIconButton
+              onPress={increase}
               style={{
-                fontSize: responsive.xxs ? 12 : 14,
-                color: currentTheme.colors.textSecondary,
+                width: responsive.xxs ? 18 : responsive.sm ? 20 : 25,
+                height: responsive.xxs ? 18 : responsive.sm ? 20 : 25,
+                padding: 0,
               }}
             >
-              {`Weight: ${convertWeight(
-                item.weight,
-                SMALLEST_ITEM_UNIT,
-                item.unit,
-              )} ${item.unit}`}
-            </RText>
-            {isActionsEnabled ? (
-              <RStack
-                style={{
-                  flexDirection: 'row',
-                  alignItems: 'center',
-                  justifyContent: 'space-between',
-                  marginTop: 10,
-                }}
-              >
-                <RStack
-                  style={{
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                  }}
-                >
-                  <RIconButton
-                    onPress={decrease}
-                    style={{
-                      width: 25,
-                      height: 25,
-                      padding: 0,
-                    }}
-                  >
-                    <AntDesign
-                      name="minus"
-                      size={14}
-                      color={currentTheme.colors.text}
-                    />
-                  </RIconButton>
-                  <RInput
-                    value={String(value)}
-                    onChangeText={(text) => setValue(Number(text))}
-                    onBlur={(e) => submit(Number(e.target.value))}
-                    style={{
-                      width: 50,
-                      padding: 0,
-                      textAlign: 'center',
-                      height: 30,
-                      color: currentTheme.colors.text,
-                      fontSize: 12,
-                      borderWidth: 1,
-                      borderColor: hasError
-                        ? 'red'
-                        : currentTheme.colors.border,
-                      marginHorizontal: 8,
-                    }}
-                  />
-                  <RIconButton
-                    onPress={increase}
-                    style={{
-                      width: 25,
-                      height: 25,
-                      padding: 0,
-                    }}
-                  >
-                    <AntDesign
-                      name="plus"
-                      size={14}
-                      color={currentTheme.colors.text}
-                    />
-                  </RIconButton>
-                </RStack>
-                <RStack
-                  style={{
-                    marginTop: 10,
-                    flexDirection: 'row',
-                    justifyContent: 'flex-end',
-                  }}
-                >
-                  <RIconButton
-                    onPress={() => handleDeleteItem(item.id)}
-                    style={{
-                      backgroundColor: 'transparent',
-                    }}
-                  >
-                    <MaterialIcons
-                      name="delete"
-                      size={24}
-                      color={currentTheme.colors.text}
-                    />
-                  </RIconButton>
-                </RStack>
-              </RStack>
-            ) : (
-              <RText
-                style={{
-                  fontSize: 12,
-                  color: currentTheme.colors.text,
-                  marginTop: 10,
-                }}
-              >
-                Quantity: {value}
-              </RText>
-            )}
+              <AntDesign
+                name="plus"
+                size={responsive.xxs ? 10 : responsive.sm ? 12 : 14}
+                color={currentTheme.colors.text}
+              />
+            </RIconButton>
           </RStack>
-        </RStack>
-      </>
-    );
-  }
+        ) : (
+          <RText
+            style={{ paddingRight: 16, fontSize: 12, alignSelf: 'center' }}
+          >
+            {value}
+          </RText>
+        )}
 
-  return (
-    <>
-      {renderHeader()}
-      <ListItem hoverTheme pressTheme>
         <RStack
           style={{
-            width: '100%',
-            flexDirection: 'row',
-            justifyContent: 'space-between',
+            flexBasis: '20%',
             alignItems: 'center',
           }}
         >
-          <RText
-            style={{
-              marginTop: 10,
-              color: currentTheme.colors.text,
-              fontSize: 16,
-              fontWeight: 'bold',
-              flexBasis: '25%',
-            }}
-          >
-            {item.name}
-          </RText>
           <RText
             style={{
               color: currentTheme.colors.text,
-              fontSize: 14,
-              flexBasis: '20%',
-              textAlign: 'center',
+              marginLeft: responsive.xxs ? 10 : 20,
+              width: responsive.xxs ? 80 : 110,
+              fontSize: responsive.xxs ? 10 : responsive.sm ? 12 : 14,
             }}
           >
-            {item.category.name}
+            {`Weight: ${convertWeight(item.weight, SMALLEST_ITEM_UNIT, item.unit)} ${item.unit}`}
           </RText>
-          <RText
-            style={{
-              color: currentTheme.colors.text,
-              flexBasis: '20%',
-              textAlign: 'center',
-            }}
-          >
-            {`${convertWeight(item.weight, SMALLEST_ITEM_UNIT, item.unit)} ${item.unit}`}
-          </RText>
-          <RStack
-            style={{
-              flexDirection: 'row',
-              alignItems: 'center',
-              justifyContent: 'center',
-              flexBasis: '25%',
-            }}
-          >
-            {isActionsEnabled ? (
-              <>
-                <RIconButton
-                  onPress={decrease}
-                  style={{
-                    width: 25,
-                    height: 25,
-                    padding: 0,
-                  }}
-                >
-                  <AntDesign
-                    name="minus"
-                    size={14}
-                    color={currentTheme.colors.text}
-                  />
-                </RIconButton>
-                <RInput
-                  value={String(value)}
-                  onChangeText={(text) => setValue(Number(text))}
-                  onBlur={(e) => submit(Number(e.target.value))}
-                  style={{
-                    width: 40,
-                    padding: 0,
-                    textAlign: 'center',
-                    height: 30,
-                    color: currentTheme.colors.text,
-                    fontSize: 12,
-                    borderWidth: 1,
-                    borderColor: hasError ? 'red' : currentTheme.colors.border,
-                  }}
-                />
-                <RIconButton
-                  onPress={increase}
-                  style={{
-                    width: 25,
-                    height: 25,
-                    padding: 0,
-                  }}
-                >
-                  <AntDesign
-                    name="plus"
-                    size={14}
-                    color={currentTheme.colors.text}
-                  />
-                </RIconButton>
-              </>
-            ) : (
-              <RText style={{ fontSize: 12, color: currentTheme.colors.text }}>
-                {value}
-              </RText>
-            )}
-          </RStack>
-          {isActionsEnabled && (
-            <RIconButton
-              onPress={() => handleDeleteItem(item.id)}
-              style={{ backgroundColor: 'transparent', flexBasis: '10%' }}
-            >
-              <MaterialIcons
-                name="delete"
-                size={24}
-                color={currentTheme.colors.text}
-              />
-            </RIconButton>
-          )}
         </RStack>
-      </ListItem>
-    </>
+
+        <RText
+          style={{
+            color: currentTheme.colors.text,
+            fontSize: responsive.xxs ? 11 : responsive.sm ? 12 : 14,
+            flexBasis: '20%',
+            textAlign: 'center',
+          }}
+        >
+          {item.category.name}
+        </RText>
+
+        {isActionsEnabled && (
+          <RIconButton
+            onPress={() => handleDeleteItem(item.id)}
+            style={{ backgroundColor: 'transparent' }}
+          >
+            <MaterialIcons
+              name="delete"
+              size={responsive.xxs ? 18 : responsive.sm ? 20 : 24}
+              color={currentTheme.colors.text}
+            />
+          </RIconButton>
+        )}
+      </RStack>
+    </ListItem>
   );
 };
 
diff --git a/packages/app/modules/pack/components/PackTable/TableContainer.tsx b/packages/app/modules/pack/components/PackTable/TableContainer.tsx
index 42ab6e39d..64a1d6d1f 100644
--- a/packages/app/modules/pack/components/PackTable/TableContainer.tsx
+++ b/packages/app/modules/pack/components/PackTable/TableContainer.tsx
@@ -73,7 +73,7 @@ export const TableContainer = ({
     <View style={styles.container}>
       {data?.length ? (
         <View style={styles.layoutContainer}>
-          <YGroup alignSelf="stretch" size="$8">
+          <YGroup alignSelf="stretch" size="$8" style={styles.itemsList}>
             {data.map((item) => (
               <YGroup.Item key={item.id}>
                 <ItemList
@@ -88,26 +88,28 @@ export const TableContainer = ({
 
           {copy && <RButton onPress={handleDuplicate}>Copy</RButton>}
 
-          <TotalWeightBox
-            label="Base Weight"
-            weight={totalBaseWeight}
-            unit={weightUnit}
-          />
-          <TotalWeightBox
-            label="Water + Food Weight"
-            weight={totalWaterWeight + totalFoodWeight}
-            unit={weightUnit}
-          />
-          <RSeparator style={styles.separator} />
-          <TotalWeightBox
-            label="Total Weight"
-            weight={totalWeight}
-            unit={weightUnit}
-          />
-          <WeightUnitDropdown
-            value={weightUnit}
-            onChange={(itemValue: string) => setWeightUnit(itemValue as any)}
-          />
+          <View style={styles.summarySection}>
+            <TotalWeightBox
+              label="Base Weight"
+              weight={totalBaseWeight}
+              unit={weightUnit}
+            />
+            <TotalWeightBox
+              label="Water + Food Weight"
+              weight={totalWaterWeight + totalFoodWeight}
+              unit={weightUnit}
+            />
+            <RSeparator style={styles.separator} />
+            <TotalWeightBox
+              label="Total Weight"
+              weight={totalWeight}
+              unit={weightUnit}
+            />
+            <WeightUnitDropdown
+              value={weightUnit}
+              onChange={(itemValue: string) => setWeightUnit(itemValue as any)}
+            />
+          </View>
         </View>
       ) : (
         <RText style={styles.noItemsText}>Add your First Item</RText>
@@ -127,8 +129,17 @@ const loadStyles = (theme: any) => {
       width: '100%',
     },
     layoutContainer: {
-      flexDirection: 'column',
+      flexDirection: sm ? 'column' : 'row',
       justifyContent: 'space-between',
+    },
+    itemsList: {
+      flex: 2,
+      marginRight: 20,
+      backgroundColor: currentTheme.colors.card,
+      width: '100%',
+      height: '100%',
+    },
+    summarySection: {
       marginTop: sm ? 20 : 0,
       flex: 1,
       padding: sm ? 10 : 5,
@@ -136,7 +147,6 @@ const loadStyles = (theme: any) => {
       elevation: 8,
       backgroundColor: currentTheme.colors.card,
     },
-
     separator: {
       marginVertical: 10,
     },
diff --git a/packages/app/modules/pack/screens/PackDetailsScreen.tsx b/packages/app/modules/pack/screens/PackDetailsScreen.tsx
index 6b7d2539e..d70381958 100644
--- a/packages/app/modules/pack/screens/PackDetailsScreen.tsx
+++ b/packages/app/modules/pack/screens/PackDetailsScreen.tsx
@@ -28,8 +28,9 @@ import { ConnectionGate } from 'app/components/ConnectionGate';
 const SECTION = {
   TABLE: 'TABLE',
   CTA: 'CTA',
-  SCORE_SIMILAR: 'SCORE_SIMILAR',
+  SCORECARD: 'SCORECARD',
   CHAT: 'CHAT',
+  SIMILAR_PACKS: 'SIMILAR_PACKS',
 };
 
 export function PackDetailsScreen() {
@@ -52,7 +53,6 @@ export function PackDetailsScreen() {
   } = useFetchSinglePack(packId);
   const isAuthUserPack = useIsAuthUserPack(currentPack);
   const router = useRouter();
-  const { sm } = useResponsive();
 
   // const styles = useCustomStyles(loadStyles);
   const currentPackId = currentPack && currentPack.id;
@@ -85,58 +85,6 @@ export function PackDetailsScreen() {
             error={error as any}
             additionalComps={
               <>
-                <ConnectionGate mode="connected">
-                  {isAuthUserPack ? (
-                    <View
-                      style={{
-                        display: 'flex',
-                        flexDirection: 'row',
-                        width: '100%',
-                        justifyContent: 'center',
-                        gap: 5,
-                        marginBottom: 16, // Spacing below the buttons
-                      }}
-                    >
-                      <AddItemModal
-                        currentPackId={currentPackId || ''}
-                        currentPack={currentPack}
-                        isAddItemModalOpen={isAddItemModalOpen}
-                        setIsAddItemModalOpen={setIsAddItemModalOpen}
-                        setRefetch={() => setRefetch((prev) => !prev)}
-                      />
-                      <ImportItemModal
-                        currentPackId={currentPackId || ''}
-                        currentPack={currentPack}
-                        isImportItemModalOpen={isImportItemModalOpen}
-                        setIsImportItemModalOpen={setIsImportItemModalOpen}
-                      />
-                    </View>
-                  ) : (
-                    <RText
-                      style={{
-                        textAlign: 'center',
-                        fontWeight: 600,
-                        marginBottom: 16, // Spacing below the text
-                      }}
-                    >
-                      <RText style={{ marginRight: 2 }}>
-                        You don't have permission to edit this pack. You can
-                        create your own pack{' '}
-                      </RText>
-                      <TextLink href="/pack/create">
-                        <RText
-                          style={{
-                            color: 'blue',
-                            fontWeight: 700,
-                          }}
-                        >
-                          here
-                        </RText>
-                      </TextLink>
-                    </RText>
-                  )}
-                </ConnectionGate>
-
                 <FlatList
                   data={Object.entries(SECTION)}
                   contentContainerStyle={{ paddingBottom: 80 }}
@@ -151,53 +99,99 @@ export function PackDetailsScreen() {
                             hasPermissions={isAuthUserPack}
                           />
                         );
-                      case SECTION.SCORE_SIMILAR:
+                      case SECTION.CTA:
                         return (
-                          <View
-                            style={{
-                              display: 'flex',
-                              flexDirection: sm ? 'column' : 'row',
-                              gap: 8,
-                            }}
-                          >
-                            <View style={{ flex: 1 }}>
-                              <ScoreContainer
-                                type="pack"
-                                data={currentPack}
-                                isOwner={isOwner}
-                              />
-                            </View>
-                            <View style={{ flex: 1 }}>
-                              <ConnectionGate mode="connected">
-                                <LargeCard
-                                  customStyle={{
-                                    width: '100%',
-                                    backgroundColor:
-                                      currentTheme.colors.secondaryBlue,
-                                    paddingBottom: 24,
-                                    marginTop: 28,
-                                    paddingTop: 0,
-                                  }}
-                                >
-                                  <RH3
+                          <ConnectionGate mode="connected">
+                            {isAuthUserPack ? (
+                              <View
+                                style={{
+                                  display: 'flex',
+                                  flexDirection: 'row',
+                                  width: '100%',
+                                  justifyContent: 'center',
+                                  gap: 5,
+                                }}
+                              >
+                                <AddItemModal
+                                  currentPackId={currentPackId || ''}
+                                  currentPack={currentPack}
+                                  isAddItemModalOpen={isAddItemModalOpen}
+                                  setIsAddItemModalOpen={setIsAddItemModalOpen}
+                                  // refetch={refetch}
+                                  setRefetch={() => setRefetch((prev) => !prev)}
+                                />
+                                <ImportItemModal
+                                  currentPackId={currentPackId || ''}
+                                  currentPack={currentPack}
+                                  isImportItemModalOpen={isImportItemModalOpen}
+                                  setIsImportItemModalOpen={
+                                    setIsImportItemModalOpen
+                                  }
+                                />
+                              </View>
+                            ) : (
+                              <RText
+                                style={{ textAlign: 'center', fontWeight: 600 }}
+                              >
+                                <RText style={{ marginRight: 2 }}>
+                                  You don't have permission to edit this pack.
+                                  You can create your own pack{' '}
+                                </RText>
+                                <TextLink href="/pack/create">
+                                  <RText
                                     style={{
-                                      color: currentTheme.colors.text,
-                                      fontSize: 24,
-                                      alignSelf: 'center',
+                                      color: 'blue',
+                                      fontWeight: 700,
                                     }}
                                   >
-                                    Similar Packs
-                                  </RH3>
-                                  <FeedPreview
-                                    feedType="similarPacks"
-                                    id={currentPackId}
-                                  />
-                                </LargeCard>
-                              </ConnectionGate>
-                            </View>
+                                    here
+                                  </RText>
+                                </TextLink>
+                              </RText>
+                            )}
+                          </ConnectionGate>
+                        );
+                      case SECTION.SCORECARD:
+                        return (
+                          <View>
+                            <ScoreContainer
+                              type="pack"
+                              data={currentPack}
+                              isOwner={isOwner}
+                            />
                           </View>
                         );
-
+                      case SECTION.SIMILAR_PACKS:
+                        return (
+                          <ConnectionGate mode="connected">
+                            <LargeCard
+                              customStyle={{
+                                width: '100%',
+                                backgroundColor:
+                                  currentTheme.colors.secondaryBlue,
+                                paddingBottom: 24,
+                                marginTop: 20,
+                                paddingTop: 0,
+                              }}
+                            >
+                              <RH3
+                                style={{
+                                  // textTransform: 'capitalize',
+                                  color: currentTheme.colors.text,
+                                  fontSize: 24,
+                                  // fontWeight: 'bold',
+                                  alignSelf: 'center',
+                                }}
+                              >
+                                Similar Packs
+                              </RH3>
+                              <FeedPreview
+                                feedType="similarPacks"
+                                id={currentPackId}
+                              />
+                            </LargeCard>
+                          </ConnectionGate>
+                        );
                       default:
                         return null;
                     }
@@ -237,6 +231,14 @@ export function PackDetailsScreen() {
               alignSelf: 'flex-end',
             }}
           >
+            {/* <View
+            style={{
+              width: 50,
+              height: 50,
+              justifyContent: 'center',
+              alignItems: 'center',
+            }}
+          > */}
             <RIconButton
               backgroundColor="transparent"
               style={{
@@ -264,6 +266,7 @@ export function PackDetailsScreen() {
               }}
             />
           </View>
+          // </View>
         )}
       </ConnectionGate>
     </Layout>

From 16e1a3cfa78bffa8931d5edc73754da8124ec62d Mon Sep 17 00:00:00 2001
From: Anmol Verma <anmolverma2810@gmail.com>
Date: Mon, 9 Dec 2024 23:44:17 +0530
Subject: [PATCH 07/66] layout changes

---
 .../pack/components/PackTable/ItemList.tsx    | 393 +++++++++++++-----
 .../components/PackTable/TableContainer.tsx   |  56 +--
 .../pack/screens/PackDetailsScreen.tsx        | 193 +++++----
 3 files changed, 417 insertions(+), 225 deletions(-)

diff --git a/packages/app/modules/pack/components/PackTable/ItemList.tsx b/packages/app/modules/pack/components/PackTable/ItemList.tsx
index 69e5f7781..8952c5340 100644
--- a/packages/app/modules/pack/components/PackTable/ItemList.tsx
+++ b/packages/app/modules/pack/components/PackTable/ItemList.tsx
@@ -1,5 +1,5 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { RIconButton, RInput, RStack, RText } from '@packrat/ui';
+import React, { useEffect, useState } from 'react';
+import { RStack, RText, RIconButton, RInput } from '@packrat/ui';
 import { ListItem } from 'tamagui';
 import { AntDesign, MaterialIcons } from '@expo/vector-icons';
 import { convertWeight } from 'app/utils/convertWeight';
@@ -27,136 +27,341 @@ export const ItemList = ({
       onSubmitQuantity(item.id, value),
     );
 
-  return (
-    <ListItem hoverTheme pressTheme>
-      <RStack
+  const renderHeader = () => (
+    <RStack
+      style={{
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        paddingVertical: 10,
+        borderBottomWidth: 1,
+        borderBottomColor: currentTheme.colors.border,
+      }}
+    >
+      <RText
+        style={{
+          flexBasis: '25%',
+          fontWeight: 'bold',
+          color: currentTheme.colors.text,
+        }}
+      >
+        Name
+      </RText>
+      <RText
+        style={{
+          flexBasis: '20%',
+          textAlign: 'center',
+          fontWeight: 'bold',
+          color: currentTheme.colors.text,
+        }}
+      >
+        Category
+      </RText>
+      <RText
+        style={{
+          flexBasis: '20%',
+          textAlign: 'center',
+          fontWeight: 'bold',
+          color: currentTheme.colors.text,
+        }}
+      >
+        Weight
+      </RText>
+      <RText
         style={{
-          width: '100%',
-          flexDirection: 'row',
-          justifyContent: 'space-between',
-          alignItems: 'center',
+          flexBasis: '25%',
+          textAlign: 'center',
+          fontWeight: 'bold',
+          color: currentTheme.colors.text,
         }}
       >
+        Quantity
+      </RText>
+      {isActionsEnabled && (
         <RText
-          numberOfLines={1}
-          ellipsizeMode="tail"
           style={{
-            marginTop: 10,
-            color: currentTheme.colors.text,
-            fontSize: responsive.xxs ? 12 : responsive.sm ? 14 : 16,
+            flexBasis: '10%',
+            textAlign: 'center',
             fontWeight: 'bold',
-            flexBasis: '25%',
+            color: currentTheme.colors.text,
           }}
         >
-          {item.name}
+          Actions
         </RText>
+      )}
+    </RStack>
+  );
 
-        {isActionsEnabled ? (
+  if (responsive.sm) {
+    return (
+      <>
+        <RStack
+          style={{
+            backgroundColor: currentTheme.colors.background,
+            padding: 16,
+            borderRadius: 8,
+            marginBottom: 10,
+            shadowOpacity: 0.2,
+            shadowRadius: 4,
+            shadowOffset: { width: 0, height: 2 },
+            elevation: 3,
+          }}
+        >
           <RStack
             style={{
               flexDirection: 'row',
+              justifyContent: 'space-between',
               alignItems: 'center',
-              justifyContent: 'center',
-              flexBasis: '25%',
             }}
           >
-            <RIconButton
-              onPress={decrease}
+            <RText
               style={{
-                width: responsive.xxs ? 18 : responsive.sm ? 20 : 25,
-                height: responsive.xxs ? 18 : responsive.sm ? 20 : 25,
-                padding: 0,
+                fontWeight: 'bold',
+                fontSize: responsive.xxs ? 14 : 16,
+                color: currentTheme.colors.text,
               }}
             >
-              <AntDesign
-                name="minus"
-                size={responsive.xxs ? 10 : responsive.sm ? 12 : 14}
-                color={currentTheme.colors.text}
-              />
-            </RIconButton>
-
-            <RInput
-              value={String(value)}
-              onChangeText={(text) => setValue(Number(text))}
-              onBlur={(e) => submit(Number(e.target.value))}
+              {item.name}
+            </RText>
+            <RText
               style={{
-                width: 40,
-                padding: 0,
-                textAlign: 'center',
-                height: responsive.xxs ? 25 : 30,
-                color: currentTheme.colors.text,
-                fontSize: 12,
-                borderWidth: 1,
-                borderColor: hasError ? 'red' : '',
+                fontSize: responsive.xxs ? 12 : 14,
+                color: currentTheme.colors.textSecondary,
               }}
-            />
-
-            <RIconButton
-              onPress={increase}
+            >
+              {item.category.name}
+            </RText>
+          </RStack>
+          <RStack style={{ marginTop: 10 }}>
+            <RText
               style={{
-                width: responsive.xxs ? 18 : responsive.sm ? 20 : 25,
-                height: responsive.xxs ? 18 : responsive.sm ? 20 : 25,
-                padding: 0,
+                fontSize: responsive.xxs ? 12 : 14,
+                color: currentTheme.colors.textSecondary,
               }}
             >
-              <AntDesign
-                name="plus"
-                size={responsive.xxs ? 10 : responsive.sm ? 12 : 14}
-                color={currentTheme.colors.text}
-              />
-            </RIconButton>
+              {`Weight: ${convertWeight(
+                item.weight,
+                SMALLEST_ITEM_UNIT,
+                item.unit,
+              )} ${item.unit}`}
+            </RText>
+            {isActionsEnabled ? (
+              <RStack
+                style={{
+                  flexDirection: 'row',
+                  alignItems: 'center',
+                  justifyContent: 'space-between',
+                  marginTop: 10,
+                }}
+              >
+                <RStack
+                  style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                  }}
+                >
+                  <RIconButton
+                    onPress={decrease}
+                    style={{
+                      width: 25,
+                      height: 25,
+                      padding: 0,
+                    }}
+                  >
+                    <AntDesign
+                      name="minus"
+                      size={14}
+                      color={currentTheme.colors.text}
+                    />
+                  </RIconButton>
+                  <RInput
+                    value={String(value)}
+                    onChangeText={(text) => setValue(Number(text))}
+                    onBlur={(e) => submit(Number(e.target.value))}
+                    style={{
+                      width: 50,
+                      padding: 0,
+                      textAlign: 'center',
+                      height: 30,
+                      color: currentTheme.colors.text,
+                      fontSize: 12,
+                      borderWidth: 1,
+                      borderColor: hasError
+                        ? 'red'
+                        : currentTheme.colors.border,
+                      marginHorizontal: 8,
+                    }}
+                  />
+                  <RIconButton
+                    onPress={increase}
+                    style={{
+                      width: 25,
+                      height: 25,
+                      padding: 0,
+                    }}
+                  >
+                    <AntDesign
+                      name="plus"
+                      size={14}
+                      color={currentTheme.colors.text}
+                    />
+                  </RIconButton>
+                </RStack>
+                <RStack
+                  style={{
+                    marginTop: 10,
+                    flexDirection: 'row',
+                    justifyContent: 'flex-end',
+                  }}
+                >
+                  <RIconButton
+                    onPress={() => handleDeleteItem(item.id)}
+                    style={{
+                      backgroundColor: 'transparent',
+                    }}
+                  >
+                    <MaterialIcons
+                      name="delete"
+                      size={24}
+                      color={currentTheme.colors.text}
+                    />
+                  </RIconButton>
+                </RStack>
+              </RStack>
+            ) : (
+              <RText
+                style={{
+                  fontSize: 12,
+                  color: currentTheme.colors.text,
+                  marginTop: 10,
+                }}
+              >
+                Quantity: {value}
+              </RText>
+            )}
           </RStack>
-        ) : (
-          <RText
-            style={{ paddingRight: 16, fontSize: 12, alignSelf: 'center' }}
-          >
-            {value}
-          </RText>
-        )}
+        </RStack>
+      </>
+    );
+  }
 
+  return (
+    <>
+      {renderHeader()}
+      <ListItem hoverTheme pressTheme>
         <RStack
           style={{
-            flexBasis: '20%',
+            width: '100%',
+            flexDirection: 'row',
+            justifyContent: 'space-between',
             alignItems: 'center',
           }}
         >
           <RText
             style={{
+              marginTop: 10,
               color: currentTheme.colors.text,
-              marginLeft: responsive.xxs ? 10 : 20,
-              width: responsive.xxs ? 80 : 110,
-              fontSize: responsive.xxs ? 10 : responsive.sm ? 12 : 14,
+              fontSize: 16,
+              fontWeight: 'bold',
+              flexBasis: '25%',
             }}
           >
-            {`Weight: ${convertWeight(item.weight, SMALLEST_ITEM_UNIT, item.unit)} ${item.unit}`}
+            {item.name}
           </RText>
-        </RStack>
-
-        <RText
-          style={{
-            color: currentTheme.colors.text,
-            fontSize: responsive.xxs ? 11 : responsive.sm ? 12 : 14,
-            flexBasis: '20%',
-            textAlign: 'center',
-          }}
-        >
-          {item.category.name}
-        </RText>
-
-        {isActionsEnabled && (
-          <RIconButton
-            onPress={() => handleDeleteItem(item.id)}
-            style={{ backgroundColor: 'transparent' }}
+          <RText
+            style={{
+              color: currentTheme.colors.text,
+              fontSize: 14,
+              flexBasis: '20%',
+              textAlign: 'center',
+            }}
+          >
+            {item.category.name}
+          </RText>
+          <RText
+            style={{
+              color: currentTheme.colors.text,
+              flexBasis: '20%',
+              textAlign: 'center',
+            }}
           >
-            <MaterialIcons
-              name="delete"
-              size={responsive.xxs ? 18 : responsive.sm ? 20 : 24}
-              color={currentTheme.colors.text}
-            />
-          </RIconButton>
-        )}
-      </RStack>
-    </ListItem>
+            {`${convertWeight(item.weight, SMALLEST_ITEM_UNIT, item.unit)}${item.unit}`}
+          </RText>
+          <RStack
+            style={{
+              flexDirection: 'row',
+              alignItems: 'center',
+              justifyContent: 'center',
+              flexBasis: '25%',
+            }}
+          >
+            {isActionsEnabled ? (
+              <>
+                <RIconButton
+                  onPress={decrease}
+                  style={{
+                    width: 25,
+                    height: 25,
+                    padding: 0,
+                  }}
+                >
+                  <AntDesign
+                    name="minus"
+                    size={14}
+                    color={currentTheme.colors.text}
+                  />
+                </RIconButton>
+                <RInput
+                  value={String(value)}
+                  onChangeText={(text) => setValue(Number(text))}
+                  onBlur={(e) => submit(Number(e.target.value))}
+                  style={{
+                    width: 40,
+                    padding: 0,
+                    textAlign: 'center',
+                    height: 30,
+                    color: currentTheme.colors.text,
+                    fontSize: 12,
+                    borderWidth: 1,
+                    borderColor: hasError ? 'red' : currentTheme.colors.border,
+                  }}
+                />
+                <RIconButton
+                  onPress={increase}
+                  style={{
+                    width: 25,
+                    height: 25,
+                    padding: 0,
+                  }}
+                >
+                  <AntDesign
+                    name="plus"
+                    size={14}
+                    color={currentTheme.colors.text}
+                  />
+                </RIconButton>
+              </>
+            ) : (
+              <RText style={{ fontSize: 12, color: currentTheme.colors.text }}>
+                {value}
+              </RText>
+            )}
+          </RStack>
+          {isActionsEnabled && (
+            <RIconButton
+              onPress={() => handleDeleteItem(item.id)}
+              style={{ backgroundColor: 'transparent', flexBasis: '10%' }}
+            >
+              <MaterialIcons
+                name="delete"
+                size={24}
+                color={currentTheme.colors.text}
+              />
+            </RIconButton>
+          )}
+        </RStack>
+      </ListItem>
+    </>
   );
 };
 
diff --git a/packages/app/modules/pack/components/PackTable/TableContainer.tsx b/packages/app/modules/pack/components/PackTable/TableContainer.tsx
index 64a1d6d1f..42ab6e39d 100644
--- a/packages/app/modules/pack/components/PackTable/TableContainer.tsx
+++ b/packages/app/modules/pack/components/PackTable/TableContainer.tsx
@@ -73,7 +73,7 @@ export const TableContainer = ({
     <View style={styles.container}>
       {data?.length ? (
         <View style={styles.layoutContainer}>
-          <YGroup alignSelf="stretch" size="$8" style={styles.itemsList}>
+          <YGroup alignSelf="stretch" size="$8">
             {data.map((item) => (
               <YGroup.Item key={item.id}>
                 <ItemList
@@ -88,28 +88,26 @@ export const TableContainer = ({
 
           {copy && <RButton onPress={handleDuplicate}>Copy</RButton>}
 
-          <View style={styles.summarySection}>
-            <TotalWeightBox
-              label="Base Weight"
-              weight={totalBaseWeight}
-              unit={weightUnit}
-            />
-            <TotalWeightBox
-              label="Water + Food Weight"
-              weight={totalWaterWeight + totalFoodWeight}
-              unit={weightUnit}
-            />
-            <RSeparator style={styles.separator} />
-            <TotalWeightBox
-              label="Total Weight"
-              weight={totalWeight}
-              unit={weightUnit}
-            />
-            <WeightUnitDropdown
-              value={weightUnit}
-              onChange={(itemValue: string) => setWeightUnit(itemValue as any)}
-            />
-          </View>
+          <TotalWeightBox
+            label="Base Weight"
+            weight={totalBaseWeight}
+            unit={weightUnit}
+          />
+          <TotalWeightBox
+            label="Water + Food Weight"
+            weight={totalWaterWeight + totalFoodWeight}
+            unit={weightUnit}
+          />
+          <RSeparator style={styles.separator} />
+          <TotalWeightBox
+            label="Total Weight"
+            weight={totalWeight}
+            unit={weightUnit}
+          />
+          <WeightUnitDropdown
+            value={weightUnit}
+            onChange={(itemValue: string) => setWeightUnit(itemValue as any)}
+          />
         </View>
       ) : (
         <RText style={styles.noItemsText}>Add your First Item</RText>
@@ -129,17 +127,8 @@ const loadStyles = (theme: any) => {
       width: '100%',
     },
     layoutContainer: {
-      flexDirection: sm ? 'column' : 'row',
+      flexDirection: 'column',
       justifyContent: 'space-between',
-    },
-    itemsList: {
-      flex: 2,
-      marginRight: 20,
-      backgroundColor: currentTheme.colors.card,
-      width: '100%',
-      height: '100%',
-    },
-    summarySection: {
       marginTop: sm ? 20 : 0,
       flex: 1,
       padding: sm ? 10 : 5,
@@ -147,6 +136,7 @@ const loadStyles = (theme: any) => {
       elevation: 8,
       backgroundColor: currentTheme.colors.card,
     },
+
     separator: {
       marginVertical: 10,
     },
diff --git a/packages/app/modules/pack/screens/PackDetailsScreen.tsx b/packages/app/modules/pack/screens/PackDetailsScreen.tsx
index d70381958..6b7d2539e 100644
--- a/packages/app/modules/pack/screens/PackDetailsScreen.tsx
+++ b/packages/app/modules/pack/screens/PackDetailsScreen.tsx
@@ -28,9 +28,8 @@ import { ConnectionGate } from 'app/components/ConnectionGate';
 const SECTION = {
   TABLE: 'TABLE',
   CTA: 'CTA',
-  SCORECARD: 'SCORECARD',
+  SCORE_SIMILAR: 'SCORE_SIMILAR',
   CHAT: 'CHAT',
-  SIMILAR_PACKS: 'SIMILAR_PACKS',
 };
 
 export function PackDetailsScreen() {
@@ -53,6 +52,7 @@ export function PackDetailsScreen() {
   } = useFetchSinglePack(packId);
   const isAuthUserPack = useIsAuthUserPack(currentPack);
   const router = useRouter();
+  const { sm } = useResponsive();
 
   // const styles = useCustomStyles(loadStyles);
   const currentPackId = currentPack && currentPack.id;
@@ -85,6 +85,58 @@ export function PackDetailsScreen() {
             error={error as any}
             additionalComps={
               <>
+                <ConnectionGate mode="connected">
+                  {isAuthUserPack ? (
+                    <View
+                      style={{
+                        display: 'flex',
+                        flexDirection: 'row',
+                        width: '100%',
+                        justifyContent: 'center',
+                        gap: 5,
+                        marginBottom: 16, // Spacing below the buttons
+                      }}
+                    >
+                      <AddItemModal
+                        currentPackId={currentPackId || ''}
+                        currentPack={currentPack}
+                        isAddItemModalOpen={isAddItemModalOpen}
+                        setIsAddItemModalOpen={setIsAddItemModalOpen}
+                        setRefetch={() => setRefetch((prev) => !prev)}
+                      />
+                      <ImportItemModal
+                        currentPackId={currentPackId || ''}
+                        currentPack={currentPack}
+                        isImportItemModalOpen={isImportItemModalOpen}
+                        setIsImportItemModalOpen={setIsImportItemModalOpen}
+                      />
+                    </View>
+                  ) : (
+                    <RText
+                      style={{
+                        textAlign: 'center',
+                        fontWeight: 600,
+                        marginBottom: 16, // Spacing below the text
+                      }}
+                    >
+                      <RText style={{ marginRight: 2 }}>
+                        You don't have permission to edit this pack. You can
+                        create your own pack{' '}
+                      </RText>
+                      <TextLink href="/pack/create">
+                        <RText
+                          style={{
+                            color: 'blue',
+                            fontWeight: 700,
+                          }}
+                        >
+                          here
+                        </RText>
+                      </TextLink>
+                    </RText>
+                  )}
+                </ConnectionGate>
+
                 <FlatList
                   data={Object.entries(SECTION)}
                   contentContainerStyle={{ paddingBottom: 80 }}
@@ -99,99 +151,53 @@ export function PackDetailsScreen() {
                             hasPermissions={isAuthUserPack}
                           />
                         );
-                      case SECTION.CTA:
+                      case SECTION.SCORE_SIMILAR:
                         return (
-                          <ConnectionGate mode="connected">
-                            {isAuthUserPack ? (
-                              <View
-                                style={{
-                                  display: 'flex',
-                                  flexDirection: 'row',
-                                  width: '100%',
-                                  justifyContent: 'center',
-                                  gap: 5,
-                                }}
-                              >
-                                <AddItemModal
-                                  currentPackId={currentPackId || ''}
-                                  currentPack={currentPack}
-                                  isAddItemModalOpen={isAddItemModalOpen}
-                                  setIsAddItemModalOpen={setIsAddItemModalOpen}
-                                  // refetch={refetch}
-                                  setRefetch={() => setRefetch((prev) => !prev)}
-                                />
-                                <ImportItemModal
-                                  currentPackId={currentPackId || ''}
-                                  currentPack={currentPack}
-                                  isImportItemModalOpen={isImportItemModalOpen}
-                                  setIsImportItemModalOpen={
-                                    setIsImportItemModalOpen
-                                  }
-                                />
-                              </View>
-                            ) : (
-                              <RText
-                                style={{ textAlign: 'center', fontWeight: 600 }}
-                              >
-                                <RText style={{ marginRight: 2 }}>
-                                  You don't have permission to edit this pack.
-                                  You can create your own pack{' '}
-                                </RText>
-                                <TextLink href="/pack/create">
-                                  <RText
+                          <View
+                            style={{
+                              display: 'flex',
+                              flexDirection: sm ? 'column' : 'row',
+                              gap: 8,
+                            }}
+                          >
+                            <View style={{ flex: 1 }}>
+                              <ScoreContainer
+                                type="pack"
+                                data={currentPack}
+                                isOwner={isOwner}
+                              />
+                            </View>
+                            <View style={{ flex: 1 }}>
+                              <ConnectionGate mode="connected">
+                                <LargeCard
+                                  customStyle={{
+                                    width: '100%',
+                                    backgroundColor:
+                                      currentTheme.colors.secondaryBlue,
+                                    paddingBottom: 24,
+                                    marginTop: 28,
+                                    paddingTop: 0,
+                                  }}
+                                >
+                                  <RH3
                                     style={{
-                                      color: 'blue',
-                                      fontWeight: 700,
+                                      color: currentTheme.colors.text,
+                                      fontSize: 24,
+                                      alignSelf: 'center',
                                     }}
                                   >
-                                    here
-                                  </RText>
-                                </TextLink>
-                              </RText>
-                            )}
-                          </ConnectionGate>
-                        );
-                      case SECTION.SCORECARD:
-                        return (
-                          <View>
-                            <ScoreContainer
-                              type="pack"
-                              data={currentPack}
-                              isOwner={isOwner}
-                            />
+                                    Similar Packs
+                                  </RH3>
+                                  <FeedPreview
+                                    feedType="similarPacks"
+                                    id={currentPackId}
+                                  />
+                                </LargeCard>
+                              </ConnectionGate>
+                            </View>
                           </View>
                         );
-                      case SECTION.SIMILAR_PACKS:
-                        return (
-                          <ConnectionGate mode="connected">
-                            <LargeCard
-                              customStyle={{
-                                width: '100%',
-                                backgroundColor:
-                                  currentTheme.colors.secondaryBlue,
-                                paddingBottom: 24,
-                                marginTop: 20,
-                                paddingTop: 0,
-                              }}
-                            >
-                              <RH3
-                                style={{
-                                  // textTransform: 'capitalize',
-                                  color: currentTheme.colors.text,
-                                  fontSize: 24,
-                                  // fontWeight: 'bold',
-                                  alignSelf: 'center',
-                                }}
-                              >
-                                Similar Packs
-                              </RH3>
-                              <FeedPreview
-                                feedType="similarPacks"
-                                id={currentPackId}
-                              />
-                            </LargeCard>
-                          </ConnectionGate>
-                        );
+
                       default:
                         return null;
                     }
@@ -231,14 +237,6 @@ export function PackDetailsScreen() {
               alignSelf: 'flex-end',
             }}
           >
-            {/* <View
-            style={{
-              width: 50,
-              height: 50,
-              justifyContent: 'center',
-              alignItems: 'center',
-            }}
-          > */}
             <RIconButton
               backgroundColor="transparent"
               style={{
@@ -266,7 +264,6 @@ export function PackDetailsScreen() {
               }}
             />
           </View>
-          // </View>
         )}
       </ConnectionGate>
     </Layout>

From 44deed617a4b05ab226ca7091ac7b9aed92b2dd2 Mon Sep 17 00:00:00 2001
From: Taron <taron.aleksanyan.20@gmail.com>
Date: Mon, 9 Dec 2024 23:09:18 +0400
Subject: [PATCH 08/66] move destination screen component to module

---
 .../(stack)/destination/[destinationId].tsx   |   5 +-
 .../pages/destination/[destinationId].tsx     |   5 +-
 .../src/routes/destination/query.lazy.tsx     |   4 +-
 .../src/routes/destination/query.lazy.tsx     |   5 +-
 packages/app/components/destination/index.tsx | 258 ------------------
 5 files changed, 8 insertions(+), 269 deletions(-)
 delete mode 100644 packages/app/components/destination/index.tsx

diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/destination/[destinationId].tsx b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/destination/[destinationId].tsx
index c1c02dfe0..529e9fc6b 100644
--- a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/destination/[destinationId].tsx
+++ b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/destination/[destinationId].tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { Platform } from 'react-native';
-import { DestinationPage } from 'app/components/destination';
-// import DestinationPage from "../../components/destination";
+import { DestinationScreen } from 'app/modules/Map/screens/DestinationScreen';
 import { Stack } from 'expo-router';
 import Head from 'expo-router/head';
 
@@ -22,7 +21,7 @@ export default function Destination() {
           // https://reactnavigation.org/docs/headers#replacing-the-title-with-a-custom-component
         }}
       />
-      <DestinationPage />
+      <DestinationScreen />
     </>
   );
 }
diff --git a/apps/next/pages/destination/[destinationId].tsx b/apps/next/pages/destination/[destinationId].tsx
index 0ac4676fb..4a0ccfe11 100644
--- a/apps/next/pages/destination/[destinationId].tsx
+++ b/apps/next/pages/destination/[destinationId].tsx
@@ -1,13 +1,12 @@
-import { DestinationPage } from 'app/components/destination';
+import { DestinationScreen } from 'app/modules/Map/screens/DestinationScreen';
 import { AuthWrapper } from 'app/modules/auth';
-// import DestinationPage from "../../components/destination";
 
 // export const runtime = 'experimental-edge';
 
 export default function Destination() {
   return (
     <>
-      <DestinationPage />
+      <DestinationScreen />
     </>
   );
 }
diff --git a/apps/tauri/src/routes/destination/query.lazy.tsx b/apps/tauri/src/routes/destination/query.lazy.tsx
index e4b7a722e..ce7fc5817 100644
--- a/apps/tauri/src/routes/destination/query.lazy.tsx
+++ b/apps/tauri/src/routes/destination/query.lazy.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { DestinationPage } from 'app/components/destination';
+import { DestinationScreen } from 'app/modules/Map/screens/DestinationScreen';
 import { AuthWrapper } from 'app/modules/auth';
 // import DestinationPage from "../../components/destination";
 import { createLazyFileRoute } from '@tanstack/react-router';
@@ -11,7 +11,7 @@ export const Route = createLazyFileRoute('/destination/query')({
 export default function Destination() {
   return (
     <AuthWrapper>
-      <DestinationPage />
+      <DestinationScreen />
     </AuthWrapper>
   );
 }
diff --git a/apps/vite/src/routes/destination/query.lazy.tsx b/apps/vite/src/routes/destination/query.lazy.tsx
index e4b7a722e..cb8950030 100644
--- a/apps/vite/src/routes/destination/query.lazy.tsx
+++ b/apps/vite/src/routes/destination/query.lazy.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
-import { DestinationPage } from 'app/components/destination';
+import { DestinationScreen } from 'app/modules/Map/screens/DestinationScreen';
 import { AuthWrapper } from 'app/modules/auth';
-// import DestinationPage from "../../components/destination";
 import { createLazyFileRoute } from '@tanstack/react-router';
 
 export const Route = createLazyFileRoute('/destination/query')({
@@ -11,7 +10,7 @@ export const Route = createLazyFileRoute('/destination/query')({
 export default function Destination() {
   return (
     <AuthWrapper>
-      <DestinationPage />
+      <DestinationScreen />
     </AuthWrapper>
   );
 }
diff --git a/packages/app/components/destination/index.tsx b/packages/app/components/destination/index.tsx
deleted file mode 100644
index de53d61ef..000000000
--- a/packages/app/components/destination/index.tsx
+++ /dev/null
@@ -1,258 +0,0 @@
-import React, { Suspense } from 'react';
-import { Platform, ScrollView, View } from 'react-native';
-import { RButton, RText as OriginalRText } from '@packrat/ui';
-import useTheme from '../../hooks/useTheme';
-import LargeCard from '../card/LargeCard';
-import { Ionicons, MaterialCommunityIcons } from '@expo/vector-icons';
-import useCustomStyles from 'app/hooks/useCustomStyles';
-import {
-  useCurrentDestination,
-  useGetPhotonDetails,
-} from 'app/hooks/destination';
-import { useGEOLocationSearch } from 'app/hooks/geojson';
-import { PlacesAutocomplete } from '../PlacesAutocomplete/PlacesAutocomplete';
-import { useRouter } from 'app/hooks/router';
-import { WeatherData } from 'app/components/weather/WeatherData';
-import { Map } from 'app/modules/map';
-
-const RText: any = OriginalRText;
-
-const DestinationHeader = ({ geoJSON, selectedSearchResult }) => {
-  const styles = useCustomStyles(loadStyles);
-  const properties = {
-    ...geoJSON?.features[0]?.properties,
-    ...selectedSearchResult?.properties,
-  };
-
-  let {
-    country = 'N/A',
-    'is_in:country': is_in_country,
-    'is_in:country_code': is_in_country_code,
-    state = 'N/A',
-    'is_in:state': is_in_state,
-    place = 'N/A',
-    county = 'N/A',
-    name = 'N/A',
-  } = properties;
-
-  country = is_in_country || country;
-  state = is_in_state || state;
-
-  const languageNames = Object.keys(properties).reduce((result, key) => {
-    if (key.startsWith('name:')) {
-      result[key] = properties[key];
-    }
-    return result;
-  }, {});
-
-  return (
-    <View style={styles.headerContainer}>
-      <RText style={styles.headerText}>
-        {name !== 'N/A' ? name : 'Destination'}
-      </RText>
-      <RText style={styles.headerSubText}>
-        {county !== 'N/A' && `${county}, `}
-        {state !== 'N/A' && `${state}, `}
-        {country !== 'N/A' ? country : ''}
-      </RText>
-      <View style={styles.languageContainer}>
-        {Object.entries(languageNames).map(([key, value], index) => {
-          if (index < 3 && typeof value === 'string') {
-            return (
-              <RText key={key} style={styles.languageText}>
-                {`${(key.split(':')[1] || '').toUpperCase()}: ${value}`}
-              </RText>
-            );
-          }
-        })}
-      </View>
-    </View>
-  );
-};
-
-// TODO refactor component
-export const DestinationPage = () => {
-  const { currentTheme } = useTheme();
-  const styles = useCustomStyles(loadStyles);
-
-  const { currentDestination, latLng } = useCurrentDestination();
-
-  const [osm] = useGEOLocationSearch();
-  const {
-    data: geoJSON,
-    isLoading,
-    isError,
-  } = useGetPhotonDetails({
-    properties: {
-      osm_id: osm?.osmId,
-      osm_type: osm?.osmType,
-    } as any,
-  });
-
-  const shape = geoJSON;
-
-  interface SearchResult {
-    properties: {
-      osm_id: number;
-      osm_type: string;
-      name: string;
-    };
-    geometry: {
-      coordinates: [number, number];
-    };
-  }
-
-  const router = useRouter();
-
-  const handleSearchSelect = async (selectedResult: SearchResult) => {
-    try {
-      const { osm_id, osm_type, name } = selectedResult.properties;
-
-      if (!osm_id || !osm_type) {
-        console.error(
-          'No OSM ID or OSM type found in the selected search result',
-        );
-      } else {
-        router.replace({
-          pathname: '/destination/query',
-          query: {
-            osmType: osm_type,
-            osmId: osm_id,
-            name,
-          },
-        });
-      }
-    } catch (error) {
-      console.error('errorrrrrr', error);
-    }
-  };
-
-  const map = () => <Map shape={shape} />;
-
-  return (
-    <View style={styles.container}>
-      <ScrollView>
-        {isLoading && (
-          <RText
-            style={{ width: '90%', alignSelf: 'center', textAlign: 'center' }}
-          >
-            Loading...
-          </RText>
-        )}
-        <View style={{ flex: 1, marginBottom: 40 }}>
-          {!isLoading && !isError && (
-            <>
-              <View
-                style={{
-                  zIndex: 1,
-                  width: '100%',
-                  ...styles.headerContainer,
-                }}
-              >
-                {Platform.OS === 'web' ? (
-                  <PlacesAutocomplete
-                    onSelect={handleSearchSelect}
-                    placeholder={'Search by park, city, or trail'}
-                  />
-                ) : (
-                  <RButton
-                    style={{
-                      backgroundColor: currentTheme.colors.card,
-                      minWidth: '100%',
-                      height: 25,
-                      flexDirection: 'row',
-                    }}
-                    onPress={() => {
-                      router.push('/search');
-                    }}
-                  >
-                    <MaterialCommunityIcons
-                      name="magnify"
-                      size={24}
-                      color={currentTheme.colors.text}
-                    />
-                    <RText color={currentTheme.colors.text} opacity={0.6}>
-                      Search by park, city, or trail
-                    </RText>
-                  </RButton>
-                )}
-              </View>
-
-              <DestinationHeader
-                geoJSON={geoJSON}
-                selectedSearchResult={currentDestination}
-              />
-              <LargeCard
-                title="Map"
-                Icon={() => (
-                  <Ionicons
-                    name="location"
-                    size={24}
-                    color={currentTheme.colors.text}
-                  />
-                )}
-                ContentComponent={map}
-                contentProps={{ shape }}
-                type="map"
-              />
-              {/* <WeatherData latLng={latLng} /> */}
-            </>
-          )}
-        </View>
-      </ScrollView>
-    </View>
-  );
-};
-
-const loadStyles = (theme) => {
-  const { isDark, currentTheme } = theme;
-  return {
-    container: {
-      flex: 1,
-      justifyContent: 'flex-start',
-      padding: 20,
-      paddingBottom: 12,
-      paddingLeft: 16,
-      width: '100%',
-      backgroundColor: currentTheme.colors.background,
-    },
-    headerContainer: {
-      alignSelf: 'center',
-      width: '90%',
-      backgroundColor: currentTheme.colors.card,
-      padding: 25,
-      borderRadius: 10,
-      marginBottom: 20,
-      flexDirection: 'column',
-      alignItems: 'flex-start',
-    },
-    headerText: {
-      color: currentTheme.colors.text,
-      fontSize: 22,
-      fontWeight: 'bold',
-    },
-    headerSubText: {
-      color: isDark ? 'white' : currentTheme.colors.whiteDarkGrey,
-      fontSize: 16,
-      marginTop: 5,
-    },
-    languageContainer: {
-      flexWrap: 'wrap',
-      marginTop: 10,
-    },
-    languageText: {
-      color: isDark ? 'white' : currentTheme.colors.whiteDarkGrey,
-      fontSize: 14,
-      marginRight: 10,
-      marginBottom: 5, // Add margin to provide spacing between the language texts
-    },
-    cardContainer: {
-      flexDirection: 'column',
-      justifyContent: 'space-between',
-      marginBottom: 20,
-      width: '100%',
-      backgroundColor: isDark ? '#2D2D2D' : currentTheme.colors.white,
-      padding: 25,
-    },
-  };
-};

From f90d35b7fb18bc0a1b4b523bf631478f0857679d Mon Sep 17 00:00:00 2001
From: Anmol Verma <anmolverma2810@gmail.com>
Date: Tue, 10 Dec 2024 17:51:25 +0530
Subject: [PATCH 09/66] color changes for light theme

---
 packages/app/theme/index.ts | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/app/theme/index.ts b/packages/app/theme/index.ts
index 4b0fb307e..74dae3567 100644
--- a/packages/app/theme/index.ts
+++ b/packages/app/theme/index.ts
@@ -6,18 +6,18 @@ export const theme = {
   colors: {
     primary: '#0A84FF',
     background: Platform.OS === 'web' ? 'hsla(0, 0%, 96%, 1)' : '#fcfcfc',
-    secondaryBlue: Platform.OS === 'web' ?'#0C66A1' : '#cce5ff',
+    secondaryBlue: Platform.OS === 'web' ? '#0C66A1' : '#cce5ff',
     accentPurple: Platform.OS === 'web' ? '#6C63FF' : '#6C63FF',
     card: Platform.OS === 'web' ? '#f8f8f8' : '#f8f8f8',
     text: Platform.OS === 'web' ? '#333333' : '#333333',
-    border: Platform.OS === 'web' ? '#f3f3f3' : '#f3f3f3',  
+    border: Platform.OS === 'web' ? '#f3f3f3' : '#f3f3f3',
     notification: '#0A84FF',
     textGreen: Platform.OS === 'web' ? undefined : '#22c55e',
     tertiaryBlueGrey: Platform.OS === 'web' ? undefined : '#3B3B3B',
     error: '#FF453A',
     textPrimary: 'black',
-    textSecondary: '#EBEBF599',
-    tertiaryBlue:  Platform.OS === 'web' ? '#0C66A1' : '#0C66A1',
+    textSecondary: '#48484a',
+    tertiaryBlue: Platform.OS === 'web' ? '#0C66A1' : '#0C66A1',
     textDarkGrey: '#3B3B3B',
     cardIconColor: '#22c55e',
     iconColor: Platform.OS === 'web' ? '#FFFFFF' : '#003064',
@@ -31,7 +31,7 @@ export const theme = {
     floatingBg: '#f0f2f5',
     navbarBoxShadow: '0px 0px 30px 0px rgba(0, 0, 0, 0.29)',
     navbarPrimaryBackground: '#f6f6f6',
-    logo: 'rgb(12, 102, 161)'
+    logo: 'rgb(12, 102, 161)',
   },
   font: {
     headerFont: 56,
@@ -78,7 +78,7 @@ export const darkTheme = {
     floatingBg: '#232323',
     navbarBoxShadow: '0px 0px 30px 0px rgba(0, 0, 0, 0.29)',
     navbarPrimaryBackground: 'black',
-    logo: 'rgb(150, 199, 242)'
+    logo: 'rgb(150, 199, 242)',
   },
   font: {
     headerFont: 56,

From 614330e26d21fdc8502ddb7e39f18a8c966434ac Mon Sep 17 00:00:00 2001
From: Taron <taron.aleksanyan.20@gmail.com>
Date: Tue, 10 Dec 2024 17:02:38 +0400
Subject: [PATCH 10/66] add layout width

---
 packages/app/components/layout/Layout.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/app/components/layout/Layout.tsx b/packages/app/components/layout/Layout.tsx
index 7f125a0f1..64ea25b6b 100644
--- a/packages/app/components/layout/Layout.tsx
+++ b/packages/app/components/layout/Layout.tsx
@@ -17,6 +17,8 @@ const Layout = ({
           display: 'flex',
           backgroundColor: currentTheme.colors.background,
           flex: 1,
+          maxWidth: 1440,
+          margin: 'auto',
           justifyContent: Platform.OS === 'web' ? 'center' : 'flex-start',
           paddingTop: 20,
           paddingHorizontal: 16,

From 78638b20584054868a9dde7ac0b0cf5a19c26447 Mon Sep 17 00:00:00 2001
From: Taron <taron.aleksanyan.20@gmail.com>
Date: Tue, 10 Dec 2024 17:12:28 +0400
Subject: [PATCH 11/66] add generic components for new design

---
 .../app/components/AsyncView/AsyncView.tsx    | 35 ++++++++++++++++
 .../app/components/ErrorCard/ErrorCard.tsx    | 40 +++++++++++--------
 packages/ui/src/LayoutCard/LayoutCard.tsx     | 21 ++++++++++
 3 files changed, 79 insertions(+), 17 deletions(-)
 create mode 100644 packages/app/components/AsyncView/AsyncView.tsx
 create mode 100644 packages/ui/src/LayoutCard/LayoutCard.tsx

diff --git a/packages/app/components/AsyncView/AsyncView.tsx b/packages/app/components/AsyncView/AsyncView.tsx
new file mode 100644
index 000000000..f7474debe
--- /dev/null
+++ b/packages/app/components/AsyncView/AsyncView.tsx
@@ -0,0 +1,35 @@
+import { RSkeleton } from '@packrat/ui';
+import { ErrorCard } from 'app/components/ErrorCard';
+import { type ErrorCardProps } from 'app/components/ErrorCard/ErrorCard';
+import React, { type ReactNode, type FC } from 'react';
+
+interface AsyncViewProps {
+  isLoading: boolean;
+  isError: boolean;
+  loadingComponentProps?: { style: any };
+  errorComponentProps?: ErrorCardProps;
+  loadingComponent?: ReactNode;
+  errorComponent?: ReactNode;
+  children: ReactNode;
+}
+
+export const AsyncView: FC<AsyncViewProps> = ({
+  isLoading,
+  isError,
+  children,
+  loadingComponentProps = { style: { width: '100%', height: 30 } },
+  errorComponentProps,
+  loadingComponent: LoadingComponent,
+  errorComponent: ErrorComponent,
+}) => {
+  if (isLoading) {
+    return <>{LoadingComponent || <RSkeleton {...loadingComponentProps} />}</>;
+  }
+
+  if (isError) {
+    if (!errorComponentProps) return null;
+    return <>{ErrorComponent || <ErrorCard {...errorComponentProps} />}</>;
+  }
+
+  return <>{children}</>;
+};
diff --git a/packages/app/components/ErrorCard/ErrorCard.tsx b/packages/app/components/ErrorCard/ErrorCard.tsx
index 85f1503b4..36252594a 100644
--- a/packages/app/components/ErrorCard/ErrorCard.tsx
+++ b/packages/app/components/ErrorCard/ErrorCard.tsx
@@ -4,14 +4,18 @@ import { XCircle } from '@tamagui/lucide-icons';
 import useTheme from 'app/hooks/useTheme';
 import { View } from 'react-native';
 
-interface ErrorCardProps {
-  title: string;
+export interface ErrorCardProps {
+  title?: string;
   message: string;
 
-  onRetry: () => void;
+  onRetry?: () => void;
 }
 
-export const ErrorCard: FC<ErrorCardProps> = ({ message, title, onRetry }) => {
+export const ErrorCard: FC<ErrorCardProps> = ({
+  message,
+  title = 'Server error',
+  onRetry,
+}) => {
   const { currentTheme } = useTheme();
 
   return (
@@ -44,19 +48,21 @@ export const ErrorCard: FC<ErrorCardProps> = ({ message, title, onRetry }) => {
           </RText>
         </View>
       </XStack>
-      <RButton
-        style={{
-          padding: 0,
-          width: 72,
-          marginTop: 8,
-          backgroundColor: 'white',
-          color: currentTheme.colors.error,
-          fontWeight: 600,
-        }}
-        onPress={onRetry}
-      >
-        Retry
-      </RButton>
+      {typeof onRetry === 'function' && (
+        <RButton
+          style={{
+            padding: 0,
+            width: 72,
+            marginTop: 8,
+            backgroundColor: 'white',
+            color: currentTheme.colors.error,
+            fontWeight: 600,
+          }}
+          onPress={onRetry}
+        >
+          Retry
+        </RButton>
+      )}
     </YStack>
   );
 };
diff --git a/packages/ui/src/LayoutCard/LayoutCard.tsx b/packages/ui/src/LayoutCard/LayoutCard.tsx
new file mode 100644
index 000000000..a818f27e6
--- /dev/null
+++ b/packages/ui/src/LayoutCard/LayoutCard.tsx
@@ -0,0 +1,21 @@
+import React, { type FC } from 'react';
+import { View, type ViewProps } from 'tamagui';
+
+interface LayoutCardProps extends ViewProps {}
+
+export const LayoutCard: FC<LayoutCardProps> = ({ style, ...props }) => {
+  return (
+    <View
+      {...props}
+      style={[
+        {
+          border: '1px solid #e5e7eb',
+          backgroundColor: 'transparent',
+          padding: 24,
+          borderRadius: 8,
+        },
+        style,
+      ]}
+    />
+  );
+};

From 2538d080ae95063acf0cbfb87d120d849764bd2f Mon Sep 17 00:00:00 2001
From: Taron <taron.aleksanyan.20@gmail.com>
Date: Wed, 11 Dec 2024 01:53:34 +0400
Subject: [PATCH 12/66] destination screen

---
 packages/app/components/AsyncView/index.tsx   | 258 ++++++++++++++++
 .../components}/LayoutCard/LayoutCard.tsx     |   6 +-
 packages/app/components/LayoutCard/index.ts   |   1 +
 .../app/components/weather/WeatherCard.tsx    | 289 ++++--------------
 .../hooks/destination/useGetPhotonDetails.ts  |  18 +-
 packages/app/hooks/weather/useFetchWeather.ts |  10 +-
 .../DestinationScreen/DestinationScreen.tsx   | 206 +++++++++++++
 .../DestinationDetails/DestinationDetail.tsx  |  26 ++
 .../DestinationDetails/DestinationDetails.tsx | 100 ++++++
 .../components/DestinationDetails/index.ts    |   1 +
 .../DestinationSearchMobile.tsx               |  36 +++
 .../DestinationSearchMobile/index.ts          |   1 +
 .../map/screens/DestinationScreen/index.ts    |   1 +
 packages/app/screens/trip/createTrip.tsx      |   5 +-
 packages/ui/tsconfig.json                     |   6 +-
 15 files changed, 714 insertions(+), 250 deletions(-)
 create mode 100644 packages/app/components/AsyncView/index.tsx
 rename packages/{ui/src => app/components}/LayoutCard/LayoutCard.tsx (68%)
 create mode 100644 packages/app/components/LayoutCard/index.ts
 create mode 100644 packages/app/modules/map/screens/DestinationScreen/DestinationScreen.tsx
 create mode 100644 packages/app/modules/map/screens/DestinationScreen/components/DestinationDetails/DestinationDetail.tsx
 create mode 100644 packages/app/modules/map/screens/DestinationScreen/components/DestinationDetails/DestinationDetails.tsx
 create mode 100644 packages/app/modules/map/screens/DestinationScreen/components/DestinationDetails/index.ts
 create mode 100644 packages/app/modules/map/screens/DestinationScreen/components/DestinationSearchMobile/DestinationSearchMobile.tsx
 create mode 100644 packages/app/modules/map/screens/DestinationScreen/components/DestinationSearchMobile/index.ts
 create mode 100644 packages/app/modules/map/screens/DestinationScreen/index.ts

diff --git a/packages/app/components/AsyncView/index.tsx b/packages/app/components/AsyncView/index.tsx
new file mode 100644
index 000000000..cc161ddcd
--- /dev/null
+++ b/packages/app/components/AsyncView/index.tsx
@@ -0,0 +1,258 @@
+import React, { Suspense } from 'react';
+import { Platform, ScrollView, View } from 'react-native';
+import { RButton, RText as OriginalRText } from '@packrat/ui';
+import useTheme from '../../hooks/useTheme';
+import LargeCard from '../card/LargeCard';
+import { Ionicons, MaterialCommunityIcons } from '@expo/vector-icons';
+import useCustomStyles from 'app/hooks/useCustomStyles';
+import {
+  useCurrentDestination,
+  useGetPhotonDetails,
+} from 'app/hooks/destination';
+import { useGEOLocationSearch } from 'app/hooks/geojson';
+import { PlacesAutocomplete } from '../PlacesAutocomplete/PlacesAutocomplete';
+import { useRouter } from 'app/hooks/router';
+import { WeatherData } from 'app/components/weather/WeatherData';
+import { Map } from 'app/modules/map';
+
+const RText: any = OriginalRText;
+
+const DestinationHeader = ({ geoJSON, selectedSearchResult }) => {
+  const styles = useCustomStyles(loadStyles);
+  const properties = {
+    ...geoJSON?.features[0]?.properties,
+    ...selectedSearchResult?.properties,
+  };
+
+  let {
+    country = 'N/A',
+    'is_in:country': is_in_country,
+    'is_in:country_code': is_in_country_code,
+    state = 'N/A',
+    'is_in:state': is_in_state,
+    place = 'N/A',
+    county = 'N/A',
+    name = 'N/A',
+  } = properties;
+
+  country = is_in_country || country;
+  state = is_in_state || state;
+
+  const languageNames = Object.keys(properties).reduce((result, key) => {
+    if (key.startsWith('name:')) {
+      result[key] = properties[key];
+    }
+    return result;
+  }, {});
+
+  return (
+    <View style={styles.headerContainer}>
+      <RText style={styles.headerText}>
+        {name !== 'N/A' ? name : 'Destination'}
+      </RText>
+      <RText style={styles.headerSubText}>
+        {county !== 'N/A' && `${county}, `}
+        {state !== 'N/A' && `${state}, `}
+        {country !== 'N/A' ? country : ''}
+      </RText>
+      <View style={styles.languageContainer}>
+        {Object.entries(languageNames).map(([key, value], index) => {
+          if (index < 3 && typeof value === 'string') {
+            return (
+              <RText key={key} style={styles.languageText}>
+                {`${(key.split(':')[1] || '').toUpperCase()}: ${value}`}
+              </RText>
+            );
+          }
+        })}
+      </View>
+    </View>
+  );
+};
+
+// TODO refactor component
+export const DestinationScreen = () => {
+  const { currentTheme } = useTheme();
+  const styles = useCustomStyles(loadStyles);
+
+  const { currentDestination, latLng } = useCurrentDestination();
+
+  const [osm] = useGEOLocationSearch();
+  const {
+    data: geoJSON,
+    isLoading,
+    isError,
+  } = useGetPhotonDetails({
+    properties: {
+      osm_id: osm?.osmId,
+      osm_type: osm?.osmType,
+    } as any,
+  });
+
+  const shape = geoJSON;
+
+  interface SearchResult {
+    properties: {
+      osm_id: number;
+      osm_type: string;
+      name: string;
+    };
+    geometry: {
+      coordinates: [number, number];
+    };
+  }
+
+  const router = useRouter();
+
+  const handleSearchSelect = async (selectedResult: SearchResult) => {
+    try {
+      const { osm_id, osm_type, name } = selectedResult.properties;
+
+      if (!osm_id || !osm_type) {
+        console.error(
+          'No OSM ID or OSM type found in the selected search result',
+        );
+      } else {
+        router.replace({
+          pathname: '/destination/query',
+          query: {
+            osmType: osm_type,
+            osmId: osm_id,
+            name,
+          },
+        });
+      }
+    } catch (error) {
+      console.error('errorrrrrr', error);
+    }
+  };
+
+  const map = () => <Map shape={shape} />;
+
+  return (
+    <View style={styles.container}>
+      <ScrollView>
+        {isLoading && (
+          <RText
+            style={{ width: '90%', alignSelf: 'center', textAlign: 'center' }}
+          >
+            Loading...
+          </RText>
+        )}
+        <View style={{ flex: 1, marginBottom: 40 }}>
+          {!isLoading && !isError && (
+            <>
+              <View
+                style={{
+                  zIndex: 1,
+                  width: '100%',
+                  ...styles.headerContainer,
+                }}
+              >
+                {Platform.OS === 'web' ? (
+                  <PlacesAutocomplete
+                    onSelect={handleSearchSelect}
+                    placeholder={'Search by park, city, or trail'}
+                  />
+                ) : (
+                  <RButton
+                    style={{
+                      backgroundColor: currentTheme.colors.card,
+                      minWidth: '100%',
+                      height: 25,
+                      flexDirection: 'row',
+                    }}
+                    onPress={() => {
+                      router.push('/search');
+                    }}
+                  >
+                    <MaterialCommunityIcons
+                      name="magnify"
+                      size={24}
+                      color={currentTheme.colors.text}
+                    />
+                    <RText color={currentTheme.colors.text} opacity={0.6}>
+                      Search by park, city, or trail
+                    </RText>
+                  </RButton>
+                )}
+              </View>
+
+              <DestinationHeader
+                geoJSON={geoJSON}
+                selectedSearchResult={currentDestination}
+              />
+              <LargeCard
+                title="Map"
+                Icon={() => (
+                  <Ionicons
+                    name="location"
+                    size={24}
+                    color={currentTheme.colors.text}
+                  />
+                )}
+                ContentComponent={map}
+                contentProps={{ shape }}
+                type="map"
+              />
+              {/* <WeatherData latLng={latLng} /> */}
+            </>
+          )}
+        </View>
+      </ScrollView>
+    </View>
+  );
+};
+
+const loadStyles = (theme) => {
+  const { isDark, currentTheme } = theme;
+  return {
+    container: {
+      flex: 1,
+      justifyContent: 'flex-start',
+      padding: 20,
+      paddingBottom: 12,
+      paddingLeft: 16,
+      width: '100%',
+      backgroundColor: currentTheme.colors.background,
+    },
+    headerContainer: {
+      alignSelf: 'center',
+      width: '90%',
+      backgroundColor: currentTheme.colors.card,
+      padding: 25,
+      borderRadius: 10,
+      marginBottom: 20,
+      flexDirection: 'column',
+      alignItems: 'flex-start',
+    },
+    headerText: {
+      color: currentTheme.colors.text,
+      fontSize: 22,
+      fontWeight: 'bold',
+    },
+    headerSubText: {
+      color: isDark ? 'white' : currentTheme.colors.whiteDarkGrey,
+      fontSize: 16,
+      marginTop: 5,
+    },
+    languageContainer: {
+      flexWrap: 'wrap',
+      marginTop: 10,
+    },
+    languageText: {
+      color: isDark ? 'white' : currentTheme.colors.whiteDarkGrey,
+      fontSize: 14,
+      marginRight: 10,
+      marginBottom: 5, // Add margin to provide spacing between the language texts
+    },
+    cardContainer: {
+      flexDirection: 'column',
+      justifyContent: 'space-between',
+      marginBottom: 20,
+      width: '100%',
+      backgroundColor: isDark ? '#2D2D2D' : currentTheme.colors.white,
+      padding: 25,
+    },
+  };
+};
diff --git a/packages/ui/src/LayoutCard/LayoutCard.tsx b/packages/app/components/LayoutCard/LayoutCard.tsx
similarity index 68%
rename from packages/ui/src/LayoutCard/LayoutCard.tsx
rename to packages/app/components/LayoutCard/LayoutCard.tsx
index a818f27e6..36cf6dd73 100644
--- a/packages/ui/src/LayoutCard/LayoutCard.tsx
+++ b/packages/app/components/LayoutCard/LayoutCard.tsx
@@ -1,16 +1,20 @@
 import React, { type FC } from 'react';
 import { View, type ViewProps } from 'tamagui';
+import useTheme from 'app/hooks/useTheme';
 
 interface LayoutCardProps extends ViewProps {}
 
 export const LayoutCard: FC<LayoutCardProps> = ({ style, ...props }) => {
+  const { currentTheme } = useTheme();
+
   return (
     <View
       {...props}
       style={[
         {
+          backgroundColor: currentTheme.colors.card,
+          boxShadow: '0px 4px 8px rgba(0,0,0,0.1)',
           border: '1px solid #e5e7eb',
-          backgroundColor: 'transparent',
           padding: 24,
           borderRadius: 8,
         },
diff --git a/packages/app/components/LayoutCard/index.ts b/packages/app/components/LayoutCard/index.ts
new file mode 100644
index 000000000..0428002cf
--- /dev/null
+++ b/packages/app/components/LayoutCard/index.ts
@@ -0,0 +1 @@
+export * from './LayoutCard';
diff --git a/packages/app/components/weather/WeatherCard.tsx b/packages/app/components/weather/WeatherCard.tsx
index 8561603d3..99cf2e541 100644
--- a/packages/app/components/weather/WeatherCard.tsx
+++ b/packages/app/components/weather/WeatherCard.tsx
@@ -9,12 +9,19 @@ import {
   FontAwesome5,
   Octicons,
 } from '@expo/vector-icons';
-import { RImage, RStack as OriginalRStack, RText } from '@packrat/ui';
+import {
+  RImage,
+  RStack as OriginalRStack,
+  RText,
+  YStack,
+  XStack,
+} from '@packrat/ui';
 import useCustomStyles from 'app/hooks/useCustomStyles';
 import { useDate } from 'app/hooks/weather/useDate';
-import { WeatherResult } from 'hooks/weather';
+import { type WeatherResult } from 'hooks/weather';
 import { getCurrentUTCDate, getUTCDateFromStr } from 'app/utils/dates';
 import { format, isAfter, isEqual } from 'date-fns';
+import { Separator } from 'tamagui';
 
 const RStack: any = OriginalRStack;
 
@@ -41,260 +48,93 @@ export default function WeatherCard({
   }, [weatherToday]);
 
   return (
-    <RStack
-      $sm={{
-        borderRadius: 6,
-        flexDirection: 'column',
-        width: '90%',
-      }}
-      $gtSm={{
-        borderRadius: 12,
-        flexDirection: 'row',
-        width: '90%',
-      }}
-      flexDirection="row"
-      flexWrap="wrap"
-      style={styles.desktopContainer}
-    >
-      <RStack
-        style={{
-          flexDirection: 'row',
-          gap: 15,
-          alignItems: 'center',
-          alignSelf: 'center',
-        }}
-        flexDirection="row"
-        flexWrap="wrap"
-        flex={0.5}
-      >
-        <Octicons
-          name="broadcast"
-          size={18}
-          color={currentTheme.colors.cardIconColor}
-        />
+    <YStack style={{ width: '100%', gap: 16 }}>
+      <YStack style={{ gap: 8 }}>
         <RText
           style={{
             color: currentTheme.colors.text,
-            fontSize: 18,
+            fontSize: 24,
             fontWeight: 600,
           }}
         >
-          Weather
+          Weather Forecast
         </RText>
-      </RStack>
-      <RStack
-        $sm={{
-          flexDirection: 'column',
-          width: '100%',
-          justifyContent: 'space-between',
-        }}
-        $gtSm={{
-          paddingRight: 0,
-        }}
-        flex={0.5}
-        style={styles.card}
-      >
-        <RText
-          style={{
-            color: currentTheme.colors.weatherIcon,
-            fontSize: 18,
-            fontWeight: 600,
-          }}
-        >
-          {dayNumToString(day)}
-        </RText>
-        <RText>{dateFormatted} ( UTC )</RText>
-        <RStack
-          style={{
-            flexDirection: 'row',
-            gap: 5,
-            alignItems: 'center',
-          }}
-        >
-          <FontAwesome name="map-marker" size={16} color="black" />
-          {location ? (
-            <RText>{`${location?.name}, ${location?.country}`}</RText>
-          ) : null}
-        </RStack>
-
-        <RStack>
-          <RImage
-            source={{
-              uri: getWeatherIconURI(currentWeather.icon),
-              width: 62,
-              height: 62,
-            }}
-            alt="weatherIcon"
-          />
-        </RStack>
-
-        <RStack>
-          <RText
-            style={{
-              color: currentTheme.colors.weatherIcon,
-              fontSize: 18,
-              fontWeight: 600,
-            }}
-          >
-            {convertToCelsius(currentWeather.temp)}
-          </RText>
-          <RText style={{ fontWeight: 700 }}>
-            {currentWeather.description}
-          </RText>
-        </RStack>
-      </RStack>
-
-      <RStack
-        flex={1}
-        style={{ gap: 10, padding: 0 }}
-        $sm={{
-          width: '100%',
-        }}
-      >
-        <RStack style={styles.card}>
-          <RStack style={styles.weatherInfo}>
-            <RStack style={styles.iconsSection}>
-              <FontAwesome5
-                name="cloud-rain"
-                size={18}
-                color={currentTheme.colors.weatherIcon}
-              />
+        <XStack style={{ justifyContent: 'space-between', gap: 8 }}>
+          <XStack style={{ gap: 8 }}>
+            <RImage
+              source={{
+                uri: getWeatherIconURI(currentWeather.icon),
+                width: 36,
+                height: 36,
+              }}
+              alt="weatherIcon"
+            />
+            <YStack>
               <RText
                 style={{
-                  color: currentTheme.colors.weatherIcon,
+                  fontSize: 24,
                   fontWeight: 600,
                 }}
               >
-                PRECIPITATION
+                {convertToCelsius(currentWeather.temp)}
               </RText>
-            </RStack>
-            <RText>
-              {currentWeather.precipitation
-                ? `${currentWeather.precipitation}mm`
-                : 'Not available'}
-            </RText>
-          </RStack>
-          <RStack style={styles.weatherInfo}>
-            <RStack style={styles.iconsSection}>
-              <Feather
-                name="droplet"
-                size={18}
-                color={currentTheme.colors.weatherIcon}
-              />
               <RText
                 style={{
-                  color: currentTheme.colors.weatherIcon,
-                  fontWeight: 600,
+                  color: currentTheme.colors.textSecondary,
                 }}
               >
-                HUMIDITY
+                {currentWeather.description}
               </RText>
-            </RStack>
-            <RText>{currentWeather.humidity}%</RText>
-          </RStack>
-          <RStack style={styles.weatherInfo}>
-            <RStack style={styles.iconsSection}>
-              <Feather
-                name="wind"
-                size={18}
-                color={currentTheme.colors.weatherIcon}
-              />
+            </YStack>
+          </XStack>
+          <XStack style={{ alignItems: 'center', gap: 4 }}>
+            <Feather
+              name="droplet"
+              size={16}
+              color={currentTheme.colors.text}
+            />
+            <RText style={{ fontSize: 16 }}>{currentWeather.humidity}%</RText>
+          </XStack>
+          <XStack style={{ alignItems: 'center', gap: 4 }}>
+            <Feather name="wind" size={16} color={currentTheme.colors.text} />
+            <RText style={{ fontSize: 16 }}>
+              {convertToKmh(currentWeather.wind)}
+            </RText>
+          </XStack>
+        </XStack>
+      </YStack>
+      <Separator />
+      <XStack style={{ justifyContent: 'space-between' }}>
+        {weatherWeek.map(({ day, avgTemp }, index) => {
+          return (
+            <YStack key={index} style={styles.weatherInfo}>
               <RText
                 style={{
-                  color: currentTheme.colors.weatherIcon,
-                  fontWeight: 600,
+                  color: currentTheme.colors.textSecondary,
+                  fontSize: 14,
                 }}
               >
-                WIND
+                {day}
               </RText>
-            </RStack>
-            <RText>{convertToKmh(currentWeather.wind)}</RText>
-          </RStack>
-        </RStack>
-
-        <RStack
-          $sm={{
-            height: '100%',
-            flexDirection: 'column',
-          }}
-          $gtSm={{
-            height: '100%',
-            flexDirection: 'row',
-          }}
-          flexDirection="row"
-          flexWrap="wrap"
-          flex={0.5}
-          style={styles.cardContainer}
-        >
-          {restSegments.map((segment, i) => {
-            const weatherIconUrl = getWeatherIconURI(segment.icon);
-
-            return (
-              <RStack
-                key={i}
-                $sm={{
-                  flexDirection: 'row',
-                  justifyContent: 'space-between',
-                  width: '100%',
+              <RText
+                style={{
+                  fontSize: 14,
+                  fontWeight: 600,
                 }}
-                style={styles.weatherCard}
               >
-                <RImage
-                  source={{
-                    uri: weatherIconUrl,
-                    width: 52,
-                    height: 52,
-                  }}
-                  alt="waetherIcon"
-                />
-                <RText>
-                  {format(getUTCDateFromStr(segment.date), 'HH:mm')} ( UTC )
-                </RText>
-                <RText style={{ fontWeight: 700 }}>
-                  {convertToCelsius(segment.temp)}
-                </RText>
-              </RStack>
-            );
-          })}
-        </RStack>
-      </RStack>
-
-      <RStack
-        $sm={{
-          width: '100%',
-        }}
-        flex={1}
-        justifyContent="space-around"
-        backgroundColor={styles.tempColor.backgroundColor}
-        style={styles.card}
-      >
-        {weatherWeek.map(({ day, avgTemp }, index) => {
-          return (
-            <RStack key={index} style={styles.weatherInfo}>
-              <RText style={{ color: styles.tempColor.color }}>{day}</RText>
-              <RText style={{ color: styles.tempColor.color }}>
                 {convertToCelsius(avgTemp)}
               </RText>
-            </RStack>
+            </YStack>
           );
         })}
-      </RStack>
-    </RStack>
+      </XStack>
+    </YStack>
   );
 }
 
 const loadStyles = (theme) => {
   const { currentTheme } = theme;
   return {
-    desktopContainer: {
-      gap: 15,
-      alignItems: 'center',
-      justifyContent: 'space-around',
-      backgroundColor: currentTheme.colors.card,
-      padding: 30,
-      alignSelf: 'center',
-    },
-
     card: {
       gap: 10,
       borderColor: currentTheme.colors.border,
@@ -319,13 +159,6 @@ const loadStyles = (theme) => {
       shadowColor: 'black',
       justifyContent: 'space-between',
     },
-
-    weatherInfo: {
-      flexDirection: 'row',
-      justifyContent: 'space-between',
-      alignItems: 'center',
-      gap: 10,
-    },
     weatherCard: {
       alignItems: 'center',
       justifyContent: 'space-between',
diff --git a/packages/app/hooks/destination/useGetPhotonDetails.ts b/packages/app/hooks/destination/useGetPhotonDetails.ts
index 01547fc5d..ea1174931 100644
--- a/packages/app/hooks/destination/useGetPhotonDetails.ts
+++ b/packages/app/hooks/destination/useGetPhotonDetails.ts
@@ -1,19 +1,23 @@
 import { queryTrpc } from '../../trpc';
 
-export const useGetPhotonDetails = ({
-  properties,
-}: {
-  properties: { osm_id: string | number; osm_type: string };
-}) => {
+export const useGetPhotonDetails = (
+  {
+    properties,
+  }: {
+    properties: { osm_id: string | number; osm_type: string };
+  },
+  refetchOnFocus = true,
+) => {
   const { osm_id = null, osm_type = null } = properties || {};
   const enabled = Boolean(osm_id && osm_type);
 
-  const { isLoading, isError, data, error } =
+  const { isLoading, isFetching, isError, data, error } =
     queryTrpc.getPhotonDetails.useQuery(
       { id: osm_id as string, type: osm_type as string },
       {
         enabled,
+        refetchOnWindowFocus: refetchOnFocus,
       },
     );
-  return { isLoading, isError, data, error };
+  return { isLoading, isFetching, isError, data, error };
 };
diff --git a/packages/app/hooks/weather/useFetchWeather.ts b/packages/app/hooks/weather/useFetchWeather.ts
index aff1fec5e..e54c0ced0 100644
--- a/packages/app/hooks/weather/useFetchWeather.ts
+++ b/packages/app/hooks/weather/useFetchWeather.ts
@@ -3,15 +3,7 @@ import { queryTrpc } from '../../trpc';
 import { isToday, getDay } from 'date-fns';
 import { getCurrentUTCDate, getUTCDateFromStr } from 'app/utils/dates';
 
-const weekdays = [
-  'Sunday',
-  'Monday',
-  'Tuesday',
-  'Wednesday',
-  'Thursday',
-  'Friday',
-  'Saturday',
-] as const;
+const weekdays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'] as const;
 interface WeatherToday {
   date: string;
   temp: number;
diff --git a/packages/app/modules/map/screens/DestinationScreen/DestinationScreen.tsx b/packages/app/modules/map/screens/DestinationScreen/DestinationScreen.tsx
new file mode 100644
index 000000000..ba6c0a288
--- /dev/null
+++ b/packages/app/modules/map/screens/DestinationScreen/DestinationScreen.tsx
@@ -0,0 +1,206 @@
+import React, { Suspense } from 'react';
+import { Platform, ScrollView, View } from 'react-native';
+import {
+  RText as OriginalRText,
+  RButton,
+  RStack,
+  XStack,
+  YStack,
+} from '@packrat/ui';
+import { LayoutCard } from 'app/components/LayoutCard';
+import useTheme from 'app/hooks/useTheme';
+import useCustomStyles from 'app/hooks/useCustomStyles';
+import {
+  useCurrentDestination,
+  useGetPhotonDetails,
+} from 'app/hooks/destination';
+import { useGEOLocationSearch } from 'app/hooks/geojson';
+import { PlacesAutocomplete } from 'app/components/PlacesAutocomplete/PlacesAutocomplete';
+import { useRouter } from 'app/hooks/router';
+import { WeatherData } from 'app/components/weather/WeatherData';
+import { Map } from 'app/modules/map';
+import { DestinationDetails } from './components/DestinationDetails';
+import Layout from 'app/components/layout/Layout';
+import { DestinationSearchMobile } from './components/DestinationSearchMobile';
+import { AsyncView } from 'app/components/AsyncView/AsyncView';
+import isObject from 'lodash/isObject';
+import merge from 'lodash/merge';
+import useResponsive from 'app/hooks/useResponsive';
+
+const RText: any = OriginalRText;
+
+interface SearchResult {
+  properties: {
+    osm_id: number;
+    osm_type: string;
+    name: string;
+  };
+  geometry: {
+    coordinates: [number, number];
+  };
+}
+
+export const DestinationScreen = () => {
+  const styles = useCustomStyles(loadStyles);
+  const { gtSm } = useResponsive();
+
+  const {
+    currentDestination,
+    latLng,
+    isLoading: isDetailsLoading,
+    isError: isDetailsError,
+  } = useCurrentDestination();
+  const [osm] = useGEOLocationSearch();
+  const {
+    data: shape,
+    isFetching: isMapLoading,
+    isError: isMapError,
+  } = useGetPhotonDetails(
+    {
+      properties: {
+        osm_id: osm?.osmId,
+        osm_type: osm?.osmType,
+      } as any,
+    },
+    false,
+  );
+
+  const destinationProperties = merge(
+    getValidObject(shape?.features?.[0]?.properties),
+    getValidObject(currentDestination?.properties),
+  );
+
+  const router = useRouter();
+
+  const handleSearchSelect = async (selectedResult: SearchResult) => {
+    try {
+      const { osm_id, osm_type, name } = selectedResult.properties;
+
+      if (!osm_id || !osm_type) {
+        console.error(
+          'No OSM ID or OSM type found in the selected search result',
+        );
+      } else {
+        router.replace({
+          pathname: '/destination/query',
+          query: {
+            osmType: osm_type,
+            osmId: osm_id,
+            name,
+          },
+        });
+      }
+    } catch (error) {
+      console.error('errorrrrrr', error);
+    }
+  };
+
+  const detailsSection = (
+    <YStack style={{ width: '100%', gap: 16 }}>
+      <AsyncView
+        isError={isDetailsError}
+        errorComponentProps={{ message: 'Failed to fetch destination details' }}
+        isLoading={isDetailsLoading}
+      >
+        <DestinationDetails destinationProperties={destinationProperties} />
+      </AsyncView>
+      <LayoutCard>
+        <WeatherData latLng={latLng} />
+      </LayoutCard>
+    </YStack>
+  );
+
+  return (
+    <Layout>
+      <View style={styles.container}>
+        <ScrollView contentContainerStyle={{ width: '100%' }}>
+          <View style={{ padding: 2 }}>
+            {Platform.OS === 'web' ? (
+              <PlacesAutocomplete
+                onSelect={handleSearchSelect}
+                placeholder={'Search by park, city, or trail'}
+              />
+            ) : (
+              <DestinationSearchMobile />
+            )}
+          </View>
+          <XStack
+            style={{
+              gap: 16,
+              flexDirection: gtSm ? 'row' : 'column',
+              position: 'relative',
+            }}
+          >
+            <AsyncView
+              isError={isMapError}
+              errorComponentProps={{
+                message: 'Failed to fetch map polygon',
+              }}
+              isLoading={isMapLoading}
+            >
+              <View style={{ flex: 1, width: gtSm ? 'auto' : '100%' }}>
+                <Map shape={shape} />
+              </View>
+            </AsyncView>
+            <View style={{ width: gtSm ? 350 : '100%' }}>{detailsSection}</View>
+          </XStack>
+        </ScrollView>
+      </View>
+    </Layout>
+  );
+};
+
+const loadStyles = (theme) => {
+  const { isDark, currentTheme } = theme;
+  return {
+    container: {
+      width: '100%',
+      maxWidth: 1440,
+      padding: 16,
+    },
+    headerContainer: {
+      alignSelf: 'center',
+      width: '90%',
+      backgroundColor: currentTheme.colors.card,
+      padding: 25,
+      borderRadius: 10,
+      marginBottom: 20,
+      flexDirection: 'column',
+      alignItems: 'flex-start',
+    },
+    headerText: {
+      color: currentTheme.colors.text,
+      fontSize: 22,
+      fontWeight: 'bold',
+    },
+    headerSubText: {
+      color: isDark ? 'white' : currentTheme.colors.whiteDarkGrey,
+      fontSize: 16,
+      marginTop: 5,
+    },
+    languageContainer: {
+      flexWrap: 'wrap',
+      marginTop: 10,
+    },
+    languageText: {
+      color: isDark ? 'white' : currentTheme.colors.whiteDarkGrey,
+      fontSize: 14,
+      marginRight: 10,
+      marginBottom: 5, // Add margin to provide spacing between the language texts
+    },
+    cardContainer: {
+      flexDirection: 'column',
+      justifyContent: 'space-between',
+      marginBottom: 20,
+      width: '100%',
+      backgroundColor: isDark ? '#2D2D2D' : currentTheme.colors.white,
+      padding: 25,
+    },
+  };
+};
+
+const getValidObject = (obj: any) => {
+  if (!isObject(obj)) return {};
+
+  return obj;
+};
diff --git a/packages/app/modules/map/screens/DestinationScreen/components/DestinationDetails/DestinationDetail.tsx b/packages/app/modules/map/screens/DestinationScreen/components/DestinationDetails/DestinationDetail.tsx
new file mode 100644
index 000000000..c3dfbd37d
--- /dev/null
+++ b/packages/app/modules/map/screens/DestinationScreen/components/DestinationDetails/DestinationDetail.tsx
@@ -0,0 +1,26 @@
+import React, { type ReactNode, type FC } from 'react';
+import { RText, XStack, YStack } from '@packrat/ui';
+
+interface DestinationDetailProps {
+  icon: ReactNode;
+  label: string;
+  value: string | null;
+}
+
+export const DestinationDetail: FC<DestinationDetailProps> = ({
+  label,
+  value,
+  icon,
+}) => {
+  return (
+    <XStack space="$3" style={{ minWidth: 140, alignItems: 'center' }}>
+      {icon}
+      <YStack>
+        <RText style={{ fontSize: 14, lineHeight: 16 }}>{label}</RText>
+        <RText style={{ fontSize: 16, fontWeight: 500, lineHeight: 24 }}>
+          {value || 'N / A'}
+        </RText>
+      </YStack>
+    </XStack>
+  );
+};
diff --git a/packages/app/modules/map/screens/DestinationScreen/components/DestinationDetails/DestinationDetails.tsx b/packages/app/modules/map/screens/DestinationScreen/components/DestinationDetails/DestinationDetails.tsx
new file mode 100644
index 000000000..1c9511466
--- /dev/null
+++ b/packages/app/modules/map/screens/DestinationScreen/components/DestinationDetails/DestinationDetails.tsx
@@ -0,0 +1,100 @@
+import React, { type FC } from 'react';
+import { RText, XStack, YStack, RStack } from '@packrat/ui';
+import { DestinationDetail } from './DestinationDetail';
+import { MapPin, Globe, Building2, Hash } from '@tamagui/lucide-icons';
+import useTheme from 'app/hooks/useTheme';
+import { LayoutCard } from 'app/components/LayoutCard';
+
+interface DestinationDetailsProps {
+  destinationProperties: any;
+}
+export const DestinationDetails: FC<DestinationDetailsProps> = ({
+  destinationProperties,
+}) => {
+  const { currentTheme } = useTheme();
+  const details = getDestinationInfo(destinationProperties);
+
+  return (
+    <LayoutCard style={{ width: '100%' }}>
+      <YStack style={{ gap: 16 }}>
+        <XStack
+          style={{ width: '100%', justifyContent: 'space-between', gap: 8 }}
+        >
+          <RText
+            ellipsizeMode="tail"
+            numberOfLines={1}
+            style={{ flex: 1, fontSize: 18, fontWeight: 600 }}
+          >
+            {destinationProperties?.int_name || destinationProperties?.name}
+          </RText>
+          <RText
+            ellipsizeMode="tail"
+            numberOfLines={1}
+            style={{
+              backgroundColor: '#e6e6e6',
+              fontWeight: 600,
+              color: '#000000',
+              borderRadius: 8,
+              paddingLeft: 10,
+              paddingRight: 10,
+              width: 'auto',
+              fontSize: 12,
+              textAlign: 'center',
+            }}
+          >
+            {destinationProperties?.osm_value}
+          </RText>
+        </XStack>
+        <RStack style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 16 }}>
+          <DestinationDetail
+            label="Country"
+            value={details.country}
+            icon={<Globe size={20} />}
+          />
+          <DestinationDetail
+            label="State"
+            value={details.state}
+            icon={<MapPin size={20} />}
+          />
+          <DestinationDetail
+            label="Locality"
+            value={details.locality}
+            icon={<Building2 size={20} />}
+          />
+          <DestinationDetail
+            label="OSM ID"
+            value={details.osmId}
+            icon={<Hash size={20} />}
+          />
+        </RStack>
+      </YStack>
+    </LayoutCard>
+  );
+};
+
+const getDestinationInfo = (destinationProperties: any) => {
+  if (!destinationProperties) {
+    return null;
+  }
+
+  return {
+    country:
+      destinationProperties?.['is_in:country'] ||
+      destinationProperties?.country,
+    state: destinationProperties?.state,
+    locality: getPlaceLocality(destinationProperties),
+    osmId: destinationProperties?.osm_id,
+  };
+};
+
+const getPlaceLocality = (destinationProperties: any) => {
+  if (['city', 'village', 'town'].includes(destinationProperties.osm_value)) {
+    return destinationProperties['name:en'];
+  }
+
+  return (
+    destinationProperties?.city ||
+    destinationProperties?.town ||
+    destinationProperties?.village
+  );
+};
diff --git a/packages/app/modules/map/screens/DestinationScreen/components/DestinationDetails/index.ts b/packages/app/modules/map/screens/DestinationScreen/components/DestinationDetails/index.ts
new file mode 100644
index 000000000..e0c081aff
--- /dev/null
+++ b/packages/app/modules/map/screens/DestinationScreen/components/DestinationDetails/index.ts
@@ -0,0 +1 @@
+export * from './DestinationDetails';
diff --git a/packages/app/modules/map/screens/DestinationScreen/components/DestinationSearchMobile/DestinationSearchMobile.tsx b/packages/app/modules/map/screens/DestinationScreen/components/DestinationSearchMobile/DestinationSearchMobile.tsx
new file mode 100644
index 000000000..bba0fa8b5
--- /dev/null
+++ b/packages/app/modules/map/screens/DestinationScreen/components/DestinationSearchMobile/DestinationSearchMobile.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import useTheme from 'app/hooks/useTheme';
+import { RButton, RText as OriginalRText } from '@packrat/ui';
+import { useRouter } from 'app/hooks/router';
+
+import { MaterialCommunityIcons } from '@expo/vector-icons';
+
+const RText: any = OriginalRText;
+
+export const DestinationSearchMobile = () => {
+  const { currentTheme } = useTheme();
+  const router = useRouter();
+
+  return (
+    <RButton
+      style={{
+        backgroundColor: currentTheme.colors.card,
+        minWidth: '100%',
+        height: 25,
+        flexDirection: 'row',
+      }}
+      onPress={() => {
+        router.push('/search');
+      }}
+    >
+      <MaterialCommunityIcons
+        name="magnify"
+        size={24}
+        color={currentTheme.colors.text}
+      />
+      <RText color={currentTheme.colors.text} opacity={0.6}>
+        Search by park, city, or trail
+      </RText>
+    </RButton>
+  );
+};
diff --git a/packages/app/modules/map/screens/DestinationScreen/components/DestinationSearchMobile/index.ts b/packages/app/modules/map/screens/DestinationScreen/components/DestinationSearchMobile/index.ts
new file mode 100644
index 000000000..6882eb76a
--- /dev/null
+++ b/packages/app/modules/map/screens/DestinationScreen/components/DestinationSearchMobile/index.ts
@@ -0,0 +1 @@
+export * from './DestinationSearchMobile';
diff --git a/packages/app/modules/map/screens/DestinationScreen/index.ts b/packages/app/modules/map/screens/DestinationScreen/index.ts
new file mode 100644
index 000000000..242afb749
--- /dev/null
+++ b/packages/app/modules/map/screens/DestinationScreen/index.ts
@@ -0,0 +1 @@
+export * from './DestinationScreen';
diff --git a/packages/app/screens/trip/createTrip.tsx b/packages/app/screens/trip/createTrip.tsx
index 7173de576..554f1970a 100644
--- a/packages/app/screens/trip/createTrip.tsx
+++ b/packages/app/screens/trip/createTrip.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { RStack } from '@packrat/ui';
-import { FlatList, ScrollView, View } from 'react-native';
+import { FlatList, ScrollView } from 'react-native';
 import { theme } from '../../theme';
 import { useRef } from 'react';
 import { GearList } from '../../components/GearList/GearList';
@@ -106,9 +106,6 @@ function Trips() {
             data={flatListData}
             keyExtractor={keyExtractor}
             renderItem={renderItem}
-            CellRendererComponent={({ style, index, ...props }) => (
-              <View style={[style, { zIndex: 20000 - index }]} {...props} />
-            )}
           />
         </RStack>
       </RStack>
diff --git a/packages/ui/tsconfig.json b/packages/ui/tsconfig.json
index f1e93e21d..63e6afb86 100644
--- a/packages/ui/tsconfig.json
+++ b/packages/ui/tsconfig.json
@@ -1,6 +1,10 @@
 {
   "extends": "../../tsconfig.base", // not set up yet
-  "include": ["src", "../../apps/expo/app/Bugsnag.ts"],
+  "include": [
+    "src",
+    "../../apps/expo/app/Bugsnag.ts",
+    "../app/components/LayoutCard"
+  ],
   "compilerOptions": {
     "composite": true,
     "jsx": "react-jsx"

From 03239a88367b4479fbb947d965c21b58ea531315 Mon Sep 17 00:00:00 2001
From: Taron <taron.aleksanyan.20@gmail.com>
Date: Wed, 11 Dec 2024 11:32:40 +0400
Subject: [PATCH 13/66] fix destination screen on mobile

---
 .../(stack)/destination/[destinationId].tsx       |  2 +-
 .../app/components/SearchInput/SearchInput.tsx    |  2 --
 packages/app/components/layout/Layout.tsx         |  1 +
 .../components/DownloadMapBtn/DownloadMapBtn.tsx  |  1 +
 .../DestinationScreen/DestinationScreen.tsx       | 15 +++++++++++----
 .../DestinationSearchMobile.tsx                   |  2 +-
 .../MapButtonsOverLay.native.tsx                  |  2 +-
 7 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/destination/[destinationId].tsx b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/destination/[destinationId].tsx
index 529e9fc6b..006332acb 100644
--- a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/destination/[destinationId].tsx
+++ b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/destination/[destinationId].tsx
@@ -1,6 +1,6 @@
 import React from 'react';
+import { DestinationScreen } from 'app/modules/map/screens/DestinationScreen';
 import { Platform } from 'react-native';
-import { DestinationScreen } from 'app/modules/Map/screens/DestinationScreen';
 import { Stack } from 'expo-router';
 import Head from 'expo-router/head';
 
diff --git a/packages/app/components/SearchInput/SearchInput.tsx b/packages/app/components/SearchInput/SearchInput.tsx
index d238353e2..e3fefda49 100644
--- a/packages/app/components/SearchInput/SearchInput.tsx
+++ b/packages/app/components/SearchInput/SearchInput.tsx
@@ -289,8 +289,6 @@ const useSearchOptions = (
 
 const loadStyles = () => ({
   container: {
-    marginTop: 20,
-    marginBottom: 15,
     width: '100%',
     display: 'flex',
     justifyContent: 'center',
diff --git a/packages/app/components/layout/Layout.tsx b/packages/app/components/layout/Layout.tsx
index 64ea25b6b..8dddba0cc 100644
--- a/packages/app/components/layout/Layout.tsx
+++ b/packages/app/components/layout/Layout.tsx
@@ -21,6 +21,7 @@ const Layout = ({
           margin: 'auto',
           justifyContent: Platform.OS === 'web' ? 'center' : 'flex-start',
           paddingTop: 20,
+          paddingBottom: Platform.OS !== 'web' ? 44 : undefined,
           paddingHorizontal: 16,
           marginBottom: 20,
           alignItems: 'center',
diff --git a/packages/app/modules/map/components/DownloadMapBtn/DownloadMapBtn.tsx b/packages/app/modules/map/components/DownloadMapBtn/DownloadMapBtn.tsx
index 8655ed9aa..38168b096 100644
--- a/packages/app/modules/map/components/DownloadMapBtn/DownloadMapBtn.tsx
+++ b/packages/app/modules/map/components/DownloadMapBtn/DownloadMapBtn.tsx
@@ -48,6 +48,7 @@ export const DownloadMapBtn: FC<MapStylePickerProps> = ({
       </MapActionBtn>
       <BaseModal
         title="Download"
+        showTrigger={false}
         onClose={onClose}
         onOpen={onOpen}
         isOpen={isModalOpen}
diff --git a/packages/app/modules/map/screens/DestinationScreen/DestinationScreen.tsx b/packages/app/modules/map/screens/DestinationScreen/DestinationScreen.tsx
index ba6c0a288..754630c24 100644
--- a/packages/app/modules/map/screens/DestinationScreen/DestinationScreen.tsx
+++ b/packages/app/modules/map/screens/DestinationScreen/DestinationScreen.tsx
@@ -124,9 +124,10 @@ export const DestinationScreen = () => {
               <DestinationSearchMobile />
             )}
           </View>
-          <XStack
+          <RStack
             style={{
-              gap: 16,
+              gap: 24,
+              marginTop: 16,
               flexDirection: gtSm ? 'row' : 'column',
               position: 'relative',
             }}
@@ -138,12 +139,18 @@ export const DestinationScreen = () => {
               }}
               isLoading={isMapLoading}
             >
-              <View style={{ flex: 1, width: gtSm ? 'auto' : '100%' }}>
+              <View
+                style={{
+                  flex: gtSm ? 1 : undefined,
+                  width: gtSm ? 'auto' : '100%',
+                  height: Platform.OS === 'web' ? 'auto' : 300,
+                }}
+              >
                 <Map shape={shape} />
               </View>
             </AsyncView>
             <View style={{ width: gtSm ? 350 : '100%' }}>{detailsSection}</View>
-          </XStack>
+          </RStack>
         </ScrollView>
       </View>
     </Layout>
diff --git a/packages/app/modules/map/screens/DestinationScreen/components/DestinationSearchMobile/DestinationSearchMobile.tsx b/packages/app/modules/map/screens/DestinationScreen/components/DestinationSearchMobile/DestinationSearchMobile.tsx
index bba0fa8b5..22ca34a4f 100644
--- a/packages/app/modules/map/screens/DestinationScreen/components/DestinationSearchMobile/DestinationSearchMobile.tsx
+++ b/packages/app/modules/map/screens/DestinationScreen/components/DestinationSearchMobile/DestinationSearchMobile.tsx
@@ -16,7 +16,7 @@ export const DestinationSearchMobile = () => {
       style={{
         backgroundColor: currentTheme.colors.card,
         minWidth: '100%',
-        height: 25,
+        height: 40,
         flexDirection: 'row',
       }}
       onPress={() => {
diff --git a/packages/app/modules/map/widgets/MapButtonsOverLay/MapButtonsOverLay.native.tsx b/packages/app/modules/map/widgets/MapButtonsOverLay/MapButtonsOverLay.native.tsx
index 3a1ff48ab..161c1be22 100644
--- a/packages/app/modules/map/widgets/MapButtonsOverLay/MapButtonsOverLay.native.tsx
+++ b/packages/app/modules/map/widgets/MapButtonsOverLay/MapButtonsOverLay.native.tsx
@@ -15,7 +15,7 @@ export const MapButtonsOverlay: FC<MapButtonsOverlayProps> = ({
         <DownloadMapBtn
           currentBounds={currentBounds}
           shape={shape}
-          style={{ position: 'absolute', bottom: 80, left: 10 }}
+          style={{ position: 'absolute', bottom: 10, left: 10 }}
         />
       ) : null}
       {children}

From d4720e85dd1209603f9143314a4e8bd59123c7ae Mon Sep 17 00:00:00 2001
From: Taron <taron.aleksanyan.20@gmail.com>
Date: Wed, 11 Dec 2024 12:15:23 +0400
Subject: [PATCH 14/66] fix asyncview import

---
 packages/app/components/AsyncView/index.tsx | 259 +-------------------
 1 file changed, 1 insertion(+), 258 deletions(-)

diff --git a/packages/app/components/AsyncView/index.tsx b/packages/app/components/AsyncView/index.tsx
index cc161ddcd..e07e94d22 100644
--- a/packages/app/components/AsyncView/index.tsx
+++ b/packages/app/components/AsyncView/index.tsx
@@ -1,258 +1 @@
-import React, { Suspense } from 'react';
-import { Platform, ScrollView, View } from 'react-native';
-import { RButton, RText as OriginalRText } from '@packrat/ui';
-import useTheme from '../../hooks/useTheme';
-import LargeCard from '../card/LargeCard';
-import { Ionicons, MaterialCommunityIcons } from '@expo/vector-icons';
-import useCustomStyles from 'app/hooks/useCustomStyles';
-import {
-  useCurrentDestination,
-  useGetPhotonDetails,
-} from 'app/hooks/destination';
-import { useGEOLocationSearch } from 'app/hooks/geojson';
-import { PlacesAutocomplete } from '../PlacesAutocomplete/PlacesAutocomplete';
-import { useRouter } from 'app/hooks/router';
-import { WeatherData } from 'app/components/weather/WeatherData';
-import { Map } from 'app/modules/map';
-
-const RText: any = OriginalRText;
-
-const DestinationHeader = ({ geoJSON, selectedSearchResult }) => {
-  const styles = useCustomStyles(loadStyles);
-  const properties = {
-    ...geoJSON?.features[0]?.properties,
-    ...selectedSearchResult?.properties,
-  };
-
-  let {
-    country = 'N/A',
-    'is_in:country': is_in_country,
-    'is_in:country_code': is_in_country_code,
-    state = 'N/A',
-    'is_in:state': is_in_state,
-    place = 'N/A',
-    county = 'N/A',
-    name = 'N/A',
-  } = properties;
-
-  country = is_in_country || country;
-  state = is_in_state || state;
-
-  const languageNames = Object.keys(properties).reduce((result, key) => {
-    if (key.startsWith('name:')) {
-      result[key] = properties[key];
-    }
-    return result;
-  }, {});
-
-  return (
-    <View style={styles.headerContainer}>
-      <RText style={styles.headerText}>
-        {name !== 'N/A' ? name : 'Destination'}
-      </RText>
-      <RText style={styles.headerSubText}>
-        {county !== 'N/A' && `${county}, `}
-        {state !== 'N/A' && `${state}, `}
-        {country !== 'N/A' ? country : ''}
-      </RText>
-      <View style={styles.languageContainer}>
-        {Object.entries(languageNames).map(([key, value], index) => {
-          if (index < 3 && typeof value === 'string') {
-            return (
-              <RText key={key} style={styles.languageText}>
-                {`${(key.split(':')[1] || '').toUpperCase()}: ${value}`}
-              </RText>
-            );
-          }
-        })}
-      </View>
-    </View>
-  );
-};
-
-// TODO refactor component
-export const DestinationScreen = () => {
-  const { currentTheme } = useTheme();
-  const styles = useCustomStyles(loadStyles);
-
-  const { currentDestination, latLng } = useCurrentDestination();
-
-  const [osm] = useGEOLocationSearch();
-  const {
-    data: geoJSON,
-    isLoading,
-    isError,
-  } = useGetPhotonDetails({
-    properties: {
-      osm_id: osm?.osmId,
-      osm_type: osm?.osmType,
-    } as any,
-  });
-
-  const shape = geoJSON;
-
-  interface SearchResult {
-    properties: {
-      osm_id: number;
-      osm_type: string;
-      name: string;
-    };
-    geometry: {
-      coordinates: [number, number];
-    };
-  }
-
-  const router = useRouter();
-
-  const handleSearchSelect = async (selectedResult: SearchResult) => {
-    try {
-      const { osm_id, osm_type, name } = selectedResult.properties;
-
-      if (!osm_id || !osm_type) {
-        console.error(
-          'No OSM ID or OSM type found in the selected search result',
-        );
-      } else {
-        router.replace({
-          pathname: '/destination/query',
-          query: {
-            osmType: osm_type,
-            osmId: osm_id,
-            name,
-          },
-        });
-      }
-    } catch (error) {
-      console.error('errorrrrrr', error);
-    }
-  };
-
-  const map = () => <Map shape={shape} />;
-
-  return (
-    <View style={styles.container}>
-      <ScrollView>
-        {isLoading && (
-          <RText
-            style={{ width: '90%', alignSelf: 'center', textAlign: 'center' }}
-          >
-            Loading...
-          </RText>
-        )}
-        <View style={{ flex: 1, marginBottom: 40 }}>
-          {!isLoading && !isError && (
-            <>
-              <View
-                style={{
-                  zIndex: 1,
-                  width: '100%',
-                  ...styles.headerContainer,
-                }}
-              >
-                {Platform.OS === 'web' ? (
-                  <PlacesAutocomplete
-                    onSelect={handleSearchSelect}
-                    placeholder={'Search by park, city, or trail'}
-                  />
-                ) : (
-                  <RButton
-                    style={{
-                      backgroundColor: currentTheme.colors.card,
-                      minWidth: '100%',
-                      height: 25,
-                      flexDirection: 'row',
-                    }}
-                    onPress={() => {
-                      router.push('/search');
-                    }}
-                  >
-                    <MaterialCommunityIcons
-                      name="magnify"
-                      size={24}
-                      color={currentTheme.colors.text}
-                    />
-                    <RText color={currentTheme.colors.text} opacity={0.6}>
-                      Search by park, city, or trail
-                    </RText>
-                  </RButton>
-                )}
-              </View>
-
-              <DestinationHeader
-                geoJSON={geoJSON}
-                selectedSearchResult={currentDestination}
-              />
-              <LargeCard
-                title="Map"
-                Icon={() => (
-                  <Ionicons
-                    name="location"
-                    size={24}
-                    color={currentTheme.colors.text}
-                  />
-                )}
-                ContentComponent={map}
-                contentProps={{ shape }}
-                type="map"
-              />
-              {/* <WeatherData latLng={latLng} /> */}
-            </>
-          )}
-        </View>
-      </ScrollView>
-    </View>
-  );
-};
-
-const loadStyles = (theme) => {
-  const { isDark, currentTheme } = theme;
-  return {
-    container: {
-      flex: 1,
-      justifyContent: 'flex-start',
-      padding: 20,
-      paddingBottom: 12,
-      paddingLeft: 16,
-      width: '100%',
-      backgroundColor: currentTheme.colors.background,
-    },
-    headerContainer: {
-      alignSelf: 'center',
-      width: '90%',
-      backgroundColor: currentTheme.colors.card,
-      padding: 25,
-      borderRadius: 10,
-      marginBottom: 20,
-      flexDirection: 'column',
-      alignItems: 'flex-start',
-    },
-    headerText: {
-      color: currentTheme.colors.text,
-      fontSize: 22,
-      fontWeight: 'bold',
-    },
-    headerSubText: {
-      color: isDark ? 'white' : currentTheme.colors.whiteDarkGrey,
-      fontSize: 16,
-      marginTop: 5,
-    },
-    languageContainer: {
-      flexWrap: 'wrap',
-      marginTop: 10,
-    },
-    languageText: {
-      color: isDark ? 'white' : currentTheme.colors.whiteDarkGrey,
-      fontSize: 14,
-      marginRight: 10,
-      marginBottom: 5, // Add margin to provide spacing between the language texts
-    },
-    cardContainer: {
-      flexDirection: 'column',
-      justifyContent: 'space-between',
-      marginBottom: 20,
-      width: '100%',
-      backgroundColor: isDark ? '#2D2D2D' : currentTheme.colors.white,
-      padding: 25,
-    },
-  };
-};
+export * from './AsyncView';

From 6f3a827891ed24667c378634e32a7e2bfd506da9 Mon Sep 17 00:00:00 2001
From: Anmol Verma <anmolverma2810@gmail.com>
Date: Wed, 11 Dec 2024 15:56:28 +0530
Subject: [PATCH 15/66] enhance ui

---
 .../(stack)/destination/[destinationId].tsx   |   2 +-
 packages/app/components/ScoreContainer.tsx    |   5 +-
 packages/app/components/card/CustomCard.tsx   |   4 +-
 .../modules/item/components/AddItemModal.tsx  |  24 +-
 .../item/components/ImportItemModal.tsx       |  27 ++-
 .../pack/components/PackTable/ItemCard.tsx    | 171 ++++++++++++++
 .../pack/components/PackTable/ItemList.tsx    | 219 ------------------
 .../components/PackTable/TableContainer.tsx   | 169 ++++++++++----
 .../pack/screens/PackDetailsScreen.tsx        |  91 ++++----
 9 files changed, 400 insertions(+), 312 deletions(-)
 create mode 100644 packages/app/modules/pack/components/PackTable/ItemCard.tsx

diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/destination/[destinationId].tsx b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/destination/[destinationId].tsx
index 529e9fc6b..32fa287a1 100644
--- a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/destination/[destinationId].tsx
+++ b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/destination/[destinationId].tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Platform } from 'react-native';
-import { DestinationScreen } from 'app/modules/Map/screens/DestinationScreen';
+import { DestinationScreen } from '../../../../../../../../packages/app/modules/map/screens/DestinationScreen';
 import { Stack } from 'expo-router';
 import Head from 'expo-router/head';
 
diff --git a/packages/app/components/ScoreContainer.tsx b/packages/app/components/ScoreContainer.tsx
index 994589ac5..c81446f12 100644
--- a/packages/app/components/ScoreContainer.tsx
+++ b/packages/app/components/ScoreContainer.tsx
@@ -236,12 +236,9 @@ const loadStyles = (theme: any) => {
       marginVertical: 15,
       padding: 26,
       marginTop: 25,
-      // borderColor: currentTheme.colors.border,
-      // borderWidth: 2,
-      borderColor: currentTheme.colors.border,
+      borderColor: currentTheme.colors.cardBorderPrimary,
       borderWidth: 1,
       borderRadius: 10,
-      boxShadow: '0px 4px 8px rgba(0,0,0,0.1)',
       backgroundColor: currentTheme.colors.background,
     },
     hStack: {
diff --git a/packages/app/components/card/CustomCard.tsx b/packages/app/components/card/CustomCard.tsx
index 26e3edc83..a44fbf5f1 100644
--- a/packages/app/components/card/CustomCard.tsx
+++ b/packages/app/components/card/CustomCard.tsx
@@ -120,7 +120,7 @@ const loadStyles = (theme) => {
   return {
     mainContainer: {
       borderColor: currentTheme.colors.border,
-      borderWidth: 1,
+      borderWidth: 0,
       flex: 1,
       gap: 45,
       justifyContent: 'space-between',
@@ -128,7 +128,7 @@ const loadStyles = (theme) => {
       alignItems: 'center',
       marginBottom: 20,
       border: '1',
-      boxShadow: '0px 4px 8px rgba(0,0,0,0.1)',
+      // boxShadow: '0px 4px 8px rgba(0,0,0,0.1)',
       alignSelf: 'center',
     },
   };
diff --git a/packages/app/modules/item/components/AddItemModal.tsx b/packages/app/modules/item/components/AddItemModal.tsx
index 875e956be..d3eacbad9 100644
--- a/packages/app/modules/item/components/AddItemModal.tsx
+++ b/packages/app/modules/item/components/AddItemModal.tsx
@@ -1,6 +1,9 @@
+import React from 'react';
 import { AddItem } from './AddItem';
 import useTheme from 'app/hooks/useTheme';
 import { BaseModal } from '@packrat/ui';
+import { RText } from '@packrat/ui';
+import { View } from 'react-native';
 
 interface AddItemModalProps {
   currentPackId: string;
@@ -23,10 +26,29 @@ export const AddItemModal = ({
 }: AddItemModalProps) => {
   const { currentTheme } = useTheme();
 
+  const CustomTriggerButton = (
+    <View
+      style={{
+        width: '100%',
+        alignItems: 'center',
+      }}
+    >
+      <RText
+        style={{
+          color: currentTheme.colors.text,
+          fontWeight: 'bold',
+          fontSize: 20,
+        }}
+      >
+        + Add Item
+      </RText>
+    </View>
+  );
+
   return (
     <BaseModal
       title="Add Item"
-      trigger="Add Item"
+      triggerComponent={CustomTriggerButton}
       showTrigger={showTrigger}
       footerButtons={[
         {
diff --git a/packages/app/modules/item/components/ImportItemModal.tsx b/packages/app/modules/item/components/ImportItemModal.tsx
index 89cf41624..7eecf7eea 100644
--- a/packages/app/modules/item/components/ImportItemModal.tsx
+++ b/packages/app/modules/item/components/ImportItemModal.tsx
@@ -1,5 +1,7 @@
+import React from 'react';
 import { ImportItem } from './ImportItem';
-import { BaseModal } from '@packrat/ui';
+import { BaseModal, RStack, RText } from '@packrat/ui';
+import useTheme from 'app/hooks/useTheme';
 
 interface ImportItemModalProps {
   currentPackId: string;
@@ -14,10 +16,31 @@ export const ImportItemModal = ({
   isImportItemModalOpen,
   setIsImportItemModalOpen,
 }: ImportItemModalProps) => {
+  const { currentTheme } = useTheme();
+
+  const CustomTriggerButton = (
+    <RStack
+      style={{
+        width: '100%',
+        alignItems: 'center',
+      }}
+    >
+      <RText
+        style={{
+          color: currentTheme.colors.text,
+          fontWeight: 'bold',
+          fontSize: 20,
+        }}
+      >
+        Import Item
+      </RText>
+    </RStack>
+  );
+
   return (
     <BaseModal
       title="Import Item"
-      trigger="Import Item"
+      triggerComponent={CustomTriggerButton}
       footerComponent={undefined}
       isOpen={isImportItemModalOpen}
       onOpen={() => setIsImportItemModalOpen(true)}
diff --git a/packages/app/modules/pack/components/PackTable/ItemCard.tsx b/packages/app/modules/pack/components/PackTable/ItemCard.tsx
new file mode 100644
index 000000000..c24ddfc77
--- /dev/null
+++ b/packages/app/modules/pack/components/PackTable/ItemCard.tsx
@@ -0,0 +1,171 @@
+import React from 'react';
+import { RStack, RText, RIconButton, RInput } from '@packrat/ui';
+import { AntDesign, MaterialIcons } from '@expo/vector-icons';
+import useTheme from 'app/hooks/useTheme';
+
+interface ItemCardProps {
+  item: any;
+  value: number;
+  decrease: () => void;
+  increase: () => void;
+  setValue: (value: number) => void;
+  submit: (value: number) => void;
+  hasError: boolean;
+  handleDeleteItem: (itemId: string) => void;
+  isActionsEnabled: boolean;
+}
+
+export const ItemCard = ({
+  item,
+  value,
+  decrease,
+  increase,
+  setValue,
+  submit,
+  hasError,
+  handleDeleteItem,
+  isActionsEnabled,
+}: ItemCardProps) => {
+  const { currentTheme } = useTheme();
+
+  return (
+    <RStack
+      style={{
+        backgroundColor: currentTheme.colors.background,
+        padding: 16,
+        borderRadius: 8,
+        marginBottom: 10,
+        borderWidth: 1,
+        borderColor: currentTheme.colors.cardBorderPrimary,
+      }}
+    >
+      <RStack
+        style={{
+          flexDirection: 'row',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+        }}
+      >
+        <RText
+          style={{
+            fontWeight: 'bold',
+            fontSize: 16,
+            color: currentTheme.colors.text,
+          }}
+        >
+          {item.name}
+        </RText>
+        <RText
+          style={{
+            fontSize: 14,
+            color: currentTheme.colors.textSecondary,
+          }}
+        >
+          {item.category.name}
+        </RText>
+      </RStack>
+      <RStack style={{ marginTop: 10 }}>
+        <RText
+          style={{
+            fontSize: 14,
+            color: currentTheme.colors.textSecondary,
+          }}
+        >
+          {`Weight: ${item.weight} ${item.unit}`}
+        </RText>
+        {isActionsEnabled ? (
+          <RStack
+            style={{
+              flexDirection: 'row',
+              alignItems: 'center',
+              justifyContent: 'space-between',
+              marginTop: 10,
+            }}
+          >
+            <RStack
+              style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+              }}
+            >
+              <RIconButton
+                onPress={decrease}
+                style={{
+                  width: 25,
+                  height: 25,
+                  padding: 0,
+                }}
+              >
+                <AntDesign
+                  name="minus"
+                  size={14}
+                  color={currentTheme.colors.text}
+                />
+              </RIconButton>
+              <RInput
+                value={String(value)}
+                onChangeText={(text) => setValue(Number(text))}
+                onBlur={(e) => submit(Number(e.target.value))}
+                style={{
+                  width: 50,
+                  padding: 0,
+                  textAlign: 'center',
+                  height: 30,
+                  color: currentTheme.colors.text,
+                  fontSize: 12,
+                  borderWidth: 1,
+                  borderColor: hasError ? 'red' : currentTheme.colors.border,
+                  marginHorizontal: 8,
+                }}
+              />
+              <RIconButton
+                onPress={increase}
+                style={{
+                  width: 25,
+                  height: 25,
+                  padding: 0,
+                }}
+              >
+                <AntDesign
+                  name="plus"
+                  size={14}
+                  color={currentTheme.colors.text}
+                />
+              </RIconButton>
+            </RStack>
+            <RStack
+              style={{
+                marginTop: 10,
+                flexDirection: 'row',
+                justifyContent: 'flex-end',
+              }}
+            >
+              <RIconButton
+                onPress={() => handleDeleteItem(item.id)}
+                style={{
+                  backgroundColor: 'transparent',
+                }}
+              >
+                <MaterialIcons
+                  name="delete"
+                  size={24}
+                  color={currentTheme.colors.text}
+                />
+              </RIconButton>
+            </RStack>
+          </RStack>
+        ) : (
+          <RText
+            style={{
+              fontSize: 12,
+              color: currentTheme.colors.text,
+              marginTop: 10,
+            }}
+          >
+            Quantity: {value}
+          </RText>
+        )}
+      </RStack>
+    </RStack>
+  );
+};
diff --git a/packages/app/modules/pack/components/PackTable/ItemList.tsx b/packages/app/modules/pack/components/PackTable/ItemList.tsx
index 8952c5340..37c99bdf3 100644
--- a/packages/app/modules/pack/components/PackTable/ItemList.tsx
+++ b/packages/app/modules/pack/components/PackTable/ItemList.tsx
@@ -27,227 +27,8 @@ export const ItemList = ({
       onSubmitQuantity(item.id, value),
     );
 
-  const renderHeader = () => (
-    <RStack
-      style={{
-        flexDirection: 'row',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        paddingVertical: 10,
-        borderBottomWidth: 1,
-        borderBottomColor: currentTheme.colors.border,
-      }}
-    >
-      <RText
-        style={{
-          flexBasis: '25%',
-          fontWeight: 'bold',
-          color: currentTheme.colors.text,
-        }}
-      >
-        Name
-      </RText>
-      <RText
-        style={{
-          flexBasis: '20%',
-          textAlign: 'center',
-          fontWeight: 'bold',
-          color: currentTheme.colors.text,
-        }}
-      >
-        Category
-      </RText>
-      <RText
-        style={{
-          flexBasis: '20%',
-          textAlign: 'center',
-          fontWeight: 'bold',
-          color: currentTheme.colors.text,
-        }}
-      >
-        Weight
-      </RText>
-      <RText
-        style={{
-          flexBasis: '25%',
-          textAlign: 'center',
-          fontWeight: 'bold',
-          color: currentTheme.colors.text,
-        }}
-      >
-        Quantity
-      </RText>
-      {isActionsEnabled && (
-        <RText
-          style={{
-            flexBasis: '10%',
-            textAlign: 'center',
-            fontWeight: 'bold',
-            color: currentTheme.colors.text,
-          }}
-        >
-          Actions
-        </RText>
-      )}
-    </RStack>
-  );
-
-  if (responsive.sm) {
-    return (
-      <>
-        <RStack
-          style={{
-            backgroundColor: currentTheme.colors.background,
-            padding: 16,
-            borderRadius: 8,
-            marginBottom: 10,
-            shadowOpacity: 0.2,
-            shadowRadius: 4,
-            shadowOffset: { width: 0, height: 2 },
-            elevation: 3,
-          }}
-        >
-          <RStack
-            style={{
-              flexDirection: 'row',
-              justifyContent: 'space-between',
-              alignItems: 'center',
-            }}
-          >
-            <RText
-              style={{
-                fontWeight: 'bold',
-                fontSize: responsive.xxs ? 14 : 16,
-                color: currentTheme.colors.text,
-              }}
-            >
-              {item.name}
-            </RText>
-            <RText
-              style={{
-                fontSize: responsive.xxs ? 12 : 14,
-                color: currentTheme.colors.textSecondary,
-              }}
-            >
-              {item.category.name}
-            </RText>
-          </RStack>
-          <RStack style={{ marginTop: 10 }}>
-            <RText
-              style={{
-                fontSize: responsive.xxs ? 12 : 14,
-                color: currentTheme.colors.textSecondary,
-              }}
-            >
-              {`Weight: ${convertWeight(
-                item.weight,
-                SMALLEST_ITEM_UNIT,
-                item.unit,
-              )} ${item.unit}`}
-            </RText>
-            {isActionsEnabled ? (
-              <RStack
-                style={{
-                  flexDirection: 'row',
-                  alignItems: 'center',
-                  justifyContent: 'space-between',
-                  marginTop: 10,
-                }}
-              >
-                <RStack
-                  style={{
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                  }}
-                >
-                  <RIconButton
-                    onPress={decrease}
-                    style={{
-                      width: 25,
-                      height: 25,
-                      padding: 0,
-                    }}
-                  >
-                    <AntDesign
-                      name="minus"
-                      size={14}
-                      color={currentTheme.colors.text}
-                    />
-                  </RIconButton>
-                  <RInput
-                    value={String(value)}
-                    onChangeText={(text) => setValue(Number(text))}
-                    onBlur={(e) => submit(Number(e.target.value))}
-                    style={{
-                      width: 50,
-                      padding: 0,
-                      textAlign: 'center',
-                      height: 30,
-                      color: currentTheme.colors.text,
-                      fontSize: 12,
-                      borderWidth: 1,
-                      borderColor: hasError
-                        ? 'red'
-                        : currentTheme.colors.border,
-                      marginHorizontal: 8,
-                    }}
-                  />
-                  <RIconButton
-                    onPress={increase}
-                    style={{
-                      width: 25,
-                      height: 25,
-                      padding: 0,
-                    }}
-                  >
-                    <AntDesign
-                      name="plus"
-                      size={14}
-                      color={currentTheme.colors.text}
-                    />
-                  </RIconButton>
-                </RStack>
-                <RStack
-                  style={{
-                    marginTop: 10,
-                    flexDirection: 'row',
-                    justifyContent: 'flex-end',
-                  }}
-                >
-                  <RIconButton
-                    onPress={() => handleDeleteItem(item.id)}
-                    style={{
-                      backgroundColor: 'transparent',
-                    }}
-                  >
-                    <MaterialIcons
-                      name="delete"
-                      size={24}
-                      color={currentTheme.colors.text}
-                    />
-                  </RIconButton>
-                </RStack>
-              </RStack>
-            ) : (
-              <RText
-                style={{
-                  fontSize: 12,
-                  color: currentTheme.colors.text,
-                  marginTop: 10,
-                }}
-              >
-                Quantity: {value}
-              </RText>
-            )}
-          </RStack>
-        </RStack>
-      </>
-    );
-  }
-
   return (
     <>
-      {renderHeader()}
       <ListItem hoverTheme pressTheme>
         <RStack
           style={{
diff --git a/packages/app/modules/pack/components/PackTable/TableContainer.tsx b/packages/app/modules/pack/components/PackTable/TableContainer.tsx
index 42ab6e39d..b19a52fd5 100644
--- a/packages/app/modules/pack/components/PackTable/TableContainer.tsx
+++ b/packages/app/modules/pack/components/PackTable/TableContainer.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { RSkeleton, RButton, RText, RStack, RSeparator } from '@packrat/ui'; // Added RSeparator here
+import { RSkeleton, RButton, RText, RStack, RSeparator } from '@packrat/ui';
 import { View } from 'react-native';
 import { YGroup } from 'tamagui';
 import {
@@ -9,11 +9,14 @@ import {
 } from './TableHelperComponents';
 import { usePackTable } from './usePackTable';
 import { ItemList } from './ItemList';
+import { ItemCard } from './ItemCard';
 import useResponsive from 'app/hooks/useResponsive';
 import useCustomStyles from 'app/hooks/useCustomStyles';
 import { useSetItemQuantity } from 'app/modules/item';
 import { useDeletePackItem } from 'app/modules/pack/hooks';
 import { useOfflineStore } from 'app/atoms';
+import { LayoutCard } from 'app/components/LayoutCard';
+
 interface TableContainerProps {
   currentPack: any;
   selectedPack?: any;
@@ -53,6 +56,7 @@ export const TableContainer = ({
   const { setItemQuantity } = useSetItemQuantity();
   const { deletePackItem } = useDeletePackItem();
   const { connectionStatus } = useOfflineStore();
+  const responsive = useResponsive();
 
   const onSubmitQuantity = (itemId: string, quantity: number) => {
     setItemQuantity({
@@ -72,43 +76,117 @@ export const TableContainer = ({
   return (
     <View style={styles.container}>
       {data?.length ? (
-        <View style={styles.layoutContainer}>
-          <YGroup alignSelf="stretch" size="$8">
-            {data.map((item) => (
-              <YGroup.Item key={item.id}>
-                <ItemList
-                  item={item}
-                  isActionsEnabled={connectionStatus === 'connected'}
-                  onSubmitQuantity={onSubmitQuantity}
-                  handleDeleteItem={handleDeletePackItem}
-                />
-              </YGroup.Item>
-            ))}
-          </YGroup>
+        <LayoutCard style={styles.layoutContainer}>
+          <RStack>
+            <RText style={styles.tableTitle}>Pack Items</RText>
+            {!responsive.sm && (
+              <RStack
+                style={{
+                  width: '100%',
+                  flexDirection: 'row',
+                  justifyContent: 'space-between',
+                  alignItems: 'center',
+                }}
+              >
+                <RText
+                  style={{
+                    fontWeight: 'bold',
+                    flexBasis: '25%',
+                    marginLeft: 15,
+                  }}
+                >
+                  Name
+                </RText>
+                <RText
+                  style={{
+                    fontWeight: 'bold',
+                    flexBasis: '20%',
+                    textAlign: 'center',
+                  }}
+                >
+                  Category
+                </RText>
+                <RText
+                  style={{
+                    fontWeight: 'bold',
+                    flexBasis: '20%',
+                    textAlign: 'center',
+                  }}
+                >
+                  Weight
+                </RText>
+                <RText
+                  style={{
+                    fontWeight: 'bold',
+                    flexBasis: '25%',
+                    textAlign: 'center',
+                  }}
+                >
+                  Quantity
+                </RText>
+                {connectionStatus === 'connected' && (
+                  <RText style={{ fontWeight: 'bold', flexBasis: '10%' }}>
+                    Actions
+                  </RText>
+                )}
+              </RStack>
+            )}
+
+            <YGroup alignSelf="stretch" size="$8">
+              {data.map((item) => (
+                <YGroup.Item key={item.id}>
+                  {responsive.sm ? (
+                    <ItemCard
+                      item={item}
+                      value={item.quantity}
+                      decrease={() =>
+                        onSubmitQuantity(item.id, item.quantity - 1)
+                      }
+                      increase={() =>
+                        onSubmitQuantity(item.id, item.quantity + 1)
+                      }
+                      setValue={(value) => onSubmitQuantity(item.id, value)}
+                      submit={(value) => onSubmitQuantity(item.id, value)}
+                      hasError={false}
+                      handleDeleteItem={handleDeletePackItem}
+                      isActionsEnabled={connectionStatus === 'connected'}
+                    />
+                  ) : (
+                    <ItemList
+                      item={item}
+                      isActionsEnabled={connectionStatus === 'connected'}
+                      onSubmitQuantity={onSubmitQuantity}
+                      handleDeleteItem={handleDeletePackItem}
+                    />
+                  )}
+                </YGroup.Item>
+              ))}
+            </YGroup>
 
-          {copy && <RButton onPress={handleDuplicate}>Copy</RButton>}
+            {copy && <RButton onPress={handleDuplicate}>Copy</RButton>}
 
-          <TotalWeightBox
-            label="Base Weight"
-            weight={totalBaseWeight}
-            unit={weightUnit}
-          />
-          <TotalWeightBox
-            label="Water + Food Weight"
-            weight={totalWaterWeight + totalFoodWeight}
-            unit={weightUnit}
-          />
-          <RSeparator style={styles.separator} />
-          <TotalWeightBox
-            label="Total Weight"
-            weight={totalWeight}
-            unit={weightUnit}
-          />
-          <WeightUnitDropdown
-            value={weightUnit}
-            onChange={(itemValue: string) => setWeightUnit(itemValue as any)}
-          />
-        </View>
+            <TotalWeightBox
+              label="Base Weight"
+              weight={totalBaseWeight}
+              unit={weightUnit}
+            />
+            <TotalWeightBox
+              label="Water + Food Weight"
+              weight={totalWaterWeight + totalFoodWeight}
+              unit={weightUnit}
+            />
+            <RSeparator style={styles.separator} />
+            <TotalWeightBox
+              label="Total Weight"
+              weight={totalWeight}
+              unit={weightUnit}
+            />
+            <WeightUnitDropdown
+              value={weightUnit}
+              onChange={(itemValue: string) => setWeightUnit(itemValue as any)}
+            />
+          </RStack>
+        </LayoutCard>
       ) : (
         <RText style={styles.noItemsText}>Add your First Item</RText>
       )}
@@ -129,14 +207,23 @@ const loadStyles = (theme: any) => {
     layoutContainer: {
       flexDirection: 'column',
       justifyContent: 'space-between',
-      marginTop: sm ? 20 : 0,
+      marginTop: 0,
       flex: 1,
-      padding: sm ? 10 : 5,
+      padding: 10,
       borderRadius: 10,
-      elevation: 8,
-      backgroundColor: currentTheme.colors.card,
+      backgroundColor: currentTheme.colors.background,
+      borderColor: currentTheme.colors.cardBorderPrimary,
+      borderWidth: 1,
+    },
+    tableTitle: {
+      fontWeight: 'bold',
+      fontSize: 25,
+      textAlign: 'left',
+      marginTop: 20,
+      marginBottom: 20,
+      marginLeft: 15,
+      color: currentTheme.colors.text,
     },
-
     separator: {
       marginVertical: 10,
     },
diff --git a/packages/app/modules/pack/screens/PackDetailsScreen.tsx b/packages/app/modules/pack/screens/PackDetailsScreen.tsx
index 6b7d2539e..affab8f63 100644
--- a/packages/app/modules/pack/screens/PackDetailsScreen.tsx
+++ b/packages/app/modules/pack/screens/PackDetailsScreen.tsx
@@ -1,5 +1,4 @@
 import React, { useState } from 'react';
-
 import { CLIENT_URL } from '@packrat/config';
 import { RButton, RH3, RIconButton, RSpinner, RText } from '@packrat/ui';
 import { useAuthUser } from 'app/modules/auth';
@@ -21,9 +20,9 @@ import LargeCard from 'app/components/card/LargeCard';
 import useTheme from 'app/hooks/useTheme';
 import ChatModalTrigger from 'app/components/chat';
 import { Ionicons } from '@expo/vector-icons';
-
 import { useRouter } from 'app/hooks/router';
 import { ConnectionGate } from 'app/components/ConnectionGate';
+import { AsyncView } from 'app/components/AsyncView/AsyncView';
 
 const SECTION = {
   TABLE: 'TABLE',
@@ -42,7 +41,7 @@ export function PackDetailsScreen() {
   const [isAddItemModalOpen, setIsAddItemModalOpen] = useState(false);
   const [isImportItemModalOpen, setIsImportItemModalOpen] = useState(false);
   const [refetch, setRefetch] = useState(false);
-  const { xxs, xxl, xs } = useResponsive();
+  const { xxs, xxl, xs, sm } = useResponsive();
 
   const {
     data: currentPack,
@@ -52,37 +51,26 @@ export function PackDetailsScreen() {
   } = useFetchSinglePack(packId);
   const isAuthUserPack = useIsAuthUserPack(currentPack);
   const router = useRouter();
-  const { sm } = useResponsive();
 
   // const styles = useCustomStyles(loadStyles);
   const currentPackId = currentPack && currentPack.id;
-
   // check if user is owner of pack, and that pack and user exists
   const isOwner = currentPack && user && currentPack.owner_id === user.id;
-
-  const isError = error !== null;
-
-  if (isLoading)
-    return (
-      <Layout>
-        <RSpinner />
-      </Layout>
-    );
-
   return (
     <Layout customStyle={{ alignItems: 'stretch' }}>
-      {!isError && (
-        <View
-          style={{
-            minHeight: '100%',
-            paddingBottom: 80,
-          }}
-        >
+      <AsyncView
+        isLoading={isLoading}
+        isError={!!error}
+        loadingComponent={<RSpinner />}
+        errorComponentProps={{
+          title: 'Error Loading Pack',
+          message: error?.message,
+        }}
+      >
+        <View style={{ minHeight: '100%', paddingBottom: 80 }}>
           <DetailsComponent
             type="pack"
             data={currentPack}
-            isLoading={isLoading}
-            error={error as any}
             additionalComps={
               <>
                 <ConnectionGate mode="connected">
@@ -92,24 +80,40 @@ export function PackDetailsScreen() {
                         display: 'flex',
                         flexDirection: 'row',
                         width: '100%',
-                        justifyContent: 'center',
+                        justifyContent: 'space-evenly',
                         gap: 5,
-                        marginBottom: 16, // Spacing below the buttons
+                        marginBottom: 16,
                       }}
                     >
-                      <AddItemModal
-                        currentPackId={currentPackId || ''}
-                        currentPack={currentPack}
-                        isAddItemModalOpen={isAddItemModalOpen}
-                        setIsAddItemModalOpen={setIsAddItemModalOpen}
-                        setRefetch={() => setRefetch((prev) => !prev)}
-                      />
-                      <ImportItemModal
-                        currentPackId={currentPackId || ''}
-                        currentPack={currentPack}
-                        isImportItemModalOpen={isImportItemModalOpen}
-                        setIsImportItemModalOpen={setIsImportItemModalOpen}
-                      />
+                      <View
+                        style={{
+                          flex: 1,
+                          backgroundColor: currentTheme.colors.card,
+                          borderRadius: 12,
+                        }}
+                      >
+                        <AddItemModal
+                          currentPackId={currentPackId || ''}
+                          currentPack={currentPack}
+                          isAddItemModalOpen={isAddItemModalOpen}
+                          setIsAddItemModalOpen={setIsAddItemModalOpen}
+                          setRefetch={() => setRefetch((prev) => !prev)}
+                        />
+                      </View>
+                      <View
+                        style={{
+                          flex: 1,
+                          backgroundColor: currentTheme.colors.card,
+                          borderRadius: 12,
+                        }}
+                      >
+                        <ImportItemModal
+                          currentPackId={currentPackId || ''}
+                          currentPack={currentPack}
+                          isImportItemModalOpen={isImportItemModalOpen}
+                          setIsImportItemModalOpen={setIsImportItemModalOpen}
+                        />
+                      </View>
                     </View>
                   ) : (
                     <RText
@@ -173,7 +177,10 @@ export function PackDetailsScreen() {
                                   customStyle={{
                                     width: '100%',
                                     backgroundColor:
-                                      currentTheme.colors.secondaryBlue,
+                                      currentTheme.colors.background,
+                                    borderWidth: 1,
+                                    borderColor:
+                                      currentTheme.colors.cardBorderPrimary,
                                     paddingBottom: 24,
                                     marginTop: 28,
                                     paddingTop: 0,
@@ -197,7 +204,6 @@ export function PackDetailsScreen() {
                             </View>
                           </View>
                         );
-
                       default:
                         return null;
                     }
@@ -208,7 +214,8 @@ export function PackDetailsScreen() {
             link={link}
           />
         </View>
-      )}
+      </AsyncView>
+
       <ConnectionGate mode="connected">
         {Platform.OS === 'web' ? (
           <View

From caa177bb176ddb6734cabab526af6c576647daf6 Mon Sep 17 00:00:00 2001
From: Anmol Verma <anmolverma2810@gmail.com>
Date: Wed, 11 Dec 2024 18:03:49 +0530
Subject: [PATCH 16/66] create primary and secondary button

---
 .../modules/item/components/AddItemModal.tsx  | 30 +++-------
 .../item/components/ImportItemModal.tsx       | 28 +++------
 .../pack/screens/PackDetailsScreen.tsx        |  6 +-
 packages/ui/src/RPrimaryButton/index.tsx      | 59 ++++++++++++++++++
 packages/ui/src/RSecondaryButton/index.tsx    | 60 +++++++++++++++++++
 packages/ui/src/index.tsx                     |  5 ++
 6 files changed, 142 insertions(+), 46 deletions(-)
 create mode 100644 packages/ui/src/RPrimaryButton/index.tsx
 create mode 100644 packages/ui/src/RSecondaryButton/index.tsx

diff --git a/packages/app/modules/item/components/AddItemModal.tsx b/packages/app/modules/item/components/AddItemModal.tsx
index d3eacbad9..e865beb8d 100644
--- a/packages/app/modules/item/components/AddItemModal.tsx
+++ b/packages/app/modules/item/components/AddItemModal.tsx
@@ -1,9 +1,7 @@
 import React from 'react';
 import { AddItem } from './AddItem';
 import useTheme from 'app/hooks/useTheme';
-import { BaseModal } from '@packrat/ui';
-import { RText } from '@packrat/ui';
-import { View } from 'react-native';
+import { BaseModal, RPrimaryButton } from '@packrat/ui';
 
 interface AddItemModalProps {
   currentPackId: string;
@@ -26,29 +24,15 @@ export const AddItemModal = ({
 }: AddItemModalProps) => {
   const { currentTheme } = useTheme();
 
-  const CustomTriggerButton = (
-    <View
-      style={{
-        width: '100%',
-        alignItems: 'center',
-      }}
-    >
-      <RText
-        style={{
-          color: currentTheme.colors.text,
-          fontWeight: 'bold',
-          fontSize: 20,
-        }}
-      >
-        + Add Item
-      </RText>
-    </View>
-  );
-
   return (
     <BaseModal
       title="Add Item"
-      triggerComponent={CustomTriggerButton}
+      triggerComponent={
+        <RPrimaryButton
+          label="+ Add Item"
+          onPress={() => setIsAddItemModalOpen(true)}
+        />
+      }
       showTrigger={showTrigger}
       footerButtons={[
         {
diff --git a/packages/app/modules/item/components/ImportItemModal.tsx b/packages/app/modules/item/components/ImportItemModal.tsx
index 7eecf7eea..a004e01e2 100644
--- a/packages/app/modules/item/components/ImportItemModal.tsx
+++ b/packages/app/modules/item/components/ImportItemModal.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { ImportItem } from './ImportItem';
-import { BaseModal, RStack, RText } from '@packrat/ui';
+import { BaseModal, RSecondaryButton } from '@packrat/ui';
 import useTheme from 'app/hooks/useTheme';
 
 interface ImportItemModalProps {
@@ -18,29 +18,15 @@ export const ImportItemModal = ({
 }: ImportItemModalProps) => {
   const { currentTheme } = useTheme();
 
-  const CustomTriggerButton = (
-    <RStack
-      style={{
-        width: '100%',
-        alignItems: 'center',
-      }}
-    >
-      <RText
-        style={{
-          color: currentTheme.colors.text,
-          fontWeight: 'bold',
-          fontSize: 20,
-        }}
-      >
-        Import Item
-      </RText>
-    </RStack>
-  );
-
   return (
     <BaseModal
       title="Import Item"
-      triggerComponent={CustomTriggerButton}
+      triggerComponent={
+        <RSecondaryButton
+          label="Import Item"
+          onPress={() => setIsImportItemModalOpen(true)}
+        />
+      }
       footerComponent={undefined}
       isOpen={isImportItemModalOpen}
       onOpen={() => setIsImportItemModalOpen(true)}
diff --git a/packages/app/modules/pack/screens/PackDetailsScreen.tsx b/packages/app/modules/pack/screens/PackDetailsScreen.tsx
index affab8f63..d129697ca 100644
--- a/packages/app/modules/pack/screens/PackDetailsScreen.tsx
+++ b/packages/app/modules/pack/screens/PackDetailsScreen.tsx
@@ -88,7 +88,7 @@ export function PackDetailsScreen() {
                       <View
                         style={{
                           flex: 1,
-                          backgroundColor: currentTheme.colors.card,
+                          backgroundColor: '#232323',
                           borderRadius: 12,
                         }}
                       >
@@ -103,8 +103,10 @@ export function PackDetailsScreen() {
                       <View
                         style={{
                           flex: 1,
-                          backgroundColor: currentTheme.colors.card,
+                          backgroundColor: 'transparent',
                           borderRadius: 12,
+                          borderWidth: 1,
+                          borderColor: currentTheme.colors.cardBorderPrimary,
                         }}
                       >
                         <ImportItemModal
diff --git a/packages/ui/src/RPrimaryButton/index.tsx b/packages/ui/src/RPrimaryButton/index.tsx
new file mode 100644
index 000000000..ee1a26dab
--- /dev/null
+++ b/packages/ui/src/RPrimaryButton/index.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import { styled, Button, ButtonProps } from 'tamagui';
+
+interface RPrimaryButtonProps extends ButtonProps {
+  label: string;
+}
+
+const StyledRPrimaryButton = styled(Button, {
+  name: 'RPrimaryButton',
+  backgroundColor: '#232323',
+  color: 'white',
+  fontWeight: 'bold',
+  borderWidth: 0,
+  fontSize: 16,
+  paddingVertical: 10,
+  paddingHorizontal: 20,
+  borderRadius: 8,
+  cursor: 'pointer',
+  hoverStyle: {
+    backgroundColor: 'transparent',
+  },
+
+  variants: {
+    disabled: {
+      true: {
+        backgroundColor: '#5C788A',
+        cursor: 'not-allowed',
+      },
+    },
+    size: {
+      sm: {
+        fontSize: 14,
+        paddingVertical: 8,
+        paddingHorizontal: 16,
+      },
+      lg: {
+        fontSize: 18,
+        paddingVertical: 12,
+        paddingHorizontal: 24,
+      },
+    },
+  },
+  defaultVariants: {
+    size: 'lg',
+  },
+});
+
+const RPrimaryButton: React.FC<RPrimaryButtonProps> = ({
+  label,
+  disabled,
+  size,
+  ...props
+}) => (
+  <StyledRPrimaryButton disabled={disabled} size={size} {...props}>
+    {label}
+  </StyledRPrimaryButton>
+);
+
+export default RPrimaryButton;
diff --git a/packages/ui/src/RSecondaryButton/index.tsx b/packages/ui/src/RSecondaryButton/index.tsx
new file mode 100644
index 000000000..e4cddf6a8
--- /dev/null
+++ b/packages/ui/src/RSecondaryButton/index.tsx
@@ -0,0 +1,60 @@
+import React from 'react';
+import { styled, Button, ButtonProps } from 'tamagui';
+
+interface RSecondaryButtonProps extends ButtonProps {
+  label: string;
+}
+
+const StyledSecondaryButton = styled(Button, {
+  name: 'RSecondaryButton',
+  backgroundColor: 'transparent',
+  color: '#7e7f80',
+  borderWidth: 0,
+  fontWeight: 'bold',
+  fontSize: 16,
+  paddingVertical: 10,
+  paddingHorizontal: 20,
+  borderRadius: 8,
+  cursor: 'pointer',
+  hoverStyle: {
+    backgroundColor: 'transparent',
+  },
+
+  variants: {
+    disabled: {
+      true: {
+        borderColor: '#5C788A',
+        color: '#5C788A',
+        cursor: 'not-allowed',
+      },
+    },
+    size: {
+      sm: {
+        fontSize: 14,
+        paddingVertical: 8,
+        paddingHorizontal: 16,
+      },
+      lg: {
+        fontSize: 18,
+        paddingVertical: 12,
+        paddingHorizontal: 24,
+      },
+    },
+  },
+  defaultVariants: {
+    size: 'lg',
+  },
+});
+
+const RSecondaryButton: React.FC<RSecondaryButtonProps> = ({
+  label,
+  disabled,
+  size,
+  ...props
+}) => (
+  <StyledSecondaryButton disabled={disabled} size={size} {...props}>
+    {label}
+  </StyledSecondaryButton>
+);
+
+export default RSecondaryButton;
diff --git a/packages/ui/src/index.tsx b/packages/ui/src/index.tsx
index 83f5f7d7d..764eb6903 100644
--- a/packages/ui/src/index.tsx
+++ b/packages/ui/src/index.tsx
@@ -14,8 +14,11 @@ import RImage from './RImage';
 import RInput from './RInput';
 import RLabel from './RLabel';
 import RLink from './RLink';
+import RPrimaryButton from './RPrimaryButton';
 import RRadio from './RRadio';
 import RScrollView from './RScrollview';
+import RSecondaryButton from './RSecondaryButton';
+
 import RSelect from './RSelect';
 import RSeparator from './RSeparator';
 import RSpinner from './RSpinner';
@@ -63,8 +66,10 @@ export {
   RLabel,
   RLink,
   RParagraph,
+  RPrimaryButton,
   RRadio,
   RScrollView,
+  RSecondaryButton,
   RSelect,
   RSeparator,
   RSpinner,

From 18ab35008bfd948c745cba59577cefcbf5c49d0c Mon Sep 17 00:00:00 2001
From: Anmol Verma <anmolverma2810@gmail.com>
Date: Wed, 11 Dec 2024 20:36:56 +0530
Subject: [PATCH 17/66] add useQuantityInput

---
 .../pack/components/PackTable/ItemCard.tsx    | 57 ++++++++++++++++---
 packages/ui/src/RSecondaryButton/index.tsx    |  3 +-
 2 files changed, 51 insertions(+), 9 deletions(-)

diff --git a/packages/app/modules/pack/components/PackTable/ItemCard.tsx b/packages/app/modules/pack/components/PackTable/ItemCard.tsx
index c24ddfc77..3604bd595 100644
--- a/packages/app/modules/pack/components/PackTable/ItemCard.tsx
+++ b/packages/app/modules/pack/components/PackTable/ItemCard.tsx
@@ -1,7 +1,8 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { RStack, RText, RIconButton, RInput } from '@packrat/ui';
 import { AntDesign, MaterialIcons } from '@expo/vector-icons';
 import useTheme from 'app/hooks/useTheme';
+import useResponsive from 'app/hooks/useResponsive';
 
 interface ItemCardProps {
   item: any;
@@ -17,16 +18,16 @@ interface ItemCardProps {
 
 export const ItemCard = ({
   item,
-  value,
-  decrease,
-  increase,
-  setValue,
-  submit,
-  hasError,
   handleDeleteItem,
+  onSubmitQuantity = () => {},
   isActionsEnabled,
 }: ItemCardProps) => {
   const { currentTheme } = useTheme();
+  const responsive = useResponsive();
+  const { value, setValue, increase, decrease, hasError, submit } =
+    useQuantityInput(item.quantity, (value: number) =>
+      onSubmitQuantity(item.id, value),
+    );
 
   return (
     <RStack
@@ -169,3 +170,45 @@ export const ItemCard = ({
     </RStack>
   );
 };
+
+const useQuantityInput = (
+  defaultValue: number,
+  onChange: (value: number) => void,
+) => {
+  const [quantity, setQuantity] = useState(0);
+  const [hasError, setHasError] = useState(false);
+
+  useEffect(() => {
+    setQuantity(defaultValue);
+  }, [defaultValue]);
+
+  const submit = (value: number) => {
+    setQuantity(value);
+    if (!validateQuantity(value)) {
+      return setHasError(true);
+    }
+
+    setHasError(false);
+
+    onChange(value);
+  };
+
+  const increase = () => {
+    submit(quantity + 1);
+  };
+
+  const decrease = () => {
+    submit(quantity - 1);
+  };
+
+  return {
+    value: quantity,
+    setValue: setQuantity,
+    hasError,
+    increase,
+    decrease,
+    submit,
+  };
+};
+
+const validateQuantity = (quantity: number) => quantity > 0;
diff --git a/packages/ui/src/RSecondaryButton/index.tsx b/packages/ui/src/RSecondaryButton/index.tsx
index e4cddf6a8..cf8f06a86 100644
--- a/packages/ui/src/RSecondaryButton/index.tsx
+++ b/packages/ui/src/RSecondaryButton/index.tsx
@@ -12,8 +12,7 @@ const StyledSecondaryButton = styled(Button, {
   borderWidth: 0,
   fontWeight: 'bold',
   fontSize: 16,
-  paddingVertical: 10,
-  paddingHorizontal: 20,
+  padding: 10,
   borderRadius: 8,
   cursor: 'pointer',
   hoverStyle: {

From bccb27cc326cd68acf9144684f958bb528fac01e Mon Sep 17 00:00:00 2001
From: Anmol Verma <anmolverma2810@gmail.com>
Date: Fri, 13 Dec 2024 19:07:05 +0530
Subject: [PATCH 18/66] add popover

---
 .../src/routes/destination/query.lazy.tsx     |   2 +-
 .../components/SearchInput/SearchInput.tsx    | 201 ++++++++----------
 2 files changed, 90 insertions(+), 113 deletions(-)

diff --git a/apps/vite/src/routes/destination/query.lazy.tsx b/apps/vite/src/routes/destination/query.lazy.tsx
index cb8950030..725d52d1f 100644
--- a/apps/vite/src/routes/destination/query.lazy.tsx
+++ b/apps/vite/src/routes/destination/query.lazy.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { DestinationScreen } from 'app/modules/Map/screens/DestinationScreen';
+import { DestinationScreen } from 'app/modules/map/screens/DestinationScreen/DestinationScreen';
 import { AuthWrapper } from 'app/modules/auth';
 import { createLazyFileRoute } from '@tanstack/react-router';
 
diff --git a/packages/app/components/SearchInput/SearchInput.tsx b/packages/app/components/SearchInput/SearchInput.tsx
index e3fefda49..12b0b9f84 100644
--- a/packages/app/components/SearchInput/SearchInput.tsx
+++ b/packages/app/components/SearchInput/SearchInput.tsx
@@ -1,10 +1,15 @@
-import React, { cloneElement, forwardRef, useMemo } from 'react';
+import React, {
+  cloneElement,
+  forwardRef,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import { Platform, type TextInput } from 'react-native';
 import { MaterialIcons, MaterialCommunityIcons } from '@expo/vector-icons';
 import useSearchInput from './useSearchInput';
 import useTheme from 'app/hooks/useTheme';
-import useCustomStyles from 'app/hooks/useCustomStyles';
-
 import {
   RStack as OriginalRStack,
   RInput as OriginalRInput,
@@ -13,12 +18,14 @@ import {
   RIconButton,
 } from '@packrat/ui';
 import { View, Pressable as OriginalPressable } from 'react-native';
+import { Adapt, Popover as OriginalPopover, Button } from 'tamagui';
 
-const RStack: any = OriginalRStack;
-const RInput: any = OriginalRInput;
-const RScrollView: any = OriginalRScrollView;
-const RButton: any = OriginalRButton;
-const Pressable: any = OriginalPressable;
+const Popover = OriginalPopover;
+const RStack = OriginalRStack;
+const RInput = OriginalRInput;
+const RScrollView = OriginalRScrollView;
+const RButton = OriginalRButton;
+const Pressable = OriginalPressable;
 
 interface SearchInputProps {
   onSelect: (result: any, index: number) => void;
@@ -45,6 +52,15 @@ export const SearchInput = forwardRef<TextInput, SearchInputProps>(
     },
     inputRef,
   ) {
+    const inputContainerRef = useRef<HTMLDivElement | null>(null);
+    const [inputWidth, setInputWidth] = useState<number | undefined>(undefined);
+
+    useLayoutEffect(() => {
+      if (inputContainerRef.current) {
+        setInputWidth(inputContainerRef.current.offsetWidth);
+      }
+    }, [inputContainerRef.current]);
+
     const {
       handleClearSearch,
       handleSearchResultClick,
@@ -53,117 +69,92 @@ export const SearchInput = forwardRef<TextInput, SearchInputProps>(
       isLoadingMobile,
       isVisible,
     } = useSearchInput({ onSelect, onChange, onCreate, searchString });
-    const options = useSearchOptions(results, searchString, canCreateNewItem);
 
+    const options = useSearchOptions(results, searchString, canCreateNewItem);
     const { isDark, currentTheme } = useTheme();
-    const styles = useCustomStyles(loadStyles);
 
     if (Platform.OS === 'web') {
       return (
-        <RStack style={styles.container}>
-          <RStack
-            style={{ position: 'relative', height: 'auto', width: '100%' }}
-          >
-            <RStack
-              style={{
-                flexDirection: 'row',
-                width: '100%',
-                height: '100%',
-                position: 'relative',
-              }}
-            >
+        <Popover size="$20" allowFlip placement="bottom" open={isVisible}>
+          <Popover.Trigger asChild>
+            <RStack ref={inputContainerRef} style={{ width: '100%' }}>
               <RInput
-                style={{ flex: 1, backgroundColor: currentTheme.colors.card }}
-                paddingLeft={35}
-                paddingRight={55}
-                placeholder={placeholder ?? 'Search'}
-                onChangeText={handleSearchChange}
-                value={searchString}
-              />
-              <MaterialIcons
-                name="search"
+                ref={inputRef}
                 style={{
+                  width: '100%',
+                  padding: '8px 12px',
+                  borderRadius: '8px',
+                  border: `1px solid ${currentTheme.colors.border}`,
+                  backgroundColor: currentTheme.colors.card,
+                  fontSize: '16px',
                   color: currentTheme.colors.text,
-                  position: 'absolute',
-                  height: '100%',
-                  alignSelf: 'center',
-                  display: 'flex',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                  width: 40,
-                  fontSize: 20,
                 }}
+                placeholder={placeholder ?? 'Search'}
+                value={searchString}
+                onChange={(e) => handleSearchChange(e.target.value)}
               />
               {searchString && (
-                <RButton
-                  onPress={handleClearSearch}
+                <MaterialIcons
+                  name="close"
                   style={{
                     position: 'absolute',
-                    right: 1,
-                    backgroundColor: 'transparent',
+                    right: 12,
+                    top: '50%',
+                    transform: 'translateY(-50%)',
+                    fontSize: 20,
+                    color: currentTheme.colors.text,
+                    cursor: 'pointer',
                   }}
-                  width={10}
-                >
-                  <MaterialIcons name="close" />
-                </RButton>
+                  onClick={handleClearSearch}
+                />
               )}
             </RStack>
-
-            <RStack
+          </Popover.Trigger>
+          {showSearchResults && (
+            <Popover.Content
               style={{
-                position: 'relative',
-                display: isVisible ? 'block' : 'none',
+                borderWidth: 1,
+                borderRadius: 8,
+                padding: 8,
+                backgroundColor: isDark
+                  ? currentTheme.colors.black
+                  : currentTheme.colors.white,
+                maxHeight: 200,
+                overflowY: 'auto',
+                width: inputWidth,
               }}
             >
-              {showSearchResults && (
-                <RScrollView
-                  position="absolute"
-                  top="100%"
-                  left="0"
-                  right="0"
-                  maxHeight={200}
-                  borderWidth={1}
-                  borderRadius={12}
-                  backgroundColor={
-                    !isDark
-                      ? currentTheme.colors.white
-                      : currentTheme.colors.black
-                  }
-                  style={{
-                    borderColor: isDark ? '#F8F8F8' : '##D1D5DB',
-                  }}
-                  showsVerticalScrollIndicator={false}
-                  zIndex={20000}
-                >
-                  <View
-                    role="list"
+              <RStack
+                style={{
+                  width: '100%',
+                  display: 'flex',
+                  flexDirection: 'column',
+                  gap: 8,
+                }}
+              >
+                {options.map((result, i) => (
+                  <RStack
+                    key={`result-${i}`}
+                    role="listitem"
                     style={{
-                      width: '100%',
-                      gap: 8,
+                      cursor: 'pointer',
                       padding: 8,
-                      backgroundColor: isDark
-                        ? '#1A1A1D'
-                        : currentTheme.colors.white,
+                      borderRadius: 4,
+                      backgroundColor: result.isDisabled
+                        ? 'transparent'
+                        : currentTheme.colors.card,
                     }}
+                    onClick={() =>
+                      !result.isDisabled && handleSearchResultClick(result)
+                    }
                   >
-                    {options.map((result, i) => (
-                      <RStack
-                        key={`result + ${i}`}
-                        role="listitem"
-                        onPress={() =>
-                          !result.isDisabled && handleSearchResultClick(result)
-                        }
-                        style={{ cursor: 'pointer' }}
-                      >
-                        {cloneElement(ResultItemComponent, { item: result })}
-                      </RStack>
-                    ))}
-                  </View>
-                </RScrollView>
-              )}
-            </RStack>
-          </RStack>
-        </RStack>
+                    {cloneElement(ResultItemComponent, { item: result })}
+                  </RStack>
+                ))}
+              </RStack>
+            </Popover.Content>
+          )}
+        </Popover>
       );
     } else {
       return (
@@ -262,13 +253,8 @@ const useSearchOptions = (
   canCreateNewItem: boolean,
 ) => {
   return useMemo(() => {
-    if (!Array.isArray(results)) {
-      return [];
-    }
-
-    if (!canCreateNewItem) {
-      return results;
-    }
+    if (!Array.isArray(results)) return [];
+    if (!canCreateNewItem) return results;
 
     const hasExactMatch = results.some(
       (result) => result.name.toLowerCase() === searchString?.toLowerCase(),
@@ -286,12 +272,3 @@ const useSearchOptions = (
         ];
   }, [results]);
 };
-
-const loadStyles = () => ({
-  container: {
-    width: '100%',
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});

From dee5a82f56a6e6c2c6c21544bd54919c94badfe8 Mon Sep 17 00:00:00 2001
From: Anmol Verma <anmolverma2810@gmail.com>
Date: Fri, 13 Dec 2024 19:20:20 +0530
Subject: [PATCH 19/66] style changes

---
 .../PlacesAutocomplete/PlacesAutocomplete.tsx      | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/packages/app/components/PlacesAutocomplete/PlacesAutocomplete.tsx b/packages/app/components/PlacesAutocomplete/PlacesAutocomplete.tsx
index d49b0e555..8d011a19b 100644
--- a/packages/app/components/PlacesAutocomplete/PlacesAutocomplete.tsx
+++ b/packages/app/components/PlacesAutocomplete/PlacesAutocomplete.tsx
@@ -50,7 +50,19 @@ const PlaceItem = ({ item }: any) => {
       <RText fontWeight="400" color="red">
         {item.properties.name}
       </RText>
-      <RText opacity={100} textTransform={'capitalize'}>
+      <RText
+        style={{
+          backgroundColor: '#e6e6e6',
+          fontWeight: 600,
+          color: '#000000',
+          borderRadius: 8,
+          paddingLeft: 10,
+          paddingRight: 10,
+          width: 'auto',
+          fontSize: 12,
+          textAlign: 'center',
+        }}
+      >
         {item.properties.osm_value}
       </RText>
     </RStack>

From 520f1112f706819bc5d26fc99c3ce4da04588b34 Mon Sep 17 00:00:00 2001
From: Taron <taron.aleksanyan.20@gmail.com>
Date: Fri, 13 Dec 2024 18:39:14 +0400
Subject: [PATCH 20/66] Enhance Create Trip Screen

---
 packages/app/components/GearList/GearList.tsx |  79 +++------
 .../app/components/LayoutCard/LayoutCard.tsx  |  23 ++-
 packages/app/components/layout/Layout.tsx     |  14 +-
 .../trip/TripCards/TripActivityCard.tsx       |  40 +----
 .../trip/TripCards/TripCardBase.tsx           |  51 +-----
 .../trip/TripCards/TripDateRangeCard.tsx      |  27 +--
 .../components/trip/TripCards/TripMapCard.tsx |  54 +++---
 .../trip/TripCards/TripSearchCard.tsx         |  84 ++++-----
 packages/app/components/trip/TripForm.tsx     | 100 +++++++++++
 .../app/components/trip/createTripModal.tsx   | 159 -----------------
 packages/app/hooks/trips/useCreateTripForm.ts |   6 +
 .../DestinationScreen/DestinationScreen.tsx   |  77 ++++----
 .../modules/pack/components/AddPackForm.tsx   |   3 +-
 .../modules/pack/screens/AddPackScreen.tsx    |   4 +-
 .../modules/pack/widgets/AddPackContainer.tsx |   8 +-
 .../modules/pack/widgets/PackContainer.tsx    |  11 --
 .../screens/trip/TripDetailsComponents.tsx    |   2 +-
 packages/app/screens/trip/createTrip.tsx      | 164 +++++++++---------
 packages/app/screens/trip/useTripsData.ts     |  15 +-
 packages/ui/src/MainContentWeb/index.tsx      |   7 +-
 packages/ui/src/RPrimaryButton/index.tsx      |   3 +-
 packages/ui/src/RSecondaryButton/index.tsx    |   2 +-
 .../ui/src/form/components/SubmitButton.tsx   |  13 +-
 .../tripRoutesValidator.ts                    |  10 +-
 24 files changed, 408 insertions(+), 548 deletions(-)
 create mode 100644 packages/app/components/trip/TripForm.tsx
 delete mode 100644 packages/app/components/trip/createTripModal.tsx

diff --git a/packages/app/components/GearList/GearList.tsx b/packages/app/components/GearList/GearList.tsx
index 21466ef40..3ceacd540 100644
--- a/packages/app/components/GearList/GearList.tsx
+++ b/packages/app/components/GearList/GearList.tsx
@@ -1,68 +1,33 @@
-import React from 'react';
-import { RStack as OriginalRStack, RText as OriginalRText } from '@packrat/ui';
-import { FontAwesome5 } from '@expo/vector-icons';
+import React, { useState } from 'react';
+import {
+  RStack as OriginalRStack,
+  RText as OriginalRText,
+  View,
+  XStack,
+} from '@packrat/ui';
 import { AddPackContainer } from '../../modules/pack/widgets/AddPackContainer';
-import useTheme from '../../hooks/useTheme';
 import PackContainer from '../../modules/pack/widgets/PackContainer';
-import { usePackId } from 'app/modules/pack';
+import { useFetchSinglePack, usePackId } from 'app/modules/pack';
+import { LayoutCard } from 'app/components/LayoutCard';
 
 const RStack: any = OriginalRStack;
 const RText: any = OriginalRText;
 
 export const GearList = () => {
-  const { currentTheme } = useTheme();
-  const [_, setPackIdParam] = usePackId();
+  const [isOpen, setIsOpen] = useState(false);
+  const [packId, setPackIdParam] = usePackId();
+  const { data: currentPack } = useFetchSinglePack(packId);
 
   return (
-    <RStack
-      alignSelf="center"
-      $sm={{
-        borderRadius: 6,
-        width: '100%',
-      }}
-      $gtSm={{
-        borderRadius: 12,
-        width: '90%',
-      }}
-      style={{
-        flexDirection: 'column',
-        backgroundColor: currentTheme.colors.card,
-        gap: 15,
-        marginVertical: 10,
-        alignItems: 'center',
-        padding: 30,
-      }}
-    >
-      <RStack>
-        <RStack
-          style={{
-            flexDirection: 'row',
-            alignItems: 'center',
-            gap: 10,
-          }}
-        >
-          <FontAwesome5
-            name="clipboard-check"
-            size={20}
-            color={currentTheme.colors.cardIconColor}
-          />
-          <RText
-            style={{
-              color: currentTheme.colors.text,
-              fontSize: currentTheme.font.size,
-              paddingTop: 12,
-              paddingBottom: 12,
-              fontWeight: 600,
-            }}
-            fontFamily="$body"
-          >
-            Gear List
-          </RText>
-        </RStack>
-      </RStack>
-
-      <AddPackContainer onSuccess={setPackIdParam} isCreatingTrip={true} />
-      <PackContainer />
-    </RStack>
+    <>
+      <LayoutCard title="Your Pack">
+        <XStack style={{ alignItems: 'center' }}>
+          <View style={{ flex: 1 }}>
+            <PackContainer />
+          </View>
+          <AddPackContainer onSuccess={setPackIdParam} isCreatingTrip={true} />
+        </XStack>
+      </LayoutCard>
+    </>
   );
 };
diff --git a/packages/app/components/LayoutCard/LayoutCard.tsx b/packages/app/components/LayoutCard/LayoutCard.tsx
index 36cf6dd73..9c625fb1b 100644
--- a/packages/app/components/LayoutCard/LayoutCard.tsx
+++ b/packages/app/components/LayoutCard/LayoutCard.tsx
@@ -1,10 +1,18 @@
-import React, { type FC } from 'react';
+import React, { type ReactNode, type FC } from 'react';
 import { View, type ViewProps } from 'tamagui';
 import useTheme from 'app/hooks/useTheme';
+import { RText } from '@packrat/ui';
 
-interface LayoutCardProps extends ViewProps {}
+interface LayoutCardProps extends ViewProps {
+  title?: ReactNode;
+}
 
-export const LayoutCard: FC<LayoutCardProps> = ({ style, ...props }) => {
+export const LayoutCard: FC<LayoutCardProps> = ({
+  style,
+  title,
+  children,
+  ...props
+}) => {
   const { currentTheme } = useTheme();
 
   return (
@@ -20,6 +28,13 @@ export const LayoutCard: FC<LayoutCardProps> = ({ style, ...props }) => {
         },
         style,
       ]}
-    />
+    >
+      {title && (
+        <RText style={{ fontWeight: 600, fontSize: 24, marginBottom: 24 }}>
+          {title}
+        </RText>
+      )}
+      {children}
+    </View>
   );
 };
diff --git a/packages/app/components/layout/Layout.tsx b/packages/app/components/layout/Layout.tsx
index 8dddba0cc..2587d8f4e 100644
--- a/packages/app/components/layout/Layout.tsx
+++ b/packages/app/components/layout/Layout.tsx
@@ -1,6 +1,12 @@
 import useTheme from 'app/hooks/useTheme';
 import React from 'react';
-import { Platform, View, type StyleProp, type ViewStyle } from 'react-native';
+import {
+  Platform,
+  ScrollView,
+  View,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
 
 const Layout = ({
   children,
@@ -30,7 +36,11 @@ const Layout = ({
         customStyle,
       ]}
     >
-      {children}
+      <View style={{ width: '100%' }}>
+        <ScrollView contentContainerStyle={{ width: '100%' }}>
+          {children}
+        </ScrollView>
+      </View>
     </View>
   );
 };
diff --git a/packages/app/components/trip/TripCards/TripActivityCard.tsx b/packages/app/components/trip/TripCards/TripActivityCard.tsx
index 0dd49201f..d00d8db57 100644
--- a/packages/app/components/trip/TripCards/TripActivityCard.tsx
+++ b/packages/app/components/trip/TripCards/TripActivityCard.tsx
@@ -7,25 +7,8 @@ import { formatTripActivityLabel } from 'app/utils/tripUtils';
 import { FontAwesome5 } from '@expo/vector-icons';
 import { Select as OriginalSelect } from '@packrat/ui';
 
-enum TripActivity {
-  TRIP = 'trip',
-  RUNNING = 'running',
-  BIKING = 'biking',
-  CAMPING = 'camping',
-  FISHING = 'fishing',
-  TREKKING = 'trekking',
-  ROCK_CLIMBING = 'rock-climbing',
-  HIKING = 'hiking',
-  SWIMMING = 'swimming',
-}
-
 const Select: any = OriginalSelect;
 
-const ActivityOptions = getEnumValues(TripActivity).map((activity) => ({
-  label: formatTripActivityLabel(activity.toString()),
-  value: activity,
-}));
-
 type TripActivityCardProps = {
   onChange: (activity: string) => void;
   selectedValue: string;
@@ -38,22 +21,11 @@ export const TripActivityCard = ({
   const { currentTheme } = useTheme();
 
   return (
-    <TripCardBase
-      icon={() => (
-        <FontAwesome5
-          name="hiking"
-          size={24}
-          color={currentTheme.colors.cardIconColor}
-        />
-      )}
-      title="Activity"
-    >
-      <Select
-        value={selectedValue}
-        onValueChange={onChange}
-        options={ActivityOptions}
-        name="activity"
-      />
-    </TripCardBase>
+    <Select
+      value={selectedValue}
+      onValueChange={onChange}
+      options={ActivityOptions}
+      name="activity"
+    />
   );
 };
diff --git a/packages/app/components/trip/TripCards/TripCardBase.tsx b/packages/app/components/trip/TripCards/TripCardBase.tsx
index dce943708..3d50d5a65 100644
--- a/packages/app/components/trip/TripCards/TripCardBase.tsx
+++ b/packages/app/components/trip/TripCards/TripCardBase.tsx
@@ -2,6 +2,7 @@ import React, { ReactNode } from 'react';
 import { RStack as OriginalRStack, RText as OriginalRText } from '@packrat/ui';
 import useCustomStyles from 'app/hooks/useCustomStyles';
 import useTheme from 'app/hooks/useTheme';
+import { LayoutCard } from 'app/components/LayoutCard';
 
 const RStack: any = OriginalRStack;
 const RText: any = OriginalRText;
@@ -20,55 +21,7 @@ export const TripCardBase = ({
   icon: Icon,
   title,
 }: TripCardBaseProps) => {
-  const { currentTheme } = useTheme();
-  const styles = useCustomStyles(loadTripCardStyles(loadStyles));
-
-  return (
-    <RStack
-      $sm={{
-        borderRadius: 6,
-        flexDirection: 'column',
-        width: '100%',
-      }}
-      $gtSm={{
-        borderRadius: 12,
-        flexDirection,
-        width: '90%',
-      }}
-      style={styles.styles}
-    >
-      <RStack
-        style={{
-          flexDirection: 'row',
-          gap: 15,
-          alignItems: 'center',
-          paddingVertical: 15,
-        }}
-      >
-        <RStack
-          style={{
-            flexDirection: 'row',
-            gap: 15,
-            alignItems: 'center',
-            paddingVertical: 15,
-          }}
-        >
-          <Icon />
-          <RText
-            style={{
-              color: currentTheme.colors.text,
-              fontSize: currentTheme.font.size,
-              fontWeight: 600,
-            }}
-            fontFamily="$body"
-          >
-            {title}
-          </RText>
-        </RStack>
-      </RStack>
-      {children}
-    </RStack>
-  );
+  return <LayoutCard>{children}</LayoutCard>;
 };
 
 const loadTripCardStyles = (loader) => (theme) => ({
diff --git a/packages/app/components/trip/TripCards/TripDateRangeCard.tsx b/packages/app/components/trip/TripCards/TripDateRangeCard.tsx
index 3a025393f..dfb9b3f61 100644
--- a/packages/app/components/trip/TripCards/TripDateRangeCard.tsx
+++ b/packages/app/components/trip/TripCards/TripDateRangeCard.tsx
@@ -39,24 +39,13 @@ export const TripDateRangeCard = ({
   };
 
   return (
-    <TripCardBase
-      icon={() => (
-        <FontAwesome5
-          name="calendar"
-          size={20}
-          color={currentTheme.colors.cardIconColor}
-        />
-      )}
-      title="Trip Date Range"
-    >
-      <RangePicker
-        selectedDates={selectedDates}
-        onDatesChange={onDatesChange}
-        offsetDate={offsetDate}
-        onOffsetChange={onOffsetChange}
-        open={open}
-        setOpen={setOpen}
-      />
-    </TripCardBase>
+    <RangePicker
+      selectedDates={selectedDates}
+      onDatesChange={onDatesChange}
+      offsetDate={offsetDate}
+      onOffsetChange={onOffsetChange}
+      open={open}
+      setOpen={setOpen}
+    />
   );
 };
diff --git a/packages/app/components/trip/TripCards/TripMapCard.tsx b/packages/app/components/trip/TripCards/TripMapCard.tsx
index 07d5bac3d..6f17f946a 100644
--- a/packages/app/components/trip/TripCards/TripMapCard.tsx
+++ b/packages/app/components/trip/TripCards/TripMapCard.tsx
@@ -1,14 +1,15 @@
-import { ErrorBoundary, RStack, RText } from '@packrat/ui';
 import { Map } from 'app/modules/map';
-import useTheme from 'app/hooks/useTheme';
-import { TripCardBase } from './TripCardBase';
-import { FontAwesome5 } from '@expo/vector-icons';
 import React from 'react';
 import { getTripGEOURI } from '../utils';
+import { AsyncView } from 'app/components/AsyncView';
+import { View } from 'react-native';
+import useResponsive from 'app/hooks/useResponsive';
+import { Platform } from 'react-native';
 
 interface TripMapCardProps {
   isLoading?: boolean;
   shape?: any;
+  isMapError: boolean;
   onVisibleBoundsChange?: (bounds: number[]) => void;
   tripId?: string;
   initialBounds?: any;
@@ -19,38 +20,29 @@ export const TripMapCard = ({
   shape,
   initialBounds,
   tripId,
+  isMapError,
   onVisibleBoundsChange,
 }: TripMapCardProps) => {
-  const { currentTheme } = useTheme();
+  const { gtSm } = useResponsive();
 
   return (
-    <TripCardBase
-      loadStyles={loadStyles}
-      icon={() => (
-        <FontAwesome5
-          name="route"
-          size={24}
-          color={currentTheme.colors.cardIconColor}
+    <AsyncView isError={isMapError} isLoading={isLoading}>
+      <View
+        style={{
+          flex: gtSm ? 1 : undefined,
+          width: gtSm ? 'auto' : '100%',
+          height: Platform.OS === 'web' ? 'auto' : 300,
+        }}
+      >
+        <Map
+          style={{ width: '100%', height: 320 }}
+          shapeURI={tripId ? getTripGEOURI(tripId) : undefined}
+          onVisibleBoundsChange={onVisibleBoundsChange}
+          initialBounds={initialBounds}
+          shape={shape}
         />
-      )}
-      title="Map"
-    >
-      {isLoading ? (
-        <RStack>
-          <RText>Loading....</RText>
-        </RStack>
-      ) : (
-        <ErrorBoundary>
-          <Map
-            style={{ width: '100%', height: 320 }}
-            shapeURI={tripId ? getTripGEOURI(tripId) : undefined}
-            onVisibleBoundsChange={onVisibleBoundsChange}
-            initialBounds={initialBounds}
-            shape={shape}
-          />
-        </ErrorBoundary>
-      )}
-    </TripCardBase>
+      </View>
+    </AsyncView>
   );
 };
 
diff --git a/packages/app/components/trip/TripCards/TripSearchCard.tsx b/packages/app/components/trip/TripCards/TripSearchCard.tsx
index 3db2e9f26..a0869c960 100644
--- a/packages/app/components/trip/TripCards/TripSearchCard.tsx
+++ b/packages/app/components/trip/TripCards/TripSearchCard.tsx
@@ -1,5 +1,6 @@
+import React from 'react';
+import { RSecondaryButton, RText, YStack } from '@packrat/ui';
 import useTheme from 'app/hooks/useTheme';
-import { TripCardBase } from './TripCardBase';
 import { useGEOLocationSearch } from 'app/hooks/geojson';
 
 import { FontAwesome } from '@expo/vector-icons';
@@ -7,56 +8,59 @@ import { View } from 'react-native';
 import { PlacesAutocomplete } from 'app/components/PlacesAutocomplete';
 import useResponsive from 'app/hooks/useResponsive';
 import { useScreenWidth } from 'app/hooks/common';
+import { ArrowLeft } from '@tamagui/lucide-icons';
 
-
-type TripSearchCardProps = {
+interface TripSearchCardProps {
   searchRef: any;
-};
+  isChangePlaceMode: boolean;
+  onGoBack: () => void;
+  onLocationSelect: () => void;
+}
 
-export const TripSearchCard = ({ searchRef }: TripSearchCardProps) => {
-  const {screenWidth} = useScreenWidth()
-  const { currentTheme } = useTheme();
+export const TripSearchCard = ({
+  searchRef,
+  isChangePlaceMode,
+  onGoBack,
+  onLocationSelect,
+}: TripSearchCardProps) => {
   const [, setGEOLocation] = useGEOLocationSearch();
 
   const handleSelectLocation = (geoJSON) => {
     setGEOLocation(geoJSON);
+    onLocationSelect();
   };
-  const { xs } = useResponsive();
+
+  const formTitle = isChangePlaceMode
+    ? 'Looking for another place?'
+    : 'Where are you heading?';
 
   return (
-    <TripCardBase
-      loadStyles={loadStyles}
-      icon={() => (
-        <FontAwesome
-          name="map"
-          size={20}
-          color={currentTheme.colors.cardIconColor}
+    <YStack
+      style={{
+        gap: 16,
+        maxWidth: 448,
+        width: '100%',
+        margin: 'auto',
+        paddingBottom: 50,
+      }}
+    >
+      <RText
+        style={{
+          fontWeight: 700,
+          fontSize: 24,
+          textAlign: 'center',
+        }}
+      >
+        {formTitle}
+      </RText>
+      <PlacesAutocomplete ref={searchRef} onSelect={handleSelectLocation} />
+      {isChangePlaceMode && (
+        <RSecondaryButton
+          icon={<ArrowLeft />}
+          onPress={onGoBack}
+          label="Go Back to Trip Planning"
         />
       )}
-      title="Where are you heading?"
-    >
-      <View style={{ width: xs ? screenWidth * 0.5 : screenWidth * 0.3 }}>
-        <PlacesAutocomplete ref={searchRef} onSelect={handleSelectLocation} />
-      </View>
-    </TripCardBase>
+    </YStack>
   );
 };
-
-const loadStyles = (theme) => {
-  const { xxs } = useResponsive();
-
-  const { currentTheme } = theme;
-
-  return {
-    backgroundColor: currentTheme.colors.card,
-    padding: currentTheme.size.mobilePadding,
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    gap: 10,
-    flex: 1,
-    paddingHorizontal: 60,
-    paddingVertical: 20,
-    height: xxs ? '100%' : 450,
-    alignSelf: 'center',
-  };
-};
diff --git a/packages/app/components/trip/TripForm.tsx b/packages/app/components/trip/TripForm.tsx
new file mode 100644
index 000000000..727ef8af7
--- /dev/null
+++ b/packages/app/components/trip/TripForm.tsx
@@ -0,0 +1,100 @@
+import React from 'react';
+import {
+  Form as OriginalForm,
+  FormInput,
+  FormSelect as OriginalFormSelect,
+  YStack,
+  SubmitButton,
+} from '@packrat/ui';
+import { useRouter } from 'app/hooks/router';
+import { useAddTrip } from 'app/hooks/trips';
+import { addTripForm } from '@packrat/validations/src/validations/tripRoutesValidator';
+import { formatCreateTripValuesForAPI } from 'app/utils/tripUtils';
+import { TripDateRangeCard } from './TripCards';
+import { getEnumValues } from 'app/utils/getEnumValues';
+import { formatTripActivityLabel } from 'app/utils/tripUtils';
+
+const Form: any = OriginalForm;
+const FormSelect: any = OriginalFormSelect;
+
+interface TripFormProps {
+  tripStore: any;
+  dateRange: any;
+  setDateRange: (range: any) => void;
+  isValid: boolean;
+}
+
+const isPublicOptions = ['For me only', 'Public'].map((key, index) => ({
+  label: key,
+  value: String(index),
+}));
+
+export const TripForm = ({
+  tripStore,
+  dateRange,
+  setDateRange,
+  isValid,
+}: TripFormProps) => {
+  const { addTrip, isSuccess, data: response } = useAddTrip();
+  const router = useRouter();
+
+  const handleCreateTrip = async (values) => {
+    const data = {
+      ...formatCreateTripValuesForAPI(tripStore),
+      ...values,
+    };
+
+    addTrip(data);
+  };
+  if (isSuccess && response) {
+    router.push(`/trip/${response.id}`);
+  }
+
+  return (
+    <Form
+      validationSchema={addTripForm}
+      onSubmit={handleCreateTrip}
+      defaultValues={{ is_public: '0', activity: ActivityOptions[0].value }}
+    >
+      <YStack style={{ gap: 16 }}>
+        <FormInput placeholder="Trip Name" name="name" />
+        <FormInput placeholder="Trip Description" name="description" />
+        <TripDateRangeCard dateRange={dateRange} setDateRange={setDateRange} />
+        <FormSelect
+          options={ActivityOptions}
+          label="Activity"
+          placeholder="Select Activity"
+          fullWidth
+          name="activity"
+        />
+        <FormSelect
+          options={isPublicOptions}
+          label="Access"
+          placeholder="Is Public"
+          fullWidth
+          name="is_public"
+        />
+        <SubmitButton disabled={!isValid} onSubmit={handleCreateTrip}>
+          Save Trip
+        </SubmitButton>
+      </YStack>
+    </Form>
+  );
+};
+
+enum TripActivity {
+  TRIP = 'trip',
+  RUNNING = 'running',
+  BIKING = 'biking',
+  CAMPING = 'camping',
+  FISHING = 'fishing',
+  TREKKING = 'trekking',
+  ROCK_CLIMBING = 'rock-climbing',
+  HIKING = 'hiking',
+  SWIMMING = 'swimming',
+}
+
+const ActivityOptions = getEnumValues(TripActivity).map((activity) => ({
+  label: formatTripActivityLabel(activity.toString()),
+  value: activity,
+}));
diff --git a/packages/app/components/trip/createTripModal.tsx b/packages/app/components/trip/createTripModal.tsx
deleted file mode 100644
index 18af444d3..000000000
--- a/packages/app/components/trip/createTripModal.tsx
+++ /dev/null
@@ -1,159 +0,0 @@
-import React from 'react';
-import {
-  BaseModal,
-  Form as OriginalForm,
-  FormInput,
-  FormSelect as OrignalFormSelect,
-  RStack,
-  RText,
-} from '@packrat/ui';
-import { useRouter } from 'app/hooks/router';
-import { useAddTrip } from 'app/hooks/trips';
-import { addTripForm } from '@packrat/validations/src/validations/tripRoutesValidator';
-import { useFormSubmitTrigger } from '@packrat/ui/src/form';
-import { useUserPackById } from 'app/modules/pack';
-import { formatCreateTripValuesForAPI } from 'app/utils/tripUtils';
-
-const Form: any = OriginalForm;
-const FormSelect: any = OrignalFormSelect;
-
-interface SaveTripContainerProps {
-  tripStore: any;
-}
-
-const isPublicOptions = ['For me only', 'Public'].map((key, index) => ({
-  label: key,
-  value: String(index),
-}));
-
-export const SaveTripContainer = ({ tripStore }: SaveTripContainerProps) => {
-  const { addTrip, isSuccess, data: response } = useAddTrip();
-  const [formRef, submitTrigger] = useFormSubmitTrigger();
-  const router = useRouter();
-  const selectedPack = useUserPackById();
-
-  const handleCreateTrip = async (closeModal, values) => {
-    const data = {
-      ...formatCreateTripValuesForAPI(tripStore),
-      ...values,
-    };
-
-    addTrip(data);
-    closeModal();
-  };
-  if (isSuccess && response) {
-    router.push(`/trip/${response.id}`);
-  }
-
-  return (
-    <BaseModal
-      title="Save Trip"
-      trigger="Save Trip"
-      footerButtons={[
-        {
-          label: 'Save',
-          color: '#6F9CDE',
-          onClick: (_, closeModal) => {
-            if (typeof submitTrigger === 'function') {
-              submitTrigger(closeModal);
-            } else if (
-              submitTrigger &&
-              typeof submitTrigger.current?.submit === 'function'
-            ) {
-              submitTrigger.current.submit(closeModal);
-            }
-          },
-        },
-      ]}
-    >
-      <Form
-        validationSchema={addTripForm}
-        ref={formRef}
-        onSubmit={handleCreateTrip}
-        defaultValues={{ is_public: '0' }}
-      >
-        <RStack style={{ gap: 8 }}>
-          <FormInput placeholder="Trip Name" name="name" />
-          <FormInput placeholder="Trip Description" name="description" />
-          <>
-            {/* <Text mt={4}>Duration</Text>
-          <Input
-            placeholder="Number of nights"
-            min={0}
-            max={100}
-            onChange={(event) => setNumberOfNights(event.target.value)}
-          />
-
-          <HStack mt={4}>
-
-            <Input placeholder="Trip Start Date" onChange={event => setStartDate(event.target.value)} />
-            <Input placeholder="Trip End Date" onChange={event => setEndDate(event.target.value)} ml={4} />
-          </HStack>
-
-          <View style={{ marginTop: 20, marginBottom: 20 }}>
-
-            <Picker
-              style={{ height: 30, borderRadius: 5, borderColor: "rgb(212, 212, 212)", color: "rgb(23, 23, 23)", backgroundColor: "rgba(0, 0, 0, 0)" }}
-              selectedValue={isPublic}
-              onValueChange={handleValueChange}>
-              <Picker.Item label="Yes" value="true" />
-              <Picker.Item label="For me only" value="false" />
-            </Picker>
-
-          </View>
-
-            <Input
-              placeholder="Trip Start Date"
-              onChange={(event) => setStartDate(event.target.value)}
-            />
-            <Input
-              placeholder="Trip End Date"
-              onChange={(event) => setEndDate(event.target.value)}
-              ml={4}
-            />
-          </HStack> */}
-
-            <FormSelect
-              options={isPublicOptions}
-              placeholder="Is Public"
-              name="is_public"
-              style={{ marginTop: 4, marginBottom: 4 }}
-              width={150}
-            />
-          </>
-          {tripStore?.weather ? (
-            <>
-              <RText>Trip Weather</RText>
-              <RText>
-                Temparature - {tripStore?.weather?.main?.temp}, Humidity -{' '}
-                {tripStore?.weather?.main?.humidity}
-              </RText>
-            </>
-          ) : null}
-          <RStack style={{ flexDirection: 'row' }}>
-            <RText>Pack - </RText>
-            <RText>{selectedPack?.name}</RText>
-          </RStack>
-          <RStack style={{ flexDirection: 'row' }}>
-            <RText>Trip Location - </RText>
-            <RText>{tripStore?.destination}</RText>
-          </RStack>
-          {tripStore.duration ? (
-            <>
-              <RStack style={{ flexDirection: 'row' }}>
-                <RText>Selected Date Range - </RText>
-                <RText>
-                  {tripStore.duration.startDate} - {tripStore.duration.endDate}
-                </RText>
-              </RStack>
-              <RStack style={{ flexDirection: 'row' }}>
-                <RText>Duration {'(Number of nights) - '} </RText>
-                <RText>{tripStore.duration.numberOfNights}</RText>
-              </RStack>
-            </>
-          ) : null}
-        </RStack>
-      </Form>
-    </BaseModal>
-  );
-};
diff --git a/packages/app/hooks/trips/useCreateTripForm.ts b/packages/app/hooks/trips/useCreateTripForm.ts
index 54a47f8e7..4fbca111c 100644
--- a/packages/app/hooks/trips/useCreateTripForm.ts
+++ b/packages/app/hooks/trips/useCreateTripForm.ts
@@ -44,11 +44,17 @@ export const useCreateTripForm = (currentDestination, photonDetails) => {
     validate(createTripFormValues);
   }, [createTripFormValues, validate]);
 
+  const dateRange = {
+    start_date: createTripFormValues.start_date,
+    end_date: createTripFormValues.end_date,
+  };
+
   return {
     tripStore: createTripFormValues,
     isValid,
     togglePlace,
     setTripValue,
+    dateRange,
     setDateRange,
   };
 };
diff --git a/packages/app/modules/map/screens/DestinationScreen/DestinationScreen.tsx b/packages/app/modules/map/screens/DestinationScreen/DestinationScreen.tsx
index 754630c24..9aaeb518e 100644
--- a/packages/app/modules/map/screens/DestinationScreen/DestinationScreen.tsx
+++ b/packages/app/modules/map/screens/DestinationScreen/DestinationScreen.tsx
@@ -112,47 +112,43 @@ export const DestinationScreen = () => {
 
   return (
     <Layout>
-      <View style={styles.container}>
-        <ScrollView contentContainerStyle={{ width: '100%' }}>
-          <View style={{ padding: 2 }}>
-            {Platform.OS === 'web' ? (
-              <PlacesAutocomplete
-                onSelect={handleSearchSelect}
-                placeholder={'Search by park, city, or trail'}
-              />
-            ) : (
-              <DestinationSearchMobile />
-            )}
-          </View>
-          <RStack
+      <View style={{ padding: 2 }}>
+        {Platform.OS === 'web' ? (
+          <PlacesAutocomplete
+            onSelect={handleSearchSelect}
+            placeholder={'Search by park, city, or trail'}
+          />
+        ) : (
+          <DestinationSearchMobile />
+        )}
+      </View>
+      <RStack
+        style={{
+          gap: 24,
+          marginTop: 16,
+          flexDirection: gtSm ? 'row' : 'column',
+          position: 'relative',
+        }}
+      >
+        <AsyncView
+          isError={isMapError}
+          errorComponentProps={{
+            message: 'Failed to fetch map polygon',
+          }}
+          isLoading={isMapLoading}
+        >
+          <View
             style={{
-              gap: 24,
-              marginTop: 16,
-              flexDirection: gtSm ? 'row' : 'column',
-              position: 'relative',
+              flex: gtSm ? 1 : undefined,
+              width: gtSm ? 'auto' : '100%',
+              height: Platform.OS === 'web' ? 'auto' : 300,
             }}
           >
-            <AsyncView
-              isError={isMapError}
-              errorComponentProps={{
-                message: 'Failed to fetch map polygon',
-              }}
-              isLoading={isMapLoading}
-            >
-              <View
-                style={{
-                  flex: gtSm ? 1 : undefined,
-                  width: gtSm ? 'auto' : '100%',
-                  height: Platform.OS === 'web' ? 'auto' : 300,
-                }}
-              >
-                <Map shape={shape} />
-              </View>
-            </AsyncView>
-            <View style={{ width: gtSm ? 350 : '100%' }}>{detailsSection}</View>
-          </RStack>
-        </ScrollView>
-      </View>
+            <Map shape={shape} />
+          </View>
+        </AsyncView>
+        <View style={{ width: gtSm ? 350 : '100%' }}>{detailsSection}</View>
+      </RStack>
     </Layout>
   );
 };
@@ -160,11 +156,6 @@ export const DestinationScreen = () => {
 const loadStyles = (theme) => {
   const { isDark, currentTheme } = theme;
   return {
-    container: {
-      width: '100%',
-      maxWidth: 1440,
-      padding: 16,
-    },
     headerContainer: {
       alignSelf: 'center',
       width: '90%',
diff --git a/packages/app/modules/pack/components/AddPackForm.tsx b/packages/app/modules/pack/components/AddPackForm.tsx
index 5cb023af5..d37e8c5e0 100644
--- a/packages/app/modules/pack/components/AddPackForm.tsx
+++ b/packages/app/modules/pack/components/AddPackForm.tsx
@@ -89,7 +89,8 @@ export const AddPackForm = ({
                 width: '100%',
                 flexDirection: 'row',
                 justifyContent: 'space-between',
-                backgroundColor: currentTheme.colors.textSecondary,
+                borderColor: 'ActiveBorder',
+                borderWidth: 1,
                 alignItems: 'center',
                 borderRadius: 8,
                 padding: 12,
diff --git a/packages/app/modules/pack/screens/AddPackScreen.tsx b/packages/app/modules/pack/screens/AddPackScreen.tsx
index eb9b54df9..5a65fb3d9 100644
--- a/packages/app/modules/pack/screens/AddPackScreen.tsx
+++ b/packages/app/modules/pack/screens/AddPackScreen.tsx
@@ -39,6 +39,7 @@ export const AddPackScreen = ({
         style={{
           width: '100%',
           maxWidth: 440,
+          margin: 'auto',
         }}
       >
         <View style={{ padding: 24 }}>
@@ -54,8 +55,9 @@ export const AddPackScreen = ({
               jc="space-between"
               style={{
                 width: '100%',
-                backgroundColor: theme.currentTheme.colors.textSecondary,
                 alignItems: 'center',
+                borderColor: 'ActiveBorder',
+                borderWidth: 1,
                 borderRadius: 8,
                 padding: 12,
               }}
diff --git a/packages/app/modules/pack/widgets/AddPackContainer.tsx b/packages/app/modules/pack/widgets/AddPackContainer.tsx
index 2e1b9e56c..f82744b4a 100644
--- a/packages/app/modules/pack/widgets/AddPackContainer.tsx
+++ b/packages/app/modules/pack/widgets/AddPackContainer.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { BaseModal, useModal } from '@packrat/ui';
+import { BaseModal, RPrimaryButton, useModal } from '@packrat/ui';
 import { AddPackForm } from '../components';
 import { queryTrpc } from 'app/trpc';
 
@@ -11,7 +11,11 @@ export const AddPackContainer = ({
   onSuccess?: (packId: string) => void;
 }) => {
   return (
-    <BaseModal title="Add Pack" trigger="Add Pack" footerComponent={undefined}>
+    <BaseModal
+      title="Add Pack"
+      triggerComponent={<RPrimaryButton label="Add" />}
+      footerComponent={undefined}
+    >
       <PackModalContent isCreatingTrip={isCreatingTrip} onSuccess={onSuccess} />
     </BaseModal>
   );
diff --git a/packages/app/modules/pack/widgets/PackContainer.tsx b/packages/app/modules/pack/widgets/PackContainer.tsx
index 4a22ee1f6..ce0898748 100644
--- a/packages/app/modules/pack/widgets/PackContainer.tsx
+++ b/packages/app/modules/pack/widgets/PackContainer.tsx
@@ -63,15 +63,6 @@ export default function PackContainer() {
           {currentPack?.name}
         </RListItem>
       ) : null}
-      {currentPack ? (
-        <RStack
-          style={{
-            flex: 1,
-          }}
-        >
-          <TableContainerComponent currentPack={currentPack} />
-        </RStack>
-      ) : null}
     </View>
   );
 }
@@ -80,8 +71,6 @@ const loadStyles = () => ({
   mainContainer: {
     flexDirection: 'column',
     alignItems: 'center',
-    gap: 35,
     width: '100%',
-    padding: 20,
   },
 });
diff --git a/packages/app/screens/trip/TripDetailsComponents.tsx b/packages/app/screens/trip/TripDetailsComponents.tsx
index 8fe2990a7..a70beca89 100644
--- a/packages/app/screens/trip/TripDetailsComponents.tsx
+++ b/packages/app/screens/trip/TripDetailsComponents.tsx
@@ -19,7 +19,6 @@ const TableContainerComponent = ({ currentPack }) => {
 
   return (
     <View>
-      <TableContainer currentPack={data} />
       <AddItemModal
         currentPackId={currentPack.id || ''}
         currentPack={currentPack}
@@ -28,6 +27,7 @@ const TableContainerComponent = ({ currentPack }) => {
         // refetch={refetch}
         setRefetch={() => setRefetch((prev) => !prev)}
       />
+      <TableContainer currentPack={data} />
     </View>
   );
 };
diff --git a/packages/app/screens/trip/createTrip.tsx b/packages/app/screens/trip/createTrip.tsx
index 554f1970a..0c88ea1bd 100644
--- a/packages/app/screens/trip/createTrip.tsx
+++ b/packages/app/screens/trip/createTrip.tsx
@@ -1,115 +1,119 @@
-import React from 'react';
-import { RStack } from '@packrat/ui';
-import { FlatList, ScrollView } from 'react-native';
-import { theme } from '../../theme';
+import React, { useState } from 'react';
+import {
+  RPrimaryButton,
+  RSecondaryButton,
+  RStack,
+  RText,
+  XStack,
+  YStack,
+} from '@packrat/ui';
+import { FlatList, View } from 'react-native';
 import { useRef } from 'react';
 import { GearList } from '../../components/GearList/GearList';
-import { SaveTripContainer } from 'app/components/trip/createTripModal';
+import { TripForm } from 'app/components/trip/TripForm';
 import useTheme from '../../hooks/useTheme';
-import useCustomStyles from 'app/hooks/useCustomStyles';
 import { useCreateTripForm } from 'app/hooks/trips/useCreateTripForm';
 import { useTripsData } from './useTripsData';
-import {
-  TripMapCard,
-  TripParkCard,
-  TripSearchCard,
-  TripTrailCard,
-  TripActivityCard,
-  TripDateRangeCard,
-} from 'app/components/trip/TripCards';
+import Layout from 'app/components/layout/Layout';
+
+import { TripMapCard, TripSearchCard } from 'app/components/trip/TripCards';
 import { WeatherData } from 'app/components/weather/WeatherData';
 import { useFlatList } from 'app/hooks/useFlatList';
+import useResponsive from 'app/hooks/useResponsive';
+import { LayoutCard } from 'app/components/LayoutCard';
+import { MapPin } from '@tamagui/lucide-icons';
 
 const SECTIONS = {
-  SEARCH: 'SEARCH',
-  WEATHER: 'WEATHER',
-  TRAIL: 'TRAIL',
-  PARK: 'PARK',
-  PACK: 'PACK',
-  ACTIVITY: 'ACTIVITY',
-  DATE: 'DATE',
   MAP: 'MAP',
-  FOOTER: 'FOOTER',
+  PACK: 'PACK',
+  WEATHER: 'WEATHER',
 };
 
 function Trips() {
-  const styles = useCustomStyles(loadStyles);
-
   const placesAutoCompleteRef = useRef({});
+  const [isChangePlaceMode, setIsChangePlaceMode] = useState(false);
+  const { gtSm } = useResponsive();
   const {
     currentDestination,
     photonDetails,
     isPhotonLoading,
     hasPhotonError,
-    parksData,
-    filteredTrails,
     latLng,
   } = useTripsData();
 
-  const { isValid, setDateRange, togglePlace, tripStore, setTripValue } =
+  const { isValid, dateRange, setDateRange, tripStore, setTripValue } =
     useCreateTripForm(currentDestination, photonDetails);
 
-  const dateRange = {
-    start_date: tripStore.start_date,
-    end_date: tripStore.end_date,
-  };
-
   const { flatListData, keyExtractor, renderItem } = useFlatList(SECTIONS, {
-    [SECTIONS.SEARCH]: <TripSearchCard searchRef={placesAutoCompleteRef} />,
-    [SECTIONS.WEATHER]: latLng ? <WeatherData latLng={latLng} /> : null,
-    [SECTIONS.TRAIL]: (
-      <TripTrailCard
-        data={filteredTrails || []}
-        onToggle={(trail) => togglePlace('trails', trail)}
-        selectedValue={tripStore.trails?.map?.(({ id }) => id) || []}
+    [SECTIONS.MAP]: (
+      <TripMapCard
+        isLoading={isPhotonLoading}
+        isMapError={hasPhotonError}
+        shape={photonDetails}
+        onVisibleBoundsChange={(bounds) => {
+          setTripValue('bounds', bounds);
+        }}
       />
     ),
-    [SECTIONS.PARK]: (
-      <TripParkCard
-        data={parksData || []}
-        onToggle={(park) => togglePlace('parks', park)}
-        selectedValue={tripStore.parks?.map?.(({ id }) => id) || []}
-      />
+    [SECTIONS.WEATHER]: (
+      <LayoutCard>
+        <WeatherData latLng={latLng} />
+      </LayoutCard>
     ),
     [SECTIONS.PACK]: <GearList />,
-    [SECTIONS.ACTIVITY]: (
-      <TripActivityCard
-        selectedValue={tripStore.activity}
-        onChange={(activity) => setTripValue('activity', activity)}
-      />
-    ),
-    [SECTIONS.DATE]: (
-      <TripDateRangeCard dateRange={dateRange} setDateRange={setDateRange} />
-    ),
-    [SECTIONS.MAP]:
-      !hasPhotonError && photonDetails ? (
-        <TripMapCard
-          isLoading={isPhotonLoading}
-          shape={photonDetails}
-          onVisibleBoundsChange={(bounds) => {
-            setTripValue('bounds', bounds);
-          }}
-        />
-      ) : null,
-    [SECTIONS.FOOTER]: isValid && (
-      <RStack style={{ marginBottom: 20 }}>
-        <SaveTripContainer tripStore={tripStore} />
-      </RStack>
-    ),
   });
 
   return (
-    <ScrollView nestedScrollEnabled={true}>
-      <RStack style={styles.mutualStyles}>
-        <RStack style={styles.container}>
-          <FlatList
-            data={flatListData}
-            keyExtractor={keyExtractor}
-            renderItem={renderItem}
-          />
-        </RStack>
-      </RStack>
-    </ScrollView>
+    <Layout>
+      {(isChangePlaceMode || !latLng) && (
+        <TripSearchCard
+          searchRef={placesAutoCompleteRef}
+          isChangePlaceMode={isChangePlaceMode}
+          onGoBack={() => setIsChangePlaceMode(false)}
+          onLocationSelect={() => setIsChangePlaceMode(false)}
+        />
+      )}
+      {latLng ? (
+        <YStack
+          style={{ gap: 16, display: isChangePlaceMode ? 'none' : 'flex' }}
+        >
+          <XStack style={{ justifyContent: 'space-between' }}>
+            <RText style={{ fontWeight: 700, fontSize: 24 }}>
+              Plan Your Trip
+            </RText>
+            <RSecondaryButton
+              icon={<MapPin />}
+              size={36}
+              onPress={() => setIsChangePlaceMode(true)}
+              label="Change Direction"
+            />
+          </XStack>
+          <RStack style={{ flexDirection: gtSm ? 'row' : 'column', gap: 16 }}>
+            <View style={{ width: gtSm ? 416 : '100%' }}>
+              <FlatList
+                data={flatListData}
+                keyExtractor={keyExtractor}
+                ItemSeparatorComponent={() => (
+                  <View style={{ width: '100%', height: 16 }} />
+                )}
+                renderItem={renderItem}
+              />
+            </View>
+            <LayoutCard
+              title="Trip Details"
+              style={{ flex: 1, alignSelf: 'flex-start' }}
+            >
+              <TripForm
+                isValid={isValid}
+                dateRange={dateRange}
+                setDateRange={setDateRange}
+                tripStore={tripStore}
+              />
+            </LayoutCard>
+          </RStack>
+        </YStack>
+      ) : null}
+    </Layout>
   );
 }
 
diff --git a/packages/app/screens/trip/useTripsData.ts b/packages/app/screens/trip/useTripsData.ts
index bba7431eb..b8d553662 100644
--- a/packages/app/screens/trip/useTripsData.ts
+++ b/packages/app/screens/trip/useTripsData.ts
@@ -13,13 +13,16 @@ export const useTripsData = () => {
   const {
     data: photonDetails,
     isError: hasPhotonError,
-    isLoading: isPhotonLoading,
-  } = useGetPhotonDetails({
-    properties: {
-      osm_id: osm?.osmId ?? '',
-      osm_type: osm?.osmType ?? '',
+    isFetching: isPhotonLoading,
+  } = useGetPhotonDetails(
+    {
+      properties: {
+        osm_id: osm?.osmId ?? '',
+        osm_type: osm?.osmType ?? '',
+      },
     },
-  });
+    false,
+  );
 
   const {
     error: parksError,
diff --git a/packages/ui/src/MainContentWeb/index.tsx b/packages/ui/src/MainContentWeb/index.tsx
index 39874bfae..955ed6e08 100644
--- a/packages/ui/src/MainContentWeb/index.tsx
+++ b/packages/ui/src/MainContentWeb/index.tsx
@@ -10,5 +10,10 @@ interface ExtendedViewProps extends ViewProps {
 export const MainContentWeb: React.FC<ExtendedViewProps> = (props) => {
   const backgroundColor = props.isDark ? '#000000' : '#F5F5F5';
 
-  return <View style={{ backgroundColor, paddingTop: 80 }} {...props} />;
+  return (
+    <View
+      style={{ backgroundColor, paddingTop: 80, minHeight: '100vh' }}
+      {...props}
+    />
+  );
 };
diff --git a/packages/ui/src/RPrimaryButton/index.tsx b/packages/ui/src/RPrimaryButton/index.tsx
index ee1a26dab..321fadc8e 100644
--- a/packages/ui/src/RPrimaryButton/index.tsx
+++ b/packages/ui/src/RPrimaryButton/index.tsx
@@ -17,7 +17,8 @@ const StyledRPrimaryButton = styled(Button, {
   borderRadius: 8,
   cursor: 'pointer',
   hoverStyle: {
-    backgroundColor: 'transparent',
+    opacity: 0.8,
+    backgroundColor: '#232323',
   },
 
   variants: {
diff --git a/packages/ui/src/RSecondaryButton/index.tsx b/packages/ui/src/RSecondaryButton/index.tsx
index e4cddf6a8..c776633ab 100644
--- a/packages/ui/src/RSecondaryButton/index.tsx
+++ b/packages/ui/src/RSecondaryButton/index.tsx
@@ -17,7 +17,7 @@ const StyledSecondaryButton = styled(Button, {
   borderRadius: 8,
   cursor: 'pointer',
   hoverStyle: {
-    backgroundColor: 'transparent',
+    opacity: 0.8,
   },
 
   variants: {
diff --git a/packages/ui/src/form/components/SubmitButton.tsx b/packages/ui/src/form/components/SubmitButton.tsx
index 526d838f1..055ccaec0 100644
--- a/packages/ui/src/form/components/SubmitButton.tsx
+++ b/packages/ui/src/form/components/SubmitButton.tsx
@@ -11,8 +11,19 @@ export const SubmitButton = <T extends {}>({
   const safeStyle = typeof style === 'object' && style !== null ? style : {};
   return (
     <LmSubmitButtonRhf
+      $theme-dark={{ color: 'text', backgroundColor: '$colors.background' }}
+      $theme-light={{
+        color: 'text',
+        backgroundColor: '#232323',
+        color: '#ffffff',
+        fontWeight: 700,
+        hoverStyle: {
+          backgroundColor: '#232323',
+          opacity: 0.8,
+        },
+      }}
+      disabledStyle={{ opacity: 0.6 }}
       style={{
-        backgroundColor: '#0C66A1' as any,
         ...safeStyle,
       }}
       {...props}
diff --git a/packages/validations/src/validations/tripRoutesValidator/tripRoutesValidator.ts b/packages/validations/src/validations/tripRoutesValidator/tripRoutesValidator.ts
index 9be361e66..27afb355a 100644
--- a/packages/validations/src/validations/tripRoutesValidator/tripRoutesValidator.ts
+++ b/packages/validations/src/validations/tripRoutesValidator/tripRoutesValidator.ts
@@ -4,8 +4,9 @@ import { TripActivity } from './enums';
 const tripActivityValues = Object.values(TripActivity) as [string, ...string[]];
 
 export const addTripForm = z.object({
-  name: z.string().nonempty(),
-  description: z.string().nonempty(),
+  name: z.string(),
+  description: z.string(),
+  activity: z.enum(tripActivityValues),
   is_public: z.union([z.literal('0'), z.literal('1')]),
 });
 
@@ -64,11 +65,12 @@ export const addTrip = addTripDetails.merge(addTripForm);
 export const editTrip = z.object({
   id: z.string(),
   name: z.string().optional(),
-  duration: z.string().optional(),
+  description: z.string().optional(),
+  activity: z.enum(tripActivityValues).optional(),
   start_date: z.string().optional(),
   end_date: z.string().optional(),
   destination: z.string().optional(),
-  is_public: z.boolean().optional(),
+  is_public: z.union([z.literal('0'), z.literal('1')]),
 });
 
 export const deleteTrip = z.object({

From d47281bfae92c0d053aab65c2cb52bc7cd3f9c62 Mon Sep 17 00:00:00 2001
From: Anmol Verma <anmolverma2810@gmail.com>
Date: Fri, 13 Dec 2024 23:24:47 +0530
Subject: [PATCH 21/66] style changes

---
 packages/app/screens/trip/createTrip.tsx   |  4 ++++
 packages/ui/src/RSecondaryButton/index.tsx | 23 +++++++++++-----------
 2 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/packages/app/screens/trip/createTrip.tsx b/packages/app/screens/trip/createTrip.tsx
index 0c88ea1bd..c2588163b 100644
--- a/packages/app/screens/trip/createTrip.tsx
+++ b/packages/app/screens/trip/createTrip.tsx
@@ -33,6 +33,8 @@ function Trips() {
   const placesAutoCompleteRef = useRef({});
   const [isChangePlaceMode, setIsChangePlaceMode] = useState(false);
   const { gtSm } = useResponsive();
+
+  const { currentTheme } = useTheme();
   const {
     currentDestination,
     photonDetails,
@@ -84,6 +86,8 @@ function Trips() {
             <RSecondaryButton
               icon={<MapPin />}
               size={36}
+              color={currentTheme.colors.text}
+              borderWidth={2}
               onPress={() => setIsChangePlaceMode(true)}
               label="Change Direction"
             />
diff --git a/packages/ui/src/RSecondaryButton/index.tsx b/packages/ui/src/RSecondaryButton/index.tsx
index a896faf8c..08b1160ca 100644
--- a/packages/ui/src/RSecondaryButton/index.tsx
+++ b/packages/ui/src/RSecondaryButton/index.tsx
@@ -10,14 +10,11 @@ const StyledSecondaryButton = styled(Button, {
   backgroundColor: 'transparent',
   color: '#7e7f80',
   borderWidth: 0,
-  fontWeight: 'bold',
+  fontWeight: 500,
   fontSize: 16,
-  padding: 10,
+  padding: 2,
   borderRadius: 8,
   cursor: 'pointer',
-  hoverStyle: {
-    opacity: 0.8,
-  },
 
   variants: {
     disabled: {
@@ -29,12 +26,12 @@ const StyledSecondaryButton = styled(Button, {
     },
     size: {
       sm: {
-        fontSize: 14,
+        fontSize: 12,
         paddingVertical: 8,
         paddingHorizontal: 16,
       },
       lg: {
-        fontSize: 18,
+        fontSize: 14,
         paddingVertical: 12,
         paddingHorizontal: 24,
       },
@@ -50,10 +47,12 @@ const RSecondaryButton: React.FC<RSecondaryButtonProps> = ({
   disabled,
   size,
   ...props
-}) => (
-  <StyledSecondaryButton disabled={disabled} size={size} {...props}>
-    {label}
-  </StyledSecondaryButton>
-);
+}) => {
+  return (
+    <StyledSecondaryButton disabled={disabled} size={size} {...props}>
+      {label}
+    </StyledSecondaryButton>
+  );
+};
 
 export default RSecondaryButton;

From d62f29cad8cdfc593ba0ea3b08d4b2681498fdd3 Mon Sep 17 00:00:00 2001
From: Anmol Verma <anmolverma2810@gmail.com>
Date: Sat, 14 Dec 2024 00:06:54 +0530
Subject: [PATCH 22/66] move buttons from ui to app

---
 .../components}/RPrimaryButton/index.tsx      |  0
 .../components}/RSecondaryButton/index.tsx    | 23 +++++++++++++++----
 .../trip/TripCards/TripSearchCard.tsx         |  3 ++-
 .../modules/item/components/AddItemModal.tsx  |  3 ++-
 .../item/components/ImportItemModal.tsx       |  3 ++-
 .../modules/pack/widgets/AddPackContainer.tsx |  3 ++-
 packages/app/screens/trip/createTrip.tsx      | 11 ++-------
 packages/ui/src/index.tsx                     |  4 ----
 8 files changed, 29 insertions(+), 21 deletions(-)
 rename packages/{ui/src => app/components}/RPrimaryButton/index.tsx (100%)
 rename packages/{ui/src => app/components}/RSecondaryButton/index.tsx (71%)

diff --git a/packages/ui/src/RPrimaryButton/index.tsx b/packages/app/components/RPrimaryButton/index.tsx
similarity index 100%
rename from packages/ui/src/RPrimaryButton/index.tsx
rename to packages/app/components/RPrimaryButton/index.tsx
diff --git a/packages/ui/src/RSecondaryButton/index.tsx b/packages/app/components/RSecondaryButton/index.tsx
similarity index 71%
rename from packages/ui/src/RSecondaryButton/index.tsx
rename to packages/app/components/RSecondaryButton/index.tsx
index 08b1160ca..d94ba3390 100644
--- a/packages/ui/src/RSecondaryButton/index.tsx
+++ b/packages/app/components/RSecondaryButton/index.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { styled, Button, ButtonProps } from 'tamagui';
+import useTheme from 'app/hooks/useTheme';
 
 interface RSecondaryButtonProps extends ButtonProps {
   label: string;
@@ -7,15 +8,17 @@ interface RSecondaryButtonProps extends ButtonProps {
 
 const StyledSecondaryButton = styled(Button, {
   name: 'RSecondaryButton',
-  backgroundColor: 'transparent',
-  color: '#7e7f80',
   borderWidth: 0,
-  fontWeight: 500,
+  fontWeight: '500',
   fontSize: 16,
   padding: 2,
   borderRadius: 8,
   cursor: 'pointer',
 
+  hoverStyle: {
+    opacity: 0.8,
+  },
+
   variants: {
     disabled: {
       true: {
@@ -48,8 +51,20 @@ const RSecondaryButton: React.FC<RSecondaryButtonProps> = ({
   size,
   ...props
 }) => {
+  const { currentTheme } = useTheme();
+
+  const dynamicStyle = {
+    backgroundColor: currentTheme.colors.background,
+    color: currentTheme.colors.text,
+  };
+
   return (
-    <StyledSecondaryButton disabled={disabled} size={size} {...props}>
+    <StyledSecondaryButton
+      disabled={disabled}
+      size={size}
+      style={dynamicStyle}
+      {...props}
+    >
       {label}
     </StyledSecondaryButton>
   );
diff --git a/packages/app/components/trip/TripCards/TripSearchCard.tsx b/packages/app/components/trip/TripCards/TripSearchCard.tsx
index a0869c960..816944315 100644
--- a/packages/app/components/trip/TripCards/TripSearchCard.tsx
+++ b/packages/app/components/trip/TripCards/TripSearchCard.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
-import { RSecondaryButton, RText, YStack } from '@packrat/ui';
+import { RText, YStack } from '@packrat/ui';
 import useTheme from 'app/hooks/useTheme';
 import { useGEOLocationSearch } from 'app/hooks/geojson';
+import RSecondaryButton from 'app/components/RSecondaryButton';
 
 import { FontAwesome } from '@expo/vector-icons';
 import { View } from 'react-native';
diff --git a/packages/app/modules/item/components/AddItemModal.tsx b/packages/app/modules/item/components/AddItemModal.tsx
index e865beb8d..a0b827352 100644
--- a/packages/app/modules/item/components/AddItemModal.tsx
+++ b/packages/app/modules/item/components/AddItemModal.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
 import { AddItem } from './AddItem';
 import useTheme from 'app/hooks/useTheme';
-import { BaseModal, RPrimaryButton } from '@packrat/ui';
+import { BaseModal } from '@packrat/ui';
+import RPrimaryButton from 'app/components/RPrimaryButton';
 
 interface AddItemModalProps {
   currentPackId: string;
diff --git a/packages/app/modules/item/components/ImportItemModal.tsx b/packages/app/modules/item/components/ImportItemModal.tsx
index a004e01e2..15dbdd11e 100644
--- a/packages/app/modules/item/components/ImportItemModal.tsx
+++ b/packages/app/modules/item/components/ImportItemModal.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
 import { ImportItem } from './ImportItem';
-import { BaseModal, RSecondaryButton } from '@packrat/ui';
+import { BaseModal } from '@packrat/ui';
 import useTheme from 'app/hooks/useTheme';
+import RSecondaryButton from 'app/components/RSecondaryButton';
 
 interface ImportItemModalProps {
   currentPackId: string;
diff --git a/packages/app/modules/pack/widgets/AddPackContainer.tsx b/packages/app/modules/pack/widgets/AddPackContainer.tsx
index f82744b4a..c93557808 100644
--- a/packages/app/modules/pack/widgets/AddPackContainer.tsx
+++ b/packages/app/modules/pack/widgets/AddPackContainer.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
-import { BaseModal, RPrimaryButton, useModal } from '@packrat/ui';
+import { BaseModal, useModal } from '@packrat/ui';
 import { AddPackForm } from '../components';
 import { queryTrpc } from 'app/trpc';
+import RPrimaryButton from 'app/components/RPrimaryButton';
 
 export const AddPackContainer = ({
   isCreatingTrip,
diff --git a/packages/app/screens/trip/createTrip.tsx b/packages/app/screens/trip/createTrip.tsx
index c2588163b..44c236dfe 100644
--- a/packages/app/screens/trip/createTrip.tsx
+++ b/packages/app/screens/trip/createTrip.tsx
@@ -1,12 +1,5 @@
 import React, { useState } from 'react';
-import {
-  RPrimaryButton,
-  RSecondaryButton,
-  RStack,
-  RText,
-  XStack,
-  YStack,
-} from '@packrat/ui';
+import { RStack, RText, XStack, YStack } from '@packrat/ui';
 import { FlatList, View } from 'react-native';
 import { useRef } from 'react';
 import { GearList } from '../../components/GearList/GearList';
@@ -15,6 +8,7 @@ import useTheme from '../../hooks/useTheme';
 import { useCreateTripForm } from 'app/hooks/trips/useCreateTripForm';
 import { useTripsData } from './useTripsData';
 import Layout from 'app/components/layout/Layout';
+import RSecondaryButton from 'app/components/RSecondaryButton';
 
 import { TripMapCard, TripSearchCard } from 'app/components/trip/TripCards';
 import { WeatherData } from 'app/components/weather/WeatherData';
@@ -86,7 +80,6 @@ function Trips() {
             <RSecondaryButton
               icon={<MapPin />}
               size={36}
-              color={currentTheme.colors.text}
               borderWidth={2}
               onPress={() => setIsChangePlaceMode(true)}
               label="Change Direction"
diff --git a/packages/ui/src/index.tsx b/packages/ui/src/index.tsx
index 764eb6903..75af69e4a 100644
--- a/packages/ui/src/index.tsx
+++ b/packages/ui/src/index.tsx
@@ -14,10 +14,8 @@ import RImage from './RImage';
 import RInput from './RInput';
 import RLabel from './RLabel';
 import RLink from './RLink';
-import RPrimaryButton from './RPrimaryButton';
 import RRadio from './RRadio';
 import RScrollView from './RScrollview';
-import RSecondaryButton from './RSecondaryButton';
 
 import RSelect from './RSelect';
 import RSeparator from './RSeparator';
@@ -66,10 +64,8 @@ export {
   RLabel,
   RLink,
   RParagraph,
-  RPrimaryButton,
   RRadio,
   RScrollView,
-  RSecondaryButton,
   RSelect,
   RSeparator,
   RSpinner,

From ce4641cb2d5f5e442e85ea17e388bc0e9d289eee Mon Sep 17 00:00:00 2001
From: Taron <taron.aleksanyan.20@gmail.com>
Date: Fri, 13 Dec 2024 22:40:48 +0400
Subject: [PATCH 23/66] add gear list component to create trip screen

---
 packages/app/components/GearList/GearList.tsx | 67 +++++++++++++++--
 packages/app/constants/api.ts                 |  5 +-
 .../pack/components/PackTable/PackSummary.tsx | 44 ++++++++++++
 .../components/PackTable/TableContainer.tsx   | 59 +++++----------
 .../components/PackTable/usePackTable.tsx     | 71 +------------------
 .../app/modules/pack/hooks/usePackSummary.ts  | 50 +++++++++++++
 .../modules/pack/widgets/AddPackContainer.tsx |  5 +-
 .../screens/trip/TripDetailsComponents.tsx    |  4 +-
 packages/app/screens/trip/createTrip.tsx      |  2 +-
 packages/app/utils/convertWeight.ts           |  2 +-
 10 files changed, 185 insertions(+), 124 deletions(-)
 create mode 100644 packages/app/modules/pack/components/PackTable/PackSummary.tsx
 create mode 100644 packages/app/modules/pack/hooks/usePackSummary.ts

diff --git a/packages/app/components/GearList/GearList.tsx b/packages/app/components/GearList/GearList.tsx
index 3ceacd540..cf2e21b81 100644
--- a/packages/app/components/GearList/GearList.tsx
+++ b/packages/app/components/GearList/GearList.tsx
@@ -4,29 +4,84 @@ import {
   RText as OriginalRText,
   View,
   XStack,
+  YStack,
 } from '@packrat/ui';
 import { AddPackContainer } from '../../modules/pack/widgets/AddPackContainer';
 import PackContainer from '../../modules/pack/widgets/PackContainer';
 import { useFetchSinglePack, usePackId } from 'app/modules/pack';
 import { LayoutCard } from 'app/components/LayoutCard';
+import { TableContainerComponent } from 'app/screens/trip/TripDetailsComponents';
+import { Accordion, Paragraph, Square } from 'tamagui';
+import { ChevronDown } from 'lucide-react-native';
+import { PackSummary } from 'app/modules/pack/components/PackTable/PackSummary';
+import { type WeightUnit } from 'app/utils/convertWeight';
 
 const RStack: any = OriginalRStack;
 const RText: any = OriginalRText;
 
 export const GearList = () => {
   const [isOpen, setIsOpen] = useState(false);
+  const [weightUnit, setWeightUnit] = useState<WeightUnit>('kg');
   const [packId, setPackIdParam] = usePackId();
   const { data: currentPack } = useFetchSinglePack(packId);
 
   return (
     <>
       <LayoutCard title="Your Pack">
-        <XStack style={{ alignItems: 'center' }}>
-          <View style={{ flex: 1 }}>
-            <PackContainer />
-          </View>
-          <AddPackContainer onSuccess={setPackIdParam} isCreatingTrip={true} />
-        </XStack>
+        <YStack style={{ gap: 16 }}>
+          <XStack style={{ alignItems: 'center' }}>
+            <View style={{ flex: 1 }}>
+              <PackContainer />
+            </View>
+            <AddPackContainer
+              onSuccess={setPackIdParam}
+              isCreatingTrip={true}
+            />
+          </XStack>
+          <LayoutCard>
+            <PackSummary
+              currentPack={currentPack}
+              setWeightUnit={setWeightUnit}
+              weightUnit={weightUnit}
+            />
+          </LayoutCard>
+          <Accordion
+            style={{ overflow: 'hidden', width: '100%' }}
+            type="multiple"
+          >
+            <Accordion.Item value="details">
+              <Accordion.Trigger
+                style={{
+                  flexDirection: 'row',
+                  justifyContent: 'space-between',
+                }}
+              >
+                {({ open }) => (
+                  <>
+                    <Paragraph style={{ fontWeight: 600 }}>
+                      Manage Pack
+                    </Paragraph>
+                    <Square rotate={open ? '180deg' : '0deg'} animation="quick">
+                      <ChevronDown size={24} />
+                    </Square>
+                  </>
+                )}
+              </Accordion.Trigger>
+              <Accordion.HeightAnimator animation="quick">
+                <Accordion.Content
+                  style={{
+                    padding: 20,
+                  }}
+                >
+                  <TableContainerComponent
+                    hideSummary
+                    currentPack={currentPack}
+                  />
+                </Accordion.Content>
+              </Accordion.HeightAnimator>
+            </Accordion.Item>
+          </Accordion>
+        </YStack>
       </LayoutCard>
     </>
   );
diff --git a/packages/app/constants/api.ts b/packages/app/constants/api.ts
index e53ab0aca..9a2d3a875 100644
--- a/packages/app/constants/api.ts
+++ b/packages/app/constants/api.ts
@@ -1,4 +1,5 @@
 import { API_URL } from '@packrat/config';
+import { Platform } from 'react-native';
 // const API_URL = import.meta.env.VITE_API_URL;
 
 /**
@@ -8,5 +9,5 @@ import { API_URL } from '@packrat/config';
  */
 
 // use this for android emulator
-// export const api = 'http://10.0.2.2:8787/api';
-export const api = API_URL;
+export const api = Platform.OS === 'web' ? API_URL : 'http://10.0.2.2:8787/api';
+// export const api = API_URL;
diff --git a/packages/app/modules/pack/components/PackTable/PackSummary.tsx b/packages/app/modules/pack/components/PackTable/PackSummary.tsx
new file mode 100644
index 000000000..b46a15338
--- /dev/null
+++ b/packages/app/modules/pack/components/PackTable/PackSummary.tsx
@@ -0,0 +1,44 @@
+import React, { type FC } from 'react';
+import { TotalWeightBox, WeightUnitDropdown } from './TableHelperComponents';
+import { RSeparator } from '@packrat/ui';
+import { type WeightUnit } from 'app/utils/convertWeight';
+import { usePackSummary } from 'app/modules/pack/hooks/usePackSummary';
+
+interface PackSummaryProps {
+  weightUnit: WeightUnit;
+  setWeightUnit: (itemValue: WeightUnit) => void;
+  currentPack: any;
+}
+
+export const PackSummary: FC<PackSummaryProps> = ({
+  currentPack,
+  weightUnit,
+  setWeightUnit,
+}) => {
+  const { totalBaseWeight, totalWaterWeight, totalFoodWeight, totalWeight } =
+    usePackSummary(currentPack?.items, weightUnit);
+  return (
+    <>
+      <TotalWeightBox
+        label="Base Weight"
+        weight={totalBaseWeight}
+        unit={weightUnit}
+      />
+      <TotalWeightBox
+        label="Water + Food Weight"
+        weight={totalWaterWeight + totalFoodWeight}
+        unit={weightUnit}
+      />
+      <RSeparator style={{ marginVertical: 10 }} />
+      <TotalWeightBox
+        label="Total Weight"
+        weight={totalWeight}
+        unit={weightUnit}
+      />
+      <WeightUnitDropdown
+        value={weightUnit}
+        onChange={(itemValue: string) => setWeightUnit(itemValue as any)}
+      />
+    </>
+  );
+};
diff --git a/packages/app/modules/pack/components/PackTable/TableContainer.tsx b/packages/app/modules/pack/components/PackTable/TableContainer.tsx
index b19a52fd5..d3c8f8e43 100644
--- a/packages/app/modules/pack/components/PackTable/TableContainer.tsx
+++ b/packages/app/modules/pack/components/PackTable/TableContainer.tsx
@@ -16,6 +16,7 @@ import { useSetItemQuantity } from 'app/modules/item';
 import { useDeletePackItem } from 'app/modules/pack/hooks';
 import { useOfflineStore } from 'app/atoms';
 import { LayoutCard } from 'app/components/LayoutCard';
+import { PackSummary } from './PackSummary';
 
 interface TableContainerProps {
   currentPack: any;
@@ -24,35 +25,27 @@ interface TableContainerProps {
   setRefetch?: React.Dispatch<React.SetStateAction<boolean>>;
   copy?: boolean;
   hasPermissions?: boolean;
+  hideSummary?: boolean;
 }
 
 export const TableContainer = ({
   currentPack,
   selectedPack,
   hasPermissions,
+  hideSummary = false,
   refetch,
   setRefetch = () => {},
   copy,
 }: TableContainerProps) => {
   const styles = useCustomStyles(loadStyles);
-  const {
-    isLoading,
-    error,
-    data,
-    totalBaseWeight,
-    totalFoodWeight,
-    totalWaterWeight,
-    totalWeight,
-    weightUnit,
-    setWeightUnit,
-    handleDuplicate,
-  } = usePackTable({
-    currentPack,
-    selectedPack,
-    refetch,
-    setRefetch,
-    copy,
-  });
+  const { isLoading, error, data, weightUnit, setWeightUnit, handleDuplicate } =
+    usePackTable({
+      currentPack,
+      selectedPack,
+      refetch,
+      setRefetch,
+      copy,
+    });
   const { setItemQuantity } = useSetItemQuantity();
   const { deletePackItem } = useDeletePackItem();
   const { connectionStatus } = useOfflineStore();
@@ -165,26 +158,13 @@ export const TableContainer = ({
 
             {copy && <RButton onPress={handleDuplicate}>Copy</RButton>}
 
-            <TotalWeightBox
-              label="Base Weight"
-              weight={totalBaseWeight}
-              unit={weightUnit}
-            />
-            <TotalWeightBox
-              label="Water + Food Weight"
-              weight={totalWaterWeight + totalFoodWeight}
-              unit={weightUnit}
-            />
-            <RSeparator style={styles.separator} />
-            <TotalWeightBox
-              label="Total Weight"
-              weight={totalWeight}
-              unit={weightUnit}
-            />
-            <WeightUnitDropdown
-              value={weightUnit}
-              onChange={(itemValue: string) => setWeightUnit(itemValue as any)}
-            />
+            {!hideSummary && (
+              <PackSummary
+                currentPack={currentPack}
+                weightUnit={weightUnit}
+                setWeightUnit={setWeightUnit}
+              />
+            )}
           </RStack>
         </LayoutCard>
       ) : (
@@ -224,9 +204,6 @@ const loadStyles = (theme: any) => {
       marginLeft: 15,
       color: currentTheme.colors.text,
     },
-    separator: {
-      marginVertical: 10,
-    },
     noItemsText: {
       fontWeight: 'bold',
       fontSize: 16,
diff --git a/packages/app/modules/pack/components/PackTable/usePackTable.tsx b/packages/app/modules/pack/components/PackTable/usePackTable.tsx
index 4defafd70..79ecbcffe 100644
--- a/packages/app/modules/pack/components/PackTable/usePackTable.tsx
+++ b/packages/app/modules/pack/components/PackTable/usePackTable.tsx
@@ -1,9 +1,7 @@
 import { useState } from 'react';
-import { convertWeight } from 'app/utils/convertWeight';
 import { useAuthUser } from 'app/modules/auth';
 import { useDuplicatePackItem } from '../../hooks/useDuplicatePackItem';
-import { useItemWeightUnit, ItemCategoryEnum } from 'app/modules/item';
-import { SMALLEST_ITEM_UNIT } from 'app/modules/item/constants';
+import { useItemWeightUnit } from 'app/modules/item';
 
 export const usePackTable = ({ currentPack, copy }) => {
   const user = useAuthUser();
@@ -29,9 +27,6 @@ export const usePackTable = ({ currentPack, copy }) => {
   };
 
   const data = currentPack?.items;
-  let totalFoodWeight = 0;
-  let totalWaterWeight = 0;
-  let totalBaseWeight = 0;
   const isLoading = !data;
   const error = false;
 
@@ -44,66 +39,6 @@ export const usePackTable = ({ currentPack, copy }) => {
     quantity?: number;
     unit?: string;
   }[] = [];
-  // for calculating the total.
-  /*
-      Todo better to move this all inside a utility function and pass them variables
-      */
-  data
-    ?.filter(
-      (item: {
-        id: string;
-        category?: { name: string };
-        weight?: number;
-        quantity?: number;
-        unit?: string;
-      }) => !checkedItems.includes(item.id),
-    )
-    .forEach(
-      (item: {
-        id: string;
-        category?: { name: string };
-        weight?: number;
-        quantity?: number;
-        unit?: string;
-      }) => {
-        const categoryName = item.category ? item.category.name : 'Undefined';
-        const itemWeight = Number(item.weight) || 0; // ensure it's a number
-        const itemQuantity = Number(item.quantity) || 0; // ensure it's a number
-        const itemUnit = item.unit || null;
-        if (!copy) {
-          switch (categoryName) {
-            case ItemCategoryEnum.ESSENTIALS: {
-              totalBaseWeight += convertWeight(
-                itemWeight * itemQuantity,
-                SMALLEST_ITEM_UNIT,
-                weightUnit,
-              );
-              break;
-            }
-            case ItemCategoryEnum.FOOD: {
-              totalFoodWeight += convertWeight(
-                itemWeight * itemQuantity,
-                SMALLEST_ITEM_UNIT,
-                weightUnit,
-              );
-              foodItems.push(item);
-              break;
-            }
-            case ItemCategoryEnum.WATER: {
-              totalWaterWeight += convertWeight(
-                itemWeight * itemQuantity,
-                SMALLEST_ITEM_UNIT,
-                weightUnit,
-              );
-              waterItem = item;
-              break;
-            }
-          }
-        }
-      },
-    );
-
-  const totalWeight = totalBaseWeight + totalWaterWeight + totalFoodWeight;
 
   const handleCheckboxChange = (itemId: string) => {
     setCheckedItems((prev: string[]) =>
@@ -133,12 +68,8 @@ export const usePackTable = ({ currentPack, copy }) => {
     isLoading,
     error,
     data,
-    totalFoodWeight,
-    totalWaterWeight,
-    totalBaseWeight,
     waterItem,
     foodItems,
-    totalWeight,
     handleCheckboxChange,
     groupedData,
   };
diff --git a/packages/app/modules/pack/hooks/usePackSummary.ts b/packages/app/modules/pack/hooks/usePackSummary.ts
new file mode 100644
index 000000000..c31565def
--- /dev/null
+++ b/packages/app/modules/pack/hooks/usePackSummary.ts
@@ -0,0 +1,50 @@
+import { ItemCategoryEnum } from 'app/modules/item';
+import { SMALLEST_ITEM_UNIT } from 'app/modules/item/constants';
+import { convertWeight, type WeightUnit } from 'app/utils/convertWeight';
+export const usePackSummary = (packItems: any, weightUnit: WeightUnit) => {
+  let totalFoodWeight = 0;
+  let totalWaterWeight = 0;
+  let totalBaseWeight = 0;
+
+  packItems?.forEach?.((item) => {
+    const categoryName = item.category?.name || 'Undefined';
+    const itemWeight = Number(item.weight) || 0;
+    const itemQuantity = Number(item.quantity) || 0;
+
+    switch (categoryName) {
+      case ItemCategoryEnum.ESSENTIALS: {
+        totalBaseWeight += convertWeight(
+          itemWeight * itemQuantity,
+          SMALLEST_ITEM_UNIT,
+          weightUnit,
+        );
+        break;
+      }
+      case ItemCategoryEnum.FOOD: {
+        totalFoodWeight += convertWeight(
+          itemWeight * itemQuantity,
+          SMALLEST_ITEM_UNIT,
+          weightUnit,
+        );
+        break;
+      }
+      case ItemCategoryEnum.WATER: {
+        totalWaterWeight += convertWeight(
+          itemWeight * itemQuantity,
+          SMALLEST_ITEM_UNIT,
+          weightUnit,
+        );
+        break;
+      }
+    }
+  });
+
+  const totalWeight = totalBaseWeight + totalWaterWeight + totalFoodWeight;
+
+  return {
+    totalBaseWeight,
+    totalFoodWeight,
+    totalWaterWeight,
+    totalWeight,
+  };
+};
diff --git a/packages/app/modules/pack/widgets/AddPackContainer.tsx b/packages/app/modules/pack/widgets/AddPackContainer.tsx
index f82744b4a..f21deb17b 100644
--- a/packages/app/modules/pack/widgets/AddPackContainer.tsx
+++ b/packages/app/modules/pack/widgets/AddPackContainer.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { BaseModal, RPrimaryButton, useModal } from '@packrat/ui';
 import { AddPackForm } from '../components';
 import { queryTrpc } from 'app/trpc';
+import { Plus } from '@tamagui/lucide-icons';
 
 export const AddPackContainer = ({
   isCreatingTrip,
@@ -13,7 +14,9 @@ export const AddPackContainer = ({
   return (
     <BaseModal
       title="Add Pack"
-      triggerComponent={<RPrimaryButton label="Add" />}
+      triggerComponent={
+        <RPrimaryButton size="$1.25" label="Create" icon={<Plus />} />
+      }
       footerComponent={undefined}
     >
       <PackModalContent isCreatingTrip={isCreatingTrip} onSuccess={onSuccess} />
diff --git a/packages/app/screens/trip/TripDetailsComponents.tsx b/packages/app/screens/trip/TripDetailsComponents.tsx
index a70beca89..522d99479 100644
--- a/packages/app/screens/trip/TripDetailsComponents.tsx
+++ b/packages/app/screens/trip/TripDetailsComponents.tsx
@@ -7,7 +7,7 @@ import { useFetchSinglePack, TableContainer } from 'app/modules/pack';
 import { RSkeleton, RText } from '@packrat/ui';
 import { AddItemModal } from 'app/modules/item';
 
-const TableContainerComponent = ({ currentPack }) => {
+const TableContainerComponent = ({ currentPack, hideSummary = false }) => {
   const { data, isLoading } = useFetchSinglePack(currentPack.id || currentPack);
   const [isAddItemModalOpen, setIsAddItemModalOpen] = useState(false);
   const [refetch, setRefetch] = useState(false);
@@ -27,7 +27,7 @@ const TableContainerComponent = ({ currentPack }) => {
         // refetch={refetch}
         setRefetch={() => setRefetch((prev) => !prev)}
       />
-      <TableContainer currentPack={data} />
+      <TableContainer currentPack={data} hideSummary={hideSummary} />
     </View>
   );
 };
diff --git a/packages/app/screens/trip/createTrip.tsx b/packages/app/screens/trip/createTrip.tsx
index 0c88ea1bd..a43ffb42c 100644
--- a/packages/app/screens/trip/createTrip.tsx
+++ b/packages/app/screens/trip/createTrip.tsx
@@ -89,7 +89,7 @@ function Trips() {
             />
           </XStack>
           <RStack style={{ flexDirection: gtSm ? 'row' : 'column', gap: 16 }}>
-            <View style={{ width: gtSm ? 416 : '100%' }}>
+            <View style={{ width: gtSm ? 450 : '100%' }}>
               <FlatList
                 data={flatListData}
                 keyExtractor={keyExtractor}
diff --git a/packages/app/utils/convertWeight.ts b/packages/app/utils/convertWeight.ts
index 671e25407..988bfd7fd 100644
--- a/packages/app/utils/convertWeight.ts
+++ b/packages/app/utils/convertWeight.ts
@@ -1,4 +1,4 @@
-type WeightUnit = 'g' | 'kg' | 'oz' | 'lb' | 'lbs';
+export type WeightUnit = 'g' | 'kg' | 'oz' | 'lb' | 'lbs';
 
 /**
  * Converts a weight from one unit to another.

From 7525205bc2860792f808d3c93036cd7665d0e65d Mon Sep 17 00:00:00 2001
From: Taron <taron.aleksanyan.20@gmail.com>
Date: Sat, 14 Dec 2024 00:39:28 +0400
Subject: [PATCH 24/66] enchance trip screen

---
 packages/app/components/GearList/GearList.tsx | 13 ++++++++----
 .../app/components/LayoutCard/LayoutCard.tsx  |  5 +++--
 .../components/PackTable/TableContainer.tsx   |  7 +++++--
 .../screens/trip/TripDetailsComponents.tsx    | 12 +++++++++--
 packages/app/screens/trip/createTrip.tsx      | 20 +++++++++++++++++--
 5 files changed, 45 insertions(+), 12 deletions(-)

diff --git a/packages/app/components/GearList/GearList.tsx b/packages/app/components/GearList/GearList.tsx
index cf2e21b81..35baaf1b9 100644
--- a/packages/app/components/GearList/GearList.tsx
+++ b/packages/app/components/GearList/GearList.tsx
@@ -12,9 +12,9 @@ import { useFetchSinglePack, usePackId } from 'app/modules/pack';
 import { LayoutCard } from 'app/components/LayoutCard';
 import { TableContainerComponent } from 'app/screens/trip/TripDetailsComponents';
 import { Accordion, Paragraph, Square } from 'tamagui';
-import { ChevronDown } from 'lucide-react-native';
 import { PackSummary } from 'app/modules/pack/components/PackTable/PackSummary';
 import { type WeightUnit } from 'app/utils/convertWeight';
+import { ChevronDown } from '@tamagui/lucide-icons';
 
 const RStack: any = OriginalRStack;
 const RText: any = OriginalRText;
@@ -49,7 +49,7 @@ export const GearList = () => {
             style={{ overflow: 'hidden', width: '100%' }}
             type="multiple"
           >
-            <Accordion.Item value="details">
+            <Accordion.Item value="details" style={{ width: '100%' }}>
               <Accordion.Trigger
                 style={{
                   flexDirection: 'row',
@@ -67,14 +67,19 @@ export const GearList = () => {
                   </>
                 )}
               </Accordion.Trigger>
-              <Accordion.HeightAnimator animation="quick">
+              <Accordion.HeightAnimator
+                animation="quick"
+                style={{ width: '100%' }}
+              >
                 <Accordion.Content
                   style={{
-                    padding: 20,
+                    width: '100%',
+                    flex: 1,
                   }}
                 >
                   <TableContainerComponent
                     hideSummary
+                    forceCardLayout
                     currentPack={currentPack}
                   />
                 </Accordion.Content>
diff --git a/packages/app/components/LayoutCard/LayoutCard.tsx b/packages/app/components/LayoutCard/LayoutCard.tsx
index 9c625fb1b..48227094d 100644
--- a/packages/app/components/LayoutCard/LayoutCard.tsx
+++ b/packages/app/components/LayoutCard/LayoutCard.tsx
@@ -13,7 +13,7 @@ export const LayoutCard: FC<LayoutCardProps> = ({
   children,
   ...props
 }) => {
-  const { currentTheme } = useTheme();
+  const { currentTheme, isDark } = useTheme();
 
   return (
     <View
@@ -22,7 +22,8 @@ export const LayoutCard: FC<LayoutCardProps> = ({
         {
           backgroundColor: currentTheme.colors.card,
           boxShadow: '0px 4px 8px rgba(0,0,0,0.1)',
-          border: '1px solid #e5e7eb',
+          borderWidth: 1,
+          borderColor: isDark ? '#424242' : '#e5e7eb',
           padding: 24,
           borderRadius: 8,
         },
diff --git a/packages/app/modules/pack/components/PackTable/TableContainer.tsx b/packages/app/modules/pack/components/PackTable/TableContainer.tsx
index d3c8f8e43..c8e193fad 100644
--- a/packages/app/modules/pack/components/PackTable/TableContainer.tsx
+++ b/packages/app/modules/pack/components/PackTable/TableContainer.tsx
@@ -26,6 +26,7 @@ interface TableContainerProps {
   copy?: boolean;
   hasPermissions?: boolean;
   hideSummary?: boolean;
+  forceCardLayout?: boolean;
 }
 
 export const TableContainer = ({
@@ -36,6 +37,7 @@ export const TableContainer = ({
   refetch,
   setRefetch = () => {},
   copy,
+  forceCardLayout = false,
 }: TableContainerProps) => {
   const styles = useCustomStyles(loadStyles);
   const { isLoading, error, data, weightUnit, setWeightUnit, handleDuplicate } =
@@ -72,7 +74,7 @@ export const TableContainer = ({
         <LayoutCard style={styles.layoutContainer}>
           <RStack>
             <RText style={styles.tableTitle}>Pack Items</RText>
-            {!responsive.sm && (
+            {!responsive.sm && !forceCardLayout && (
               <RStack
                 style={{
                   width: '100%',
@@ -128,7 +130,7 @@ export const TableContainer = ({
             <YGroup alignSelf="stretch" size="$8">
               {data.map((item) => (
                 <YGroup.Item key={item.id}>
-                  {responsive.sm ? (
+                  {responsive.sm || forceCardLayout ? (
                     <ItemCard
                       item={item}
                       value={item.quantity}
@@ -187,6 +189,7 @@ const loadStyles = (theme: any) => {
     layoutContainer: {
       flexDirection: 'column',
       justifyContent: 'space-between',
+      width: '100%',
       marginTop: 0,
       flex: 1,
       padding: 10,
diff --git a/packages/app/screens/trip/TripDetailsComponents.tsx b/packages/app/screens/trip/TripDetailsComponents.tsx
index 522d99479..8f8b644df 100644
--- a/packages/app/screens/trip/TripDetailsComponents.tsx
+++ b/packages/app/screens/trip/TripDetailsComponents.tsx
@@ -7,7 +7,11 @@ import { useFetchSinglePack, TableContainer } from 'app/modules/pack';
 import { RSkeleton, RText } from '@packrat/ui';
 import { AddItemModal } from 'app/modules/item';
 
-const TableContainerComponent = ({ currentPack, hideSummary = false }) => {
+const TableContainerComponent = ({
+  currentPack,
+  hideSummary = false,
+  forceCardLayout = false,
+}) => {
   const { data, isLoading } = useFetchSinglePack(currentPack.id || currentPack);
   const [isAddItemModalOpen, setIsAddItemModalOpen] = useState(false);
   const [refetch, setRefetch] = useState(false);
@@ -27,7 +31,11 @@ const TableContainerComponent = ({ currentPack, hideSummary = false }) => {
         // refetch={refetch}
         setRefetch={() => setRefetch((prev) => !prev)}
       />
-      <TableContainer currentPack={data} hideSummary={hideSummary} />
+      <TableContainer
+        currentPack={data}
+        hideSummary={hideSummary}
+        forceCardLayout={forceCardLayout}
+      />
     </View>
   );
 };
diff --git a/packages/app/screens/trip/createTrip.tsx b/packages/app/screens/trip/createTrip.tsx
index 32abd21f1..7c5e056e9 100644
--- a/packages/app/screens/trip/createTrip.tsx
+++ b/packages/app/screens/trip/createTrip.tsx
@@ -15,10 +15,11 @@ import { WeatherData } from 'app/components/weather/WeatherData';
 import { useFlatList } from 'app/hooks/useFlatList';
 import useResponsive from 'app/hooks/useResponsive';
 import { LayoutCard } from 'app/components/LayoutCard';
-import { MapPin } from '@tamagui/lucide-icons';
+import { MapPin, MapPinned } from '@tamagui/lucide-icons';
 
 const SECTIONS = {
   MAP: 'MAP',
+  PLACE_NAME: 'PLACE_NAME',
   PACK: 'PACK',
   WEATHER: 'WEATHER',
 };
@@ -51,6 +52,15 @@ function Trips() {
         }}
       />
     ),
+    [SECTIONS.PLACE_NAME]: (
+      <XStack style={{ gap: 10, flexWrap: 'wrap', alignItems: 'center' }}>
+        <MapPinned size={20} />
+        <RText style={{ fontSize: 20, fontWeight: 600 }}>
+          {photonDetails?.features?.[0]?.properties?.['name:en'] ||
+            photonDetails?.features?.[0]?.properties?.name}
+        </RText>
+      </XStack>
+    ),
     [SECTIONS.WEATHER]: (
       <LayoutCard>
         <WeatherData latLng={latLng} />
@@ -73,7 +83,13 @@ function Trips() {
         <YStack
           style={{ gap: 16, display: isChangePlaceMode ? 'none' : 'flex' }}
         >
-          <XStack style={{ justifyContent: 'space-between' }}>
+          <XStack
+            style={{
+              justifyContent: 'space-between',
+              alignItems: 'center',
+              flexWrap: 'wrap',
+            }}
+          >
             <RText style={{ fontWeight: 700, fontSize: 24 }}>
               Plan Your Trip
             </RText>

From 2527b905c499db97f6344f3da9623a6d93e07363 Mon Sep 17 00:00:00 2001
From: Taron <taron.aleksanyan.20@gmail.com>
Date: Sat, 14 Dec 2024 00:49:55 +0400
Subject: [PATCH 25/66] fix api url

---
 packages/app/constants/api.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/app/constants/api.ts b/packages/app/constants/api.ts
index 9a2d3a875..4b59ce0a2 100644
--- a/packages/app/constants/api.ts
+++ b/packages/app/constants/api.ts
@@ -9,5 +9,5 @@ import { Platform } from 'react-native';
  */
 
 // use this for android emulator
-export const api = Platform.OS === 'web' ? API_URL : 'http://10.0.2.2:8787/api';
-// export const api = API_URL;
+// export const api = Platform.OS === 'web' ? API_URL : 'http://10.0.2.2:8787/api';
+export const api = API_URL;

From 24c89e9e73b5cfbc84254b6b3b86b7d56a94d646 Mon Sep 17 00:00:00 2001
From: Anmol Verma <anmolverma2810@gmail.com>
Date: Sat, 14 Dec 2024 21:26:58 +0530
Subject: [PATCH 26/66] add filter badge for sorting and feedtype

---
 packages/app/components/FilterBadge.tsx       |  25 +++
 .../feed/components/FeedSearchFilter.tsx      | 142 ++++--------------
 .../app/modules/feed/screens/FeedScreen.tsx   |  25 +--
 packages/ui/src/ZDropdown/index.tsx           |  15 +-
 .../ui/src/form/components/InputWithIcon.tsx  |   2 +-
 5 files changed, 76 insertions(+), 133 deletions(-)
 create mode 100644 packages/app/components/FilterBadge.tsx

diff --git a/packages/app/components/FilterBadge.tsx b/packages/app/components/FilterBadge.tsx
new file mode 100644
index 000000000..846c3102b
--- /dev/null
+++ b/packages/app/components/FilterBadge.tsx
@@ -0,0 +1,25 @@
+import { RDropdownMenu, RStack } from '@packrat/ui';
+import React from 'react';
+
+const FilterBadge = ({ menuItems, selectedValue, onSelect }) => {
+  return (
+    <RStack
+      style={{
+        flexDirection: 'row',
+        alignItems: 'center',
+        margin: 5,
+        borderRadius: 20,
+      }}
+    >
+      <RDropdownMenu
+        menuItems={menuItems.map((item) => ({
+          label: item,
+          onSelect: () => onSelect(item),
+        }))}
+        menuName={selectedValue}
+      />
+    </RStack>
+  );
+};
+
+export default FilterBadge;
diff --git a/packages/app/modules/feed/components/FeedSearchFilter.tsx b/packages/app/modules/feed/components/FeedSearchFilter.tsx
index 5abb7a5eb..b56978a38 100644
--- a/packages/app/modules/feed/components/FeedSearchFilter.tsx
+++ b/packages/app/modules/feed/components/FeedSearchFilter.tsx
@@ -1,4 +1,4 @@
-import React, { useRef, useContext, useEffect, useState } from 'react';
+import React, { useRef, useEffect, useState } from 'react';
 import useTheme from 'app/hooks/useTheme';
 import useCustomStyles from 'app/hooks/useCustomStyles';
 import { View } from 'react-native';
@@ -9,36 +9,31 @@ import {
   RButton,
   Form,
   InputWithIcon,
-  DropdownComponent,
-  RSwitch,
 } from '@packrat/ui';
 import { Search, X } from '@tamagui/lucide-icons';
-import { Switch } from 'tamagui';
 import { useFeedSortOptions } from '../hooks';
-const RStack: any = OriginalRStack;
-const RText: any = OriginalRText;
-const RSeparator: any = OriginalRSeparator;
+import FilterBadge from 'app/components/FilterBadge';
+
+const RStack = OriginalRStack;
+const RText = OriginalRText;
+const RSeparator = OriginalRSeparator;
 
 interface FeedSearchFilterProps {
   feedType?: string | null;
   isSortHidden?: boolean;
   handleSortChange?: (value: string) => void;
-  handleTogglePack?: () => void;
-  handleToggleTrip?: () => void;
+  handleTypeChange?: (type: string) => void;
   selectedTypes?: { pack: boolean; trip: boolean };
   queryString?: string;
   setSearchQuery?: (query: string) => void;
   handleCreateClick?: () => void;
-  value?: string;
-  onChange?: (value: string) => void;
 }
 
 export const FeedSearchFilter = ({
   feedType,
   isSortHidden,
   handleSortChange,
-  handleTogglePack,
-  handleToggleTrip,
+  handleTypeChange,
   selectedTypes,
   queryString,
   setSearchQuery,
@@ -53,14 +48,13 @@ export const FeedSearchFilter = ({
     selectedTypes?.trip || feedType === 'userTrips',
   );
 
-  // const onSearch = (search) => (setSearchQuery) ? setSearchQuery(search) : null;
   const handleSetSearchValue = (v: string) => {
     setSearchValue(v);
     if (debounceTimerRef.current) {
       clearTimeout(debounceTimerRef.current);
     }
     debounceTimerRef.current = setTimeout(() => {
-      setSearchQuery(v);
+      setSearchQuery?.(v);
     }, 600);
   };
 
@@ -82,7 +76,14 @@ export const FeedSearchFilter = ({
     <View style={styles.filterContainer}>
       <View style={styles.searchContainer}>
         <Form>
-          <RStack style={{ flexDirection: 'row', margin: 0, padding: 0 }}>
+          <RStack
+            style={{
+              flexDirection: 'row',
+              margin: 0,
+              padding: 0,
+              width: '100%',
+            }}
+          >
             <InputWithIcon
               LeftIcon={<Search />}
               RightIcon={<X />}
@@ -94,91 +95,23 @@ export const FeedSearchFilter = ({
         </Form>
       </View>
       <RSeparator />
+
       {!isSortHidden && (
-        <RStack
-          // flex={1}
-          flexWrap="wrap"
-          flexDirection="row"
-          justifyContent="space-between"
-          alignItems="center"
-          padding={2}
-          margin={2}
-        >
+        <RStack style={{ flexDirection: 'row' }}>
           {feedType === 'public' && (
-            <RStack
-              style={{ flexDirection: 'row', gap: 10, alignItems: 'center' }}
-            >
-              <RText
-                fontSize={18}
-                fontWeight="bold"
-                color={currentTheme.colors.tertiaryBlue}
-              >
-                Packs
-              </RText>
-
-              <RSwitch
-                id="single-switch"
-                size="$1.5"
-                checked={selectedTypes?.pack ?? false}
-                disabled={!selectedTypes?.trip}
-                onCheckedChange={handleTogglePack}
-              >
-                <Switch.Thumb />
-              </RSwitch>
-              <RText
-                fontSize={18}
-                fontWeight="bold"
-                color={currentTheme.colors.tertiaryBlue}
-              >
-                Trips
-              </RText>
-              <RSwitch
-                id="two-switch"
-                size="$1.5"
-                checked={selectedTypes?.trip ?? false}
-                disabled={!selectedTypes?.pack}
-                onCheckedChange={handleToggleTrip}
-              >
-                <Switch.Thumb />
-              </RSwitch>
-            </RStack>
-          )}
-          {feedType === 'packTemplates' && (
-            <RText
-              fontSize={18}
-              fontWeight="bold"
-              color={currentTheme.colors.text}
-            >
-              Discover our curated pack templates to help you get started.
-            </RText>
+            <FilterBadge
+              menuItems={['Packs', 'Trips']}
+              selectedValue={selectedTypes?.pack ? 'Packs' : 'Trips'}
+              onSelect={(value) => handleTypeChange?.(value)}
+            />
           )}
-          <RStack
-            style={{
-              flexDirection: 'row',
-              alignItems: 'center',
-              display: 'flex',
-              gap: 10,
-              width: '100%',
-              marginTop: 15,
-              justifyContent: 'space-between',
-            }}
-          >
-            <RText
-              fontSize={17}
-              fontWeight="bold"
-              color={currentTheme.colors.text}
-            >
-              Sort By:
-            </RText>
-            <View style={{ flex: 1 }}>
-              <DropdownComponent
-                value={queryString}
-                data={sortOptions}
-                onValueChange={handleSortChange}
-                placeholder={queryString}
-              />
-            </View>
-          </RStack>
+
+          <FilterBadge
+            menuItems={sortOptions}
+            selectedValue={queryString}
+            onSelect={handleSortChange}
+          />
+
           {(feedType === 'userPacks' || feedType === 'userTrips') && (
             <RButton
               style={{ marginLeft: 'auto', marginTop: 8 }}
@@ -204,12 +137,6 @@ const loadStyles = (theme: any) => {
   const { currentTheme } = theme;
 
   return {
-    mainContainer: {
-      // flex: 1,
-      backgroundColor: currentTheme.colors.background,
-      fontSize: 18,
-      padding: 15,
-    },
     filterContainer: {
       backgroundColor: currentTheme.colors.card,
       padding: 15,
@@ -227,12 +154,5 @@ const loadStyles = (theme: any) => {
       padding: 10,
       borderRadius: 5,
     },
-
-    cardContainer: {
-      flexDirection: 'row',
-      flexWrap: 'wrap',
-      justifyContent: 'space-around',
-      alignItems: 'center',
-    },
   };
 };
diff --git a/packages/app/modules/feed/screens/FeedScreen.tsx b/packages/app/modules/feed/screens/FeedScreen.tsx
index 41320b4f6..8af3ac23a 100644
--- a/packages/app/modules/feed/screens/FeedScreen.tsx
+++ b/packages/app/modules/feed/screens/FeedScreen.tsx
@@ -70,28 +70,20 @@ const Feed = memo(function Feed({ feedType = 'public', listStyle }: FeedProps) {
     searchQuery,
   });
 
-  // Refresh data
   const onRefresh = () => {
     setRefreshing(true);
-    refetch && refetch(); // Ensure refetch is defined
+    refetch && refetch();
     setRefreshing(false);
   };
 
-  const handleTogglePack = () => {
-    setSelectedTypes((prevState) => ({
-      ...prevState,
-      pack: !prevState.pack,
-    }));
+  const handleTypeChange = (value: string) => {
+    setSelectedTypes({
+      pack: value === 'Packs',
+      trip: value === 'Trips',
+    });
   };
 
-  const handleToggleTrip = () => {
-    setSelectedTypes((prevState) => ({
-      ...prevState,
-      trip: !prevState.trip,
-    }));
-  };
-
-  const handleSortChange = (value) => {
+  const handleSortChange = (value: string) => {
     setQueryString(value);
   };
 
@@ -108,8 +100,7 @@ const Feed = memo(function Feed({ feedType = 'public', listStyle }: FeedProps) {
             <FeedSearchFilter
               feedType={feedType}
               handleSortChange={handleSortChange}
-              handleTogglePack={handleTogglePack}
-              handleToggleTrip={handleToggleTrip}
+              handleTypeChange={handleTypeChange}
               selectedTypes={selectedTypes}
               queryString={queryString}
               setSearchQuery={setSearchQuery}
diff --git a/packages/ui/src/ZDropdown/index.tsx b/packages/ui/src/ZDropdown/index.tsx
index e96a025ff..d8c425e8a 100644
--- a/packages/ui/src/ZDropdown/index.tsx
+++ b/packages/ui/src/ZDropdown/index.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { ComponentProps } from 'react';
 import * as ZeegoDropdownMenu from 'zeego/dropdown-menu';
 import { ChevronDown } from '@tamagui/lucide-icons';
-import RButton from '../RButton';
+import { Button } from 'tamagui';
 
 type ContentProps = ComponentProps<typeof ZeegoDropdownMenu.Content>;
 type ItemProps = ComponentProps<typeof ZeegoDropdownMenu.Item>;
@@ -18,7 +18,6 @@ const DropdownMenu = {
           padding: 10,
           borderRadius: 8,
           gap: 10,
-          // boxShadow: '0px 0px 16px -8px #484848',
         }}
       />
     ),
@@ -47,9 +46,17 @@ const RDropdownMenu = ({ menuItems = [], menuName }) => {
   return (
     <DropdownMenu.Root>
       <DropdownMenu.Trigger>
-        <RButton style={{ backgroundColor: '#deddda', color: 'black' }}>
+        <Button
+          style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            paddingRight: 10,
+            borderRadius: 40,
+          }}
+        >
           {menuName}
-        </RButton>
+          <ChevronDown size={14} />
+        </Button>
       </DropdownMenu.Trigger>
       <DropdownMenu.Content>
         {menuItems.map(({ label, onSelect = () => {} }) => (
diff --git a/packages/ui/src/form/components/InputWithIcon.tsx b/packages/ui/src/form/components/InputWithIcon.tsx
index 460569f46..9046b1dcc 100644
--- a/packages/ui/src/form/components/InputWithIcon.tsx
+++ b/packages/ui/src/form/components/InputWithIcon.tsx
@@ -32,7 +32,7 @@ export function InputWithIcon({
   };
 
   return (
-    <View justifyContent="center" alignItems="center">
+    <View justifyContent="center" alignItems="center" width="100%">
       <Input size={size} minWidth="100%">
         <Input.Box>
           <Input.Icon {...focusTrigger}>{LeftIcon}</Input.Icon>

From 601b4d3aef2f402f4d01e322a32b6d99073df0f8 Mon Sep 17 00:00:00 2001
From: Taron <taron.aleksanyan.20@gmail.com>
Date: Sat, 14 Dec 2024 22:58:44 +0400
Subject: [PATCH 27/66] improve gear list

---
 packages/app/components/GearList/GearList.tsx | 129 ++++++++++--------
 .../modules/pack/widgets/AddPackContainer.tsx |   7 +-
 packages/ui/src/modal/BaseModal.tsx           |   1 +
 3 files changed, 81 insertions(+), 56 deletions(-)

diff --git a/packages/app/components/GearList/GearList.tsx b/packages/app/components/GearList/GearList.tsx
index 35baaf1b9..aee3d7ed9 100644
--- a/packages/app/components/GearList/GearList.tsx
+++ b/packages/app/components/GearList/GearList.tsx
@@ -15,6 +15,7 @@ import { Accordion, Paragraph, Square } from 'tamagui';
 import { PackSummary } from 'app/modules/pack/components/PackTable/PackSummary';
 import { type WeightUnit } from 'app/utils/convertWeight';
 import { ChevronDown } from '@tamagui/lucide-icons';
+import { AsyncView } from 'app/components/AsyncView';
 
 const RStack: any = OriginalRStack;
 const RText: any = OriginalRText;
@@ -23,69 +24,87 @@ export const GearList = () => {
   const [isOpen, setIsOpen] = useState(false);
   const [weightUnit, setWeightUnit] = useState<WeightUnit>('kg');
   const [packId, setPackIdParam] = usePackId();
-  const { data: currentPack } = useFetchSinglePack(packId);
+  const { data: currentPack, isLoading, isError } = useFetchSinglePack(packId);
 
   return (
     <>
       <LayoutCard title="Your Pack">
         <YStack style={{ gap: 16 }}>
-          <XStack style={{ alignItems: 'center' }}>
-            <View style={{ flex: 1 }}>
-              <PackContainer />
-            </View>
-            <AddPackContainer
-              onSuccess={setPackIdParam}
-              isCreatingTrip={true}
-            />
-          </XStack>
-          <LayoutCard>
-            <PackSummary
-              currentPack={currentPack}
-              setWeightUnit={setWeightUnit}
-              weightUnit={weightUnit}
-            />
-          </LayoutCard>
-          <Accordion
-            style={{ overflow: 'hidden', width: '100%' }}
-            type="multiple"
-          >
-            <Accordion.Item value="details" style={{ width: '100%' }}>
-              <Accordion.Trigger
-                style={{
-                  flexDirection: 'row',
-                  justifyContent: 'space-between',
-                }}
-              >
-                {({ open }) => (
-                  <>
-                    <Paragraph style={{ fontWeight: 600 }}>
-                      Manage Pack
-                    </Paragraph>
-                    <Square rotate={open ? '180deg' : '0deg'} animation="quick">
-                      <ChevronDown size={24} />
-                    </Square>
-                  </>
+          <AsyncView isLoading={packId && isLoading} isError={isError}>
+            <RStack
+              style={{
+                alignItems: currentPack ? 'center' : 'flex-start',
+                gap: 16,
+                flexDirection: currentPack ? 'row' : 'column',
+              }}
+            >
+              <View style={{ flex: 1 }}>
+                {currentPack ? (
+                  <PackContainer />
+                ) : (
+                  <RText>
+                    Add packs to plan your trip essentials and stay prepared for
+                    any adventure!
+                  </RText>
                 )}
-              </Accordion.Trigger>
-              <Accordion.HeightAnimator
-                animation="quick"
-                style={{ width: '100%' }}
-              >
-                <Accordion.Content
-                  style={{
-                    width: '100%',
-                    flex: 1,
-                  }}
-                >
-                  <TableContainerComponent
-                    hideSummary
-                    forceCardLayout
+              </View>
+              <AddPackContainer
+                onSuccess={setPackIdParam}
+                isCreatingTrip={true}
+              />
+            </RStack>
+            {currentPack ? (
+              <>
+                <LayoutCard>
+                  <PackSummary
                     currentPack={currentPack}
+                    setWeightUnit={setWeightUnit}
+                    weightUnit={weightUnit}
                   />
-                </Accordion.Content>
-              </Accordion.HeightAnimator>
-            </Accordion.Item>
-          </Accordion>
+                </LayoutCard>
+                <Accordion
+                  style={{ overflow: 'hidden', width: '100%' }}
+                  type="multiple"
+                >
+                  <Accordion.Item value="details" style={{ width: '100%' }}>
+                    <Accordion.Trigger
+                      style={{
+                        flexDirection: 'row',
+                        justifyContent: 'space-between',
+                      }}
+                    >
+                      {({ open }) => (
+                        <>
+                          <Paragraph style={{ fontWeight: 600 }}>
+                            Manage Pack
+                          </Paragraph>
+                          <Square
+                            rotate={open ? '180deg' : '0deg'}
+                            animation="quick"
+                          >
+                            <ChevronDown size={24} />
+                          </Square>
+                        </>
+                      )}
+                    </Accordion.Trigger>
+                    <Accordion.Content
+                      style={{
+                        width: '100%',
+                        flex: 1,
+                        flexShrink: 0,
+                      }}
+                    >
+                      <TableContainerComponent
+                        hideSummary
+                        forceCardLayout
+                        currentPack={currentPack}
+                      />
+                    </Accordion.Content>
+                  </Accordion.Item>
+                </Accordion>
+              </>
+            ) : null}
+          </AsyncView>
         </YStack>
       </LayoutCard>
     </>
diff --git a/packages/app/modules/pack/widgets/AddPackContainer.tsx b/packages/app/modules/pack/widgets/AddPackContainer.tsx
index aa05f7be5..a09ff6958 100644
--- a/packages/app/modules/pack/widgets/AddPackContainer.tsx
+++ b/packages/app/modules/pack/widgets/AddPackContainer.tsx
@@ -16,7 +16,12 @@ export const AddPackContainer = ({
     <BaseModal
       title="Add Pack"
       triggerComponent={
-        <RPrimaryButton size="$1.25" label="Create" icon={<Plus />} />
+        <RPrimaryButton
+          size="$1.25"
+          label="Create"
+          style={{ alignSelf: 'flex-end' }}
+          icon={<Plus />}
+        />
       }
       footerComponent={undefined}
     >
diff --git a/packages/ui/src/modal/BaseModal.tsx b/packages/ui/src/modal/BaseModal.tsx
index c68aa9206..5861e78d6 100644
--- a/packages/ui/src/modal/BaseModal.tsx
+++ b/packages/ui/src/modal/BaseModal.tsx
@@ -49,6 +49,7 @@ export const BaseModal = ({
       <RButton
         onPress={() => setIsModalOpen(true)}
         style={{ backgroundColor: 'transparent' }}
+        unstyled
         backgroundColor={'transparent'}
       >
         {React.cloneElement(triggerComponent, { setIsModalOpen })}

From 19ffb02bf9341c459c8ebdd9b0052b189a09a358 Mon Sep 17 00:00:00 2001
From: Tadjaur <tadjaur@tas-groups.com>
Date: Sun, 15 Dec 2024 07:38:16 +0100
Subject: [PATCH 28/66] fix backend eslint

---
 package.json | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 76fe22201..b768973f1 100644
--- a/package.json
+++ b/package.json
@@ -107,8 +107,7 @@
   },
   "lint-staged": {
     "server/**/*.{js,ts}": [
-      "cd server && yarn run lint",
-      "prettier --write"
+      "yarn workspace server run lint"
     ],
     "**/*.{js,jsx,ts,tsx}": [
       "prettier --write"

From bd6976d7f7340cc34e2eb6569de2e0cb364cc5de Mon Sep 17 00:00:00 2001
From: Tadjaur <tadjaur@tas-groups.com>
Date: Sun, 15 Dec 2024 07:39:59 +0100
Subject: [PATCH 29/66] fix backend eslint

---
 server/src/controllers/item/getItemImages.ts  |  18 +-
 .../src/controllers/item/importNotifiedETL.ts |   7 +-
 server/src/controllers/pack/getPublicPacks.ts |  20 ++-
 server/src/controllers/packTemplates/index.ts |   2 +-
 server/src/db/schema.ts                       |   6 +-
 server/src/drizzle/methods/ItemImages.ts      | 164 +++++++++---------
 server/src/drizzle/methods/ItemPacks.ts       |   2 +-
 server/src/drizzle/methods/PackTemplate.ts    |   4 +-
 server/src/drizzle/methods/pack.ts            |   4 +-
 server/src/routes/itemRoutes.ts               |   2 +-
 server/src/routes/trpcRouter.ts               |   2 -
 .../services/item/bulkAddGlobalItemService.ts |   4 +-
 .../services/item/importFromBucketService.ts  |   4 +-
 server/src/services/item/item.service.ts      |   2 +-
 .../services/pack/getPublicPacksService.ts    |   8 +-
 .../packTemplate/getPackTemplatesService.ts   |   2 +-
 server/src/vector/client.ts                   |   2 +-
 17 files changed, 132 insertions(+), 121 deletions(-)

diff --git a/server/src/controllers/item/getItemImages.ts b/server/src/controllers/item/getItemImages.ts
index 2969ef692..c05e9ade9 100644
--- a/server/src/controllers/item/getItemImages.ts
+++ b/server/src/controllers/item/getItemImages.ts
@@ -14,11 +14,15 @@ export const getItemImages = async (c: Context) => {
 };
 
 export function getItemImagesRoute() {
-  return protectedProcedure.input(z.object({
-    id: z.string().nonempty("ID cant be empty"),
-  })).query(async (opts) => {
-    const { id } = opts.input;
-    const item = await getItemImagesByIdService(id);
-    return item;
-  });
+  return protectedProcedure
+    .input(
+      z.object({
+        id: z.string().nonempty('ID cant be empty'),
+      }),
+    )
+    .query(async (opts) => {
+      const { id } = opts.input;
+      const item = await getItemImagesByIdService(id);
+      return item;
+    });
 }
diff --git a/server/src/controllers/item/importNotifiedETL.ts b/server/src/controllers/item/importNotifiedETL.ts
index b726019f6..cd49ebd9c 100644
--- a/server/src/controllers/item/importNotifiedETL.ts
+++ b/server/src/controllers/item/importNotifiedETL.ts
@@ -6,8 +6,8 @@ import {
 import { User } from '../../drizzle/methods/User';
 
 export const importNotifiedETL = async (c) => {
-    const params = c.req.query();
-    const file_name = params.file_key;
+  const params = c.req.query();
+  const file_name = params.file_key;
 
   const endpoint = c.env.BUCKET_ENDPOINT;
   const bucket = c.env.BUCKET_NAME;
@@ -56,9 +56,8 @@ export const importNotifiedETL = async (c) => {
       message: 'Items inserted successfully',
       data: insertedItems,
     });
-    
   } catch (err) {
     console.error('Error:', err);
     return c.json({ error: 'An error occurred' });
   }
-};
\ No newline at end of file
+};
diff --git a/server/src/controllers/pack/getPublicPacks.ts b/server/src/controllers/pack/getPublicPacks.ts
index b0f71d0c7..6653f5c54 100644
--- a/server/src/controllers/pack/getPublicPacks.ts
+++ b/server/src/controllers/pack/getPublicPacks.ts
@@ -8,7 +8,11 @@ export const getPublicPacks = async (c: Context) => {
   const { page, limit } = query;
   try {
     const { queryBy } = query;
-    const packs = await getPublicPacksService(queryBy, Number(page), Number(limit));
+    const packs = await getPublicPacksService(
+      queryBy,
+      Number(page),
+      Number(limit),
+    );
     return c.json(
       { packs, message: 'Public packs retrieved successfully' },
       200,
@@ -23,14 +27,16 @@ export const getPublicPacks = async (c: Context) => {
 
 export function getPublicPacksRoute() {
   return protectedProcedure
-    .input(z.object({
-      queryBy: z.string(),
-      page: z.number().optional(),
-      limit: z.number().optional(),
-    }))
+    .input(
+      z.object({
+        queryBy: z.string(),
+        page: z.number().optional(),
+        limit: z.number().optional(),
+      }),
+    )
     .query(async (opts) => {
       const { queryBy, page, limit } = opts.input;
       const packs = await getPublicPacksService(queryBy, page, limit);
       return packs;
     });
-}
\ No newline at end of file
+}
diff --git a/server/src/controllers/packTemplates/index.ts b/server/src/controllers/packTemplates/index.ts
index e83211275..eca2b3dd7 100644
--- a/server/src/controllers/packTemplates/index.ts
+++ b/server/src/controllers/packTemplates/index.ts
@@ -1,3 +1,3 @@
 export * from './getPackTemplates';
-export * from './getPackTemplate'
+export * from './getPackTemplate';
 export * from './createPackFromTemplate';
diff --git a/server/src/db/schema.ts b/server/src/db/schema.ts
index 7ce1a31b8..d1d1a39b2 100644
--- a/server/src/db/schema.ts
+++ b/server/src/db/schema.ts
@@ -252,9 +252,9 @@ export const item = sqliteTable(ITEM_TABLE_NAME, {
   sku: text('sku'),
   productUrl: text('product_url'),
   description: text('description'),
-  productDetails: text('product_details', { mode: 'json' }).$type<{
-    [key: string]: string | number | boolean | null;
-  }>(),
+  productDetails: text('product_details', { mode: 'json' }).$type<
+    Record<string, string | number | boolean | null>
+  >(),
   seller: text('seller'),
   createdAt: text('created_at').default(sql`CURRENT_TIMESTAMP`),
   updatedAt: text('updated_at').default(sql`CURRENT_TIMESTAMP`),
diff --git a/server/src/drizzle/methods/ItemImages.ts b/server/src/drizzle/methods/ItemImages.ts
index d9c3e8b72..44a0e9c4d 100644
--- a/server/src/drizzle/methods/ItemImages.ts
+++ b/server/src/drizzle/methods/ItemImages.ts
@@ -3,89 +3,93 @@ import { and, count, eq, like, sql } from 'drizzle-orm';
 import { itemImage as itemImageTable } from '../../db/schema';
 
 export class ItemImages {
-    async create(data: any) {
-        try {
+  async create(data: any) {
+    try {
+      const itemImage = await DbClient.instance
+        .insert(itemImageTable)
+        .values(data)
+        .returning()
+        .get();
+
+      return itemImage;
+    } catch (error) {
+      throw new Error(`Failed to create item image: ${error.message}`);
+    }
+  }
+
+  async createBulk(data: any[]) {
+    try {
+      const insertedItemImages = [];
+      for (const itemImageData of data) {
         const itemImage = await DbClient.instance
-            .insert(itemImageTable)
-            .values(data)
-            .returning()
-            .get();
-    
-        return itemImage;
-        } catch (error) {
-        throw new Error(`Failed to create item image: ${error.message}`);
-        }
+          .insert(itemImageTable)
+          .values(itemImageData)
+          .returning()
+          .get();
+        insertedItemImages.push(itemImage);
+      }
+      return insertedItemImages;
+    } catch (error) {
+      throw new Error(`Failed to create item images: ${error.message}`);
     }
-    
-    async createBulk(data: any[]) {
-        try {
-        const insertedItemImages = [];
-        for (const itemImageData of data) {
-            const itemImage = await DbClient.instance
-            .insert(itemImageTable)
-            .values(itemImageData)
-            .returning()
-            .get();
-            insertedItemImages.push(itemImage);
-        }
-        return insertedItemImages;
-        } catch (error) {
-        throw new Error(`Failed to create item images: ${error.message}`);
-        }
+  }
+
+  async update(
+    id: string,
+    data: Partial<any>,
+    filter = eq(itemImageTable.id, id),
+  ) {
+    try {
+      const itemImage = await DbClient.instance
+        .update(itemImageTable)
+        .set(data)
+        .where(filter)
+        .returning()
+        .get();
+
+      return itemImage;
+    } catch (error) {
+      throw new Error(`Failed to update item image: ${error.message}`);
     }
-    
-    async update(
-        id: string,
-        data: Partial<any>,
-        filter = eq(itemImageTable.id, id),
-    ) {
-        try {
-        const itemImage = await DbClient.instance
-            .update(itemImageTable)
-            .set(data)
-            .where(filter)
-            .returning()
-            .get();
-    
-        return itemImage;
-        } catch (error) {
-        throw new Error(`Failed to update item image: ${error.message}`);
-        }
+  }
+
+  async delete(id: string) {
+    try {
+      await DbClient.instance
+        .delete(itemImageTable)
+        .where(eq(itemImageTable.id, id))
+        .execute();
+    } catch (error) {
+      throw new Error(`Failed to delete item image: ${error.message}`);
     }
-    
-    async delete(id: string) {
-        try {
-        await DbClient.instance.delete(itemImageTable).where(eq(itemImageTable.id, id)).execute();
-        } catch (error) {
-        throw new Error(`Failed to delete item image: ${error.message}`);
-        }
+  }
+
+  async getById(id: string) {
+    try {
+      const itemImage = await DbClient.instance
+        .select()
+        .from(itemImageTable)
+        .where(eq(itemImageTable.id, id))
+        .get();
+
+      return itemImage;
+    } catch (error) {
+      throw new Error(`Failed to get item image: ${error.message}`);
     }
-    
-    async getById(id: string) {
-        try {
-        const itemImage = await DbClient.instance
-            .select()
-            .from(itemImageTable)
-            .where(eq(itemImageTable.id, id))
-            .get();
-    
-        return itemImage;
-        } catch (error) {
-        throw new Error(`Failed to get item image: ${error.message}`);
-        }
+  }
+
+  // get all images for an item
+  async getByItemId({ itemId }: { itemId: string }) {
+    try {
+      const itemImages = await DbClient.instance
+        .select()
+        .from(itemImageTable)
+        .where(eq(itemImageTable.itemId, itemId))
+        .all();
+
+      return itemImages;
+    } catch (error) {
+      throw new Error(`Failed to get item images: ${error.message}`);
     }
-    // get all images for an item
-    async getByItemId({itemId}: {itemId: string}) {
-        try {
-        const itemImages = await DbClient.instance
-            .select()
-            .from(itemImageTable)
-            .where(eq(itemImageTable.itemId, itemId))
-            .all();
-    
-        return itemImages;
-        } catch (error) {
-        throw new Error(`Failed to get item images: ${error.message}`);
-        }
-    } 
-}
\ No newline at end of file
+  }
+}
diff --git a/server/src/drizzle/methods/ItemPacks.ts b/server/src/drizzle/methods/ItemPacks.ts
index 563705f45..d50de29fd 100644
--- a/server/src/drizzle/methods/ItemPacks.ts
+++ b/server/src/drizzle/methods/ItemPacks.ts
@@ -48,7 +48,7 @@ export class ItemPacks {
 
     let filter;
     if (itemId && packId) {
-      filter = and(itemFilter!, packFilter!);
+      filter = and(itemFilter, packFilter);
     } else if (itemId) {
       filter = itemFilter;
     } else if (packId) {
diff --git a/server/src/drizzle/methods/PackTemplate.ts b/server/src/drizzle/methods/PackTemplate.ts
index 1413bd8b8..7cf285c7c 100644
--- a/server/src/drizzle/methods/PackTemplate.ts
+++ b/server/src/drizzle/methods/PackTemplate.ts
@@ -4,9 +4,9 @@ import { convertWeight, type WeightUnit } from 'src/utils/convertWeight';
 import { packTemplate, item, itemPackTemplates } from 'src/db/schema';
 import { PaginationParams } from 'src/helpers/pagination';
 
-export type Filter = {
+export interface Filter {
   searchQuery?: string;
-};
+}
 
 export type ORDER_BY = 'Lightest' | 'Heaviest';
 
diff --git a/server/src/drizzle/methods/pack.ts b/server/src/drizzle/methods/pack.ts
index 9bf2ad83f..97d11739a 100644
--- a/server/src/drizzle/methods/pack.ts
+++ b/server/src/drizzle/methods/pack.ts
@@ -180,8 +180,8 @@ export class Pack {
         ...(modifiedFilter && { where: modifiedFilter }),
         orderBy: orderByFunction,
         ...(includeRelated ? relations : {}),
-        offset: offset,
-        limit: limit,
+        offset,
+        limit,
       });
 
       return (await packs).map((pack: any) => ({
diff --git a/server/src/routes/itemRoutes.ts b/server/src/routes/itemRoutes.ts
index 6b586bb51..eca83cbd1 100644
--- a/server/src/routes/itemRoutes.ts
+++ b/server/src/routes/itemRoutes.ts
@@ -47,7 +47,7 @@ router.get(
 );
 
 router.get(
-  '/importNotifiedETL',  
+  '/importNotifiedETL',
   // authTokenMiddleware,
   // zodParser(validator.importNotifiedETL, 'query'),
   tryCatchWrapper(importNotifiedETL),
diff --git a/server/src/routes/trpcRouter.ts b/server/src/routes/trpcRouter.ts
index 97d36e693..165874968 100644
--- a/server/src/routes/trpcRouter.ts
+++ b/server/src/routes/trpcRouter.ts
@@ -112,8 +112,6 @@ import { router as trpcRouter } from '../trpc';
 
 import { getOfflineMapsRoute, saveOfflineMapRoute } from '../modules/map';
 
-import { getOfflineMapsRoute, saveOfflineMapRoute } from '../modules/map';
-
 export const appRouter = trpcRouter({
   getUserById: getUserByIdRoute(),
   signIn: userSignInRoute(),
diff --git a/server/src/services/item/bulkAddGlobalItemService.ts b/server/src/services/item/bulkAddGlobalItemService.ts
index d60ed3f40..1592d5f1a 100644
--- a/server/src/services/item/bulkAddGlobalItemService.ts
+++ b/server/src/services/item/bulkAddGlobalItemService.ts
@@ -21,9 +21,7 @@ export const bulkAddItemsGlobalService = async (
     sku?: string;
     productUrl?: string;
     description?: string;
-    productDetails?: {
-      [key: string]: string | number | boolean | null;
-    };
+    productDetails?: Record<string, string | number | boolean | null>;
     seller?: string;
   }>,
   executionCtx: ExecutionContext,
diff --git a/server/src/services/item/importFromBucketService.ts b/server/src/services/item/importFromBucketService.ts
index 18084ac66..94ea862c4 100644
--- a/server/src/services/item/importFromBucketService.ts
+++ b/server/src/services/item/importFromBucketService.ts
@@ -13,9 +13,7 @@ interface CSVType {
   sku?: string;
   productUrl?: string;
   description?: string;
-  productDetails?: {
-    [key: string]: string | number | boolean | null;
-  };
+  productDetails?: Record<string, string | number | boolean | null>;
   seller?: string;
 }
 
diff --git a/server/src/services/item/item.service.ts b/server/src/services/item/item.service.ts
index 6f6e0aebc..41a0b8e95 100644
--- a/server/src/services/item/item.service.ts
+++ b/server/src/services/item/item.service.ts
@@ -11,4 +11,4 @@ export * from './searchItemsByNameService';
 export * from './getItemsService';
 export * from './bulkAddGlobalItemService';
 export * from './importFromBucketService';
-export * from "./getItemImagesByIdService";
+export * from './getItemImagesByIdService';
diff --git a/server/src/services/pack/getPublicPacksService.ts b/server/src/services/pack/getPublicPacksService.ts
index 4861445b2..6cb38e83b 100644
--- a/server/src/services/pack/getPublicPacksService.ts
+++ b/server/src/services/pack/getPublicPacksService.ts
@@ -10,7 +10,11 @@ import { SORT_OPTIONS, DEFAULT_SORT, sortFunction } from '../../utils/pack';
  * @return {Promise<any[]>} An array of public packs.
  */
 
-export async function getPublicPacksService(queryBy: string = 'createdAt', page: number, limit: number) {
+export async function getPublicPacksService(
+  queryBy: string = 'createdAt',
+  page: number,
+  limit: number,
+) {
   try {
     const packClass = new Pack();
     const sortOption = queryBy ? SORT_OPTIONS[queryBy] : DEFAULT_SORT;
@@ -34,4 +38,4 @@ export async function getPublicPacksService(queryBy: string = 'createdAt', page:
   } catch (error) {
     throw new Error('Packs cannot be found: ' + error.message);
   }
-}
\ No newline at end of file
+}
diff --git a/server/src/services/packTemplate/getPackTemplatesService.ts b/server/src/services/packTemplate/getPackTemplatesService.ts
index 0ecf929f7..8d46ff248 100644
--- a/server/src/services/packTemplate/getPackTemplatesService.ts
+++ b/server/src/services/packTemplate/getPackTemplatesService.ts
@@ -23,6 +23,6 @@ export async function getPackTemplatesService(
   return {
     data,
     totalCount,
-    ...getPaginationResponse(pagination, totalCount as number),
+    ...getPaginationResponse(pagination, totalCount),
   };
 }
diff --git a/server/src/vector/client.ts b/server/src/vector/client.ts
index 193b25c3f..59738a1cf 100644
--- a/server/src/vector/client.ts
+++ b/server/src/vector/client.ts
@@ -207,7 +207,7 @@ class VectorClient {
       content: string;
       namespace: string;
       metadata: Metadata;
-    }>
+    }>,
   ) {
     const contentList = [];
     for (const record of records) {

From 74cd16e75e5a3f7c31ab6dc7e1ffe55fa5245d28 Mon Sep 17 00:00:00 2001
From: Tadjaur <tadjaur@tas-groups.com>
Date: Sun, 15 Dec 2024 11:00:43 +0100
Subject: [PATCH 30/66] Update Trip endpoints

---
 .../tripRoutesValidator.ts                    | 37 +++++++++-----
 server/src/controllers/trip/addTrip.ts        | 14 ++---
 server/src/controllers/trip/editTrip.ts       | 11 ++--
 server/src/controllers/trip/index.ts          |  1 +
 server/src/db/schema.ts                       |  4 +-
 server/src/drizzle/methods/Geojson.ts         | 26 ++++++++--
 server/src/drizzle/methods/trip.ts            | 51 ++++++++++---------
 server/src/routes/trpcRouter.ts               |  3 ++
 server/src/services/trip/addTripService.ts    | 36 +++++++++----
 server/src/services/trip/trip.service.ts      |  1 +
 10 files changed, 116 insertions(+), 68 deletions(-)

diff --git a/packages/validations/src/validations/tripRoutesValidator/tripRoutesValidator.ts b/packages/validations/src/validations/tripRoutesValidator/tripRoutesValidator.ts
index 27afb355a..960554e0e 100644
--- a/packages/validations/src/validations/tripRoutesValidator/tripRoutesValidator.ts
+++ b/packages/validations/src/validations/tripRoutesValidator/tripRoutesValidator.ts
@@ -5,14 +5,13 @@ const tripActivityValues = Object.values(TripActivity) as [string, ...string[]];
 
 export const addTripForm = z.object({
   name: z.string(),
-  description: z.string(),
-  activity: z.enum(tripActivityValues),
+  description: z.string().optional().nullable(),
+  activity: z.enum(tripActivityValues).optional(),
   is_public: z.union([z.literal('0'), z.literal('1')]),
 });
 
-// @ts-ignore
 const coordinateSchema = z.lazy(() =>
-  z.union([z.number(), z.array(coordinateSchema)]),
+  z.union([z.number(), z.array(z.number())]),
 );
 
 const baseGeometrySchema = z.object({
@@ -50,31 +49,41 @@ export const getTripById = z.object({
 export const addTripDetails = z.object({
   start_date: z.string(),
   end_date: z.string(),
-  destination: z.string(),
-  activity: z.enum(tripActivityValues),
+  activity: z.enum(tripActivityValues).optional(),
   parks: z.string().optional(),
   trails: z.string().optional(),
+  packId: z.string(),
   geoJSON: z.string(),
-  owner_id: z.string(),
-  pack_id: z.string(),
-  bounds: z.tuple([z.array(z.number()), z.array(z.number())]),
 });
 
-export const addTrip = addTripDetails.merge(addTripForm);
+export const addTrip = addTripDetails.merge(addTripForm).omit({
+  is_public: true,
+});
+export type AddTripType = z.infer<typeof addTrip>;
 
 export const editTrip = z.object({
-  id: z.string(),
+  id: z.string().min(1),
   name: z.string().optional(),
   description: z.string().optional(),
-  activity: z.enum(tripActivityValues).optional(),
   start_date: z.string().optional(),
   end_date: z.string().optional(),
-  destination: z.string().optional(),
+  packId: z.string().optional(),
+  parks: z.string().optional(),
+  trails: z.string().optional(),
+  activity: z.enum(tripActivityValues).optional(),
+  geoJSON: z.string().optional(),
+});
+
+export type EditTripType = z.infer<typeof editTrip>;
+
+export const setTripVisibility = z.object({
+  tripId: z.string().min(1),
   is_public: z.union([z.literal('0'), z.literal('1')]),
 });
+export type SetTripVisibilityType = z.infer<typeof setTripVisibility>;
 
 export const deleteTrip = z.object({
-  tripId: z.string().nonempty(),
+  tripId: z.string().min(1),
 });
 
 export const queryTrip = z.object({
diff --git a/server/src/controllers/trip/addTrip.ts b/server/src/controllers/trip/addTrip.ts
index feba2d7db..d0d3d2135 100644
--- a/server/src/controllers/trip/addTrip.ts
+++ b/server/src/controllers/trip/addTrip.ts
@@ -1,11 +1,13 @@
-import { publicProcedure, protectedProcedure } from '../../trpc';
-import { addTripService } from '../../services/trip/addTripService';
+import { protectedProcedure } from '../../trpc';
+import { Context } from 'hono';
+import { addTripService } from '../../services/trip/trip.service';
 import * as validator from '@packrat/validations';
 
-export const addTrip = async (c) => {
+export const addTrip = async (c: Context) => {
   try {
-    const tripData = await c.req.json();
-    const trip = await addTripService(tripData);
+    const requestData = (await c.req.json()) satisfies validator.AddTripType;
+    const tripData = { ...requestData, ownerId: c.user.id };
+    const trip = await addTripService(tripData, c.executionCtx);
     return c.json(trip, 200);
   } catch (error) {
     return c.json({ error: `${error.message}` }, 500);
@@ -14,7 +16,7 @@ export const addTrip = async (c) => {
 
 export function addTripRoute() {
   return protectedProcedure.input(validator.addTrip).mutation(async (opts) => {
-    const tripData = opts.input;
+    const tripData = { ownerId: opts.ctx.user.id, ...opts.input };
     return await addTripService(tripData, opts.ctx.executionCtx);
   });
 }
diff --git a/server/src/controllers/trip/editTrip.ts b/server/src/controllers/trip/editTrip.ts
index a509c8391..e84403a2c 100644
--- a/server/src/controllers/trip/editTrip.ts
+++ b/server/src/controllers/trip/editTrip.ts
@@ -1,12 +1,12 @@
 import { protectedProcedure } from '../../trpc';
 import * as validator from '@packrat/validations';
-import { Trip } from '../../drizzle/methods/trip';
+import { editTripService } from '../../services/trip/trip.service';
+import { Context } from 'hono';
 
-export const editTrip = async (c) => {
+export const editTrip = async (c: Context) => {
   try {
     const tripData = await c.req.json();
-    const tripClass = new Trip();
-    const trip = await tripClass.update(tripData);
+    const trip = await editTripService(tripData, c.executionCtx);
     return c.json({ trip }, 200);
   } catch (error) {
     return c.json({ error: `${error.message}` }, 500);
@@ -16,8 +16,7 @@ export const editTrip = async (c) => {
 export function editTripRoute() {
   return protectedProcedure.input(validator.editTrip).mutation(async (opts) => {
     const tripData = { ...opts.input };
-    const tripClass = new Trip();
-    const trip = await tripClass.update(tripData);
+    const trip = await editTripService(tripData, opts.ctx.executionCtx);
     return trip;
   });
 }
diff --git a/server/src/controllers/trip/index.ts b/server/src/controllers/trip/index.ts
index 85037928d..ff3db090a 100644
--- a/server/src/controllers/trip/index.ts
+++ b/server/src/controllers/trip/index.ts
@@ -4,3 +4,4 @@ export * from './editTrip';
 export * from './getPublicTrips';
 export * from './getTrip';
 export * from './getTripById';
+export * from './setTripVisibility';
diff --git a/server/src/db/schema.ts b/server/src/db/schema.ts
index d1d1a39b2..c03b5e4f1 100644
--- a/server/src/db/schema.ts
+++ b/server/src/db/schema.ts
@@ -403,7 +403,8 @@ export const trip = sqliteTable('trip', {
     .primaryKey()
     .$defaultFn(() => createId()),
   name: text('name').notNull(),
-  description: text('description').notNull(),
+  description: text('description'),
+  // destination: text('destination').notNull(),
   parks: text('parks', { mode: 'json' }).$type<
     Array<{ id: string; name: string }>
   >(),
@@ -412,7 +413,6 @@ export const trip = sqliteTable('trip', {
   >(),
   start_date: text('start_date').notNull(),
   end_date: text('end_date').notNull(),
-  destination: text('destination').notNull(),
   owner_id: text('owner_id').references(() => user.id, {
     onDelete: 'cascade',
   }),
diff --git a/server/src/drizzle/methods/Geojson.ts b/server/src/drizzle/methods/Geojson.ts
index def55775c..ea7e2b4d6 100644
--- a/server/src/drizzle/methods/Geojson.ts
+++ b/server/src/drizzle/methods/Geojson.ts
@@ -1,3 +1,4 @@
+import { eq } from 'drizzle-orm';
 import { DbClient } from '../../db/client';
 import { type InsertGeoJson, geojson } from '../../db/schema';
 
@@ -5,14 +6,29 @@ export class GeoJson {
   async create(geoJSON: InsertGeoJson) {
     try {
       const db = DbClient.instance;
-      const record = await db
-        .insert(geojson)
-        .values({ geoJSON })
-        .returning()
-        .get();
+      const record = await db.insert(geojson).values(geoJSON).returning().get();
       return record;
     } catch (error) {
       throw new Error(`Failed to create geojson record: ${error.message}`);
     }
   }
+
+  async update(
+    id: string,
+    data: Partial<InsertGeoJson>,
+    filter = eq(geojson.id, id),
+  ) {
+    try {
+      const geojsonValue = await DbClient.instance
+        .update(geojson)
+        .set(data)
+        .where(filter)
+        .returning()
+        .get();
+
+      return geojsonValue;
+    } catch (error) {
+      throw new Error(`Failed to geojson record: ${error.message}`);
+    }
+  }
 }
diff --git a/server/src/drizzle/methods/trip.ts b/server/src/drizzle/methods/trip.ts
index e032bf1c6..fb047acbb 100644
--- a/server/src/drizzle/methods/trip.ts
+++ b/server/src/drizzle/methods/trip.ts
@@ -1,6 +1,10 @@
 import { eq } from 'drizzle-orm';
 import { DbClient } from '../../db/client';
-import { type InsertTrip, trip as TripTable } from '../../db/schema';
+import {
+  type InsertTrip,
+  type Trip as SelectTrip,
+  trip as TripTable,
+} from '../../db/schema';
 
 export class Trip {
   async update(trip: Partial<InsertTrip>) {
@@ -48,7 +52,7 @@ export class Trip {
 
   async findById(id: string) {
     try {
-      const trip = await DbClient.instance.query.trip.findFirst({
+      return DbClient.instance.query.trip.findFirst({
         where: eq(TripTable.id, id),
         with: {
           owner: {
@@ -59,27 +63,27 @@ export class Trip {
           },
           packs: {
             columns: { id: true, name: true },
-            with: {
-              itemPacks: {
-                columns: { packId: true },
-                with: {
-                  item: {
-                    columns: {
-                      id: true,
-                      name: true,
-                      weight: true,
-                      quantity: true,
-                      unit: true,
-                    },
-                    with: {
-                      category: {
-                        columns: { id: true, name: true },
-                      },
-                    },
-                  },
-                },
-              },
-            },
+            //     with: {
+            //       itemPacks: {
+            //         columns: { packId: true },
+            //         with: {
+            //           item: {
+            //             columns: {
+            //               id: true,
+            //               name: true,
+            //               weight: true,
+            //               quantity: true,
+            //               unit: true,
+            //             },
+            //             with: {
+            //               category: {
+            //                 columns: { id: true, name: true },
+            //               },
+            //             },
+            //           },
+            //         },
+            //       },
+            // },
           },
           tripGeojsons: {
             columns: {},
@@ -89,7 +93,6 @@ export class Trip {
           },
         },
       });
-      return trip;
     } catch (error) {
       throw new Error(`Failed to find trip by id: ${error.message}`);
     }
diff --git a/server/src/routes/trpcRouter.ts b/server/src/routes/trpcRouter.ts
index 165874968..4f3b87c60 100644
--- a/server/src/routes/trpcRouter.ts
+++ b/server/src/routes/trpcRouter.ts
@@ -29,6 +29,7 @@ import {
   getPublicTripsRoute,
   getTripByIdRoute,
   getTripsRoute,
+  setTripVisibilityRoute,
 } from '../controllers/trip';
 import {
   addTemplateRoute,
@@ -111,6 +112,7 @@ import {
 import { router as trpcRouter } from '../trpc';
 
 import { getOfflineMapsRoute, saveOfflineMapRoute } from '../modules/map';
+import { setTripVisibility } from '@packrat/validations';
 
 export const appRouter = trpcRouter({
   getUserById: getUserByIdRoute(),
@@ -144,6 +146,7 @@ export const appRouter = trpcRouter({
   getTripById: getTripByIdRoute(),
   addTrip: addTripRoute(),
   editTrip: editTripRoute(),
+  setTripVisibility: setTripVisibilityRoute(),
   deleteTrip: deleteTripRoute(),
   // templates routes
   getPackTemplates: getPackTemplatesRoute(),
diff --git a/server/src/services/trip/addTripService.ts b/server/src/services/trip/addTripService.ts
index cece53d6d..c572a634d 100644
--- a/server/src/services/trip/addTripService.ts
+++ b/server/src/services/trip/addTripService.ts
@@ -1,3 +1,4 @@
+import * as validator from '@packrat/validations';
 import { calculateTripScore } from 'src/utils/scoreTrip';
 import { GeoJson } from '../../drizzle/methods/Geojson';
 import { TripGeoJson } from '../../drizzle/methods/TripGeoJson';
@@ -5,35 +6,48 @@ import { Trip } from '../../drizzle/methods/trip';
 import { validateGeojsonId, validateGeojsonType } from '../../utils/geojson';
 import { GeojsonStorageService } from '../geojsonStorage';
 import { scoreTripService } from './scoreTripService';
+import { trip } from 'src/db/schema';
 
 export const addTripService = async (
-  tripData: any,
+  tripData: validator.AddTripType & { ownerId: string },
   executionCtx: ExecutionContext,
 ) => {
   try {
-    const { geoJSON, ...otherTripData } = tripData;
+    const geoJSON = tripData.geoJSON;
     const tripClass = new Trip();
+
     // Create Trip
     const newTrip = await tripClass.create({
-      ...otherTripData,
-      trails: otherTripData.trails ? JSON.parse(otherTripData.trails) : null,
-      parks: otherTripData.parks ? JSON.parse(otherTripData.parks) : null,
+      name: tripData.name,
+      description: tripData.description,
+      start_date: tripData.start_date,
+      end_date: tripData.end_date,
+      activity: tripData.activity,
+      owner_id: tripData.ownerId,
+      is_public: false,
+      trails: tripData.trails ? JSON.parse(tripData.trails) : null,
+      parks: tripData.parks ? JSON.parse(tripData.parks) : null,
     });
+
     await scoreTripService(newTrip.id);
+
     const geojsonClass = new GeoJson();
     const tripGeoJsonClass = new TripGeoJson();
     if (!geoJSON) {
       throw new Error("Geojson data doesn't exist");
     }
 
-    // const insertedGeoJson = await geojsonClass.create(geoJSON);
-    // await tripGeoJsonClass.create({
-    //   tripId: newTrip.id,
-    //   geojsonId: insertedGeoJson.id,
-    // });
+    const insertedGeoJson = await geojsonClass.create({
+      geoJSON,
+    });
+
+    await tripGeoJsonClass.create({
+      tripId: newTrip.id,
+      geojsonId: insertedGeoJson.id,
+    });
 
     executionCtx.waitUntil(
-      GeojsonStorageService.save('trip', JSON.stringify(geoJSON), newTrip.id),
+      GeojsonStorageService.save('trip', geoJSON, newTrip.id),
     );
 
     return newTrip;
diff --git a/server/src/services/trip/trip.service.ts b/server/src/services/trip/trip.service.ts
index 270d8768f..d40c87337 100644
--- a/server/src/services/trip/trip.service.ts
+++ b/server/src/services/trip/trip.service.ts
@@ -1,4 +1,5 @@
 export * from './addTripService';
+export * from './editTripService';
 export * from './getPublicTripService';
 export * from './getTripByIdService';
 export * from './getTripsService';

From 3c179129986c17dfc938f4fc2a05376207d8552a Mon Sep 17 00:00:00 2001
From: Tadjaur <tadjaur@tas-groups.com>
Date: Sun, 15 Dec 2024 11:09:40 +0100
Subject: [PATCH 31/66] --amend

---
 .../src/controllers/trip/setTripVisibility.ts | 12 +++
 server/src/db/schema.ts                       |  2 -
 server/src/services/trip/editTripService.ts   | 79 +++++++++++++++++++
 3 files changed, 91 insertions(+), 2 deletions(-)
 create mode 100644 server/src/controllers/trip/setTripVisibility.ts
 create mode 100644 server/src/services/trip/editTripService.ts

diff --git a/server/src/controllers/trip/setTripVisibility.ts b/server/src/controllers/trip/setTripVisibility.ts
new file mode 100644
index 000000000..c3f8ed013
--- /dev/null
+++ b/server/src/controllers/trip/setTripVisibility.ts
@@ -0,0 +1,12 @@
+import { protectedProcedure } from '../../trpc';
+import * as validator from '@packrat/validations';
+import { setTripVisibilityService } from '../../services/trip/trip.service';
+
+export function setTripVisibilityRoute() {
+  return protectedProcedure
+    .input(validator.setTripVisibility)
+    .mutation(async (opts) => {
+      const trip = await setTripVisibilityService(opts.input);
+      return trip;
+    });
+}
diff --git a/server/src/db/schema.ts b/server/src/db/schema.ts
index c03b5e4f1..9ff007b19 100644
--- a/server/src/db/schema.ts
+++ b/server/src/db/schema.ts
@@ -404,7 +404,6 @@ export const trip = sqliteTable('trip', {
     .$defaultFn(() => createId()),
   name: text('name').notNull(),
   description: text('description'),
-  // destination: text('destination').notNull(),
   parks: text('parks', { mode: 'json' }).$type<
     Array<{ id: string; name: string }>
   >(),
@@ -462,7 +461,6 @@ export const tripRelations = relations(trip, ({ one, many }) => ({
     fields: [trip.pack_id],
     references: [pack.id],
   }),
-  // geojsons: many(tripGeojsons),
   tripGeojsons: many(tripGeojsons),
 }));
 
diff --git a/server/src/services/trip/editTripService.ts b/server/src/services/trip/editTripService.ts
new file mode 100644
index 000000000..9152190ef
--- /dev/null
+++ b/server/src/services/trip/editTripService.ts
@@ -0,0 +1,79 @@
+import * as validator from '@packrat/validations';
+import { GeoJson } from '../../drizzle/methods/Geojson';
+import { TripGeoJson } from '../../drizzle/methods/TripGeoJson';
+import { Trip } from '../../drizzle/methods/trip';
+import { GeojsonStorageService } from '../geojsonStorage';
+import { scoreTripService } from './scoreTripService';
+
+export const editTripService = async (
+  tripData: validator.EditTripType,
+  executionCtx: ExecutionContext,
+) => {
+  try {
+    const tripClass = new Trip();
+    const selectedTrip = await tripClass.findById(tripData.id);
+    const updatedTrip = await tripClass.update({
+      name: tripData.name || selectedTrip.name,
+      description: tripData.description || selectedTrip.description,
+      start_date: tripData.start_date || selectedTrip.start_date,
+      end_date: tripData.end_date || selectedTrip.end_date,
+      activity: tripData.activity || selectedTrip.activity,
+      trails: tripData.trails
+        ? JSON.parse(tripData.trails)
+        : selectedTrip.trails,
+      parks: tripData.parks ? JSON.parse(tripData.parks) : selectedTrip.parks,
+    });
+
+    await scoreTripService(selectedTrip.id);
+
+    const serializedGeoJSON = tripData.geoJSON;
+    if (!serializedGeoJSON) {
+      return updatedTrip;
+    }
+
+    const geojsonClass = new GeoJson();
+
+    const tripGeoJSONs = selectedTrip.tripGeojsons;
+    if (tripGeoJSONs.length > 0) {
+      await geojsonClass.update(tripGeoJSONs[0].geojson.id, {
+        geoJSON: serializedGeoJSON,
+      });
+    } else {
+      const insertedGeoJson = await geojsonClass.create({
+        geoJSON: serializedGeoJSON,
+      });
+
+      const tripGeoJsonClass = new TripGeoJson();
+      await tripGeoJsonClass.create({
+        tripId: selectedTrip.id,
+        geojsonId: insertedGeoJson.id,
+      });
+    }
+
+    executionCtx.waitUntil(
+      GeojsonStorageService.save('trip', serializedGeoJSON, selectedTrip.id),
+    );
+
+    return updatedTrip;
+  } catch (error) {
+    console.error(error);
+    throw new Error('Unable to add trip and GeoJSON data');
+  }
+};
+
+export const setTripVisibilityService = async (
+  tripData: validator.SetTripVisibilityType,
+) => {
+  try {
+    const tripClass = new Trip();
+    const selectedTrip = await tripClass.findById(tripData.id);
+    const updatedTrip = await tripClass.update({
+      id: selectedTrip.id,
+      is_public: tripData.is_public === '1',
+    });
+    return updatedTrip;
+  } catch (error) {
+    console.error(error);
+    throw new Error('Unable to add trip and GeoJSON data');
+  }
+};

From 46fc8b601686da30eb9405efd435aa7e7ba0e05b Mon Sep 17 00:00:00 2001
From: Anmol Verma <anmolverma2810@gmail.com>
Date: Sun, 15 Dec 2024 15:52:07 +0530
Subject: [PATCH 32/66] decrease size

---
 packages/app/components/ScoreContainer.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/app/components/ScoreContainer.tsx b/packages/app/components/ScoreContainer.tsx
index c81446f12..650925a45 100644
--- a/packages/app/components/ScoreContainer.tsx
+++ b/packages/app/components/ScoreContainer.tsx
@@ -21,7 +21,7 @@ interface ScoreProgressChartProps {
 
 const ScoreProgressChart: React.FC<ScoreProgressChartProps> = ({
   score,
-  size = 150,
+  size = 120,
   strokeWidth = 10,
 }) => {
   if (!score) return null;
@@ -81,7 +81,7 @@ interface GradingPieChartProps {
 }
 const GradingPieChart: React.FC<GradingPieChartProps> = ({
   scores,
-  size = 150,
+  size = 120,
   strokeWidth = 10,
 }) => {
   if (!scores) return null;
@@ -107,7 +107,7 @@ const GradingPieChart: React.FC<GradingPieChartProps> = ({
   return (
     <RStack style={styles.container}>
       <RStack style={styles.graphWrapper}>
-        <Svg height="150" width="150" viewBox="0 0 180 180">
+        <Svg height="120" width="120" viewBox="0 0 180 180">
           {total === 0 ? (
             <Circle
               cx="50%"

From 5e9251c095b13bd1935f1a616d087fc409a68a39 Mon Sep 17 00:00:00 2001
From: Tadjaur <tadjaur@tas-groups.com>
Date: Sun, 15 Dec 2024 11:43:39 +0100
Subject: [PATCH 33/66] Add bounds as optional in the request

---
 .../tripRoutesValidator.ts                    | 26 +++++++++----------
 server/src/services/trip/addTripService.ts    |  5 +++-
 server/src/services/trip/editTripService.ts   |  3 +++
 3 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/packages/validations/src/validations/tripRoutesValidator/tripRoutesValidator.ts b/packages/validations/src/validations/tripRoutesValidator/tripRoutesValidator.ts
index 960554e0e..c3134bba6 100644
--- a/packages/validations/src/validations/tripRoutesValidator/tripRoutesValidator.ts
+++ b/packages/validations/src/validations/tripRoutesValidator/tripRoutesValidator.ts
@@ -7,7 +7,7 @@ export const addTripForm = z.object({
   name: z.string(),
   description: z.string().optional().nullable(),
   activity: z.enum(tripActivityValues).optional(),
-  is_public: z.union([z.literal('0'), z.literal('1')]),
+  is_public: z.union([z.literal('0'), z.literal('1')]).optional(),
 });
 
 const coordinateSchema = z.lazy(() =>
@@ -47,31 +47,31 @@ export const getTripById = z.object({
 });
 
 export const addTripDetails = z.object({
-  start_date: z.string(),
-  end_date: z.string(),
   activity: z.enum(tripActivityValues).optional(),
+  bounds: z.tuple([z.array(z.number()), z.array(z.number())]).optional(),
+  end_date: z.string(),
+  geoJSON: z.string(),
+  packId: z.string(),
   parks: z.string().optional(),
+  start_date: z.string(),
   trails: z.string().optional(),
-  packId: z.string(),
-  geoJSON: z.string(),
 });
 
-export const addTrip = addTripDetails.merge(addTripForm).omit({
-  is_public: true,
-});
+export const addTrip = addTripDetails.merge(addTripForm);
 export type AddTripType = z.infer<typeof addTrip>;
 
 export const editTrip = z.object({
-  id: z.string().min(1),
-  name: z.string().optional(),
+  activity: z.enum(tripActivityValues).optional(),
+  bounds: z.array(z.array(z.number())).length(2).optional(),
   description: z.string().optional(),
-  start_date: z.string().optional(),
   end_date: z.string().optional(),
+  geoJSON: z.string().optional(),
+  name: z.string().optional(),
   packId: z.string().optional(),
   parks: z.string().optional(),
+  start_date: z.string().optional(),
   trails: z.string().optional(),
-  activity: z.enum(tripActivityValues).optional(),
-  geoJSON: z.string().optional(),
+  id: z.string().min(1),
 });
 
 export type EditTripType = z.infer<typeof editTrip>;
diff --git a/server/src/services/trip/addTripService.ts b/server/src/services/trip/addTripService.ts
index c572a634d..de3d09a12 100644
--- a/server/src/services/trip/addTripService.ts
+++ b/server/src/services/trip/addTripService.ts
@@ -24,9 +24,12 @@ export const addTripService = async (
       end_date: tripData.end_date,
       activity: tripData.activity,
       owner_id: tripData.ownerId,
-      is_public: false,
+      is_public: tripData.is_public === '0',
       trails: tripData.trails ? JSON.parse(tripData.trails) : null,
       parks: tripData.parks ? JSON.parse(tripData.parks) : null,
+      ...(tripData.bounds && {
+        bounds: [tripData.bounds[0], tripData.bounds[1]],
+      }),
     });
 
     await scoreTripService(newTrip.id);
diff --git a/server/src/services/trip/editTripService.ts b/server/src/services/trip/editTripService.ts
index 9152190ef..78bdedbd9 100644
--- a/server/src/services/trip/editTripService.ts
+++ b/server/src/services/trip/editTripService.ts
@@ -22,6 +22,9 @@ export const editTripService = async (
         ? JSON.parse(tripData.trails)
         : selectedTrip.trails,
       parks: tripData.parks ? JSON.parse(tripData.parks) : selectedTrip.parks,
+      ...(tripData.bounds && {
+        bounds: [tripData.bounds[0], tripData.bounds[1]],
+      }),
     });
 
     await scoreTripService(selectedTrip.id);

From 0fd75a07965b3212675f2523a8214284890086b9 Mon Sep 17 00:00:00 2001
From: Anmol Verma <anmolverma2810@gmail.com>
Date: Sun, 15 Dec 2024 16:22:46 +0530
Subject: [PATCH 34/66] add flexWrap

---
 packages/app/components/ScoreContainer.tsx | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/packages/app/components/ScoreContainer.tsx b/packages/app/components/ScoreContainer.tsx
index 650925a45..19ce706cc 100644
--- a/packages/app/components/ScoreContainer.tsx
+++ b/packages/app/components/ScoreContainer.tsx
@@ -21,7 +21,7 @@ interface ScoreProgressChartProps {
 
 const ScoreProgressChart: React.FC<ScoreProgressChartProps> = ({
   score,
-  size = 120,
+  size = 150,
   strokeWidth = 10,
 }) => {
   if (!score) return null;
@@ -81,7 +81,7 @@ interface GradingPieChartProps {
 }
 const GradingPieChart: React.FC<GradingPieChartProps> = ({
   scores,
-  size = 120,
+  size = 150,
   strokeWidth = 10,
 }) => {
   if (!scores) return null;
@@ -107,7 +107,7 @@ const GradingPieChart: React.FC<GradingPieChartProps> = ({
   return (
     <RStack style={styles.container}>
       <RStack style={styles.graphWrapper}>
-        <Svg height="120" width="120" viewBox="0 0 180 180">
+        <Svg height="150" width="150" viewBox="0 0 180 180">
           {total === 0 ? (
             <Circle
               cx="50%"
@@ -217,7 +217,10 @@ export const ScoreContainer: React.FC<ScoreContainerProps> = ({
             style={{
               flex: 1,
               flexDirection: media.gtXs ? 'column' : 'row',
-              gap: 15,
+              flexWrap: 'wrap',
+              gap: 30,
+              justifyContent: 'center',
+              alignItems: 'center',
             }}
           >
             <ScoreProgressChart score={totalScore} />

From eca561ebe8e82a95f7a690636a05c8b59865eb97 Mon Sep 17 00:00:00 2001
From: Tadjaur <tadjaur@tas-groups.com>
Date: Thu, 12 Dec 2024 23:23:08 +0100
Subject: [PATCH 35/66] Fix broken items import from csv

---
 packages/app/hooks/offline/useOfflineQueue.ts | 12 ++----------
 packages/app/hooks/offline/useRunQueueItem.ts |  5 +++++
 2 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/packages/app/hooks/offline/useOfflineQueue.ts b/packages/app/hooks/offline/useOfflineQueue.ts
index f508aca19..a5ea87c4b 100644
--- a/packages/app/hooks/offline/useOfflineQueue.ts
+++ b/packages/app/hooks/offline/useOfflineQueue.ts
@@ -8,15 +8,7 @@ type Request = {
 };
 
 export const useOfflineQueue = () => {
-  const {
-    isConnected,
-    requests,
-    setRequests,
-  }: {
-    isConnected: boolean;
-    requests: Request[];
-    setRequests: React.Dispatch<React.SetStateAction<Request[]>>;
-  } = useOfflineStore();
+  const { connectionStatus, requests, setRequests } = useOfflineStore();
 
   const runQueryItem = useRunQueryItem();
   const processQueue = () => {
@@ -54,7 +46,7 @@ export const useOfflineQueue = () => {
   };
 
   return {
-    isConnected,
+    isConnected: connectionStatus === 'connected',
     addOfflineRequest: handleAddOfflineRequest,
     processQueue,
   };
diff --git a/packages/app/hooks/offline/useRunQueueItem.ts b/packages/app/hooks/offline/useRunQueueItem.ts
index cad66c230..f7a24dbb5 100644
--- a/packages/app/hooks/offline/useRunQueueItem.ts
+++ b/packages/app/hooks/offline/useRunQueueItem.ts
@@ -1,12 +1,17 @@
 import { queryTrpc } from 'app/trpc';
 
 export const useRunQueryItem = () => {
+  const { mutateAsync: importItemsGlobal } =
+    queryTrpc.importItemsGlobal.useMutation();
   const { mutateAsync: addItem } = queryTrpc.addItemGlobal.useMutation();
   const { mutateAsync: editItem } = queryTrpc.editItem.useMutation();
   const { mutateAsync: deleteItem } = queryTrpc.deleteGlobalItem.useMutation();
 
   const runMutation = async (key, data) => {
     switch (key) {
+      case 'importItemsGlobal': {
+        return importItemsGlobal(data);
+      }
       case 'addItemGlobal': {
         return addItem(data);
       }

From 0e187064e0eace260d18043eb879542ec1efcc5a Mon Sep 17 00:00:00 2001
From: Tadjaur <tadjaur@tas-groups.com>
Date: Thu, 12 Dec 2024 23:29:56 +0100
Subject: [PATCH 36/66] Fix invalid method call

---
 packages/app/modules/item/hooks/useImportItem.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/app/modules/item/hooks/useImportItem.ts b/packages/app/modules/item/hooks/useImportItem.ts
index f673aa7d8..ea2d1b448 100644
--- a/packages/app/modules/item/hooks/useImportItem.ts
+++ b/packages/app/modules/item/hooks/useImportItem.ts
@@ -36,7 +36,7 @@ export const useImportItem = () => {
         });
       }
 
-      addOfflineRequest('addItemGlobal', newItem);
+      addOfflineRequest('importItemsGlobal', newItem);
 
       // Optionally, handle offline case here if needed
     },

From 00b0f828d4df2d235946de8c791ef08d0f8f63d1 Mon Sep 17 00:00:00 2001
From: Tadjaur <tadjaur@tas-groups.com>
Date: Tue, 10 Dec 2024 01:42:10 +0100
Subject: [PATCH 37/66] Create public endPoint to import pack template

---
 .../DownloadMapBtn/DownloadMapBtn.web.tsx     |  7 --
 .../packTemplateRoutesValidator.ts            | 27 +++++-
 server/package.json                           |  2 +
 .../packTemplates/addPackTemplate.ts          | 43 ++++++++++
 .../packTemplates/getPackTemplate.ts          |  3 +-
 server/src/controllers/packTemplates/index.ts |  1 +
 server/src/db/schema.ts                       | 20 +++--
 .../src/drizzle/methods/ItemPackTemplate.ts   | 39 +++++++++
 server/src/drizzle/methods/PackTemplate.ts    | 63 ++++++++++++--
 server/src/routes/trpcRouter.ts               |  4 +
 .../itemPackTemplate/addItemPackTemplate.ts   | 28 ++++++
 .../itemPackTemplate.service.ts               |  1 +
 .../packTemplate/addPackTemplateService.ts    | 53 ++++++++++++
 .../createPackFromTemplateService.ts          |  5 +-
 .../packTemplate/getPackTemplateService.ts    |  6 +-
 .../packTemplate/packTemplate.service.ts      |  1 +
 server/src/tests/routes/packTemplate.spec.ts  | 15 +++-
 yarn.lock                                     | 86 ++++++++++++++++++-
 18 files changed, 373 insertions(+), 31 deletions(-)
 delete mode 100644 packages/app/modules/map/components/DownloadMapBtn/DownloadMapBtn.web.tsx
 create mode 100644 server/src/controllers/packTemplates/addPackTemplate.ts
 create mode 100644 server/src/drizzle/methods/ItemPackTemplate.ts
 create mode 100644 server/src/services/itemPackTemplate/addItemPackTemplate.ts
 create mode 100644 server/src/services/itemPackTemplate/itemPackTemplate.service.ts
 create mode 100644 server/src/services/packTemplate/addPackTemplateService.ts

diff --git a/packages/app/modules/map/components/DownloadMapBtn/DownloadMapBtn.web.tsx b/packages/app/modules/map/components/DownloadMapBtn/DownloadMapBtn.web.tsx
deleted file mode 100644
index 6e6a23f51..000000000
--- a/packages/app/modules/map/components/DownloadMapBtn/DownloadMapBtn.web.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import React, { type FC } from 'react';
-import { View } from 'react-native';
-
-export const DownloadMapBtn: FC = () => {
-  // Returns empty component on the on the web implementation.
-  return <View />;
-};
diff --git a/packages/validations/src/validations/packTemplateRoutesValidator.ts b/packages/validations/src/validations/packTemplateRoutesValidator.ts
index a98162019..3a977d1b6 100644
--- a/packages/validations/src/validations/packTemplateRoutesValidator.ts
+++ b/packages/validations/src/validations/packTemplateRoutesValidator.ts
@@ -13,11 +13,32 @@ export const getPackTemplates = z.object({
   }),
 });
 
-export const getPackTemplate = z.object({
-  id: z.string().min(1),
-});
+export const getPackTemplate = z.union([
+  z.object({
+    id: z.string().min(1),
+    name: z.string().optional(),
+  }),
+  z.object({
+    name: z.string(),
+    id: z.string().optional(),
+  }),
+] as const);
 
 export const createPackFromTemplate = z.object({
   packTemplateId: z.string().min(1),
   newPackName: z.string().min(1),
 });
+
+export const addPackTemplate = z.object({
+  name: z.string(),
+  description: z.string(),
+  type: z.string(),
+  itemPackTemplates: z.array(
+    z.object({
+      itemId: z.string(),
+      quantity: z.number(),
+    }),
+  ),
+});
+
+export const addPackTemplates = z.array(addPackTemplate);
diff --git a/server/package.json b/server/package.json
index 5c36092a6..f89f15b21 100644
--- a/server/package.json
+++ b/server/package.json
@@ -3,6 +3,7 @@
   "version": "1.1.1",
   "description": "",
   "main": "index.js",
+  "type": "module",
   "private": true,
   "scripts": {
     "build": "NODE_OPTIONS=--max_old_space_size=4096 tsc",
@@ -143,6 +144,7 @@
     "expect.js": "^0.3.1",
     "jest": "^29.7.0",
     "migrate-mongo": "^10.0.0",
+    "miniflare": "^3.20241205.0",
     "mocha": "^10.2.0",
     "openapi-generator": "^0.1.39",
     "prettier": "^3.2.5",
diff --git a/server/src/controllers/packTemplates/addPackTemplate.ts b/server/src/controllers/packTemplates/addPackTemplate.ts
new file mode 100644
index 000000000..5c28299b7
--- /dev/null
+++ b/server/src/controllers/packTemplates/addPackTemplate.ts
@@ -0,0 +1,43 @@
+import { addPackTemplateService } from '../../services/packTemplate/packTemplate.service';
+import * as validator from '@packrat/validations';
+import { publicProcedure } from '../../trpc';
+import { th } from '@faker-js/faker';
+
+export function importPackTemplatesRoute() {
+  return publicProcedure
+    .input(validator.addPackTemplates)
+    .mutation(async (opts) => {
+      const array = opts.input;
+      const packTemplates = [];
+      for (let idx = 0; idx < array.length; idx++) {
+        const { name, description, type, itemPackTemplates } = array[idx];
+        try {
+          const template = await addPackTemplateService({
+            name,
+            description,
+            type,
+            itemPackTemplates,
+          });
+          packTemplates.push(template);
+        } catch (error) {
+          console.log(error);
+          throw error;
+        }
+      }
+    });
+}
+
+export function addPackTemplateRoute() {
+  return publicProcedure
+    .input(validator.addPackTemplate)
+    .mutation(async (opts) => {
+      const { name, description, type, itemPackTemplates } = opts.input;
+      const packTemplate = await addPackTemplateService({
+        name,
+        description,
+        type,
+        itemPackTemplates
+      });
+      return packTemplate;
+    });
+}
diff --git a/server/src/controllers/packTemplates/getPackTemplate.ts b/server/src/controllers/packTemplates/getPackTemplate.ts
index 41713c24a..03942e002 100644
--- a/server/src/controllers/packTemplates/getPackTemplate.ts
+++ b/server/src/controllers/packTemplates/getPackTemplate.ts
@@ -6,6 +6,7 @@ export function getPackTemplateRoute() {
   return protectedProcedure
     .input(validator.getPackTemplate)
     .query(async ({ input }) => {
-      return await getPackTemplateService(input.id);
+      const param = input.id ? { id: input.id } : { name: input.name };
+      return await getPackTemplateService(param);
     });
 }
diff --git a/server/src/controllers/packTemplates/index.ts b/server/src/controllers/packTemplates/index.ts
index eca2b3dd7..31d9ba1a1 100644
--- a/server/src/controllers/packTemplates/index.ts
+++ b/server/src/controllers/packTemplates/index.ts
@@ -1,3 +1,4 @@
+export * from './addPackTemplate';
 export * from './getPackTemplates';
 export * from './getPackTemplate';
 export * from './createPackFromTemplate';
diff --git a/server/src/db/schema.ts b/server/src/db/schema.ts
index d1d1a39b2..47770046c 100644
--- a/server/src/db/schema.ts
+++ b/server/src/db/schema.ts
@@ -182,10 +182,10 @@ export const packTemplate = sqliteTable('pack_template', {
 });
 
 export const packTemplateRelations = relations(packTemplate, ({ many }) => ({
-  itemPackTemplates: many(itemPackTemplates),
+  itemPackTemplates: many(itemPackTemplate),
 }));
 
-export const itemPackTemplates = sqliteTable(
+export const itemPackTemplate = sqliteTable(
   'item_pack_templates',
   {
     itemId: text('item_id').references(() => item.id, { onDelete: 'cascade' }),
@@ -205,14 +205,14 @@ export const itemPackTemplates = sqliteTable(
 );
 
 export const itemPackTemplatesRelations = relations(
-  itemPackTemplates,
+  itemPackTemplate,
   ({ one }) => ({
     packTemplate: one(packTemplate, {
-      fields: [itemPackTemplates.packTemplateId],
+      fields: [itemPackTemplate.packTemplateId],
       references: [packTemplate.id],
     }),
     item: one(item, {
-      fields: [itemPackTemplates.itemId],
+      fields: [itemPackTemplate.itemId],
       references: [item.id],
     }),
   }),
@@ -369,6 +369,7 @@ export const itemRelations = relations(item, ({ one, many }) => ({
   images: many(itemImage),
   itemOwners: many(itemOwners),
   itemPacks: many(itemPacks),
+  itemPackTemplates: many(itemPackTemplate),
 }));
 
 export const template = sqliteTable('template', {
@@ -611,8 +612,17 @@ export const insertTemplateSchema = createInsertSchema(template);
 export const selectTemplateSchema = createSelectSchema(template);
 
 export type PackTemplate = InferSelectModel<typeof packTemplate>;
+export type InsertPackTemplate = InferInsertModel<typeof packTemplate>;
+export const insertPackTemplateSchema = createInsertSchema(packTemplate);
 export const selectPackTemplateSchema = createSelectSchema(packTemplate);
 
+export type ItemPackTemplate = InferSelectModel<typeof itemPackTemplate>;
+export type InsertItemPackTemplate = InferInsertModel<typeof itemPackTemplate>;
+export const insertItemPackTemplateSchema =
+  createInsertSchema(itemPackTemplate);
+export const selectItemPackTemplateSchema =
+  createSelectSchema(itemPackTemplate);
+
 export type Pack = InferSelectModel<typeof pack>;
 export type InsertPack = InferInsertModel<typeof pack>;
 export const insertPackSchema = createInsertSchema(pack);
diff --git a/server/src/drizzle/methods/ItemPackTemplate.ts b/server/src/drizzle/methods/ItemPackTemplate.ts
new file mode 100644
index 000000000..5dfef9e9f
--- /dev/null
+++ b/server/src/drizzle/methods/ItemPackTemplate.ts
@@ -0,0 +1,39 @@
+import { DbClient } from '../../db/client';
+import { eq, and } from 'drizzle-orm';
+import {
+  type InsertItemPackTemplate,
+  itemPackTemplate as ItemPackTemplateTable,
+} from '../../db/schema';
+
+export class ItemPackTemplate {
+  async create(data: InsertItemPackTemplate) {
+    try {
+      const item = await DbClient.instance
+        .insert(ItemPackTemplateTable)
+        .values(data)
+        .returning()
+        .get();
+
+      return item;
+    } catch (error) {
+      throw new Error(`Failed to create item: ${error.message}`);
+    }
+  }
+
+  async findByItemIdAndPackTemplateId({
+    itemId,
+    packTemplateId,
+  }: {
+    itemId: string;
+    packTemplateId: string;
+  }) {
+    const itemFilter = eq(ItemPackTemplateTable.itemId, itemId);
+    const packFilter = eq(ItemPackTemplateTable.packTemplateId, packTemplateId);
+
+    const filter = and(itemFilter, packFilter);
+
+    return await DbClient.instance.query.itemPackTemplate.findFirst({
+      where: filter,
+    });
+  }
+}
diff --git a/server/src/drizzle/methods/PackTemplate.ts b/server/src/drizzle/methods/PackTemplate.ts
index 7cf285c7c..d9ac6b475 100644
--- a/server/src/drizzle/methods/PackTemplate.ts
+++ b/server/src/drizzle/methods/PackTemplate.ts
@@ -1,7 +1,12 @@
 import { asc, count, desc, eq, like, sql } from 'drizzle-orm';
 import { DbClient } from '../../db/client';
 import { convertWeight, type WeightUnit } from 'src/utils/convertWeight';
-import { packTemplate, item, itemPackTemplates } from 'src/db/schema';
+import {
+  packTemplate,
+  item,
+  itemPackTemplate,
+  InsertPackTemplate,
+} from 'src/db/schema';
 import { PaginationParams } from 'src/helpers/pagination';
 
 export interface Filter {
@@ -27,17 +32,17 @@ export class PackTemplate {
         type: packTemplate.type,
         description: packTemplate.description,
         total_weight:
-          sql`SUM(${item.weight} * ${itemPackTemplates.quantity})`.as(
+          sql`SUM(${item.weight} * ${itemPackTemplate.quantity})`.as(
             'total_weight',
           ),
-        quantity: sql`SUM(${itemPackTemplates.quantity})`,
+        quantity: sql`SUM(${itemPackTemplate.quantity})`,
       })
       .from(packTemplate)
       .leftJoin(
-        itemPackTemplates,
-        eq(packTemplate.id, itemPackTemplates.packTemplateId),
+        itemPackTemplate,
+        eq(packTemplate.id, itemPackTemplate.packTemplateId),
       )
-      .leftJoin(item, eq(itemPackTemplates.itemId, item.id))
+      .leftJoin(item, eq(itemPackTemplate.itemId, item.id))
       .groupBy(packTemplate.id);
 
     if (filter?.searchQuery) {
@@ -68,15 +73,54 @@ export class PackTemplate {
     };
   }
 
-  async findPackTemplate(id: string) {
+  /**
+   * Creates a pack template.
+   * @param data The date used to create a pack template.
+   */
+  async create(data: InsertPackTemplate) {
+    try {
+      const createdPackTemplate = await DbClient.instance
+        .insert(packTemplate)
+        .values(data)
+        .returning()
+        .get();
+      return createdPackTemplate;
+    } catch (error) {
+      throw new Error(`Failed to create a pack: ${error.message}`);
+    }
+  }
+
+  /**
+   * Finds a pack template by its ID or name.
+   * @param params The parameters to search for a pack template.
+   * @param params.id The ID of the pack template to search for.
+   * @param params.name The name of the pack template to search for.
+   * @returns
+   */
+  async findPackTemplate(
+    params: { id: string; name?: undefined } | { name: string; id?: undefined },
+  ) {
+    const { id, name } = params;
+    let filter;
+    if (id) {
+      filter = eq(packTemplate.id, id);
+    } else if (name) {
+      filter = eq(packTemplate.name, name);
+    } else {
+      throw new Error('Either id or name must be provided');
+    }
     const packTemplateResult =
       await DbClient.instance.query.packTemplate.findFirst({
-        where: eq(packTemplate.id, id),
+        where: filter,
         with: {
           itemPackTemplates: { with: { item: { with: { category: {} } } } },
         },
       });
 
+    if (!packTemplateResult) {
+      return packTemplateResult;
+    }
+
     const items = packTemplateResult.itemPackTemplates.map(
       (itemPackTemplate) => ({
         ...itemPackTemplate.item,
@@ -91,13 +135,14 @@ export class PackTemplate {
       );
       return sum + weightInGrams * item.quantity;
     }, 0);
+
     const quantity = items.reduce((sum, item) => sum + item.quantity, 0);
 
     delete packTemplateResult.itemPackTemplates;
 
     return {
       ...packTemplateResult,
-      items,
+      itemsPackTemplate: items,
       total_weight,
       quantity,
     };
diff --git a/server/src/routes/trpcRouter.ts b/server/src/routes/trpcRouter.ts
index 165874968..b7236cc71 100644
--- a/server/src/routes/trpcRouter.ts
+++ b/server/src/routes/trpcRouter.ts
@@ -106,6 +106,8 @@ import {
   getPackTemplatesRoute,
   getPackTemplateRoute,
   createPackFromTemplateRoute,
+  addPackTemplateRoute,
+  importPackTemplatesRoute,
 } from '../controllers/packTemplates';
 
 import { router as trpcRouter } from '../trpc';
@@ -149,6 +151,8 @@ export const appRouter = trpcRouter({
   getPackTemplates: getPackTemplatesRoute(),
   getPackTemplate: getPackTemplateRoute(),
   createPackFromTemplate: createPackFromTemplateRoute(),
+  addPackTemplate: addPackTemplateRoute(),
+  addPackTemplates: importPackTemplatesRoute(),
   getTemplates: getTemplatesRoute(),
   getTemplateById: getTemplateByIdRoute(),
   addTemplate: addTemplateRoute(),
diff --git a/server/src/services/itemPackTemplate/addItemPackTemplate.ts b/server/src/services/itemPackTemplate/addItemPackTemplate.ts
new file mode 100644
index 000000000..fefd556c4
--- /dev/null
+++ b/server/src/services/itemPackTemplate/addItemPackTemplate.ts
@@ -0,0 +1,28 @@
+import { ItemPackTemplate } from '../../drizzle/methods/ItemPackTemplate';
+
+/**
+ * Adds a item to the pack template service.
+ * @param {string} packTemplateId - The ID of the pack template.
+ * @param {string} itemId - The ID reference of the item.
+ * @param {number} quantity - The ID of the owner.
+ * @return {Promise<object>} - A promise that resolves to the added item.
+ */
+export const addItemPackTemplate = async (params: {
+  packTemplateId: string;
+  itemId: string;
+  quantity: number;
+}) => {
+  const { packTemplateId, itemId, quantity } = params;
+  const itemPackTemplate = new ItemPackTemplate();
+  const item = await itemPackTemplate.findByItemIdAndPackTemplateId({
+    packTemplateId,
+    itemId,
+  });
+
+  if (item) {
+    throw new Error(
+      'A template item with the same item and pack references already exists',
+    );
+  }
+  await itemPackTemplate.create({ itemId, packTemplateId, quantity });
+};
diff --git a/server/src/services/itemPackTemplate/itemPackTemplate.service.ts b/server/src/services/itemPackTemplate/itemPackTemplate.service.ts
new file mode 100644
index 000000000..0c6fa2785
--- /dev/null
+++ b/server/src/services/itemPackTemplate/itemPackTemplate.service.ts
@@ -0,0 +1 @@
+export * from './addItemPackTemplate';
diff --git a/server/src/services/packTemplate/addPackTemplateService.ts b/server/src/services/packTemplate/addPackTemplateService.ts
new file mode 100644
index 000000000..4ced9cb47
--- /dev/null
+++ b/server/src/services/packTemplate/addPackTemplateService.ts
@@ -0,0 +1,53 @@
+import { PackTemplate as PackTemplateClass } from '../../drizzle/methods/PackTemplate';
+import * as ItemPackTemplateService from '../itemPackTemplate/itemPackTemplate.service';
+import { PackTemplate } from 'src/db/schema';
+
+/**
+ * Adds a new pack template service.
+ * @param {Object} packTemplateData - The data for the new pack template.
+ * @param {string} packTemplateData.name - The name of the pack.
+ * @param {string} packTemplateData.description - The description of the pack.
+ * @param {string} packTemplateData.type - Whether the pack is public or not.
+ * @return {Object} An object containing the created pack.
+ */
+export const addPackTemplateService = async (packTemplateData: {
+  name: string;
+  description: string;
+  type: string;
+  itemPackTemplates: Array<{
+    itemId: string;
+    quantity: number;
+  }>;
+}): Promise<PackTemplate> => {
+  const { name, description, type } = packTemplateData;
+  console.log({ packTemplateData });
+  const packTemplateClass = new PackTemplateClass();
+  let existingPack: PackTemplate | null =
+    await packTemplateClass.findPackTemplate({ name });
+
+  if (!existingPack) {
+    existingPack = await packTemplateClass.create({
+      name,
+      description,
+      type,
+    });
+  } else {
+    console.log(
+      'Pack template already exists. Skipping creation and proceeding with update of items',
+    );
+  }
+
+  for (const itemPackTemplate of packTemplateData.itemPackTemplates) {
+    try {
+      await ItemPackTemplateService.addItemPackTemplate({
+        itemId: itemPackTemplate.itemId,
+        quantity: itemPackTemplate.quantity,
+        packTemplateId: existingPack.id,
+      });
+    } catch (error) {
+      console.log(error);
+    }
+  }
+
+  return existingPack;
+};
diff --git a/server/src/services/packTemplate/createPackFromTemplateService.ts b/server/src/services/packTemplate/createPackFromTemplateService.ts
index a7828c5dc..df93a0312 100644
--- a/server/src/services/packTemplate/createPackFromTemplateService.ts
+++ b/server/src/services/packTemplate/createPackFromTemplateService.ts
@@ -11,8 +11,9 @@ export const createPackFromTemplateService = async (
 ) => {
   const packTemplateRepository = new PackTemplateRepository();
 
-  const packTemplate =
-    await packTemplateRepository.findPackTemplate(packTemplateId);
+  const packTemplate = await packTemplateRepository.findPackTemplate({
+    id: packTemplateId,
+  });
 
   // TODO - creating pack and adding items to it should ideally be transactional
   const createdPack = await addPackService(
diff --git a/server/src/services/packTemplate/getPackTemplateService.ts b/server/src/services/packTemplate/getPackTemplateService.ts
index e03ea3a9e..cb86e2846 100644
--- a/server/src/services/packTemplate/getPackTemplateService.ts
+++ b/server/src/services/packTemplate/getPackTemplateService.ts
@@ -1,5 +1,7 @@
 import { PackTemplate } from 'src/drizzle/methods/PackTemplate';
 
-export async function getPackTemplateService(packTemplateId: string) {
-  return await new PackTemplate().findPackTemplate(packTemplateId);
+export async function getPackTemplateService(
+  params: { id: string; name?: undefined } | { name: string; id?: undefined },
+) {
+  return await new PackTemplate().findPackTemplate(params);
 }
diff --git a/server/src/services/packTemplate/packTemplate.service.ts b/server/src/services/packTemplate/packTemplate.service.ts
index 40fd201b4..191893919 100644
--- a/server/src/services/packTemplate/packTemplate.service.ts
+++ b/server/src/services/packTemplate/packTemplate.service.ts
@@ -1,3 +1,4 @@
+export * from './addPackTemplateService';
 export * from './getPackTemplatesService';
 export * from './getPackTemplateService';
 export * from './createPackFromTemplateService';
diff --git a/server/src/tests/routes/packTemplate.spec.ts b/server/src/tests/routes/packTemplate.spec.ts
index 59d02867a..5af0be490 100644
--- a/server/src/tests/routes/packTemplate.spec.ts
+++ b/server/src/tests/routes/packTemplate.spec.ts
@@ -7,7 +7,7 @@ import type { trpcCaller } from '../testHelpers';
 import {
   type PackTemplate,
   type Item,
-  itemPackTemplates as itemPackTemplatesTable,
+  itemPackTemplate as itemPackTemplatesTable,
   packTemplate as packTemplateTable,
 } from 'src/db/schema';
 import { DbClient } from '../../db/client';
@@ -117,6 +117,19 @@ describe('Pack template routes', () => {
     });
   });
 
+  describe('addPackTemplate', () => {
+    it('should add pack template', async () => {
+      const packTemplate = await caller.addPackTemplate({
+        name: 'test',
+        description: 'pack template description',
+        type: 'pack',
+      });
+      expect(packTemplate).toMatchObject([
+        { ...packTemplate, items: packTemplateItems },
+      ]);
+    });
+  });
+
   describe('getPackTemplate', () => {
     it('should get a pack template', async () => {
       const packTemplateResult = await caller.getPackTemplate({
diff --git a/yarn.lock b/yarn.lock
index 9c0a2e1ca..fa86d6778 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2345,6 +2345,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@cloudflare/workerd-darwin-64@npm:1.20241205.0":
+  version: 1.20241205.0
+  resolution: "@cloudflare/workerd-darwin-64@npm:1.20241205.0"
+  conditions: os=darwin & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@cloudflare/workerd-darwin-arm64@npm:1.20240405.0":
   version: 1.20240405.0
   resolution: "@cloudflare/workerd-darwin-arm64@npm:1.20240405.0"
@@ -2359,6 +2366,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@cloudflare/workerd-darwin-arm64@npm:1.20241205.0":
+  version: 1.20241205.0
+  resolution: "@cloudflare/workerd-darwin-arm64@npm:1.20241205.0"
+  conditions: os=darwin & cpu=arm64
+  languageName: node
+  linkType: hard
+
 "@cloudflare/workerd-linux-64@npm:1.20240405.0":
   version: 1.20240405.0
   resolution: "@cloudflare/workerd-linux-64@npm:1.20240405.0"
@@ -2373,6 +2387,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@cloudflare/workerd-linux-64@npm:1.20241205.0":
+  version: 1.20241205.0
+  resolution: "@cloudflare/workerd-linux-64@npm:1.20241205.0"
+  conditions: os=linux & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@cloudflare/workerd-linux-arm64@npm:1.20240405.0":
   version: 1.20240405.0
   resolution: "@cloudflare/workerd-linux-arm64@npm:1.20240405.0"
@@ -2387,6 +2408,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@cloudflare/workerd-linux-arm64@npm:1.20241205.0":
+  version: 1.20241205.0
+  resolution: "@cloudflare/workerd-linux-arm64@npm:1.20241205.0"
+  conditions: os=linux & cpu=arm64
+  languageName: node
+  linkType: hard
+
 "@cloudflare/workerd-windows-64@npm:1.20240405.0":
   version: 1.20240405.0
   resolution: "@cloudflare/workerd-windows-64@npm:1.20240405.0"
@@ -2401,6 +2429,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@cloudflare/workerd-windows-64@npm:1.20241205.0":
+  version: 1.20241205.0
+  resolution: "@cloudflare/workerd-windows-64@npm:1.20241205.0"
+  conditions: os=win32 & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@cloudflare/workers-shared@npm:0.5.3":
   version: 0.5.3
   resolution: "@cloudflare/workers-shared@npm:0.5.3"
@@ -28779,6 +28814,28 @@ __metadata:
   languageName: node
   linkType: hard
 
+"miniflare@npm:^3.20241205.0":
+  version: 3.20241205.0
+  resolution: "miniflare@npm:3.20241205.0"
+  dependencies:
+    "@cspotcode/source-map-support": "npm:0.8.1"
+    acorn: "npm:^8.8.0"
+    acorn-walk: "npm:^8.2.0"
+    capnp-ts: "npm:^0.7.0"
+    exit-hook: "npm:^2.2.1"
+    glob-to-regexp: "npm:^0.4.1"
+    stoppable: "npm:^1.1.0"
+    undici: "npm:^5.28.4"
+    workerd: "npm:1.20241205.0"
+    ws: "npm:^8.18.0"
+    youch: "npm:^3.2.2"
+    zod: "npm:^3.22.3"
+  bin:
+    miniflare: bootstrap.js
+  checksum: 10/0efbb456890f0293af129b4850c6e420530384d674ed02e95b9195fdabba270b6016bd44cc52b92a4d9be037b0e522949d6ab463c17dfadc86014fefcba461b7
+  languageName: node
+  linkType: hard
+
 "minimalistic-assert@npm:^1.0.0, minimalistic-assert@npm:^1.0.1":
   version: 1.0.1
   resolution: "minimalistic-assert@npm:1.0.1"
@@ -34924,6 +34981,7 @@ __metadata:
     jsonwebtoken: "npm:^9.0.1"
     langchain: "npm:^0.0.203"
     migrate-mongo: "npm:^10.0.0"
+    miniflare: "npm:^3.20241205.0"
     mocha: "npm:^10.2.0"
     mock-aws-s3: "npm:^4.0.2"
     mongoose: "npm:^7.4.0"
@@ -39271,6 +39329,32 @@ __metadata:
   languageName: node
   linkType: hard
 
+"workerd@npm:1.20241205.0":
+  version: 1.20241205.0
+  resolution: "workerd@npm:1.20241205.0"
+  dependencies:
+    "@cloudflare/workerd-darwin-64": "npm:1.20241205.0"
+    "@cloudflare/workerd-darwin-arm64": "npm:1.20241205.0"
+    "@cloudflare/workerd-linux-64": "npm:1.20241205.0"
+    "@cloudflare/workerd-linux-arm64": "npm:1.20241205.0"
+    "@cloudflare/workerd-windows-64": "npm:1.20241205.0"
+  dependenciesMeta:
+    "@cloudflare/workerd-darwin-64":
+      optional: true
+    "@cloudflare/workerd-darwin-arm64":
+      optional: true
+    "@cloudflare/workerd-linux-64":
+      optional: true
+    "@cloudflare/workerd-linux-arm64":
+      optional: true
+    "@cloudflare/workerd-windows-64":
+      optional: true
+  bin:
+    workerd: bin/workerd
+  checksum: 10/c66c79f290a247f86f28182218f4d1c54736b6a954827a447299fd7b38a4d9483b3ee10c936335a336594001c174e62d578f7a95d2044f56b56d1162eb9aa719
+  languageName: node
+  linkType: hard
+
 "workerpool@npm:^6.5.1":
   version: 6.5.1
   resolution: "workerpool@npm:6.5.1"
@@ -39446,7 +39530,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ws@npm:^8.11.0, ws@npm:^8.12.1, ws@npm:^8.13.0, ws@npm:^8.17.1":
+"ws@npm:^8.11.0, ws@npm:^8.12.1, ws@npm:^8.13.0, ws@npm:^8.17.1, ws@npm:^8.18.0":
   version: 8.18.0
   resolution: "ws@npm:8.18.0"
   peerDependencies:

From 188531953b8526d56bd31bf21b81f2ec017700b6 Mon Sep 17 00:00:00 2001
From: Tadjaur <tadjaur@tas-groups.com>
Date: Tue, 10 Dec 2024 01:44:46 +0100
Subject: [PATCH 38/66] revert the minifar installation

---
 .../DownloadMapBtn/DownloadMapBtn.web.tsx     |  7 ++
 server/package.json                           |  2 -
 yarn.lock                                     | 86 +------------------
 3 files changed, 8 insertions(+), 87 deletions(-)
 create mode 100644 packages/app/modules/map/components/DownloadMapBtn/DownloadMapBtn.web.tsx

diff --git a/packages/app/modules/map/components/DownloadMapBtn/DownloadMapBtn.web.tsx b/packages/app/modules/map/components/DownloadMapBtn/DownloadMapBtn.web.tsx
new file mode 100644
index 000000000..6e6a23f51
--- /dev/null
+++ b/packages/app/modules/map/components/DownloadMapBtn/DownloadMapBtn.web.tsx
@@ -0,0 +1,7 @@
+import React, { type FC } from 'react';
+import { View } from 'react-native';
+
+export const DownloadMapBtn: FC = () => {
+  // Returns empty component on the on the web implementation.
+  return <View />;
+};
diff --git a/server/package.json b/server/package.json
index f89f15b21..5c36092a6 100644
--- a/server/package.json
+++ b/server/package.json
@@ -3,7 +3,6 @@
   "version": "1.1.1",
   "description": "",
   "main": "index.js",
-  "type": "module",
   "private": true,
   "scripts": {
     "build": "NODE_OPTIONS=--max_old_space_size=4096 tsc",
@@ -144,7 +143,6 @@
     "expect.js": "^0.3.1",
     "jest": "^29.7.0",
     "migrate-mongo": "^10.0.0",
-    "miniflare": "^3.20241205.0",
     "mocha": "^10.2.0",
     "openapi-generator": "^0.1.39",
     "prettier": "^3.2.5",
diff --git a/yarn.lock b/yarn.lock
index fa86d6778..9c0a2e1ca 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2345,13 +2345,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@cloudflare/workerd-darwin-64@npm:1.20241205.0":
-  version: 1.20241205.0
-  resolution: "@cloudflare/workerd-darwin-64@npm:1.20241205.0"
-  conditions: os=darwin & cpu=x64
-  languageName: node
-  linkType: hard
-
 "@cloudflare/workerd-darwin-arm64@npm:1.20240405.0":
   version: 1.20240405.0
   resolution: "@cloudflare/workerd-darwin-arm64@npm:1.20240405.0"
@@ -2366,13 +2359,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@cloudflare/workerd-darwin-arm64@npm:1.20241205.0":
-  version: 1.20241205.0
-  resolution: "@cloudflare/workerd-darwin-arm64@npm:1.20241205.0"
-  conditions: os=darwin & cpu=arm64
-  languageName: node
-  linkType: hard
-
 "@cloudflare/workerd-linux-64@npm:1.20240405.0":
   version: 1.20240405.0
   resolution: "@cloudflare/workerd-linux-64@npm:1.20240405.0"
@@ -2387,13 +2373,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@cloudflare/workerd-linux-64@npm:1.20241205.0":
-  version: 1.20241205.0
-  resolution: "@cloudflare/workerd-linux-64@npm:1.20241205.0"
-  conditions: os=linux & cpu=x64
-  languageName: node
-  linkType: hard
-
 "@cloudflare/workerd-linux-arm64@npm:1.20240405.0":
   version: 1.20240405.0
   resolution: "@cloudflare/workerd-linux-arm64@npm:1.20240405.0"
@@ -2408,13 +2387,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@cloudflare/workerd-linux-arm64@npm:1.20241205.0":
-  version: 1.20241205.0
-  resolution: "@cloudflare/workerd-linux-arm64@npm:1.20241205.0"
-  conditions: os=linux & cpu=arm64
-  languageName: node
-  linkType: hard
-
 "@cloudflare/workerd-windows-64@npm:1.20240405.0":
   version: 1.20240405.0
   resolution: "@cloudflare/workerd-windows-64@npm:1.20240405.0"
@@ -2429,13 +2401,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@cloudflare/workerd-windows-64@npm:1.20241205.0":
-  version: 1.20241205.0
-  resolution: "@cloudflare/workerd-windows-64@npm:1.20241205.0"
-  conditions: os=win32 & cpu=x64
-  languageName: node
-  linkType: hard
-
 "@cloudflare/workers-shared@npm:0.5.3":
   version: 0.5.3
   resolution: "@cloudflare/workers-shared@npm:0.5.3"
@@ -28814,28 +28779,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"miniflare@npm:^3.20241205.0":
-  version: 3.20241205.0
-  resolution: "miniflare@npm:3.20241205.0"
-  dependencies:
-    "@cspotcode/source-map-support": "npm:0.8.1"
-    acorn: "npm:^8.8.0"
-    acorn-walk: "npm:^8.2.0"
-    capnp-ts: "npm:^0.7.0"
-    exit-hook: "npm:^2.2.1"
-    glob-to-regexp: "npm:^0.4.1"
-    stoppable: "npm:^1.1.0"
-    undici: "npm:^5.28.4"
-    workerd: "npm:1.20241205.0"
-    ws: "npm:^8.18.0"
-    youch: "npm:^3.2.2"
-    zod: "npm:^3.22.3"
-  bin:
-    miniflare: bootstrap.js
-  checksum: 10/0efbb456890f0293af129b4850c6e420530384d674ed02e95b9195fdabba270b6016bd44cc52b92a4d9be037b0e522949d6ab463c17dfadc86014fefcba461b7
-  languageName: node
-  linkType: hard
-
 "minimalistic-assert@npm:^1.0.0, minimalistic-assert@npm:^1.0.1":
   version: 1.0.1
   resolution: "minimalistic-assert@npm:1.0.1"
@@ -34981,7 +34924,6 @@ __metadata:
     jsonwebtoken: "npm:^9.0.1"
     langchain: "npm:^0.0.203"
     migrate-mongo: "npm:^10.0.0"
-    miniflare: "npm:^3.20241205.0"
     mocha: "npm:^10.2.0"
     mock-aws-s3: "npm:^4.0.2"
     mongoose: "npm:^7.4.0"
@@ -39329,32 +39271,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"workerd@npm:1.20241205.0":
-  version: 1.20241205.0
-  resolution: "workerd@npm:1.20241205.0"
-  dependencies:
-    "@cloudflare/workerd-darwin-64": "npm:1.20241205.0"
-    "@cloudflare/workerd-darwin-arm64": "npm:1.20241205.0"
-    "@cloudflare/workerd-linux-64": "npm:1.20241205.0"
-    "@cloudflare/workerd-linux-arm64": "npm:1.20241205.0"
-    "@cloudflare/workerd-windows-64": "npm:1.20241205.0"
-  dependenciesMeta:
-    "@cloudflare/workerd-darwin-64":
-      optional: true
-    "@cloudflare/workerd-darwin-arm64":
-      optional: true
-    "@cloudflare/workerd-linux-64":
-      optional: true
-    "@cloudflare/workerd-linux-arm64":
-      optional: true
-    "@cloudflare/workerd-windows-64":
-      optional: true
-  bin:
-    workerd: bin/workerd
-  checksum: 10/c66c79f290a247f86f28182218f4d1c54736b6a954827a447299fd7b38a4d9483b3ee10c936335a336594001c174e62d578f7a95d2044f56b56d1162eb9aa719
-  languageName: node
-  linkType: hard
-
 "workerpool@npm:^6.5.1":
   version: 6.5.1
   resolution: "workerpool@npm:6.5.1"
@@ -39530,7 +39446,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ws@npm:^8.11.0, ws@npm:^8.12.1, ws@npm:^8.13.0, ws@npm:^8.17.1, ws@npm:^8.18.0":
+"ws@npm:^8.11.0, ws@npm:^8.12.1, ws@npm:^8.13.0, ws@npm:^8.17.1":
   version: 8.18.0
   resolution: "ws@npm:8.18.0"
   peerDependencies:

From 7d87bdd3b0a03bb6f464bb9a1dcef04348ef8e79 Mon Sep 17 00:00:00 2001
From: Tadjaur <tadjaur@tas-groups.com>
Date: Wed, 11 Dec 2024 12:20:52 +0100
Subject: [PATCH 39/66] Update the input data

---
 .../src/validations/itemRoutesValidator.ts    |  16 +++
 .../packTemplateRoutesValidator.ts            |   4 +-
 .../src/controllers/item/importItemsGlobal.ts |   4 +-
 .../packTemplates/addPackTemplate.ts          |  27 ++--
 .../packTemplates/getPackTemplate.ts          |   4 +-
 server/src/controllers/user/getUsers.ts       |   4 +-
 server/src/drizzle/methods/Item.ts            |  17 +++
 server/src/drizzle/methods/PackTemplate.ts    |   1 +
 .../src/services/item/addItemGlobalService.ts |  98 ++++----------
 server/src/services/item/addItemService.ts    | 121 +++++++++++++++++-
 .../packTemplate/addPackTemplateService.ts    |  50 +++++---
 11 files changed, 226 insertions(+), 120 deletions(-)

diff --git a/packages/validations/src/validations/itemRoutesValidator.ts b/packages/validations/src/validations/itemRoutesValidator.ts
index 890257491..0e0ba3c2a 100644
--- a/packages/validations/src/validations/itemRoutesValidator.ts
+++ b/packages/validations/src/validations/itemRoutesValidator.ts
@@ -70,6 +70,22 @@ export const addItemGlobal = z.object({
   ownerId: z.string(),
 });
 
+export const addNewItemGlobal = z.object({
+  name: z.string(),
+  weight: z.number(),
+  unit: z.string(),
+  category: z.enum(['Food', 'Water', 'Essentials']),
+  sku: z.string(),
+  productUrl: z.string(),
+  description: z.string(),
+  productDetails: z.record(
+    z.string(),
+    z.union([z.string(), z.number(), z.boolean()]),
+  ),
+  seller: z.string(),
+  imageUrls: z.string(),
+});
+
 export const importItemsGlobal = z.object({
   content: z.string(),
   ownerId: z.string(),
diff --git a/packages/validations/src/validations/packTemplateRoutesValidator.ts b/packages/validations/src/validations/packTemplateRoutesValidator.ts
index 3a977d1b6..2458c9db5 100644
--- a/packages/validations/src/validations/packTemplateRoutesValidator.ts
+++ b/packages/validations/src/validations/packTemplateRoutesValidator.ts
@@ -1,4 +1,5 @@
 import { z } from 'zod';
+import { addNewItemGlobal } from './itemRoutesValidator';
 
 export const getPackTemplates = z.object({
   filter: z
@@ -33,9 +34,10 @@ export const addPackTemplate = z.object({
   name: z.string(),
   description: z.string(),
   type: z.string(),
+  itemsOwnerId: z.string(),
   itemPackTemplates: z.array(
     z.object({
-      itemId: z.string(),
+      item: addNewItemGlobal,
       quantity: z.number(),
     }),
   ),
diff --git a/server/src/controllers/item/importItemsGlobal.ts b/server/src/controllers/item/importItemsGlobal.ts
index e29dc511d..fc15e1de9 100644
--- a/server/src/controllers/item/importItemsGlobal.ts
+++ b/server/src/controllers/item/importItemsGlobal.ts
@@ -117,6 +117,8 @@ export function importItemsGlobalRoute() {
               let idx = 0;
               await addItemGlobalServiceBatch(
                 results.data,
+                true,
+                opts.ctx.executionCtx,
                 (item) => {
                   const productDetailsStr = `${item.techs}`
                     .replace(/'([^']*)'\s*:/g, '"$1":') // Replace single quotes keys with double quotes.
@@ -153,8 +155,6 @@ export function importItemsGlobalRoute() {
                     productDetails: JSON.parse(productDetailsStr),
                   };
                 },
-                false,
-                opts.ctx.executionCtx,
               );
               return resolve('items');
             } catch (error) {
diff --git a/server/src/controllers/packTemplates/addPackTemplate.ts b/server/src/controllers/packTemplates/addPackTemplate.ts
index 5c28299b7..310551123 100644
--- a/server/src/controllers/packTemplates/addPackTemplate.ts
+++ b/server/src/controllers/packTemplates/addPackTemplate.ts
@@ -1,7 +1,6 @@
 import { addPackTemplateService } from '../../services/packTemplate/packTemplate.service';
 import * as validator from '@packrat/validations';
 import { publicProcedure } from '../../trpc';
-import { th } from '@faker-js/faker';
 
 export function importPackTemplatesRoute() {
   return publicProcedure
@@ -10,20 +9,19 @@ export function importPackTemplatesRoute() {
       const array = opts.input;
       const packTemplates = [];
       for (let idx = 0; idx < array.length; idx++) {
-        const { name, description, type, itemPackTemplates } = array[idx];
+        const input = array[idx];
         try {
-          const template = await addPackTemplateService({
-            name,
-            description,
-            type,
-            itemPackTemplates,
-          });
-          packTemplates.push(template);
+          const packTemplate = await addPackTemplateService(
+            input,
+            opts.ctx.executionCtx,
+          );
+          packTemplates.push(packTemplate);
         } catch (error) {
           console.log(error);
           throw error;
         }
       }
+      return packTemplates;
     });
 }
 
@@ -31,13 +29,10 @@ export function addPackTemplateRoute() {
   return publicProcedure
     .input(validator.addPackTemplate)
     .mutation(async (opts) => {
-      const { name, description, type, itemPackTemplates } = opts.input;
-      const packTemplate = await addPackTemplateService({
-        name,
-        description,
-        type,
-        itemPackTemplates
-      });
+      const packTemplate = await addPackTemplateService(
+        opts.input,
+        opts.ctx.executionCtx,
+      );
       return packTemplate;
     });
 }
diff --git a/server/src/controllers/packTemplates/getPackTemplate.ts b/server/src/controllers/packTemplates/getPackTemplate.ts
index 03942e002..69eeda2e2 100644
--- a/server/src/controllers/packTemplates/getPackTemplate.ts
+++ b/server/src/controllers/packTemplates/getPackTemplate.ts
@@ -1,9 +1,9 @@
 import * as validator from '@packrat/validations';
-import { protectedProcedure } from 'src/trpc';
+import { publicProcedure } from 'src/trpc';
 import { getPackTemplateService } from 'src/services/packTemplate/packTemplate.service';
 
 export function getPackTemplateRoute() {
-  return protectedProcedure
+  return publicProcedure
     .input(validator.getPackTemplate)
     .query(async ({ input }) => {
       const param = input.id ? { id: input.id } : { name: input.name };
diff --git a/server/src/controllers/user/getUsers.ts b/server/src/controllers/user/getUsers.ts
index 6721b0655..ece62d01e 100644
--- a/server/src/controllers/user/getUsers.ts
+++ b/server/src/controllers/user/getUsers.ts
@@ -1,4 +1,4 @@
-import { protectedProcedure } from '../../trpc';
+import { protectedProcedure, publicProcedure } from '../../trpc';
 import { responseHandler } from '../../helpers/responseHandler';
 import { User } from '../../drizzle/methods/User';
 
@@ -13,7 +13,7 @@ export const getUsers = async (c) => {
 };
 
 export function getUsersRoute() {
-  return protectedProcedure.query(async (opts) => {
+  return publicProcedure.query(async (opts) => {
     const userClass = new User();
     const users = await userClass.findMany();
     return users;
diff --git a/server/src/drizzle/methods/Item.ts b/server/src/drizzle/methods/Item.ts
index f2e5bbc18..7dee75417 100644
--- a/server/src/drizzle/methods/Item.ts
+++ b/server/src/drizzle/methods/Item.ts
@@ -5,6 +5,7 @@ import {
   ITEM_TABLE_NAME,
   itemPacks,
   item as ItemTable,
+  itemImage as itemImageTable,
 } from '../../db/schema';
 import { scorePackService } from '../../services/pack/scorePackService';
 import { ItemPacks } from './ItemPacks';
@@ -25,6 +26,22 @@ export class Item {
     }
   }
 
+  async insertImage(itemId: string, url: string) {
+    try {
+      const itemImage = await DbClient.instance
+        .insert(itemImageTable)
+        .values({
+          itemId,
+          url,
+        })
+        .run();
+
+      return itemImage;
+    } catch (error) {
+      throw new Error(`Failed to update item: ${error.message}`);
+    }
+  }
+
   async createPackItem(data: InsertItem, packId: string, quantity: number) {
     // TODO wrap in transaction
     const item = await this.create(data);
diff --git a/server/src/drizzle/methods/PackTemplate.ts b/server/src/drizzle/methods/PackTemplate.ts
index d9ac6b475..8a7679469 100644
--- a/server/src/drizzle/methods/PackTemplate.ts
+++ b/server/src/drizzle/methods/PackTemplate.ts
@@ -117,6 +117,7 @@ export class PackTemplate {
         },
       });
 
+
     if (!packTemplateResult) {
       return packTemplateResult;
     }
diff --git a/server/src/services/item/addItemGlobalService.ts b/server/src/services/item/addItemGlobalService.ts
index 01b8af03c..567c8390b 100644
--- a/server/src/services/item/addItemGlobalService.ts
+++ b/server/src/services/item/addItemGlobalService.ts
@@ -12,6 +12,7 @@ import { convertWeight, SMALLEST_WEIGHT_UNIT } from 'src/utils/convertWeight';
 import { DbClient } from 'src/db/client';
 import { itemImage as itemImageTable } from '../../db/schema';
 import { summarizeItem } from 'src/utils/item';
+import { addNewItemService, bulkAddNewItemsService } from './addItemService';
 // import { prisma } from '../../prisma';
 
 interface AddItemGlobalServiceParams {
@@ -117,87 +118,36 @@ export const addItemGlobalService = async (
  */
 export const addItemGlobalServiceBatch = async <T>(
   rawItems: T[],
-  transform: (rawItem: T) => AddItemGlobalServiceParams,
   continueOnError = false,
   executionCtx: ExecutionContext,
+  transform: (rawItem: T) => AddItemGlobalServiceParams,
 ) => {
-  const errors = [];
+  const errors: Error[] = [];
 
-  const createdItemsInOrder: Array<[itemIndex: number, item: Item]> = [];
-  for (let idx = 0; idx < rawItems.length; idx++) {
-    const item = transform(rawItems[idx]);
-    let category: InsertItemCategory | null;
-    if (!categories.includes(item.type)) {
-      const error = new Error(
-        `[${item.sku}#${item.name}]: Category must be one of: ${categories.join(', ')}`,
-      );
-      if (continueOnError) {
-        errors.push(error);
-        continue;
-      } else {
-        throw error;
-      }
-    }
+  const createdItemsInOrder: Array<
+    Awaited<ReturnType<typeof addNewItemService>>
+  > = [];
 
-    const itemClass = new ItemClass();
-    const itemCategoryClass = new ItemCategory();
-    category =
-      (await itemCategoryClass.findItemCategory({ name: item.type })) || null;
-    if (!category) {
-      category = await itemCategoryClass.create({ name: item.type });
+  function* itemIterator() {
+    for (let idx = 0; idx < rawItems.length; idx++) {
+      const item = transform(rawItems[idx]);
+      yield { ...item, category: item.type, imageUrls: item.image_urls };
     }
+  }
 
-    const newItem = await itemClass.create({
-      name: item.name,
-      weight: convertWeight(
-        Number(item.weight),
-        item.unit as any,
-        SMALLEST_WEIGHT_UNIT,
-      ),
-      unit: item.unit,
-      categoryId: category.id,
-      global: true,
-      ownerId: item.ownerId,
-      sku: item.sku,
-      productUrl: item.productUrl,
-      description: item.description,
-      productDetails: item.productDetails,
-      seller: item.seller,
-    });
-
-    createdItemsInOrder.push([idx, newItem]);
-
-    if (item.image_urls) {
-      const urls = item.image_urls.split(',');
-
-      const newItemImages = [];
-      for (const url of urls) {
-        newItemImages.push({
-          itemId: newItem.id,
-          url,
-        });
+  await bulkAddNewItemsService({
+    items: itemIterator(),
+    executionCtx,
+    onItemCreationError: (error) => {
+      if (!continueOnError) {
+        throw error;
       }
+      errors.push(error);
+    },
+  });
 
-      await DbClient.instance
-        .insert(itemImageTable)
-        .values(newItemImages)
-        .run();
-    }
-  }
-
-  // Format Item for vector indexes
-  const vectorData = [];
-  for (const [idx, item] of createdItemsInOrder) {
-    item.category = { name: transform(rawItems[idx]).type };
-    vectorData.push({
-      id: item.id,
-      content: summarizeItem(item),
-      namespace: ITEM_TABLE_NAME,
-      metadata: {
-        isPublic: item.global,
-        ownerId: item.ownerId,
-      },
-    });
-  }
-  executionCtx.waitUntil(VectorClient.instance.syncRecords(vectorData));
+  return {
+    createdItemsInOrder,
+    errors,
+  };
 };
diff --git a/server/src/services/item/addItemService.ts b/server/src/services/item/addItemService.ts
index 6488095e9..eb9344dfd 100644
--- a/server/src/services/item/addItemService.ts
+++ b/server/src/services/item/addItemService.ts
@@ -1,12 +1,17 @@
-// import { prisma } from '../../prisma';
-import { Item } from '../../drizzle/methods/Item';
+import { type ExecutionContext } from 'hono';
+import * as validator from '@packrat/validations';
+import { Item as ItemClass } from '../../drizzle/methods/Item';
 import { ItemCategory } from '../../drizzle/methods/itemcategory';
 import { ItemOwners } from '../../drizzle/methods/ItemOwners';
 import { ItemCategory as categories } from '../../utils/itemCategory';
-import { type InsertItemCategory } from '../../db/schema';
+import {
+  Item,
+  ITEM_TABLE_NAME,
+  type InsertItemCategory,
+} from '../../db/schema';
 import { VectorClient } from '../../vector/client';
 import { convertWeight, SMALLEST_WEIGHT_UNIT } from 'src/utils/convertWeight';
-import { type ExecutionContext } from 'hono';
+import { summarizeItem } from 'src/utils/item';
 
 /**
  * Generates a new item and adds it to a pack based on the given parameters.
@@ -34,7 +39,7 @@ export const addItemService = async (
     throw new Error(`Category must be one of: ${categories.join(', ')}`);
   }
   const itemCategoryClass = new ItemCategory();
-  const itemClass = new Item();
+  const itemClass = new ItemClass();
   const itemOwnersClass = new ItemOwners();
   category = (await itemCategoryClass.findItemCategory({ name: type })) || null;
   if (!category) {
@@ -87,3 +92,109 @@ export const addItemService = async (
 
   return item;
 };
+
+/**
+ * Creates a new item.
+ * @param {Object} item - The data for the new item.
+ * @return {object} An object containing the newly created item
+ */
+export const addNewItemService = async (
+  item: typeof validator.addNewItemGlobal._type,
+  ownerId: string,
+): Promise<Item & { category: InsertItemCategory }> => {
+  let category: InsertItemCategory | null;
+  if (!categories.includes(item.category)) {
+    const error = new Error(
+      `[${item.sku}#${item.name}]: Category must be one of: ${categories.join(', ')}`,
+    );
+    throw error;
+  }
+
+  const itemClass = new ItemClass();
+  const itemCategoryClass = new ItemCategory();
+  category =
+    (await itemCategoryClass.findItemCategory({ name: item.category })) || null;
+  if (!category) {
+    category = await itemCategoryClass.create({ name: item.category });
+  }
+
+  const newItem = await itemClass.create({
+    name: item.name,
+    weight: convertWeight(
+      Number(item.weight),
+      item.unit as any,
+      SMALLEST_WEIGHT_UNIT,
+    ),
+    unit: item.unit,
+    categoryId: category.id,
+    global: true,
+    ownerId,
+    sku: item.sku,
+    productUrl: item.productUrl,
+    description: item.description,
+    productDetails: item.productDetails,
+    seller: item.seller,
+  });
+
+  if (item.imageUrls) {
+    const urls = item.imageUrls.split(',');
+    for (const url of urls) {
+      await itemClass.insertImage(newItem.id, url);
+    }
+  }
+
+  return { ...newItem, category };
+};
+
+/**
+ * Adds a list of items to the global inventory and indexes them in the vector database.
+ * @param {Object} bulkPram: the config parameter
+ * @param {Object} bulkPram.items - The list of items to add.
+ * @param {string} bulkPram.ownerId - The owner of all items
+ * @param {ExecutionContext} bulkParam.onItemCreated - A callback function to be called when an item is created.
+ * @param {Function} bulkParam.onItemCreated - A callback function to be called when an item is created.
+ */
+export const bulkAddNewItemsService = async (bulkParam: {
+  items: Iterable<
+    typeof validator.addNewItemGlobal._type & { ownerId: string }
+  >;
+  executionCtx: ExecutionContext;
+  onItemCreated?: (
+    item: Awaited<ReturnType<typeof addNewItemService>>,
+    bulkIndex: number,
+  ) => void;
+  onItemCreationError?: (error: Error, bulkIndex: number) => void;
+}): Promise<Array<Awaited<ReturnType<typeof addNewItemService>>>> => {
+  const { items, executionCtx, onItemCreated, onItemCreationError } = bulkParam;
+  const createdItems: Array<Awaited<ReturnType<typeof addNewItemService>>> = [];
+  const vectorData = [];
+
+  let idx = -1;
+  for (const item of items) {
+    idx += 1;
+    try {
+      const createdItem = await addNewItemService(item, item.ownerId);
+      if (onItemCreated) {
+        onItemCreated(createdItem, idx);
+      }
+      createdItems.push(createdItem);
+
+      vectorData.push({
+        id: createdItem.id,
+        content: summarizeItem(createdItem),
+        namespace: ITEM_TABLE_NAME,
+        metadata: {
+          isPublic: createdItem.global,
+          ownerId: createdItem.ownerId,
+        },
+      });
+    } catch (error) {
+      if (onItemCreationError) {
+        onItemCreationError(error as Error, idx);
+      }
+    }
+  }
+
+  executionCtx.waitUntil(VectorClient.instance.syncRecords(vectorData));
+  return createdItems;
+};
diff --git a/server/src/services/packTemplate/addPackTemplateService.ts b/server/src/services/packTemplate/addPackTemplateService.ts
index 4ced9cb47..49549c619 100644
--- a/server/src/services/packTemplate/addPackTemplateService.ts
+++ b/server/src/services/packTemplate/addPackTemplateService.ts
@@ -1,6 +1,13 @@
+import type { ExecutionContext } from 'hono';
+import * as validator from '@packrat/validations';
+
 import { PackTemplate as PackTemplateClass } from '../../drizzle/methods/PackTemplate';
 import * as ItemPackTemplateService from '../itemPackTemplate/itemPackTemplate.service';
-import { PackTemplate } from 'src/db/schema';
+import * as ItemService from '../item/item.service';
+import { ITEM_TABLE_NAME, PackTemplate } from 'src/db/schema';
+import { summarizeItem } from 'src/utils/item';
+import { VectorClient } from 'src/vector/client';
+import { i } from 'vitest/dist/reporters-QGe8gs4b.js';
 
 /**
  * Adds a new pack template service.
@@ -10,15 +17,10 @@ import { PackTemplate } from 'src/db/schema';
  * @param {string} packTemplateData.type - Whether the pack is public or not.
  * @return {Object} An object containing the created pack.
  */
-export const addPackTemplateService = async (packTemplateData: {
-  name: string;
-  description: string;
-  type: string;
-  itemPackTemplates: Array<{
-    itemId: string;
-    quantity: number;
-  }>;
-}): Promise<PackTemplate> => {
+export const addPackTemplateService = async (
+  packTemplateData: typeof validator.addPackTemplate._type,
+  executionCtx: ExecutionContext,
+): Promise<PackTemplate> => {
   const { name, description, type } = packTemplateData;
   console.log({ packTemplateData });
   const packTemplateClass = new PackTemplateClass();
@@ -37,17 +39,29 @@ export const addPackTemplateService = async (packTemplateData: {
     );
   }
 
-  for (const itemPackTemplate of packTemplateData.itemPackTemplates) {
-    try {
+  function* itemIterator() {
+    for (const itemPackTemplate of packTemplateData.itemPackTemplates) {
+      yield {
+        ...itemPackTemplate.item,
+        ownerId: packTemplateData.itemsOwnerId,
+      };
+    }
+  }
+
+  await ItemService.bulkAddNewItemsService({
+    items: itemIterator(),
+    executionCtx,
+    onItemCreationError: (error, idx) => {
+      console.error(`Error creating item at ${idx}:`, error);
+    },
+    onItemCreated: async (createdItem, idx) => {
       await ItemPackTemplateService.addItemPackTemplate({
-        itemId: itemPackTemplate.itemId,
-        quantity: itemPackTemplate.quantity,
+        itemId: createdItem.id,
+        quantity: packTemplateData.itemPackTemplates[idx].quantity,
         packTemplateId: existingPack.id,
       });
-    } catch (error) {
-      console.log(error);
-    }
-  }
+    },
+  });
 
   return existingPack;
 };

From eef47453e927d3b31cea88162dd803a92e25afbe Mon Sep 17 00:00:00 2001
From: Tadjaur <tadjaur@tas-groups.com>
Date: Thu, 12 Dec 2024 23:50:06 +0100
Subject: [PATCH 40/66] Update and use existing item definition

---
 .../src/validations/itemRoutesValidator.ts    |  26 ++-
 .../packTemplateRoutesValidator.ts            |   8 +-
 .../src/controllers/item/importItemsGlobal.ts | 111 +++++++-----
 .../packTemplates/getPackTemplate.ts          |   4 +-
 server/src/controllers/user/getUsers.ts       |   4 +-
 server/src/db/schema.ts                       |   5 -
 .../src/services/item/addItemGlobalService.ts | 166 ++++++------------
 server/src/services/item/addItemService.ts    | 114 +-----------
 .../services/item/bulkAddGlobalItemService.ts | 145 +++++----------
 .../packTemplate/addPackTemplateService.ts    |   6 +-
 server/src/tests/routes/packTemplate.spec.ts  |   4 +
 11 files changed, 193 insertions(+), 400 deletions(-)

diff --git a/packages/validations/src/validations/itemRoutesValidator.ts b/packages/validations/src/validations/itemRoutesValidator.ts
index 0e0ba3c2a..95eb2bb6f 100644
--- a/packages/validations/src/validations/itemRoutesValidator.ts
+++ b/packages/validations/src/validations/itemRoutesValidator.ts
@@ -66,25 +66,19 @@ export const addItemGlobal = z.object({
   name: z.string(),
   weight: z.number(),
   unit: z.string(),
-  type: z.string(),
+  type: z.enum(['Food', 'Water', 'Essentials']),
   ownerId: z.string(),
+  sku: z.string().optional(),
+  productUrl: z.string().optional(),
+  description: z.string().optional(),
+  productDetails: z
+    .record(z.string(), z.union([z.string(), z.number(), z.boolean()]))
+    .optional(),
+  seller: z.string().optional(),
+  image_urls: z.string().optional(),
 });
 
-export const addNewItemGlobal = z.object({
-  name: z.string(),
-  weight: z.number(),
-  unit: z.string(),
-  category: z.enum(['Food', 'Water', 'Essentials']),
-  sku: z.string(),
-  productUrl: z.string(),
-  description: z.string(),
-  productDetails: z.record(
-    z.string(),
-    z.union([z.string(), z.number(), z.boolean()]),
-  ),
-  seller: z.string(),
-  imageUrls: z.string(),
-});
+export type AddItemGlobalType = z.infer<typeof addItemGlobal>;
 
 export const importItemsGlobal = z.object({
   content: z.string(),
diff --git a/packages/validations/src/validations/packTemplateRoutesValidator.ts b/packages/validations/src/validations/packTemplateRoutesValidator.ts
index 2458c9db5..de1c47541 100644
--- a/packages/validations/src/validations/packTemplateRoutesValidator.ts
+++ b/packages/validations/src/validations/packTemplateRoutesValidator.ts
@@ -1,5 +1,5 @@
 import { z } from 'zod';
-import { addNewItemGlobal } from './itemRoutesValidator';
+import { addItemGlobal } from './itemRoutesValidator';
 
 export const getPackTemplates = z.object({
   filter: z
@@ -23,7 +23,7 @@ export const getPackTemplate = z.union([
     name: z.string(),
     id: z.string().optional(),
   }),
-] as const);
+]);
 
 export const createPackFromTemplate = z.object({
   packTemplateId: z.string().min(1),
@@ -37,10 +37,12 @@ export const addPackTemplate = z.object({
   itemsOwnerId: z.string(),
   itemPackTemplates: z.array(
     z.object({
-      item: addNewItemGlobal,
+      item: addItemGlobal.omit({ ownerId: true }),
       quantity: z.number(),
     }),
   ),
 });
 
+export type AddPackTemplateType = z.infer<typeof addPackTemplate>;
+
 export const addPackTemplates = z.array(addPackTemplate);
diff --git a/server/src/controllers/item/importItemsGlobal.ts b/server/src/controllers/item/importItemsGlobal.ts
index fc15e1de9..50014a0e0 100644
--- a/server/src/controllers/item/importItemsGlobal.ts
+++ b/server/src/controllers/item/importItemsGlobal.ts
@@ -1,7 +1,7 @@
 import { type Context } from 'hono';
 import {
   addItemGlobalService,
-  addItemGlobalServiceBatch,
+  bulkAddItemsGlobalService,
 } from '../../services/item/item.service';
 import { protectedProcedure } from '../../trpc';
 import * as validator from '@packrat/validations';
@@ -72,6 +72,61 @@ export const importItemsGlobal = async (c: Context) => {
   }
 };
 
+/**
+ * Converts a list of raw CSV items into an iterable of validated items.
+ * @param {Array<Record<string, unknown>>} csvRawItems - The raw CSV items.
+ * @param {string} ownerId - The ID of the owner.
+ * @returns {Iterable<validator.AddItemGlobalType>} An iterable that yields the validated items.
+ */
+function* sanitizeItemsIterator(
+  csvRawItems: Array<Record<string, unknown>>,
+  ownerId: string,
+): Generator<validator.AddItemGlobalType> {
+  for (let idx = 0; idx < csvRawItems.length; idx++) {
+    const item = csvRawItems[idx];
+
+    const productDetailsStr = `${item.techs}`
+      .replace(/'([^']*)'\s*:/g, '"$1":') // Replace single quotes keys with double quotes.
+      .replace(/:\s*'([^']*)'/g, ': "$1"') // Replace single quotes values with double quotes.
+      .replace(/\\x([0-9A-Fa-f]{2})/g, (match, hex) => {
+        // Replace hex escape sequences with UTF-8 characters
+        const codePoint = parseInt(hex, 16);
+        return String.fromCharCode(codePoint);
+      });
+
+    console.log(`${idx} / ${csvRawItems.length}`);
+    let parsedProductDetails:
+      | validator.AddItemGlobalType['productDetails']
+      | null = null;
+    try {
+      parsedProductDetails = JSON.parse(productDetailsStr);
+    } catch (e) {
+      console.log(
+        `${productDetailsStr}\nFailed to parse product details for item ${item.Name}: ${e.message}`,
+      );
+      throw e;
+    }
+
+    const validatedItem: validator.AddItemGlobalType = {
+      name: String(item.Name),
+      weight: Number(item.Weight),
+      unit: String(item.Unit),
+      type: String(item.Category) as ItemCategoryEnum,
+      ownerId,
+      image_urls: item.image_urls && String(item.image_urls),
+      sku: item.sku && String(item.sku),
+      productUrl: item.product_url && String(item.product_url),
+      description: item.description && String(item.description),
+      seller: item.seller && String(item.seller),
+    };
+
+    if (parsedProductDetails) {
+      validatedItem.productDetails = parsedProductDetails;
+    }
+
+    yield validatedItem;
+  }
+}
 export function importItemsGlobalRoute() {
   const expectedHeaders = [
     'Name',
@@ -114,49 +169,23 @@ export function importItemsGlobalRoute() {
                 results.data.pop();
               }
 
-              let idx = 0;
-              await addItemGlobalServiceBatch(
-                results.data,
-                true,
+              const errors: Error[] = [];
+              const createdItems = await bulkAddItemsGlobalService(
+                sanitizeItemsIterator(results.data, ownerId),
                 opts.ctx.executionCtx,
-                (item) => {
-                  const productDetailsStr = `${item.techs}`
-                    .replace(/'([^']*)'\s*:/g, '"$1":') // Replace single quotes keys with double quotes.
-                    .replace(/:\s*'([^']*)'/g, ': "$1"') // Replace single quotes values with double quotes.
-                    .replace(/\\x([0-9A-Fa-f]{2})/g, (match, hex) => {
-                      // Replace hex escape sequences with UTF-8 characters
-                      const codePoint = parseInt(hex, 16);
-                      return String.fromCharCode(codePoint);
-                    });
-
-                  idx++;
-                  console.log(`${idx} / ${results.data.length}`);
-                  try {
-                    const parsedProductDetails = JSON.parse(productDetailsStr);
-                  } catch (e) {
-                    console.log(
-                      `${productDetailsStr}\nFailed to parse product details for item ${item.Name}: ${e.message}`,
-                    );
-                    throw e;
-                  }
-
-                  return {
-                    name: String(item.Name),
-                    weight: Number(item.Weight),
-                    unit: String(item.Unit),
-                    type: String(item.Category) as ItemCategoryEnum,
-                    ownerId,
-                    executionCtx: opts.ctx.executionCtx,
-                    image_urls: item.image_urls && String(item.image_urls),
-                    sku: item.sku && String(item.sku),
-                    productUrl: item.product_url && String(item.product_url),
-                    description: item.description && String(item.description),
-                    seller: item.seller && String(item.seller),
-                    productDetails: JSON.parse(productDetailsStr),
-                  };
+                {
+                  onItemCreationError: (error) => {
+                    errors.push(error);
+                  },
                 },
               );
-              return resolve('items');
+
+              return resolve({
+                status: 'success',
+                items: createdItems,
+                errorsCount: errors.length,
+                errors,
+              });
             } catch (error) {
               console.error(error);
               return reject(new Error(`Failed to add items: ${error.message}`));
diff --git a/server/src/controllers/packTemplates/getPackTemplate.ts b/server/src/controllers/packTemplates/getPackTemplate.ts
index 69eeda2e2..03942e002 100644
--- a/server/src/controllers/packTemplates/getPackTemplate.ts
+++ b/server/src/controllers/packTemplates/getPackTemplate.ts
@@ -1,9 +1,9 @@
 import * as validator from '@packrat/validations';
-import { publicProcedure } from 'src/trpc';
+import { protectedProcedure } from 'src/trpc';
 import { getPackTemplateService } from 'src/services/packTemplate/packTemplate.service';
 
 export function getPackTemplateRoute() {
-  return publicProcedure
+  return protectedProcedure
     .input(validator.getPackTemplate)
     .query(async ({ input }) => {
       const param = input.id ? { id: input.id } : { name: input.name };
diff --git a/server/src/controllers/user/getUsers.ts b/server/src/controllers/user/getUsers.ts
index ece62d01e..6721b0655 100644
--- a/server/src/controllers/user/getUsers.ts
+++ b/server/src/controllers/user/getUsers.ts
@@ -1,4 +1,4 @@
-import { protectedProcedure, publicProcedure } from '../../trpc';
+import { protectedProcedure } from '../../trpc';
 import { responseHandler } from '../../helpers/responseHandler';
 import { User } from '../../drizzle/methods/User';
 
@@ -13,7 +13,7 @@ export const getUsers = async (c) => {
 };
 
 export function getUsersRoute() {
-  return publicProcedure.query(async (opts) => {
+  return protectedProcedure.query(async (opts) => {
     const userClass = new User();
     const users = await userClass.findMany();
     return users;
diff --git a/server/src/db/schema.ts b/server/src/db/schema.ts
index 47770046c..db8e3a331 100644
--- a/server/src/db/schema.ts
+++ b/server/src/db/schema.ts
@@ -613,15 +613,10 @@ export const selectTemplateSchema = createSelectSchema(template);
 
 export type PackTemplate = InferSelectModel<typeof packTemplate>;
 export type InsertPackTemplate = InferInsertModel<typeof packTemplate>;
-export const insertPackTemplateSchema = createInsertSchema(packTemplate);
 export const selectPackTemplateSchema = createSelectSchema(packTemplate);
 
 export type ItemPackTemplate = InferSelectModel<typeof itemPackTemplate>;
 export type InsertItemPackTemplate = InferInsertModel<typeof itemPackTemplate>;
-export const insertItemPackTemplateSchema =
-  createInsertSchema(itemPackTemplate);
-export const selectItemPackTemplateSchema =
-  createSelectSchema(itemPackTemplate);
 
 export type Pack = InferSelectModel<typeof pack>;
 export type InsertPack = InferInsertModel<typeof pack>;
diff --git a/server/src/services/item/addItemGlobalService.ts b/server/src/services/item/addItemGlobalService.ts
index 567c8390b..b9371af67 100644
--- a/server/src/services/item/addItemGlobalService.ts
+++ b/server/src/services/item/addItemGlobalService.ts
@@ -1,4 +1,5 @@
 import { type ExecutionContext } from 'hono';
+import * as validator from '@packrat/validations';
 import {
   Item,
   ITEM_TABLE_NAME,
@@ -9,145 +10,76 @@ import { ItemCategory } from '../../drizzle/methods/itemcategory';
 import { ItemCategory as categories } from '../../utils/itemCategory';
 import { VectorClient } from '../../vector/client';
 import { convertWeight, SMALLEST_WEIGHT_UNIT } from 'src/utils/convertWeight';
-import { DbClient } from 'src/db/client';
-import { itemImage as itemImageTable } from '../../db/schema';
 import { summarizeItem } from 'src/utils/item';
-import { addNewItemService, bulkAddNewItemsService } from './addItemService';
-// import { prisma } from '../../prisma';
 
-interface AddItemGlobalServiceParams {
-  /** The name of the item. */
-  name: string;
-  /** The description of the item. */
-  description?: string;
-  /** The weight of the item. */
-  weight: number;
-  /** The unit of measurement for the item. */
-  unit: string;
-  /** The category of the item. */
-  type: (typeof categories)[number];
-  /** The ID of the owner of the item. */
-  ownerId: string;
-  /** The URLs of the images of the item. */
-  image_urls?: string;
-  /** The SKU of the item. */
-  sku?: string;
-  /** The URL of the product of the item. */
-  productUrl?: string;
-  /** The product details of the item. */
-  productDetails?: Record<string, string | number | boolean | null>;
-  /** The seller of the item. */
-  seller?: string;
-}
+type ItemWithCategory = Item & { category?: InsertItemCategory };
 
 /**
  * Adds an item to the global service.
+ * @param {Object} item - The data for the new item.
+ * @param {ExecutionContext} executionCtx - Then vector database execution context
  * @return {Promise<Object>} The newly created item.
  */
 export const addItemGlobalService = async (
-  {
-    name,
-    weight,
-    unit,
-    type,
-    ownerId,
-    image_urls,
-    sku,
-    productUrl,
-    description,
-    productDetails,
-    seller,
-  }: AddItemGlobalServiceParams,
-  executionCtx: ExecutionContext,
-) => {
+  item: validator.AddItemGlobalType,
+  executionCtx?: ExecutionContext,
+): Promise<ItemWithCategory> => {
   let category: InsertItemCategory | null;
-  if (!categories.includes(type)) {
-    throw new Error(`Category must be one of: ${categories.join(', ')}`);
+  if (!categories.includes(item.type)) {
+    const error = new Error(
+      `[${item.sku}#${item.name}]: Category must be one of: ${categories.join(', ')}`,
+    );
+    throw error;
   }
+
   const itemClass = new ItemClass();
   const itemCategoryClass = new ItemCategory();
-  category = (await itemCategoryClass.findItemCategory({ name: type })) || null;
+  category =
+    (await itemCategoryClass.findItemCategory({ name: item.type })) || null;
   if (!category) {
-    category = await itemCategoryClass.create({ name: type });
+    category = await itemCategoryClass.create({ name: item.type });
   }
-  const newItem = await itemClass.create({
-    name,
-    weight: convertWeight(Number(weight), unit as any, SMALLEST_WEIGHT_UNIT),
-    unit,
+
+  const newItem = (await itemClass.create({
+    name: item.name,
+    weight: convertWeight(
+      Number(item.weight),
+      item.unit as any,
+      SMALLEST_WEIGHT_UNIT,
+    ),
+    unit: item.unit,
     categoryId: category.id,
     global: true,
-    ownerId,
-    sku,
-    productUrl,
-    description,
-    productDetails,
-    seller,
-  });
+    ownerId: item.ownerId,
+    sku: item.sku,
+    productUrl: item.productUrl,
+    description: item.description,
+    productDetails: item.productDetails,
+    seller: item.seller,
+  })) as ItemWithCategory;
 
-  if (image_urls) {
-    const urls = image_urls.split(',');
+  if (item.image_urls) {
+    const urls = item.image_urls.split(',');
     for (const url of urls) {
-      const newItemImage = {
-        itemId: newItem.id,
-        url,
-      };
-      await DbClient.instance.insert(itemImageTable).values(newItemImage).run();
+      await itemClass.insertImage(newItem.id, url);
     }
   }
 
-  executionCtx.waitUntil(
-    VectorClient.instance.syncRecord({
-      id: newItem.id,
-      content: `product_name: ${name}, category: ${type}, description: ${description}, productDetails: ${JSON.stringify(
-        productDetails,
-      )}`,
-      namespace: ITEM_TABLE_NAME,
-      metadata: {
-        isPublic: newItem.global,
-        ownerId,
-      },
-    }),
-  );
+  newItem.category = category;
 
-  return newItem;
-};
-
-/**
- * Adds list of items to the global service.
- * @return {Promise<Object>} The newly created item.
- */
-export const addItemGlobalServiceBatch = async <T>(
-  rawItems: T[],
-  continueOnError = false,
-  executionCtx: ExecutionContext,
-  transform: (rawItem: T) => AddItemGlobalServiceParams,
-) => {
-  const errors: Error[] = [];
-
-  const createdItemsInOrder: Array<
-    Awaited<ReturnType<typeof addNewItemService>>
-  > = [];
-
-  function* itemIterator() {
-    for (let idx = 0; idx < rawItems.length; idx++) {
-      const item = transform(rawItems[idx]);
-      yield { ...item, category: item.type, imageUrls: item.image_urls };
-    }
+  if (executionCtx) {
+    executionCtx.waitUntil(
+      VectorClient.instance.syncRecord({
+        id: newItem.id,
+        content: summarizeItem(newItem),
+        namespace: ITEM_TABLE_NAME,
+        metadata: {
+          isPublic: newItem.global,
+          ownerId: newItem.ownerId,
+        },
+      }),
+    );
   }
 
-  await bulkAddNewItemsService({
-    items: itemIterator(),
-    executionCtx,
-    onItemCreationError: (error) => {
-      if (!continueOnError) {
-        throw error;
-      }
-      errors.push(error);
-    },
-  });
-
-  return {
-    createdItemsInOrder,
-    errors,
-  };
+  return newItem;
 };
diff --git a/server/src/services/item/addItemService.ts b/server/src/services/item/addItemService.ts
index eb9344dfd..59f0652d2 100644
--- a/server/src/services/item/addItemService.ts
+++ b/server/src/services/item/addItemService.ts
@@ -1,17 +1,11 @@
 import { type ExecutionContext } from 'hono';
-import * as validator from '@packrat/validations';
 import { Item as ItemClass } from '../../drizzle/methods/Item';
 import { ItemCategory } from '../../drizzle/methods/itemcategory';
 import { ItemOwners } from '../../drizzle/methods/ItemOwners';
 import { ItemCategory as categories } from '../../utils/itemCategory';
-import {
-  Item,
-  ITEM_TABLE_NAME,
-  type InsertItemCategory,
-} from '../../db/schema';
+import { type InsertItemCategory } from '../../db/schema';
 import { VectorClient } from '../../vector/client';
 import { convertWeight, SMALLEST_WEIGHT_UNIT } from 'src/utils/convertWeight';
-import { summarizeItem } from 'src/utils/item';
 
 /**
  * Generates a new item and adds it to a pack based on the given parameters.
@@ -92,109 +86,3 @@ export const addItemService = async (
 
   return item;
 };
-
-/**
- * Creates a new item.
- * @param {Object} item - The data for the new item.
- * @return {object} An object containing the newly created item
- */
-export const addNewItemService = async (
-  item: typeof validator.addNewItemGlobal._type,
-  ownerId: string,
-): Promise<Item & { category: InsertItemCategory }> => {
-  let category: InsertItemCategory | null;
-  if (!categories.includes(item.category)) {
-    const error = new Error(
-      `[${item.sku}#${item.name}]: Category must be one of: ${categories.join(', ')}`,
-    );
-    throw error;
-  }
-
-  const itemClass = new ItemClass();
-  const itemCategoryClass = new ItemCategory();
-  category =
-    (await itemCategoryClass.findItemCategory({ name: item.category })) || null;
-  if (!category) {
-    category = await itemCategoryClass.create({ name: item.category });
-  }
-
-  const newItem = await itemClass.create({
-    name: item.name,
-    weight: convertWeight(
-      Number(item.weight),
-      item.unit as any,
-      SMALLEST_WEIGHT_UNIT,
-    ),
-    unit: item.unit,
-    categoryId: category.id,
-    global: true,
-    ownerId,
-    sku: item.sku,
-    productUrl: item.productUrl,
-    description: item.description,
-    productDetails: item.productDetails,
-    seller: item.seller,
-  });
-
-  if (item.imageUrls) {
-    const urls = item.imageUrls.split(',');
-    for (const url of urls) {
-      await itemClass.insertImage(newItem.id, url);
-    }
-  }
-
-  return { ...newItem, category };
-};
-
-/**
- * Adds a list of items to the global inventory and indexes them in the vector database.
- * @param {Object} bulkPram: the config parameter
- * @param {Object} bulkPram.items - The list of items to add.
- * @param {string} bulkPram.ownerId - The owner of all items
- * @param {ExecutionContext} bulkParam.onItemCreated - A callback function to be called when an item is created.
- * @param {Function} bulkParam.onItemCreated - A callback function to be called when an item is created.
- */
-export const bulkAddNewItemsService = async (bulkParam: {
-  items: Iterable<
-    typeof validator.addNewItemGlobal._type & { ownerId: string }
-  >;
-  executionCtx: ExecutionContext;
-  onItemCreated?: (
-    item: Awaited<ReturnType<typeof addNewItemService>>,
-    bulkIndex: number,
-  ) => void;
-  onItemCreationError?: (error: Error, bulkIndex: number) => void;
-}): Promise<Array<Awaited<ReturnType<typeof addNewItemService>>>> => {
-  const { items, executionCtx, onItemCreated, onItemCreationError } = bulkParam;
-  const createdItems: Array<Awaited<ReturnType<typeof addNewItemService>>> = [];
-  const vectorData = [];
-
-  let idx = -1;
-  for (const item of items) {
-    idx += 1;
-    try {
-      const createdItem = await addNewItemService(item, item.ownerId);
-      if (onItemCreated) {
-        onItemCreated(createdItem, idx);
-      }
-      createdItems.push(createdItem);
-
-      vectorData.push({
-        id: createdItem.id,
-        content: summarizeItem(createdItem),
-        namespace: ITEM_TABLE_NAME,
-        metadata: {
-          isPublic: createdItem.global,
-          ownerId: createdItem.ownerId,
-        },
-      });
-    } catch (error) {
-      if (onItemCreationError) {
-        onItemCreationError(error as Error, idx);
-      }
-    }
-  }
-
-  executionCtx.waitUntil(VectorClient.instance.syncRecords(vectorData));
-  return createdItems;
-};
diff --git a/server/src/services/item/bulkAddGlobalItemService.ts b/server/src/services/item/bulkAddGlobalItemService.ts
index 1592d5f1a..c0aa1bb49 100644
--- a/server/src/services/item/bulkAddGlobalItemService.ts
+++ b/server/src/services/item/bulkAddGlobalItemService.ts
@@ -1,109 +1,60 @@
 import { type ExecutionContext } from 'hono';
-import { type InsertItemCategory } from '../../db/schema';
-import { ItemCategory } from '../../drizzle/methods/itemcategory';
-import { DbClient } from 'src/db/client';
-import {
-  item as ItemTable,
-  itemImage as itemImageTable,
-} from '../../db/schema';
-import { convertWeight, SMALLEST_WEIGHT_UNIT } from 'src/utils/convertWeight';
-import { eq } from 'drizzle-orm';
+import * as validator from '@packrat/validations';
+import { ITEM_TABLE_NAME } from '../../db/schema';
 import { VectorClient } from 'src/vector/client';
-
+import { addItemGlobalService } from './addItemGlobalService';
+import { summarizeItem } from 'src/utils/item';
+
+/**
+ * Adds a list of items to the global inventory and indexes them in the vector database.
+ * @param {Object} items - The list of items to add.
+ * @param {string} executionCtx - The execution context.
+ * @param {ExecutionContext} callbacks.onItemCreated - A callback function to be called when an item is created.
+ * @param {Function} callbacks.onItemCreationError - A callback function to be called when an item creation fails.
+ * @return {Promise<Array>} A promise that resolves to an array of the created items.
+ */
 export const bulkAddItemsGlobalService = async (
-  items: Array<{
-    name: string;
-    weight: number;
-    unit: string;
-    type: 'Food' | 'Water' | 'Essentials';
-    ownerId: string;
-    image_urls?: string;
-    sku?: string;
-    productUrl?: string;
-    description?: string;
-    productDetails?: Record<string, string | number | boolean | null>;
-    seller?: string;
-  }>,
+  items: Iterable<validator.AddItemGlobalType>,
   executionCtx: ExecutionContext,
-) => {
-  const categories = ['Food', 'Water', 'Essentials'];
-
-  const itemCategoryClass = new ItemCategory();
-  const insertedItems = [];
-
-  for (const itemData of items) {
-    const { name, weight, unit, type, ownerId, image_urls } = itemData;
-    if (!categories.includes(type)) {
-      throw new Error(`Category must be one of: ${categories.join(', ')}`);
-    }
-
-    let category: InsertItemCategory | null;
-    category =
-      (await itemCategoryClass.findItemCategory({ name: type })) || null;
-    if (!category) {
-      category = await itemCategoryClass.create({ name: type });
-    }
-
-    // Check if item with the same name already exists
-    const existingItem = await DbClient.instance
-      .select()
-      .from(ItemTable)
-      .where(eq(ItemTable.name, name))
-      .get();
-
-    if (existingItem) {
-      continue;
-    }
-
-    const newItem = {
-      name,
-      weight: convertWeight(Number(weight), unit as any, SMALLEST_WEIGHT_UNIT),
-      unit,
-      categoryId: category.id,
-      global: true,
-      ownerId,
-      sku,
-      productUrl,
-      description,
-      productDetails,
-      seller,
-    };
-
-    const item = await DbClient.instance
-      .insert(ItemTable)
-      .values(newItem)
-      .returning()
-      .get();
+  callbacks?: {
+    onItemCreated?: (
+      item: Awaited<ReturnType<typeof addItemGlobalService>>,
+      bulkIndex: number,
+    ) => void;
+    onItemCreationError?: (error: Error, bulkIndex: number) => void;
+  },
+): Promise<Array<Awaited<ReturnType<typeof addItemGlobalService>>>> => {
+  const { onItemCreated, onItemCreationError } = callbacks;
+  const createdItems: Array<Awaited<ReturnType<typeof addItemGlobalService>>> =
+    [];
+  const vectorData = [];
+
+  let idx = -1;
+  for (const item of items) {
+    idx += 1;
+    try {
+      const createdItem = await addItemGlobalService(item);
+      if (onItemCreated) {
+        onItemCreated(createdItem, idx);
+      }
+      createdItems.push(createdItem);
 
-    executionCtx.waitUntil(
-      VectorClient.instance.syncRecord({
-        id: item.id,
-        content: name,
-        namespace: 'items',
+      vectorData.push({
+        id: createdItem.id,
+        content: summarizeItem(createdItem),
+        namespace: ITEM_TABLE_NAME,
         metadata: {
-          isPublic: item.global,
-          ownerId,
+          isPublic: createdItem.global,
+          ownerId: createdItem.ownerId,
         },
-      }),
-    );
-
-    if (image_urls) {
-      const urls = image_urls.split(',');
-      for (const url of urls) {
-        const newItemImage = {
-          itemId: item.id,
-          url,
-        };
-        await DbClient.instance
-          .insert(itemImageTable)
-          .values(newItemImage)
-          .run();
+      });
+    } catch (error) {
+      if (onItemCreationError) {
+        onItemCreationError(error as Error, idx);
       }
-      console.log('Added image urls for item:', item.id);
     }
-
-    insertedItems.push(item);
   }
 
-  return insertedItems;
+  executionCtx.waitUntil(VectorClient.instance.syncRecords(vectorData));
+  return createdItems;
 };
diff --git a/server/src/services/packTemplate/addPackTemplateService.ts b/server/src/services/packTemplate/addPackTemplateService.ts
index 49549c619..637a8083c 100644
--- a/server/src/services/packTemplate/addPackTemplateService.ts
+++ b/server/src/services/packTemplate/addPackTemplateService.ts
@@ -18,7 +18,7 @@ import { i } from 'vitest/dist/reporters-QGe8gs4b.js';
  * @return {Object} An object containing the created pack.
  */
 export const addPackTemplateService = async (
-  packTemplateData: typeof validator.addPackTemplate._type,
+  packTemplateData: validator.AddPackTemplateType,
   executionCtx: ExecutionContext,
 ): Promise<PackTemplate> => {
   const { name, description, type } = packTemplateData;
@@ -48,9 +48,7 @@ export const addPackTemplateService = async (
     }
   }
 
-  await ItemService.bulkAddNewItemsService({
-    items: itemIterator(),
-    executionCtx,
+  await ItemService.bulkAddItemsGlobalService(itemIterator(), executionCtx, {
     onItemCreationError: (error, idx) => {
       console.error(`Error creating item at ${idx}:`, error);
     },
diff --git a/server/src/tests/routes/packTemplate.spec.ts b/server/src/tests/routes/packTemplate.spec.ts
index 5af0be490..d914ee981 100644
--- a/server/src/tests/routes/packTemplate.spec.ts
+++ b/server/src/tests/routes/packTemplate.spec.ts
@@ -123,6 +123,10 @@ describe('Pack template routes', () => {
         name: 'test',
         description: 'pack template description',
         type: 'pack',
+        itemPackTemplates: packTemplateItems.map((item) => ({
+          itemId: item.id,
+          quantity: 1,
+        })),
       });
       expect(packTemplate).toMatchObject([
         { ...packTemplate, items: packTemplateItems },

From c0ca61f21f3d3104d551ea544c3151012eefe69d Mon Sep 17 00:00:00 2001
From: Anmol Verma <anmolverma2810@gmail.com>
Date: Sun, 15 Dec 2024 21:30:53 +0530
Subject: [PATCH 41/66] style changes

---
 .../item/components/ItemDetailsContent.tsx    | 61 ++++++-------------
 1 file changed, 19 insertions(+), 42 deletions(-)

diff --git a/packages/app/modules/item/components/ItemDetailsContent.tsx b/packages/app/modules/item/components/ItemDetailsContent.tsx
index 860db0831..27347e2cd 100644
--- a/packages/app/modules/item/components/ItemDetailsContent.tsx
+++ b/packages/app/modules/item/components/ItemDetailsContent.tsx
@@ -7,6 +7,7 @@ import { SMALLEST_ITEM_UNIT } from '../constants';
 import useTheme from 'app/hooks/useTheme';
 import useResponsive from 'app/hooks/useResponsive';
 import { openExternalLink } from 'app/utils';
+import RPrimaryButton from 'app/components/RPrimaryButton';
 
 interface ItemData {
   title: string;
@@ -62,14 +63,12 @@ const ItemDetailsContent = ({ itemData }: { itemData: ItemData }) => {
             Seller: {itemData.seller}
           </RText>
         </RStack>
-        <TouchableOpacity
+        <RPrimaryButton
           onPress={() => {
             openExternalLink(itemData.productUrl);
           }}
-          style={styles.GoToStoreButton}
-        >
-          <RText style={styles.buttonText}>Go to Store</RText>
-        </TouchableOpacity>
+          label="Go to Store"
+        />
       </RStack>
     </RStack>
   );
@@ -82,7 +81,7 @@ const loadStyles = (theme: any) => {
   return {
     container: {
       flex: 1,
-      padding: xxs ? 0 : xs ? 8 : 10,
+      flexWrap: 'wrap',
     },
     detailsContainer: {
       flex: 1,
@@ -93,64 +92,42 @@ const loadStyles = (theme: any) => {
     title: {
       fontSize: xxs ? 16 : xs ? 16 : sm ? 18 : 20,
       fontWeight: 'bold',
-      maxHeight: 60,
+      maxHeight: 30,
       marginVertical: xxs ? 0 : 5,
     },
     infoRow: {
       flexDirection: 'row',
-      justifyContent: 'space-between',
-      alignItems: 'center',
-      marginVertical: xxs ? 0 : xs ? 3 : 5,
-      flexShrink: 1,
+      flexWrap: 'wrap',
     },
     categoryText: {
-      fontSize: xxs ? 12 : xs ? 12 : sm ? 14 : 16,
-      fontWeight: '400',
+      fontSize: xxs ? 12 : xs ? 12 : sm ? 14 : 14,
+      fontWeight: 400,
     },
     weightText: {
       fontSize: xxs ? 16 : xs ? 16 : 18,
-      fontWeight: xxs ? '800' : xs ? '700' : '600',
+      fontWeight: xxs ? 800 : xs ? 700 : 600,
     },
     descriptionSection: {
       maxHeight: 60,
       marginVertical: xxs ? 0 : 5,
-      padding: xxs ? 0 : 5,
+      // padding: xs ? 0 : 5,
     },
     descriptionText: {
-      fontSize: xxs ? 12 : xs ? 12 : sm ? 14 : 16,
+      fontSize: xxs ? 12 : xs ? 12 : sm ? 14 : 14,
     },
     skuSellerRow: {
-      flexDirection: 'row',
-      justifyContent: 'space-between',
-      alignItems: 'center',
-      paddingBottom: xxs ? 0 : 5,
-      height: 30,
+      flexDirection: 'column',
+      flexWrap: 'wrap',
     },
     skuText: {
-      fontSize: xxs ? 9 : 10,
-      fontWeight: '600',
-      flexShrink: 1,
-      maxWidth: '40%',
-      paddingTop: xxs ? 13 : 0,
+      fontSize: xxs ? 10 : 12,
+      fontWeight: 400,
+      maxHeight: 20,
     },
     sellerText: {
-      fontSize: xxs ? 9 : 10,
-      fontWeight: '600',
-      flexGrow: 0,
-      flexShrink: 0,
-    },
-    GoToStoreButton: {
-      backgroundColor: currentTheme.colors.secondaryBlue,
-      paddingVertical: xxs ? 4 : 6,
-      paddingHorizontal: xxs ? 0 : 10,
-      borderRadius: 3,
-      alignItems: 'center',
-      marginTop: 5,
-    },
-    buttonText: {
-      color: currentTheme.colors.text,
-      fontWeight: 'bold',
       fontSize: xxs ? 10 : 12,
+      fontWeight: 400,
+      maxHeight: 20,
     },
   };
 };

From 45c8a9b9317e190725a85e866ac15bb4bca5eaf0 Mon Sep 17 00:00:00 2001
From: Taron <taron.aleksanyan.20@gmail.com>
Date: Sun, 15 Dec 2024 21:43:02 +0400
Subject: [PATCH 42/66] enhance settings screen

---
 packages/app/components/Fab/FabWeb.tsx        |   4 -
 .../app/components/LayoutCard/LayoutCard.tsx  |   1 -
 .../components/navigation/Navbar/Navbar.tsx   |   3 +-
 .../hooks/common/usePreviewResourceState.ts   |   1 +
 .../app/hooks/singletrips/useUserTrips.ts     |   2 -
 .../components/HeroSection/HeroSection.tsx    |   5 +-
 .../SectionHeader/SectionHeader.tsx           |  10 +-
 .../DashboardScreen/DashboardScreen.tsx       |  13 +-
 .../feed/hooks/useFetchUserFavorites.ts       |   8 +-
 .../item/screens/ItemDetailsScreen.tsx        |  11 +-
 .../app/modules/pack/hooks/useUserPacks.ts    |  45 +--
 .../app/modules/trip/hooks/useUserTrips.ts    |  41 +-
 .../user/components/UserDetailList.tsx        |  32 +-
 packages/app/modules/user/hooks/useProfile.ts |   4 +
 .../modules/user/widgets/ProfileContainer.tsx | 357 +++++++-----------
 .../user/widgets/UserDataContainer.tsx        | 134 +++----
 packages/ui/src/dialog/BaseDialog.tsx         |   4 +-
 .../controllers/favorite/getUserFavorites.ts  |   9 +-
 .../favorite/getUserFavoritesService.ts       |   5 +-
 19 files changed, 277 insertions(+), 412 deletions(-)

diff --git a/packages/app/components/Fab/FabWeb.tsx b/packages/app/components/Fab/FabWeb.tsx
index 360fc3d03..66766fade 100644
--- a/packages/app/components/Fab/FabWeb.tsx
+++ b/packages/app/components/Fab/FabWeb.tsx
@@ -46,12 +46,8 @@ const loadStyles = (theme) => {
       alignSelf: 'stretch',
       zIndex: 2,
     },
-    fabIcon: {
-      color: currentTheme.colors.tertiaryBlue,
-    },
     fabText: {
       fontSize: 17,
-      color: currentTheme.colors.tertiaryBlue,
       fontWeight: 'bold',
     },
   };
diff --git a/packages/app/components/LayoutCard/LayoutCard.tsx b/packages/app/components/LayoutCard/LayoutCard.tsx
index 48227094d..f8b660c9c 100644
--- a/packages/app/components/LayoutCard/LayoutCard.tsx
+++ b/packages/app/components/LayoutCard/LayoutCard.tsx
@@ -21,7 +21,6 @@ export const LayoutCard: FC<LayoutCardProps> = ({
       style={[
         {
           backgroundColor: currentTheme.colors.card,
-          boxShadow: '0px 4px 8px rgba(0,0,0,0.1)',
           borderWidth: 1,
           borderColor: isDark ? '#424242' : '#e5e7eb',
           padding: 24,
diff --git a/packages/app/components/navigation/Navbar/Navbar.tsx b/packages/app/components/navigation/Navbar/Navbar.tsx
index fdaeabd87..aadc8f869 100644
--- a/packages/app/components/navigation/Navbar/Navbar.tsx
+++ b/packages/app/components/navigation/Navbar/Navbar.tsx
@@ -122,7 +122,8 @@ const loadStyles = (currentTheme, isScrolled, screenWidth) => {
     },
     container: {
       width: '100vw',
-      maxWidth: '100%', // Ensure container does not exceed the viewport width
+      maxWidth: 1440,
+      margin: 'auto',
       flex: 1, // Ensure container can grow to fit content
       backgroundColor,
       borderRadius: NavbarStyles.floatingRadius,
diff --git a/packages/app/hooks/common/usePreviewResourceState.ts b/packages/app/hooks/common/usePreviewResourceState.ts
index c820d6b46..dc457e634 100644
--- a/packages/app/hooks/common/usePreviewResourceState.ts
+++ b/packages/app/hooks/common/usePreviewResourceState.ts
@@ -10,6 +10,7 @@ interface PreviewResourceState {
 export interface PreviewResourceStateWithData
   extends PreviewResourceState,
     Partial<PaginationReturn> {
+  resourceName: string;
   isPreviewLoading: boolean;
   previewData: any;
   isAllQueryLoading: boolean;
diff --git a/packages/app/hooks/singletrips/useUserTrips.ts b/packages/app/hooks/singletrips/useUserTrips.ts
index a074ce322..b0fc33f16 100644
--- a/packages/app/hooks/singletrips/useUserTrips.ts
+++ b/packages/app/hooks/singletrips/useUserTrips.ts
@@ -14,8 +14,6 @@ export const useUserTrips = (ownerId: string | undefined) => {
     },
   );
 
-  console.log('data', data);
-
   // Extract trips or set an empty array if data is undefined.
   // const trips = data?.trips || [];
 
diff --git a/packages/app/modules/dashboard/components/HeroSection/HeroSection.tsx b/packages/app/modules/dashboard/components/HeroSection/HeroSection.tsx
index 64a6db02e..419d16ffd 100644
--- a/packages/app/modules/dashboard/components/HeroSection/HeroSection.tsx
+++ b/packages/app/modules/dashboard/components/HeroSection/HeroSection.tsx
@@ -116,19 +116,20 @@ const loadStyles = (theme: any) => {
     },
     stack: {
       width: '100%',
-      alignItems: 'flex-start', // Align items to the start (left)
+      alignItems: 'flex-start',
+      paddingTop: Platform.OS === 'web' ? 24 : 16,
     },
     title: {
       fontSize: 24,
       fontWeight: 'bold',
       marginBottom: 20,
-      color: currentTheme.colors.tertiaryBlue,
       textAlign: 'left', // Align text to the left
       width: '100%', // Ensure it takes full width for left alignment
     },
     searchContainer: {
       width: '100%',
       alignItems: 'flex-start',
+      padding: 2,
     },
     searchBar: {
       width: '100%',
diff --git a/packages/app/modules/dashboard/components/SectionHeader/SectionHeader.tsx b/packages/app/modules/dashboard/components/SectionHeader/SectionHeader.tsx
index 039f133dc..c2b8fb9ef 100644
--- a/packages/app/modules/dashboard/components/SectionHeader/SectionHeader.tsx
+++ b/packages/app/modules/dashboard/components/SectionHeader/SectionHeader.tsx
@@ -8,14 +8,9 @@ import useCustomStyles from 'app/hooks/useCustomStyles';
 interface SectionHeaderProps {
   iconName: keyof typeof Ionicons.glyphMap;
   text: string;
-  textStyle: any;
 }
 
-export const SectionHeader = ({
-  iconName,
-  text,
-  textStyle,
-}: SectionHeaderProps) => {
+export const SectionHeader = ({ iconName, text }: SectionHeaderProps) => {
   const styles = useCustomStyles(loadStyles);
   const navigate = useNavigate();
 
@@ -40,8 +35,7 @@ const loadStyles = (theme: any) => {
       width: '100%',
     },
     text: {
-      color: currentTheme.colors.tertiaryBlue,
-      fontSize: 25,
+      fontSize: 24,
       fontWeight: 'bold',
     },
     icon: {
diff --git a/packages/app/modules/dashboard/screens/DashboardScreen/DashboardScreen.tsx b/packages/app/modules/dashboard/screens/DashboardScreen/DashboardScreen.tsx
index 739c37ca2..6772a411f 100644
--- a/packages/app/modules/dashboard/screens/DashboardScreen/DashboardScreen.tsx
+++ b/packages/app/modules/dashboard/screens/DashboardScreen/DashboardScreen.tsx
@@ -4,7 +4,6 @@ import { RStack, RScrollView } from '@packrat/ui';
 import { HeroSection, Section, SectionHeader } from '../../components';
 import useCustomStyles from 'app/hooks/useCustomStyles';
 import Layout from 'app/components/layout/Layout';
-import { SCREEN_WIDTH } from 'app/constants/breakpoint';
 import { useScreenWidth } from 'app/hooks/common';
 import FAB from 'app/components/Fab/Fab';
 import { FeedPreview } from 'app/modules/feed';
@@ -32,7 +31,7 @@ export const DashboardScreen = () => {
                   flexDirection: 'row',
                   alignItems: 'center',
                   alignSelf: 'flex-end',
-                  paddingRight: 16,
+                  marginTop: 16,
                   gap: 8,
                 }}
               >
@@ -49,11 +48,7 @@ export const DashboardScreen = () => {
             <View style={styles.gridContainer}>
               <View style={styles.gridItem}>
                 <Section>
-                  <SectionHeader
-                    iconName="newspaper-outline"
-                    text="Feed"
-                    textStyle={styles.sectionHeaderText}
-                  />
+                  <SectionHeader iconName="newspaper-outline" text="Feed" />
                   <FeedPreview feedType="public" />
                 </Section>
               </View>
@@ -85,6 +80,7 @@ const loadStyles = (theme) => {
     },
     gridContainer: {
       flexDirection: 'row',
+      marginTop: 32,
       flexWrap: 'wrap',
       justifyContent: 'space-between',
     },
@@ -92,8 +88,5 @@ const loadStyles = (theme) => {
       flexBasis: '100%',
       backgroundColor: currentTheme.colors.background,
     },
-    sectionHeaderText: {
-      color: currentTheme.colors.text,
-    },
   };
 };
diff --git a/packages/app/modules/feed/hooks/useFetchUserFavorites.ts b/packages/app/modules/feed/hooks/useFetchUserFavorites.ts
index f9c1e73d7..121b915fc 100644
--- a/packages/app/modules/feed/hooks/useFetchUserFavorites.ts
+++ b/packages/app/modules/feed/hooks/useFetchUserFavorites.ts
@@ -12,7 +12,7 @@ import {
 
 export const useFetchUserFavorites = (
   userId: string,
-  { queryEnabled = true, isPreview = false, searchTerm = '' } = {},
+  { queryEnabled = true, isPreview = false, searchTerm = '', isPublic } = {},
 ) => {
   const enabled = !!userId && queryEnabled;
   const [pagination, setPagination] = useState<PaginationParams>(
@@ -21,7 +21,7 @@ export const useFetchUserFavorites = (
 
   const { data, error, isLoading, refetch } =
     queryTrpc.getUserFavorites.useQuery(
-      { userId, pagination, isPreview, searchTerm },
+      { userId, pagination, isPreview, searchTerm, isPublic },
       {
         enabled,
         refetchOnWindowFocus: false,
@@ -64,11 +64,12 @@ interface FetchUserFavoritesReturn extends PreviewResourceStateWithData {
 export const useFetchUserFavoritesWithPreview = (
   userId: string,
   searchTerm: string,
+  isPublic?: boolean,
 ): FetchUserFavoritesReturn => {
   const { isAllQueryEnabled, ...previewResourceState } =
     usePreviewResourceState();
   const { data: previewData, isLoading: isPreviewLoading } =
-    useFetchUserFavorites(userId, { isPreview: true });
+    useFetchUserFavorites(userId, { isPreview: true, isPublic });
 
   const {
     data: allQueryData,
@@ -87,6 +88,7 @@ export const useFetchUserFavoritesWithPreview = (
 
   return {
     ...previewResourceState,
+    resourceName: 'Favorites',
     isAllQueryEnabled,
     previewData,
     isPreviewLoading,
diff --git a/packages/app/modules/item/screens/ItemDetailsScreen.tsx b/packages/app/modules/item/screens/ItemDetailsScreen.tsx
index 9c539f255..0280517d7 100644
--- a/packages/app/modules/item/screens/ItemDetailsScreen.tsx
+++ b/packages/app/modules/item/screens/ItemDetailsScreen.tsx
@@ -9,6 +9,7 @@ import useCustomStyles from 'app/hooks/useCustomStyles';
 import { TouchableOpacity, Platform } from 'react-native';
 import { useRouter } from 'app/hooks/router';
 import RLink from '@packrat/ui/src/RLink';
+import Layout from 'app/components/layout/Layout';
 
 export function ItemDetailsScreen() {
   const { currentTheme } = useTheme();
@@ -22,13 +23,7 @@ export function ItemDetailsScreen() {
   }
 
   return (
-    <RScrollView
-      style={{
-        marginBottom: 40,
-        flex: 1,
-        backgroundColor: currentTheme.colors.background,
-      }}
-    >
+    <Layout>
       <RStack style={{ padding: 10, width: '100%', paddingBottom: 50 }}>
         <RStack style={styles.breadcrumbContainer}>
           {Platform.OS === 'web' ? (
@@ -80,7 +75,7 @@ export function ItemDetailsScreen() {
         </RH3>
         <FeedPreview feedType="similarItems" id={itemId} />
       </LargeCard>
-    </RScrollView>
+    </Layout>
   );
 }
 
diff --git a/packages/app/modules/pack/hooks/useUserPacks.ts b/packages/app/modules/pack/hooks/useUserPacks.ts
index e6babf6ee..5ed78a401 100644
--- a/packages/app/modules/pack/hooks/useUserPacks.ts
+++ b/packages/app/modules/pack/hooks/useUserPacks.ts
@@ -8,7 +8,7 @@ import {
   type PreviewResourceStateWithData,
   usePreviewResourceState,
 } from 'app/hooks/common';
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 
 interface QueryOptions {
   isPublic?: boolean;
@@ -29,25 +29,26 @@ export const useUserPacks = (
   );
   const utils = queryTrpc.useContext();
   const enabled = queryEnabled && !!ownerId;
+  const queryParams = useMemo(
+    () => ({
+      ownerId,
+      isPublic,
+      queryBy: queryString,
+      pagination,
+      searchTerm,
+      isPreview,
+      itemId,
+    }),
+    [isPublic, isPreview, searchTerm, pagination, ownerId, itemId, queryString],
+  );
   const { data, error, isLoading, refetch } =
-    queryTrpc.getUserPacksFeed.useQuery(
-      {
-        ownerId,
-        isPublic,
-        queryBy: queryString,
-        pagination,
-        searchTerm,
-        isPreview,
-        itemId,
-      },
-      {
-        enabled,
-        refetchOnWindowFocus: false,
-        staleTime: 5 * 60,
-        cacheTime: 60 * 60 * 24,
-        networkMode: 'offlineFirst',
-      },
-    );
+    queryTrpc.getUserPacksFeed.useQuery(queryParams, {
+      enabled,
+      refetchOnWindowFocus: false,
+      staleTime: 5 * 60,
+      cacheTime: 60 * 60 * 24,
+      networkMode: 'offlineFirst',
+    });
   utils.getPacks.setData({
     ownerId: ownerId || '',
     queryBy: queryString,
@@ -92,12 +93,13 @@ interface FetchUserPacksPreviewReturn extends PreviewResourceStateWithData {
 export const useUserPacksWithPreview = (
   userId: string,
   searchTerm: string,
+  isPublic?: boolean,
 ): FetchUserPacksPreviewReturn => {
   const { isAllQueryEnabled, ...previewResourceState } =
     usePreviewResourceState();
   const { data: previewData, isLoading: isPreviewLoading } = useUserPacks(
     userId,
-    { isPublic: true, isPreview: true },
+    { isPreview: true, isPublic },
     'Most Recent',
     true,
   );
@@ -112,10 +114,11 @@ export const useUserPacksWithPreview = (
     hasNextPage,
     currentPage,
     totalPages,
-  } = useUserPacks(userId, { isPublic: true, searchTerm }, 'Most Recent', true);
+  } = useUserPacks(userId, { isPublic, searchTerm }, 'Most Recent', true);
 
   return {
     ...previewResourceState,
+    resourceName: 'Packs',
     isAllQueryEnabled,
     previewData,
     isPreviewLoading,
diff --git a/packages/app/modules/trip/hooks/useUserTrips.ts b/packages/app/modules/trip/hooks/useUserTrips.ts
index 0b90197f4..c1ff57a39 100644
--- a/packages/app/modules/trip/hooks/useUserTrips.ts
+++ b/packages/app/modules/trip/hooks/useUserTrips.ts
@@ -8,7 +8,7 @@ import {
   type PreviewResourceStateWithData,
   usePreviewResourceState,
 } from 'app/hooks/common';
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 
 export const useUserTrips = (
   ownerId: string | undefined,
@@ -20,23 +20,24 @@ export const useUserTrips = (
   );
   const enabled = queryEnabled && !!ownerId;
   const { searchTerm, isPublic, isPreview } = params || {};
+  const queryParams = useMemo(
+    () => ({
+      ownerId,
+      searchTerm,
+      queryBy: 'Most Recent',
+      pagination,
+      isPublic,
+      isPreview,
+    }),
+    [isPublic, isPreview, searchTerm, pagination, ownerId],
+  );
 
   // Leverage the query hook provided by tRPC
   const { data, error, isLoading, refetch } =
-    queryTrpc.getUserTripsFeed.useQuery(
-      {
-        ownerId,
-        searchTerm,
-        queryBy: 'Most Recent',
-        pagination,
-        isPublic,
-        isPreview,
-      },
-      {
-        enabled, // This query will run only if 'enabled' is true.
-        refetchOnWindowFocus: false,
-      },
-    );
+    queryTrpc.getUserTripsFeed.useQuery(queryParams, {
+      enabled, // This query will run only if 'enabled' is true.
+      refetchOnWindowFocus: false,
+    });
 
   const { fetchPrevPage, fetchNextPage } = usePagination(
     refetch,
@@ -77,12 +78,13 @@ interface FetchUserTripsPreviewReturn extends PreviewResourceStateWithData {
 export const useUserTripsWithPreview = (
   userId: string,
   searchTerm: string,
+  isPublic?: boolean,
 ): FetchUserTripsPreviewReturn => {
   const { isAllQueryEnabled, ...previewResourceState } =
     usePreviewResourceState();
   const { data: previewData, isLoading: isPreviewLoading } = useUserTrips(
     userId,
-    { isPublic: true, searchTerm },
+    { isPublic, isPreview: true, searchTerm },
     true,
   );
 
@@ -96,14 +98,11 @@ export const useUserTripsWithPreview = (
     totalPages,
     hasPrevPage,
     hasNextPage,
-  } = useUserTrips(
-    userId,
-    { isPublic: true, searchTerm: '' },
-    isAllQueryEnabled,
-  );
+  } = useUserTrips(userId, { isPublic, searchTerm: '' }, isAllQueryEnabled);
 
   return {
     ...previewResourceState,
+    resourceName: 'Trips',
     isAllQueryEnabled,
     previewData,
     isPreviewLoading,
diff --git a/packages/app/modules/user/components/UserDetailList.tsx b/packages/app/modules/user/components/UserDetailList.tsx
index 240e56a8b..ce646f209 100644
--- a/packages/app/modules/user/components/UserDetailList.tsx
+++ b/packages/app/modules/user/components/UserDetailList.tsx
@@ -10,6 +10,7 @@ import { FeedCard, FeedSearchFilter } from 'app/modules/feed';
 import { fuseSearch } from 'app/utils/fuseSearch';
 import { BaseDialog, BaseModal, Pagination, RButton } from '@packrat/ui';
 import { type PreviewResourceStateWithData } from 'app/hooks/common';
+import RSecondaryButton from 'app/components/RSecondaryButton';
 
 interface DataListProps {
   resource: PreviewResourceStateWithData;
@@ -27,20 +28,9 @@ export const UserDataList = ({
   return (
     <>
       {Platform.OS == 'web' ? (
-        <BaseModal
-          title="See all"
-          trigger="See all"
-          isOpen={resource.isSeeAllModalOpen}
-          onOpen={() => resource.setIsSeeAllModalOpen(true)}
-          onClose={() => resource.setIsSeeAllModalOpen(false)}
-          footerButtons={[
-            {
-              label: 'Cancel',
-              color: '#B22222',
-              onClick: (_, closeModal) => closeModal(),
-            },
-          ]}
-          footerComponent={undefined}
+        <BaseDialog
+          title={`${resource.resourceName} List`}
+          triggerComponent={<RSecondaryButton label="View in list" />}
         >
           <View
             style={
@@ -87,19 +77,11 @@ export const UserDataList = ({
               />
             ) : null}
           </View>
-        </BaseModal>
+        </BaseDialog>
       ) : (
         <BaseDialog
-          title="See all"
-          trigger="See all"
-          footerButtons={[
-            {
-              label: 'Cancel',
-              color: '#B22222',
-              onClick: (_, closeModal) => closeModal(),
-            },
-          ]}
-          footerComponent={undefined}
+          title={`${resource.resourceName} List`}
+          triggerComponent={<RSecondaryButton label="View in list" />}
         >
           <FeedSearchFilter
             isSortHidden={true}
diff --git a/packages/app/modules/user/hooks/useProfile.ts b/packages/app/modules/user/hooks/useProfile.ts
index 504041b8d..84572e9de 100644
--- a/packages/app/modules/user/hooks/useProfile.ts
+++ b/packages/app/modules/user/hooks/useProfile.ts
@@ -8,6 +8,8 @@ import type { PreviewListType } from '../model';
 
 export const useProfile = (id = null) => {
   const authUser = useAuthUser();
+  const isAuthUserProfile = !id || id === authUser?.id;
+  console.log('isAuthUserProfile', isAuthUserProfile);
   const userId = id ?? authUser?.id;
   const [searchTerms, setSearchTerms] = useState<
     Record<PreviewListType, string>
@@ -22,10 +24,12 @@ export const useProfile = (id = null) => {
   const userPacksQuery = useUserPacksWithPreview(
     userId as string,
     searchTerms.packs,
+    !isAuthUserProfile ? true : undefined,
   );
   const userTripsQuery = useUserTripsWithPreview(
     userId as string,
     searchTerms.trips,
+    !isAuthUserProfile ? true : undefined,
   );
 
   const onSearchChange = useCallback(
diff --git a/packages/app/modules/user/widgets/ProfileContainer.tsx b/packages/app/modules/user/widgets/ProfileContainer.tsx
index 674ddcf93..1e45eb636 100644
--- a/packages/app/modules/user/widgets/ProfileContainer.tsx
+++ b/packages/app/modules/user/widgets/ProfileContainer.tsx
@@ -5,6 +5,7 @@ import {
   RStack,
   RText as OriginalRText,
   RSkeleton,
+  XStack,
 } from '@packrat/ui';
 import { ScrollView } from 'react-native-gesture-handler';
 import { UserDataContainer } from './UserDataContainer';
@@ -16,6 +17,8 @@ import useCustomStyles from 'app/hooks/useCustomStyles';
 import Avatar from '../../../components/Avatar/Avatar';
 import { useProfile } from '../hooks';
 import Layout from 'app/components/layout/Layout';
+import { AsyncView } from 'app/components/AsyncView';
+import { LayoutCard } from 'app/components/LayoutCard';
 
 const RText: any = OriginalRText;
 
@@ -55,7 +58,6 @@ const Header = ({
   const { enableDarkMode, enableLightMode, isDark, isLight, currentTheme } =
     useTheme();
   const styles = useCustomStyles(loadStyles);
-  const profileImage = user?.profileImage ?? null;
   const userRealName = user?.name ?? null;
   const userEmail = user?.email ?? null;
   const userEmailSplitFirstHalf = userEmail?.split('@')[0] ?? null;
@@ -64,124 +66,89 @@ const Header = ({
     : `@${userEmailSplitFirstHalf}`;
 
   return (
-    <Layout>
-      <View style={{ width: '90%', ...styles.infoSection }}>
-        <RStack
-          style={{ flexDirection: 'row', width: '100%', alignItems: 'center' }}
-        >
-          {isCurrentUser && !isLoading && (
-            <View style={{ alignSelf: 'flex-start', marginLeft: 'auto' }}>
-              <SettingsButton />
-            </View>
-          )}
-          <RStack style={{ alignItems: 'center', flex: 1 }}>
-            <View style={styles.userInfo}>
-              {isLoading ? (
-                <>
-                  <RSkeleton
-                    style={{
-                      borderRadius: 100,
-                      height: 100,
-                      width: 100,
-                    }}
-                  />
-                  <RSkeleton
-                    style={{
-                      height: 100,
-                      width: '100%',
-                      marginTop: 8,
-                      alignItems: 'center',
-                    }}
-                  />
-                </>
-              ) : (
-                <>
-                  <Avatar src={user?.profileImage} />
-                  <RText style={{ marginTop: 16, ...styles.userName }}>
-                    {userRealName}
-                  </RText>
-                  <RText style={styles.userEmail}>{username}</RText>
-                </>
-              )}
-            </View>
-          </RStack>
-          {isCurrentUser && !isLoading && <View style={{ width: 45 }} />}
-        </RStack>
-        <RStack style={{ flexDirection: 'row', ...styles.card }}>
-          {isLoading ? (
-            <>
-              <RSkeleton style={{ borderRadius: 100, width: 50, height: 50 }} />
-              <RSkeleton style={{ borderRadius: 100, width: 50, height: 50 }} />
-              <RSkeleton style={{ borderRadius: 100, width: 50, height: 50 }} />
-              <RSkeleton style={{ borderRadius: 100, width: 50, height: 50 }} />
-            </>
-          ) : (
-            <>
-              <View style={styles.cardInfo}>
-                <RText>Trips</RText>
-                <RText>{tripsCount}</RText>
-              </View>
-              <View style={styles.cardInfo}>
-                <RText color={currentTheme.colors.tertiaryBlue}>Packs</RText>
-                <RText color={currentTheme.colors.tertiaryBlue}>
-                  {packsCount}
-                </RText>
-              </View>
-              <View style={styles.cardInfo}>
-                <RText color={currentTheme.colors.tertiaryBlue}>
-                  Favorites
-                </RText>
-                <RText color={currentTheme.colors.tertiaryBlue}>
-                  {favoritesCount}
-                </RText>
-              </View>
-              <View style={styles.cardInfo}>
-                <RText color={currentTheme.colors.tertiaryBlue}>
-                  Certified
-                </RText>
-                <MaterialCommunityIcons
-                  name="certificate-outline"
-                  size={24}
-                  color={
-                    user?.is_certified_guide
-                      ? currentTheme.colors.cardIconColor
-                      : currentTheme.colors.tertiaryBlue
-                  }
+    <View>
+      <RStack
+        style={{ flexDirection: 'row', width: '100%', alignItems: 'center' }}
+      >
+        {isCurrentUser && !isLoading && (
+          <View style={{ alignSelf: 'flex-start', marginLeft: 'auto' }}>
+            <SettingsButton />
+          </View>
+        )}
+        <RStack style={{ alignItems: 'center', flex: 1 }}>
+          <View style={styles.userInfo}>
+            {isLoading ? (
+              <>
+                <RSkeleton
+                  style={{
+                    borderRadius: 100,
+                    height: 100,
+                    width: 100,
+                  }}
                 />
-              </View>
-            </>
-          )}
+                <RSkeleton
+                  style={{
+                    height: 100,
+                    width: '100%',
+                    marginTop: 8,
+                    alignItems: 'center',
+                  }}
+                />
+              </>
+            ) : (
+              <>
+                <Avatar src={user?.profileImage} />
+                <RText style={{ marginTop: 16, ...styles.userName }}>
+                  {userRealName}
+                </RText>
+                <RText style={styles.userEmail}>{username}</RText>
+              </>
+            )}
+          </View>
         </RStack>
-        {error ? <RText>{error}</RText> : null}
-      </View>
-    </Layout>
-  );
-};
-
-// Skeleton version of the UserDataCard component
-const SkeletonUserDataCard = () => {
-  return (
-    <View
-      style={{
-        borderRadius: 15,
-        backgroundColor: 'lightgray',
-        padding: 10,
-        margin: 5,
-        width: '90%',
-        // boxShadow: '0px 2px 4px rgba(0, 0, 0, 0.1)',
-        shadowColor: '#000',
-        shadowOffset: {
-          width: 0,
-          height: 2,
-        },
-        shadowOpacity: 0.1,
-        shadowRadius: 4,
-        elevation: 1,
-      }}
-    >
-      <RSkeleton style={{ marginBottom: 8, height: 50, width: '70%' }} />
-      <RSkeleton style={{ marginBottom: 8, height: 50, width: '50%' }} />
-      <RSkeleton style={{ height: 50, width: '30%' }} />
+        {isCurrentUser && !isLoading && <View style={{ width: 45 }} />}
+      </RStack>
+      <AsyncView
+        isLoading={isLoading}
+        isError={!!error}
+        errorComponent={<RText>{error}</RText>}
+      >
+        <LayoutCard style={{ width: '100%' }}>
+          <XStack style={{ justifyContent: 'space-around' }}>
+            <View style={styles.cardInfo}>
+              <RText style={{ fontSize: 16, lineHeight: 20 }}>Trips</RText>
+              <RText style={{ fontSize: 24, fontWeight: 500, lineHeight: 32 }}>
+                {tripsCount}
+              </RText>
+            </View>
+            <View style={styles.cardInfo}>
+              <RText style={{ fontSize: 16, lineHeight: 20 }}>Packs</RText>
+              <RText style={{ fontSize: 24, fontWeight: 500, lineHeight: 32 }}>
+                {packsCount}
+              </RText>
+            </View>
+            <View style={styles.cardInfo}>
+              <RText style={{ fontSize: 16, lineHeight: 20 }}>Favorites</RText>
+              <RText style={{ fontSize: 24, fontWeight: 500, lineHeight: 32 }}>
+                {favoritesCount}
+              </RText>
+            </View>
+            {/* TODO add guide users */}
+            {/* <View style={styles.cardInfo}>
+              <RText>Certified</RText>
+              <MaterialCommunityIcons
+                name="certificate-outline"
+                size={24}
+                color={
+                  user?.is_certified_guide
+                    ? currentTheme.colors.cardIconColor
+                    : currentTheme.colors.tertiaryBlue
+                }
+              />
+            </View> */}
+          </XStack>
+        </LayoutCard>
+      </AsyncView>
     </View>
   );
 };
@@ -204,100 +171,62 @@ export function ProfileContainer({ id = null }) {
     error,
   } = useProfile(id);
 
+  useEffect(() => {
+    console.log('mount');
+    return () => {
+      console.log('unmount');
+    };
+  }, [user]);
+
   return (
-    <View>
-      <ScrollView>
-        <RStack
-          style={[
-            styles.mainContainer,
-            Platform.OS == 'web'
-              ? { minHeight: '100vh' }
-              : { minHeight: '100%', paddingBottom: 100 },
-          ]}
-        >
-          <Header
-            user={user}
+    <Layout>
+      <RStack style={{ gap: 32 }}>
+        <Header
+          user={user}
+          isLoading={isLoading}
+          error={error}
+          tripsCount={tripsCount}
+          packsCount={packsCount}
+          favoritesCount={favoritesCount}
+          isCurrentUser={isCurrentUser}
+        />
+
+        {favoritesQuery?.previewData?.length > 0 ? (
+          <UserDataContainer
+            resource={favoritesQuery}
+            type="favorites"
+            userId={user?.id}
             isLoading={isLoading}
-            error={error}
-            tripsCount={tripsCount}
-            packsCount={packsCount}
-            favoritesCount={favoritesCount}
-            isCurrentUser={isCurrentUser}
+            searchTerm={searchTerms.favorites}
+            onSearchChange={onSearchChange}
           />
-          <View style={styles.mainContentContainer}>
-            <View style={styles.userDataContainer}>
-              {isLoading && <SkeletonUserDataCard />}
-            </View>
-
-            {favoritesQuery?.previewData?.length > 0 ? (
-              <UserDataContainer
-                resource={favoritesQuery}
-                type="favorites"
-                userId={user?.id}
-                isLoading={isLoading}
-                searchTerm={searchTerms.favorites}
-                onSearchChange={onSearchChange}
-              />
-            ) : (
-              <RText
-                fontSize={20}
-                fontWeight="bold"
-                color={currentTheme.colors.tertiaryBlue}
-              >
-                No favorites yet
-              </RText>
-            )}
-            {userPacksQuery?.previewData?.length > 0 && (
-              <UserDataContainer
-                resource={userPacksQuery}
-                type="packs"
-                userId={user?.id}
-                searchTerm={searchTerms.packs}
-                onSearchChange={onSearchChange}
-              />
-            )}
-            {userTripsQuery?.previewData?.length > 0 && (
-              <UserDataContainer
-                resource={userTripsQuery}
-                type="trips"
-                userId={user?.id}
-                searchTerm={searchTerms.packs}
-                onSearchChange={onSearchChange}
-              />
-            )}
-          </View>
-        </RStack>
-      </ScrollView>
-    </View>
+        ) : null}
+        {userPacksQuery?.previewData?.length > 0 && (
+          <UserDataContainer
+            resource={userPacksQuery}
+            type="packs"
+            userId={user?.id}
+            searchTerm={searchTerms.packs}
+            onSearchChange={onSearchChange}
+          />
+        )}
+        {userTripsQuery?.previewData?.length > 0 && (
+          <UserDataContainer
+            resource={userTripsQuery}
+            type="trips"
+            userId={user?.id}
+            searchTerm={searchTerms.packs}
+            onSearchChange={onSearchChange}
+          />
+        )}
+      </RStack>
+    </Layout>
   );
 }
 
 const loadStyles = (theme) => {
   const { currentTheme } = theme;
   return {
-    mainContainer: {
-      backgroundColor: currentTheme.colors.background,
-      // flex: 1,
-      alignItems: 'center',
-      justifyItems: 'center',
-      padding: 20,
-    },
-    infoSection: {
-      flexDirection: 'column',
-      alignSelf: 'center',
-      backgroundColor: currentTheme.colors.background,
-      alignItems: 'center',
-      borderRadius: 12,
-      shadowColor: '#000',
-      shadowOffset: {
-        width: 0,
-        height: 1,
-      },
-      shadowOpacity: 0.18,
-      shadowRadius: 1.0,
-      elevation: 1,
-      justifyContent: 'center',
-    },
     userInfo: {
       flexDirection: 'column',
       alignItems: 'center',
@@ -314,15 +243,6 @@ const loadStyles = (theme) => {
       color: currentTheme.colors.text,
       textAlign: 'center',
     },
-    card: {
-      flexDirection: 'row',
-      justifyContent: 'space-around',
-      width: '100%',
-      padding: 15,
-      borderRadius: 12,
-      backgroundColor: currentTheme.colors.card,
-      marginVertical: 15,
-    },
     cardInfo: {
       alignItems: 'center',
     },
@@ -330,20 +250,5 @@ const loadStyles = (theme) => {
       width: '100%',
       flex: 1,
     },
-
-    userDataCard: {
-      borderRadius: 15,
-      backgroundColor: currentTheme.colors.card,
-      padding: 10,
-      margin: 5,
-      shadowColor: '#000',
-      shadowOffset: {
-        width: 0,
-        height: 1,
-      },
-      shadowOpacity: 0.18,
-      shadowRadius: 1.0,
-      elevation: 1,
-    },
   };
 };
diff --git a/packages/app/modules/user/widgets/UserDataContainer.tsx b/packages/app/modules/user/widgets/UserDataContainer.tsx
index b97a1e6cd..8d957f2ec 100644
--- a/packages/app/modules/user/widgets/UserDataContainer.tsx
+++ b/packages/app/modules/user/widgets/UserDataContainer.tsx
@@ -2,16 +2,14 @@ import { RLink } from '@packrat/ui';
 import { RStack, RText, RButton, RSkeleton } from '@packrat/ui';
 import { Platform, VirtualizedList } from 'react-native';
 import { UserDataCard, UserDataList } from '../components';
-import React, { memo, useEffect, useState } from 'react';
-import LargeCard from 'app/components/card/LargeCard';
+import React, { memo } from 'react';
 import useTheme from 'app/hooks/useTheme';
-import { hexToRGBA } from 'app/utils/colorFunctions';
 import { View } from 'react-native';
 import { useAuthUser } from 'app/modules/auth';
-import Layout from 'app/components/layout/Layout';
 import { SearchProvider } from 'app/modules/feed';
 import { type PreviewResourceStateWithData } from 'app/hooks/common';
 import type { PreviewListType } from '../model';
+import Carousel from 'app/components/carousel';
 
 // Skeleton version of the UserDataCard component
 const SkeletonUserDataCard = () => {
@@ -55,7 +53,7 @@ export const UserDataContainer = memo(function UserDataContainer({
   const typeUppercaseSingular = typeUppercase.slice(0, -1);
 
   const differentUser = userId && currentUser && userId !== currentUser.id;
-  const Card = ({ item, index }) => {
+  const Card = ({ item }) => {
     return <UserDataCard item={item} cardType="primary" feedType={item.type} />;
   };
 
@@ -81,87 +79,73 @@ export const UserDataContainer = memo(function UserDataContainer({
   }
 
   return (
-    <Layout>
-      <LargeCard
-        type={Platform.OS !== 'web' ? 'mobile' : null}
-        customStyle={{
-          backgroundColor: hexToRGBA(currentTheme.colors.card, 0.2),
-          padding: 0,
+    <>
+      <RStack
+        style={{
+          alignItems: 'center',
+          width: '100%',
         }}
       >
         <RStack
           style={{
+            flexDirection: 'row',
+            justifyContent: 'space-between',
             alignItems: 'center',
             width: '100%',
+            padding: 10,
           }}
         >
-          <RStack
-            style={{
-              flexDirection: 'row',
-              justifyContent: 'space-between',
-              alignItems: 'center',
-              width: '100%',
-              padding: 10,
-            }}
-          >
-            <RText
-              style={{
-                textTransform: 'capitalize',
-                fontSize: 24,
-                fontWeight: 'bold',
-                color: currentTheme.colors.tertiaryBlue,
-              }}
-            >
-              {differentUser ? `${typeUppercase}` : `Your ${typeUppercase}`}
-            </RText>
-            <SearchProvider>
-              <UserDataList
-                resource={resource}
-                search={searchTerm}
-                onSearchChange={(search) => onSearchChange(search, type)}
-              />
-            </SearchProvider>
-          </RStack>
-          <RStack
+          <RText
             style={{
-              width: '100%',
-              padding: 4,
+              textTransform: 'capitalize',
+              fontSize: 24,
+              fontWeight: 'bold',
             }}
           >
-            {isLoading ? (
-              skeletonCards
-            ) : resource?.previewData && resource?.previewData.length > 0 ? (
-              <>
-                <VirtualizedList
-                  showsHorizontalScrollIndicator={false}
-                  showsVerticalScrollIndicator={false}
-                  getItemCount={() => resource.previewData.length}
-                  getItem={(data, index) => data[index]}
-                  data={resource.previewData}
-                  keyExtractor={(item) => item.id}
-                  renderItem={Card}
-                  scrollEnabled={true}
-                  maxToRenderPerBatch={2}
-                  horizontal={true}
-                  nestedScrollEnabled={true}
-                  contentContainerStyle={{
-                    paddingHorizontal: 10,
-                  }}
-                  ItemSeparatorComponent={() => <View style={{ width: 20 }} />}
-                />
-              </>
-            ) : currentUser?.id === userId ? (
-              <RLink href="/" style={{ textDecoration: 'none' }}>
-                <RButton style={{ color: currentTheme.colors.white }}>
-                  {`Create your first ${typeUppercaseSingular}`}
-                </RButton>
-              </RLink>
-            ) : (
-              <></>
-            )}
-          </RStack>
+            {differentUser ? `${typeUppercase}` : `Your ${typeUppercase}`}
+          </RText>
+          <SearchProvider>
+            <UserDataList
+              resource={resource}
+              search={searchTerm}
+              onSearchChange={(search) => onSearchChange(search, type)}
+            />
+          </SearchProvider>
         </RStack>
-      </LargeCard>
-    </Layout>
+        <RStack
+          style={{
+            width: '100%',
+            padding: 4,
+          }}
+        >
+          {isLoading ? (
+            skeletonCards
+          ) : resource?.previewData && resource?.previewData.length > 0 ? (
+            <>
+              <Carousel itemWidth={200}>
+                {resource?.previewData?.map((item) => (
+                  <View
+                    key={item.id}
+                    style={{
+                      marginBottom: 10,
+                    }}
+                  >
+                    <Card item={item} />
+                  </View>
+                ))}
+              </Carousel>
+            </>
+          ) : currentUser?.id === userId ? (
+            <RLink href="/" style={{ textDecoration: 'none' }}>
+              <RButton style={{ color: currentTheme.colors.white }}>
+                {`Create your first ${typeUppercaseSingular}`}
+              </RButton>
+            </RLink>
+          ) : (
+            <></>
+          )}
+        </RStack>
+      </RStack>
+    </>
   );
 });
diff --git a/packages/ui/src/dialog/BaseDialog.tsx b/packages/ui/src/dialog/BaseDialog.tsx
index 3975dac00..d4e2d6e2e 100644
--- a/packages/ui/src/dialog/BaseDialog.tsx
+++ b/packages/ui/src/dialog/BaseDialog.tsx
@@ -16,6 +16,7 @@ interface BaseDialogProps {
   title: string;
   description: string;
   trigger: string;
+  triggerComponent?: React.ReactNode;
   children: string | JSX.Element | JSX.Element[] | (() => JSX.Element);
 }
 
@@ -23,6 +24,7 @@ export const BaseDialog = ({
   title,
   description,
   trigger,
+  triggerComponent,
   children,
 }: BaseDialogProps) => {
   const [open, setOpen] = useState(false);
@@ -35,7 +37,7 @@ export const BaseDialog = ({
       }}
     >
       <Dialog.Trigger asChild>
-        <RButton>{trigger}</RButton>
+        {triggerComponent || <RButton>{trigger}</RButton>}
       </Dialog.Trigger>
       <Adapt when="sm" platform="touch">
         <Sheet zIndex={200000} modal dismissOnSnapToBottom>
diff --git a/server/src/controllers/favorite/getUserFavorites.ts b/server/src/controllers/favorite/getUserFavorites.ts
index 17e280aca..de43b11f2 100644
--- a/server/src/controllers/favorite/getUserFavorites.ts
+++ b/server/src/controllers/favorite/getUserFavorites.ts
@@ -22,12 +22,17 @@ export function getUserFavoritesRoute() {
         pagination: z.object({ limit: z.number(), offset: z.number() }),
         searchTerm: z.string().optional(),
         isPreview: z.boolean().optional(),
+        isPublic: z.boolean().optional(),
       }),
     )
     .query(async (opts) => {
-      const { userId, pagination, searchTerm } = opts.input;
+      const { userId, pagination, searchTerm, isPublic } = opts.input;
       const { data, totalCount, currentPagination } =
-        await getUserFavoritesService(userId, { searchTerm }, pagination);
+        await getUserFavoritesService(
+          userId,
+          { searchTerm, isPublic },
+          pagination,
+        );
 
       return {
         data,
diff --git a/server/src/services/favorite/getUserFavoritesService.ts b/server/src/services/favorite/getUserFavoritesService.ts
index ba27732ea..81fa13e94 100644
--- a/server/src/services/favorite/getUserFavoritesService.ts
+++ b/server/src/services/favorite/getUserFavoritesService.ts
@@ -10,10 +10,10 @@ import { PaginationParams } from 'src/helpers/pagination';
  */
 export const getUserFavoritesService = async (
   userId: string,
-  options?: { searchTerm?: string },
+  options?: { searchTerm?: string; isPublic?: boolean },
   pagination?: PaginationParams,
 ) => {
-  const { searchTerm } = options || {};
+  const { searchTerm, isPublic } = options || {};
   const userClass = new User();
   const feedClass = new Feed();
   const user = (await userClass.findUser({
@@ -30,6 +30,7 @@ export const getUserFavoritesService = async (
     {
       includeUserFavoritesOnly: true,
       searchTerm,
+      isPublic,
       ownerId: userId,
     },
     'trips',

From c349373b4d9004ba968d61d842e3e82e555d2783 Mon Sep 17 00:00:00 2001
From: Tadjaur <tadjaur@tas-groups.com>
Date: Sun, 15 Dec 2024 19:31:36 +0100
Subject: [PATCH 43/66] Edit schema

---
 .../tripRoutesValidator.ts                    | 20 ++++++-------------
 server/src/drizzle/methods/trip.ts            |  2 +-
 server/src/services/trip/addTripService.ts    |  6 ++----
 server/src/services/trip/editTripService.ts   |  1 +
 4 files changed, 10 insertions(+), 19 deletions(-)

diff --git a/packages/validations/src/validations/tripRoutesValidator/tripRoutesValidator.ts b/packages/validations/src/validations/tripRoutesValidator/tripRoutesValidator.ts
index c3134bba6..0a3d5c1de 100644
--- a/packages/validations/src/validations/tripRoutesValidator/tripRoutesValidator.ts
+++ b/packages/validations/src/validations/tripRoutesValidator/tripRoutesValidator.ts
@@ -51,7 +51,7 @@ export const addTripDetails = z.object({
   bounds: z.tuple([z.array(z.number()), z.array(z.number())]).optional(),
   end_date: z.string(),
   geoJSON: z.string(),
-  packId: z.string(),
+  pack_id: z.string(),
   parks: z.string().optional(),
   start_date: z.string(),
   trails: z.string().optional(),
@@ -60,19 +60,11 @@ export const addTripDetails = z.object({
 export const addTrip = addTripDetails.merge(addTripForm);
 export type AddTripType = z.infer<typeof addTrip>;
 
-export const editTrip = z.object({
-  activity: z.enum(tripActivityValues).optional(),
-  bounds: z.array(z.array(z.number())).length(2).optional(),
-  description: z.string().optional(),
-  end_date: z.string().optional(),
-  geoJSON: z.string().optional(),
-  name: z.string().optional(),
-  packId: z.string().optional(),
-  parks: z.string().optional(),
-  start_date: z.string().optional(),
-  trails: z.string().optional(),
-  id: z.string().min(1),
-});
+export const editTrip = addTrip.merge(
+  z.object({
+    id: z.string().min(1),
+  }),
+);
 
 export type EditTripType = z.infer<typeof editTrip>;
 
diff --git a/server/src/drizzle/methods/trip.ts b/server/src/drizzle/methods/trip.ts
index fb047acbb..8e242e100 100644
--- a/server/src/drizzle/methods/trip.ts
+++ b/server/src/drizzle/methods/trip.ts
@@ -7,7 +7,7 @@ import {
 } from '../../db/schema';
 
 export class Trip {
-  async update(trip: Partial<InsertTrip>) {
+  async update(trip: InsertTrip) {
     try {
       if (!trip.id) {
         throw new Error('Trip id is required for update operation');
diff --git a/server/src/services/trip/addTripService.ts b/server/src/services/trip/addTripService.ts
index de3d09a12..286368252 100644
--- a/server/src/services/trip/addTripService.ts
+++ b/server/src/services/trip/addTripService.ts
@@ -1,12 +1,9 @@
 import * as validator from '@packrat/validations';
-import { calculateTripScore } from 'src/utils/scoreTrip';
 import { GeoJson } from '../../drizzle/methods/Geojson';
 import { TripGeoJson } from '../../drizzle/methods/TripGeoJson';
 import { Trip } from '../../drizzle/methods/trip';
-import { validateGeojsonId, validateGeojsonType } from '../../utils/geojson';
 import { GeojsonStorageService } from '../geojsonStorage';
 import { scoreTripService } from './scoreTripService';
-import { trip } from 'src/db/schema';
 
 export const addTripService = async (
   tripData: validator.AddTripType & { ownerId: string },
@@ -22,8 +19,9 @@ export const addTripService = async (
       description: tripData.description,
       start_date: tripData.start_date,
       end_date: tripData.end_date,
-      activity: tripData.activity,
+      activity: tripData.activity || 'trip',
       owner_id: tripData.ownerId,
+      pack_id: tripData.pack_id,
       is_public: tripData.is_public === '0',
       trails: tripData.trails ? JSON.parse(tripData.trails) : null,
       parks: tripData.parks ? JSON.parse(tripData.parks) : null,
diff --git a/server/src/services/trip/editTripService.ts b/server/src/services/trip/editTripService.ts
index 78bdedbd9..f7083bb43 100644
--- a/server/src/services/trip/editTripService.ts
+++ b/server/src/services/trip/editTripService.ts
@@ -18,6 +18,7 @@ export const editTripService = async (
       start_date: tripData.start_date || selectedTrip.start_date,
       end_date: tripData.end_date || selectedTrip.end_date,
       activity: tripData.activity || selectedTrip.activity,
+      pack_id: tripData.pack_id || selectedTrip.pack_id,
       trails: tripData.trails
         ? JSON.parse(tripData.trails)
         : selectedTrip.trails,

From e7b3993fcac482d166789c70109bef3aee09d2a2 Mon Sep 17 00:00:00 2001
From: Anmol Verma <anmolverma2810@gmail.com>
Date: Mon, 16 Dec 2024 15:44:29 +0530
Subject: [PATCH 44/66] increase gap

---
 packages/app/components/ScoreContainer.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/app/components/ScoreContainer.tsx b/packages/app/components/ScoreContainer.tsx
index 19ce706cc..190c6eb98 100644
--- a/packages/app/components/ScoreContainer.tsx
+++ b/packages/app/components/ScoreContainer.tsx
@@ -12,6 +12,7 @@ import {
 } from 'app/hooks/score';
 import { View } from 'react-native';
 import { useMedia } from 'tamagui';
+import useResponsive from 'app/hooks/useResponsive';
 
 interface ScoreProgressChartProps {
   score: number;
@@ -187,6 +188,7 @@ export const ScoreContainer: React.FC<ScoreContainerProps> = ({
 
   const handleScoreClick = useCalculateStore(id, type);
   const media = useMedia();
+  const { sm } = useResponsive();
 
   return (
     <RStack style={styles.box}>
@@ -218,7 +220,7 @@ export const ScoreContainer: React.FC<ScoreContainerProps> = ({
               flex: 1,
               flexDirection: media.gtXs ? 'column' : 'row',
               flexWrap: 'wrap',
-              gap: 30,
+              gap: sm ? 50 : 20,
               justifyContent: 'center',
               alignItems: 'center',
             }}

From b3f50e6a04581b879e32a586fdad44195675d5cf Mon Sep 17 00:00:00 2001
From: Tadjaur <tadjaur@tas-groups.com>
Date: Sun, 15 Dec 2024 21:47:34 +0100
Subject: [PATCH 45/66] Fix `is_public` type definition

---
 server/src/db/schema.ts                     | 4 +++-
 server/src/drizzle/methods/PackTemplate.ts  | 1 -
 server/src/services/trip/addTripService.ts  | 6 ++----
 server/src/services/trip/editTripService.ts | 7 ++++---
 4 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/server/src/db/schema.ts b/server/src/db/schema.ts
index 9c88b793f..66a17cd67 100644
--- a/server/src/db/schema.ts
+++ b/server/src/db/schema.ts
@@ -419,7 +419,9 @@ export const trip = sqliteTable('trip', {
   pack_id: text('packs_id').references(() => pack.id, {
     onDelete: 'set null',
   }),
-  is_public: integer('is_public', { mode: 'boolean' }),
+  is_public: text('is_public', { enum: ['0', '1'] })
+    .default('0')
+    .$type<'0' | '1'>(),
   activity: text('activity').default('trip'),
   bounds: text('bounds', { mode: 'json' }).$type<OfflineMap['bounds']>(),
   type: text('type').default('trip'),
diff --git a/server/src/drizzle/methods/PackTemplate.ts b/server/src/drizzle/methods/PackTemplate.ts
index 8a7679469..d9ac6b475 100644
--- a/server/src/drizzle/methods/PackTemplate.ts
+++ b/server/src/drizzle/methods/PackTemplate.ts
@@ -117,7 +117,6 @@ export class PackTemplate {
         },
       });
 
-
     if (!packTemplateResult) {
       return packTemplateResult;
     }
diff --git a/server/src/services/trip/addTripService.ts b/server/src/services/trip/addTripService.ts
index 286368252..e92a791f8 100644
--- a/server/src/services/trip/addTripService.ts
+++ b/server/src/services/trip/addTripService.ts
@@ -22,12 +22,10 @@ export const addTripService = async (
       activity: tripData.activity || 'trip',
       owner_id: tripData.ownerId,
       pack_id: tripData.pack_id,
-      is_public: tripData.is_public === '0',
+      is_public: tripData.is_public,
       trails: tripData.trails ? JSON.parse(tripData.trails) : null,
       parks: tripData.parks ? JSON.parse(tripData.parks) : null,
-      ...(tripData.bounds && {
-        bounds: [tripData.bounds[0], tripData.bounds[1]],
-      }),
+      bounds: tripData.bounds ? [tripData.bounds[0], tripData.bounds[1]] : null,
     });
 
     await scoreTripService(newTrip.id);
diff --git a/server/src/services/trip/editTripService.ts b/server/src/services/trip/editTripService.ts
index f7083bb43..ee26832a4 100644
--- a/server/src/services/trip/editTripService.ts
+++ b/server/src/services/trip/editTripService.ts
@@ -18,14 +18,15 @@ export const editTripService = async (
       start_date: tripData.start_date || selectedTrip.start_date,
       end_date: tripData.end_date || selectedTrip.end_date,
       activity: tripData.activity || selectedTrip.activity,
+      is_public: tripData.is_public || selectedTrip.is_public,
       pack_id: tripData.pack_id || selectedTrip.pack_id,
       trails: tripData.trails
         ? JSON.parse(tripData.trails)
         : selectedTrip.trails,
       parks: tripData.parks ? JSON.parse(tripData.parks) : selectedTrip.parks,
-      ...(tripData.bounds && {
-        bounds: [tripData.bounds[0], tripData.bounds[1]],
-      }),
+      bounds: tripData.bounds
+        ? [tripData.bounds[0], tripData.bounds[1]]
+        : selectedTrip.bounds,
     });
 
     await scoreTripService(selectedTrip.id);

From 60e2e4d13c54effc9eccbf0e27b95d215ae50f33 Mon Sep 17 00:00:00 2001
From: Taron <taron.aleksanyan.20@gmail.com>
Date: Tue, 17 Dec 2024 00:27:57 +0400
Subject: [PATCH 46/66] edit trip screen

---
 apps/vite/src/routes/trip/$tripId.lazy.tsx    |   5 +-
 packages/app/components/GearList/GearList.tsx |  20 ++-
 .../components/trip/TripCards/TripMapCard.tsx |   4 +-
 .../trip/TripCards/TripSearchCard.tsx         |   5 +-
 packages/app/components/trip/TripForm.tsx     |  17 +-
 .../destination/useCurrentDestination.ts      |   9 +-
 .../app/hooks/geojson/useGEOLocationSearch.ts |  24 ++-
 packages/app/hooks/trips/useCreateTripForm.ts |  21 ++-
 .../modules/pack/widgets/PackContainer.tsx    |  35 ++--
 .../app/modules/trip/context/tripContext.tsx  |  26 +++
 packages/app/screens/trip/TripScreen.tsx      | 146 ++++++++++++++++
 packages/app/screens/trip/createTrip.tsx      | 156 +-----------------
 .../createTripStore/useCreateTripStore.ts     |  16 +-
 packages/app/screens/trip/editTrip.tsx        |  58 +++++++
 packages/app/screens/trip/useTripOSM.ts       |   9 +
 packages/app/screens/trip/useTripPackId.ts    |   9 +
 packages/app/screens/trip/useTripsData.ts     |  43 ++---
 server/src/services/trip/editTripService.ts   |   1 +
 18 files changed, 371 insertions(+), 233 deletions(-)
 create mode 100644 packages/app/modules/trip/context/tripContext.tsx
 create mode 100644 packages/app/screens/trip/TripScreen.tsx
 create mode 100644 packages/app/screens/trip/editTrip.tsx
 create mode 100644 packages/app/screens/trip/useTripOSM.ts
 create mode 100644 packages/app/screens/trip/useTripPackId.ts

diff --git a/apps/vite/src/routes/trip/$tripId.lazy.tsx b/apps/vite/src/routes/trip/$tripId.lazy.tsx
index 20504816b..eb100d868 100644
--- a/apps/vite/src/routes/trip/$tripId.lazy.tsx
+++ b/apps/vite/src/routes/trip/$tripId.lazy.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { TripDetails } from 'app/screens/trip/TripDetails';
+import EditTripScreen from 'app/screens/trip/editTrip';
 import { AuthWrapper } from 'app/modules/auth';
 import { createLazyFileRoute } from '@tanstack/react-router';
 
@@ -8,9 +8,10 @@ export const Route = createLazyFileRoute('/trip/$tripId')({
 });
 
 export default function Trip() {
+  const { tripId } = Route.useParams();
   return (
     <AuthWrapper>
-      <TripDetails />
+      <EditTripScreen tripId={tripId} />
     </AuthWrapper>
   );
 }
diff --git a/packages/app/components/GearList/GearList.tsx b/packages/app/components/GearList/GearList.tsx
index aee3d7ed9..f7ef0aa02 100644
--- a/packages/app/components/GearList/GearList.tsx
+++ b/packages/app/components/GearList/GearList.tsx
@@ -16,6 +16,7 @@ import { PackSummary } from 'app/modules/pack/components/PackTable/PackSummary';
 import { type WeightUnit } from 'app/utils/convertWeight';
 import { ChevronDown } from '@tamagui/lucide-icons';
 import { AsyncView } from 'app/components/AsyncView';
+import { useTripPackId } from 'app/screens/trip/useTripPackId';
 
 const RStack: any = OriginalRStack;
 const RText: any = OriginalRText;
@@ -23,8 +24,9 @@ const RText: any = OriginalRText;
 export const GearList = () => {
   const [isOpen, setIsOpen] = useState(false);
   const [weightUnit, setWeightUnit] = useState<WeightUnit>('kg');
-  const [packId, setPackIdParam] = usePackId();
+  const [packId, setPackIdParam] = useTripPackId();
   const { data: currentPack, isLoading, isError } = useFetchSinglePack(packId);
+  console.log({ packId });
 
   return (
     <>
@@ -39,14 +41,14 @@ export const GearList = () => {
               }}
             >
               <View style={{ flex: 1 }}>
-                {currentPack ? (
-                  <PackContainer />
-                ) : (
-                  <RText>
-                    Add packs to plan your trip essentials and stay prepared for
-                    any adventure!
-                  </RText>
-                )}
+                <PackContainer
+                  emptyStateComponent={
+                    <RText>
+                      Add packs to plan your trip essentials and stay prepared
+                      for any adventure!
+                    </RText>
+                  }
+                />
               </View>
               <AddPackContainer
                 onSuccess={setPackIdParam}
diff --git a/packages/app/components/trip/TripCards/TripMapCard.tsx b/packages/app/components/trip/TripCards/TripMapCard.tsx
index 6f17f946a..af4e69897 100644
--- a/packages/app/components/trip/TripCards/TripMapCard.tsx
+++ b/packages/app/components/trip/TripCards/TripMapCard.tsx
@@ -36,9 +36,9 @@ export const TripMapCard = ({
       >
         <Map
           style={{ width: '100%', height: 320 }}
-          shapeURI={tripId ? getTripGEOURI(tripId) : undefined}
+          shapeURI={tripId && !shape ? getTripGEOURI(tripId) : undefined}
           onVisibleBoundsChange={onVisibleBoundsChange}
-          initialBounds={initialBounds}
+          initialBounds={!shape ? initialBounds : undefined}
           shape={shape}
         />
       </View>
diff --git a/packages/app/components/trip/TripCards/TripSearchCard.tsx b/packages/app/components/trip/TripCards/TripSearchCard.tsx
index 816944315..46499aecf 100644
--- a/packages/app/components/trip/TripCards/TripSearchCard.tsx
+++ b/packages/app/components/trip/TripCards/TripSearchCard.tsx
@@ -10,6 +10,7 @@ import { PlacesAutocomplete } from 'app/components/PlacesAutocomplete';
 import useResponsive from 'app/hooks/useResponsive';
 import { useScreenWidth } from 'app/hooks/common';
 import { ArrowLeft } from '@tamagui/lucide-icons';
+import { useTripOSM } from 'app/screens/trip/useTripOSM';
 
 interface TripSearchCardProps {
   searchRef: any;
@@ -24,10 +25,10 @@ export const TripSearchCard = ({
   onGoBack,
   onLocationSelect,
 }: TripSearchCardProps) => {
-  const [, setGEOLocation] = useGEOLocationSearch();
+  const [, setTripOSM] = useTripOSM();
 
   const handleSelectLocation = (geoJSON) => {
-    setGEOLocation(geoJSON);
+    setTripOSM(geoJSON);
     onLocationSelect();
   };
 
diff --git a/packages/app/components/trip/TripForm.tsx b/packages/app/components/trip/TripForm.tsx
index 727ef8af7..e18030411 100644
--- a/packages/app/components/trip/TripForm.tsx
+++ b/packages/app/components/trip/TripForm.tsx
@@ -7,12 +7,13 @@ import {
   SubmitButton,
 } from '@packrat/ui';
 import { useRouter } from 'app/hooks/router';
-import { useAddTrip } from 'app/hooks/trips';
+import { useAddTrip, useEditTrips } from 'app/hooks/trips';
 import { addTripForm } from '@packrat/validations/src/validations/tripRoutesValidator';
 import { formatCreateTripValuesForAPI } from 'app/utils/tripUtils';
 import { TripDateRangeCard } from './TripCards';
 import { getEnumValues } from 'app/utils/getEnumValues';
 import { formatTripActivityLabel } from 'app/utils/tripUtils';
+import { type addTripKey } from 'app/screens/trip/createTripStore/store';
 
 const Form: any = OriginalForm;
 const FormSelect: any = OriginalFormSelect;
@@ -22,6 +23,8 @@ interface TripFormProps {
   dateRange: any;
   setDateRange: (range: any) => void;
   isValid: boolean;
+  initialState?: Partial<Record<addTripKey, any>>;
+  tripId?: string;
 }
 
 const isPublicOptions = ['For me only', 'Public'].map((key, index) => ({
@@ -34,8 +37,11 @@ export const TripForm = ({
   dateRange,
   setDateRange,
   isValid,
+  initialState,
+  tripId,
 }: TripFormProps) => {
   const { addTrip, isSuccess, data: response } = useAddTrip();
+  const { editTrips } = useEditTrips();
   const router = useRouter();
 
   const handleCreateTrip = async (values) => {
@@ -44,7 +50,7 @@ export const TripForm = ({
       ...values,
     };
 
-    addTrip(data);
+    tripId ? editTrips({ id: tripId, ...data }) : addTrip(data);
   };
   if (isSuccess && response) {
     router.push(`/trip/${response.id}`);
@@ -54,7 +60,12 @@ export const TripForm = ({
     <Form
       validationSchema={addTripForm}
       onSubmit={handleCreateTrip}
-      defaultValues={{ is_public: '0', activity: ActivityOptions[0].value }}
+      defaultValues={{
+        name: initialState?.name,
+        description: initialState?.description,
+        is_public: initialState?.is_public ? '1' : '0',
+        activity: initialState?.activity || ActivityOptions[0].value,
+      }}
     >
       <YStack style={{ gap: 16 }}>
         <FormInput placeholder="Trip Name" name="name" />
diff --git a/packages/app/hooks/destination/useCurrentDestination.ts b/packages/app/hooks/destination/useCurrentDestination.ts
index 3fc90cb55..f0cef3943 100644
--- a/packages/app/hooks/destination/useCurrentDestination.ts
+++ b/packages/app/hooks/destination/useCurrentDestination.ts
@@ -3,8 +3,7 @@ import { useGEOLocationSearch } from 'app/hooks/geojson';
 import { usePhotonDetail } from '../photonDetail';
 import { parseCoordinates } from 'app/utils/coordinatesParser';
 
-export const useCurrentDestination = () => {
-  const [osm] = useGEOLocationSearch();
+export const useDestination = (osm: any) => {
   const { data, isError, isLoading } = usePhotonDetail(osm.name, true);
   const currentDestination = useMemo(() => {
     return data?.find((destination) => {
@@ -24,3 +23,9 @@ export const useCurrentDestination = () => {
 
   return { currentDestination, latLng, isError, isLoading };
 };
+
+export const useCurrentDestination = () => {
+  const [osm] = useGEOLocationSearch();
+
+  return useDestination(osm);
+};
diff --git a/packages/app/hooks/geojson/useGEOLocationSearch.ts b/packages/app/hooks/geojson/useGEOLocationSearch.ts
index fe8505799..19d95fa78 100644
--- a/packages/app/hooks/geojson/useGEOLocationSearch.ts
+++ b/packages/app/hooks/geojson/useGEOLocationSearch.ts
@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { useMemo, useState } from 'react';
 import { createParam } from '@packrat/crosspath';
 
 interface GeoSearchParams {
@@ -41,3 +41,25 @@ export const useGEOLocationSearch = (): [
 
   return [formattedOSM, setGEOLocation];
 };
+
+export const useOSM = (): [GeoSearchParams, (geoJSON: any) => void] => {
+  const [geoLocation, setGeoLocation] = useState<GeoSearchParams>({});
+
+  const setGEOLocation = (geoJSON) => {
+    const newSearchParams: GeoSearchParams = {};
+
+    if (
+      geoJSON?.properties?.osm_id &&
+      geoJSON.properties.osm_type &&
+      geoJSON.properties.name
+    ) {
+      newSearchParams.osmId = geoJSON.properties.osm_id;
+      newSearchParams.osmType = geoJSON.properties.osm_type;
+      newSearchParams.name = geoJSON.properties.name;
+    }
+
+    setGeoLocation(newSearchParams);
+  };
+
+  return [geoLocation, setGEOLocation];
+};
diff --git a/packages/app/hooks/trips/useCreateTripForm.ts b/packages/app/hooks/trips/useCreateTripForm.ts
index 4fbca111c..e2594ab8a 100644
--- a/packages/app/hooks/trips/useCreateTripForm.ts
+++ b/packages/app/hooks/trips/useCreateTripForm.ts
@@ -6,11 +6,13 @@ import { type addTripKey } from 'app/screens/trip/createTripStore/store';
 import { useAuthUser } from 'app/modules/auth';
 import { usePackId } from 'app/modules/pack';
 import { formatCreateTripValuesForAPI } from 'app/utils/tripUtils';
+import { useCurrentTripStore } from 'app/screens/trip/createTripStore/useCreateTripStore';
+import { useTripPackId } from 'app/screens/trip/useTripPackId';
 
 export const useCreateTripForm = (currentDestination, photonDetails) => {
-  const { store, setTripValue, setDateRange } = useCreateTripStore();
+  const { store, setTripValue, setDateRange } = useCurrentTripStore();
   const authUser = useAuthUser();
-  const [packId] = usePackId();
+  const [packId] = useTripPackId();
 
   const { isValid, validate } = useValidateSchema(
     addTripDetails,
@@ -29,16 +31,19 @@ export const useCreateTripForm = (currentDestination, photonDetails) => {
     setTripValue(name, updatedPlaces);
   };
 
-  const createTripFormValues = useMemo<Partial<Record<addTripKey, any>>>(
-    () => ({
+  const createTripFormValues = useMemo<Partial<Record<addTripKey, any>>>(() => {
+    const res = {
       ...store,
       destination: currentDestination?.properties?.name,
       owner_id: authUser?.id,
       pack_id: packId,
-      geoJSON: photonDetails,
-    }),
-    [store, packId, photonDetails, authUser?.id],
-  );
+    };
+    if (photonDetails) {
+      res.geoJSON = photonDetails;
+    }
+
+    return res;
+  }, [store, packId, photonDetails, authUser?.id]);
 
   useEffect(() => {
     validate(createTripFormValues);
diff --git a/packages/app/modules/pack/widgets/PackContainer.tsx b/packages/app/modules/pack/widgets/PackContainer.tsx
index ce0898748..68c4143fe 100644
--- a/packages/app/modules/pack/widgets/PackContainer.tsx
+++ b/packages/app/modules/pack/widgets/PackContainer.tsx
@@ -1,30 +1,20 @@
-import React, { useEffect, useState, useRef, useCallback } from 'react';
+import React, { useCallback } from 'react';
 import { View } from 'react-native';
-import { AddItemModal } from 'app/modules/item';
 import useCustomStyles from 'app/hooks/useCustomStyles';
-import { useAuthUser } from 'app/modules/auth';
-import {
-  usePackId,
-  useUserPacks,
-  PackPickerOverlay,
-  useFetchSinglePack,
-} from 'app/modules/pack';
-import {
-  DropdownComponent,
-  RButton,
-  RListItem,
-  RStack,
-  useModalState,
-} from '@packrat/ui';
-import { Spinner } from 'tamagui';
-import useTheme from 'app/hooks/useTheme';
-import { TableContainerComponent } from 'app/screens/trip/TripDetailsComponents';
+import { PackPickerOverlay, useFetchSinglePack } from 'app/modules/pack';
+import { RListItem, useModalState } from '@packrat/ui';
 import { Backpack, Edit3 } from '@tamagui/lucide-icons';
+import { useTripPackId } from 'app/screens/trip/useTripPackId';
 
-export default function PackContainer() {
-  const [packIdParam, setPackIdParam] = usePackId();
+interface PackContainerProps {
+  emptyStateComponent?: React.ReactNode;
+}
+export default function PackContainer({
+  emptyStateComponent: EmptyStateComponent,
+}: PackContainerProps) {
+  const [packIdParam, setPackIdParam] = useTripPackId();
   const { isModalOpen, onClose, onOpen } = useModalState();
-  const { data: currentPack } = useFetchSinglePack(packIdParam);
+  const { data: currentPack, isLoading } = useFetchSinglePack(packIdParam);
   const styles = useCustomStyles(loadStyles);
 
   const onSelectPack = (packId: string) => {
@@ -63,6 +53,7 @@ export default function PackContainer() {
           {currentPack?.name}
         </RListItem>
       ) : null}
+      {!isLoading && !currentPack && EmptyStateComponent}
     </View>
   );
 }
diff --git a/packages/app/modules/trip/context/tripContext.tsx b/packages/app/modules/trip/context/tripContext.tsx
new file mode 100644
index 000000000..16c96e27b
--- /dev/null
+++ b/packages/app/modules/trip/context/tripContext.tsx
@@ -0,0 +1,26 @@
+import { type useOSM } from 'app/hooks/geojson';
+import React, { createContext, useContext, type ReactNode } from 'react';
+import { type useCurrentTripStore } from 'app/screens/trip/createTripStore/useCreateTripStore';
+
+interface TripContextType {
+  tripId?: string;
+  // used in edit mode
+  tripPack?: [packId: string, setPackId: (packId: string) => void];
+  tripOSM?: ReturnType<typeof useOSM>;
+  tripStore?: ReturnType<typeof useCurrentTripStore>;
+}
+const TripContext = createContext<TripContextType>({});
+
+export const TripProvider = ({
+  children,
+  value,
+}: {
+  children: ReactNode;
+  value: TripContextType;
+}) => {
+  return <TripContext.Provider value={value}>{children}</TripContext.Provider>;
+};
+
+export const useTripContext = () => {
+  return useContext(TripContext);
+};
diff --git a/packages/app/screens/trip/TripScreen.tsx b/packages/app/screens/trip/TripScreen.tsx
new file mode 100644
index 000000000..8389525c0
--- /dev/null
+++ b/packages/app/screens/trip/TripScreen.tsx
@@ -0,0 +1,146 @@
+import React, { useState } from 'react';
+import { RStack, RText, XStack, YStack } from '@packrat/ui';
+import { FlatList, View } from 'react-native';
+import { useRef } from 'react';
+import { GearList } from '../../components/GearList/GearList';
+import { TripForm } from 'app/components/trip/TripForm';
+import useTheme from '../../hooks/useTheme';
+import { useCreateTripForm } from 'app/hooks/trips/useCreateTripForm';
+import { useTripsData } from './useTripsData';
+import Layout from 'app/components/layout/Layout';
+import RSecondaryButton from 'app/components/RSecondaryButton';
+
+import { TripMapCard, TripSearchCard } from 'app/components/trip/TripCards';
+import { WeatherData } from 'app/components/weather/WeatherData';
+import { useFlatList } from 'app/hooks/useFlatList';
+import useResponsive from 'app/hooks/useResponsive';
+import { LayoutCard } from 'app/components/LayoutCard';
+import { MapPin, MapPinned } from '@tamagui/lucide-icons';
+import { type addTripKey } from './createTripStore/store';
+
+const SECTIONS = {
+  MAP: 'MAP',
+  PLACE_NAME: 'PLACE_NAME',
+  PACK: 'PACK',
+  WEATHER: 'WEATHER',
+};
+
+export function TripScreen({
+  tripId,
+  initialBounds,
+  initialPlaceName,
+  initialState,
+}: {
+  tripId?: string;
+  initialBounds?: any;
+  initialPlaceName?: string;
+  initialState?: Partial<Record<addTripKey, any>>;
+}) {
+  const placesAutoCompleteRef = useRef({});
+  const [isChangePlaceMode, setIsChangePlaceMode] = useState(false);
+  const { gtSm } = useResponsive();
+
+  const {
+    currentDestination,
+    photonDetails,
+    isPhotonLoading,
+    hasPhotonError,
+    latLng,
+  } = useTripsData();
+
+  const { isValid, dateRange, setDateRange, tripStore, setTripValue } =
+    useCreateTripForm(currentDestination, photonDetails);
+
+  const { flatListData, keyExtractor, renderItem } = useFlatList(SECTIONS, {
+    [SECTIONS.MAP]: (
+      <TripMapCard
+        isLoading={isPhotonLoading}
+        isMapError={hasPhotonError}
+        shape={photonDetails}
+        tripId={tripId}
+        initialBounds={initialBounds}
+        onVisibleBoundsChange={(bounds) => {
+          setTripValue('bounds', bounds);
+        }}
+      />
+    ),
+    [SECTIONS.PLACE_NAME]: (
+      <XStack style={{ gap: 10, flexWrap: 'wrap', alignItems: 'center' }}>
+        <MapPinned size={20} />
+        <RText style={{ fontSize: 20, fontWeight: 600 }}>
+          {photonDetails?.features?.[0]?.properties?.['name:en'] ||
+            photonDetails?.features?.[0]?.properties?.name ||
+            initialPlaceName}
+        </RText>
+      </XStack>
+    ),
+    [SECTIONS.WEATHER]: !tripId ? (
+      <LayoutCard>
+        <WeatherData latLng={latLng} />
+      </LayoutCard>
+    ) : undefined,
+    [SECTIONS.PACK]: <GearList />,
+  });
+
+  return (
+    <Layout>
+      {(isChangePlaceMode || (!latLng && !tripId)) && (
+        <TripSearchCard
+          searchRef={placesAutoCompleteRef}
+          isChangePlaceMode={isChangePlaceMode}
+          onGoBack={() => setIsChangePlaceMode(false)}
+          onLocationSelect={() => setIsChangePlaceMode(false)}
+        />
+      )}
+      {latLng || tripId ? (
+        <YStack
+          style={{ gap: 16, display: isChangePlaceMode ? 'none' : 'flex' }}
+        >
+          <XStack
+            style={{
+              justifyContent: 'space-between',
+              alignItems: 'center',
+              flexWrap: 'wrap',
+            }}
+          >
+            <RText style={{ fontWeight: 700, fontSize: 24 }}>
+              Plan Your Trip
+            </RText>
+            <RSecondaryButton
+              icon={<MapPin />}
+              size={36}
+              borderWidth={2}
+              onPress={() => setIsChangePlaceMode(true)}
+              label="Change Direction"
+            />
+          </XStack>
+          <RStack style={{ flexDirection: gtSm ? 'row' : 'column', gap: 16 }}>
+            <View style={{ width: gtSm ? 450 : '100%' }}>
+              <FlatList
+                data={flatListData}
+                keyExtractor={keyExtractor}
+                ItemSeparatorComponent={() => (
+                  <View style={{ width: '100%', height: 16 }} />
+                )}
+                renderItem={renderItem}
+              />
+            </View>
+            <LayoutCard
+              title="Trip Details"
+              style={{ flex: 1, alignSelf: 'flex-start' }}
+            >
+              <TripForm
+                tripId={tripId}
+                isValid={isValid}
+                dateRange={dateRange}
+                initialState={initialState}
+                setDateRange={setDateRange}
+                tripStore={tripStore}
+              />
+            </LayoutCard>
+          </RStack>
+        </YStack>
+      ) : null}
+    </Layout>
+  );
+}
diff --git a/packages/app/screens/trip/createTrip.tsx b/packages/app/screens/trip/createTrip.tsx
index 7c5e056e9..81e4285bc 100644
--- a/packages/app/screens/trip/createTrip.tsx
+++ b/packages/app/screens/trip/createTrip.tsx
@@ -1,151 +1,13 @@
-import React, { useState } from 'react';
-import { RStack, RText, XStack, YStack } from '@packrat/ui';
-import { FlatList, View } from 'react-native';
-import { useRef } from 'react';
-import { GearList } from '../../components/GearList/GearList';
-import { TripForm } from 'app/components/trip/TripForm';
-import useTheme from '../../hooks/useTheme';
-import { useCreateTripForm } from 'app/hooks/trips/useCreateTripForm';
-import { useTripsData } from './useTripsData';
-import Layout from 'app/components/layout/Layout';
-import RSecondaryButton from 'app/components/RSecondaryButton';
-
-import { TripMapCard, TripSearchCard } from 'app/components/trip/TripCards';
-import { WeatherData } from 'app/components/weather/WeatherData';
-import { useFlatList } from 'app/hooks/useFlatList';
-import useResponsive from 'app/hooks/useResponsive';
-import { LayoutCard } from 'app/components/LayoutCard';
-import { MapPin, MapPinned } from '@tamagui/lucide-icons';
-
-const SECTIONS = {
-  MAP: 'MAP',
-  PLACE_NAME: 'PLACE_NAME',
-  PACK: 'PACK',
-  WEATHER: 'WEATHER',
-};
-
-function Trips() {
-  const placesAutoCompleteRef = useRef({});
-  const [isChangePlaceMode, setIsChangePlaceMode] = useState(false);
-  const { gtSm } = useResponsive();
-
-  const { currentTheme } = useTheme();
-  const {
-    currentDestination,
-    photonDetails,
-    isPhotonLoading,
-    hasPhotonError,
-    latLng,
-  } = useTripsData();
-
-  const { isValid, dateRange, setDateRange, tripStore, setTripValue } =
-    useCreateTripForm(currentDestination, photonDetails);
-
-  const { flatListData, keyExtractor, renderItem } = useFlatList(SECTIONS, {
-    [SECTIONS.MAP]: (
-      <TripMapCard
-        isLoading={isPhotonLoading}
-        isMapError={hasPhotonError}
-        shape={photonDetails}
-        onVisibleBoundsChange={(bounds) => {
-          setTripValue('bounds', bounds);
-        }}
-      />
-    ),
-    [SECTIONS.PLACE_NAME]: (
-      <XStack style={{ gap: 10, flexWrap: 'wrap', alignItems: 'center' }}>
-        <MapPinned size={20} />
-        <RText style={{ fontSize: 20, fontWeight: 600 }}>
-          {photonDetails?.features?.[0]?.properties?.['name:en'] ||
-            photonDetails?.features?.[0]?.properties?.name}
-        </RText>
-      </XStack>
-    ),
-    [SECTIONS.WEATHER]: (
-      <LayoutCard>
-        <WeatherData latLng={latLng} />
-      </LayoutCard>
-    ),
-    [SECTIONS.PACK]: <GearList />,
-  });
+import React from 'react';
+import { TripProvider } from 'app/modules/trip/context/tripContext';
+import { TripScreen } from './TripScreen';
+import { useCreateTripStore } from './createTripStore';
 
+export default function CreateTrip() {
+  const tripStore = useCreateTripStore();
   return (
-    <Layout>
-      {(isChangePlaceMode || !latLng) && (
-        <TripSearchCard
-          searchRef={placesAutoCompleteRef}
-          isChangePlaceMode={isChangePlaceMode}
-          onGoBack={() => setIsChangePlaceMode(false)}
-          onLocationSelect={() => setIsChangePlaceMode(false)}
-        />
-      )}
-      {latLng ? (
-        <YStack
-          style={{ gap: 16, display: isChangePlaceMode ? 'none' : 'flex' }}
-        >
-          <XStack
-            style={{
-              justifyContent: 'space-between',
-              alignItems: 'center',
-              flexWrap: 'wrap',
-            }}
-          >
-            <RText style={{ fontWeight: 700, fontSize: 24 }}>
-              Plan Your Trip
-            </RText>
-            <RSecondaryButton
-              icon={<MapPin />}
-              size={36}
-              borderWidth={2}
-              onPress={() => setIsChangePlaceMode(true)}
-              label="Change Direction"
-            />
-          </XStack>
-          <RStack style={{ flexDirection: gtSm ? 'row' : 'column', gap: 16 }}>
-            <View style={{ width: gtSm ? 450 : '100%' }}>
-              <FlatList
-                data={flatListData}
-                keyExtractor={keyExtractor}
-                ItemSeparatorComponent={() => (
-                  <View style={{ width: '100%', height: 16 }} />
-                )}
-                renderItem={renderItem}
-              />
-            </View>
-            <LayoutCard
-              title="Trip Details"
-              style={{ flex: 1, alignSelf: 'flex-start' }}
-            >
-              <TripForm
-                isValid={isValid}
-                dateRange={dateRange}
-                setDateRange={setDateRange}
-                tripStore={tripStore}
-              />
-            </LayoutCard>
-          </RStack>
-        </YStack>
-      ) : null}
-    </Layout>
+    <TripProvider value={{ tripStore }}>
+      <TripScreen />
+    </TripProvider>
   );
 }
-
-const loadStyles = () => {
-  const { currentTheme } = useTheme();
-
-  return {
-    mutualStyles: {
-      backgroundColor: currentTheme.colors.background,
-      flex: 1,
-      flexDirection: 'column',
-      height: '100%',
-      paddingBottom: 30,
-    },
-    container: {
-      gap: 50,
-      padding: 20,
-    },
-  };
-};
-
-export default Trips;
diff --git a/packages/app/screens/trip/createTripStore/useCreateTripStore.ts b/packages/app/screens/trip/createTripStore/useCreateTripStore.ts
index dc251e3e8..d740d0723 100644
--- a/packages/app/screens/trip/createTripStore/useCreateTripStore.ts
+++ b/packages/app/screens/trip/createTripStore/useCreateTripStore.ts
@@ -1,5 +1,4 @@
 import { useCallback, useEffect, useMemo, useReducer } from 'react';
-import { format } from 'date-fns';
 import {
   createTripInitialState,
   createTripReducer,
@@ -7,14 +6,10 @@ import {
   setTripFormValue,
   type addTripKey,
 } from './store';
-import { useValidateSchema } from 'app/hooks/common';
-import { addTripDetails } from '@packrat/validations';
+import { useTripContext } from 'app/modules/trip/context/tripContext';
 
-export const useCreateTripStore = () => {
-  const [store, dispatch] = useReducer(
-    createTripReducer,
-    createTripInitialState,
-  );
+export const useCreateTripStore = (initialState = createTripInitialState) => {
+  const [store, dispatch] = useReducer(createTripReducer, initialState);
 
   const setTripValue = useCallback(
     (name: addTripKey, value: any) => {
@@ -29,3 +24,8 @@ export const useCreateTripStore = () => {
 
   return { store, setTripValue, setDateRange };
 };
+
+export const useCurrentTripStore = () => {
+  const { tripStore } = useTripContext();
+  return tripStore;
+};
diff --git a/packages/app/screens/trip/editTrip.tsx b/packages/app/screens/trip/editTrip.tsx
new file mode 100644
index 000000000..ec3b720c1
--- /dev/null
+++ b/packages/app/screens/trip/editTrip.tsx
@@ -0,0 +1,58 @@
+import React, { useState } from 'react';
+import { TripProvider } from 'app/modules/trip/context/tripContext';
+import { TripScreen } from './TripScreen';
+import { useCreateTripStore } from './createTripStore';
+import { AsyncView } from 'app/components/AsyncView';
+import { useFetchSingleTrip } from 'app/hooks/singletrips';
+import { type addTripKey } from './createTripStore/store';
+import { useOSM } from 'app/hooks/geojson';
+
+export default function EditTripScreen({ tripId }: { tripId: string }) {
+  const { isLoading, isError, data } = useFetchSingleTrip(tripId);
+  return (
+    <AsyncView isLoading={isLoading || !data} isError={isError}>
+      <TripLoader
+        initialState={{
+          name: data?.name,
+          description: data?.description,
+          activity: data?.activity,
+          start_date: new Date(data?.start_date),
+          end_date: new Date(data?.end_date),
+          geoJSON: data?.geoJSON,
+        }}
+        packId={data?.pack_id}
+        tripId={tripId}
+        bounds={data?.bounds}
+      />
+    </AsyncView>
+  );
+}
+
+const TripLoader = ({
+  initialState,
+  packId,
+  tripId,
+  bounds,
+}: {
+  initialState: Partial<Record<addTripKey, any>>;
+  packId: string;
+  tripId: string;
+  bounds: any;
+}) => {
+  const tripStore = useCreateTripStore(initialState);
+  const tripPack = useState(packId);
+  const tripOSM = useOSM();
+
+  return (
+    <TripProvider value={{ tripStore, tripPack, tripOSM }}>
+      <TripScreen
+        tripId={tripId}
+        initialBounds={bounds}
+        initialState={initialState}
+        initialPlaceName={
+          initialState?.geoJSON?.features?.[0]?.properties?.['name:en']
+        }
+      />
+    </TripProvider>
+  );
+};
diff --git a/packages/app/screens/trip/useTripOSM.ts b/packages/app/screens/trip/useTripOSM.ts
new file mode 100644
index 000000000..bceb533b9
--- /dev/null
+++ b/packages/app/screens/trip/useTripOSM.ts
@@ -0,0 +1,9 @@
+import { useGEOLocationSearch, useOSM } from 'app/hooks/geojson';
+import { useTripContext } from 'app/modules/trip/context/tripContext';
+
+export const useTripOSM = () => {
+  const osmSearch = useGEOLocationSearch();
+  const { tripOSM } = useTripContext();
+
+  return tripOSM || osmSearch;
+};
diff --git a/packages/app/screens/trip/useTripPackId.ts b/packages/app/screens/trip/useTripPackId.ts
new file mode 100644
index 000000000..9b8c51b69
--- /dev/null
+++ b/packages/app/screens/trip/useTripPackId.ts
@@ -0,0 +1,9 @@
+import { usePackId } from 'app/modules/pack';
+import { useTripContext } from 'app/modules/trip/context/tripContext';
+
+export const useTripPackId = () => {
+  const packIdSearch = usePackId();
+  const { tripPack } = useTripContext();
+  // Trip pack is used in edit mode
+  return tripPack || packIdSearch;
+};
diff --git a/packages/app/screens/trip/useTripsData.ts b/packages/app/screens/trip/useTripsData.ts
index b8d553662..56e018b4b 100644
--- a/packages/app/screens/trip/useTripsData.ts
+++ b/packages/app/screens/trip/useTripsData.ts
@@ -1,15 +1,9 @@
-// useTripsData.js
-import useParks from 'app/hooks/parks';
-import useTrails from 'app/hooks/trails';
-import {
-  useCurrentDestination,
-  useGetPhotonDetails,
-} from 'app/hooks/destination';
-import { useGEOLocationSearch } from 'app/hooks/geojson';
+import { useDestination, useGetPhotonDetails } from 'app/hooks/destination';
+import { useTripOSM } from './useTripOSM';
 
 export const useTripsData = () => {
-  const [osm] = useGEOLocationSearch();
-  const { currentDestination, latLng } = useCurrentDestination();
+  const [osm] = useTripOSM();
+  const { currentDestination, latLng } = useDestination(osm);
   const {
     data: photonDetails,
     isError: hasPhotonError,
@@ -24,18 +18,19 @@ export const useTripsData = () => {
     false,
   );
 
-  const {
-    error: parksError,
-    isLoading: parksLoading,
-    filteredParks: parksData,
-  } = useParks({
-    latLng,
-  });
+  // TODO: Uncomment this once we have parks and trails data
+  // const {
+  //   error: parksError,
+  //   isLoading: parksLoading,
+  //   filteredParks: parksData,
+  // } = useParks({
+  //   latLng,
+  // });
 
-  const { data, filteredTrails, error, isLoading } = useTrails({
-    latLng,
-    selectedSearch: osm.name,
-  });
+  // const { data, filteredTrails, error, isLoading } = useTrails({
+  //   latLng,
+  //   selectedSearch: osm.name,
+  // });
 
   return {
     osm,
@@ -44,11 +39,5 @@ export const useTripsData = () => {
     photonDetails,
     hasPhotonError,
     isPhotonLoading,
-    parksData,
-    parksError,
-    parksLoading,
-    filteredTrails,
-    trailsError: error,
-    trailsLoading: isLoading,
   };
 };
diff --git a/server/src/services/trip/editTripService.ts b/server/src/services/trip/editTripService.ts
index f7083bb43..7b2f6e84d 100644
--- a/server/src/services/trip/editTripService.ts
+++ b/server/src/services/trip/editTripService.ts
@@ -13,6 +13,7 @@ export const editTripService = async (
     const tripClass = new Trip();
     const selectedTrip = await tripClass.findById(tripData.id);
     const updatedTrip = await tripClass.update({
+      id: tripData?.id,
       name: tripData.name || selectedTrip.name,
       description: tripData.description || selectedTrip.description,
       start_date: tripData.start_date || selectedTrip.start_date,

From dd20eb6b18acea73c67cf4851490faefd4ae656b Mon Sep 17 00:00:00 2001
From: Taron <taron.aleksanyan.20@gmail.com>
Date: Tue, 17 Dec 2024 00:34:37 +0400
Subject: [PATCH 47/66] add destination field

---
 .../0003_condemned_sugar_man.sql              |    8 +
 .../meta/0003_snapshot.json                   | 1534 +++++++++++++++++
 server/migrations-preview/meta/_journal.json  |    7 +
 server/src/db/schema.ts                       |    1 +
 4 files changed, 1550 insertions(+)
 create mode 100644 server/migrations-preview/0003_condemned_sugar_man.sql
 create mode 100644 server/migrations-preview/meta/0003_snapshot.json

diff --git a/server/migrations-preview/0003_condemned_sugar_man.sql b/server/migrations-preview/0003_condemned_sugar_man.sql
new file mode 100644
index 000000000..d94004db9
--- /dev/null
+++ b/server/migrations-preview/0003_condemned_sugar_man.sql
@@ -0,0 +1,8 @@
+/*
+ SQLite does not support "Drop not null from column" out of the box, we do not generate automatic migration for that, so it has to be done manually
+ Please refer to: https://www.techonthenet.com/sqlite/tables/alter_table.php
+                  https://www.sqlite.org/lang_altertable.html
+                  https://stackoverflow.com/questions/2083543/modify-a-columns-type-in-sqlite3
+
+ Due to that we don't generate migration automatically and it has to be done manually
+*/
\ No newline at end of file
diff --git a/server/migrations-preview/meta/0003_snapshot.json b/server/migrations-preview/meta/0003_snapshot.json
new file mode 100644
index 000000000..ee7e87620
--- /dev/null
+++ b/server/migrations-preview/meta/0003_snapshot.json
@@ -0,0 +1,1534 @@
+{
+  "version": "5",
+  "dialect": "sqlite",
+  "id": "463f2375-e852-4541-937a-f1a08337bffa",
+  "prevId": "a70ff809-b028-4fe7-a94c-31e53cbddaae",
+  "tables": {
+    "conversation": {
+      "name": "conversation",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "itemTypeId": {
+          "name": "itemTypeId",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "history": {
+          "name": "history",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "geojson": {
+      "name": "geojson",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "geoJSON": {
+          "name": "geoJSON",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "item": {
+      "name": "item",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "weight": {
+          "name": "weight",
+          "type": "real",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "unit": {
+          "name": "unit",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "category_id": {
+          "name": "category_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "owner_id": {
+          "name": "owner_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "global": {
+          "name": "global",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": false
+        },
+        "sku": {
+          "name": "sku",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "product_url": {
+          "name": "product_url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "description": {
+          "name": "description",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "product_details": {
+          "name": "product_details",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "seller": {
+          "name": "seller",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "item_category_id_item_category_id_fk": {
+          "name": "item_category_id_item_category_id_fk",
+          "tableFrom": "item",
+          "tableTo": "item_category",
+          "columnsFrom": [
+            "category_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        },
+        "item_owner_id_user_id_fk": {
+          "name": "item_owner_id_user_id_fk",
+          "tableFrom": "item",
+          "tableTo": "user",
+          "columnsFrom": [
+            "owner_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "item_category": {
+      "name": "item_category",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "item_image": {
+      "name": "item_image",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "item_id": {
+          "name": "item_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "url": {
+          "name": "url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "item_image_item_id_item_id_fk": {
+          "name": "item_image_item_id_item_id_fk",
+          "tableFrom": "item_image",
+          "tableTo": "item",
+          "columnsFrom": [
+            "item_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "item_owners": {
+      "name": "item_owners",
+      "columns": {
+        "item_id": {
+          "name": "item_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "owner_id": {
+          "name": "owner_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "item_owners_item_id_item_id_fk": {
+          "name": "item_owners_item_id_item_id_fk",
+          "tableFrom": "item_owners",
+          "tableTo": "item",
+          "columnsFrom": [
+            "item_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "item_owners_owner_id_user_id_fk": {
+          "name": "item_owners_owner_id_user_id_fk",
+          "tableFrom": "item_owners",
+          "tableTo": "user",
+          "columnsFrom": [
+            "owner_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "id": {
+          "columns": [
+            "item_id",
+            "owner_id"
+          ],
+          "name": "id"
+        }
+      },
+      "uniqueConstraints": {}
+    },
+    "item_pack_templates": {
+      "name": "item_pack_templates",
+      "columns": {
+        "item_id": {
+          "name": "item_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "pack_template_id": {
+          "name": "pack_template_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "quantity": {
+          "name": "quantity",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": 1
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "item_pack_templates_item_id_item_id_fk": {
+          "name": "item_pack_templates_item_id_item_id_fk",
+          "tableFrom": "item_pack_templates",
+          "tableTo": "item",
+          "columnsFrom": [
+            "item_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "item_pack_templates_pack_template_id_pack_template_id_fk": {
+          "name": "item_pack_templates_pack_template_id_pack_template_id_fk",
+          "tableFrom": "item_pack_templates",
+          "tableTo": "pack_template",
+          "columnsFrom": [
+            "pack_template_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "id": {
+          "columns": [
+            "item_id",
+            "pack_template_id"
+          ],
+          "name": "id"
+        }
+      },
+      "uniqueConstraints": {}
+    },
+    "item_packs": {
+      "name": "item_packs",
+      "columns": {
+        "item_id": {
+          "name": "item_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "pack_id": {
+          "name": "pack_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "quantity": {
+          "name": "quantity",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": 1
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "item_packs_item_id_item_id_fk": {
+          "name": "item_packs_item_id_item_id_fk",
+          "tableFrom": "item_packs",
+          "tableTo": "item",
+          "columnsFrom": [
+            "item_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "item_packs_pack_id_pack_id_fk": {
+          "name": "item_packs_pack_id_pack_id_fk",
+          "tableFrom": "item_packs",
+          "tableTo": "pack",
+          "columnsFrom": [
+            "pack_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "id": {
+          "columns": [
+            "item_id",
+            "pack_id"
+          ],
+          "name": "id"
+        }
+      },
+      "uniqueConstraints": {}
+    },
+    "node": {
+      "name": "node",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "osm_id": {
+          "name": "osm_id",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "lat": {
+          "name": "lat",
+          "type": "real",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "lon": {
+          "name": "lon",
+          "type": "real",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "tags": {
+          "name": "tags",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "offlineMap": {
+      "name": "offlineMap",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "bounds": {
+          "name": "bounds",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "minZoom": {
+          "name": "minZoom",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "maxZoom": {
+          "name": "maxZoom",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "metadata": {
+          "name": "metadata",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "owner_id": {
+          "name": "owner_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP"
+        }
+      },
+      "indexes": {
+        "offlineMap_name_owner_id_unique": {
+          "name": "offlineMap_name_owner_id_unique",
+          "columns": [
+            "name",
+            "owner_id"
+          ],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {
+        "offlineMap_owner_id_user_id_fk": {
+          "name": "offlineMap_owner_id_user_id_fk",
+          "tableFrom": "offlineMap",
+          "tableTo": "user",
+          "columnsFrom": [
+            "owner_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "pack": {
+      "name": "pack",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "owner_id": {
+          "name": "owner_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "is_public": {
+          "name": "is_public",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": false
+        },
+        "grades": {
+          "name": "grades",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "'{\"weight\":\"\",\"essentialItems\":\"\",\"redundancyAndVersatility\":\"\"}'"
+        },
+        "scores": {
+          "name": "scores",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "'{\"weightScore\":0,\"essentialItemsScore\":0,\"redundancyAndVersatilityScore\":0}'"
+        },
+        "type": {
+          "name": "type",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "'pack'"
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "pack_owner_id_user_id_fk": {
+          "name": "pack_owner_id_user_id_fk",
+          "tableFrom": "pack",
+          "tableTo": "user",
+          "columnsFrom": [
+            "owner_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "pack_template": {
+      "name": "pack_template",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "description": {
+          "name": "description",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "type": {
+          "name": "type",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "'packTemplate'"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "refresh_tokens": {
+      "name": "refresh_tokens",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "token": {
+          "name": "token",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "refresh_tokens_user_id_user_id_fk": {
+          "name": "refresh_tokens_user_id_user_id_fk",
+          "tableFrom": "refresh_tokens",
+          "tableTo": "user",
+          "columnsFrom": [
+            "user_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "relation": {
+      "name": "relation",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "osm_id": {
+          "name": "osm_id",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "osm_type": {
+          "name": "osm_type",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "'relation'"
+        },
+        "tags": {
+          "name": "tags",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "members": {
+          "name": "members",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "geo_json": {
+          "name": "geo_json",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "template": {
+      "name": "template",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "type": {
+          "name": "type",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'pack'"
+        },
+        "template_id": {
+          "name": "template_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "is_global_template": {
+          "name": "is_global_template",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": false
+        },
+        "created_by": {
+          "name": "created_by",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "template_created_by_user_id_fk": {
+          "name": "template_created_by_user_id_fk",
+          "tableFrom": "template",
+          "tableTo": "user",
+          "columnsFrom": [
+            "created_by"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "trip": {
+      "name": "trip",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "description": {
+          "name": "description",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "parks": {
+          "name": "parks",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "start_date": {
+          "name": "start_date",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "end_date": {
+          "name": "end_date",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "destination": {
+          "name": "destination",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "owner_id": {
+          "name": "owner_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "packs_id": {
+          "name": "packs_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "is_public": {
+          "name": "is_public",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "activity": {
+          "name": "activity",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "'trip'"
+        },
+        "bounds": {
+          "name": "bounds",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "type": {
+          "name": "type",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "'trip'"
+        },
+        "scores": {
+          "name": "scores",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "'{\"totalScore\":0}'"
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "trip_owner_id_user_id_fk": {
+          "name": "trip_owner_id_user_id_fk",
+          "tableFrom": "trip",
+          "tableTo": "user",
+          "columnsFrom": [
+            "owner_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "trip_packs_id_pack_id_fk": {
+          "name": "trip_packs_id_pack_id_fk",
+          "tableFrom": "trip",
+          "tableTo": "pack",
+          "columnsFrom": [
+            "packs_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "trip_geojsons": {
+      "name": "trip_geojsons",
+      "columns": {
+        "trip_id": {
+          "name": "trip_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "geojson_id": {
+          "name": "geojson_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "trip_geojsons_trip_id_trip_id_fk": {
+          "name": "trip_geojsons_trip_id_trip_id_fk",
+          "tableFrom": "trip_geojsons",
+          "tableTo": "trip",
+          "columnsFrom": [
+            "trip_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        },
+        "trip_geojsons_geojson_id_geojson_id_fk": {
+          "name": "trip_geojsons_geojson_id_geojson_id_fk",
+          "tableFrom": "trip_geojsons",
+          "tableTo": "geojson",
+          "columnsFrom": [
+            "geojson_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "id": {
+          "columns": [
+            "geojson_id",
+            "trip_id"
+          ],
+          "name": "id"
+        }
+      },
+      "uniqueConstraints": {}
+    },
+    "user": {
+      "name": "user",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "password": {
+          "name": "password",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "email": {
+          "name": "email",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "google_id": {
+          "name": "google_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "code": {
+          "name": "code",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "is_certified_guide": {
+          "name": "is_certified_guide",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "password_reset_token": {
+          "name": "password_reset_token",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "password_reset_token_expiration": {
+          "name": "password_reset_token_expiration",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "offline_maps": {
+          "name": "offline_maps",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "role": {
+          "name": "role",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "'user'"
+        },
+        "username": {
+          "name": "username",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "profile_image": {
+          "name": "profile_image",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "preferred_weather": {
+          "name": "preferred_weather",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "'celsius'"
+        },
+        "preferred_weight": {
+          "name": "preferred_weight",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "'lb'"
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP"
+        }
+      },
+      "indexes": {
+        "user_email_unique": {
+          "name": "user_email_unique",
+          "columns": [
+            "email"
+          ],
+          "isUnique": true
+        },
+        "user_username_unique": {
+          "name": "user_username_unique",
+          "columns": [
+            "username"
+          ],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "user_favorite_packs": {
+      "name": "user_favorite_packs",
+      "columns": {
+        "user_id": {
+          "name": "user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "pack_id": {
+          "name": "pack_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "user_favorite_packs_user_id_user_id_fk": {
+          "name": "user_favorite_packs_user_id_user_id_fk",
+          "tableFrom": "user_favorite_packs",
+          "tableTo": "user",
+          "columnsFrom": [
+            "user_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "user_favorite_packs_pack_id_pack_id_fk": {
+          "name": "user_favorite_packs_pack_id_pack_id_fk",
+          "tableFrom": "user_favorite_packs",
+          "tableTo": "pack",
+          "columnsFrom": [
+            "pack_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "id": {
+          "columns": [
+            "pack_id",
+            "user_id"
+          ],
+          "name": "id"
+        }
+      },
+      "uniqueConstraints": {}
+    },
+    "way": {
+      "name": "way",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "osm_id": {
+          "name": "osm_id",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "osm_type": {
+          "name": "osm_type",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "tags": {
+          "name": "tags",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "geo_json": {
+          "name": "geo_json",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "way_nodes": {
+      "name": "way_nodes",
+      "columns": {
+        "way_id": {
+          "name": "way_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "node_id": {
+          "name": "node_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "way_nodes_way_id_way_id_fk": {
+          "name": "way_nodes_way_id_way_id_fk",
+          "tableFrom": "way_nodes",
+          "tableTo": "way",
+          "columnsFrom": [
+            "way_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        },
+        "way_nodes_node_id_node_id_fk": {
+          "name": "way_nodes_node_id_node_id_fk",
+          "tableFrom": "way_nodes",
+          "tableTo": "node",
+          "columnsFrom": [
+            "node_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "id": {
+          "columns": [
+            "node_id",
+            "way_id"
+          ],
+          "name": "id"
+        }
+      },
+      "uniqueConstraints": {}
+    }
+  },
+  "enums": {},
+  "_meta": {
+    "schemas": {},
+    "tables": {},
+    "columns": {}
+  }
+}
\ No newline at end of file
diff --git a/server/migrations-preview/meta/_journal.json b/server/migrations-preview/meta/_journal.json
index d24518431..cd2aeb5ca 100644
--- a/server/migrations-preview/meta/_journal.json
+++ b/server/migrations-preview/meta/_journal.json
@@ -22,6 +22,13 @@
       "when": 1729778627679,
       "tag": "0002_luxuriant_gunslinger",
       "breakpoints": true
+    },
+    {
+      "idx": 3,
+      "version": "5",
+      "when": 1734381220155,
+      "tag": "0003_condemned_sugar_man",
+      "breakpoints": true
     }
   ]
 }
\ No newline at end of file
diff --git a/server/src/db/schema.ts b/server/src/db/schema.ts
index 9c88b793f..5a64346ce 100644
--- a/server/src/db/schema.ts
+++ b/server/src/db/schema.ts
@@ -413,6 +413,7 @@ export const trip = sqliteTable('trip', {
   >(),
   start_date: text('start_date').notNull(),
   end_date: text('end_date').notNull(),
+  destination: text('destination').notNull(),
   owner_id: text('owner_id').references(() => user.id, {
     onDelete: 'cascade',
   }),

From 6ae87a76f026e09bda03aed4694fd7314d868abf Mon Sep 17 00:00:00 2001
From: Taron <taron.aleksanyan.20@gmail.com>
Date: Tue, 17 Dec 2024 03:24:14 +0400
Subject: [PATCH 48/66] handle permissions of trip editing

---
 .../(drawer)/(tabs)/(stack)/trip/[tripId].tsx |   7 +-
 apps/next/pages/trip/[tripId].tsx             |   4 +-
 apps/tauri/src/routes/trip/$tripId.lazy.tsx   |   4 +-
 packages/app/components/GearList/GearList.tsx | 130 +++++++++---------
 packages/app/hooks/trips/useCreateTripForm.ts |   2 +-
 packages/app/screens/trip/TripInfo.tsx        |  29 ++++
 packages/app/screens/trip/TripScreen.tsx      |  58 +++++---
 packages/app/screens/trip/editTrip.tsx        |  14 +-
 .../tripRoutesValidator.ts                    |   1 +
 server/src/services/trip/addTripService.ts    |   1 +
 10 files changed, 153 insertions(+), 97 deletions(-)
 create mode 100644 packages/app/screens/trip/TripInfo.tsx

diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/trip/[tripId].tsx b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/trip/[tripId].tsx
index d07f74fe8..ee12d9de1 100644
--- a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/trip/[tripId].tsx
+++ b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/trip/[tripId].tsx
@@ -1,7 +1,6 @@
 import React from 'react';
-import PackContainer from 'app/components/pack/PackContainer';
-import { TripDetails } from 'app/screens/trip/TripDetails';
-import { DetailsComponent } from 'app/components/details';
+import EditTripScreen from 'app/screens/trip/editTrip';
+
 import { Platform } from 'react-native';
 import { Stack } from 'expo-router';
 import Head from 'expo-router/head';
@@ -24,7 +23,7 @@ export default function Trip() {
           // https://reactnavigation.org/docs/headers#replacing-the-title-with-a-custom-component
         }}
       />
-      <TripDetails />
+      <EditTripScreen />
     </>
   );
 }
diff --git a/apps/next/pages/trip/[tripId].tsx b/apps/next/pages/trip/[tripId].tsx
index b01f041b0..bc95d4f7c 100644
--- a/apps/next/pages/trip/[tripId].tsx
+++ b/apps/next/pages/trip/[tripId].tsx
@@ -1,4 +1,4 @@
-import { TripDetails } from 'app/screens/trip/TripDetails';
+import EditTripScreen from 'app/screens/trip/editTrip';
 import { AuthWrapper } from 'app/modules/auth';
 
 // export const runtime = 'experimental-edge'
@@ -6,7 +6,7 @@ import { AuthWrapper } from 'app/modules/auth';
 export default function Trip() {
   return (
     <>
-      <TripDetails />
+      <EditTripScreen />
     </>
   );
 }
diff --git a/apps/tauri/src/routes/trip/$tripId.lazy.tsx b/apps/tauri/src/routes/trip/$tripId.lazy.tsx
index 20504816b..5787ccc98 100644
--- a/apps/tauri/src/routes/trip/$tripId.lazy.tsx
+++ b/apps/tauri/src/routes/trip/$tripId.lazy.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { TripDetails } from 'app/screens/trip/TripDetails';
+import EditTripScreen from 'app/screens/trip/editTrip';
 import { AuthWrapper } from 'app/modules/auth';
 import { createLazyFileRoute } from '@tanstack/react-router';
 
@@ -10,7 +10,7 @@ export const Route = createLazyFileRoute('/trip/$tripId')({
 export default function Trip() {
   return (
     <AuthWrapper>
-      <TripDetails />
+      <EditTripScreen />
     </AuthWrapper>
   );
 }
diff --git a/packages/app/components/GearList/GearList.tsx b/packages/app/components/GearList/GearList.tsx
index f7ef0aa02..1c83f3583 100644
--- a/packages/app/components/GearList/GearList.tsx
+++ b/packages/app/components/GearList/GearList.tsx
@@ -21,7 +21,7 @@ import { useTripPackId } from 'app/screens/trip/useTripPackId';
 const RStack: any = OriginalRStack;
 const RText: any = OriginalRText;
 
-export const GearList = () => {
+export const GearList = ({ isViewOnlyMode }: { isViewOnlyMode: boolean }) => {
   const [isOpen, setIsOpen] = useState(false);
   const [weightUnit, setWeightUnit] = useState<WeightUnit>('kg');
   const [packId, setPackIdParam] = useTripPackId();
@@ -30,31 +30,33 @@ export const GearList = () => {
 
   return (
     <>
-      <LayoutCard title="Your Pack">
+      <LayoutCard title={isViewOnlyMode ? 'Trip Pack' : 'Your Pack'}>
         <YStack style={{ gap: 16 }}>
           <AsyncView isLoading={packId && isLoading} isError={isError}>
-            <RStack
-              style={{
-                alignItems: currentPack ? 'center' : 'flex-start',
-                gap: 16,
-                flexDirection: currentPack ? 'row' : 'column',
-              }}
-            >
-              <View style={{ flex: 1 }}>
-                <PackContainer
-                  emptyStateComponent={
-                    <RText>
-                      Add packs to plan your trip essentials and stay prepared
-                      for any adventure!
-                    </RText>
-                  }
+            {!isViewOnlyMode && (
+              <RStack
+                style={{
+                  alignItems: currentPack ? 'center' : 'flex-start',
+                  gap: 16,
+                  flexDirection: currentPack ? 'row' : 'column',
+                }}
+              >
+                <View style={{ flex: 1 }}>
+                  <PackContainer
+                    emptyStateComponent={
+                      <RText>
+                        Add packs to plan your trip essentials and stay prepared
+                        for any adventure!
+                      </RText>
+                    }
+                  />
+                </View>
+                <AddPackContainer
+                  onSuccess={setPackIdParam}
+                  isCreatingTrip={true}
                 />
-              </View>
-              <AddPackContainer
-                onSuccess={setPackIdParam}
-                isCreatingTrip={true}
-              />
-            </RStack>
+              </RStack>
+            )}
             {currentPack ? (
               <>
                 <LayoutCard>
@@ -64,46 +66,48 @@ export const GearList = () => {
                     weightUnit={weightUnit}
                   />
                 </LayoutCard>
-                <Accordion
-                  style={{ overflow: 'hidden', width: '100%' }}
-                  type="multiple"
-                >
-                  <Accordion.Item value="details" style={{ width: '100%' }}>
-                    <Accordion.Trigger
-                      style={{
-                        flexDirection: 'row',
-                        justifyContent: 'space-between',
-                      }}
-                    >
-                      {({ open }) => (
-                        <>
-                          <Paragraph style={{ fontWeight: 600 }}>
-                            Manage Pack
-                          </Paragraph>
-                          <Square
-                            rotate={open ? '180deg' : '0deg'}
-                            animation="quick"
-                          >
-                            <ChevronDown size={24} />
-                          </Square>
-                        </>
-                      )}
-                    </Accordion.Trigger>
-                    <Accordion.Content
-                      style={{
-                        width: '100%',
-                        flex: 1,
-                        flexShrink: 0,
-                      }}
-                    >
-                      <TableContainerComponent
-                        hideSummary
-                        forceCardLayout
-                        currentPack={currentPack}
-                      />
-                    </Accordion.Content>
-                  </Accordion.Item>
-                </Accordion>
+                {!isViewOnlyMode && (
+                  <Accordion
+                    style={{ overflow: 'hidden', width: '100%' }}
+                    type="multiple"
+                  >
+                    <Accordion.Item value="details" style={{ width: '100%' }}>
+                      <Accordion.Trigger
+                        style={{
+                          flexDirection: 'row',
+                          justifyContent: 'space-between',
+                        }}
+                      >
+                        {({ open }) => (
+                          <>
+                            <Paragraph style={{ fontWeight: 600 }}>
+                              Manage Pack
+                            </Paragraph>
+                            <Square
+                              rotate={open ? '180deg' : '0deg'}
+                              animation="quick"
+                            >
+                              <ChevronDown size={24} />
+                            </Square>
+                          </>
+                        )}
+                      </Accordion.Trigger>
+                      <Accordion.Content
+                        style={{
+                          width: '100%',
+                          flex: 1,
+                          flexShrink: 0,
+                        }}
+                      >
+                        <TableContainerComponent
+                          hideSummary
+                          forceCardLayout
+                          currentPack={currentPack}
+                        />
+                      </Accordion.Content>
+                    </Accordion.Item>
+                  </Accordion>
+                )}
               </>
             ) : null}
           </AsyncView>
diff --git a/packages/app/hooks/trips/useCreateTripForm.ts b/packages/app/hooks/trips/useCreateTripForm.ts
index e2594ab8a..8ab48842d 100644
--- a/packages/app/hooks/trips/useCreateTripForm.ts
+++ b/packages/app/hooks/trips/useCreateTripForm.ts
@@ -34,12 +34,12 @@ export const useCreateTripForm = (currentDestination, photonDetails) => {
   const createTripFormValues = useMemo<Partial<Record<addTripKey, any>>>(() => {
     const res = {
       ...store,
-      destination: currentDestination?.properties?.name,
       owner_id: authUser?.id,
       pack_id: packId,
     };
     if (photonDetails) {
       res.geoJSON = photonDetails;
+      res.destination = currentDestination?.properties?.name;
     }
 
     return res;
diff --git a/packages/app/screens/trip/TripInfo.tsx b/packages/app/screens/trip/TripInfo.tsx
new file mode 100644
index 000000000..f878d7ef1
--- /dev/null
+++ b/packages/app/screens/trip/TripInfo.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import { RText, View, XStack, YStack } from '@packrat/ui';
+import { LayoutCard } from 'app/components/LayoutCard';
+import { FontAwesome5 } from '@expo/vector-icons';
+import useTheme from 'app/hooks/useTheme';
+
+export const TripInfo = ({ tripInfo }: { tripInfo: any }) => {
+  const { currentTheme } = useTheme();
+
+  return (
+    <LayoutCard
+      title={tripInfo.name}
+      style={{ flex: 1, alignSelf: 'flex-start', width: '100%' }}
+    >
+      <YStack gap={8} style={{ width: '100%', maxWidth: 600 }}>
+        <RText>{tripInfo.description}</RText>
+        <XStack gap={8}>
+          <FontAwesome5
+            name="hiking"
+            size={20}
+            color={currentTheme.colors.text}
+          />
+          <RText>Activity:</RText>
+          <RText style={{ paddingLeft: 8 }}>{tripInfo.activity}</RText>
+        </XStack>
+      </YStack>
+    </LayoutCard>
+  );
+};
diff --git a/packages/app/screens/trip/TripScreen.tsx b/packages/app/screens/trip/TripScreen.tsx
index 8389525c0..7f3ee9da6 100644
--- a/packages/app/screens/trip/TripScreen.tsx
+++ b/packages/app/screens/trip/TripScreen.tsx
@@ -17,6 +17,8 @@ import useResponsive from 'app/hooks/useResponsive';
 import { LayoutCard } from 'app/components/LayoutCard';
 import { MapPin, MapPinned } from '@tamagui/lucide-icons';
 import { type addTripKey } from './createTripStore/store';
+import { useAuthUser } from 'app/modules/auth';
+import { TripInfo } from './TripInfo';
 
 const SECTIONS = {
   MAP: 'MAP',
@@ -30,15 +32,20 @@ export function TripScreen({
   initialBounds,
   initialPlaceName,
   initialState,
+  ownerId,
 }: {
   tripId?: string;
   initialBounds?: any;
   initialPlaceName?: string;
   initialState?: Partial<Record<addTripKey, any>>;
+  ownerId?: string;
 }) {
   const placesAutoCompleteRef = useRef({});
   const [isChangePlaceMode, setIsChangePlaceMode] = useState(false);
   const { gtSm } = useResponsive();
+  const authUser = useAuthUser();
+  const hasPermissionToEdit = ownerId === authUser?.id;
+  const isViewOnlyMode = !hasPermissionToEdit && tripId;
 
   const {
     currentDestination,
@@ -79,7 +86,7 @@ export function TripScreen({
         <WeatherData latLng={latLng} />
       </LayoutCard>
     ) : undefined,
-    [SECTIONS.PACK]: <GearList />,
+    [SECTIONS.PACK]: <GearList isViewOnlyMode={isViewOnlyMode} />,
   });
 
   return (
@@ -104,15 +111,17 @@ export function TripScreen({
             }}
           >
             <RText style={{ fontWeight: 700, fontSize: 24 }}>
-              Plan Your Trip
+              {isViewOnlyMode ? 'Trip Details' : 'Plan Your Trip'}
             </RText>
-            <RSecondaryButton
-              icon={<MapPin />}
-              size={36}
-              borderWidth={2}
-              onPress={() => setIsChangePlaceMode(true)}
-              label="Change Direction"
-            />
+            {!isViewOnlyMode && (
+              <RSecondaryButton
+                icon={<MapPin />}
+                size={36}
+                borderWidth={2}
+                onPress={() => setIsChangePlaceMode(true)}
+                label="Change Direction"
+              />
+            )}
           </XStack>
           <RStack style={{ flexDirection: gtSm ? 'row' : 'column', gap: 16 }}>
             <View style={{ width: gtSm ? 450 : '100%' }}>
@@ -125,19 +134,26 @@ export function TripScreen({
                 renderItem={renderItem}
               />
             </View>
-            <LayoutCard
-              title="Trip Details"
-              style={{ flex: 1, alignSelf: 'flex-start' }}
-            >
-              <TripForm
-                tripId={tripId}
-                isValid={isValid}
-                dateRange={dateRange}
-                initialState={initialState}
-                setDateRange={setDateRange}
-                tripStore={tripStore}
+            {!isViewOnlyMode ? (
+              <LayoutCard
+                title="Trip Details"
+                style={{ flex: 1, alignSelf: 'flex-start' }}
+              >
+                <TripForm
+                  tripId={tripId}
+                  isValid={isValid}
+                  dateRange={dateRange}
+                  initialState={initialState}
+                  setDateRange={setDateRange}
+                  tripStore={tripStore}
+                />
+              </LayoutCard>
+            ) : (
+              <TripInfo
+                tripInfo={initialState}
+                startDate={tripStore.start_date}
               />
-            </LayoutCard>
+            )}
           </RStack>
         </YStack>
       ) : null}
diff --git a/packages/app/screens/trip/editTrip.tsx b/packages/app/screens/trip/editTrip.tsx
index ec3b720c1..601c32170 100644
--- a/packages/app/screens/trip/editTrip.tsx
+++ b/packages/app/screens/trip/editTrip.tsx
@@ -6,15 +6,19 @@ import { AsyncView } from 'app/components/AsyncView';
 import { useFetchSingleTrip } from 'app/hooks/singletrips';
 import { type addTripKey } from './createTripStore/store';
 import { useOSM } from 'app/hooks/geojson';
+import { useTripId } from 'app/hooks/trips';
 
-export default function EditTripScreen({ tripId }: { tripId: string }) {
+export default function EditTripScreen() {
+  const [tripId] = useTripId();
   const { isLoading, isError, data } = useFetchSingleTrip(tripId);
+
   return (
     <AsyncView isLoading={isLoading || !data} isError={isError}>
       <TripLoader
         initialState={{
           name: data?.name,
           description: data?.description,
+          destination: data?.destination,
           activity: data?.activity,
           start_date: new Date(data?.start_date),
           end_date: new Date(data?.end_date),
@@ -23,6 +27,7 @@ export default function EditTripScreen({ tripId }: { tripId: string }) {
         packId={data?.pack_id}
         tripId={tripId}
         bounds={data?.bounds}
+        ownerId={data?.owner_id}
       />
     </AsyncView>
   );
@@ -33,10 +38,12 @@ const TripLoader = ({
   packId,
   tripId,
   bounds,
+  ownerId,
 }: {
   initialState: Partial<Record<addTripKey, any>>;
   packId: string;
   tripId: string;
+  ownerId: string;
   bounds: any;
 }) => {
   const tripStore = useCreateTripStore(initialState);
@@ -49,9 +56,8 @@ const TripLoader = ({
         tripId={tripId}
         initialBounds={bounds}
         initialState={initialState}
-        initialPlaceName={
-          initialState?.geoJSON?.features?.[0]?.properties?.['name:en']
-        }
+        initialPlaceName={initialState.destination}
+        ownerId={ownerId}
       />
     </TripProvider>
   );
diff --git a/packages/validations/src/validations/tripRoutesValidator/tripRoutesValidator.ts b/packages/validations/src/validations/tripRoutesValidator/tripRoutesValidator.ts
index 0a3d5c1de..48b0722e1 100644
--- a/packages/validations/src/validations/tripRoutesValidator/tripRoutesValidator.ts
+++ b/packages/validations/src/validations/tripRoutesValidator/tripRoutesValidator.ts
@@ -49,6 +49,7 @@ export const getTripById = z.object({
 export const addTripDetails = z.object({
   activity: z.enum(tripActivityValues).optional(),
   bounds: z.tuple([z.array(z.number()), z.array(z.number())]).optional(),
+  destination: z.string(),
   end_date: z.string(),
   geoJSON: z.string(),
   pack_id: z.string(),
diff --git a/server/src/services/trip/addTripService.ts b/server/src/services/trip/addTripService.ts
index 286368252..4438ab696 100644
--- a/server/src/services/trip/addTripService.ts
+++ b/server/src/services/trip/addTripService.ts
@@ -17,6 +17,7 @@ export const addTripService = async (
     const newTrip = await tripClass.create({
       name: tripData.name,
       description: tripData.description,
+      destination: tripData.destination,
       start_date: tripData.start_date,
       end_date: tripData.end_date,
       activity: tripData.activity || 'trip',

From dcfeb1ad857f0eec72d08372b6aa74fae6765b8c Mon Sep 17 00:00:00 2001
From: Taron <taron.aleksanyan.20@gmail.com>
Date: Tue, 17 Dec 2024 03:56:39 +0400
Subject: [PATCH 49/66] add destination

---
 server/src/services/trip/editTripService.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/server/src/services/trip/editTripService.ts b/server/src/services/trip/editTripService.ts
index 7b2f6e84d..cae59568c 100644
--- a/server/src/services/trip/editTripService.ts
+++ b/server/src/services/trip/editTripService.ts
@@ -16,6 +16,7 @@ export const editTripService = async (
       id: tripData?.id,
       name: tripData.name || selectedTrip.name,
       description: tripData.description || selectedTrip.description,
+      destination: tripData.destination || selectedTrip.destination,
       start_date: tripData.start_date || selectedTrip.start_date,
       end_date: tripData.end_date || selectedTrip.end_date,
       activity: tripData.activity || selectedTrip.activity,

From 7a03d17472c0ba333f1ecb08e87f3c60ca8212b5 Mon Sep 17 00:00:00 2001
From: Anmol Verma <anmolverma2810@gmail.com>
Date: Tue, 17 Dec 2024 20:09:19 +0530
Subject: [PATCH 50/66] product details ui changes

---
 .../components/ExpandableDetailsSection.tsx   |  60 +++--
 .../components/ItemCard/ItemPrimaryCard.tsx   | 154 ++++++------
 .../item/components/ItemDetailsContent.tsx    | 231 ++++++++++--------
 .../item/components/ItemDetailsSection.tsx    |  92 ++++---
 .../components/ItemPrimaryDetailsSection.tsx  |  83 +++++++
 .../item/screens/ItemDetailsScreen.tsx        |  13 +-
 packages/ui/src/Details/Details.tsx           |   3 +-
 packages/ui/src/ImageGallery/ImageGallery.tsx |   8 +-
 8 files changed, 385 insertions(+), 259 deletions(-)
 create mode 100644 packages/app/modules/item/components/ItemPrimaryDetailsSection.tsx

diff --git a/packages/app/modules/item/components/ExpandableDetailsSection.tsx b/packages/app/modules/item/components/ExpandableDetailsSection.tsx
index d92b40f4e..69370966f 100644
--- a/packages/app/modules/item/components/ExpandableDetailsSection.tsx
+++ b/packages/app/modules/item/components/ExpandableDetailsSection.tsx
@@ -4,46 +4,66 @@ import { ChevronDown } from '@tamagui/lucide-icons';
 import { Details } from '@packrat/ui';
 import { useScreenWidth } from 'app/hooks/common/useScreenWidth';
 
-interface Details {
-  key1: string;
-  key2: string;
-  key3: string;
-}
+import useResponsive from 'app/hooks/useResponsive';
 
 interface ExpandableDetailsSectionProps {
-  details: Details;
+  title: string;
+  data: Array<{ key: string; label: string; value: React.ReactNode }> | string;
+  renderContent?: (
+    data:
+      | Array<{ key: string; label: string; value: React.ReactNode }>
+      | string,
+  ) => React.ReactNode;
 }
 
 export function ExpandableDetailsSection({
-  details,
+  title,
+  data,
+  renderContent,
 }: ExpandableDetailsSectionProps) {
+  const { sm, md, lg, xl, xxl } = useResponsive();
   const { screenWidth } = useScreenWidth();
 
+  const getContentStyle = () => {
+    if (sm) {
+      return {
+        width: screenWidth - 110,
+      };
+    }
+    return { width: screenWidth - 1200 };
+  };
+
   return (
     <Accordion overflow="hidden" width="100%" type="multiple">
       <Accordion.Item value="details">
-        <Accordion.Trigger flexDirection="row" justifyContent="space-between">
+        <Accordion.Trigger
+          style={{
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            borderWidth: 0,
+            borderBottomWidth: 2,
+            marginBottom: 10,
+          }}
+        >
           {({ open }) => (
             <>
-              <Paragraph>Product Details</Paragraph>
+              <Paragraph style={{ fontWeight: 'bold' }}>{title}</Paragraph>
               <Square rotate={open ? '180deg' : '0deg'} animation="quick">
                 <ChevronDown size="$1" />
               </Square>
             </>
           )}
         </Accordion.Trigger>
+
         <Accordion.HeightAnimator animation="quick">
-          <Accordion.Content
-            style={{
-              width: screenWidth - 50,
-              padding: 20,
-            }}
-          >
-            <Details
-              items={Object.entries(details).map(([key, value]) => {
-                return { key, label: key, value };
-              })}
-            />
+          <Accordion.Content style={getContentStyle()}>
+            {renderContent ? (
+              renderContent(data)
+            ) : typeof data === 'string' ? (
+              <Paragraph>{data}</Paragraph>
+            ) : (
+              <Details items={data} />
+            )}
           </Accordion.Content>
         </Accordion.HeightAnimator>
       </Accordion.Item>
diff --git a/packages/app/modules/item/components/ItemCard/ItemPrimaryCard.tsx b/packages/app/modules/item/components/ItemCard/ItemPrimaryCard.tsx
index 5aa324742..6bc279ad9 100644
--- a/packages/app/modules/item/components/ItemCard/ItemPrimaryCard.tsx
+++ b/packages/app/modules/item/components/ItemCard/ItemPrimaryCard.tsx
@@ -1,14 +1,14 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { Card } from 'tamagui';
-import ItemDetailsContent from '../ItemDetailsContent';
 import { RStack, Image, RButton } from '@packrat/ui';
-import { TouchableOpacity, View, Platform } from 'react-native';
+import { TouchableOpacity, View } from 'react-native';
 import useTheme from 'app/hooks/useTheme';
-import { useRouter } from 'app/hooks/router';
 import useResponsive from 'app/hooks/useResponsive';
 import { PlusCircle } from '@tamagui/lucide-icons';
 import ItemPlaceholder from 'app/assets/item-placeholder.png';
+import ItemDetailsContent from '../ItemDetailsContent';
 import type { ItemCardProps } from './model';
+import { useRouter } from 'app/hooks/router';
 
 export const ItemPrimaryCard: React.FC<ItemCardProps> = ({
   item,
@@ -18,87 +18,83 @@ export const ItemPrimaryCard: React.FC<ItemCardProps> = ({
   const router = useRouter();
   const { xxs } = useResponsive();
 
-  const handlePress = (e) => {
+  const handlePress = (e: React.MouseEvent) => {
     e.stopPropagation();
-    router.push({
-      pathname: `/item/${item.id}`,
-      query: { itemId: item.id },
-    });
+    router.push({ pathname: `/item/${item.id}`, query: { itemId: item.id } });
   };
 
   return (
-    <>
-      <TouchableOpacity onPress={handlePress}>
-        <Card
-          elevate
-          bordered
-          style={{
-            borderRadius: 10,
-            backgroundColor: currentTheme.colors.card,
-            padding: 10,
-            width: '100%',
-            height: xxs ? 250 : 300,
-            minWidth: 250,
-          }}
-        >
-          <RStack
-            style={{
-              flexDirection: 'row',
-              height: '100%',
-              width: '100%',
-            }}
-          >
-            <View
-              style={{
-                width: '40%',
-                position: 'relative',
-                backgroundColor: currentTheme.colors.background,
-              }}
+    <TouchableOpacity onPress={handlePress}>
+      <Card elevate bordered style={styles.card(currentTheme, xxs)}>
+        <RStack style={styles.content}>
+          <View style={styles.imageContainer(currentTheme)}>
+            <Image
+              source={{ uri: item?.images?.[0]?.url }}
+              defaultSource={ItemPlaceholder}
+              resizeMode="contain"
+              style={styles.image}
+            />
+            <RButton
+              style={styles.addButton}
+              onPress={(e) => onAddPackPress(item.id, e)}
             >
-              <Image
-                source={{
-                  uri: item?.images?.[0]?.url,
-                }}
-                defaultSource={ItemPlaceholder}
-                resizeMode="contain"
-                style={{
-                  width: '100%',
-                  height: '100%',
-                }}
-              />
-              <RButton
-                style={{
-                  position: 'absolute',
-                  top: 4,
-                  right: 4,
-                  padding: 0,
-                  backgroundColor: 'transparent',
-                }}
-                onPress={(e) => {
-                  onAddPackPress(item.id, e);
-                }}
-              >
-                <PlusCircle />
-              </RButton>
-            </View>
+              <PlusCircle />
+            </RButton>
+          </View>
 
-            <RStack style={{ flex: 1, paddingLeft: 10 }}>
-              <ItemDetailsContent
-                itemData={{
-                  title: item.name,
-                  sku: item.sku,
-                  seller: item.seller,
-                  category: item?.category?.name,
-                  productUrl: item.productUrl,
-                  weight: item.weight,
-                  unit: item.unit,
-                  description: item.description,
-                }}
-              />
-            </RStack>
+          <RStack style={styles.details}>
+            <ItemDetailsContent
+              itemData={{
+                title: item.name,
+                sku: item.sku,
+                seller: item.seller,
+                category: item?.category?.name,
+                productUrl: item.productUrl,
+                weight: item.weight,
+                unit: item.unit,
+                description: item.description,
+              }}
+              isPrimaryDetails={false}
+            />
           </RStack>
-        </Card>
-      </TouchableOpacity>
-    </>
+        </RStack>
+      </Card>
+    </TouchableOpacity>
   );
 };
+
+const styles = {
+  card: (theme: any, xxs: boolean) => ({
+    borderRadius: 10,
+    backgroundColor: theme.colors.card,
+    padding: 10,
+    width: '100%',
+    height: xxs ? 250 : 300,
+    minWidth: 250,
+  }),
+  content: {
+    flexDirection: 'row',
+    height: '100%',
+    width: '100%',
+  },
+  imageContainer: (theme: any) => ({
+    width: '40%',
+    position: 'relative',
+    backgroundColor: theme.colors.background,
+  }),
+  image: {
+    width: '100%',
+    height: '100%',
+  },
+  addButton: {
+    position: 'absolute',
+    top: 4,
+    right: 4,
+    padding: 0,
+    backgroundColor: 'transparent',
+  },
+  details: {
+    flex: 1,
+    paddingLeft: 10,
+  },
+};
diff --git a/packages/app/modules/item/components/ItemDetailsContent.tsx b/packages/app/modules/item/components/ItemDetailsContent.tsx
index 27347e2cd..acfb2a748 100644
--- a/packages/app/modules/item/components/ItemDetailsContent.tsx
+++ b/packages/app/modules/item/components/ItemDetailsContent.tsx
@@ -1,13 +1,14 @@
-import React from 'react';
-import { TouchableOpacity } from 'react-native';
+import React, { useMemo } from 'react';
 import { RText, RStack } from '@packrat/ui';
 import useCustomStyles from 'app/hooks/useCustomStyles';
 import { convertWeight } from 'app/utils/convertWeight';
 import { SMALLEST_ITEM_UNIT } from '../constants';
-import useTheme from 'app/hooks/useTheme';
-import useResponsive from 'app/hooks/useResponsive';
-import { openExternalLink } from 'app/utils';
+import { ExpandableDetailsSection } from './ExpandableDetailsSection';
+import ItemPrimaryDetailsSection from './ItemPrimaryDetailsSection';
 import RPrimaryButton from 'app/components/RPrimaryButton';
+import { openExternalLink } from 'app/utils';
+import useResponsive from 'app/hooks/useResponsive';
+import useTheme from 'app/hooks/useTheme';
 
 interface ItemData {
   title: string;
@@ -18,118 +19,138 @@ interface ItemData {
   unit: string;
   description: string;
   productUrl: string;
+  productDetails?: string;
 }
 
-const ItemDetailsContent = ({ itemData }: { itemData: ItemData }) => {
+interface ItemDetailsContentProps {
+  itemData: ItemData;
+  isPrimaryDetails?: boolean;
+}
+
+const ItemDetailsContent: React.FC<ItemDetailsContentProps> = ({
+  itemData,
+  isPrimaryDetails = false,
+}) => {
   const styles = useCustomStyles(loadStyles);
+  const { sm } = useResponsive();
+  const { currentTheme } = useTheme();
 
-  return (
-    <RStack style={styles.container}>
-      <RStack style={styles.detailsContainer}>
-        <RText numberOfLines={2} ellipsizeMode="tail" style={styles.title}>
+  const productDetails = useMemo(
+    () => parseProductDetails(itemData.productDetails),
+    [itemData.productDetails],
+  );
+
+  const renderPrimaryDetails = () => (
+    <>
+      <RStack
+        style={{
+          flexDirection: 'row',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          marginBottom: 20,
+        }}
+      >
+        <RText numberOfLines={2} style={styles.title}>
           {itemData.title}
         </RText>
-        <RStack style={styles.infoRow}>
-          <RStack style={{ flexDirection: 'column' }}>
-            <RText style={styles.categoryText}>{itemData.category}</RText>
-            <RText style={styles.weightText}>
-              {convertWeight(
-                itemData.weight,
-                SMALLEST_ITEM_UNIT,
-                itemData.unit,
-              )}
-              {itemData.unit}
-            </RText>
-          </RStack>
-        </RStack>
-        <RStack style={styles.descriptionSection}>
-          <RText
-            numberOfLines={2}
-            ellipsizeMode="tail"
-            style={styles.descriptionText}
-          >
-            {itemData.description}
-          </RText>
-        </RStack>
-        <RStack style={styles.skuSellerRow}>
-          <RText numberOfLines={1} ellipsizeMode="tail" style={styles.skuText}>
-            SKU: {itemData.sku}
-          </RText>
-          <RText
-            numberOfLines={1}
-            ellipsizeMode="tail"
-            style={styles.sellerText}
-          >
-            Seller: {itemData.seller}
-          </RText>
-        </RStack>
-        <RPrimaryButton
-          onPress={() => {
-            openExternalLink(itemData.productUrl);
+        <RText
+          style={{
+            marginLeft: 10,
+            backgroundColor: currentTheme.colors.cardBorderPrimary,
+            borderRadius: 15,
+            paddingLeft: 10,
+            paddingRight: 10,
+            width: 'auto',
+            fontSize: 12,
+            textAlign: 'center',
+            fontWeight: 500,
           }}
-          label="Go to Store"
-        />
+        >
+          {itemData.category}
+        </RText>
       </RStack>
+      <ItemPrimaryDetailsSection
+        weight={itemData.weight}
+        unit={itemData.unit}
+        sku={itemData.sku}
+        seller={itemData.seller}
+      />
+      <ExpandableDetailsSection
+        title="Description"
+        data={itemData.description}
+      />
+      <ExpandableDetailsSection title="Product Details" data={productDetails} />
+    </>
+  );
+
+  const renderDefaultInfo = () => (
+    <>
+      <RText
+        numberOfLines={2}
+        style={{ fontSize: sm ? 18 : 24, fontWeight: 'bold' }}
+      >
+        {itemData.title}
+      </RText>
+      <RText style={{ fontSize: sm ? 12 : 14, maxHeight: sm ? 20 : 30 }}>
+        {itemData.category}
+      </RText>
+      <RText
+        style={{
+          fontSize: sm ? 12 : 14,
+          maxHeight: sm ? 20 : 30,
+          fontWeight: 'bold',
+        }}
+      >
+        {convertWeight(itemData.weight, SMALLEST_ITEM_UNIT, itemData.unit)}
+        {itemData.unit}
+      </RText>
+      <RText style={{ fontSize: sm ? 10 : 12, maxHeight: sm ? 18 : 30 }}>
+        SKU: {itemData.sku}
+      </RText>
+      <RText style={{ fontSize: sm ? 10 : 12, maxHeight: sm ? 18 : 30 }}>
+        Seller: {itemData.seller}
+      </RText>
+      <RText
+        numberOfLines={2}
+        style={{ fontSize: sm ? 12 : 14, maxHeight: sm ? 70 : 80, flex: 1 }}
+      >
+        {itemData.description}
+      </RText>
+    </>
+  );
+
+  return (
+    <RStack style={styles.container}>
+      {isPrimaryDetails ? renderPrimaryDetails() : renderDefaultInfo()}
+      <RPrimaryButton
+        label="Go to Store"
+        onPress={() => openExternalLink(itemData.productUrl)}
+      />
     </RStack>
   );
 };
 
-const loadStyles = (theme: any) => {
-  const { currentTheme } = useTheme();
-  const { xxs, xs, sm } = useResponsive();
-
-  return {
-    container: {
-      flex: 1,
-      flexWrap: 'wrap',
-    },
-    detailsContainer: {
-      flex: 1,
-      padding: xxs ? 0 : xs ? 8 : 10,
-      flexDirection: 'column',
-      justifyContent: 'space-between',
-    },
-    title: {
-      fontSize: xxs ? 16 : xs ? 16 : sm ? 18 : 20,
-      fontWeight: 'bold',
-      maxHeight: 30,
-      marginVertical: xxs ? 0 : 5,
-    },
-    infoRow: {
-      flexDirection: 'row',
-      flexWrap: 'wrap',
-    },
-    categoryText: {
-      fontSize: xxs ? 12 : xs ? 12 : sm ? 14 : 14,
-      fontWeight: 400,
-    },
-    weightText: {
-      fontSize: xxs ? 16 : xs ? 16 : 18,
-      fontWeight: xxs ? 800 : xs ? 700 : 600,
-    },
-    descriptionSection: {
-      maxHeight: 60,
-      marginVertical: xxs ? 0 : 5,
-      // padding: xs ? 0 : 5,
-    },
-    descriptionText: {
-      fontSize: xxs ? 12 : xs ? 12 : sm ? 14 : 14,
-    },
-    skuSellerRow: {
-      flexDirection: 'column',
-      flexWrap: 'wrap',
-    },
-    skuText: {
-      fontSize: xxs ? 10 : 12,
-      fontWeight: 400,
-      maxHeight: 20,
-    },
-    sellerText: {
-      fontSize: xxs ? 10 : 12,
-      fontWeight: 400,
-      maxHeight: 20,
-    },
-  };
+const parseProductDetails = (details?: string) => {
+  try {
+    return details
+      ? Object.entries(JSON.parse(details.replace(/'/g, '"'))).map(
+          ([key, value]) => ({
+            key,
+            label: key,
+            value: value?.toString() || '',
+          }),
+        )
+      : [];
+  } catch {
+    return [];
+  }
 };
 
+const loadStyles = (theme: any) => ({
+  container: { flex: 1 },
+  title: { fontSize: 24, fontWeight: 'bold', flex: 1 },
+  infoText: { fontSize: 12, marginVertical: 2 },
+  descriptionText: { fontSize: 12, marginVertical: 5 },
+});
+
 export default ItemDetailsContent;
diff --git a/packages/app/modules/item/components/ItemDetailsSection.tsx b/packages/app/modules/item/components/ItemDetailsSection.tsx
index d7902c5f9..3d92469c4 100644
--- a/packages/app/modules/item/components/ItemDetailsSection.tsx
+++ b/packages/app/modules/item/components/ItemDetailsSection.tsx
@@ -4,10 +4,8 @@ import useCustomStyles from 'app/hooks/useCustomStyles';
 import useTheme from 'app/hooks/useTheme';
 import { ExpandableDetailsSection } from './ExpandableDetailsSection';
 import { useItemPackPicker } from '../hooks/useItemPackPicker';
-
 import ItemDetailsContent from './ItemDetailsContent';
 import useResponsive from 'app/hooks/useResponsive';
-import RadioButtonGroup from 'react-native-paper/lib/typescript/components/RadioButton/RadioButtonGroup';
 import { PlusCircle } from '@tamagui/lucide-icons';
 import { PackPickerOverlay } from 'app/modules/pack';
 
@@ -28,42 +26,24 @@ interface ItemData {
 export function ItemDetailsSection({ itemData }: { itemData: ItemData }) {
   const styles = useCustomStyles(loadStyles);
   const { overlayProps, onTriggerOpen } = useItemPackPicker();
-
-  const productDetails = useMemo(() => {
-    try {
-      const parsedDetails = JSON.parse(
-        itemData?.productDetails?.replace?.(/'/g, '"'),
-      );
-      return parsedDetails;
-    } catch (e) {
-      console.log(e);
-      return null;
-    }
-  }, [itemData?.productDetails]);
+  const productDetails = useMemo(
+    () => parseProductDetails(itemData.productDetails),
+    [itemData.productDetails],
+  );
 
   return (
     <RStack style={styles.container}>
       <RStack style={styles.contentContainer}>
-        <View style={styles.imagePlaceholder}>
+        <View style={styles.imageContainer}>
           <RButton
-            style={{
-              position: 'absolute',
-              top: 4,
-              right: 4,
-              padding: 0,
-              backgroundColor: 'transparent',
-              zIndex: 10,
-            }}
-            onPress={(e) => {
-              onTriggerOpen(itemData.id, e);
-            }}
+            style={styles.iconButton}
+            onPress={(e) => onTriggerOpen(itemData.id, e)}
           >
             <PlusCircle />
           </RButton>
-          <ImageGallery
-            images={itemData?.images?.map?.(({ url }) => url) || []}
-          />
+          <ImageGallery images={itemData.images?.map(({ url }) => url) || []} />
         </View>
+
         <RStack style={styles.detailsContainer}>
           <ItemDetailsContent
             itemData={{
@@ -75,20 +55,35 @@ export function ItemDetailsSection({ itemData }: { itemData: ItemData }) {
               unit: itemData.unit,
               description: itemData.description,
               productUrl: itemData.productUrl,
+              productDetails: itemData.productDetails,
             }}
+            isPrimaryDetails
           />
         </RStack>
       </RStack>
-      {productDetails && (
-        <RStack style={styles.productDetailsSection}>
-          <ExpandableDetailsSection details={productDetails} />
-        </RStack>
-      )}
+
       <PackPickerOverlay {...overlayProps} />
     </RStack>
   );
 }
 
+const parseProductDetails = (details?: string) => {
+  try {
+    return details
+      ? Object.entries(JSON.parse(details.replace(/'/g, '"'))).map(
+          ([key, value]) => ({
+            key,
+            label: key,
+            value: value?.toString() || '',
+          }),
+        )
+      : [];
+  } catch (e) {
+    console.error('Error parsing product details:', e);
+    return [];
+  }
+};
+
 const loadStyles = (theme: any) => {
   const { currentTheme } = useTheme();
   const { xxs } = useResponsive();
@@ -97,31 +92,30 @@ const loadStyles = (theme: any) => {
     container: {
       flex: 1,
       padding: 10,
-      flexDirection: 'column',
       backgroundColor: currentTheme.colors.background,
     },
     contentContainer: {
       flexDirection: xxs ? 'column' : 'row',
     },
-    detailsContainer: {
-      flex: 1,
-      padding: 10,
-    },
-    imagePlaceholder: {
+    imageContainer: {
       flex: 1,
-      overflow: 'hidden',
-      height: 300,
+      height: 400,
       backgroundColor: currentTheme.colors.border,
       justifyContent: 'center',
       alignItems: 'center',
-      marginRight: 10,
+      marginRight: xxs ? 0 : 10,
+      position: 'relative',
     },
-    productDetailsSection: {
-      width: '100%',
-      padding: 5,
-      marginTop: 20,
-      backgroundColor: currentTheme.colors.background,
-      borderRadius: 5,
+    detailsContainer: {
+      flex: 1,
+      padding: 10,
+    },
+    iconButton: {
+      position: 'absolute',
+      top: 4,
+      right: 4,
+      zIndex: 10,
+      backgroundColor: 'transparent',
     },
   };
 };
diff --git a/packages/app/modules/item/components/ItemPrimaryDetailsSection.tsx b/packages/app/modules/item/components/ItemPrimaryDetailsSection.tsx
new file mode 100644
index 000000000..e8817b622
--- /dev/null
+++ b/packages/app/modules/item/components/ItemPrimaryDetailsSection.tsx
@@ -0,0 +1,83 @@
+import React from 'react';
+import { RText, RStack } from '@packrat/ui';
+import useCustomStyles from 'app/hooks/useCustomStyles';
+import { convertWeight } from 'app/utils/convertWeight';
+import { SMALLEST_ITEM_UNIT } from '../constants';
+import useTheme from 'app/hooks/useTheme';
+import useResponsive from 'app/hooks/useResponsive';
+
+interface ItemPrimaryDetailsSectionProps {
+  weight: number;
+  unit: string;
+  sku: string;
+  seller: string;
+}
+
+const ItemPrimaryDetailsSection: React.FC<ItemPrimaryDetailsSectionProps> = ({
+  weight,
+  unit,
+  sku,
+  seller,
+}) => {
+  const styles = useCustomStyles(loadStyles);
+
+  return (
+    <RStack style={styles.container}>
+      <RStack style={styles.keyValueRow}>
+        <RStack style={styles.keyValueItem}>
+          <RText style={styles.keyText}>Weight:</RText>
+          <RText style={styles.valueText}>
+            {convertWeight(weight, SMALLEST_ITEM_UNIT, unit)}
+            {unit}
+          </RText>
+        </RStack>
+
+        <RStack style={styles.keyValueItem}>
+          <RText style={styles.keyText}>SKU:</RText>
+          <RText style={styles.valueText}>{sku}</RText>
+        </RStack>
+
+        <RStack style={styles.keyValueItem}>
+          <RText style={styles.keyText}>Seller:</RText>
+          <RText style={styles.valueText}>{seller}</RText>
+        </RStack>
+      </RStack>
+    </RStack>
+  );
+};
+
+const loadStyles = () => {
+  const { currentTheme } = useTheme();
+  const { xxs, xs, sm } = useResponsive();
+
+  return {
+    container: {
+      borderWidth: 1,
+      borderColor: currentTheme.colors.cardBorderPrimary,
+      borderRadius: 10,
+      padding: xxs ? 8 : 10,
+      backgroundColor: currentTheme.colors.card,
+      marginBottom: 20,
+    },
+    keyValueRow: {
+      flexDirection: 'column',
+      gap: 8,
+    },
+    keyValueItem: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+    },
+    keyText: {
+      fontSize: xxs ? 12 : xs ? 14 : 16,
+      fontWeight: '600',
+      color: currentTheme.colors.text,
+    },
+    valueText: {
+      fontSize: xxs ? 12 : xs ? 14 : 16,
+      fontWeight: '400',
+      color: currentTheme.colors.textSecondary,
+    },
+  };
+};
+
+export default ItemPrimaryDetailsSection;
diff --git a/packages/app/modules/item/screens/ItemDetailsScreen.tsx b/packages/app/modules/item/screens/ItemDetailsScreen.tsx
index 0280517d7..a3151f40c 100644
--- a/packages/app/modules/item/screens/ItemDetailsScreen.tsx
+++ b/packages/app/modules/item/screens/ItemDetailsScreen.tsx
@@ -52,22 +52,27 @@ export function ItemDetailsScreen() {
             </TouchableOpacity>
           )}
         </RStack>
-        <ItemDetailsSection itemData={item as any} />
+        <ItemDetailsSection
+          itemData={item as any}
+          isDescriptionCollapsible={true}
+        />
       </RStack>
       <LargeCard
         customStyle={{
-          width: '80%',
-          backgroundColor: currentTheme.colors.secondaryBlue,
+          width: '100%',
+          backgroundColor: currentTheme.colors.background,
           paddingBottom: 24,
           gap: 16,
           paddingTop: 0,
+          borderWidth: 1,
+          borderColor: currentTheme.colors.cardBorderPrimary,
         }}
       >
         <RH3
           style={{
             color: currentTheme.colors.text,
             fontSize: 24,
-            alignSelf: 'center',
+            alignSelf: 'flex-start',
             marginBottom: 20,
           }}
         >
diff --git a/packages/ui/src/Details/Details.tsx b/packages/ui/src/Details/Details.tsx
index a21ca217f..c82daa931 100644
--- a/packages/ui/src/Details/Details.tsx
+++ b/packages/ui/src/Details/Details.tsx
@@ -19,9 +19,10 @@ export const Details: FC<DetailsProps> = ({ items }) => {
         <YGroup.Item key={key}>
           <ListItem
             {...item}
-            size="$2"
+            size="$4"
             style={{
               display: 'flex',
+              flex: 1,
               justifyContent: 'space-between',
               paddingLeft: 0,
               paddingRight: 0,
diff --git a/packages/ui/src/ImageGallery/ImageGallery.tsx b/packages/ui/src/ImageGallery/ImageGallery.tsx
index f2b05b606..e7c98cff1 100644
--- a/packages/ui/src/ImageGallery/ImageGallery.tsx
+++ b/packages/ui/src/ImageGallery/ImageGallery.tsx
@@ -13,7 +13,13 @@ export const ImageGallery: FC<ImageGalleryProps> = ({ images }) => {
   const { activeImageSrc, goPrev, goNext } = useImageGallery(images);
 
   return (
-    <XStack style={{ width: '100%', flex: 1, gap: 10 }}>
+    <XStack
+      style={{
+        width: '100%',
+        flex: 1,
+        gap: 10,
+      }}
+    >
       {images?.length > 1 ? (
         <TouchableOpacity
           style={{

From c0e93486595f39e7b30d642722910e5741dc8374 Mon Sep 17 00:00:00 2001
From: Anmol Verma <anmolverma2810@gmail.com>
Date: Tue, 17 Dec 2024 21:50:39 +0530
Subject: [PATCH 51/66] style changes

---
 .../modules/trip/components/TripCard/TripPrimaryCard.tsx | 4 +++-
 packages/ui/src/card/SecondaryCard.tsx                   | 9 +++++++--
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/packages/app/modules/trip/components/TripCard/TripPrimaryCard.tsx b/packages/app/modules/trip/components/TripCard/TripPrimaryCard.tsx
index bfa0a2333..85384c409 100644
--- a/packages/app/modules/trip/components/TripCard/TripPrimaryCard.tsx
+++ b/packages/app/modules/trip/components/TripCard/TripPrimaryCard.tsx
@@ -30,7 +30,9 @@ export const TripPrimaryCard: FC<TripCardProps> = (props) => {
       }
       content={
         <YStack>
-          <RText>{props.details.description}</RText>
+          <RText numberOfLines={1} ellipsizeMode="tail">
+            {props.details.description}
+          </RText>
           <Details
             items={[
               {
diff --git a/packages/ui/src/card/SecondaryCard.tsx b/packages/ui/src/card/SecondaryCard.tsx
index 049f31ac7..030137983 100644
--- a/packages/ui/src/card/SecondaryCard.tsx
+++ b/packages/ui/src/card/SecondaryCard.tsx
@@ -39,11 +39,16 @@ export const SecondaryCard: FC<SecondaryCardProps> = (props) => {
             justifyContent: 'space-between',
             width: '100%',
             flexDirection: 'row',
+            gap: 10,
           }}
         >
-          <View style={{ maxWidth: '100%' }}>
+          <View style={{ maxWidth: '100%', flex: 1 }}>
             <RText
-              style={{ fontWeight: 'bold', fontSize: 16, lineHeight: 24 }}
+              style={{
+                fontWeight: 'bold',
+                fontSize: 16,
+                lineHeight: 24,
+              }}
               numberOfLines={1}
               ellipsizeMode="tail"
             >

From ee1a5f74b5187fd06566695a44635dbc643b8005 Mon Sep 17 00:00:00 2001
From: Tadjaur <tadjaur@tas-groups.com>
Date: Tue, 17 Dec 2024 19:05:01 +0100
Subject: [PATCH 52/66] fix is public type

---
 .../validations/tripRoutesValidator/tripRoutesValidator.ts    | 4 ++--
 server/src/db/schema.ts                                       | 4 +---
 server/src/services/trip/editTripService.ts                   | 3 ++-
 3 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/packages/validations/src/validations/tripRoutesValidator/tripRoutesValidator.ts b/packages/validations/src/validations/tripRoutesValidator/tripRoutesValidator.ts
index 0a3d5c1de..580b2f89c 100644
--- a/packages/validations/src/validations/tripRoutesValidator/tripRoutesValidator.ts
+++ b/packages/validations/src/validations/tripRoutesValidator/tripRoutesValidator.ts
@@ -7,7 +7,7 @@ export const addTripForm = z.object({
   name: z.string(),
   description: z.string().optional().nullable(),
   activity: z.enum(tripActivityValues).optional(),
-  is_public: z.union([z.literal('0'), z.literal('1')]).optional(),
+  is_public: z.boolean().optional(),
 });
 
 const coordinateSchema = z.lazy(() =>
@@ -70,7 +70,7 @@ export type EditTripType = z.infer<typeof editTrip>;
 
 export const setTripVisibility = z.object({
   tripId: z.string().min(1),
-  is_public: z.union([z.literal('0'), z.literal('1')]),
+  is_public: z.boolean(),
 });
 export type SetTripVisibilityType = z.infer<typeof setTripVisibility>;
 
diff --git a/server/src/db/schema.ts b/server/src/db/schema.ts
index 66a17cd67..9c88b793f 100644
--- a/server/src/db/schema.ts
+++ b/server/src/db/schema.ts
@@ -419,9 +419,7 @@ export const trip = sqliteTable('trip', {
   pack_id: text('packs_id').references(() => pack.id, {
     onDelete: 'set null',
   }),
-  is_public: text('is_public', { enum: ['0', '1'] })
-    .default('0')
-    .$type<'0' | '1'>(),
+  is_public: integer('is_public', { mode: 'boolean' }),
   activity: text('activity').default('trip'),
   bounds: text('bounds', { mode: 'json' }).$type<OfflineMap['bounds']>(),
   type: text('type').default('trip'),
diff --git a/server/src/services/trip/editTripService.ts b/server/src/services/trip/editTripService.ts
index ee26832a4..004f3db4a 100644
--- a/server/src/services/trip/editTripService.ts
+++ b/server/src/services/trip/editTripService.ts
@@ -73,8 +73,9 @@ export const setTripVisibilityService = async (
     const tripClass = new Trip();
     const selectedTrip = await tripClass.findById(tripData.id);
     const updatedTrip = await tripClass.update({
+      ...selectedTrip,
       id: selectedTrip.id,
-      is_public: tripData.is_public === '1',
+      is_public: tripData.is_public,
     });
     return updatedTrip;
   } catch (error) {

From d173b0452219dcff0d80352f9fb0b24bee9acb25 Mon Sep 17 00:00:00 2001
From: Taron <taron.aleksanyan.20@gmail.com>
Date: Wed, 18 Dec 2024 16:15:56 +0400
Subject: [PATCH 53/66] profile scren fixes

---
 packages/app/components/trip/TripForm.tsx     | 16 +---
 .../app/hooks/trips/useSetTripVisibility.ts   | 26 ++++++
 .../feed/hooks/useFetchUserFavorites.ts       | 22 ++++-
 .../app/modules/pack/hooks/useEditPack.ts     |  1 +
 .../app/modules/pack/hooks/useUserPacks.ts    | 12 ++-
 .../app/modules/pack/useSetPackVisibility.ts  | 25 ++++++
 .../app/modules/trip/hooks/useUserTrips.ts    | 11 ++-
 packages/app/modules/trip/utils.ts            |  5 ++
 .../modules/user/components/UserDataCard.tsx  |  3 +
 .../modules/user/components/UserPackCard.tsx  | 84 +++++++++----------
 .../modules/user/components/UserTripCard.tsx  | 59 +++++++------
 packages/app/modules/user/components/model.ts |  2 +
 packages/app/modules/user/components/utils.ts |  3 +-
 packages/app/modules/user/hooks/useProfile.ts |  3 +-
 .../modules/user/widgets/ProfileContainer.tsx |  4 +
 .../user/widgets/UserDataContainer.tsx        | 11 ++-
 packages/app/screens/trip/editTrip.tsx        |  7 +-
 .../ui/src/form/components/FormSwitch.tsx     | 15 ++++
 packages/ui/src/form/components/Select.tsx    |  5 +-
 packages/ui/src/form/index.ts                 |  1 +
 server/src/services/trip/editTripService.ts   |  7 +-
 21 files changed, 210 insertions(+), 112 deletions(-)
 create mode 100644 packages/app/hooks/trips/useSetTripVisibility.ts
 create mode 100644 packages/app/modules/pack/useSetPackVisibility.ts
 create mode 100644 packages/app/modules/trip/utils.ts
 create mode 100644 packages/ui/src/form/components/FormSwitch.tsx

diff --git a/packages/app/components/trip/TripForm.tsx b/packages/app/components/trip/TripForm.tsx
index e18030411..5c789e63f 100644
--- a/packages/app/components/trip/TripForm.tsx
+++ b/packages/app/components/trip/TripForm.tsx
@@ -5,6 +5,7 @@ import {
   FormSelect as OriginalFormSelect,
   YStack,
   SubmitButton,
+  FormSwitch,
 } from '@packrat/ui';
 import { useRouter } from 'app/hooks/router';
 import { useAddTrip, useEditTrips } from 'app/hooks/trips';
@@ -27,11 +28,6 @@ interface TripFormProps {
   tripId?: string;
 }
 
-const isPublicOptions = ['For me only', 'Public'].map((key, index) => ({
-  label: key,
-  value: String(index),
-}));
-
 export const TripForm = ({
   tripStore,
   dateRange,
@@ -63,7 +59,7 @@ export const TripForm = ({
       defaultValues={{
         name: initialState?.name,
         description: initialState?.description,
-        is_public: initialState?.is_public ? '1' : '0',
+        is_public: initialState?.is_public,
         activity: initialState?.activity || ActivityOptions[0].value,
       }}
     >
@@ -78,13 +74,7 @@ export const TripForm = ({
           fullWidth
           name="activity"
         />
-        <FormSelect
-          options={isPublicOptions}
-          label="Access"
-          placeholder="Is Public"
-          fullWidth
-          name="is_public"
-        />
+        <FormSwitch labelLeft="Visible For Everyone" name="is_public" />
         <SubmitButton disabled={!isValid} onSubmit={handleCreateTrip}>
           Save Trip
         </SubmitButton>
diff --git a/packages/app/hooks/trips/useSetTripVisibility.ts b/packages/app/hooks/trips/useSetTripVisibility.ts
new file mode 100644
index 000000000..068792e84
--- /dev/null
+++ b/packages/app/hooks/trips/useSetTripVisibility.ts
@@ -0,0 +1,26 @@
+import { queryTrpc } from '../../trpc';
+
+export const useSetTripVisibility = () => {
+  const utils = queryTrpc.useUtils();
+  const mutation = queryTrpc.setTripVisibility.useMutation();
+
+  const setTripVisibility = (
+    updatedTrip,
+    options?: { onSuccess?: (queryUtils: typeof utils) => void },
+  ) => {
+    mutation.mutate(updatedTrip, {
+      onSuccess: () => {
+        utils.getTrips.invalidate();
+        utils.getUserTripsFeed.invalidate();
+        utils.getSingleTrip.invalidate();
+        utils.getUserTrips.invalidate();
+        options?.onSuccess?.(utils);
+      },
+    });
+  };
+
+  return {
+    setTripVisibility,
+    ...mutation,
+  };
+};
diff --git a/packages/app/modules/feed/hooks/useFetchUserFavorites.ts b/packages/app/modules/feed/hooks/useFetchUserFavorites.ts
index 121b915fc..8588db6d2 100644
--- a/packages/app/modules/feed/hooks/useFetchUserFavorites.ts
+++ b/packages/app/modules/feed/hooks/useFetchUserFavorites.ts
@@ -12,8 +12,19 @@ import {
 
 export const useFetchUserFavorites = (
   userId: string,
-  { queryEnabled = true, isPreview = false, searchTerm = '', isPublic } = {},
+  options: {
+    queryEnabled: boolean;
+    isPreview: boolean;
+    searchTerm: string;
+    isPublic: boolean;
+  },
 ) => {
+  const {
+    queryEnabled = true,
+    isPreview = false,
+    searchTerm = '',
+    isPublic,
+  } = options || {};
   const enabled = !!userId && queryEnabled;
   const [pagination, setPagination] = useState<PaginationParams>(
     getPaginationInitialParams(),
@@ -68,13 +79,15 @@ export const useFetchUserFavoritesWithPreview = (
 ): FetchUserFavoritesReturn => {
   const { isAllQueryEnabled, ...previewResourceState } =
     usePreviewResourceState();
-  const { data: previewData, isLoading: isPreviewLoading } =
-    useFetchUserFavorites(userId, { isPreview: true, isPublic });
+  const {
+    data: previewData,
+    isLoading: isPreviewLoading,
+    totalCount,
+  } = useFetchUserFavorites(userId, { isPreview: true, isPublic });
 
   const {
     data: allQueryData,
     isLoading: isAllQueryLoading,
-    totalCount,
     fetchPrevPage,
     fetchNextPage,
     totalPages,
@@ -84,6 +97,7 @@ export const useFetchUserFavoritesWithPreview = (
   } = useFetchUserFavorites(userId, {
     queryEnabled: isAllQueryEnabled,
     searchTerm,
+    isPublic,
   });
 
   return {
diff --git a/packages/app/modules/pack/hooks/useEditPack.ts b/packages/app/modules/pack/hooks/useEditPack.ts
index 3f8eb63eb..51cdb1335 100644
--- a/packages/app/modules/pack/hooks/useEditPack.ts
+++ b/packages/app/modules/pack/hooks/useEditPack.ts
@@ -12,6 +12,7 @@ export const useEditPack = () => {
     mutation.mutate(updatedPack, {
       onSuccess: () => {
         utils.getPacks.invalidate();
+        utils.getUserPacksFeed.invalidate();
         options?.onSuccess?.(utils);
       },
     });
diff --git a/packages/app/modules/pack/hooks/useUserPacks.ts b/packages/app/modules/pack/hooks/useUserPacks.ts
index 5ed78a401..4d330457b 100644
--- a/packages/app/modules/pack/hooks/useUserPacks.ts
+++ b/packages/app/modules/pack/hooks/useUserPacks.ts
@@ -97,19 +97,17 @@ export const useUserPacksWithPreview = (
 ): FetchUserPacksPreviewReturn => {
   const { isAllQueryEnabled, ...previewResourceState } =
     usePreviewResourceState();
-  const { data: previewData, isLoading: isPreviewLoading } = useUserPacks(
-    userId,
-    { isPreview: true, isPublic },
-    'Most Recent',
-    true,
-  );
+  const {
+    data: previewData,
+    isLoading: isPreviewLoading,
+    totalCount,
+  } = useUserPacks(userId, { isPreview: true, isPublic }, 'Most Recent', true);
 
   const {
     data: allQueryData,
     isLoading: isAllQueryLoading,
     fetchPrevPage,
     fetchNextPage,
-    totalCount,
     hasPrevPage,
     hasNextPage,
     currentPage,
diff --git a/packages/app/modules/pack/useSetPackVisibility.ts b/packages/app/modules/pack/useSetPackVisibility.ts
new file mode 100644
index 000000000..b86150ed6
--- /dev/null
+++ b/packages/app/modules/pack/useSetPackVisibility.ts
@@ -0,0 +1,25 @@
+import { queryTrpc } from '../../trpc';
+
+export const useSetPackVisibility = () => {
+  const utils = queryTrpc.useUtils();
+  const mutation = queryTrpc.editPack.useMutation();
+
+  const setPackVisibility = (
+    updatePack: { id: string; is_public: boolean; name: string },
+    options?: { onSuccess?: (queryUtils: typeof utils) => void },
+  ) => {
+    mutation.mutate(updatePack, {
+      onSuccess: () => {
+        utils.getUserFavorites.invalidate();
+        utils.getUserPacksFeed.invalidate();
+        utils.getPublicFeed.invalidate();
+        options?.onSuccess?.(utils);
+      },
+    });
+  };
+
+  return {
+    setPackVisibility,
+    ...mutation,
+  };
+};
diff --git a/packages/app/modules/trip/hooks/useUserTrips.ts b/packages/app/modules/trip/hooks/useUserTrips.ts
index c1ff57a39..158f33447 100644
--- a/packages/app/modules/trip/hooks/useUserTrips.ts
+++ b/packages/app/modules/trip/hooks/useUserTrips.ts
@@ -82,16 +82,15 @@ export const useUserTripsWithPreview = (
 ): FetchUserTripsPreviewReturn => {
   const { isAllQueryEnabled, ...previewResourceState } =
     usePreviewResourceState();
-  const { data: previewData, isLoading: isPreviewLoading } = useUserTrips(
-    userId,
-    { isPublic, isPreview: true, searchTerm },
-    true,
-  );
+  const {
+    data: previewData,
+    isLoading: isPreviewLoading,
+    totalCount,
+  } = useUserTrips(userId, { isPublic, isPreview: true, searchTerm }, true);
 
   const {
     data: allQueryData,
     isLoading: isAllQueryLoading,
-    totalCount,
     fetchPrevPage,
     fetchNextPage,
     currentPage,
diff --git a/packages/app/modules/trip/utils.ts b/packages/app/modules/trip/utils.ts
new file mode 100644
index 000000000..9de98c5b5
--- /dev/null
+++ b/packages/app/modules/trip/utils.ts
@@ -0,0 +1,5 @@
+import moment from 'moment';
+
+export const formatTripDate = (date: string) => {
+  return moment(date, 'MM/DD/YYYY');
+};
diff --git a/packages/app/modules/user/components/UserDataCard.tsx b/packages/app/modules/user/components/UserDataCard.tsx
index 33ab2a66e..2c8b9e629 100644
--- a/packages/app/modules/user/components/UserDataCard.tsx
+++ b/packages/app/modules/user/components/UserDataCard.tsx
@@ -19,6 +19,7 @@ const cardComponentsByType = {
 
 interface UserDataCardProps {
   feedType: UserDataResource;
+  isAuthUserProfile?: boolean;
   cardType: CardType;
   item: UserData;
 }
@@ -27,6 +28,7 @@ export const UserDataCard: FC<UserDataCardProps> = ({
   item,
   cardType,
   feedType,
+  isAuthUserProfile,
 }) => {
   const { addFavorite } = useAddFavorite();
   const user = useAuthUser();
@@ -56,6 +58,7 @@ export const UserDataCard: FC<UserDataCardProps> = ({
       {...cardProps}
       cardType={cardType}
       toggleFavorite={handleAddToFavorite}
+      isAuthUserProfile={isAuthUserProfile}
     />
   );
 };
diff --git a/packages/app/modules/user/components/UserPackCard.tsx b/packages/app/modules/user/components/UserPackCard.tsx
index 397f64c0b..1448efc72 100644
--- a/packages/app/modules/user/components/UserPackCard.tsx
+++ b/packages/app/modules/user/components/UserPackCard.tsx
@@ -1,45 +1,28 @@
-import { Card, RButton, RStack, RSwitch, RText } from '@packrat/ui';
+import { Card, RButton, RStack, RSwitch, RText, Switch } from '@packrat/ui';
 import React, { useEffect, useState, type FC } from 'react';
 import { PackImage } from 'app/modules/pack/components/PackCard/PackImage';
-import {
-  FavoriteButton,
-  useFetchUserFavorites,
-  type FeedCardProps,
-} from 'app/modules/feed';
+import { FavoriteButton } from 'app/modules/feed';
 import { type PackDetails } from 'app/modules/pack/model';
-import { useEditPack } from 'app/modules/pack/hooks';
 import useTheme from 'app/hooks/useTheme';
 import { useUserPacks } from 'app/modules/pack/hooks';
 import { ScoreLabel } from 'app/components/ScoreLabel';
+import { Eye, EyeOff } from '@tamagui/lucide-icons';
+import { type UserDataCardProps } from './model';
+import { useSetPackVisibility } from 'app/modules/pack/useSetPackVisibility';
 
-interface PackCardProps extends FeedCardProps<PackDetails> {}
+interface PackCardProps extends UserDataCardProps<PackDetails> {}
 
 export const UserPackCard: FC<PackCardProps> = (props) => {
-  const { editPack } = useEditPack();
-  const [isPublic, setIsPublic] = useState(props.is_public);
+  const { setPackVisibility, isLoading } = useSetPackVisibility();
 
   const { currentTheme } = useTheme();
 
   const { refetch } = useUserPacks(props.ownerId, {}, '', true);
-  const { refetch: refetchFavorites } = useFetchUserFavorites(props.ownerId);
 
   const updateIsPublic = (value) => {
-    setIsPublic(value);
-    editPack(
-      { id: props.id, name: props.title, is_public: value },
-      {
-        onSuccess: () => {
-          refetch();
-          refetchFavorites();
-        },
-      },
-    );
+    setPackVisibility({ id: props.id, name: props.title, is_public: value });
   };
 
-  useEffect(() => {
-    setIsPublic(props.is_public);
-  }, [props.is_public]);
-
   return (
     <Card
       title={props.title}
@@ -55,7 +38,36 @@ export const UserPackCard: FC<PackCardProps> = (props) => {
         />
       }
       actions={
-        <RStack style={{ flexDirection: 'row', gap: 12 }}>
+        <RStack
+          style={{
+            flexDirection: 'row',
+            gap: 12,
+            alignItems: 'center',
+            marginTop: 8,
+          }}
+        >
+          {props.isAuthUserProfile && (
+            <RButton
+              style={{
+                backgroundColor: 'transparent',
+                borderWidth: 0,
+                padding: 0,
+                opacity: isLoading ? 0.4 : 1,
+              }}
+              unstyled
+              onPress={() => updateIsPublic(!props.isPublic)}
+              onClick={(e) => {
+                e.stopPropagation();
+                e.preventDefault();
+              }}
+            >
+              {props.isPublic ? (
+                <Eye style={{ pointerEvents: 'none' }} />
+              ) : (
+                <EyeOff style={{ pointerEvents: 'none' }} />
+              )}
+            </RButton>
+          )}
           <FavoriteButton
             count={props.favoriteCount}
             isAuthUserFavorite={props.isUserFavorite}
@@ -66,29 +78,11 @@ export const UserPackCard: FC<PackCardProps> = (props) => {
               refetch();
             }}
           />
-          <RButton
-            style={{
-              backgroundColor: currentTheme.colors.background,
-              borderRadius: 20,
-              height: 20,
-              width: 30,
-            }}
-            onClick={(e) => {
-              e.stopPropagation();
-              e.preventDefault();
-            }}
-          >
-            <RSwitch
-              checked={isPublic}
-              onCheckedChange={updateIsPublic}
-              size="$1.5"
-            />
-          </RButton>
         </RStack>
       }
       type={props.cardType}
       style={{
-        borderColor: isPublic
+        borderColor: props.isPublic
           ? currentTheme.colors.secondaryBlue
           : currentTheme.colors.background,
         borderWidth: 2,
diff --git a/packages/app/modules/user/components/UserTripCard.tsx b/packages/app/modules/user/components/UserTripCard.tsx
index e242716fa..450c097e0 100644
--- a/packages/app/modules/user/components/UserTripCard.tsx
+++ b/packages/app/modules/user/components/UserTripCard.tsx
@@ -1,21 +1,21 @@
-import { Card, RButton, RStack, RSwitch } from '@packrat/ui';
+import { Card, RButton, RStack } from '@packrat/ui';
 import React, { useState, type FC } from 'react';
 import { TripImage } from 'app/modules/trip/components/TripCard/TripImage';
-import { type FeedCardProps } from 'app/modules/feed';
 import { LocationLabel } from 'app/modules/trip/components/LocationLabel/LocationLabel';
 import useTheme from 'app/hooks/useTheme';
 import { type TripDetails } from 'modules/trip/model';
-import { useEditTrips } from 'app/hooks/trips';
+import { useSetTripVisibility } from 'app/hooks/trips/useSetTripVisibility';
+import { Eye, EyeOff } from '@tamagui/lucide-icons';
+import { type UserDataCardProps } from './model';
 
-interface TripCardProps extends FeedCardProps<TripDetails> {}
+interface TripCardProps extends UserDataCardProps<TripDetails> {}
 
 export const UserTripCard: FC<TripCardProps> = (props) => {
-  const { editTrips, isLoading, isError } = useEditTrips();
-  const [isPublic, setIsPublic] = useState(props.is_public);
+  const { setTripVisibility, isLoading, isError } = useSetTripVisibility();
   const updateIsPublic = (value) => {
-    setIsPublic(value);
-    editTrips({ id: props.id, name: props.title, is_public: value });
+    setTripVisibility({ tripId: props.id, is_public: value });
   };
+  const isPublic = props?.isPublic;
   const { currentTheme } = useTheme();
 
   return (
@@ -25,25 +25,30 @@ export const UserTripCard: FC<TripCardProps> = (props) => {
       image={<TripImage />}
       subtitle={<LocationLabel location={props.details.destination} />}
       actions={
-        <RStack style={{ flexDirection: 'row', gap: 12 }}>
-          <RButton
-            style={{
-              backgroundColor: currentTheme.colors.background,
-              borderRadius: 20,
-              height: 20,
-              width: 30,
-            }}
-            onClick={(e) => {
-              e.stopPropagation();
-              e.preventDefault();
-            }}
-          >
-            <RSwitch
-              checked={isPublic}
-              onCheckedChange={updateIsPublic}
-              size="$1.5"
-            />
-          </RButton>
+        <RStack style={{ flexDirection: 'row', gap: 12, marginTop: 8 }}>
+          {props.isAuthUserProfile && (
+            <RButton
+              style={{
+                backgroundColor: 'transparent',
+                borderWidth: 0,
+                padding: 0,
+                opacity: isLoading ? 0.4 : 1,
+              }}
+              disabled={isLoading}
+              unstyled
+              onPress={() => updateIsPublic(!isPublic)}
+              onClick={(e) => {
+                e.stopPropagation();
+                e.preventDefault();
+              }}
+            >
+              {isPublic ? (
+                <Eye style={{ pointerEvents: 'none' }} />
+              ) : (
+                <EyeOff style={{ pointerEvents: 'none' }} />
+              )}
+            </RButton>
+          )}
         </RStack>
       }
       type={props.cardType}
diff --git a/packages/app/modules/user/components/model.ts b/packages/app/modules/user/components/model.ts
index a3aeae3cc..247a76838 100644
--- a/packages/app/modules/user/components/model.ts
+++ b/packages/app/modules/user/components/model.ts
@@ -56,5 +56,7 @@ export interface UserDataCardProps<Details> {
   ownerId: string;
   favoriteCount: number;
   isUserFavorite?: boolean;
+  isPublic?: boolean;
+  isAuthUserProfile?: boolean;
   toggleFavorite?: () => void;
 }
diff --git a/packages/app/modules/user/components/utils.ts b/packages/app/modules/user/components/utils.ts
index 2378796c2..bf17b9cdd 100644
--- a/packages/app/modules/user/components/utils.ts
+++ b/packages/app/modules/user/components/utils.ts
@@ -40,7 +40,7 @@ export const UserDataPackCardConverter: Converter<
       (item) => item === currentUserId || item?.userId === currentUserId,
     ),
     favoriteCount: input.favorites_count,
-    is_public: input.is_public,
+    isPublic: input.is_public,
   };
 };
 
@@ -70,5 +70,6 @@ export const UserDataTripCardConverter: Converter<
       activity: input.activity,
     },
     favoriteCount: input.favorites_count,
+    isPublic: input.is_public,
   };
 };
diff --git a/packages/app/modules/user/hooks/useProfile.ts b/packages/app/modules/user/hooks/useProfile.ts
index 84572e9de..932cc432b 100644
--- a/packages/app/modules/user/hooks/useProfile.ts
+++ b/packages/app/modules/user/hooks/useProfile.ts
@@ -9,7 +9,6 @@ import type { PreviewListType } from '../model';
 export const useProfile = (id = null) => {
   const authUser = useAuthUser();
   const isAuthUserProfile = !id || id === authUser?.id;
-  console.log('isAuthUserProfile', isAuthUserProfile);
   const userId = id ?? authUser?.id;
   const [searchTerms, setSearchTerms] = useState<
     Record<PreviewListType, string>
@@ -20,6 +19,7 @@ export const useProfile = (id = null) => {
   const favoritesQuery = useFetchUserFavoritesWithPreview(
     userId as string,
     searchTerms.favorites,
+    !isAuthUserProfile ? true : undefined,
   );
   const userPacksQuery = useUserPacksWithPreview(
     userId as string,
@@ -58,6 +58,7 @@ export const useProfile = (id = null) => {
     favoritesQuery,
     userPacksQuery,
     userTripsQuery,
+    isAuthUserProfile,
     tripsCount: userTripsQuery.totalCount,
     packsCount: userPacksQuery.totalCount,
     favoritesCount: favoritesQuery.totalCount,
diff --git a/packages/app/modules/user/widgets/ProfileContainer.tsx b/packages/app/modules/user/widgets/ProfileContainer.tsx
index 1e45eb636..512c58672 100644
--- a/packages/app/modules/user/widgets/ProfileContainer.tsx
+++ b/packages/app/modules/user/widgets/ProfileContainer.tsx
@@ -168,6 +168,7 @@ export function ProfileContainer({ id = null }) {
     favoritesCount,
     isLoading,
     isCurrentUser,
+    isAuthUserProfile,
     error,
   } = useProfile(id);
 
@@ -196,6 +197,7 @@ export function ProfileContainer({ id = null }) {
             resource={favoritesQuery}
             type="favorites"
             userId={user?.id}
+            isAuthUserProfile={isAuthUserProfile}
             isLoading={isLoading}
             searchTerm={searchTerms.favorites}
             onSearchChange={onSearchChange}
@@ -206,6 +208,7 @@ export function ProfileContainer({ id = null }) {
             resource={userPacksQuery}
             type="packs"
             userId={user?.id}
+            isAuthUserProfile={isAuthUserProfile}
             searchTerm={searchTerms.packs}
             onSearchChange={onSearchChange}
           />
@@ -215,6 +218,7 @@ export function ProfileContainer({ id = null }) {
             resource={userTripsQuery}
             type="trips"
             userId={user?.id}
+            isAuthUserProfile={isAuthUserProfile}
             searchTerm={searchTerms.packs}
             onSearchChange={onSearchChange}
           />
diff --git a/packages/app/modules/user/widgets/UserDataContainer.tsx b/packages/app/modules/user/widgets/UserDataContainer.tsx
index 8d957f2ec..1f1ccd0e2 100644
--- a/packages/app/modules/user/widgets/UserDataContainer.tsx
+++ b/packages/app/modules/user/widgets/UserDataContainer.tsx
@@ -31,6 +31,7 @@ interface UserDataContainerProps {
   userId?: string;
   isLoading?: boolean;
   SkeletonComponent?: React.ReactElement;
+  isAuthUserProfile?: boolean;
   searchTerm: string;
   onSearchChange: (search: string, type: PreviewListType) => void;
 }
@@ -41,6 +42,7 @@ export const UserDataContainer = memo(function UserDataContainer({
   userId,
   isLoading,
   SkeletonComponent,
+  isAuthUserProfile,
   searchTerm,
   onSearchChange,
 }: UserDataContainerProps) {
@@ -54,7 +56,14 @@ export const UserDataContainer = memo(function UserDataContainer({
 
   const differentUser = userId && currentUser && userId !== currentUser.id;
   const Card = ({ item }) => {
-    return <UserDataCard item={item} cardType="primary" feedType={item.type} />;
+    return (
+      <UserDataCard
+        isAuthUserProfile={isAuthUserProfile}
+        item={item}
+        cardType="primary"
+        feedType={item.type}
+      />
+    );
   };
 
   // Map function to render multiple skeleton cards
diff --git a/packages/app/screens/trip/editTrip.tsx b/packages/app/screens/trip/editTrip.tsx
index 601c32170..07987f88e 100644
--- a/packages/app/screens/trip/editTrip.tsx
+++ b/packages/app/screens/trip/editTrip.tsx
@@ -7,11 +7,11 @@ import { useFetchSingleTrip } from 'app/hooks/singletrips';
 import { type addTripKey } from './createTripStore/store';
 import { useOSM } from 'app/hooks/geojson';
 import { useTripId } from 'app/hooks/trips';
+import { formatTripDate } from 'app/modules/trip/utils';
 
 export default function EditTripScreen() {
   const [tripId] = useTripId();
   const { isLoading, isError, data } = useFetchSingleTrip(tripId);
-
   return (
     <AsyncView isLoading={isLoading || !data} isError={isError}>
       <TripLoader
@@ -20,8 +20,9 @@ export default function EditTripScreen() {
           description: data?.description,
           destination: data?.destination,
           activity: data?.activity,
-          start_date: new Date(data?.start_date),
-          end_date: new Date(data?.end_date),
+          is_public: data?.is_public,
+          start_date: formatTripDate(data?.start_date).toDate(),
+          end_date: formatTripDate(data?.end_date).toDate(),
           geoJSON: data?.geoJSON,
         }}
         packId={data?.pack_id}
diff --git a/packages/ui/src/form/components/FormSwitch.tsx b/packages/ui/src/form/components/FormSwitch.tsx
new file mode 100644
index 000000000..68c2b3e9a
--- /dev/null
+++ b/packages/ui/src/form/components/FormSwitch.tsx
@@ -0,0 +1,15 @@
+import { LmSwitchRhf, type LmSwitchRhfProps } from '../lib';
+import type { StyleProp, ViewStyle } from 'react-native';
+export { LmSwitch as Switch } from '../lib';
+
+interface Props
+  extends LmSwitchRhfProps<{ label: string | number; value: any }> {
+  style?: StyleProp<ViewStyle>;
+}
+
+// TODO change the name to "Input" after handling tamagui all components export,
+// which is cause of a name collision
+export const FormSwitch = (props: Props) => {
+  const { style, ...rest } = props;
+  return <LmSwitchRhf {...rest} style={style} />;
+};
diff --git a/packages/ui/src/form/components/Select.tsx b/packages/ui/src/form/components/Select.tsx
index 9c6f4e6c4..5515cccc7 100644
--- a/packages/ui/src/form/components/Select.tsx
+++ b/packages/ui/src/form/components/Select.tsx
@@ -2,7 +2,8 @@ import { LmSelectRhf, type LmSelectRhfProps } from '../lib';
 import { StyleProp, ViewStyle } from 'react-native';
 export { LmSelect as Select } from '../lib';
 
-interface Props extends LmSelectRhfProps<{ label: string | number; value: any }> {
+interface Props
+  extends LmSelectRhfProps<{ label: string | number; value: any }> {
   style?: StyleProp<ViewStyle>;
 }
 
@@ -11,4 +12,4 @@ interface Props extends LmSelectRhfProps<{ label: string | number; value: any }>
 export const FormSelect = (props: Props) => {
   const { style, ...rest } = props;
   return <LmSelectRhf {...rest} style={style} />;
-};
\ No newline at end of file
+};
diff --git a/packages/ui/src/form/index.ts b/packages/ui/src/form/index.ts
index 760637720..4a20c56ee 100644
--- a/packages/ui/src/form/index.ts
+++ b/packages/ui/src/form/index.ts
@@ -3,6 +3,7 @@ export * from './components/Input';
 export * from './components/InputWithIcon';
 export * from './components/SubmitButton';
 export * from './components/Select';
+export * from './components/FormSwitch';
 export * from './components/RadioGroup';
 export * from './components/ImageUpload';
 export * from './useFormSubmitTrigger';
diff --git a/server/src/services/trip/editTripService.ts b/server/src/services/trip/editTripService.ts
index 900e169c3..c9f1d669a 100644
--- a/server/src/services/trip/editTripService.ts
+++ b/server/src/services/trip/editTripService.ts
@@ -20,7 +20,10 @@ export const editTripService = async (
       start_date: tripData.start_date || selectedTrip.start_date,
       end_date: tripData.end_date || selectedTrip.end_date,
       activity: tripData.activity || selectedTrip.activity,
-      is_public: tripData.is_public || selectedTrip.is_public,
+      is_public:
+        typeof tripData.is_public === 'boolean'
+          ? tripData.is_public
+          : selectedTrip.is_public,
       pack_id: tripData.pack_id || selectedTrip.pack_id,
       trails: tripData.trails
         ? JSON.parse(tripData.trails)
@@ -73,7 +76,7 @@ export const setTripVisibilityService = async (
 ) => {
   try {
     const tripClass = new Trip();
-    const selectedTrip = await tripClass.findById(tripData.id);
+    const selectedTrip = await tripClass.findById(tripData.tripId);
     const updatedTrip = await tripClass.update({
       ...selectedTrip,
       id: selectedTrip.id,

From 7643bab89df05e3ce4cbfa593d89596f38f8fc45 Mon Sep 17 00:00:00 2001
From: Anmol Verma <anmolverma2810@gmail.com>
Date: Wed, 18 Dec 2024 19:20:27 +0530
Subject: [PATCH 54/66] add minwidth to editable text

---
 packages/app/modules/pack/components/PackTable/ItemCard.tsx | 4 ++++
 packages/app/modules/pack/components/PackTable/ItemList.tsx | 2 ++
 packages/ui/src/EditableText/EditableText.tsx               | 1 +
 3 files changed, 7 insertions(+)

diff --git a/packages/app/modules/pack/components/PackTable/ItemCard.tsx b/packages/app/modules/pack/components/PackTable/ItemCard.tsx
index 3604bd595..107a3a2bd 100644
--- a/packages/app/modules/pack/components/PackTable/ItemCard.tsx
+++ b/packages/app/modules/pack/components/PackTable/ItemCard.tsx
@@ -52,7 +52,11 @@ export const ItemCard = ({
             fontWeight: 'bold',
             fontSize: 16,
             color: currentTheme.colors.text,
+            flex: 1,
+            marginRight: 10,
           }}
+          numberOfLines={1}
+          ellipsizeMode="tail"
         >
           {item.name}
         </RText>
diff --git a/packages/app/modules/pack/components/PackTable/ItemList.tsx b/packages/app/modules/pack/components/PackTable/ItemList.tsx
index 37c99bdf3..58edb1c30 100644
--- a/packages/app/modules/pack/components/PackTable/ItemList.tsx
+++ b/packages/app/modules/pack/components/PackTable/ItemList.tsx
@@ -46,6 +46,8 @@ export const ItemList = ({
               fontWeight: 'bold',
               flexBasis: '25%',
             }}
+            numberOfLines={1}
+            ellipsizeMode="tail"
           >
             {item.name}
           </RText>
diff --git a/packages/ui/src/EditableText/EditableText.tsx b/packages/ui/src/EditableText/EditableText.tsx
index 4020d79a1..89ac3f453 100644
--- a/packages/ui/src/EditableText/EditableText.tsx
+++ b/packages/ui/src/EditableText/EditableText.tsx
@@ -39,6 +39,7 @@ export const EditableText = ({
           fontWeight: 'bold',
           color: '#0284c7',
           pointerEvents: 'auto',
+          minWidth: 20,
         }}
         ref={inputRef}
         onChange={handleChange}

From dbbf6c8e31a2260dc8395ee9183d9716fe08ef72 Mon Sep 17 00:00:00 2001
From: Tadjaur <tadjaur@tas-groups.com>
Date: Wed, 18 Dec 2024 15:44:45 +0100
Subject: [PATCH 55/66] Fix geojson return type

---
 server/src/routes/geojsonRoutes.ts          | 19 +++++++++++++------
 server/src/services/geojsonStorage/index.ts | 10 ++++------
 server/src/services/trip/editTripService.ts |  1 +
 3 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/server/src/routes/geojsonRoutes.ts b/server/src/routes/geojsonRoutes.ts
index 639f56ef2..50fbf96d6 100644
--- a/server/src/routes/geojsonRoutes.ts
+++ b/server/src/routes/geojsonRoutes.ts
@@ -18,17 +18,24 @@ router.get(
         params.resourceId,
       );
 
+      if (!object) {
+        return ctx.json(
+          {
+            error: `Resource ${params.resource}/${params.resourceId} not found`,
+          },
+          404,
+        );
+      }
+
       const headers = new Headers();
       object.writeHttpMetadata(headers);
-      headers.set('etag', object.httpEtag);
-      headers.set('Content-Type', 'application/geo+json');
+      ctx.header('etag', object.httpEtag);
+      ctx.header('Content-Type', 'application/geo+json');
       const json = await object.json();
 
-      return new Response(json, {
-        headers,
-      });
+      return ctx.json(json);
     } catch (error) {
-      return ctx.json({ error: error.message }, 400);
+      return ctx.json({ error: error.message }, 500);
     }
   }),
 );
diff --git a/server/src/services/geojsonStorage/index.ts b/server/src/services/geojsonStorage/index.ts
index 4381e3808..73d1ad759 100644
--- a/server/src/services/geojsonStorage/index.ts
+++ b/server/src/services/geojsonStorage/index.ts
@@ -23,16 +23,14 @@ export class GeojsonStorageService {
     resource: ResourceType,
     geojson: string,
     resourceId: string,
-  ): Promise<R2Object> {
-    const object = await this._bucket.put(`${resource}/${resourceId}`, geojson);
-    return object;
+  ): Promise<R2Object | null> {
+    return this._bucket.put(`${resource}/${resourceId}`, geojson);
   }
 
   public static async retrieve(
     resource: ResourceType,
     resourceId: string,
-  ): Promise<R2ObjectBody> {
-    const object = await this._bucket.get(`${resource}/${resourceId}`);
-    return object;
+  ): Promise<R2ObjectBody | null> {
+    return this._bucket.get(`${resource}/${resourceId}`);
   }
 }
diff --git a/server/src/services/trip/editTripService.ts b/server/src/services/trip/editTripService.ts
index c9f1d669a..8aea90452 100644
--- a/server/src/services/trip/editTripService.ts
+++ b/server/src/services/trip/editTripService.ts
@@ -37,6 +37,7 @@ export const editTripService = async (
     await scoreTripService(selectedTrip.id);
 
     const serializedGeoJSON = tripData.geoJSON;
+
     if (!serializedGeoJSON) {
       return updatedTrip;
     }

From a7c5b6beed66b6ac085a4a8d3a23b66a172e7f9b Mon Sep 17 00:00:00 2001
From: Tadjaur <tadjaur@tas-groups.com>
Date: Wed, 18 Dec 2024 16:02:42 +0100
Subject: [PATCH 56/66] add More range in the trip name and description

---
 .../tripRoutesValidator/tripRoutesValidator.ts            | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/validations/src/validations/tripRoutesValidator/tripRoutesValidator.ts b/packages/validations/src/validations/tripRoutesValidator/tripRoutesValidator.ts
index ed7533f2e..ae4155b53 100644
--- a/packages/validations/src/validations/tripRoutesValidator/tripRoutesValidator.ts
+++ b/packages/validations/src/validations/tripRoutesValidator/tripRoutesValidator.ts
@@ -3,9 +3,9 @@ import { TripActivity } from './enums';
 
 const tripActivityValues = Object.values(TripActivity) as [string, ...string[]];
 
-export const addTripForm = z.object({
-  name: z.string(),
-  description: z.string().optional().nullable(),
+export const tripForm = z.object({
+  name: z.string().min(2).max(40),
+  description: z.string().min(50).max(200).optional().nullable(),
   activity: z.enum(tripActivityValues).optional(),
   is_public: z.boolean().optional(),
 });
@@ -58,7 +58,7 @@ export const addTripDetails = z.object({
   trails: z.string().optional(),
 });
 
-export const addTrip = addTripDetails.merge(addTripForm);
+export const addTrip = addTripDetails.merge(tripForm);
 export type AddTripType = z.infer<typeof addTrip>;
 
 export const editTrip = addTrip.merge(

From 7118472e8649d698c1ff47be91d4621dc53812ac Mon Sep 17 00:00:00 2001
From: Anmol Verma <anmolverma2810@gmail.com>
Date: Wed, 18 Dec 2024 21:21:06 +0530
Subject: [PATCH 57/66] add filterbadge and wrap screen in layout

---
 .../components/ItemCard/ItemPrimaryCard.tsx   |  2 +-
 .../modules/item/screens/ProductsScreen.tsx   | 43 ++++++++-----------
 2 files changed, 20 insertions(+), 25 deletions(-)

diff --git a/packages/app/modules/item/components/ItemCard/ItemPrimaryCard.tsx b/packages/app/modules/item/components/ItemCard/ItemPrimaryCard.tsx
index 6bc279ad9..6eac85bfb 100644
--- a/packages/app/modules/item/components/ItemCard/ItemPrimaryCard.tsx
+++ b/packages/app/modules/item/components/ItemCard/ItemPrimaryCard.tsx
@@ -70,7 +70,7 @@ const styles = {
     padding: 10,
     width: '100%',
     height: xxs ? 250 : 300,
-    minWidth: 250,
+    minWidth: 340,
   }),
   content: {
     flexDirection: 'row',
diff --git a/packages/app/modules/item/screens/ProductsScreen.tsx b/packages/app/modules/item/screens/ProductsScreen.tsx
index a00dcecaf..456e4f71b 100644
--- a/packages/app/modules/item/screens/ProductsScreen.tsx
+++ b/packages/app/modules/item/screens/ProductsScreen.tsx
@@ -18,6 +18,8 @@ import { Search, X } from '@tamagui/lucide-icons';
 import { PackPickerOverlay } from 'app/modules/pack';
 import { useItemPackPicker } from '../hooks/useItemPackPicker';
 import { FeedList } from 'app/modules/feed/components/FeedList';
+import Layout from 'app/components/layout/Layout';
+import FilterBadge from 'app/components/FilterBadge';
 
 export function ProductsScreen() {
   const sortOptions = useFeedSortOptions('products');
@@ -55,12 +57,19 @@ export function ProductsScreen() {
   const numColumns = getNumColumns();
 
   return (
-    <RScrollView>
+    <Layout>
       <RStack style={styles.mainContainer}>
         <RStack style={styles.filterContainer}>
           <RStack style={styles.searchContainer}>
             <Form>
-              <RStack style={{ flexDirection: 'row', margin: 0, padding: 0 }}>
+              <RStack
+                style={{
+                  flexDirection: 'row',
+                  margin: 0,
+                  padding: 0,
+                  width: '100%',
+                }}
+              >
                 <InputWithIcon
                   LeftIcon={<Search />}
                   RightIcon={<X />}
@@ -71,21 +80,12 @@ export function ProductsScreen() {
               </RStack>
             </Form>
           </RStack>
-          <RStack style={styles.sortContainer}>
-            <RText style={{ fontWeight: 'bold', textWrap: 'nowrap' }}>
-              Sort By:
-            </RText>
-            <RStack style={{ flex: 1 }}>
-              <DropdownComponent
-                value={sortValue}
-                data={sortOptions}
-                onValueChange={handleSortChange}
-                placeholder="Select Sort Option"
-                native={true}
-                zeego={true}
-              />
-            </RStack>
-          </RStack>
+
+          <FilterBadge
+            menuItems={sortOptions}
+            selectedValue={sortValue}
+            onSelect={handleSortChange}
+          />
         </RStack>
 
         {isLoading ? (
@@ -120,7 +120,7 @@ export function ProductsScreen() {
         )}
       </RStack>
       <PackPickerOverlay {...overlayProps} />
-    </RScrollView>
+    </Layout>
   );
 }
 
@@ -146,12 +146,7 @@ const loadStyles = (theme: any) => {
       padding: 30,
       borderRadius: 10,
     },
-    sortContainer: {
-      width: xxs ? '100%' : xs ? '100%' : '20%',
-      justifyContent: 'space-between',
-      flexDirection: 'row',
-      alignItems: 'center',
-    },
+
     cardsContainer: {
       flexDirection: 'row',
       flexWrap: 'wrap',

From bca2aa3bd61b14c322f4ca7149dca29fb352adcd Mon Sep 17 00:00:00 2001
From: Taron <taron.aleksanyan.20@gmail.com>
Date: Wed, 18 Dec 2024 22:37:39 +0400
Subject: [PATCH 58/66] fix trip form validation

---
 packages/app/components/trip/TripForm.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/app/components/trip/TripForm.tsx b/packages/app/components/trip/TripForm.tsx
index 5c789e63f..2d0cd16ca 100644
--- a/packages/app/components/trip/TripForm.tsx
+++ b/packages/app/components/trip/TripForm.tsx
@@ -9,7 +9,7 @@ import {
 } from '@packrat/ui';
 import { useRouter } from 'app/hooks/router';
 import { useAddTrip, useEditTrips } from 'app/hooks/trips';
-import { addTripForm } from '@packrat/validations/src/validations/tripRoutesValidator';
+import { tripForm } from '@packrat/validations/src/validations/tripRoutesValidator';
 import { formatCreateTripValuesForAPI } from 'app/utils/tripUtils';
 import { TripDateRangeCard } from './TripCards';
 import { getEnumValues } from 'app/utils/getEnumValues';
@@ -54,7 +54,7 @@ export const TripForm = ({
 
   return (
     <Form
-      validationSchema={addTripForm}
+      validationSchema={tripForm}
       onSubmit={handleCreateTrip}
       defaultValues={{
         name: initialState?.name,

From cb20b4b0da41bf7caf956c6f396011fedfa27adf Mon Sep 17 00:00:00 2001
From: Taron <taron.aleksanyan.20@gmail.com>
Date: Thu, 19 Dec 2024 01:37:53 +0400
Subject: [PATCH 59/66] fixing

---
 .../trip/TripCards/TripSearchCard.tsx         |  2 +-
 packages/app/hooks/trips/useEditTrips.ts      |  1 +
 .../DashboardScreen/DashboardScreen.tsx       |  5 +-
 .../app/modules/feed/components/FeedList.tsx  |  9 ++--
 .../feed/components/FeedSearchFilter.tsx      | 11 ++--
 packages/app/modules/feed/hooks/useFeed.ts    |  1 +
 .../app/modules/feed/screens/FeedScreen.tsx   | 14 ++----
 .../item/components/ItemDetailsContent.tsx    |  3 +-
 .../item/components/ItemDetailsSection.tsx    | 19 +++++--
 .../item/screens/ItemDetailsScreen.tsx        |  6 +--
 .../modules/item/screens/ProductsScreen.tsx   | 50 ++++++++-----------
 .../app/modules/pack/hooks/useUserPacks.ts    |  3 +-
 .../modules/pack/screens/AddPackScreen.tsx    |  5 +-
 .../components/TripCard/TripPrimaryCard.tsx   |  2 +-
 packages/app/screens/trip/TripScreen.tsx      |  2 +-
 15 files changed, 70 insertions(+), 63 deletions(-)

diff --git a/packages/app/components/trip/TripCards/TripSearchCard.tsx b/packages/app/components/trip/TripCards/TripSearchCard.tsx
index 46499aecf..6274c273c 100644
--- a/packages/app/components/trip/TripCards/TripSearchCard.tsx
+++ b/packages/app/components/trip/TripCards/TripSearchCard.tsx
@@ -43,7 +43,7 @@ export const TripSearchCard = ({
         maxWidth: 448,
         width: '100%',
         margin: 'auto',
-        paddingBottom: 50,
+        paddingVertical: 50,
       }}
     >
       <RText
diff --git a/packages/app/hooks/trips/useEditTrips.ts b/packages/app/hooks/trips/useEditTrips.ts
index 2bb7bc5ed..994148c42 100644
--- a/packages/app/hooks/trips/useEditTrips.ts
+++ b/packages/app/hooks/trips/useEditTrips.ts
@@ -11,6 +11,7 @@ export const useEditTrips = () => {
     mutation.mutate(updatedTrip, {
       onSuccess: () => {
         utils.getTrips.invalidate();
+        utils.getTripById.invalidate({ tripId: updatedTrip.id });
         options?.onSuccess?.(utils);
       },
     });
diff --git a/packages/app/modules/dashboard/screens/DashboardScreen/DashboardScreen.tsx b/packages/app/modules/dashboard/screens/DashboardScreen/DashboardScreen.tsx
index 6772a411f..03b3c7382 100644
--- a/packages/app/modules/dashboard/screens/DashboardScreen/DashboardScreen.tsx
+++ b/packages/app/modules/dashboard/screens/DashboardScreen/DashboardScreen.tsx
@@ -36,12 +36,13 @@ export const DashboardScreen = () => {
                 }}
               >
                 <FAB />
-                <Button
+                {/* DISABLED PACK TEMPLATES FOR NOW */}
+                {/* <Button
                   style={{ alignSelf: 'flex-end' }}
                   onPress={() => router.push('/pack-templates')}
                 >
                   Templates
-                </Button>
+                </Button> */}
               </Stack>
             ) : null}
 
diff --git a/packages/app/modules/feed/components/FeedList.tsx b/packages/app/modules/feed/components/FeedList.tsx
index e907cf1dd..9c6179a9d 100644
--- a/packages/app/modules/feed/components/FeedList.tsx
+++ b/packages/app/modules/feed/components/FeedList.tsx
@@ -9,6 +9,7 @@ import {
 import { RText } from '@packrat/ui';
 import useResponsive from 'app/hooks/useResponsive';
 import useTheme from 'app/hooks/useTheme';
+import { AsyncView } from 'app/components/AsyncView';
 
 interface FeedListProps {
   data: any;
@@ -16,6 +17,7 @@ interface FeedListProps {
   refreshing?: boolean;
   onRefresh?: () => void;
   isLoading?: boolean;
+  isError?: boolean;
   errorMessage?: string;
   separatorHeight?: number;
   footerComponent?: JSX.Element;
@@ -29,6 +31,7 @@ export const FeedList = ({
   refreshing = false,
   onRefresh,
   isLoading = false,
+  isError = false,
   errorMessage = 'No Data Available',
   footerComponent,
   style,
@@ -49,9 +52,7 @@ export const FeedList = ({
 
   return (
     <View style={style}>
-      {isLoading ? (
-        <ActivityIndicator size="large" color={currentTheme.colors.text} />
-      ) : (
+      <AsyncView isLoading={isLoading} isError={isError}>
         <FlatList
           key={`flatlist-numColumns-${numColumns}`}
           numColumns={numColumns}
@@ -75,7 +76,7 @@ export const FeedList = ({
           }
           showsVerticalScrollIndicator={false}
         />
-      )}
+      </AsyncView>
     </View>
   );
 };
diff --git a/packages/app/modules/feed/components/FeedSearchFilter.tsx b/packages/app/modules/feed/components/FeedSearchFilter.tsx
index b56978a38..6857b4d19 100644
--- a/packages/app/modules/feed/components/FeedSearchFilter.tsx
+++ b/packages/app/modules/feed/components/FeedSearchFilter.tsx
@@ -10,9 +10,10 @@ import {
   Form,
   InputWithIcon,
 } from '@packrat/ui';
-import { Search, X } from '@tamagui/lucide-icons';
+import { Plus, Search, X } from '@tamagui/lucide-icons';
 import { useFeedSortOptions } from '../hooks';
 import FilterBadge from 'app/components/FilterBadge';
+import RSecondaryButton from 'app/components/RSecondaryButton';
 
 const RStack = OriginalRStack;
 const RText = OriginalRText;
@@ -113,12 +114,12 @@ export const FeedSearchFilter = ({
           />
 
           {(feedType === 'userPacks' || feedType === 'userTrips') && (
-            <RButton
+            <RSecondaryButton
               style={{ marginLeft: 'auto', marginTop: 8 }}
+              label="Add new"
+              icon={<Plus />}
               onPress={handleCreateClick}
-            >
-              Create
-            </RButton>
+            />
           )}
         </RStack>
       )}
diff --git a/packages/app/modules/feed/hooks/useFeed.ts b/packages/app/modules/feed/hooks/useFeed.ts
index a08cfa9b1..98118a061 100644
--- a/packages/app/modules/feed/hooks/useFeed.ts
+++ b/packages/app/modules/feed/hooks/useFeed.ts
@@ -9,6 +9,7 @@ import { type PaginationReturn } from 'app/hooks/pagination';
 interface UseFeedResult extends Partial<PaginationReturn> {
   data: any[] | null;
   isLoading: boolean;
+  isError?: boolean;
   refetch?: () => void;
   setPage?: (page: number) => void;
 }
diff --git a/packages/app/modules/feed/screens/FeedScreen.tsx b/packages/app/modules/feed/screens/FeedScreen.tsx
index 8af3ac23a..30021073e 100644
--- a/packages/app/modules/feed/screens/FeedScreen.tsx
+++ b/packages/app/modules/feed/screens/FeedScreen.tsx
@@ -1,11 +1,5 @@
 import React, { useMemo, useState, useEffect, memo } from 'react';
-import {
-  FlatList,
-  View,
-  Platform,
-  ActivityIndicator,
-  type ViewProps,
-} from 'react-native';
+import { View, type ViewProps } from 'react-native';
 import {
   FeedCard,
   FeedList,
@@ -13,10 +7,8 @@ import {
   SearchProvider,
 } from '../components';
 import { useRouter } from 'app/hooks/router';
-import { fuseSearch } from 'app/utils/fuseSearch';
-import useCustomStyles from 'app/hooks/useCustomStyles';
 import { useFeed } from 'app/modules/feed';
-import { Pagination, RButton, RText } from '@packrat/ui';
+import { Pagination } from '@packrat/ui';
 import { useAuthUser } from 'app/modules/auth';
 import { type FeedType } from '../model';
 import { ConnectionGate } from 'app/components/ConnectionGate';
@@ -55,6 +47,7 @@ const Feed = memo(function Feed({ feedType = 'public', listStyle }: FeedProps) {
   const {
     data,
     isLoading,
+    isError,
     refetch,
     fetchPrevPage,
     fetchNextPage,
@@ -119,6 +112,7 @@ const Feed = memo(function Feed({ feedType = 'public', listStyle }: FeedProps) {
               />
             )}
             isLoading={isLoading}
+            isError={isError}
             separatorHeight={12}
           />
           {totalPages > 1 ? (
diff --git a/packages/app/modules/item/components/ItemDetailsContent.tsx b/packages/app/modules/item/components/ItemDetailsContent.tsx
index acfb2a748..2c4c24cc5 100644
--- a/packages/app/modules/item/components/ItemDetailsContent.tsx
+++ b/packages/app/modules/item/components/ItemDetailsContent.tsx
@@ -112,7 +112,7 @@ const ItemDetailsContent: React.FC<ItemDetailsContentProps> = ({
       </RText>
       <RText
         numberOfLines={2}
-        style={{ fontSize: sm ? 12 : 14, maxHeight: sm ? 70 : 80, flex: 1 }}
+        style={{ fontSize: sm ? 12 : 14, maxHeight: sm ? 50 : 60, flex: 1 }}
       >
         {itemData.description}
       </RText>
@@ -124,6 +124,7 @@ const ItemDetailsContent: React.FC<ItemDetailsContentProps> = ({
       {isPrimaryDetails ? renderPrimaryDetails() : renderDefaultInfo()}
       <RPrimaryButton
         label="Go to Store"
+        style={{ marginTop: 'auto' }}
         onPress={() => openExternalLink(itemData.productUrl)}
       />
     </RStack>
diff --git a/packages/app/modules/item/components/ItemDetailsSection.tsx b/packages/app/modules/item/components/ItemDetailsSection.tsx
index 3d92469c4..7c8bdf6a9 100644
--- a/packages/app/modules/item/components/ItemDetailsSection.tsx
+++ b/packages/app/modules/item/components/ItemDetailsSection.tsx
@@ -23,8 +23,15 @@ interface ItemData {
   productUrl: string;
 }
 
-export function ItemDetailsSection({ itemData }: { itemData: ItemData }) {
+export function ItemDetailsSection({
+  itemData,
+  isProductScreen,
+}: {
+  itemData: ItemData;
+  isProductScreen?: boolean;
+}) {
   const styles = useCustomStyles(loadStyles);
+  const { gtSm } = useResponsive();
   const { overlayProps, onTriggerOpen } = useItemPackPicker();
   const productDetails = useMemo(
     () => parseProductDetails(itemData.productDetails),
@@ -33,7 +40,14 @@ export function ItemDetailsSection({ itemData }: { itemData: ItemData }) {
 
   return (
     <RStack style={styles.container}>
-      <RStack style={styles.contentContainer}>
+      <RStack
+        style={[
+          styles.contentContainer,
+          isProductScreen
+            ? { flexDirection: gtSm ? 'row' : 'column', gap: 10 }
+            : undefined,
+        ]}
+      >
         <View style={styles.imageContainer}>
           <RButton
             style={styles.iconButton}
@@ -103,7 +117,6 @@ const loadStyles = (theme: any) => {
       backgroundColor: currentTheme.colors.border,
       justifyContent: 'center',
       alignItems: 'center',
-      marginRight: xxs ? 0 : 10,
       position: 'relative',
     },
     detailsContainer: {
diff --git a/packages/app/modules/item/screens/ItemDetailsScreen.tsx b/packages/app/modules/item/screens/ItemDetailsScreen.tsx
index a3151f40c..63c629af6 100644
--- a/packages/app/modules/item/screens/ItemDetailsScreen.tsx
+++ b/packages/app/modules/item/screens/ItemDetailsScreen.tsx
@@ -10,6 +10,7 @@ import { TouchableOpacity, Platform } from 'react-native';
 import { useRouter } from 'app/hooks/router';
 import RLink from '@packrat/ui/src/RLink';
 import Layout from 'app/components/layout/Layout';
+import useResponsive from 'app/hooks/useResponsive';
 
 export function ItemDetailsScreen() {
   const { currentTheme } = useTheme();
@@ -52,10 +53,7 @@ export function ItemDetailsScreen() {
             </TouchableOpacity>
           )}
         </RStack>
-        <ItemDetailsSection
-          itemData={item as any}
-          isDescriptionCollapsible={true}
-        />
+        <ItemDetailsSection itemData={item as any} isProductScreen={true} />
       </RStack>
       <LargeCard
         customStyle={{
diff --git a/packages/app/modules/item/screens/ProductsScreen.tsx b/packages/app/modules/item/screens/ProductsScreen.tsx
index 456e4f71b..4c8525d94 100644
--- a/packages/app/modules/item/screens/ProductsScreen.tsx
+++ b/packages/app/modules/item/screens/ProductsScreen.tsx
@@ -88,35 +88,29 @@ export function ProductsScreen() {
           />
         </RStack>
 
-        {isLoading ? (
-          <RText>Loading...</RText>
-        ) : (
-          <>
-            <FeedList
-              data={data}
-              CardComponent={({ item }) => (
-                <ItemCard
-                  cardType="primary"
-                  item={item}
-                  onAddPackPress={onTriggerOpen}
-                />
-              )}
-              isLoading={isLoading}
-              separatorHeight={12}
+        <FeedList
+          data={data}
+          CardComponent={({ item }) => (
+            <ItemCard
+              cardType="primary"
+              item={item}
+              onAddPackPress={onTriggerOpen}
             />
-            {totalPages > 1 && (
-              <RStack style={{ marginTop: 40 }}>
-                <Pagination
-                  isPrevBtnDisabled={!hasPrevPage}
-                  isNextBtnDisabled={!hasNextPage}
-                  onPressPrevBtn={fetchPrevPage}
-                  onPressNextBtn={fetchNextPage}
-                  currentPage={currentPage}
-                  totalPages={totalPages}
-                />
-              </RStack>
-            )}
-          </>
+          )}
+          isLoading={isLoading}
+          separatorHeight={12}
+        />
+        {totalPages > 1 && (
+          <RStack style={{ marginTop: 40 }}>
+            <Pagination
+              isPrevBtnDisabled={!hasPrevPage}
+              isNextBtnDisabled={!hasNextPage}
+              onPressPrevBtn={fetchPrevPage}
+              onPressNextBtn={fetchNextPage}
+              currentPage={currentPage}
+              totalPages={totalPages}
+            />
+          </RStack>
         )}
       </RStack>
       <PackPickerOverlay {...overlayProps} />
diff --git a/packages/app/modules/pack/hooks/useUserPacks.ts b/packages/app/modules/pack/hooks/useUserPacks.ts
index 4d330457b..33f00a91a 100644
--- a/packages/app/modules/pack/hooks/useUserPacks.ts
+++ b/packages/app/modules/pack/hooks/useUserPacks.ts
@@ -41,7 +41,7 @@ export const useUserPacks = (
     }),
     [isPublic, isPreview, searchTerm, pagination, ownerId, itemId, queryString],
   );
-  const { data, error, isLoading, refetch } =
+  const { data, isError, isLoading, refetch } =
     queryTrpc.getUserPacksFeed.useQuery(queryParams, {
       enabled,
       refetchOnWindowFocus: false,
@@ -72,6 +72,7 @@ export const useUserPacks = (
   return {
     data: data?.data || [],
     isLoading,
+    isError,
     totalCount: data?.totalCount,
     refetch,
     fetchPrevPage,
diff --git a/packages/app/modules/pack/screens/AddPackScreen.tsx b/packages/app/modules/pack/screens/AddPackScreen.tsx
index 5a65fb3d9..e9d1d2588 100644
--- a/packages/app/modules/pack/screens/AddPackScreen.tsx
+++ b/packages/app/modules/pack/screens/AddPackScreen.tsx
@@ -50,7 +50,8 @@ export const AddPackScreen = ({
             <RText style={{ textAlign: 'left', lineHeight: 20 }}>
               {ADD_PACK_FORM_DESCRIPTION}
             </RText>
-            <XStack
+            {/* DISABLED PACK TEMPLATES FOR NOW */}
+            {/* <XStack
               gap={4}
               jc="space-between"
               style={{
@@ -81,7 +82,7 @@ export const AddPackScreen = ({
               >
                 Explore Pack Templates
               </Button>
-            </XStack>
+            </XStack> */}
           </YStack>
           <AddPackForm isCreatingTrip={isCreatingTrip} onSuccess={onSuccess} />
         </View>
diff --git a/packages/app/modules/trip/components/TripCard/TripPrimaryCard.tsx b/packages/app/modules/trip/components/TripCard/TripPrimaryCard.tsx
index 85384c409..1485c63b9 100644
--- a/packages/app/modules/trip/components/TripCard/TripPrimaryCard.tsx
+++ b/packages/app/modules/trip/components/TripCard/TripPrimaryCard.tsx
@@ -30,7 +30,7 @@ export const TripPrimaryCard: FC<TripCardProps> = (props) => {
       }
       content={
         <YStack>
-          <RText numberOfLines={1} ellipsizeMode="tail">
+          <RText numberOfLines={2} ellipsizeMode="tail">
             {props.details.description}
           </RText>
           <Details
diff --git a/packages/app/screens/trip/TripScreen.tsx b/packages/app/screens/trip/TripScreen.tsx
index 7f3ee9da6..267aa6d88 100644
--- a/packages/app/screens/trip/TripScreen.tsx
+++ b/packages/app/screens/trip/TripScreen.tsx
@@ -137,7 +137,7 @@ export function TripScreen({
             {!isViewOnlyMode ? (
               <LayoutCard
                 title="Trip Details"
-                style={{ flex: 1, alignSelf: 'flex-start' }}
+                style={{ flex: 1, alignSelf: 'flex-start', width: '100%' }}
               >
                 <TripForm
                   tripId={tripId}

From 92934561bffa788403bb707b08e01597406e108a Mon Sep 17 00:00:00 2001
From: Tadjaur <tadjaur@tas-groups.com>
Date: Thu, 19 Dec 2024 02:49:54 +0100
Subject: [PATCH 60/66] Fix trip schema definition and migration

---
 .../tripRoutesValidator.ts                    |    2 +-
 .../0003_condemned_sugar_man.sql              |   30 +-
 .../meta/0003_snapshot.json                   |    7 +
 .../0008_shocking_serpent_society.sql         |   36 +
 server/migrations/meta/0008_snapshot.json     | 1541 +++++++++++++++++
 server/migrations/meta/_journal.json          |    7 +
 server/src/db/schema.ts                       |    2 +-
 7 files changed, 1622 insertions(+), 3 deletions(-)
 create mode 100644 server/migrations/0008_shocking_serpent_society.sql
 create mode 100644 server/migrations/meta/0008_snapshot.json

diff --git a/packages/validations/src/validations/tripRoutesValidator/tripRoutesValidator.ts b/packages/validations/src/validations/tripRoutesValidator/tripRoutesValidator.ts
index ae4155b53..079ccfd68 100644
--- a/packages/validations/src/validations/tripRoutesValidator/tripRoutesValidator.ts
+++ b/packages/validations/src/validations/tripRoutesValidator/tripRoutesValidator.ts
@@ -4,7 +4,7 @@ import { TripActivity } from './enums';
 const tripActivityValues = Object.values(TripActivity) as [string, ...string[]];
 
 export const tripForm = z.object({
-  name: z.string().min(2).max(40),
+  name: z.string().min(3).max(40),
   description: z.string().min(50).max(200).optional().nullable(),
   activity: z.enum(tripActivityValues).optional(),
   is_public: z.boolean().optional(),
diff --git a/server/migrations-preview/0003_condemned_sugar_man.sql b/server/migrations-preview/0003_condemned_sugar_man.sql
index d94004db9..4af73cd8e 100644
--- a/server/migrations-preview/0003_condemned_sugar_man.sql
+++ b/server/migrations-preview/0003_condemned_sugar_man.sql
@@ -5,4 +5,32 @@
                   https://stackoverflow.com/questions/2083543/modify-a-columns-type-in-sqlite3
 
  Due to that we don't generate migration automatically and it has to be done manually
-*/
\ No newline at end of file
+*/
+/* MANUAL MIGRATION */
+CREATE TABLE `trip_new` (
+	`id` text PRIMARY KEY NOT NULL,
+	`name` text NOT NULL,
+	`description` text,
+	`parks` text,
+	`start_date` text NOT NULL,
+	`end_date` text NOT NULL,
+	`destination` text NOT NULL,
+	`owner_id` text REFERENCES `user`(`id`) ON UPDATE no action ON DELETE cascade,
+	`packs_id` text REFERENCES `pack`(`id`) ON UPDATE no action ON DELETE set null,
+	`is_public` integer,
+	`activity` text DEFAULT 'trip',
+	`bounds` text,
+	`type` text DEFAULT 'trip',
+	`scores` text DEFAULT '{"totalScore":0}',
+	`created_at` text DEFAULT CURRENT_TIMESTAMP,
+	`updated_at` text DEFAULT CURRENT_TIMESTAMP
+);
+
+INSERT INTO trip_new
+SELECT * FROM trip;
+
+DROP TABLE trip;
+
+ALTER TABLE trip_new RENAME TO trip;
+
+ALTER TABLE trip ADD `trails` text;
diff --git a/server/migrations-preview/meta/0003_snapshot.json b/server/migrations-preview/meta/0003_snapshot.json
index ee7e87620..62bd9fc5e 100644
--- a/server/migrations-preview/meta/0003_snapshot.json
+++ b/server/migrations-preview/meta/0003_snapshot.json
@@ -1020,6 +1020,13 @@
           "notNull": false,
           "autoincrement": false
         },
+        "trails": {
+          "name": "trails",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
         "start_date": {
           "name": "start_date",
           "type": "text",
diff --git a/server/migrations/0008_shocking_serpent_society.sql b/server/migrations/0008_shocking_serpent_society.sql
new file mode 100644
index 000000000..4af73cd8e
--- /dev/null
+++ b/server/migrations/0008_shocking_serpent_society.sql
@@ -0,0 +1,36 @@
+/*
+ SQLite does not support "Drop not null from column" out of the box, we do not generate automatic migration for that, so it has to be done manually
+ Please refer to: https://www.techonthenet.com/sqlite/tables/alter_table.php
+                  https://www.sqlite.org/lang_altertable.html
+                  https://stackoverflow.com/questions/2083543/modify-a-columns-type-in-sqlite3
+
+ Due to that we don't generate migration automatically and it has to be done manually
+*/
+/* MANUAL MIGRATION */
+CREATE TABLE `trip_new` (
+	`id` text PRIMARY KEY NOT NULL,
+	`name` text NOT NULL,
+	`description` text,
+	`parks` text,
+	`start_date` text NOT NULL,
+	`end_date` text NOT NULL,
+	`destination` text NOT NULL,
+	`owner_id` text REFERENCES `user`(`id`) ON UPDATE no action ON DELETE cascade,
+	`packs_id` text REFERENCES `pack`(`id`) ON UPDATE no action ON DELETE set null,
+	`is_public` integer,
+	`activity` text DEFAULT 'trip',
+	`bounds` text,
+	`type` text DEFAULT 'trip',
+	`scores` text DEFAULT '{"totalScore":0}',
+	`created_at` text DEFAULT CURRENT_TIMESTAMP,
+	`updated_at` text DEFAULT CURRENT_TIMESTAMP
+);
+
+INSERT INTO trip_new
+SELECT * FROM trip;
+
+DROP TABLE trip;
+
+ALTER TABLE trip_new RENAME TO trip;
+
+ALTER TABLE trip ADD `trails` text;
diff --git a/server/migrations/meta/0008_snapshot.json b/server/migrations/meta/0008_snapshot.json
new file mode 100644
index 000000000..4dfda712d
--- /dev/null
+++ b/server/migrations/meta/0008_snapshot.json
@@ -0,0 +1,1541 @@
+{
+  "version": "5",
+  "dialect": "sqlite",
+  "id": "978d19f2-b67b-4f6e-8597-fbd2f08aeda9",
+  "prevId": "76e62144-1925-48e1-8815-5f26d57095d9",
+  "tables": {
+    "conversation": {
+      "name": "conversation",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "itemTypeId": {
+          "name": "itemTypeId",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "history": {
+          "name": "history",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "geojson": {
+      "name": "geojson",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "geoJSON": {
+          "name": "geoJSON",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "item": {
+      "name": "item",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "weight": {
+          "name": "weight",
+          "type": "real",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "unit": {
+          "name": "unit",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "category_id": {
+          "name": "category_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "owner_id": {
+          "name": "owner_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "global": {
+          "name": "global",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": false
+        },
+        "sku": {
+          "name": "sku",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "product_url": {
+          "name": "product_url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "description": {
+          "name": "description",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "product_details": {
+          "name": "product_details",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "seller": {
+          "name": "seller",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "item_category_id_item_category_id_fk": {
+          "name": "item_category_id_item_category_id_fk",
+          "tableFrom": "item",
+          "tableTo": "item_category",
+          "columnsFrom": [
+            "category_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        },
+        "item_owner_id_user_id_fk": {
+          "name": "item_owner_id_user_id_fk",
+          "tableFrom": "item",
+          "tableTo": "user",
+          "columnsFrom": [
+            "owner_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "item_category": {
+      "name": "item_category",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "item_image": {
+      "name": "item_image",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "item_id": {
+          "name": "item_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "url": {
+          "name": "url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "item_image_item_id_item_id_fk": {
+          "name": "item_image_item_id_item_id_fk",
+          "tableFrom": "item_image",
+          "tableTo": "item",
+          "columnsFrom": [
+            "item_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "item_owners": {
+      "name": "item_owners",
+      "columns": {
+        "item_id": {
+          "name": "item_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "owner_id": {
+          "name": "owner_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "item_owners_item_id_item_id_fk": {
+          "name": "item_owners_item_id_item_id_fk",
+          "tableFrom": "item_owners",
+          "tableTo": "item",
+          "columnsFrom": [
+            "item_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "item_owners_owner_id_user_id_fk": {
+          "name": "item_owners_owner_id_user_id_fk",
+          "tableFrom": "item_owners",
+          "tableTo": "user",
+          "columnsFrom": [
+            "owner_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "id": {
+          "columns": [
+            "item_id",
+            "owner_id"
+          ],
+          "name": "id"
+        }
+      },
+      "uniqueConstraints": {}
+    },
+    "item_pack_templates": {
+      "name": "item_pack_templates",
+      "columns": {
+        "item_id": {
+          "name": "item_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "pack_template_id": {
+          "name": "pack_template_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "quantity": {
+          "name": "quantity",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": 1
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "item_pack_templates_item_id_item_id_fk": {
+          "name": "item_pack_templates_item_id_item_id_fk",
+          "tableFrom": "item_pack_templates",
+          "tableTo": "item",
+          "columnsFrom": [
+            "item_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "item_pack_templates_pack_template_id_pack_template_id_fk": {
+          "name": "item_pack_templates_pack_template_id_pack_template_id_fk",
+          "tableFrom": "item_pack_templates",
+          "tableTo": "pack_template",
+          "columnsFrom": [
+            "pack_template_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "id": {
+          "columns": [
+            "item_id",
+            "pack_template_id"
+          ],
+          "name": "id"
+        }
+      },
+      "uniqueConstraints": {}
+    },
+    "item_packs": {
+      "name": "item_packs",
+      "columns": {
+        "item_id": {
+          "name": "item_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "pack_id": {
+          "name": "pack_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "quantity": {
+          "name": "quantity",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": 1
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "item_packs_item_id_item_id_fk": {
+          "name": "item_packs_item_id_item_id_fk",
+          "tableFrom": "item_packs",
+          "tableTo": "item",
+          "columnsFrom": [
+            "item_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "item_packs_pack_id_pack_id_fk": {
+          "name": "item_packs_pack_id_pack_id_fk",
+          "tableFrom": "item_packs",
+          "tableTo": "pack",
+          "columnsFrom": [
+            "pack_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "id": {
+          "columns": [
+            "item_id",
+            "pack_id"
+          ],
+          "name": "id"
+        }
+      },
+      "uniqueConstraints": {}
+    },
+    "node": {
+      "name": "node",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "osm_id": {
+          "name": "osm_id",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "lat": {
+          "name": "lat",
+          "type": "real",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "lon": {
+          "name": "lon",
+          "type": "real",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "tags": {
+          "name": "tags",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "offlineMap": {
+      "name": "offlineMap",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "bounds": {
+          "name": "bounds",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "minZoom": {
+          "name": "minZoom",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "maxZoom": {
+          "name": "maxZoom",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "metadata": {
+          "name": "metadata",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "owner_id": {
+          "name": "owner_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP"
+        }
+      },
+      "indexes": {
+        "offlineMap_name_owner_id_unique": {
+          "name": "offlineMap_name_owner_id_unique",
+          "columns": [
+            "name",
+            "owner_id"
+          ],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {
+        "offlineMap_owner_id_user_id_fk": {
+          "name": "offlineMap_owner_id_user_id_fk",
+          "tableFrom": "offlineMap",
+          "tableTo": "user",
+          "columnsFrom": [
+            "owner_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "pack": {
+      "name": "pack",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "owner_id": {
+          "name": "owner_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "is_public": {
+          "name": "is_public",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": false
+        },
+        "grades": {
+          "name": "grades",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "'{\"weight\":\"\",\"essentialItems\":\"\",\"redundancyAndVersatility\":\"\"}'"
+        },
+        "scores": {
+          "name": "scores",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "'{\"weightScore\":0,\"essentialItemsScore\":0,\"redundancyAndVersatilityScore\":0}'"
+        },
+        "type": {
+          "name": "type",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "'pack'"
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "pack_owner_id_user_id_fk": {
+          "name": "pack_owner_id_user_id_fk",
+          "tableFrom": "pack",
+          "tableTo": "user",
+          "columnsFrom": [
+            "owner_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "pack_template": {
+      "name": "pack_template",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "description": {
+          "name": "description",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "type": {
+          "name": "type",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "'packTemplate'"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "refresh_tokens": {
+      "name": "refresh_tokens",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "token": {
+          "name": "token",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "refresh_tokens_user_id_user_id_fk": {
+          "name": "refresh_tokens_user_id_user_id_fk",
+          "tableFrom": "refresh_tokens",
+          "tableTo": "user",
+          "columnsFrom": [
+            "user_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "relation": {
+      "name": "relation",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "osm_id": {
+          "name": "osm_id",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "osm_type": {
+          "name": "osm_type",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "'relation'"
+        },
+        "tags": {
+          "name": "tags",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "members": {
+          "name": "members",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "geo_json": {
+          "name": "geo_json",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "template": {
+      "name": "template",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "type": {
+          "name": "type",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'pack'"
+        },
+        "template_id": {
+          "name": "template_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "is_global_template": {
+          "name": "is_global_template",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": false
+        },
+        "created_by": {
+          "name": "created_by",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "template_created_by_user_id_fk": {
+          "name": "template_created_by_user_id_fk",
+          "tableFrom": "template",
+          "tableTo": "user",
+          "columnsFrom": [
+            "created_by"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "trip": {
+      "name": "trip",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "description": {
+          "name": "description",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "parks": {
+          "name": "parks",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "trails": {
+          "name": "trails",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "start_date": {
+          "name": "start_date",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "end_date": {
+          "name": "end_date",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "destination": {
+          "name": "destination",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "owner_id": {
+          "name": "owner_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "packs_id": {
+          "name": "packs_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "is_public": {
+          "name": "is_public",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "activity": {
+          "name": "activity",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "'trip'"
+        },
+        "bounds": {
+          "name": "bounds",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "type": {
+          "name": "type",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "'trip'"
+        },
+        "scores": {
+          "name": "scores",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "'{\"totalScore\":0}'"
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "trip_owner_id_user_id_fk": {
+          "name": "trip_owner_id_user_id_fk",
+          "tableFrom": "trip",
+          "tableTo": "user",
+          "columnsFrom": [
+            "owner_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "trip_packs_id_pack_id_fk": {
+          "name": "trip_packs_id_pack_id_fk",
+          "tableFrom": "trip",
+          "tableTo": "pack",
+          "columnsFrom": [
+            "packs_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "trip_geojsons": {
+      "name": "trip_geojsons",
+      "columns": {
+        "trip_id": {
+          "name": "trip_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "geojson_id": {
+          "name": "geojson_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "trip_geojsons_trip_id_trip_id_fk": {
+          "name": "trip_geojsons_trip_id_trip_id_fk",
+          "tableFrom": "trip_geojsons",
+          "tableTo": "trip",
+          "columnsFrom": [
+            "trip_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        },
+        "trip_geojsons_geojson_id_geojson_id_fk": {
+          "name": "trip_geojsons_geojson_id_geojson_id_fk",
+          "tableFrom": "trip_geojsons",
+          "tableTo": "geojson",
+          "columnsFrom": [
+            "geojson_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "id": {
+          "columns": [
+            "geojson_id",
+            "trip_id"
+          ],
+          "name": "id"
+        }
+      },
+      "uniqueConstraints": {}
+    },
+    "user": {
+      "name": "user",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "password": {
+          "name": "password",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "email": {
+          "name": "email",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "google_id": {
+          "name": "google_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "code": {
+          "name": "code",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "is_certified_guide": {
+          "name": "is_certified_guide",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "password_reset_token": {
+          "name": "password_reset_token",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "password_reset_token_expiration": {
+          "name": "password_reset_token_expiration",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "offline_maps": {
+          "name": "offline_maps",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "role": {
+          "name": "role",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "'user'"
+        },
+        "username": {
+          "name": "username",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "profile_image": {
+          "name": "profile_image",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "preferred_weather": {
+          "name": "preferred_weather",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "'celsius'"
+        },
+        "preferred_weight": {
+          "name": "preferred_weight",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "'lb'"
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP"
+        }
+      },
+      "indexes": {
+        "user_email_unique": {
+          "name": "user_email_unique",
+          "columns": [
+            "email"
+          ],
+          "isUnique": true
+        },
+        "user_username_unique": {
+          "name": "user_username_unique",
+          "columns": [
+            "username"
+          ],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "user_favorite_packs": {
+      "name": "user_favorite_packs",
+      "columns": {
+        "user_id": {
+          "name": "user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "pack_id": {
+          "name": "pack_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "user_favorite_packs_user_id_user_id_fk": {
+          "name": "user_favorite_packs_user_id_user_id_fk",
+          "tableFrom": "user_favorite_packs",
+          "tableTo": "user",
+          "columnsFrom": [
+            "user_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "user_favorite_packs_pack_id_pack_id_fk": {
+          "name": "user_favorite_packs_pack_id_pack_id_fk",
+          "tableFrom": "user_favorite_packs",
+          "tableTo": "pack",
+          "columnsFrom": [
+            "pack_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "id": {
+          "columns": [
+            "pack_id",
+            "user_id"
+          ],
+          "name": "id"
+        }
+      },
+      "uniqueConstraints": {}
+    },
+    "way": {
+      "name": "way",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "osm_id": {
+          "name": "osm_id",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "osm_type": {
+          "name": "osm_type",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "tags": {
+          "name": "tags",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "geo_json": {
+          "name": "geo_json",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "way_nodes": {
+      "name": "way_nodes",
+      "columns": {
+        "way_id": {
+          "name": "way_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "node_id": {
+          "name": "node_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "way_nodes_way_id_way_id_fk": {
+          "name": "way_nodes_way_id_way_id_fk",
+          "tableFrom": "way_nodes",
+          "tableTo": "way",
+          "columnsFrom": [
+            "way_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        },
+        "way_nodes_node_id_node_id_fk": {
+          "name": "way_nodes_node_id_node_id_fk",
+          "tableFrom": "way_nodes",
+          "tableTo": "node",
+          "columnsFrom": [
+            "node_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "id": {
+          "columns": [
+            "node_id",
+            "way_id"
+          ],
+          "name": "id"
+        }
+      },
+      "uniqueConstraints": {}
+    }
+  },
+  "enums": {},
+  "_meta": {
+    "schemas": {},
+    "tables": {},
+    "columns": {}
+  }
+}
\ No newline at end of file
diff --git a/server/migrations/meta/_journal.json b/server/migrations/meta/_journal.json
index 4bc32aad3..8fc9b5951 100644
--- a/server/migrations/meta/_journal.json
+++ b/server/migrations/meta/_journal.json
@@ -57,6 +57,13 @@
       "when": 1732718976207,
       "tag": "0007_wealthy_next_avengers",
       "breakpoints": true
+    },
+    {
+      "idx": 8,
+      "version": "5",
+      "when": 1734548647270,
+      "tag": "0008_shocking_serpent_society",
+      "breakpoints": true
     }
   ]
 }
\ No newline at end of file
diff --git a/server/src/db/schema.ts b/server/src/db/schema.ts
index 5a64346ce..defa11c0c 100644
--- a/server/src/db/schema.ts
+++ b/server/src/db/schema.ts
@@ -408,7 +408,7 @@ export const trip = sqliteTable('trip', {
   parks: text('parks', { mode: 'json' }).$type<
     Array<{ id: string; name: string }>
   >(),
-  trails: text('parks', { mode: 'json' }).$type<
+  trails: text('trails', { mode: 'json' }).$type<
     Array<{ id: string; name: string }>
   >(),
   start_date: text('start_date').notNull(),

From 937528ad69c5b8fc53f82a3545a3211bb4730634 Mon Sep 17 00:00:00 2001
From: Tadjaur <tadjaur@tas-groups.com>
Date: Thu, 19 Dec 2024 03:24:01 +0100
Subject: [PATCH 61/66] generate a new migration in preview environment

---
 .../0003_condemned_sugar_man.sql              | 30 +------------------
 .../meta/0003_snapshot.json                   |  7 -----
 server/migrations-preview/meta/_journal.json  |  7 +++++
 3 files changed, 8 insertions(+), 36 deletions(-)

diff --git a/server/migrations-preview/0003_condemned_sugar_man.sql b/server/migrations-preview/0003_condemned_sugar_man.sql
index 4af73cd8e..d94004db9 100644
--- a/server/migrations-preview/0003_condemned_sugar_man.sql
+++ b/server/migrations-preview/0003_condemned_sugar_man.sql
@@ -5,32 +5,4 @@
                   https://stackoverflow.com/questions/2083543/modify-a-columns-type-in-sqlite3
 
  Due to that we don't generate migration automatically and it has to be done manually
-*/
-/* MANUAL MIGRATION */
-CREATE TABLE `trip_new` (
-	`id` text PRIMARY KEY NOT NULL,
-	`name` text NOT NULL,
-	`description` text,
-	`parks` text,
-	`start_date` text NOT NULL,
-	`end_date` text NOT NULL,
-	`destination` text NOT NULL,
-	`owner_id` text REFERENCES `user`(`id`) ON UPDATE no action ON DELETE cascade,
-	`packs_id` text REFERENCES `pack`(`id`) ON UPDATE no action ON DELETE set null,
-	`is_public` integer,
-	`activity` text DEFAULT 'trip',
-	`bounds` text,
-	`type` text DEFAULT 'trip',
-	`scores` text DEFAULT '{"totalScore":0}',
-	`created_at` text DEFAULT CURRENT_TIMESTAMP,
-	`updated_at` text DEFAULT CURRENT_TIMESTAMP
-);
-
-INSERT INTO trip_new
-SELECT * FROM trip;
-
-DROP TABLE trip;
-
-ALTER TABLE trip_new RENAME TO trip;
-
-ALTER TABLE trip ADD `trails` text;
+*/
\ No newline at end of file
diff --git a/server/migrations-preview/meta/0003_snapshot.json b/server/migrations-preview/meta/0003_snapshot.json
index 62bd9fc5e..ee7e87620 100644
--- a/server/migrations-preview/meta/0003_snapshot.json
+++ b/server/migrations-preview/meta/0003_snapshot.json
@@ -1020,13 +1020,6 @@
           "notNull": false,
           "autoincrement": false
         },
-        "trails": {
-          "name": "trails",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": false,
-          "autoincrement": false
-        },
         "start_date": {
           "name": "start_date",
           "type": "text",
diff --git a/server/migrations-preview/meta/_journal.json b/server/migrations-preview/meta/_journal.json
index cd2aeb5ca..5c71d7cf0 100644
--- a/server/migrations-preview/meta/_journal.json
+++ b/server/migrations-preview/meta/_journal.json
@@ -29,6 +29,13 @@
       "when": 1734381220155,
       "tag": "0003_condemned_sugar_man",
       "breakpoints": true
+    },
+    {
+      "idx": 4,
+      "version": "5",
+      "when": 1734574623429,
+      "tag": "0004_the_human_professor",
+      "breakpoints": true
     }
   ]
 }
\ No newline at end of file

From 6b673f2040e0ac1015ef34fa4fc404c185601b5f Mon Sep 17 00:00:00 2001
From: Tadjaur <tadjaur@tas-groups.com>
Date: Thu, 19 Dec 2024 03:24:15 +0100
Subject: [PATCH 62/66] generate a new migration in preview environment

---
 .../0004_the_human_professor.sql              |   36 +
 .../meta/0004_snapshot.json                   | 1541 +++++++++++++++++
 2 files changed, 1577 insertions(+)
 create mode 100644 server/migrations-preview/0004_the_human_professor.sql
 create mode 100644 server/migrations-preview/meta/0004_snapshot.json

diff --git a/server/migrations-preview/0004_the_human_professor.sql b/server/migrations-preview/0004_the_human_professor.sql
new file mode 100644
index 000000000..4af73cd8e
--- /dev/null
+++ b/server/migrations-preview/0004_the_human_professor.sql
@@ -0,0 +1,36 @@
+/*
+ SQLite does not support "Drop not null from column" out of the box, we do not generate automatic migration for that, so it has to be done manually
+ Please refer to: https://www.techonthenet.com/sqlite/tables/alter_table.php
+                  https://www.sqlite.org/lang_altertable.html
+                  https://stackoverflow.com/questions/2083543/modify-a-columns-type-in-sqlite3
+
+ Due to that we don't generate migration automatically and it has to be done manually
+*/
+/* MANUAL MIGRATION */
+CREATE TABLE `trip_new` (
+	`id` text PRIMARY KEY NOT NULL,
+	`name` text NOT NULL,
+	`description` text,
+	`parks` text,
+	`start_date` text NOT NULL,
+	`end_date` text NOT NULL,
+	`destination` text NOT NULL,
+	`owner_id` text REFERENCES `user`(`id`) ON UPDATE no action ON DELETE cascade,
+	`packs_id` text REFERENCES `pack`(`id`) ON UPDATE no action ON DELETE set null,
+	`is_public` integer,
+	`activity` text DEFAULT 'trip',
+	`bounds` text,
+	`type` text DEFAULT 'trip',
+	`scores` text DEFAULT '{"totalScore":0}',
+	`created_at` text DEFAULT CURRENT_TIMESTAMP,
+	`updated_at` text DEFAULT CURRENT_TIMESTAMP
+);
+
+INSERT INTO trip_new
+SELECT * FROM trip;
+
+DROP TABLE trip;
+
+ALTER TABLE trip_new RENAME TO trip;
+
+ALTER TABLE trip ADD `trails` text;
diff --git a/server/migrations-preview/meta/0004_snapshot.json b/server/migrations-preview/meta/0004_snapshot.json
new file mode 100644
index 000000000..85c096ef2
--- /dev/null
+++ b/server/migrations-preview/meta/0004_snapshot.json
@@ -0,0 +1,1541 @@
+{
+  "version": "5",
+  "dialect": "sqlite",
+  "id": "c4a8c051-ddf5-46c8-b28a-4b6b21a2fc6d",
+  "prevId": "463f2375-e852-4541-937a-f1a08337bffa",
+  "tables": {
+    "conversation": {
+      "name": "conversation",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "itemTypeId": {
+          "name": "itemTypeId",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "history": {
+          "name": "history",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "geojson": {
+      "name": "geojson",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "geoJSON": {
+          "name": "geoJSON",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "item": {
+      "name": "item",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "weight": {
+          "name": "weight",
+          "type": "real",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "unit": {
+          "name": "unit",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "category_id": {
+          "name": "category_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "owner_id": {
+          "name": "owner_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "global": {
+          "name": "global",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": false
+        },
+        "sku": {
+          "name": "sku",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "product_url": {
+          "name": "product_url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "description": {
+          "name": "description",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "product_details": {
+          "name": "product_details",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "seller": {
+          "name": "seller",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "item_category_id_item_category_id_fk": {
+          "name": "item_category_id_item_category_id_fk",
+          "tableFrom": "item",
+          "tableTo": "item_category",
+          "columnsFrom": [
+            "category_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        },
+        "item_owner_id_user_id_fk": {
+          "name": "item_owner_id_user_id_fk",
+          "tableFrom": "item",
+          "tableTo": "user",
+          "columnsFrom": [
+            "owner_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "item_category": {
+      "name": "item_category",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "item_image": {
+      "name": "item_image",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "item_id": {
+          "name": "item_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "url": {
+          "name": "url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "item_image_item_id_item_id_fk": {
+          "name": "item_image_item_id_item_id_fk",
+          "tableFrom": "item_image",
+          "tableTo": "item",
+          "columnsFrom": [
+            "item_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "item_owners": {
+      "name": "item_owners",
+      "columns": {
+        "item_id": {
+          "name": "item_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "owner_id": {
+          "name": "owner_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "item_owners_item_id_item_id_fk": {
+          "name": "item_owners_item_id_item_id_fk",
+          "tableFrom": "item_owners",
+          "tableTo": "item",
+          "columnsFrom": [
+            "item_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "item_owners_owner_id_user_id_fk": {
+          "name": "item_owners_owner_id_user_id_fk",
+          "tableFrom": "item_owners",
+          "tableTo": "user",
+          "columnsFrom": [
+            "owner_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "id": {
+          "columns": [
+            "item_id",
+            "owner_id"
+          ],
+          "name": "id"
+        }
+      },
+      "uniqueConstraints": {}
+    },
+    "item_pack_templates": {
+      "name": "item_pack_templates",
+      "columns": {
+        "item_id": {
+          "name": "item_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "pack_template_id": {
+          "name": "pack_template_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "quantity": {
+          "name": "quantity",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": 1
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "item_pack_templates_item_id_item_id_fk": {
+          "name": "item_pack_templates_item_id_item_id_fk",
+          "tableFrom": "item_pack_templates",
+          "tableTo": "item",
+          "columnsFrom": [
+            "item_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "item_pack_templates_pack_template_id_pack_template_id_fk": {
+          "name": "item_pack_templates_pack_template_id_pack_template_id_fk",
+          "tableFrom": "item_pack_templates",
+          "tableTo": "pack_template",
+          "columnsFrom": [
+            "pack_template_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "id": {
+          "columns": [
+            "item_id",
+            "pack_template_id"
+          ],
+          "name": "id"
+        }
+      },
+      "uniqueConstraints": {}
+    },
+    "item_packs": {
+      "name": "item_packs",
+      "columns": {
+        "item_id": {
+          "name": "item_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "pack_id": {
+          "name": "pack_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "quantity": {
+          "name": "quantity",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": 1
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "item_packs_item_id_item_id_fk": {
+          "name": "item_packs_item_id_item_id_fk",
+          "tableFrom": "item_packs",
+          "tableTo": "item",
+          "columnsFrom": [
+            "item_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "item_packs_pack_id_pack_id_fk": {
+          "name": "item_packs_pack_id_pack_id_fk",
+          "tableFrom": "item_packs",
+          "tableTo": "pack",
+          "columnsFrom": [
+            "pack_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "id": {
+          "columns": [
+            "item_id",
+            "pack_id"
+          ],
+          "name": "id"
+        }
+      },
+      "uniqueConstraints": {}
+    },
+    "node": {
+      "name": "node",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "osm_id": {
+          "name": "osm_id",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "lat": {
+          "name": "lat",
+          "type": "real",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "lon": {
+          "name": "lon",
+          "type": "real",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "tags": {
+          "name": "tags",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "offlineMap": {
+      "name": "offlineMap",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "bounds": {
+          "name": "bounds",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "minZoom": {
+          "name": "minZoom",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "maxZoom": {
+          "name": "maxZoom",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "metadata": {
+          "name": "metadata",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "owner_id": {
+          "name": "owner_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP"
+        }
+      },
+      "indexes": {
+        "offlineMap_name_owner_id_unique": {
+          "name": "offlineMap_name_owner_id_unique",
+          "columns": [
+            "name",
+            "owner_id"
+          ],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {
+        "offlineMap_owner_id_user_id_fk": {
+          "name": "offlineMap_owner_id_user_id_fk",
+          "tableFrom": "offlineMap",
+          "tableTo": "user",
+          "columnsFrom": [
+            "owner_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "pack": {
+      "name": "pack",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "owner_id": {
+          "name": "owner_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "is_public": {
+          "name": "is_public",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": false
+        },
+        "grades": {
+          "name": "grades",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "'{\"weight\":\"\",\"essentialItems\":\"\",\"redundancyAndVersatility\":\"\"}'"
+        },
+        "scores": {
+          "name": "scores",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "'{\"weightScore\":0,\"essentialItemsScore\":0,\"redundancyAndVersatilityScore\":0}'"
+        },
+        "type": {
+          "name": "type",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "'pack'"
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "pack_owner_id_user_id_fk": {
+          "name": "pack_owner_id_user_id_fk",
+          "tableFrom": "pack",
+          "tableTo": "user",
+          "columnsFrom": [
+            "owner_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "pack_template": {
+      "name": "pack_template",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "description": {
+          "name": "description",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "type": {
+          "name": "type",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "'packTemplate'"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "refresh_tokens": {
+      "name": "refresh_tokens",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "token": {
+          "name": "token",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "refresh_tokens_user_id_user_id_fk": {
+          "name": "refresh_tokens_user_id_user_id_fk",
+          "tableFrom": "refresh_tokens",
+          "tableTo": "user",
+          "columnsFrom": [
+            "user_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "relation": {
+      "name": "relation",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "osm_id": {
+          "name": "osm_id",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "osm_type": {
+          "name": "osm_type",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "'relation'"
+        },
+        "tags": {
+          "name": "tags",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "members": {
+          "name": "members",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "geo_json": {
+          "name": "geo_json",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "template": {
+      "name": "template",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "type": {
+          "name": "type",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'pack'"
+        },
+        "template_id": {
+          "name": "template_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "is_global_template": {
+          "name": "is_global_template",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": false
+        },
+        "created_by": {
+          "name": "created_by",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "template_created_by_user_id_fk": {
+          "name": "template_created_by_user_id_fk",
+          "tableFrom": "template",
+          "tableTo": "user",
+          "columnsFrom": [
+            "created_by"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "trip": {
+      "name": "trip",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "description": {
+          "name": "description",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "parks": {
+          "name": "parks",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "trails": {
+          "name": "trails",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "start_date": {
+          "name": "start_date",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "end_date": {
+          "name": "end_date",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "destination": {
+          "name": "destination",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "owner_id": {
+          "name": "owner_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "packs_id": {
+          "name": "packs_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "is_public": {
+          "name": "is_public",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "activity": {
+          "name": "activity",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "'trip'"
+        },
+        "bounds": {
+          "name": "bounds",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "type": {
+          "name": "type",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "'trip'"
+        },
+        "scores": {
+          "name": "scores",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "'{\"totalScore\":0}'"
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "trip_owner_id_user_id_fk": {
+          "name": "trip_owner_id_user_id_fk",
+          "tableFrom": "trip",
+          "tableTo": "user",
+          "columnsFrom": [
+            "owner_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "trip_packs_id_pack_id_fk": {
+          "name": "trip_packs_id_pack_id_fk",
+          "tableFrom": "trip",
+          "tableTo": "pack",
+          "columnsFrom": [
+            "packs_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "trip_geojsons": {
+      "name": "trip_geojsons",
+      "columns": {
+        "trip_id": {
+          "name": "trip_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "geojson_id": {
+          "name": "geojson_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "trip_geojsons_trip_id_trip_id_fk": {
+          "name": "trip_geojsons_trip_id_trip_id_fk",
+          "tableFrom": "trip_geojsons",
+          "tableTo": "trip",
+          "columnsFrom": [
+            "trip_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        },
+        "trip_geojsons_geojson_id_geojson_id_fk": {
+          "name": "trip_geojsons_geojson_id_geojson_id_fk",
+          "tableFrom": "trip_geojsons",
+          "tableTo": "geojson",
+          "columnsFrom": [
+            "geojson_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "id": {
+          "columns": [
+            "geojson_id",
+            "trip_id"
+          ],
+          "name": "id"
+        }
+      },
+      "uniqueConstraints": {}
+    },
+    "user": {
+      "name": "user",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "password": {
+          "name": "password",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "email": {
+          "name": "email",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "google_id": {
+          "name": "google_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "code": {
+          "name": "code",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "is_certified_guide": {
+          "name": "is_certified_guide",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "password_reset_token": {
+          "name": "password_reset_token",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "password_reset_token_expiration": {
+          "name": "password_reset_token_expiration",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "offline_maps": {
+          "name": "offline_maps",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "role": {
+          "name": "role",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "'user'"
+        },
+        "username": {
+          "name": "username",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "profile_image": {
+          "name": "profile_image",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "preferred_weather": {
+          "name": "preferred_weather",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "'celsius'"
+        },
+        "preferred_weight": {
+          "name": "preferred_weight",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "'lb'"
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP"
+        }
+      },
+      "indexes": {
+        "user_email_unique": {
+          "name": "user_email_unique",
+          "columns": [
+            "email"
+          ],
+          "isUnique": true
+        },
+        "user_username_unique": {
+          "name": "user_username_unique",
+          "columns": [
+            "username"
+          ],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "user_favorite_packs": {
+      "name": "user_favorite_packs",
+      "columns": {
+        "user_id": {
+          "name": "user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "pack_id": {
+          "name": "pack_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "user_favorite_packs_user_id_user_id_fk": {
+          "name": "user_favorite_packs_user_id_user_id_fk",
+          "tableFrom": "user_favorite_packs",
+          "tableTo": "user",
+          "columnsFrom": [
+            "user_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "user_favorite_packs_pack_id_pack_id_fk": {
+          "name": "user_favorite_packs_pack_id_pack_id_fk",
+          "tableFrom": "user_favorite_packs",
+          "tableTo": "pack",
+          "columnsFrom": [
+            "pack_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "id": {
+          "columns": [
+            "pack_id",
+            "user_id"
+          ],
+          "name": "id"
+        }
+      },
+      "uniqueConstraints": {}
+    },
+    "way": {
+      "name": "way",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "osm_id": {
+          "name": "osm_id",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "osm_type": {
+          "name": "osm_type",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "tags": {
+          "name": "tags",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "geo_json": {
+          "name": "geo_json",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "way_nodes": {
+      "name": "way_nodes",
+      "columns": {
+        "way_id": {
+          "name": "way_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "node_id": {
+          "name": "node_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "way_nodes_way_id_way_id_fk": {
+          "name": "way_nodes_way_id_way_id_fk",
+          "tableFrom": "way_nodes",
+          "tableTo": "way",
+          "columnsFrom": [
+            "way_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        },
+        "way_nodes_node_id_node_id_fk": {
+          "name": "way_nodes_node_id_node_id_fk",
+          "tableFrom": "way_nodes",
+          "tableTo": "node",
+          "columnsFrom": [
+            "node_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "id": {
+          "columns": [
+            "node_id",
+            "way_id"
+          ],
+          "name": "id"
+        }
+      },
+      "uniqueConstraints": {}
+    }
+  },
+  "enums": {},
+  "_meta": {
+    "schemas": {},
+    "tables": {},
+    "columns": {}
+  }
+}
\ No newline at end of file

From 1a9ffd6ce5c05087db105ea22b3f0e85bb65e718 Mon Sep 17 00:00:00 2001
From: Anmol Verma <anmolverma2810@gmail.com>
Date: Thu, 19 Dec 2024 15:28:27 +0530
Subject: [PATCH 63/66] use popover in fab

---
 packages/app/components/Fab/Fab.tsx       |   1 +
 packages/app/components/Fab/FabNative.tsx | 112 ++++++++++++----------
 packages/app/components/Fab/FabWeb.tsx    |  84 +++++++---------
 3 files changed, 97 insertions(+), 100 deletions(-)

diff --git a/packages/app/components/Fab/Fab.tsx b/packages/app/components/Fab/Fab.tsx
index a395ef06f..91292add7 100644
--- a/packages/app/components/Fab/Fab.tsx
+++ b/packages/app/components/Fab/Fab.tsx
@@ -18,6 +18,7 @@ const FAB = () => {
     <FABWeb
       showQuickActions={showQuickActions}
       toggleQuickActions={toggleQuickActions}
+      closeQuickActions={closeQuickActions}
     />
   ) : (
     <FABNative
diff --git a/packages/app/components/Fab/FabNative.tsx b/packages/app/components/Fab/FabNative.tsx
index 500203c6b..52d87f5ae 100644
--- a/packages/app/components/Fab/FabNative.tsx
+++ b/packages/app/components/Fab/FabNative.tsx
@@ -1,62 +1,68 @@
 import React from 'react';
-import { TouchableOpacity, View } from 'react-native';
+import { Popover, YStack } from 'tamagui';
 import { MaterialIcons } from '@expo/vector-icons';
-import useCustomStyles from 'app/hooks/useCustomStyles';
-import { QuickActionsSection } from '../../modules/dashboard';
+import { useQuickActions } from 'app/modules/dashboard';
+import useTheme from 'app/hooks/useTheme';
+import { QuickActionButton } from 'app/modules/dashboard/components/QuickActionButton/QuickActionButton';
+import { RButton } from '@packrat/ui';
 
-const FABNative = ({
-  showQuickActions,
-  toggleQuickActions,
-  closeQuickActions,
-}) => {
-  const styles = useCustomStyles(loadStyles);
+const FABNative = () => {
+  const { handleActionSelect, quickActionData } = useQuickActions();
+  const { currentTheme } = useTheme();
 
   return (
-    <>
-      {showQuickActions && (
-        <View style={styles.quickActionsContainer}>
-          <QuickActionsSection closeQuickActions={closeQuickActions} />
-        </View>
-      )}
-      <TouchableOpacity style={styles.fab} onPress={toggleQuickActions}>
-        <MaterialIcons name="add" size={40} style={styles.fabIcon} />
-      </TouchableOpacity>
-    </>
+    <Popover>
+      <Popover.Trigger asChild>
+        <RButton
+          style={{
+            position: 'absolute',
+            width: 55,
+            height: 55,
+            backgroundColor: currentTheme.colors.card,
+            borderRadius: 28,
+            justifyContent: 'center',
+            alignItems: 'center',
+            zIndex: 2,
+            elevation: 2,
+            bottom: 20,
+            alignSelf: 'center',
+          }}
+        >
+          <MaterialIcons
+            name="add"
+            size={20}
+            color={currentTheme.colors.text}
+          />
+        </RButton>
+      </Popover.Trigger>
+      <Popover.Content
+        elevate
+        bordered
+        size="$1"
+        style={{
+          bottom: 158,
+          height: 120,
+          width: 150,
+          borderRadius: 5,
+          justifyContent: 'center',
+          alignItems: 'center',
+          backgroundColor: currentTheme.colors.background,
+        }}
+      >
+        <YStack space="$1">
+          {quickActionData.map((action) => (
+            <QuickActionButton
+              key={action.action}
+              onPress={() => handleActionSelect(action.action)}
+              iconName={action.iconName}
+              text={action.text}
+            />
+          ))}
+        </YStack>
+        <Popover.Arrow />
+      </Popover.Content>
+    </Popover>
   );
 };
 
-const loadStyles = (theme) => {
-  const { currentTheme } = theme;
-
-  return {
-    quickActionsContainer: {
-      position: 'absolute',
-      bottom: 70,
-      right: 40,
-      zIndex: 1,
-      height: 54,
-      width: 150,
-      borderRadius: 5,
-      justifyContent: 'center',
-      alignItems: 'center',
-    },
-    fab: {
-      position: 'absolute',
-      width: 55,
-      height: 55,
-      backgroundColor: currentTheme.colors.card,
-      borderRadius: 28,
-      justifyContent: 'center',
-      alignItems: 'center',
-      zIndex: 2,
-      elevation: 2,
-      bottom: 20,
-      alignSelf: 'center',
-    },
-    fabIcon: {
-      color: currentTheme.colors.tertiaryBlue,
-    },
-  };
-};
-
 export default FABNative;
diff --git a/packages/app/components/Fab/FabWeb.tsx b/packages/app/components/Fab/FabWeb.tsx
index 66766fade..9c44f3346 100644
--- a/packages/app/components/Fab/FabWeb.tsx
+++ b/packages/app/components/Fab/FabWeb.tsx
@@ -1,56 +1,46 @@
 import React from 'react';
-import { TouchableOpacity, View } from 'react-native';
+import { Popover, Button, YStack, Text } from 'tamagui';
+import { useQuickActions } from 'app/modules/dashboard';
+import { QuickActionButton } from 'app/modules/dashboard/components/QuickActionButton/QuickActionButton';
+import { RButton, RText } from '@packrat/ui';
 import { MaterialIcons } from '@expo/vector-icons';
-import { RText } from '@packrat/ui';
-import useCustomStyles from 'app/hooks/useCustomStyles';
-import { QuickActionsSection } from 'app//modules/dashboard';
+import useTheme from 'app/hooks/useTheme';
 
-const FABWeb = ({ showQuickActions, toggleQuickActions }) => {
-  const styles = useCustomStyles(loadStyles);
+const FABWeb = () => {
+  const { handleActionSelect, quickActionData } = useQuickActions();
+  const { currentTheme } = useTheme();
 
   return (
-    <>
-      {showQuickActions && (
-        <View style={styles.quickActionsContainer}>
-          <QuickActionsSection />
-        </View>
-      )}
-      <TouchableOpacity style={styles.fab} onPress={toggleQuickActions}>
-        <MaterialIcons name="add" size={30} style={styles.fabIcon} />
-        <RText style={styles.fabText}>Create</RText>
-      </TouchableOpacity>
-    </>
+    <Popover>
+      <Popover.Trigger asChild>
+        <RButton
+          style={{
+            flexDirection: 'row',
+            backgroundColor: currentTheme.colors.card,
+            margin: 20,
+            justifyContent: 'center',
+            alignItems: 'center',
+          }}
+        >
+          <MaterialIcons name="add" size={20} />
+          <RText style={{ fontWeight: 'bold', fontSize: 18 }}>Create</RText>
+        </RButton>
+      </Popover.Trigger>
+      <Popover.Content elevate bordered size="$2">
+        <YStack space="$3">
+          {quickActionData.map((action) => (
+            <QuickActionButton
+              key={action.action}
+              onPress={() => handleActionSelect(action.action)}
+              iconName={action.iconName}
+              text={action.text}
+            />
+          ))}
+        </YStack>
+        <Popover.Arrow />
+      </Popover.Content>
+    </Popover>
   );
 };
 
-const loadStyles = (theme) => {
-  const { currentTheme } = theme;
-
-  return {
-    quickActionsContainer: {
-      position: 'absolute',
-      top: 50,
-      left: 10,
-      zIndex: 1,
-      height: 54,
-      width: 150,
-      borderRadius: 5,
-    },
-    fab: {
-      flexDirection: 'row',
-      width: 100,
-      backgroundColor: currentTheme.colors.card,
-      borderRadius: 9,
-      justifyContent: 'center',
-      alignItems: 'center',
-      alignSelf: 'stretch',
-      zIndex: 2,
-    },
-    fabText: {
-      fontSize: 17,
-      fontWeight: 'bold',
-    },
-  };
-};
-
 export default FABWeb;

From 8bb2fd7eaaa6e5c6db52539e23f719d95fa48cf4 Mon Sep 17 00:00:00 2001
From: Anmol Verma <anmolverma2810@gmail.com>
Date: Thu, 19 Dec 2024 18:36:10 +0530
Subject: [PATCH 64/66] layout changes

---
 .../item/components/ItemDetailsSection.tsx    | 12 ++--
 .../item/screens/ItemDetailsScreen.tsx        | 60 ++++++++++---------
 2 files changed, 39 insertions(+), 33 deletions(-)

diff --git a/packages/app/modules/item/components/ItemDetailsSection.tsx b/packages/app/modules/item/components/ItemDetailsSection.tsx
index 7c8bdf6a9..8a1c3fffb 100644
--- a/packages/app/modules/item/components/ItemDetailsSection.tsx
+++ b/packages/app/modules/item/components/ItemDetailsSection.tsx
@@ -31,7 +31,7 @@ export function ItemDetailsSection({
   isProductScreen?: boolean;
 }) {
   const styles = useCustomStyles(loadStyles);
-  const { gtSm } = useResponsive();
+  const { sm } = useResponsive();
   const { overlayProps, onTriggerOpen } = useItemPackPicker();
   const productDetails = useMemo(
     () => parseProductDetails(itemData.productDetails),
@@ -44,7 +44,7 @@ export function ItemDetailsSection({
         style={[
           styles.contentContainer,
           isProductScreen
-            ? { flexDirection: gtSm ? 'row' : 'column', gap: 10 }
+            ? { flexDirection: sm ? 'column' : 'row', gap: 10 }
             : undefined,
         ]}
       >
@@ -57,7 +57,6 @@ export function ItemDetailsSection({
           </RButton>
           <ImageGallery images={itemData.images?.map(({ url }) => url) || []} />
         </View>
-
         <RStack style={styles.detailsContainer}>
           <ItemDetailsContent
             itemData={{
@@ -100,7 +99,7 @@ const parseProductDetails = (details?: string) => {
 
 const loadStyles = (theme: any) => {
   const { currentTheme } = useTheme();
-  const { xxs } = useResponsive();
+  const { sm } = useResponsive();
 
   return {
     container: {
@@ -109,11 +108,12 @@ const loadStyles = (theme: any) => {
       backgroundColor: currentTheme.colors.background,
     },
     contentContainer: {
-      flexDirection: xxs ? 'column' : 'row',
+      alignItems: 'stretch',
     },
     imageContainer: {
       flex: 1,
-      height: 400,
+      minHeight: 400,
+      width: sm ? '100%' : '50%',
       backgroundColor: currentTheme.colors.border,
       justifyContent: 'center',
       alignItems: 'center',
diff --git a/packages/app/modules/item/screens/ItemDetailsScreen.tsx b/packages/app/modules/item/screens/ItemDetailsScreen.tsx
index 63c629af6..7fe2c31af 100644
--- a/packages/app/modules/item/screens/ItemDetailsScreen.tsx
+++ b/packages/app/modules/item/screens/ItemDetailsScreen.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { RScrollView, RStack, RH3, RText } from '@packrat/ui';
+import { RStack, RH3, RText } from '@packrat/ui';
 import { useItem, useItemId } from 'app/modules/item';
 import { ItemDetailsSection } from '../components/ItemDetailsSection';
 import useTheme from 'app/hooks/useTheme';
@@ -19,40 +19,46 @@ export function ItemDetailsScreen() {
   const styles = useCustomStyles(loadStyles);
   const router = useRouter();
 
+  const { sm } = useResponsive();
+
   if (isLoading) {
     return null;
   }
 
   return (
     <Layout>
-      <RStack style={{ padding: 10, width: '100%', paddingBottom: 50 }}>
-        <RStack style={styles.breadcrumbContainer}>
-          {Platform.OS === 'web' ? (
-            <RLink to="/products">
-              <RText style={styles.breadcrumbLink}>Products</RText>
-            </RLink>
-          ) : (
-            <TouchableOpacity onPress={() => router.push('/products')}>
-              <RText style={styles.breadcrumbLink}>Products</RText>
-            </TouchableOpacity>
-          )}
+      <RStack style={styles.breadcrumbContainer}>
+        {Platform.OS === 'web' ? (
+          <RLink to="/products">
+            <RText style={styles.breadcrumbLink}>Products</RText>
+          </RLink>
+        ) : (
+          <TouchableOpacity onPress={() => router.push('/products')}>
+            <RText style={styles.breadcrumbLink}>Products</RText>
+          </TouchableOpacity>
+        )}
 
-          <RText style={styles.breadcrumbSeparator}>/</RText>
+        <RText style={styles.breadcrumbSeparator}>/</RText>
 
-          {Platform.OS === 'web' ? (
-            <RLink to={`/products`}>
-              <RText style={styles.breadcrumbLink}>
-                {item?.category?.name}
-              </RText>
-            </RLink>
-          ) : (
-            <TouchableOpacity onPress={() => router.push('/products')}>
-              <RText style={styles.breadcrumbLink}>
-                {item?.category?.name}
-              </RText>
-            </TouchableOpacity>
-          )}
-        </RStack>
+        {Platform.OS === 'web' ? (
+          <RLink to={`/products`}>
+            <RText style={styles.breadcrumbLink}>{item?.category?.name}</RText>
+          </RLink>
+        ) : (
+          <TouchableOpacity onPress={() => router.push('/products')}>
+            <RText style={styles.breadcrumbLink}>{item?.category?.name}</RText>
+          </TouchableOpacity>
+        )}
+      </RStack>
+      <RStack
+        style={{
+          padding: 10,
+          width: '100%',
+          paddingBottom: 50,
+          flexDirection: sm ? 'column' : 'row',
+          gap: 20,
+        }}
+      >
         <ItemDetailsSection itemData={item as any} isProductScreen={true} />
       </RStack>
       <LargeCard

From 793301a717232f6b66eb8ddb32b9ee112abc3a52 Mon Sep 17 00:00:00 2001
From: Taron <taron.aleksanyan.20@gmail.com>
Date: Thu, 19 Dec 2024 23:42:45 +0400
Subject: [PATCH 65/66] trip screen fixes

---
 .../app/components/RSecondaryButton/index.tsx |  4 +-
 packages/app/components/trip/TripForm.tsx     | 21 +++++---
 packages/app/screens/trip/TripScreen.tsx      | 50 +++++++++++++------
 .../tripRoutesValidator.ts                    |  9 +++-
 4 files changed, 62 insertions(+), 22 deletions(-)

diff --git a/packages/app/components/RSecondaryButton/index.tsx b/packages/app/components/RSecondaryButton/index.tsx
index d94ba3390..39ed2644a 100644
--- a/packages/app/components/RSecondaryButton/index.tsx
+++ b/packages/app/components/RSecondaryButton/index.tsx
@@ -4,6 +4,7 @@ import useTheme from 'app/hooks/useTheme';
 
 interface RSecondaryButtonProps extends ButtonProps {
   label: string;
+  danger?: boolean;
 }
 
 const StyledSecondaryButton = styled(Button, {
@@ -49,13 +50,14 @@ const RSecondaryButton: React.FC<RSecondaryButtonProps> = ({
   label,
   disabled,
   size,
+  danger,
   ...props
 }) => {
   const { currentTheme } = useTheme();
 
   const dynamicStyle = {
     backgroundColor: currentTheme.colors.background,
-    color: currentTheme.colors.text,
+    color: danger ? 'red' : currentTheme.colors.text,
   };
 
   return (
diff --git a/packages/app/components/trip/TripForm.tsx b/packages/app/components/trip/TripForm.tsx
index 2d0cd16ca..39bd74862 100644
--- a/packages/app/components/trip/TripForm.tsx
+++ b/packages/app/components/trip/TripForm.tsx
@@ -5,7 +5,7 @@ import {
   FormSelect as OriginalFormSelect,
   YStack,
   SubmitButton,
-  FormSwitch,
+  FormSwitch as OriginalSwitch,
 } from '@packrat/ui';
 import { useRouter } from 'app/hooks/router';
 import { useAddTrip, useEditTrips } from 'app/hooks/trips';
@@ -18,12 +18,13 @@ import { type addTripKey } from 'app/screens/trip/createTripStore/store';
 
 const Form: any = OriginalForm;
 const FormSelect: any = OriginalFormSelect;
+const FormSwitch: any = OriginalSwitch;
 
 interface TripFormProps {
   tripStore: any;
   dateRange: any;
+  isDisabled: boolean;
   setDateRange: (range: any) => void;
-  isValid: boolean;
   initialState?: Partial<Record<addTripKey, any>>;
   tripId?: string;
 }
@@ -32,12 +33,12 @@ export const TripForm = ({
   tripStore,
   dateRange,
   setDateRange,
-  isValid,
   initialState,
   tripId,
+  isDisabled,
 }: TripFormProps) => {
   const { addTrip, isSuccess, data: response } = useAddTrip();
-  const { editTrips } = useEditTrips();
+  const { editTrips, isLoading: isSaving } = useEditTrips();
   const router = useRouter();
 
   const handleCreateTrip = async (values) => {
@@ -65,7 +66,12 @@ export const TripForm = ({
     >
       <YStack style={{ gap: 16 }}>
         <FormInput placeholder="Trip Name" name="name" />
-        <FormInput placeholder="Trip Description" name="description" />
+        <FormInput
+          multiline
+          rows={3}
+          placeholder="Trip Description"
+          name="description"
+        />
         <TripDateRangeCard dateRange={dateRange} setDateRange={setDateRange} />
         <FormSelect
           options={ActivityOptions}
@@ -75,7 +81,10 @@ export const TripForm = ({
           name="activity"
         />
         <FormSwitch labelLeft="Visible For Everyone" name="is_public" />
-        <SubmitButton disabled={!isValid} onSubmit={handleCreateTrip}>
+        <SubmitButton
+          disabled={isDisabled || isSaving}
+          onSubmit={handleCreateTrip}
+        >
           Save Trip
         </SubmitButton>
       </YStack>
diff --git a/packages/app/screens/trip/TripScreen.tsx b/packages/app/screens/trip/TripScreen.tsx
index 267aa6d88..bccc524a1 100644
--- a/packages/app/screens/trip/TripScreen.tsx
+++ b/packages/app/screens/trip/TripScreen.tsx
@@ -19,6 +19,8 @@ import { MapPin, MapPinned } from '@tamagui/lucide-icons';
 import { type addTripKey } from './createTripStore/store';
 import { useAuthUser } from 'app/modules/auth';
 import { TripInfo } from './TripInfo';
+import { MaterialIcons } from '@expo/vector-icons';
+import { useDeleteTrips } from 'app/hooks/trips';
 
 const SECTIONS = {
   MAP: 'MAP',
@@ -42,10 +44,12 @@ export function TripScreen({
 }) {
   const placesAutoCompleteRef = useRef({});
   const [isChangePlaceMode, setIsChangePlaceMode] = useState(false);
+  const [isBoundsChangeInProgress, setIsBoundsChangeInProgress] =
+    useState(false);
   const { gtSm } = useResponsive();
   const authUser = useAuthUser();
   const hasPermissionToEdit = ownerId === authUser?.id;
-  const isViewOnlyMode = !hasPermissionToEdit && tripId;
+  const isViewOnlyMode = !hasPermissionToEdit && !!tripId;
 
   const {
     currentDestination,
@@ -68,6 +72,7 @@ export function TripScreen({
         initialBounds={initialBounds}
         onVisibleBoundsChange={(bounds) => {
           setTripValue('bounds', bounds);
+          setIsBoundsChangeInProgress(false);
         }}
       />
     ),
@@ -96,7 +101,10 @@ export function TripScreen({
           searchRef={placesAutoCompleteRef}
           isChangePlaceMode={isChangePlaceMode}
           onGoBack={() => setIsChangePlaceMode(false)}
-          onLocationSelect={() => setIsChangePlaceMode(false)}
+          onLocationSelect={() => {
+            setIsChangePlaceMode(false);
+            setIsBoundsChangeInProgress(true);
+          }}
         />
       )}
       {latLng || tripId ? (
@@ -114,13 +122,16 @@ export function TripScreen({
               {isViewOnlyMode ? 'Trip Details' : 'Plan Your Trip'}
             </RText>
             {!isViewOnlyMode && (
-              <RSecondaryButton
-                icon={<MapPin />}
-                size={36}
-                borderWidth={2}
-                onPress={() => setIsChangePlaceMode(true)}
-                label="Change Direction"
-              />
+              <XStack gap={8}>
+                <RSecondaryButton
+                  icon={<MapPin />}
+                  size={36}
+                  borderWidth={2}
+                  onPress={() => setIsChangePlaceMode(true)}
+                  label="Change Direction"
+                />
+                {tripId && <DeleteTripButton tripId={tripId} />}
+              </XStack>
             )}
           </XStack>
           <RStack style={{ flexDirection: gtSm ? 'row' : 'column', gap: 16 }}>
@@ -141,7 +152,7 @@ export function TripScreen({
               >
                 <TripForm
                   tripId={tripId}
-                  isValid={isValid}
+                  isDisabled={isBoundsChangeInProgress || !isValid}
                   dateRange={dateRange}
                   initialState={initialState}
                   setDateRange={setDateRange}
@@ -149,10 +160,7 @@ export function TripScreen({
                 />
               </LayoutCard>
             ) : (
-              <TripInfo
-                tripInfo={initialState}
-                startDate={tripStore.start_date}
-              />
+              <TripInfo tripInfo={initialState} />
             )}
           </RStack>
         </YStack>
@@ -160,3 +168,17 @@ export function TripScreen({
     </Layout>
   );
 }
+
+const DeleteTripButton = ({ tripId }: { tripId: string }) => {
+  const { handleDeleteTrip } = useDeleteTrips(tripId);
+  return (
+    <RSecondaryButton
+      icon={<MaterialIcons name="delete" size={20} />}
+      size={36}
+      borderWidth={2}
+      danger
+      onPress={handleDeleteTrip}
+      label="Delete Trip"
+    />
+  );
+};
diff --git a/packages/validations/src/validations/tripRoutesValidator/tripRoutesValidator.ts b/packages/validations/src/validations/tripRoutesValidator/tripRoutesValidator.ts
index 079ccfd68..8644a6239 100644
--- a/packages/validations/src/validations/tripRoutesValidator/tripRoutesValidator.ts
+++ b/packages/validations/src/validations/tripRoutesValidator/tripRoutesValidator.ts
@@ -5,7 +5,14 @@ const tripActivityValues = Object.values(TripActivity) as [string, ...string[]];
 
 export const tripForm = z.object({
   name: z.string().min(3).max(40),
-  description: z.string().min(50).max(200).optional().nullable(),
+  description: z
+    .string()
+    .transform((val) => {
+      return val === '' ? undefined : val;
+    })
+    .pipe(z.string().min(20).max(200).nullable().optional())
+    .optional()
+    .nullable(),
   activity: z.enum(tripActivityValues).optional(),
   is_public: z.boolean().optional(),
 });

From 92fc6dd967c5baf2d5994db3391cc5fc73aa7e37 Mon Sep 17 00:00:00 2001
From: Taron <taron.aleksanyan.20@gmail.com>
Date: Fri, 20 Dec 2024 00:28:15 +0400
Subject: [PATCH 66/66] fix pack title ui

---
 packages/app/components/card/CustomCard.tsx   |  1 +
 .../app/components/card/CustomCardHeader.tsx  | 80 ++++++++++---------
 .../card/PackCardHeader/PackCardHeader.tsx    | 19 +----
 3 files changed, 46 insertions(+), 54 deletions(-)

diff --git a/packages/app/components/card/CustomCard.tsx b/packages/app/components/card/CustomCard.tsx
index a44fbf5f1..451ddff02 100644
--- a/packages/app/components/card/CustomCard.tsx
+++ b/packages/app/components/card/CustomCard.tsx
@@ -67,6 +67,7 @@ export const CustomCard = ({
             padding: 15,
             paddingBottom: isWeb ? 0 : 10,
             flexDirection: 'row',
+            flexWrap: 'wrap',
             justifyContent: 'space-between',
             alignItems: 'center',
             gap: 16,
diff --git a/packages/app/components/card/CustomCardHeader.tsx b/packages/app/components/card/CustomCardHeader.tsx
index 7968ffd66..53d935bcb 100644
--- a/packages/app/components/card/CustomCardHeader.tsx
+++ b/packages/app/components/card/CustomCardHeader.tsx
@@ -36,47 +36,49 @@ export const CustomCardHeader = ({
 
   return (
     <>
-      <RStack style={{ flex: 1 }}>
+      <RStack style={{ flexDirection: 'row', alignItems: 'center', gap: 16 }}>
         {typeof title === 'string' ? <RText>{title}</RText> : title}
       </RStack>
-      {data.type != 'packTemplate' && (
-        <ConnectionGate mode="connected">
-          <View>
-            <RLink
-              href={`/profile/${ownerId}`}
-              style={{ textDecoration: 'none' }}
-            >
-              <RText>
-                {user?.id === ownerId
-                  ? 'Your Profile'
-                  : `View ${
-                      data.owners && data.owners?.length
-                        ? data.owners[0]?.name
-                        : 'Profile'
-                    }`}
-              </RText>
-            </RLink>
-          </View>
-          {user?.id !== ownerId && COPY_TYPES.includes(data.type) && (
-            <RButton
-              onPress={() => {
-                setIsCopyPackModalOpen(true);
-              }}
-              style={{ backgroundColor: 'transparent' }}
-            >
-              <RText style={{ color: 'black' }}>Copy Pack</RText>
-            </RButton>
-          )}
-        </ConnectionGate>
-      )}
-      {actionsComponent}
-      <CopyPackModal
-        currentPack={data}
-        isOpen={isCopyPackModalOpen}
-        onClose={() => {
-          setIsCopyPackModalOpen(false);
-        }}
-      />
+      <RStack style={{ flexDirection: 'row', alignItems: 'center', gap: 16 }}>
+        {data.type != 'packTemplate' && (
+          <ConnectionGate mode="connected">
+            <View>
+              <RLink
+                href={`/profile/${ownerId}`}
+                style={{ textDecoration: 'none' }}
+              >
+                <RText>
+                  {user?.id === ownerId
+                    ? 'Your Profile'
+                    : `View ${
+                        data.owners && data.owners?.length
+                          ? data.owners[0]?.name
+                          : 'Profile'
+                      }`}
+                </RText>
+              </RLink>
+            </View>
+            {user?.id !== ownerId && COPY_TYPES.includes(data.type) && (
+              <RButton
+                onPress={() => {
+                  setIsCopyPackModalOpen(true);
+                }}
+                style={{ backgroundColor: 'transparent' }}
+              >
+                <RText style={{ color: 'black' }}>Copy Pack</RText>
+              </RButton>
+            )}
+          </ConnectionGate>
+        )}
+        {actionsComponent}
+        <CopyPackModal
+          currentPack={data}
+          isOpen={isCopyPackModalOpen}
+          onClose={() => {
+            setIsCopyPackModalOpen(false);
+          }}
+        />
+      </RStack>
     </>
   );
 };
diff --git a/packages/app/components/card/PackCardHeader/PackCardHeader.tsx b/packages/app/components/card/PackCardHeader/PackCardHeader.tsx
index f3e3cb411..a7ad04dd0 100644
--- a/packages/app/components/card/PackCardHeader/PackCardHeader.tsx
+++ b/packages/app/components/card/PackCardHeader/PackCardHeader.tsx
@@ -3,7 +3,7 @@ import useTheme from 'app/hooks/useTheme';
 import { CustomCardHeader } from '../CustomCardHeader';
 import { AntDesign, MaterialIcons } from '@expo/vector-icons';
 import { useAuthUser } from 'app/modules/auth';
-import { ActionsDropdownComponent } from '@packrat/ui';
+import { ActionsDropdownComponent, RText } from '@packrat/ui';
 import { EditableText } from '@packrat/ui/src/EditableText';
 import RStack from '@packrat/ui/src/RStack';
 import RIconButton from '@packrat/ui/src/RIconButton';
@@ -51,13 +51,7 @@ export const PackCardHeader = ({ data, title }: PackCardHeaderProps) => {
         data={data}
         ownerId={data?.owner_id}
         title={
-          <RStack
-            style={{
-              display: 'flex',
-              alignItems: 'center',
-              flexDirection: 'row',
-            }}
-          >
+          <>
             {Platform.OS === 'web' && (
               <RIconButton
                 backgroundColor="transparent"
@@ -78,13 +72,8 @@ export const PackCardHeader = ({ data, title }: PackCardHeaderProps) => {
               />
             )}
 
-            <EditableText
-              isLoading={isLoading}
-              defaultValue={title}
-              isFocused={isTitleEditMode}
-              onSave={handleSaveTitle}
-            />
-          </RStack>
+            <RText style={{ fontSize: 24, fontWeight: 600 }}>{title}</RText>
+          </>
         }
         actionsComponent={
           user?.id === data.owner_id && (