From 37f494402927157ead1be100a612e955e6cbc11a Mon Sep 17 00:00:00 2001
From: shahzaib <shahzi113awan@gmail.com>
Date: Mon, 10 Jun 2024 12:33:00 +0500
Subject: [PATCH 001/257] :Ui fixes

---
 .../components/card/PackCardHeader/PackCardHeader.tsx    | 4 +++-
 packages/app/components/pack/PackDetails.tsx             | 6 ++++--
 packages/app/screens/user/Settings.tsx                   | 1 +
 packages/ui/src/RSelect/index.tsx                        | 3 ++-
 packages/ui/src/dialog/BaseDialog.tsx                    | 9 +++++----
 5 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/packages/app/components/card/PackCardHeader/PackCardHeader.tsx b/packages/app/components/card/PackCardHeader/PackCardHeader.tsx
index 66c067dac..9241dfb93 100644
--- a/packages/app/components/card/PackCardHeader/PackCardHeader.tsx
+++ b/packages/app/components/card/PackCardHeader/PackCardHeader.tsx
@@ -34,6 +34,7 @@ export const PackCardHeader = ({ data, title }: PackCardHeaderProps) => {
     usePackTitleInput(data);
 
   const { isDark, currentTheme } = useTheme();
+
   const router = useRouter();
   const { editPack } = useEditPack();
 
@@ -48,6 +49,7 @@ export const PackCardHeader = ({ data, title }: PackCardHeaderProps) => {
   return (
     <>
       <CustomCardHeader
+      link={""}
         data={data}
         title={
           <RStack
@@ -86,7 +88,7 @@ export const PackCardHeader = ({ data, title }: PackCardHeaderProps) => {
         }
         actionsComponent={
           user?.id === data.owner_id && (
-            <ThreeDotsMenu onOpenChange={handleActionsOpenChange}>
+            <ThreeDotsMenu  onOpenChange={handleActionsOpenChange}>
               <YStack space="$1">
                 <RButton onPress={handleEdit}>Edit</RButton>
                 <RButton onPress={handleSavePack}>Save</RButton>
diff --git a/packages/app/components/pack/PackDetails.tsx b/packages/app/components/pack/PackDetails.tsx
index d0637eac4..90e87c44b 100644
--- a/packages/app/components/pack/PackDetails.tsx
+++ b/packages/app/components/pack/PackDetails.tsx
@@ -66,7 +66,7 @@ export function PackDetails() {
   if (isLoading) return <RText>Loading...</RText>;
 
   return (
-    <>
+    <ScrollView>
       <Layout>
         <View
           style={[
@@ -158,6 +158,8 @@ export function PackDetails() {
           bottom: 30,
           width: 60,
           height: 60,
+          marginBottom: 20,
+
           justifyContent: 'center',
           alignItems: 'center',
         }}
@@ -168,7 +170,7 @@ export function PackDetails() {
           trigger="Open Chat"
         />
       </View>
-    </>
+    </ScrollView>
   );
 }
 
diff --git a/packages/app/screens/user/Settings.tsx b/packages/app/screens/user/Settings.tsx
index 2f88aa0e3..fe997d614 100644
--- a/packages/app/screens/user/Settings.tsx
+++ b/packages/app/screens/user/Settings.tsx
@@ -50,6 +50,7 @@ export default function Settings() {
         paddingVertical={20}
         paddingHorizontal={8}
         marginHorizontal="auto"
+        marginVertical={40}
       >
         <RStack
           style={{
diff --git a/packages/ui/src/RSelect/index.tsx b/packages/ui/src/RSelect/index.tsx
index 000754db3..eb38203ff 100644
--- a/packages/ui/src/RSelect/index.tsx
+++ b/packages/ui/src/RSelect/index.tsx
@@ -6,6 +6,7 @@ import {
   Sheet,
   YStack as OriginalYStack,
   getFontSize,
+  Text,
 } from 'tamagui';
 
 const YStack: any = OriginalYStack;
@@ -83,7 +84,7 @@ export function SelectItem(props) {
 
   // Conditional rendering based on options
   if (options.length === 0) {
-    return <div>No options available</div>;
+    return <Text>No options available</Text>;
   }
 
   return (
diff --git a/packages/ui/src/dialog/BaseDialog.tsx b/packages/ui/src/dialog/BaseDialog.tsx
index 245b407af..924da238c 100644
--- a/packages/ui/src/dialog/BaseDialog.tsx
+++ b/packages/ui/src/dialog/BaseDialog.tsx
@@ -38,7 +38,7 @@ export const BaseDialog = ({
       </Dialog.Trigger>
       <Adapt when="sm" platform="touch">
         <Sheet zIndex={200000} modal dismissOnSnapToBottom>
-          <Sheet.Frame padding="$4" gap="$4">
+          <Sheet.Frame padding="$4" gap="$0">
             <Adapt.Contents />
           </Sheet.Frame>
 
@@ -74,9 +74,10 @@ export const BaseDialog = ({
           exitStyle={{ x: 0, y: 10, opacity: 0, scale: 0.95 }}
           gap="$4"
         >
-          <Dialog.Title>{title}</Dialog.Title>
-
-          <Dialog.Description>{description}</Dialog.Description>
+          {title && <Dialog.Title>{title}</Dialog.Title>}
+          {description && (
+            <Dialog.Description>{description}</Dialog.Description>
+          )}
           {children}
         </Dialog.Content>
       </Dialog.Portal>

From fc71966f941376c00e1cfcc9a045c54310af7338 Mon Sep 17 00:00:00 2001
From: Anmol Verma <anmolverma2810@gmail.com>
Date: Sat, 8 Jun 2024 17:37:20 +0530
Subject: [PATCH 002/257] Change width according to screen size

---
 packages/app/components/dashboard/HeroBanner.tsx    | 13 ++++++++-----
 .../app/components/dashboard/QuickActionButton.tsx  |  6 ++++++
 .../app/components/dashboard/QuickActionSection.tsx |  3 +++
 packages/app/components/dashboard/Section.tsx       |  3 +++
 packages/app/components/feed/FeedSearchFilter.tsx   |  9 +++++++--
 5 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/packages/app/components/dashboard/HeroBanner.tsx b/packages/app/components/dashboard/HeroBanner.tsx
index fe796cbdb..e040cdfe5 100644
--- a/packages/app/components/dashboard/HeroBanner.tsx
+++ b/packages/app/components/dashboard/HeroBanner.tsx
@@ -12,6 +12,7 @@ import { first } from 'lodash';
 import { hexToRGBA } from '../../utils/colorFunctions';
 import useCustomStyles from 'app/hooks/useCustomStyles';
 import { PlacesAutocomplete } from 'app/components/PlacesAutocomplete/PlacesAutocomplete';
+import { useScreenWidth } from 'app/hooks/common';
 const RText: any = OriginalRText;
 
 interface HeroSectionProps {
@@ -72,6 +73,8 @@ const HeroSection: React.FC<HeroSectionProps> = ({ onSelect }) => {
       ? `Let's find a new trail, ${firstNameOrUser}`
       : "Let's find a new trail";
 
+      const { screenWidth } = useScreenWidth();
+
   return (
     <View style={styles.banner}>
       <Hero
@@ -91,8 +94,8 @@ const HeroSection: React.FC<HeroSectionProps> = ({ onSelect }) => {
               cardBackgroundColor || currentTheme.colors.secondaryBlue,
             alignItems: 'center',
             justifyContent: 'center',
-            width: '100%',
-            height: '100%',
+            width: screenWidth <= 425 ? '80vw'  :'30vw',
+            height:'30vh',
             padding: 50,
           }}
           title={''}
@@ -100,8 +103,8 @@ const HeroSection: React.FC<HeroSectionProps> = ({ onSelect }) => {
         >
           <RStack
             style={{
-              width: '100%',
-              height: '100%',
+              width: screenWidth <= 425 ? '40vw'  :'25vw',
+              height: '15vh',
               alignItems: 'center',
               justifyContent: 'center',
             }}
@@ -151,7 +154,7 @@ const loadStyles = (theme: any) => {
       marginTop: 20,
       alignItems: 'center',
       justifyContent: 'center',
-      width: '100%',
+      width: '60vw',
       position: 'relative',
       zIndex: 1,
     },
diff --git a/packages/app/components/dashboard/QuickActionButton.tsx b/packages/app/components/dashboard/QuickActionButton.tsx
index c5c334378..e9b762e23 100644
--- a/packages/app/components/dashboard/QuickActionButton.tsx
+++ b/packages/app/components/dashboard/QuickActionButton.tsx
@@ -4,6 +4,7 @@ import { MaterialIcons } from '@expo/vector-icons';
 import React from 'react';
 import { theme } from '../../theme';
 import useCustomStyles from 'app/hooks/useCustomStyles';
+import { useScreenWidth } from 'app/hooks/common';
 
 const RCard: any = OriginalRCard;
 
@@ -38,14 +39,19 @@ const QuickActionButton = ({
 
 const loadStyles = (theme: any) => {
   const { currentTheme } = theme;
+  const {screenWidth} = useScreenWidth();
   return {
     container: {
       margin: 10,
+      width: screenWidth <= 425 ? '15vw':'10vw',
+      height:'10vh',
     },
     card: {
       flexDirection: 'column',
       justifyContent: 'center',
       alignItems: 'center',
+      width: screenWidth <= 425 ? '15vw':'10vw',
+      height:'10vh',
       // paddingHorizontal: 40,
       // paddingVertical: 60,
       backgroundColor: currentTheme.colors.primary,
diff --git a/packages/app/components/dashboard/QuickActionSection.tsx b/packages/app/components/dashboard/QuickActionSection.tsx
index 5c11f1768..6798dda26 100644
--- a/packages/app/components/dashboard/QuickActionSection.tsx
+++ b/packages/app/components/dashboard/QuickActionSection.tsx
@@ -2,6 +2,7 @@ import { RStack } from '@packrat/ui';
 import QuickActionButton from './QuickActionButton';
 import useCustomStyles from 'app/hooks/useCustomStyles';
 import { useQuickActions } from 'app/hooks/dashboard';
+import { useScreenWidth } from 'app/hooks/common';
 
 const QuickActionsSection = () => {
   const styles = useCustomStyles(loadStyles);
@@ -25,10 +26,12 @@ const QuickActionsSection = () => {
 
 const loadStyles = (theme) => {
   const { currentTheme } = theme;
+  const {screenWidth} = useScreenWidth();
   return {
     section: {
       marginBottom: 20,
       paddingHorizontal: 20, // Added padding here.
+      width : screenWidth  <= 425 ? '40vw' : '23vw',
     },
     card: {
       justifyContent: 'center',
diff --git a/packages/app/components/dashboard/Section.tsx b/packages/app/components/dashboard/Section.tsx
index 8fdd36499..b10ca90a7 100644
--- a/packages/app/components/dashboard/Section.tsx
+++ b/packages/app/components/dashboard/Section.tsx
@@ -3,6 +3,7 @@ import { RCard } from '@packrat/ui';
 import React from 'react';
 import useCustomStyles from 'app/hooks/useCustomStyles';
 import { TouchableOpacity } from 'react-native';
+import { useScreenWidth } from 'app/hooks/common';
 
 interface SectionProps {
   children: React.ReactNode;
@@ -23,6 +24,7 @@ const Section: React.FC<SectionProps> = ({ children, onPress }) => {
 
 const loadStyles = (theme: any) => {
   const { currentTheme } = theme;
+  const {screenWidth} = useScreenWidth();
   return {
     section: {
       marginBottom: 20,
@@ -31,6 +33,7 @@ const loadStyles = (theme: any) => {
     card: {
       justifyContent: 'center',
       alignItems: 'center',
+      width:screenWidth <= 425 ?'40vw' :'55vw',
       paddingHorizontal: 10,
       paddingVertical: 20,
       backgroundColor: currentTheme.colors.secondaryBlue,
diff --git a/packages/app/components/feed/FeedSearchFilter.tsx b/packages/app/components/feed/FeedSearchFilter.tsx
index 5577cbe48..8a37839ea 100644
--- a/packages/app/components/feed/FeedSearchFilter.tsx
+++ b/packages/app/components/feed/FeedSearchFilter.tsx
@@ -16,6 +16,7 @@ import {
 import { AntDesign } from '@expo/vector-icons';
 import DropdownComponent from 'app/components/Dropdown';
 import Layout from 'app/components/layout/Layout';
+import { useScreenWidth } from 'app/hooks/common';
 const RStack: any = OriginalRStack;
 const RText: any = OriginalRText;
 const RSeparator: any = OriginalRSeparator;
@@ -60,6 +61,7 @@ const FeedSearchFilter = ({
   const [searchValue, setSearchValue] = useState('');
 
   const onSearch = (search) => setSearchQuery(search);
+  const {screenWidth} = useScreenWidth();
 
   return (
     <Layout>
@@ -71,6 +73,7 @@ const FeedSearchFilter = ({
               style={{ flexDirection: 'row', justifyContent: 'center' }}
             >
               <FormInput
+              width= {screenWidth <= 425 ? '30vw' : '12vw'}
                 placeholder={`Search ${feedType || 'Feed'}`}
                 name="search"
                 value={searchValue}
@@ -160,7 +163,7 @@ const FeedSearchFilter = ({
                 onValueChange={handleSortChange}
                 placeholder="Sort By"
                 style={styles.dropdown}
-                width={Platform.OS === 'web' ? 150 : 120}
+                width={Platform.OS === 'web' ? screenWidth <= 425 ?'30vw':'8vw' : 120}
               />
             </RStack>
             {(feedType === 'userPacks' || feedType === 'userTrips') && (
@@ -182,7 +185,9 @@ const FeedSearchFilter = ({
 
 const loadStyles = (theme: any) => {
   const { currentTheme } = theme;
+
   return {
+    
     mainContainer: {
       flex: 1,
       backgroundColor: currentTheme.colors.background,
@@ -193,7 +198,7 @@ const loadStyles = (theme: any) => {
       backgroundColor: currentTheme.colors.card,
       padding: 15,
       fontSize: 18,
-      width: '100%',
+      width: '60vw',
       borderRadius: 10,
       marginTop: Platform.OS !== 'web' ? 20 : 0,
     },

From 934700cd17e15f2459edbd59cfa28eaeb0b095fc Mon Sep 17 00:00:00 2001
From: mikeCyb <michaelgashaw972@gmail.com>
Date: Sat, 8 Jun 2024 08:28:54 +0300
Subject: [PATCH 003/257] Edit/ delete column removed in global items

---
 .../app/components/itemtable/itemTable.tsx    | 45 -------------------
 packages/app/tsconfig.json                    |  1 +
 2 files changed, 1 insertion(+), 45 deletions(-)

diff --git a/packages/app/components/itemtable/itemTable.tsx b/packages/app/components/itemtable/itemTable.tsx
index 6618740c6..4ed9a0699 100644
--- a/packages/app/components/itemtable/itemTable.tsx
+++ b/packages/app/components/itemtable/itemTable.tsx
@@ -88,49 +88,6 @@ export const ItemsTable = ({
       <RText style={{ color: isDark ? 'white' : 'black' }}>
         {category?.name || type}
       </RText>,
-      authUser && authUser.id === ownerId ? (
-        <EditPackItemModal
-          key="edit-pack-item"
-          triggerComponent={
-            <MaterialIcons
-              name="edit"
-              size={20}
-              color={currentTheme.colors.primary}
-            />
-          }
-        >
-          <AddItem
-            packId={id}
-            isEdit={true}
-            isItemPage
-            initialData={itemData}
-            editAsDuplicate={false}
-            setPage={setPage}
-            page={page}
-          />
-        </EditPackItemModal>
-      ) : (
-        ''
-      ),
-      authUser && authUser.id === ownerId ? (
-        <DeletePackItemModal
-          key="delete-pack-item"
-          onConfirm={(closeModal) => {
-            handleDeleteItem(id, closeModal);
-          }}
-          triggerComponent={
-            (
-              <MaterialIcons
-                name="delete"
-                size={20}
-                color={currentTheme.colors.error}
-              />
-            ) as any
-          }
-        />
-      ) : (
-        ''
-      ),
     ];
     return (
       <Row
@@ -194,8 +151,6 @@ export const ItemsTable = ({
                   'Weight',
                   'Quantity',
                   'Category',
-                  'Edit',
-                  'Delete',
                 ].map((header, index) => (
                   <Cell
                     key={index}
diff --git a/packages/app/tsconfig.json b/packages/app/tsconfig.json
index ecbab72b1..789f04999 100644
--- a/packages/app/tsconfig.json
+++ b/packages/app/tsconfig.json
@@ -1,6 +1,7 @@
 {
   "extends": "@tsconfig/react-native/tsconfig.json",
   "compilerOptions": {
+    "jsx": "react",
     "target": "ES2020",
     "module": "ESNext",
     "lib": [

From fb5fab8828df2df00456027ce978c656c0c4a9cd Mon Sep 17 00:00:00 2001
From: mikeCyb <michaelgashaw972@gmail.com>
Date: Sat, 8 Jun 2024 08:57:22 +0300
Subject: [PATCH 004/257] Edit/ delete column removed in global items

---
 packages/app/tsconfig.json | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/app/tsconfig.json b/packages/app/tsconfig.json
index 789f04999..ecbab72b1 100644
--- a/packages/app/tsconfig.json
+++ b/packages/app/tsconfig.json
@@ -1,7 +1,6 @@
 {
   "extends": "@tsconfig/react-native/tsconfig.json",
   "compilerOptions": {
-    "jsx": "react",
     "target": "ES2020",
     "module": "ESNext",
     "lib": [

From 8665b78a11fe3b1e4ca0c5e233cabff147bf3b02 Mon Sep 17 00:00:00 2001
From: shahzaib <shahzi113awan@gmail.com>
Date: Mon, 10 Jun 2024 13:31:37 +0500
Subject: [PATCH 005/257] : Modal close

---
 .../card/PackCardHeader/PackCardHeader.tsx        | 15 ++++++++++-----
 .../card/PackCardHeader/usePackTitleInput.ts      |  8 ++++++--
 packages/app/hooks/packs/useDeletePack.ts         |  2 +-
 packages/ui/src/ThreeDotsMenu/ThreeDotsMenu.tsx   |  6 +++++-
 4 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/packages/app/components/card/PackCardHeader/PackCardHeader.tsx b/packages/app/components/card/PackCardHeader/PackCardHeader.tsx
index 9241dfb93..3d231b787 100644
--- a/packages/app/components/card/PackCardHeader/PackCardHeader.tsx
+++ b/packages/app/components/card/PackCardHeader/PackCardHeader.tsx
@@ -19,6 +19,7 @@ import { useRouter } from 'app/hooks/router';
 import { useEditPack } from 'app/hooks/packs/useEditPack';
 import { Platform } from 'react-native';
 import { CopyPackModal } from '../../pack/CopyPackModal';
+import { set } from 'lodash';
 
 interface PackCardHeaderProps {
   data: any;
@@ -29,21 +30,25 @@ interface PackCardHeaderProps {
 export const PackCardHeader = ({ data, title }: PackCardHeaderProps) => {
   const { isLoading, refetch } = useFetchSinglePack(data?.id);
   const user = useAuthUser();
-  const handleDeletePack = useDeletePack(data.id);
-  const { handleActionsOpenChange, handleEdit, handleSaveTitle, isEditMode } =
+  const {handleDeletePack} = useDeletePack(data.id);
+  const { handleActionsOpenChange, handleEdit, handleSaveTitle, isEditMode,isOpen,setIsOpen } =
     usePackTitleInput(data);
 
   const { isDark, currentTheme } = useTheme();
 
   const router = useRouter();
   const { editPack } = useEditPack();
-
+const handleDelete = () => { 
+  handleDeletePack();
+  setIsOpen(false);
+ }
   const handleSavePack = () => {
     const packDetails = {
       id: data.id,
       name: data.name,
       is_public: data.is_public,
     };
+    setIsOpen(false);
     editPack(packDetails);
   };
   return (
@@ -88,11 +93,11 @@ export const PackCardHeader = ({ data, title }: PackCardHeaderProps) => {
         }
         actionsComponent={
           user?.id === data.owner_id && (
-            <ThreeDotsMenu  onOpenChange={handleActionsOpenChange}>
+            <ThreeDotsMenu open={isOpen}   onOpenChange={handleActionsOpenChange}>
               <YStack space="$1">
                 <RButton onPress={handleEdit}>Edit</RButton>
                 <RButton onPress={handleSavePack}>Save</RButton>
-                <RButton onPress={handleDeletePack}>Delete</RButton>
+                <RButton onPress={handleDelete}>Delete</RButton>
               </YStack>
             </ThreeDotsMenu>
           )
diff --git a/packages/app/components/card/PackCardHeader/usePackTitleInput.ts b/packages/app/components/card/PackCardHeader/usePackTitleInput.ts
index 9c954211e..7d148c1cb 100644
--- a/packages/app/components/card/PackCardHeader/usePackTitleInput.ts
+++ b/packages/app/components/card/PackCardHeader/usePackTitleInput.ts
@@ -4,17 +4,21 @@ import { useRef, useState } from 'react';
 export const usePackTitleInput = (data) => {
   const [isEditMode, setIsEditMode] = useState(false);
   const isEditModeRef = useRef(false);
+  const [isOpen, setIsOpen] = useState(false);
   const { editPack } = useEditPack();
 
   const handleActionsOpenChange = (state) => {
+    setIsOpen(true);
     if (!state && isEditModeRef.current) {
       isEditModeRef.current = false;
       setIsEditMode(true);
+      setIsOpen(true);
     }
   };
 
   const handleEdit = () => {
     isEditModeRef.current = true;
+    setIsOpen(false)
   };
 
   const handleSaveTitle = (title) => {
@@ -23,10 +27,10 @@ export const usePackTitleInput = (data) => {
       name: title,
       is_public: data.is_public,
     };
-
+     setIsOpen(false);
     editPack(packDetails);
     setIsEditMode(false);
   };
 
-  return { handleActionsOpenChange, isEditMode, handleEdit, handleSaveTitle };
+  return { handleActionsOpenChange, isEditMode, handleEdit, handleSaveTitle,isOpen,setIsOpen };
 };
diff --git a/packages/app/hooks/packs/useDeletePack.ts b/packages/app/hooks/packs/useDeletePack.ts
index c3f0c17ff..331c066ba 100644
--- a/packages/app/hooks/packs/useDeletePack.ts
+++ b/packages/app/hooks/packs/useDeletePack.ts
@@ -12,5 +12,5 @@ export const useDeletePack = (id) => {
     } catch {}
   };
 
-  return handleDeletePack;
+  return {handleDeletePack};
 };
diff --git a/packages/ui/src/ThreeDotsMenu/ThreeDotsMenu.tsx b/packages/ui/src/ThreeDotsMenu/ThreeDotsMenu.tsx
index 9be99fa2b..227f27e5f 100644
--- a/packages/ui/src/ThreeDotsMenu/ThreeDotsMenu.tsx
+++ b/packages/ui/src/ThreeDotsMenu/ThreeDotsMenu.tsx
@@ -8,16 +8,20 @@ const Popover: any = OriginalPopover;
 interface ThreeDotsMenuProps {
   children: ReactNode;
   onOpenChange: (open: boolean) => void;
+  open: boolean;
 }
 
-export function ThreeDotsMenu({ children, onOpenChange }: ThreeDotsMenuProps) {
+export function ThreeDotsMenu({ children, onOpenChange,open }: ThreeDotsMenuProps) {
+  console.log("ksksksks",open)
   return (
     <Popover
       size="$5"
       allowFlip
       placement="bottom"
       onOpenChange={onOpenChange}
+      open={open}
       disableFocus
+      
     >
       <Popover.Trigger asChild backgroundColor="transparent">
         <Button icon={MoreHorizontal} />

From 7cbe42a3d2645abc57a8a44b1253e2686f8efeae Mon Sep 17 00:00:00 2001
From: shahzaib <shahzi113awan@gmail.com>
Date: Mon, 10 Jun 2024 14:06:50 +0500
Subject: [PATCH 006/257] :modal issue web

---
 .../app/components/card/PackCardHeader/PackCardHeader.tsx     | 4 ++++
 packages/ui/src/ThreeDotsMenu/ThreeDotsMenu.tsx               | 3 ++-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/app/components/card/PackCardHeader/PackCardHeader.tsx b/packages/app/components/card/PackCardHeader/PackCardHeader.tsx
index 3d231b787..9a63838cc 100644
--- a/packages/app/components/card/PackCardHeader/PackCardHeader.tsx
+++ b/packages/app/components/card/PackCardHeader/PackCardHeader.tsx
@@ -41,6 +41,7 @@ export const PackCardHeader = ({ data, title }: PackCardHeaderProps) => {
 const handleDelete = () => { 
   handleDeletePack();
   setIsOpen(false);
+  console.log("Pack Deleted");
  }
   const handleSavePack = () => {
     const packDetails = {
@@ -50,7 +51,10 @@ const handleDelete = () => {
     };
     setIsOpen(false);
     editPack(packDetails);
+    console.log('Pack Saved'); 
+     
   };
+  console.log('data', isOpen);
   return (
     <>
       <CustomCardHeader
diff --git a/packages/ui/src/ThreeDotsMenu/ThreeDotsMenu.tsx b/packages/ui/src/ThreeDotsMenu/ThreeDotsMenu.tsx
index 227f27e5f..f03aaf8f5 100644
--- a/packages/ui/src/ThreeDotsMenu/ThreeDotsMenu.tsx
+++ b/packages/ui/src/ThreeDotsMenu/ThreeDotsMenu.tsx
@@ -1,6 +1,7 @@
 import React, { ReactNode } from 'react';
 import { MoreHorizontal } from '@tamagui/lucide-icons';
 import { Adapt, Button, Popover as OriginalPopover } from 'tamagui';
+import { Platform } from 'react-native';
 
 // Bypass TypeScript's type checking on opacity and borderWidth, since component is directly from the library
 const Popover: any = OriginalPopover;
@@ -19,7 +20,7 @@ export function ThreeDotsMenu({ children, onOpenChange,open }: ThreeDotsMenuProp
       allowFlip
       placement="bottom"
       onOpenChange={onOpenChange}
-      open={open}
+      open={Platform.OS != 'web'? open:undefined}
       disableFocus
       
     >

From 3e1badd138254010cc31ada001a784fbcb9efa76 Mon Sep 17 00:00:00 2001
From: Anmol Verma <anmolverma2810@gmail.com>
Date: Tue, 11 Jun 2024 15:10:35 +0530
Subject: [PATCH 007/257] Remove actions column in table for other users

---
 .../ui/src/Bento/elements/tables/Basic.tsx     | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/packages/ui/src/Bento/elements/tables/Basic.tsx b/packages/ui/src/Bento/elements/tables/Basic.tsx
index 9fdf548a8..dcfd7ad2c 100644
--- a/packages/ui/src/Bento/elements/tables/Basic.tsx
+++ b/packages/ui/src/Bento/elements/tables/Basic.tsx
@@ -152,15 +152,19 @@ export function BasicTable({
       header: () => 'Category',
       cell: (info) => info.getValue(),
       // footer: (info) => 'category',
-    }),
-    columnHelper.display({
-      id: 'actions',
-      cell: (props) => <ActionButtons item={props.row.original} />,
-      header: () => 'Actions',
-      // footer: (info) => info.column.id,
-    }),
+    })
   ];
 
+  if (hasPermissions) {
+    columns.push(
+      columnHelper.display({
+        id: 'actions',
+        cell: (props) => <ActionButtons item={props.row.original} />,
+        header: () => 'Actions',
+      })
+    );
+  }
+
   const CELL_WIDTH = '$18';
 
   const [activeModal, setActiveModal] = React.useState<string | null>(null);

From 1a6a5d67594894d00017e8ce80e2fad0f56f3293 Mon Sep 17 00:00:00 2001
From: Anmol Verma <anmolverma2810@gmail.com>
Date: Tue, 11 Jun 2024 17:11:59 +0530
Subject: [PATCH 008/257] Margin adjustment for menu on mobile web

---
 packages/app/components/navigation/Drawer.tsx         | 2 +-
 packages/app/components/navigation/NavigationList.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/app/components/navigation/Drawer.tsx b/packages/app/components/navigation/Drawer.tsx
index 82f078155..6ba2ab388 100644
--- a/packages/app/components/navigation/Drawer.tsx
+++ b/packages/app/components/navigation/Drawer.tsx
@@ -35,7 +35,7 @@ export function Drawer() {
       </Popover.Trigger>
       <Adapt when="sm" platform="touch">
         <Popover.Sheet modal dismissOnSnapToBottom>
-          <Popover.Sheet.Frame padding="$4">
+          <Popover.Sheet.Frame padding="$1">
             <Adapt.Contents />
           </Popover.Sheet.Frame>
 
diff --git a/packages/app/components/navigation/NavigationList.tsx b/packages/app/components/navigation/NavigationList.tsx
index 8a2a53551..2f056d433 100644
--- a/packages/app/components/navigation/NavigationList.tsx
+++ b/packages/app/components/navigation/NavigationList.tsx
@@ -25,7 +25,7 @@ export const NavigationList: React.FC<NavigationListProps> = ({
             style={{
               width: '100%',
               borderRadius: 8,
-              marginBottom: isMobileView ? 25 : 0,
+              marginBottom: isMobileView ? 6:0,
               backgroundColor: currentTheme.colors.background,
               color: currentTheme.colors.white,
             }}

From 0924fb54d9b68af2def319e89c35a7e9d5e3fd22 Mon Sep 17 00:00:00 2001
From: Anmol Verma <anmolverma2810@gmail.com>
Date: Tue, 11 Jun 2024 18:56:18 +0530
Subject: [PATCH 009/257] Modify condition on search input visibility

---
 packages/app/components/card/CustomCard.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/app/components/card/CustomCard.tsx b/packages/app/components/card/CustomCard.tsx
index 8564c47fd..3b417e0c8 100644
--- a/packages/app/components/card/CustomCard.tsx
+++ b/packages/app/components/card/CustomCard.tsx
@@ -72,7 +72,7 @@ export const CustomCard = ({
           )}
         </View>
         <RSeparator />
-        {type === 'pack' && authUser?.id === data.owner_id.id ? (
+        {type === 'pack' && authUser?.id === data.owner_id? (
           <>
             <View
               style={

From edd7376cccb033e240e372ac8d55fd08d4c72b89 Mon Sep 17 00:00:00 2001
From: pinocchio-life-like <icbr19fl@gmail.com>
Date: Tue, 11 Jun 2024 18:07:18 +0300
Subject: [PATCH 010/257] local update

---
 package.json                                  |   3 +
 packages/app/components/chat/ActionItem.tsx   | 118 ++++++++
 packages/app/components/chat/chat.style.tsx   |  41 +++
 packages/app/components/chat/index.tsx        | 170 ++++++++----
 packages/app/components/pack/PackDetails.tsx  |  25 +-
 packages/app/constants/api.ts                 |   3 +-
 .../ui/src/Bento/elements/list/ChatList.tsx   |   2 +-
 yarn.lock                                     | 253 ++++++++++++++++++
 8 files changed, 538 insertions(+), 77 deletions(-)
 create mode 100644 packages/app/components/chat/ActionItem.tsx

diff --git a/package.json b/package.json
index dfb15974d..d2f8c9698 100644
--- a/package.json
+++ b/package.json
@@ -96,10 +96,13 @@
     "eslint": "^8.56.0",
     "husky": "^8.0.0",
     "lint-staged": "^14.0.1",
+    "lucide-react-native": "^0.394.0",
     "npm-run-all": "^4.1.5",
     "patch-package": "^8.0.0",
     "postinstall-postinstall": "^2.1.0",
     "prettier": "^3.2.5",
+    "react-native-reanimated": "^3.12.0",
+    "react-native-safe-area-context": "^4.10.4",
     "typescript": "^5.3.3"
   },
   "lint-staged": {
diff --git a/packages/app/components/chat/ActionItem.tsx b/packages/app/components/chat/ActionItem.tsx
new file mode 100644
index 000000000..8ae173aa3
--- /dev/null
+++ b/packages/app/components/chat/ActionItem.tsx
@@ -0,0 +1,118 @@
+import React, { useState } from 'react';
+import { View, Text, Pressable, StyleSheet } from 'react-native';
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withTiming,
+  FadeIn,
+} from 'react-native-reanimated';
+import { LucideIcon } from 'lucide-react-native';
+
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+
+interface ActionItemProps {
+  icon: LucideIcon;
+  color: string;
+  title: string;
+  description: string;
+  type: string;
+  setIsChatOpen: (value: boolean) => void;
+  setIsSuggestionOpen: (value: boolean) => void;
+  setIsItemOpen: (value: boolean) => void;
+}
+
+export const ActionItem: React.FC<ActionItemProps> = ({
+  icon: Icon,
+  color,
+  title,
+  type,
+  description,
+  setIsChatOpen,
+  setIsSuggestionOpen,
+  setIsItemOpen,
+}) => {
+  const [scale, setScale] = useState(1);
+
+  const actionItemAStyle = {
+    transform: [{ scale: scale }],
+  };
+
+  const handlePressOut = () => {
+    setScale(0.95);
+    switch (type) {
+      case 'chat':
+        setIsItemOpen(false);
+        setIsChatOpen(true);
+        break;
+      case 'suggestion':
+        setIsItemOpen(false);
+        setIsSuggestionOpen(true);
+        break;
+      default:
+        break;
+    }
+  };
+
+  return (
+    <AnimatedPressable
+      entering={FadeIn.duration(100)}
+      onPressIn={() => {
+        setScale(0.95);
+      }}
+      onPressOut={handlePressOut}
+      style={[styles.actionItem, actionItemAStyle]}
+    >
+      <View
+        style={{
+          ...styles.iconContainer,
+          backgroundColor: color,
+        }}
+      >
+        <Icon size={24} color="white" />
+      </View>
+      <View style={styles.actionTextContainer}>
+        <Text style={styles.actionTitle}>{title}</Text>
+        <Text style={styles.actionDescription}>{description}</Text>
+      </View>
+    </AnimatedPressable>
+  );
+};
+
+const styles = StyleSheet.create({
+  actionItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: 'rgba(44, 44, 46, 0.6)',
+    borderRadius: 10,
+    padding: 8,
+    borderWidth: 1.3, // Adding border
+    borderColor: '#3a3a3c', // Slightly lighter border color
+    height: 80,
+    width: 300,
+    marginBottom: 2,
+  },
+  iconContainer: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  actionTextContainer: {
+    marginLeft: 6,
+    paddingRight: 10,
+    rowGap: 4,
+    width: '90%',
+  },
+  actionTitle: {
+    color: 'white',
+    fontSize: 16,
+    fontWeight: 'bold',
+  },
+  actionDescription: {
+    fontSize: 14,
+    fontWeight: '500',
+    lineHeight: 18,
+    color: 'rgba(224, 224, 224, 0.9)',
+  },
+});
diff --git a/packages/app/components/chat/chat.style.tsx b/packages/app/components/chat/chat.style.tsx
index b088df0d7..412095929 100644
--- a/packages/app/components/chat/chat.style.tsx
+++ b/packages/app/components/chat/chat.style.tsx
@@ -1,3 +1,10 @@
+import { Dimensions } from 'react-native';
+
+const { width, height } = Dimensions.get('window');
+
+export const SCREEN_WIDTH = width;
+export const SCREEN_HEIGHT = height;
+
 export const loadStyles = (theme: any) => {
   const { currentTheme } = theme;
 
@@ -79,5 +86,39 @@ export const loadStyles = (theme: any) => {
       padding: 10,
       zIndex: 1000,
     },
+    actionItem: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      backgroundColor: 'rgba(44, 44, 46, 0.6)',
+      borderRadius: 15,
+      padding: 10,
+      borderWidth: 1.3, // Adding border
+      borderColor: '#3a3a3c', // Slightly lighter border color
+      height: 112,
+      width: SCREEN_WIDTH * 0.82,
+    },
+    iconContainer: {
+      width: 40,
+      height: 40,
+      borderRadius: 20,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    actionTextContainer: {
+      marginLeft: 10,
+      rowGap: 4,
+      width: '90%',
+    },
+    actionTitle: {
+      color: 'white',
+      fontSize: 16,
+      fontWeight: 'bold',
+    },
+    actionDescription: {
+      fontSize: 14,
+      fontWeight: '500',
+      lineHeight: 18,
+      color: 'rgba(224, 224, 224, 0.9)',
+    },
   };
 };
diff --git a/packages/app/components/chat/index.tsx b/packages/app/components/chat/index.tsx
index 3db0f588f..1d705bca7 100644
--- a/packages/app/components/chat/index.tsx
+++ b/packages/app/components/chat/index.tsx
@@ -11,8 +11,9 @@ import useCustomStyles from 'app/hooks/useCustomStyles';
 import { useChat } from 'app/hooks/chat/useChat';
 import { loadStyles } from './chat.style';
 import { ChatList } from '@packrat/ui/src/Bento/elements/list';
-import { Button } from 'tamagui';
 import { X } from '@tamagui/lucide-icons';
+import { MessageCircle, Camera, Settings, Home } from 'lucide-react-native';
+import { ActionItem } from './ActionItem';
 
 // TODO check if we've fixed the chat screen on another branch
 // link: https://github.com/andrew-bierman/PackRat/issues/ ???
@@ -29,6 +30,23 @@ interface ChatModalTriggerProps {
   itemTypeId: string | null;
 }
 
+const actionItems = [
+  {
+    icon: MessageCircle,
+    color: 'orange',
+    title: 'Message',
+    description: 'Interact with our AI-powered chatbot.',
+    type: 'chat',
+  },
+  {
+    icon: Settings,
+    color: 'teal',
+    title: 'Suggestions',
+    description: 'See how you can improve your pack.',
+    type: 'suggestion',
+  },
+];
+
 const ChatComponent: React.FC<ChatComponentProps> = ({
   showChatSelector = true,
   defaultChatId = null,
@@ -119,6 +137,8 @@ const ChatComponent: React.FC<ChatComponentProps> = ({
 const ChatModalTrigger: React.FC<ChatModalTriggerProps> = ({ itemTypeId }) => {
   const styles = useCustomStyles(loadStyles);
   const [isChatOpen, setIsChatOpen] = useState(false);
+  const [isItemOpen, setIsItemOpen] = useState(false);
+  const [isSuggestionsOpen, setIsSuggestionsOpen] = useState(false);
   const animationValue = useRef(new Animated.Value(0)).current;
 
   useEffect(() => {
@@ -130,51 +150,107 @@ const ChatModalTrigger: React.FC<ChatModalTriggerProps> = ({ itemTypeId }) => {
   }, [isChatOpen]);
 
   return (
-    <View style={styles.container}>
-      <TouchableOpacity onPress={() => setIsChatOpen(!isChatOpen)}>
-        <TouchableOpacity
-          style={{
+    <View
+      style={
+        (styles.container,
+        {
+          position: 'absolute',
+          right: 50,
+          bottom: 30,
+          width: 60,
+          height: 60,
+          justifyContent: 'center',
+          alignItems: 'center',
+        })
+      }
+    >
+      <TouchableOpacity
+        style={{
+          width: 50,
+          height: 50,
+          borderRadius: 25,
+          justifyContent: 'center',
+          alignItems: 'center',
+        }}
+        onPress={() => {
+          if (isChatOpen || isSuggestionsOpen) {
+            setIsItemOpen(false);
+            setIsChatOpen(false);
+            setIsSuggestionsOpen(false);
+          } else {
+            setIsItemOpen(!isItemOpen);
+          }
+        }}
+      >
+        <RImage
+          source={{
+            // TODO: Update this to use the intended chat logo
+            uri: 'https://raw.githubusercontent.com/andrew-bierman/PackRat/4ad449702c088e505c4b484219121d365150f971/packages/app/assets/chat-svgrepo-com%20(1).svg',
             width: 50,
             height: 50,
-            borderRadius: 25,
-            justifyContent: 'center',
-            alignItems: 'center',
           }}
-          onPress={() => setIsChatOpen(!isChatOpen)}
-        >
-          <RImage
-            source={{
-              // TODO: Update this to use the intended chat logo
-              uri: 'https://raw.githubusercontent.com/andrew-bierman/PackRat/4ad449702c088e505c4b484219121d365150f971/packages/app/assets/chat-svgrepo-com%20(1).svg',
-              width: 50,
-              height: 50,
-            }}
-            width={40}
-            height={40}
-            style={{
-              ...styles.logo,
-              shadowColor: '#000',
-              shadowOffset: {
-                width: 0,
-                height: 2,
-              },
-              shadowOpacity: 0.75,
-              shadowRadius: 1.24,
-              elevation: 3,
-            }}
-            alt="PackRat Logo"
-          />
-        </TouchableOpacity>
+          width={40}
+          height={40}
+          style={{
+            ...styles.logo,
+            shadowColor: '#000',
+            shadowOffset: {
+              width: 0,
+              height: 2,
+            },
+            shadowOpacity: 0.75,
+            shadowRadius: 1.24,
+            elevation: 3,
+          }}
+          alt="PackRat Logo"
+        />
       </TouchableOpacity>
+      {isItemOpen && (
+        <Animated.View
+          style={{
+            position: 'absolute',
+            bottom: 60,
+            right: 5,
+            width: 308,
+            backgroundColor: '#000',
+            borderRadius: 10,
+            padding: 4,
+            zIndex: 1000,
+            shadowColor: '#000',
+            shadowOffset: { width: 0, height: 2 },
+            shadowOpacity: 0.25,
+            shadowRadius: 3.84,
+            elevation: 5,
+          }}
+        >
+          <View style={{ width: 300 }}>
+            {actionItems.map((item, index) => {
+              const { icon, color, title, description, type } = item;
+              return (
+                <ActionItem
+                  key={index}
+                  icon={icon}
+                  color={color}
+                  title={title}
+                  type={type}
+                  description={description}
+                  setIsChatOpen={setIsChatOpen}
+                  setIsItemOpen={setIsItemOpen}
+                  setIsSuggestionOpen={setIsSuggestionsOpen}
+                />
+              );
+            })}
+          </View>
+        </Animated.View>
+      )}
       {isChatOpen && (
         <Animated.View
           style={{
             position: 'absolute',
-            bottom: 50,
-            right: 20,
+            bottom: 60,
+            right: 5,
             width: 450,
-            // height: 700,
-            backgroundColor: '#fff',
+            backgroundColor: '#000',
             borderRadius: 10,
             padding: 4,
             zIndex: 1000,
@@ -183,27 +259,9 @@ const ChatModalTrigger: React.FC<ChatModalTriggerProps> = ({ itemTypeId }) => {
             shadowOpacity: 0.25,
             shadowRadius: 3.84,
             elevation: 5,
-            transform: [
-              {
-                translateX: animationValue.interpolate({
-                  inputRange: [0, 1],
-                  outputRange: [225, 0], // half of your view width
-                }),
-              },
-              {
-                translateY: animationValue.interpolate({
-                  inputRange: [0, 1],
-                  outputRange: [350, 0], // half of your view height
-                }),
-              },
-              {
-                scale: animationValue,
-              },
-            ],
-            opacity: animationValue,
           }}
         >
-          <Button
+          <RButton
             position="absolute"
             backgroundColor="$background"
             top="$2"
diff --git a/packages/app/components/pack/PackDetails.tsx b/packages/app/components/pack/PackDetails.tsx
index d0637eac4..eea7e3859 100644
--- a/packages/app/components/pack/PackDetails.tsx
+++ b/packages/app/components/pack/PackDetails.tsx
@@ -149,32 +149,19 @@ export function PackDetails() {
               />
             </>
           )}
+          <ChatContainer
+            itemTypeId={currentPackId}
+            title="Chat"
+            trigger="Open Chat"
+          />
         </View>
       </Layout>
-      <View
-        style={{
-          position: 'absolute',
-          right: 50,
-          bottom: 30,
-          width: 60,
-          height: 60,
-          justifyContent: 'center',
-          alignItems: 'center',
-        }}
-      >
-        <ChatContainer
-          itemTypeId={currentPackId}
-          title="Chat"
-          trigger="Open Chat"
-        />
-      </View>
     </>
   );
 }
 
 const loadStyles = (theme) => {
   const { currentTheme } = theme;
-  console.log('currentTheme', currentTheme);
   return {
     mainContainer: {
       position: 'relative',
@@ -183,7 +170,7 @@ const loadStyles = (theme) => {
       gap: 15,
       fontSize: 18,
       width: '100%',
-      flex: 1,
+      // flex: 1,
       maxHeight: '91.2vh',
     },
     packsContainer: {
diff --git a/packages/app/constants/api.ts b/packages/app/constants/api.ts
index 3de673360..858ac20dc 100644
--- a/packages/app/constants/api.ts
+++ b/packages/app/constants/api.ts
@@ -1,4 +1,5 @@
-import { API_URL } from '@packrat/config';
+// import { API_URL } from '@packrat/config';
+const API_URL = import.meta.env.VITE_API_URL;
 
 /**
  * The api url.
diff --git a/packages/ui/src/Bento/elements/list/ChatList.tsx b/packages/ui/src/Bento/elements/list/ChatList.tsx
index 7f96addae..b60392908 100644
--- a/packages/ui/src/Bento/elements/list/ChatList.tsx
+++ b/packages/ui/src/Bento/elements/list/ChatList.tsx
@@ -74,7 +74,7 @@ function ChatItem({ item, index }: { item: Message; index: number }) {
   const itsMe = role === 'user';
   const avatar = itsMe ? avatars[0] : avatars[1];
   const [showMessage, setShowMessage] = useState(false);
-  const showDelay = index * 50;
+  const showDelay = 150;
   const [start, setStart] = useState(false);
   const { isDark } = useTheme();
 
diff --git a/yarn.lock b/yarn.lock
index 2de354121..ddccdbd56 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -117,6 +117,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/code-frame@npm:^7.24.7":
+  version: 7.24.7
+  resolution: "@babel/code-frame@npm:7.24.7"
+  dependencies:
+    "@babel/highlight": "npm:^7.24.7"
+    picocolors: "npm:^1.0.0"
+  checksum: 10/4812e94885ba7e3213d49583a155fdffb05292330f0a9b2c41b49288da70cf3c746a3fda0bf1074041a6d741c33f8d7be24be5e96f41ef77395eeddc5c9ff624
+  languageName: node
+  linkType: hard
+
 "@babel/compat-data@npm:^7.20.5, @babel/compat-data@npm:^7.22.6, @babel/compat-data@npm:^7.23.5, @babel/compat-data@npm:^7.24.4":
   version: 7.24.4
   resolution: "@babel/compat-data@npm:7.24.4"
@@ -159,6 +169,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/generator@npm:^7.24.7":
+  version: 7.24.7
+  resolution: "@babel/generator@npm:7.24.7"
+  dependencies:
+    "@babel/types": "npm:^7.24.7"
+    "@jridgewell/gen-mapping": "npm:^0.3.5"
+    "@jridgewell/trace-mapping": "npm:^0.3.25"
+    jsesc: "npm:^2.5.1"
+  checksum: 10/c71d24a4b41b19c10d2f2eb819f27d4cf94220e2322f7c8fed8bfbbb115b2bebbdd6dc1f27dac78a175e90604def58d763af87e0fa81ce4ab1582858162cf768
+  languageName: node
+  linkType: hard
+
 "@babel/helper-annotate-as-pure@npm:^7.18.6, @babel/helper-annotate-as-pure@npm:^7.22.5":
   version: 7.22.5
   resolution: "@babel/helper-annotate-as-pure@npm:7.22.5"
@@ -244,6 +266,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-environment-visitor@npm:^7.24.7":
+  version: 7.24.7
+  resolution: "@babel/helper-environment-visitor@npm:7.24.7"
+  dependencies:
+    "@babel/types": "npm:^7.24.7"
+  checksum: 10/079d86e65701b29ebc10baf6ed548d17c19b808a07aa6885cc141b690a78581b180ee92b580d755361dc3b16adf975b2d2058b8ce6c86675fcaf43cf22f2f7c6
+  languageName: node
+  linkType: hard
+
 "@babel/helper-function-name@npm:^7.23.0":
   version: 7.23.0
   resolution: "@babel/helper-function-name@npm:7.23.0"
@@ -254,6 +285,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-function-name@npm:^7.24.7":
+  version: 7.24.7
+  resolution: "@babel/helper-function-name@npm:7.24.7"
+  dependencies:
+    "@babel/template": "npm:^7.24.7"
+    "@babel/types": "npm:^7.24.7"
+  checksum: 10/2ceb3d9b2b35a0fc4100fc06ed7be3bc38f03ff0bf128ff0edbc0cc7dd842967b1496fc70b5c616c747d7711c2b87e7d025c8888f48740631d6148a9d3614f85
+  languageName: node
+  linkType: hard
+
 "@babel/helper-hoist-variables@npm:^7.22.5":
   version: 7.22.5
   resolution: "@babel/helper-hoist-variables@npm:7.22.5"
@@ -263,6 +304,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-hoist-variables@npm:^7.24.7":
+  version: 7.24.7
+  resolution: "@babel/helper-hoist-variables@npm:7.24.7"
+  dependencies:
+    "@babel/types": "npm:^7.24.7"
+  checksum: 10/6cfdcf2289cd12185dcdbdf2435fa8d3447b797ac75851166de9fc8503e2fd0021db6baf8dfbecad3753e582c08e6a3f805c8d00cbed756060a877d705bd8d8d
+  languageName: node
+  linkType: hard
+
 "@babel/helper-member-expression-to-functions@npm:^7.23.0, @babel/helper-member-expression-to-functions@npm:^7.24.5":
   version: 7.24.5
   resolution: "@babel/helper-member-expression-to-functions@npm:7.24.5"
@@ -312,6 +362,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-plugin-utils@npm:^7.24.7":
+  version: 7.24.7
+  resolution: "@babel/helper-plugin-utils@npm:7.24.7"
+  checksum: 10/dad51622f0123fdba4e2d40a81a6b7d6ef4b1491b2f92fd9749447a36bde809106cf117358705057a2adc8fd73d5dc090222e0561b1213dae8601c8367f5aac8
+  languageName: node
+  linkType: hard
+
 "@babel/helper-remap-async-to-generator@npm:^7.18.9, @babel/helper-remap-async-to-generator@npm:^7.22.20":
   version: 7.22.20
   resolution: "@babel/helper-remap-async-to-generator@npm:7.22.20"
@@ -356,6 +413,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-skip-transparent-expression-wrappers@npm:^7.24.7":
+  version: 7.24.7
+  resolution: "@babel/helper-skip-transparent-expression-wrappers@npm:7.24.7"
+  dependencies:
+    "@babel/traverse": "npm:^7.24.7"
+    "@babel/types": "npm:^7.24.7"
+  checksum: 10/784a6fdd251a9a7e42ccd04aca087ecdab83eddc60fda76a2950e00eb239cc937d3c914266f0cc476298b52ac3f44ffd04c358e808bd17552a7e008d75494a77
+  languageName: node
+  linkType: hard
+
 "@babel/helper-split-export-declaration@npm:^7.24.5":
   version: 7.24.5
   resolution: "@babel/helper-split-export-declaration@npm:7.24.5"
@@ -365,6 +432,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-split-export-declaration@npm:^7.24.7":
+  version: 7.24.7
+  resolution: "@babel/helper-split-export-declaration@npm:7.24.7"
+  dependencies:
+    "@babel/types": "npm:^7.24.7"
+  checksum: 10/ff04a3071603c87de0d6ee2540b7291ab36305b329bd047cdbb6cbd7db335a12f9a77af1cf708779f75f13c4d9af46093c00b34432e50b2411872c658d1a2e5e
+  languageName: node
+  linkType: hard
+
 "@babel/helper-string-parser@npm:^7.24.1":
   version: 7.24.1
   resolution: "@babel/helper-string-parser@npm:7.24.1"
@@ -372,6 +448,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-string-parser@npm:^7.24.7":
+  version: 7.24.7
+  resolution: "@babel/helper-string-parser@npm:7.24.7"
+  checksum: 10/603d8d962bbe89907aa99a8f19a006759ab7b2464615f20a6a22e3e2e8375af37ddd0e5175c9e622e1c4b2d83607ffb41055a59d0ce34404502af30fde573a5c
+  languageName: node
+  linkType: hard
+
 "@babel/helper-validator-identifier@npm:^7.22.20, @babel/helper-validator-identifier@npm:^7.24.5":
   version: 7.24.5
   resolution: "@babel/helper-validator-identifier@npm:7.24.5"
@@ -379,6 +462,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-validator-identifier@npm:^7.24.7":
+  version: 7.24.7
+  resolution: "@babel/helper-validator-identifier@npm:7.24.7"
+  checksum: 10/86875063f57361471b531dbc2ea10bbf5406e12b06d249b03827d361db4cad2388c6f00936bcd9dc86479f7e2c69ea21412c2228d4b3672588b754b70a449d4b
+  languageName: node
+  linkType: hard
+
 "@babel/helper-validator-option@npm:^7.23.5":
   version: 7.23.5
   resolution: "@babel/helper-validator-option@npm:7.23.5"
@@ -420,6 +510,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/highlight@npm:^7.24.7":
+  version: 7.24.7
+  resolution: "@babel/highlight@npm:7.24.7"
+  dependencies:
+    "@babel/helper-validator-identifier": "npm:^7.24.7"
+    chalk: "npm:^2.4.2"
+    js-tokens: "npm:^4.0.0"
+    picocolors: "npm:^1.0.0"
+  checksum: 10/69b73f38cdd4f881b09b939a711e76646da34f4834f4ce141d7a49a6bb1926eab1c594148970a8aa9360398dff800f63aade4e81fafdd7c8d8a8489ea93bfec1
+  languageName: node
+  linkType: hard
+
 "@babel/parser@npm:^7.1.0, @babel/parser@npm:^7.1.6, @babel/parser@npm:^7.13.16, @babel/parser@npm:^7.14.7, @babel/parser@npm:^7.20.0, @babel/parser@npm:^7.20.15, @babel/parser@npm:^7.20.7, @babel/parser@npm:^7.23.3, @babel/parser@npm:^7.23.9, @babel/parser@npm:^7.24.0, @babel/parser@npm:^7.24.5":
   version: 7.24.5
   resolution: "@babel/parser@npm:7.24.5"
@@ -429,6 +531,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/parser@npm:^7.24.7":
+  version: 7.24.7
+  resolution: "@babel/parser@npm:7.24.7"
+  bin:
+    parser: ./bin/babel-parser.js
+  checksum: 10/ef9ebce60e13db560ccc7af9235d460f6726bb7e23ae2d675098c1fc43d5249067be60d4118889dad33b1d4f85162cf66baf554719e1669f29bb20e71322568e
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-bugfix-firefox-class-in-computed-class-key@npm:^7.24.5":
   version: 7.24.5
   resolution: "@babel/plugin-bugfix-firefox-class-in-computed-class-key@npm:7.24.5"
@@ -903,6 +1014,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-arrow-functions@npm:^7.0.0-0":
+  version: 7.24.7
+  resolution: "@babel/plugin-transform-arrow-functions@npm:7.24.7"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.24.7"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/6720173645826046878015c579c2ca9d93cdba79a2832f0180f5cf147d9817c85bf9c8338b16d6bdaa71f87809b7a194a6902e6c82ec00b6354aca6b40abe5e6
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-async-generator-functions@npm:^7.24.3":
   version: 7.24.3
   resolution: "@babel/plugin-transform-async-generator-functions@npm:7.24.3"
@@ -1234,6 +1356,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-nullish-coalescing-operator@npm:^7.0.0-0":
+  version: 7.24.7
+  resolution: "@babel/plugin-transform-nullish-coalescing-operator@npm:7.24.7"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.24.7"
+    "@babel/plugin-syntax-nullish-coalescing-operator": "npm:^7.8.3"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/113cd24b6ce4d0a8e54ad9324428244942ce752a3fd38f8b615c3a786641ec18a00a01b662fe4cbebf369358f5904a975bbde0a977b839f2438b16f0d7d1dd36
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-nullish-coalescing-operator@npm:^7.24.1":
   version: 7.24.1
   resolution: "@babel/plugin-transform-nullish-coalescing-operator@npm:7.24.1"
@@ -1307,6 +1441,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-optional-chaining@npm:^7.0.0-0":
+  version: 7.24.7
+  resolution: "@babel/plugin-transform-optional-chaining@npm:7.24.7"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.24.7"
+    "@babel/helper-skip-transparent-expression-wrappers": "npm:^7.24.7"
+    "@babel/plugin-syntax-optional-chaining": "npm:^7.8.3"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/0835caa8fa8561ba5da8edb82aee93aef8e5145eae33e5400569bb4fae879c596cd35d3bfe7519b222261fc370b1291c499870ca6ad9903e1a71cfaaa27a5454
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-optional-chaining@npm:^7.24.1, @babel/plugin-transform-optional-chaining@npm:^7.24.5":
   version: 7.24.5
   resolution: "@babel/plugin-transform-optional-chaining@npm:7.24.5"
@@ -1489,6 +1636,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-shorthand-properties@npm:^7.0.0-0":
+  version: 7.24.7
+  resolution: "@babel/plugin-transform-shorthand-properties@npm:7.24.7"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.24.7"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/c68c2be965007e0cb6667daa209bc0af877cab4b327ef2e21b2114c38554243c3f7fdcc5b03679b20f72a26d966aa646af771f3165c882067e85a3887647f028
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-spread@npm:^7.0.0, @babel/plugin-transform-spread@npm:^7.24.1":
   version: 7.24.1
   resolution: "@babel/plugin-transform-spread@npm:7.24.1"
@@ -1523,6 +1681,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-template-literals@npm:^7.0.0-0":
+  version: 7.24.7
+  resolution: "@babel/plugin-transform-template-literals@npm:7.24.7"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.24.7"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/ecf05a8511176d5570cb0d481577a407a4e8a9a430f86522d809e0ac2c823913e854ef9e2a1c83c0bd7c12489d82e1b48fabb52e697e80d6a6962125197593ca
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-typeof-symbol@npm:^7.24.5":
   version: 7.24.5
   resolution: "@babel/plugin-transform-typeof-symbol@npm:7.24.5"
@@ -1785,6 +1954,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/template@npm:^7.24.7":
+  version: 7.24.7
+  resolution: "@babel/template@npm:7.24.7"
+  dependencies:
+    "@babel/code-frame": "npm:^7.24.7"
+    "@babel/parser": "npm:^7.24.7"
+    "@babel/types": "npm:^7.24.7"
+  checksum: 10/5975d404ef51cf379515eb0f80b115981d0b9dff5539e53a47516644abb8c83d7559f5b083eb1d4977b20d8359ebb2f911ccd4f729143f8958fdc465f976d843
+  languageName: node
+  linkType: hard
+
 "@babel/traverse@npm:^7.1.6, @babel/traverse@npm:^7.20.0, @babel/traverse@npm:^7.23.3, @babel/traverse@npm:^7.24.1, @babel/traverse@npm:^7.24.5":
   version: 7.24.5
   resolution: "@babel/traverse@npm:7.24.5"
@@ -1803,6 +1983,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/traverse@npm:^7.24.7":
+  version: 7.24.7
+  resolution: "@babel/traverse@npm:7.24.7"
+  dependencies:
+    "@babel/code-frame": "npm:^7.24.7"
+    "@babel/generator": "npm:^7.24.7"
+    "@babel/helper-environment-visitor": "npm:^7.24.7"
+    "@babel/helper-function-name": "npm:^7.24.7"
+    "@babel/helper-hoist-variables": "npm:^7.24.7"
+    "@babel/helper-split-export-declaration": "npm:^7.24.7"
+    "@babel/parser": "npm:^7.24.7"
+    "@babel/types": "npm:^7.24.7"
+    debug: "npm:^4.3.1"
+    globals: "npm:^11.1.0"
+  checksum: 10/785cf26383a992740e492efba7016de964cd06c05c9d7146fa1b5ead409e054c444f50b36dc37856884a56e32cf9d3105ddf1543486b6df68300bffb117a245a
+  languageName: node
+  linkType: hard
+
 "@babel/types@npm:^7.0.0, @babel/types@npm:^7.1.6, @babel/types@npm:^7.20.0, @babel/types@npm:^7.20.7, @babel/types@npm:^7.21.3, @babel/types@npm:^7.22.15, @babel/types@npm:^7.22.5, @babel/types@npm:^7.23.0, @babel/types@npm:^7.23.3, @babel/types@npm:^7.23.4, @babel/types@npm:^7.24.0, @babel/types@npm:^7.24.5, @babel/types@npm:^7.3.3, @babel/types@npm:^7.4.4, @babel/types@npm:^7.8.3":
   version: 7.24.5
   resolution: "@babel/types@npm:7.24.5"
@@ -1814,6 +2012,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/types@npm:^7.24.7":
+  version: 7.24.7
+  resolution: "@babel/types@npm:7.24.7"
+  dependencies:
+    "@babel/helper-string-parser": "npm:^7.24.7"
+    "@babel/helper-validator-identifier": "npm:^7.24.7"
+    to-fast-properties: "npm:^2.0.0"
+  checksum: 10/ad3c8c0d6fb4acb0bb74bb5b4bb849b181bf6185677ef9c59c18856c81e43628d0858253cf232f0eca806f02e08eff85a1d3e636a3e94daea737597796b0b430
+  languageName: node
+  linkType: hard
+
 "@bcoe/v8-coverage@npm:^0.2.3":
   version: 0.2.3
   resolution: "@bcoe/v8-coverage@npm:0.2.3"
@@ -25544,6 +25753,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lucide-react-native@npm:^0.394.0":
+  version: 0.394.0
+  resolution: "lucide-react-native@npm:0.394.0"
+  peerDependencies:
+    react: ^16.5.1 || ^17.0.0 || ^18.0.0
+    react-native: "*"
+    react-native-svg: ^12.0.0 || ^13.0.0 || ^14.0.0 || ^15.0.0
+  checksum: 10/13265594af4d450c77eca99c537ac01d2d4e08b397fa7c013611982b701fdc61794ad70fa6d9558ab87f804f0a327f365cb88d84c245e544d39d9a5719d0db1f
+  languageName: node
+  linkType: hard
+
 "luxon@npm:^3.2.1":
   version: 3.4.4
   resolution: "luxon@npm:3.4.4"
@@ -28593,10 +28813,13 @@ __metadata:
     eslint: "npm:^8.56.0"
     husky: "npm:^8.0.0"
     lint-staged: "npm:^14.0.1"
+    lucide-react-native: "npm:^0.394.0"
     npm-run-all: "npm:^4.1.5"
     patch-package: "npm:^8.0.0"
     postinstall-postinstall: "npm:^2.1.0"
     prettier: "npm:^3.2.5"
+    react-native-reanimated: "npm:^3.12.0"
+    react-native-safe-area-context: "npm:^4.10.4"
     typescript: "npm:^5.3.3"
   languageName: unknown
   linkType: soft
@@ -30589,6 +30812,26 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-native-reanimated@npm:^3.12.0":
+  version: 3.12.0
+  resolution: "react-native-reanimated@npm:3.12.0"
+  dependencies:
+    "@babel/plugin-transform-arrow-functions": "npm:^7.0.0-0"
+    "@babel/plugin-transform-nullish-coalescing-operator": "npm:^7.0.0-0"
+    "@babel/plugin-transform-optional-chaining": "npm:^7.0.0-0"
+    "@babel/plugin-transform-shorthand-properties": "npm:^7.0.0-0"
+    "@babel/plugin-transform-template-literals": "npm:^7.0.0-0"
+    "@babel/preset-typescript": "npm:^7.16.7"
+    convert-source-map: "npm:^2.0.0"
+    invariant: "npm:^2.2.4"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+    react: "*"
+    react-native: "*"
+  checksum: 10/415fb2bfa3ef2134760358c017ae4919727e648a3615cf85d87a95604f17a5ab15fdb25601e266349a3532b0b8b47d73de43b31b2a5dce7d4301997da3c8c739
+  languageName: node
+  linkType: hard
+
 "react-native-reanimated@npm:~3.6.2":
   version: 3.6.3
   resolution: "react-native-reanimated@npm:3.6.3"
@@ -30620,6 +30863,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-native-safe-area-context@npm:^4.10.4":
+  version: 4.10.4
+  resolution: "react-native-safe-area-context@npm:4.10.4"
+  peerDependencies:
+    react: "*"
+    react-native: "*"
+  checksum: 10/314700a17ade765a5843ea78736d1b90e5f8de87abf2e3d46044f805a03e522f58d656d8fd9d61cb3d405d04d5ef64c64a6d5c8b4b0accaa2efeac089d4f93b7
+  languageName: node
+  linkType: hard
+
 "react-native-screens@npm:~3.29.0":
   version: 3.29.0
   resolution: "react-native-screens@npm:3.29.0"

From 92eed6030de81856ee426ca191c06a8f66828905 Mon Sep 17 00:00:00 2001
From: mikeCyb <michaelgashaw972@gmail.com>
Date: Tue, 11 Jun 2024 23:45:26 +0300
Subject: [PATCH 011/257] homepage improvements

---
 .../dashboard/QuickActionButton.tsx           |  6 +--
 packages/app/components/dashboard/Section.tsx |  2 +-
 .../dashboard/feedpreview.style.tsx           |  2 +-
 packages/app/components/layout/Layout.tsx     |  4 +-
 .../components/navigation/Navbar/Navbar.tsx   | 15 ++++++-
 packages/crosspath/types/lib-interface.d.ts   |  4 +-
 packages/crosspath/types/model/types.d.ts     | 41 ++++++++-----------
 7 files changed, 40 insertions(+), 34 deletions(-)

diff --git a/packages/app/components/dashboard/QuickActionButton.tsx b/packages/app/components/dashboard/QuickActionButton.tsx
index 00a81e38f..d1b6b6773 100644
--- a/packages/app/components/dashboard/QuickActionButton.tsx
+++ b/packages/app/components/dashboard/QuickActionButton.tsx
@@ -45,16 +45,15 @@ const loadStyles = (theme: any) => {
     container: {
       margin: 10,
       width: screenWidth <= SCREEN_WIDTH ? '35vw' : '10vw',
-      height: '10vh',
       display: 'flex',
       alignItems: 'center',
+      padding: '20',
     },
     card: {
       flexDirection: 'column',
       justifyContent: 'center',
       alignItems: 'center',
       width: screenWidth <= SCREEN_WIDTH ? '35vw' : '10vw',
-      height: '10vh',
       // paddingHorizontal: 40,
       // paddingVertical: 60,
       backgroundColor: currentTheme.colors.primary,
@@ -63,7 +62,8 @@ const loadStyles = (theme: any) => {
       marginBottom: 10,
     },
     text: {
-      fontSize: 12,
+      fontSize: 13,
+      fontWeight:'bold',
       color: currentTheme.colors.iconColor,
     },
   };
diff --git a/packages/app/components/dashboard/Section.tsx b/packages/app/components/dashboard/Section.tsx
index d4963ebe2..62e2e317c 100644
--- a/packages/app/components/dashboard/Section.tsx
+++ b/packages/app/components/dashboard/Section.tsx
@@ -33,7 +33,7 @@ const loadStyles = (theme: any) => {
     card: {
       justifyContent: 'center',
       alignItems: 'center',
-      width: screenWidth <= SCREEN_WIDTH ? '90vw' : '58vw',
+      width: screenWidth <= SCREEN_WIDTH ? '90vw' : '100%',
       backgroundColor: currentTheme.colors.secondaryBlue,
       borderRadius: 8,
     },
diff --git a/packages/app/components/dashboard/feedpreview.style.tsx b/packages/app/components/dashboard/feedpreview.style.tsx
index 07b06d1ba..cd9f59e83 100644
--- a/packages/app/components/dashboard/feedpreview.style.tsx
+++ b/packages/app/components/dashboard/feedpreview.style.tsx
@@ -25,7 +25,7 @@ const loadStyles = (theme: any, appTheme: any) => {
     },
     feedItemTitle: {
       fontWeight: 'bold',
-      fontSize: 16,
+      fontSize: 17,
       color: currentTheme.colors.text,
       marginBottom: 5,
     },
diff --git a/packages/app/components/layout/Layout.tsx b/packages/app/components/layout/Layout.tsx
index c0d3dd7a7..f80921041 100644
--- a/packages/app/components/layout/Layout.tsx
+++ b/packages/app/components/layout/Layout.tsx
@@ -8,13 +8,13 @@ const Layout = ({ children }) => {
     <View
       style={{
         display: 'flex',
-        alignItems: 'center',
+        alignItems: 'stretch',
         backgroundColor: 'transparent',
         width:
           Platform.OS === 'web'
             ? screenWidth <= SCREEN_WIDTH
               ? '100vw'
-              : '60vw'
+              : '90vw'
             : '100%',
         alignSelf: 'center',
       }}
diff --git a/packages/app/components/navigation/Navbar/Navbar.tsx b/packages/app/components/navigation/Navbar/Navbar.tsx
index 0e8f2f915..a0f3b55ee 100644
--- a/packages/app/components/navigation/Navbar/Navbar.tsx
+++ b/packages/app/components/navigation/Navbar/Navbar.tsx
@@ -18,6 +18,7 @@ export const Navbar = () => {
   const styles = useMemo(() => {
     return StyleSheet.create(loadStyles(currentTheme, isScrolled, screenWidth));
   }, [isScrolled, currentTheme, screenWidth]);
+  const navigate = useNavigate();
 
   return (
     <SafeAreaView style={styles.safeArea}>
@@ -35,8 +36,18 @@ export const Navbar = () => {
               height={40}
               style={styles.logo}
               alt="PackRat Logo"
+              onClick={() => {
+                navigate('/');
+              }}
             />
-            <Text style={styles.logoText}>PackRat</Text>
+            <Text
+              style={styles.logoText}
+              onClick={() => {
+                navigate('/');
+              }}
+            >
+              PackRat
+            </Text>
           </View>
           <Drawer />
         </View>
@@ -112,11 +123,13 @@ const loadStyles = (currentTheme, isScrolled, screenWidth) => {
     },
     logo: {
       marginRight: 10,
+      cursor: 'pointer',
     },
     logoText: {
       color: currentTheme.colors.text,
       fontSize: 38,
       fontWeight: '900',
+      cursor: 'pointer',
     },
     menuBar: {
       flexDirection: 'row',
diff --git a/packages/crosspath/types/lib-interface.d.ts b/packages/crosspath/types/lib-interface.d.ts
index acf8c94d3..524b24431 100644
--- a/packages/crosspath/types/lib-interface.d.ts
+++ b/packages/crosspath/types/lib-interface.d.ts
@@ -1,6 +1,4 @@
 import { LinkComponent, Router, CreateParam } from './model';
-export declare function Link(
-  props: Parameters<LinkComponent>,
-): ReturnType<LinkComponent>;
+export declare function Link(props: Parameters<LinkComponent>): ReturnType<LinkComponent>;
 export declare const createParam: CreateParam;
 export declare function useRouter(): Router;
diff --git a/packages/crosspath/types/model/types.d.ts b/packages/crosspath/types/model/types.d.ts
index 5e7b7414e..9c3ee437d 100644
--- a/packages/crosspath/types/model/types.d.ts
+++ b/packages/crosspath/types/model/types.d.ts
@@ -1,32 +1,27 @@
 import { FC } from 'react';
 import { LinkProps } from 'solito/link';
 export interface CreateParamOptions {
-  initial?: string;
-  parse?: (param: string) => unknown;
-  stringify?: (param: unknown) => string;
+    initial?: string;
+    parse?: (param: string) => unknown;
+    stringify?: (param: unknown) => string;
 }
 export interface Router {
-  push: (url: URL) => void;
-  replace: (url: URL) => void;
-  back: () => void;
+    push: (url: URL) => void;
+    replace: (url: URL) => void;
+    back: () => void;
 }
 export type LinkComponent = FC<LinkProps>;
-export type URL =
-  | string
-  | {
-      pathname?: string;
-      query?: Record<string, any>;
-      state?: Record<string, any>;
-      hash?: string;
-      as?: string | object;
-    };
+export type URL = string | {
+    pathname?: string;
+    query?: Record<string, any>;
+    state?: Record<string, any>;
+    hash?: string;
+    as?: string | object;
+};
 export type CreateParam = <T>() => {
-  useParam: (
-    key: keyof T,
-    options?: CreateParamOptions,
-  ) => [value: any, setValue: (value: any) => void];
-  useParams: (key: keyof T) => {
-    params: T;
-    setParams: (value: any) => void;
-  };
+    useParam: (key: keyof T, options?: CreateParamOptions) => [value: any, setValue: (value: any) => void];
+    useParams: (key: keyof T) => {
+        params: T;
+        setParams: (value: any) => void;
+    };
 };

From 7914b7d52cb7565cbdca65e3aaba80ae3f787b8b Mon Sep 17 00:00:00 2001
From: Andrew Bierman <94939237+andrew-bierman@users.noreply.github.com>
Date: Tue, 11 Jun 2024 21:58:28 -0400
Subject: [PATCH 012/257] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20initial=20set=20up?=
 =?UTF-8?q?=20of=20vectorize=20client?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 server/src/vector/client.ts | 31 +++++++++++++++++++++++++++++++
 1 file changed, 31 insertions(+)
 create mode 100644 server/src/vector/client.ts

diff --git a/server/src/vector/client.ts b/server/src/vector/client.ts
new file mode 100644
index 000000000..9825646ec
--- /dev/null
+++ b/server/src/vector/client.ts
@@ -0,0 +1,31 @@
+class VectorClient {
+  private static _instance: any = null;
+  private constructor() {}
+
+  public static get instance(): any {
+    if (!VectorClient._instance) {
+      throw new Error('VectorClient instance not initialized.');
+    }
+    return VectorClient._instance;
+  }
+
+  public static async init(env: any): Promise<void> {
+    if (!VectorClient._instance) {
+      VectorClient._instance = env.VECTORIZE_INDEX;
+    }
+  }
+
+  public static async insert(id: string, values: number[]) {
+    return await VectorClient.instance.upsert([{ id, values }]);
+  }
+
+  public static async search(queryEmbedding: number[]) {
+    return await VectorClient.instance.query(queryEmbedding, { topK: 5 });
+  }
+}
+
+export { VectorClient };
+
+export interface Env {
+    VECTORIZE_INDEX: any;
+    }
\ No newline at end of file

From 6b99c42ce3b63246521c7b14e3079f5fcd79619b Mon Sep 17 00:00:00 2001
From: Andrew Bierman <94939237+andrew-bierman@users.noreply.github.com>
Date: Tue, 11 Jun 2024 22:11:46 -0400
Subject: [PATCH 013/257] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20add=20cf=20ai=20pa?=
 =?UTF-8?q?ckage?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 server/package.json | 1 +
 yarn.lock           | 8 ++++++++
 2 files changed, 9 insertions(+)

diff --git a/server/package.json b/server/package.json
index 08d8b50f4..a9a45c80d 100644
--- a/server/package.json
+++ b/server/package.json
@@ -36,6 +36,7 @@
   "author": "Andrew Bierman",
   "license": "ISC",
   "dependencies": {
+    "@cloudflare/ai": "^1.2.2",
     "@elysiajs/trpc": "^0.7.0",
     "@hono/node-server": "^1.11.0",
     "@hono/trpc-server": "^0.1.1",
diff --git a/yarn.lock b/yarn.lock
index 2de354121..87cfc8a6e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1833,6 +1833,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@cloudflare/ai@npm:^1.2.2":
+  version: 1.2.2
+  resolution: "@cloudflare/ai@npm:1.2.2"
+  checksum: 10/8d0790c2e9485ffa090a4d93ff114f3c04c906d91f8b43a3d8462d77817e1c3fad1fa26842fa7e41aad5c6ce135d6392c38ec688b9d009eb813173fe1566be12
+  languageName: node
+  linkType: hard
+
 "@cloudflare/kv-asset-handler@npm:0.3.1":
   version: 0.3.1
   resolution: "@cloudflare/kv-asset-handler@npm:0.3.1"
@@ -32251,6 +32258,7 @@ __metadata:
   resolution: "server@workspace:server"
   dependencies:
     "@anatine/zod-mock": "npm:^3.13.4"
+    "@cloudflare/ai": "npm:^1.2.2"
     "@cloudflare/vitest-pool-workers": "npm:0.2.2"
     "@cloudflare/workers-types": "npm:4.20240419.0"
     "@elysiajs/trpc": "npm:^0.7.0"

From 5d6694cbb09dd8632967f3121b234cbe3e497bc8 Mon Sep 17 00:00:00 2001
From: Andrew Bierman <94939237+andrew-bierman@users.noreply.github.com>
Date: Tue, 11 Jun 2024 22:12:22 -0400
Subject: [PATCH 014/257] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20add=20ai=20client?=
 =?UTF-8?q?=20integration?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/crosspath/types/lib-interface.d.ts |  4 +-
 packages/crosspath/types/model/types.d.ts   | 41 +++++++++------------
 server/src/integrations/ai/client.ts        | 30 +++++++++++++++
 server/src/vector/client.ts                 | 16 +++++++-
 4 files changed, 63 insertions(+), 28 deletions(-)
 create mode 100644 server/src/integrations/ai/client.ts

diff --git a/packages/crosspath/types/lib-interface.d.ts b/packages/crosspath/types/lib-interface.d.ts
index acf8c94d3..524b24431 100644
--- a/packages/crosspath/types/lib-interface.d.ts
+++ b/packages/crosspath/types/lib-interface.d.ts
@@ -1,6 +1,4 @@
 import { LinkComponent, Router, CreateParam } from './model';
-export declare function Link(
-  props: Parameters<LinkComponent>,
-): ReturnType<LinkComponent>;
+export declare function Link(props: Parameters<LinkComponent>): ReturnType<LinkComponent>;
 export declare const createParam: CreateParam;
 export declare function useRouter(): Router;
diff --git a/packages/crosspath/types/model/types.d.ts b/packages/crosspath/types/model/types.d.ts
index 5e7b7414e..9c3ee437d 100644
--- a/packages/crosspath/types/model/types.d.ts
+++ b/packages/crosspath/types/model/types.d.ts
@@ -1,32 +1,27 @@
 import { FC } from 'react';
 import { LinkProps } from 'solito/link';
 export interface CreateParamOptions {
-  initial?: string;
-  parse?: (param: string) => unknown;
-  stringify?: (param: unknown) => string;
+    initial?: string;
+    parse?: (param: string) => unknown;
+    stringify?: (param: unknown) => string;
 }
 export interface Router {
-  push: (url: URL) => void;
-  replace: (url: URL) => void;
-  back: () => void;
+    push: (url: URL) => void;
+    replace: (url: URL) => void;
+    back: () => void;
 }
 export type LinkComponent = FC<LinkProps>;
-export type URL =
-  | string
-  | {
-      pathname?: string;
-      query?: Record<string, any>;
-      state?: Record<string, any>;
-      hash?: string;
-      as?: string | object;
-    };
+export type URL = string | {
+    pathname?: string;
+    query?: Record<string, any>;
+    state?: Record<string, any>;
+    hash?: string;
+    as?: string | object;
+};
 export type CreateParam = <T>() => {
-  useParam: (
-    key: keyof T,
-    options?: CreateParamOptions,
-  ) => [value: any, setValue: (value: any) => void];
-  useParams: (key: keyof T) => {
-    params: T;
-    setParams: (value: any) => void;
-  };
+    useParam: (key: keyof T, options?: CreateParamOptions) => [value: any, setValue: (value: any) => void];
+    useParams: (key: keyof T) => {
+        params: T;
+        setParams: (value: any) => void;
+    };
 };
diff --git a/server/src/integrations/ai/client.ts b/server/src/integrations/ai/client.ts
new file mode 100644
index 000000000..bd34c6a13
--- /dev/null
+++ b/server/src/integrations/ai/client.ts
@@ -0,0 +1,30 @@
+import { Ai } from "@cloudflare/ai";
+
+class AiClient {
+  private static _instance: Ai | null = null;
+  private constructor() {}
+
+  public static get instance(): Ai {
+    if (!AiClient._instance) {
+      throw new Error('AiClient instance not initialized.');
+    }
+    return AiClient._instance;
+  }
+
+  public static async init(env: any): Promise<void> {
+    if (!AiClient._instance) {
+      AiClient._instance = new Ai(env.AI);
+    }
+  }
+
+  public static async getEmbedding(content: string): Promise<number[]> {
+    const { data } = await AiClient.instance.run('@cf/baai/bge-base-en-v1.5', { text: [content] });
+    return data[0];
+  }
+}
+
+export { AiClient };
+
+export interface Env {
+  AI: any;
+}
diff --git a/server/src/vector/client.ts b/server/src/vector/client.ts
index 9825646ec..4ef90e142 100644
--- a/server/src/vector/client.ts
+++ b/server/src/vector/client.ts
@@ -1,3 +1,5 @@
+import { AiClient } from '../integrations/ai/client';
+
 class VectorClient {
   private static _instance: any = null;
   private constructor() {}
@@ -22,10 +24,20 @@ class VectorClient {
   public static async search(queryEmbedding: number[]) {
     return await VectorClient.instance.query(queryEmbedding, { topK: 5 });
   }
+
+  public static async syncRecord(
+    env: any,
+    table: string,
+    id: string,
+    content: string,
+  ) {
+    const values = await AiClient.getEmbedding(content);
+    await VectorClient.insert(id, values);
+  }
 }
 
 export { VectorClient };
 
 export interface Env {
-    VECTORIZE_INDEX: any;
-    }
\ No newline at end of file
+  VECTORIZE_INDEX: any;
+}

From b72c66cca04075ed3c8a06c59a19a445b4a9a671 Mon Sep 17 00:00:00 2001
From: Andrew Bierman <94939237+andrew-bierman@users.noreply.github.com>
Date: Tue, 11 Jun 2024 22:17:05 -0400
Subject: [PATCH 015/257] =?UTF-8?q?=F0=9F=8E=A8=20example=20of=20possible?=
 =?UTF-8?q?=20syncing=20logic?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 server/src/services/pack/addPackService.ts |  8 ++++++++
 server/src/vector/client.ts                | 13 +++++++------
 server/wrangler.toml.example               | 11 +++++++++--
 3 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/server/src/services/pack/addPackService.ts b/server/src/services/pack/addPackService.ts
index f469cd909..5fe089193 100644
--- a/server/src/services/pack/addPackService.ts
+++ b/server/src/services/pack/addPackService.ts
@@ -1,4 +1,5 @@
 import { Pack } from '../../drizzle/methods/pack';
+import { VectorClient } from '../../vector/client';
 
 /**
  * Adds a new pack service.
@@ -23,5 +24,12 @@ export const addPackService = async (
   }
   // Create the new pack
   const createdPack = await packClass.create({ name, owner_id, is_public });
+
+  // Trigger vector sync
+  await VectorClient.syncRecord({
+    id: createdPack.id,
+    content: name,
+  });
+
   return createdPack;
 };
diff --git a/server/src/vector/client.ts b/server/src/vector/client.ts
index 4ef90e142..9ac0553a7 100644
--- a/server/src/vector/client.ts
+++ b/server/src/vector/client.ts
@@ -25,12 +25,13 @@ class VectorClient {
     return await VectorClient.instance.query(queryEmbedding, { topK: 5 });
   }
 
-  public static async syncRecord(
-    env: any,
-    table: string,
-    id: string,
-    content: string,
-  ) {
+  public static async syncRecord({
+    id,
+    content,
+  }: {
+    id: string;
+    content: string;
+  }) {
     const values = await AiClient.getEmbedding(content);
     await VectorClient.insert(id, values);
   }
diff --git a/server/wrangler.toml.example b/server/wrangler.toml.example
index 90f5ed2e8..4b4ff348f 100644
--- a/server/wrangler.toml.example
+++ b/server/wrangler.toml.example
@@ -1,14 +1,21 @@
 name = "packrat_api"
 main = "src/index.ts"
 compatibility_date = "2024-03-14"
-compatibility_flags = ["nodejs_compat"]
-# node_compat = true # Sometimes this is needed for tests 
+compatibility_flags = ["nodejs_compat"] # Sometimes this is needed for tests
+# node_compat = true
 
 [[ d1_databases ]]
 binding = "DB"
 database_name = "production"
 database_id = "3f9677cd-7dd9-4a2c-92c6-be5dbbf47baa"
 
+[ai]
+binding = "AI"
+
+[[vectorize]]
+binding = "VECTOR_INDEX"
+index_name = "vector-index"
+
 # Add vars below
 # [vars]
 # GOOGLE_CLIENT_ID=""

From 62644f9283fd8528c9121044cd90ebe0292e93c9 Mon Sep 17 00:00:00 2001
From: Andrew Bierman <94939237+andrew-bierman@users.noreply.github.com>
Date: Tue, 11 Jun 2024 22:33:21 -0400
Subject: [PATCH 016/257] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20setting=20up=20the?=
 =?UTF-8?q?=20vector=20and=20ai=20clients,=20WIP?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 server/src/index.ts                        | 2 ++
 server/src/integrations/ai/client.ts       | 4 ++--
 server/src/services/pack/addPackService.ts | 2 +-
 server/src/trpc/context.ts                 | 6 ++++++
 server/src/vector/client.ts                | 4 ++--
 5 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/server/src/index.ts b/server/src/index.ts
index c159ba3b9..0cb6dd4b1 100644
--- a/server/src/index.ts
+++ b/server/src/index.ts
@@ -10,6 +10,8 @@ import router from './routes';
 interface Bindings {
   [key: string]: any;
   DB: IDBDatabase;
+  VECTOR_INDEX: string;
+  AI: any;
   JWT_VERIFICATION_KEY: string;
   APP_URL: string;
   CORS_ORIGIN: string;
diff --git a/server/src/integrations/ai/client.ts b/server/src/integrations/ai/client.ts
index bd34c6a13..2daf9b61a 100644
--- a/server/src/integrations/ai/client.ts
+++ b/server/src/integrations/ai/client.ts
@@ -11,9 +11,9 @@ class AiClient {
     return AiClient._instance;
   }
 
-  public static async init(env: any): Promise<void> {
+  public static async init(cfAi): Promise<void> {
     if (!AiClient._instance) {
-      AiClient._instance = new Ai(env.AI);
+      AiClient._instance = new Ai(cfAi);
     }
   }
 
diff --git a/server/src/services/pack/addPackService.ts b/server/src/services/pack/addPackService.ts
index 5fe089193..38ace7b13 100644
--- a/server/src/services/pack/addPackService.ts
+++ b/server/src/services/pack/addPackService.ts
@@ -26,7 +26,7 @@ export const addPackService = async (
   const createdPack = await packClass.create({ name, owner_id, is_public });
 
   // Trigger vector sync
-  await VectorClient.syncRecord({
+  await VectorClient.instance.syncRecord({
     id: createdPack.id,
     content: name,
   });
diff --git a/server/src/trpc/context.ts b/server/src/trpc/context.ts
index 0f7a0751a..e190bcdd5 100644
--- a/server/src/trpc/context.ts
+++ b/server/src/trpc/context.ts
@@ -1,6 +1,8 @@
 import { type Context } from 'hono';
 import { extractTokenAndGetUser } from './utils/auth';
 import { DbClient } from '../db/client';
+import { VectorClient } from '../vector/client';
+import { AiClient } from '../integrations/ai/client';
 
 let DB: D1Database;
 
@@ -13,7 +15,11 @@ export const createContext = (honoContext: Context) => async () => {
   const { env, req } = honoContext;
   const { DB: db, ...restEnv } = env;
   DB = db;
+
   await DbClient.init(honoContext.env.DB);
+  await VectorClient.init(honoContext.env.VECTOR_INDEX);
+  await AiClient.init(honoContext.env.AI);
+
   const user = await extractTokenAndGetUser(req.raw, env.JWT_SECRET);
 
   return {
diff --git a/server/src/vector/client.ts b/server/src/vector/client.ts
index 9ac0553a7..41003bdfe 100644
--- a/server/src/vector/client.ts
+++ b/server/src/vector/client.ts
@@ -11,9 +11,9 @@ class VectorClient {
     return VectorClient._instance;
   }
 
-  public static async init(env: any): Promise<void> {
+  public static async init(vectorize): Promise<void> {
     if (!VectorClient._instance) {
-      VectorClient._instance = env.VECTORIZE_INDEX;
+      VectorClient._instance = vectorize;
     }
   }
 

From 2b29320334d3a8a4f74e0d00e4b082b975ccf593 Mon Sep 17 00:00:00 2001
From: Anmol Verma <anmolverma2810@gmail.com>
Date: Wed, 12 Jun 2024 15:56:26 +0530
Subject: [PATCH 017/257] Modify conditon on add to favorite button

---
 packages/app/components/feed/FeedCard.tsx         | 2 +-
 packages/app/components/feed/FeedSearchFilter.tsx | 9 +++++----
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/packages/app/components/feed/FeedCard.tsx b/packages/app/components/feed/FeedCard.tsx
index 9113fa6a8..ec56a32d6 100644
--- a/packages/app/components/feed/FeedCard.tsx
+++ b/packages/app/components/feed/FeedCard.tsx
@@ -297,7 +297,7 @@ export default function Card({
                               gap: 8,
                             }}
                           >
-                            {user?.id === owner_id ? null : (
+                            {user?.id === owner_id.id ? null : (
                               <TouchableOpacity onPress={handleAddToFavorite}>
                                 <AntDesign
                                   name="heart"
diff --git a/packages/app/components/feed/FeedSearchFilter.tsx b/packages/app/components/feed/FeedSearchFilter.tsx
index 02946b5fd..668cb52d2 100644
--- a/packages/app/components/feed/FeedSearchFilter.tsx
+++ b/packages/app/components/feed/FeedSearchFilter.tsx
@@ -17,6 +17,7 @@ import { AntDesign } from '@expo/vector-icons';
 import DropdownComponent from 'app/components/Dropdown';
 import Layout from 'app/components/layout/Layout';
 import { useScreenWidth } from 'app/hooks/common';
+import { SCREEN_WIDTH } from 'app/constants/breakpoint';
 const RStack: any = OriginalRStack;
 const RText: any = OriginalRText;
 const RSeparator: any = OriginalRSeparator;
@@ -73,7 +74,7 @@ const FeedSearchFilter = ({
               style={{ flexDirection: 'row', justifyContent: 'center' }}
             >
               <FormInput
-                width={screenWidth <= 425 ? '30vw' : '12vw'}
+                width={screenWidth <= SCREEN_WIDTH ? '30vw' : '12vw'}
                 placeholder={`Search ${feedType || 'Feed'}`}
                 name="search"
                 value={searchValue}
@@ -119,7 +120,7 @@ const FeedSearchFilter = ({
                 <RSwitch
                   id="single-switch"
                   size="$1.5"
-                  width="$4"
+                  width={ screenWidth <= SCREEN_WIDTH ?"10vw" : '3vw'}
                   checked={selectedTypes.pack}
                   onCheckedChange={handleTogglePack}
                 >
@@ -135,7 +136,7 @@ const FeedSearchFilter = ({
                 <RSwitch
                   id="two-switch"
                   size="$1.5"
-                  width="$4"
+                  width={ screenWidth <= SCREEN_WIDTH ?"10vw" : '3vw'}
                   checked={selectedTypes.trip}
                   onCheckedChange={handleToggleTrip}
                 >
@@ -165,7 +166,7 @@ const FeedSearchFilter = ({
                 style={styles.dropdown}
                 width={
                   Platform.OS === 'web'
-                    ? screenWidth <= 425
+                    ? screenWidth <= SCREEN_WIDTH
                       ? '30vw'
                       : '8vw'
                     : 120

From f6ccc77e11c33337918aebb540b37c17ebed8a6d Mon Sep 17 00:00:00 2001
From: Anmol Verma <anmolverma2810@gmail.com>
Date: Wed, 12 Jun 2024 19:52:56 +0530
Subject: [PATCH 018/257] Sort name and alignment changes

---
 packages/app/components/feed/FeedSearchFilter.tsx | 11 +++++------
 packages/app/components/map/MapButtonsOverlay.tsx |  4 ++--
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/packages/app/components/feed/FeedSearchFilter.tsx b/packages/app/components/feed/FeedSearchFilter.tsx
index 02946b5fd..cdacdf762 100644
--- a/packages/app/components/feed/FeedSearchFilter.tsx
+++ b/packages/app/components/feed/FeedSearchFilter.tsx
@@ -69,11 +69,10 @@ const FeedSearchFilter = ({
         <View style={styles.searchContainer}>
           <Form>
             <RStack
-              space={3}
-              style={{ flexDirection: 'row', justifyContent: 'center' }}
+              style={{ flexDirection: 'row',marginLeft:30, }}
             >
               <FormInput
-                width={screenWidth <= 425 ? '30vw' : '12vw'}
+                width={Platform.OS === "web" ? screenWidth <= 425 ? '30vw' : '12vw': '100%'}
                 placeholder={`Search ${feedType || 'Feed'}`}
                 name="search"
                 value={searchValue}
@@ -161,14 +160,14 @@ const FeedSearchFilter = ({
                 value={queryString}
                 data={dataValues}
                 onValueChange={handleSortChange}
-                placeholder="Sort By"
+                placeholder={queryString}
                 style={styles.dropdown}
                 width={
                   Platform.OS === 'web'
                     ? screenWidth <= 425
                       ? '30vw'
                       : '8vw'
-                    : 120
+                    : '50%'
                 }
               />
             </RStack>
@@ -224,4 +223,4 @@ const loadStyles = (theme: any) => {
   };
 };
 
-export default FeedSearchFilter;
+export default FeedSearchFilter;
\ No newline at end of file
diff --git a/packages/app/components/map/MapButtonsOverlay.tsx b/packages/app/components/map/MapButtonsOverlay.tsx
index 7aa5ac1db..73d4199ce 100644
--- a/packages/app/components/map/MapButtonsOverlay.tsx
+++ b/packages/app/components/map/MapButtonsOverlay.tsx
@@ -332,9 +332,9 @@ const loadStyles = (theme) => {
       height: 21,
     },
     downloadText: {
-      fontSize: 13,
+      fontSize: 15,
       fontWeight: '500',
-      marginLeft: 8,
+      marginRight:8
     },
     modal: {
       alignItems: 'center',

From 1d9616d5f9bda13325f36b4b8ed3fd2ab2f4ccd0 Mon Sep 17 00:00:00 2001
From: mikeCyb <michaelgashaw972@gmail.com>
Date: Wed, 12 Jun 2024 21:24:49 +0300
Subject: [PATCH 019/257] homepage alignment fix

---
 packages/app/components/layout/Layout.tsx |  4 +++-
 packages/app/screens/dashboard/index.tsx  | 11 +++++++++--
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/packages/app/components/layout/Layout.tsx b/packages/app/components/layout/Layout.tsx
index f80921041..aecf0f01a 100644
--- a/packages/app/components/layout/Layout.tsx
+++ b/packages/app/components/layout/Layout.tsx
@@ -8,7 +8,9 @@ const Layout = ({ children }) => {
     <View
       style={{
         display: 'flex',
-        alignItems: 'stretch',
+        justifyContent: 'center',
+        alignItems: 'center',
+        margin: '0 auto',
         backgroundColor: 'transparent',
         width:
           Platform.OS === 'web'
diff --git a/packages/app/screens/dashboard/index.tsx b/packages/app/screens/dashboard/index.tsx
index 62422114d..9047cf261 100644
--- a/packages/app/screens/dashboard/index.tsx
+++ b/packages/app/screens/dashboard/index.tsx
@@ -8,6 +8,8 @@ import Section from '../../components/dashboard/Section';
 import SectionHeader from '../../components/dashboard/SectionHeader';
 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';
 
 const Dashboard = () => {
   const styles = useCustomStyles(loadStyles);
@@ -44,10 +46,9 @@ const Dashboard = () => {
 
 const loadStyles = (theme) => {
   const { currentTheme } = theme;
+  const { screenWidth } = useScreenWidth();
   return {
     container: {
-      flex: 1,
-      flexGrow: 1,
       backgroundColor: currentTheme.colors.background,
       width: '100%',
       paddingBottom: 50,
@@ -57,6 +58,12 @@ const loadStyles = (theme) => {
       justifyContent: 'flex-start',
       alignItems: 'stretch',
       paddingHorizontal: 20,
+      width:
+      Platform.OS === 'web'
+        ? screenWidth <= SCREEN_WIDTH
+          ? '100vw'
+          : '90vw'
+        : '100%',
     },
     cardContainer: {
       flexDirection: 'column',

From 1d732f471ab491000c9584c768c3a064ac45358b Mon Sep 17 00:00:00 2001
From: Andrew Bierman <94939237+andrew-bierman@users.noreply.github.com>
Date: Wed, 12 Jun 2024 21:48:45 -0400
Subject: [PATCH 020/257] =?UTF-8?q?=F0=9F=8F=B7=EF=B8=8F=20add=20env=20typ?=
 =?UTF-8?q?es?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 server/src/index.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/server/src/index.ts b/server/src/index.ts
index 0cb6dd4b1..448783325 100644
--- a/server/src/index.ts
+++ b/server/src/index.ts
@@ -6,12 +6,13 @@ import { cors } from 'hono/cors';
 // import { logger } from 'hono/logger';
 import { compress } from 'hono/compress';
 import router from './routes';
+import { Ai } from '@cloudflare/ai';
 
 interface Bindings {
   [key: string]: any;
   DB: IDBDatabase;
-  VECTOR_INDEX: string;
-  AI: any;
+  VECTOR_INDEX: VectorizeIndex;
+  AI: Ai;
   JWT_VERIFICATION_KEY: string;
   APP_URL: string;
   CORS_ORIGIN: string;

From 8855ee7c4fb37226fe721341ea57176430edf63d Mon Sep 17 00:00:00 2001
From: Andrew Bierman <94939237+andrew-bierman@users.noreply.github.com>
Date: Wed, 12 Jun 2024 21:49:16 -0400
Subject: [PATCH 021/257] =?UTF-8?q?=F0=9F=90=9B=20table=20string=20bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/packages/app/components/pack_table/TableItem.tsx b/packages/app/components/pack_table/TableItem.tsx
index 3830fa85c..0d377e675 100644
--- a/packages/app/components/pack_table/TableItem.tsx
+++ b/packages/app/components/pack_table/TableItem.tsx
@@ -70,7 +70,7 @@ const TableItem = ({
 
   let rowData = [
     <RText px={8}>{name}</RText>,
-    <RText px={0}>{${formatNumber(weight)} ${unit}}</RText>,
+    <RText px={0}>{`${formatNumber(weight)} ${unit}`}</RText>,
     <RText px={0}>{quantity}</RText>,
   ];
   if (hasPermissions) {
@@ -84,7 +84,7 @@ const TableItem = ({
       rowData.push(<ZDropdown.Web dropdownItems={rowActionItems} />);
     }
   }
-  
+
   /*
   * this id is passed as pack id but it is a item id which is confusing
   Todo need to change the name for this passing argument and remaining functions which are getting it

From 5f08dfea7418f55005ddfb50256d71d49fb0be15 Mon Sep 17 00:00:00 2001
From: Andrew Bierman <94939237+andrew-bierman@users.noreply.github.com>
Date: Wed, 12 Jun 2024 22:41:16 -0400
Subject: [PATCH 022/257] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20add=20cloudflare?=
 =?UTF-8?q?=20vectorize=20api=20so=20local=20dev=20doesn't=20break?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 server/src/index.ts          |  2 +
 server/src/trpc/context.ts   |  7 ++-
 server/src/vector/client.ts  | 99 +++++++++++++++++++++++++++++-------
 server/wrangler.toml.example |  4 +-
 4 files changed, 92 insertions(+), 20 deletions(-)

diff --git a/server/src/index.ts b/server/src/index.ts
index 448783325..eb0f693d5 100644
--- a/server/src/index.ts
+++ b/server/src/index.ts
@@ -17,6 +17,8 @@ interface Bindings {
   APP_URL: string;
   CORS_ORIGIN: string;
   MAPBOX_ACCESS_TOKEN: string;
+  CLOUDFLARE_ACCOUNT_ID: string;
+  VECTORIZE_API_KEY: string;
 }
 
 const TRPC_API_ENDPOINT = '/api/trpc';
diff --git a/server/src/trpc/context.ts b/server/src/trpc/context.ts
index e190bcdd5..fe0cdb374 100644
--- a/server/src/trpc/context.ts
+++ b/server/src/trpc/context.ts
@@ -17,7 +17,12 @@ export const createContext = (honoContext: Context) => async () => {
   DB = db;
 
   await DbClient.init(honoContext.env.DB);
-  await VectorClient.init(honoContext.env.VECTOR_INDEX);
+  await VectorClient.init({
+    apiKey: honoContext.env.VECTORIZE_API_KEY,
+    // indexName: honoContext.env.VECTOR_INDEX,
+    indexName: 'vector-index', // TODO: Change to 'VECTOR_INDEX
+    accountId: honoContext.env.CLOUDFLARE_ACCOUNT_ID,
+  });
   await AiClient.init(honoContext.env.AI);
 
   const user = await extractTokenAndGetUser(req.raw, env.JWT_SECRET);
diff --git a/server/src/vector/client.ts b/server/src/vector/client.ts
index 41003bdfe..d9983000d 100644
--- a/server/src/vector/client.ts
+++ b/server/src/vector/client.ts
@@ -1,44 +1,107 @@
 import { AiClient } from '../integrations/ai/client';
 
 class VectorClient {
-  private static _instance: any = null;
-  private constructor() {}
+  private static _instance: VectorClient | null = null;
+  private apiKey: string;
+  private indexName: string;
+  private accountId: string;
 
-  public static get instance(): any {
+  private constructor(apiKey: string, indexName: string, accountId: string) {
+    this.apiKey = apiKey;
+    this.indexName = indexName;
+    this.accountId = accountId;
+  }
+
+  public static get instance(): VectorClient {
     if (!VectorClient._instance) {
       throw new Error('VectorClient instance not initialized.');
     }
     return VectorClient._instance;
   }
 
-  public static async init(vectorize): Promise<void> {
+  public static async init({
+    apiKey,
+    indexName,
+    accountId,
+  }: {
+    apiKey: string;
+    indexName: string;
+    accountId: string;
+  }): Promise<void> {
     if (!VectorClient._instance) {
-      VectorClient._instance = vectorize;
+      VectorClient._instance = new VectorClient(apiKey, indexName, accountId);
     }
   }
 
-  public static async insert(id: string, values: number[]) {
-    return await VectorClient.instance.upsert([{ id, values }]);
+  // Commented out the original logic
+  // public async insert(id: string, values: number[]) {
+  //   return await this.instance.upsert([{ id, values }]);
+  // }
+
+  // New API-based insert method
+  public async insert(id: string, values: number[]) {
+    const url = `https://api.cloudflare.com/client/v4/accounts/${this.accountId}/vectorize/indexes/${this.indexName}/insert`;
+    const ndjsonBody = `${JSON.stringify({ id, values })}\n`;
+
+    const response = await fetch(url, {
+      method: 'PUT',
+      headers: {
+        'Content-Type': 'application/x-ndjson',
+        'Authorization': `Bearer ${this.apiKey}`,
+      },
+      body: ndjsonBody,
+    });
+
+    if (!response.ok) {
+      const errorText = await response.text();
+      throw new Error(
+        `Failed to insert vector: ${response.statusText} - ${errorText}`,
+      );
+    }
+
+    return await response.json();
   }
 
-  public static async search(queryEmbedding: number[]) {
-    return await VectorClient.instance.query(queryEmbedding, { topK: 5 });
+
+  // Commented out the original logic
+  // public async search(queryEmbedding: number[]) {
+  //   return await this.instance.query(queryEmbedding, { topK: 5 });
+  // }
+
+  // New API-based search method
+  public async search(queryEmbedding: number[]) {
+    const url = `https://api.cloudflare.com/client/v4/accounts/${this.accountId}/vectorize/indexes/${this.indexName}/vectors/query`;
+    const response = await fetch(url, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${this.apiKey}`,
+      },
+      body: JSON.stringify({
+        queries: [{ values: queryEmbedding, topK: 5 }],
+      }),
+    });
+
+    if (!response.ok) {
+      const errorText = await response.text();
+      throw new Error(
+        `Failed to search vectors: ${response.statusText} - ${errorText}`,
+      );
+    }
+
+    return await response.json();
   }
 
-  public static async syncRecord({
-    id,
-    content,
-  }: {
-    id: string;
-    content: string;
-  }) {
+  public async syncRecord({ id, content }: { id: string; content: string }) {
     const values = await AiClient.getEmbedding(content);
-    await VectorClient.insert(id, values);
+    await this.insert(id, values);
   }
 }
 
 export { VectorClient };
 
 export interface Env {
-  VECTORIZE_INDEX: any;
+  VECTORIZE_API_KEY: string;
+  VECTORIZE_INDEX_NAME: string;
+  ACCOUNT_ID: string;
 }
diff --git a/server/wrangler.toml.example b/server/wrangler.toml.example
index 4b4ff348f..cdec98215 100644
--- a/server/wrangler.toml.example
+++ b/server/wrangler.toml.example
@@ -28,4 +28,6 @@ index_name = "vector-index"
 # OSM_URI=""
 # WEATHER_URL=""
 # WEATHER_WEEK_URL=""
-# OPENWEATHER_KEY=""
\ No newline at end of file
+# OPENWEATHER_KEY=""
+# VECTORIZE_API_KEY=""
+# CLOUDFLARE_ACCOUNT_ID=""
\ No newline at end of file

From f33675083f24a6431545ffa5e689a10bfa8ff2ba Mon Sep 17 00:00:00 2001
From: Andrew Bierman <94939237+andrew-bierman@users.noreply.github.com>
Date: Wed, 12 Jun 2024 22:51:08 -0400
Subject: [PATCH 023/257] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20add=20basic=20queu?=
 =?UTF-8?q?e=20wrapper=20of=20event=20emitters?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 server/src/queue/client.ts                 | 25 ++++++++++++++++++++++
 server/src/services/pack/addPackService.ts | 17 +++++++++------
 2 files changed, 36 insertions(+), 6 deletions(-)
 create mode 100644 server/src/queue/client.ts

diff --git a/server/src/queue/client.ts b/server/src/queue/client.ts
new file mode 100644
index 000000000..4b0809734
--- /dev/null
+++ b/server/src/queue/client.ts
@@ -0,0 +1,25 @@
+import PQueue from 'p-queue';
+
+interface QueueTask<T> {
+  (): Promise<T>;
+}
+
+export class Queue {
+  private static instance: Queue;
+  private queue: PQueue;
+
+  private constructor(concurrency: number = 1) {
+    this.queue = new PQueue({ concurrency });
+  }
+
+  static getInstance(concurrency: number = 1): Queue {
+    if (!Queue.instance) {
+      Queue.instance = new Queue(concurrency);
+    }
+    return Queue.instance;
+  }
+
+  async addTask<T>(task: QueueTask<T>): Promise<T> {
+    return this.queue.add(task);
+  }
+}
\ No newline at end of file
diff --git a/server/src/services/pack/addPackService.ts b/server/src/services/pack/addPackService.ts
index 38ace7b13..63e974193 100644
--- a/server/src/services/pack/addPackService.ts
+++ b/server/src/services/pack/addPackService.ts
@@ -1,14 +1,14 @@
 import { Pack } from '../../drizzle/methods/pack';
+import { Queue } from '../../queue/client';
 import { VectorClient } from '../../vector/client';
 
 /**
  * Adds a new pack service.
- * @param {PrismaClient} prisma - Prisma client.
  * @param {string} name - The name of the pack.
  * @param {string} owner_id - The ID of the pack owner.
+ * @param {boolean} is_public - Whether the pack is public or not.
  * @return {Object} An object containing the created pack.
  */
-
 export const addPackService = async (
   name: string,
   owner_id: string,
@@ -25,10 +25,15 @@ export const addPackService = async (
   // Create the new pack
   const createdPack = await packClass.create({ name, owner_id, is_public });
 
-  // Trigger vector sync
-  await VectorClient.instance.syncRecord({
-    id: createdPack.id,
-    content: name,
+  // Get the queue instance
+  const queue = Queue.getInstance();
+
+  // Add the vector sync task to the queue
+  await queue.addTask(async () => {
+    await VectorClient.instance.syncRecord({
+      id: createdPack.id,
+      content: name,
+    });
   });
 
   return createdPack;

From 2002186a793168b8f9af78dde897aea6a9552dc8 Mon Sep 17 00:00:00 2001
From: Andrew Bierman <94939237+andrew-bierman@users.noreply.github.com>
Date: Wed, 12 Jun 2024 22:51:50 -0400
Subject: [PATCH 024/257] =?UTF-8?q?=F0=9F=97=91=EF=B8=8F=20move=20old=20qu?=
 =?UTF-8?q?eue=20and=20workers=20into=20bun=20server=20for=20later=20usage?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 {server => apps/bun-server}/src/queue/processJob.ts      | 0
 {server => apps/bun-server}/src/queue/queueManager.ts    | 0
 {server => apps/bun-server}/src/queue/queueTest.ts       | 0
 {server => apps/bun-server}/src/workers/createPiscina.ts | 0
 {server => apps/bun-server}/src/workers/mockWorker.ts    | 0
 {server => apps/bun-server}/src/workers/osmWorker.ts     | 0
 {server => apps/bun-server}/src/workers/worker.ts        | 0
 7 files changed, 0 insertions(+), 0 deletions(-)
 rename {server => apps/bun-server}/src/queue/processJob.ts (100%)
 rename {server => apps/bun-server}/src/queue/queueManager.ts (100%)
 rename {server => apps/bun-server}/src/queue/queueTest.ts (100%)
 rename {server => apps/bun-server}/src/workers/createPiscina.ts (100%)
 rename {server => apps/bun-server}/src/workers/mockWorker.ts (100%)
 rename {server => apps/bun-server}/src/workers/osmWorker.ts (100%)
 rename {server => apps/bun-server}/src/workers/worker.ts (100%)

diff --git a/server/src/queue/processJob.ts b/apps/bun-server/src/queue/processJob.ts
similarity index 100%
rename from server/src/queue/processJob.ts
rename to apps/bun-server/src/queue/processJob.ts
diff --git a/server/src/queue/queueManager.ts b/apps/bun-server/src/queue/queueManager.ts
similarity index 100%
rename from server/src/queue/queueManager.ts
rename to apps/bun-server/src/queue/queueManager.ts
diff --git a/server/src/queue/queueTest.ts b/apps/bun-server/src/queue/queueTest.ts
similarity index 100%
rename from server/src/queue/queueTest.ts
rename to apps/bun-server/src/queue/queueTest.ts
diff --git a/server/src/workers/createPiscina.ts b/apps/bun-server/src/workers/createPiscina.ts
similarity index 100%
rename from server/src/workers/createPiscina.ts
rename to apps/bun-server/src/workers/createPiscina.ts
diff --git a/server/src/workers/mockWorker.ts b/apps/bun-server/src/workers/mockWorker.ts
similarity index 100%
rename from server/src/workers/mockWorker.ts
rename to apps/bun-server/src/workers/mockWorker.ts
diff --git a/server/src/workers/osmWorker.ts b/apps/bun-server/src/workers/osmWorker.ts
similarity index 100%
rename from server/src/workers/osmWorker.ts
rename to apps/bun-server/src/workers/osmWorker.ts
diff --git a/server/src/workers/worker.ts b/apps/bun-server/src/workers/worker.ts
similarity index 100%
rename from server/src/workers/worker.ts
rename to apps/bun-server/src/workers/worker.ts

From fa17e2d3b66a2cea23f54b2c430a70c3ec5f369d Mon Sep 17 00:00:00 2001
From: Andrew Bierman <94939237+andrew-bierman@users.noreply.github.com>
Date: Wed, 12 Jun 2024 22:52:27 -0400
Subject: [PATCH 025/257] =?UTF-8?q?=E2=9A=B0=EF=B8=8F=20remove=20old=20mig?=
 =?UTF-8?q?rations?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...230731042113-addUsernameToExistingUsers.js | 58 -------------------
 1 file changed, 58 deletions(-)
 delete mode 100644 server/src/migrations/20230731042113-addUsernameToExistingUsers.js

diff --git a/server/src/migrations/20230731042113-addUsernameToExistingUsers.js b/server/src/migrations/20230731042113-addUsernameToExistingUsers.js
deleted file mode 100644
index e60c17451..000000000
--- a/server/src/migrations/20230731042113-addUsernameToExistingUsers.js
+++ /dev/null
@@ -1,58 +0,0 @@
-// module.exports = {
-//   async up(db, client) {
-//     // TODO write your migration here.
-//     // See https://github.com/seppevs/migrate-mongo/#creating-a-new-migration-script
-//     // Example:
-//     // await db.collection('albums').updateOne({artist: 'The Beatles'}, {$set: {blacklisted: true}});
-
-//   },
-
-//   async down(db, client) {
-//     // TODO write the statements to rollback your migration (if possible)
-//     // Example:
-//     // await db.collection('albums').updateOne({artist: 'The Beatles'}, {$set: {blacklisted: false}});
-//   }
-// };
-
-export const up = async (db) => {
-  console.log('Adding usernames to existing users...');
-
-  const cursor = db.collection('users').find({ username: { $exists: false } });
-
-  while (await cursor.hasNext()) {
-    const user = await cursor.next();
-
-    if (!user.username) {
-      let generatedUsername = user.email
-        ? user.email.split('@')[0]
-        : 'packratuser';
-
-      // Check for existing username
-      let exists = await db
-        .collection('users')
-        .findOne({ username: generatedUsername });
-
-      let counter = 1;
-      while (exists) {
-        generatedUsername = `${generatedUsername}${counter}`;
-        counter++;
-        // Check again with the new generated username
-        exists = await db
-          .collection('users')
-          .findOne({ username: generatedUsername });
-      }
-
-      // Update the user
-      await db
-        .collection('users')
-        .updateOne(
-          { _id: user._id },
-          { $set: { username: generatedUsername } },
-        );
-    }
-  }
-};
-
-export const down = async (db) => {
-  // Here you can write steps to undo the changes in up() if necessary.
-};

From 7173f5b0586768bcee3ecfc132e6f4acc0a757ed Mon Sep 17 00:00:00 2001
From: Andrew Bierman <94939237+andrew-bierman@users.noreply.github.com>
Date: Wed, 12 Jun 2024 22:54:54 -0400
Subject: [PATCH 026/257] =?UTF-8?q?=E2=9E=95=20add=20p-queue?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 server/package.json |  1 +
 yarn.lock           | 18 ++++++++++++++++++
 2 files changed, 19 insertions(+)

diff --git a/server/package.json b/server/package.json
index a9a45c80d..cc41a832b 100644
--- a/server/package.json
+++ b/server/package.json
@@ -95,6 +95,7 @@
     "nodemon": "^3.0.1",
     "openai": "4.25.0",
     "osmtogeojson": "^3.0.0-beta.5",
+    "p-queue": "^8.0.1",
     "passport": "^0.6.0",
     "passport-google-oauth20": "^2.0.0",
     "passport-local": "^1.0.0",
diff --git a/yarn.lock b/yarn.lock
index 87cfc8a6e..6d003791c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -28539,6 +28539,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"p-queue@npm:^8.0.1":
+  version: 8.0.1
+  resolution: "p-queue@npm:8.0.1"
+  dependencies:
+    eventemitter3: "npm:^5.0.1"
+    p-timeout: "npm:^6.1.2"
+  checksum: 10/8dcf8fbb8339675eba7d369f6eebac9e249e2412280ad73938403b83a28a2627a2072c732890d22ef98837cef89ff09eecd839cbac358cdc532d00ef4f736d0d
+  languageName: node
+  linkType: hard
+
 "p-retry@npm:4, p-retry@npm:^4.5.0":
   version: 4.6.2
   resolution: "p-retry@npm:4.6.2"
@@ -28558,6 +28568,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"p-timeout@npm:^6.1.2":
+  version: 6.1.2
+  resolution: "p-timeout@npm:6.1.2"
+  checksum: 10/ca3ede368d792bd86fcfa4e133220536382225d31e5f62e2cedb8280df267b25f6684aa0056b22e8aa538cc85014b310058d8fdddeb0a1ff363093d56e87ac3a
+  languageName: node
+  linkType: hard
+
 "p-try@npm:^2.0.0":
   version: 2.2.0
   resolution: "p-try@npm:2.2.0"
@@ -32339,6 +32356,7 @@ __metadata:
     openai: "npm:4.25.0"
     openapi-generator: "npm:^0.1.39"
     osmtogeojson: "npm:^3.0.0-beta.5"
+    p-queue: "npm:^8.0.1"
     passport: "npm:^0.6.0"
     passport-google-oauth20: "npm:^2.0.0"
     passport-local: "npm:^1.0.0"

From 5c3c04010292804a93dcf8fa9a86ba3b5e8fc331 Mon Sep 17 00:00:00 2001
From: Andrew Bierman <94939237+andrew-bierman@users.noreply.github.com>
Date: Wed, 12 Jun 2024 23:00:18 -0400
Subject: [PATCH 027/257] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20let=20promise=20ru?=
 =?UTF-8?q?n=20in=20background,=20return=20crud=20operation=20early?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 server/src/services/pack/addPackService.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/server/src/services/pack/addPackService.ts b/server/src/services/pack/addPackService.ts
index 63e974193..b621b5fd9 100644
--- a/server/src/services/pack/addPackService.ts
+++ b/server/src/services/pack/addPackService.ts
@@ -29,7 +29,7 @@ export const addPackService = async (
   const queue = Queue.getInstance();
 
   // Add the vector sync task to the queue
-  await queue.addTask(async () => {
+  queue.addTask(async () => {
     await VectorClient.instance.syncRecord({
       id: createdPack.id,
       content: name,

From 63d33752e74e8dcb82a41b6127dd210860c196c3 Mon Sep 17 00:00:00 2001
From: mikeCyb <michaelgashaw972@gmail.com>
Date: Thu, 13 Jun 2024 10:53:28 +0300
Subject: [PATCH 028/257] feed carousel width fix

---
 packages/app/components/carousel/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/app/components/carousel/index.tsx b/packages/app/components/carousel/index.tsx
index c09d65ab0..6b1b92bad 100644
--- a/packages/app/components/carousel/index.tsx
+++ b/packages/app/components/carousel/index.tsx
@@ -54,7 +54,7 @@ const Carousel: React.FC<CarouselProps> = ({
           Platform.OS === 'web'
             ? screenWidth <= SCREEN_WIDTH
               ? '80vw'
-              : '57vw'
+              : '90%'
             : width * 0.7,
         justifyContent: 'center',
         alignItems: 'center',

From 7d39c39c6a465a731653057e54460c87d59b7e26 Mon Sep 17 00:00:00 2001
From: Anmol Verma <anmolverma2810@gmail.com>
Date: Thu, 13 Jun 2024 19:26:56 +0530
Subject: [PATCH 029/257] Replace RButton.Group to RStack

---
 packages/app/components/map/NativeMap.native.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/app/components/map/NativeMap.native.tsx b/packages/app/components/map/NativeMap.native.tsx
index ff6426045..7c1db095f 100644
--- a/packages/app/components/map/NativeMap.native.tsx
+++ b/packages/app/components/map/NativeMap.native.tsx
@@ -13,6 +13,7 @@ import { AlertDialog } from 'native-base';
 import {
   RButton as OriginalRButton,
   RInput as OriginalRInput,
+  RStack,
 } from '@packrat/ui';
 
 import { MAPBOX_ACCESS_TOKEN } from '@packrat/config';
@@ -298,7 +299,7 @@ function NativeMap({ shape: shapeProp }) {
                 />
               </AlertDialog.Body>
               <AlertDialog.Footer>
-                <RButton.Group space={2}>
+                <RStack style={{width:'60%', justifyContent:'space-between', flexDirection:'row'}}>
                   <RButton
                     variant="unstyled"
                     colorScheme="coolGray"
@@ -334,7 +335,7 @@ function NativeMap({ shape: shapeProp }) {
                   >
                     OK
                   </RButton>
-                </RButton.Group>
+                </RStack>
               </AlertDialog.Footer>
             </AlertDialog.Content>
           </AlertDialog>

From f039175c7c6b24806b49e43dc9ef5cacb02a94c4 Mon Sep 17 00:00:00 2001
From: pinocchio-life-like <icbr19fl@gmail.com>
Date: Thu, 13 Jun 2024 18:27:12 +0300
Subject: [PATCH 030/257] chatbot config

---
 packages/app/components/chat/index.tsx        | 12 ++-
 packages/app/components/pack/PackDetails.tsx  |  1 +
 packages/app/hooks/chat/useChat.ts            |  2 +
 packages/app/hooks/chat/useGetAIResponse.ts   |  3 +-
 .../src/controllers/openAi/getAIResponse.ts   |  4 +-
 .../services/openAi/getAIResponseService.ts   | 72 +++++++++++++--
 server/src/services/openAi/langchain/index.ts |  6 +-
 server/src/services/openAi/zodSchema.ts       | 87 +++++++++++++++++++
 .../src/services/pack/getPackByIdService.ts   |  5 +-
 9 files changed, 174 insertions(+), 18 deletions(-)
 create mode 100644 server/src/services/openAi/zodSchema.ts

diff --git a/packages/app/components/chat/index.tsx b/packages/app/components/chat/index.tsx
index 1d705bca7..57adbf132 100644
--- a/packages/app/components/chat/index.tsx
+++ b/packages/app/components/chat/index.tsx
@@ -22,12 +22,14 @@ interface ChatComponentProps {
   showChatSelector?: boolean;
   defaultChatId?: string | null;
   itemTypeId?: string | null;
+  type?: string | null;
 }
 
 interface ChatModalTriggerProps {
   title: string;
   trigger: string;
   itemTypeId: string | null;
+  type: string;
 }
 
 const actionItems = [
@@ -51,6 +53,7 @@ const ChatComponent: React.FC<ChatComponentProps> = ({
   showChatSelector = true,
   defaultChatId = null,
   itemTypeId = null,
+  type = null,
 }) => {
   const styles = useCustomStyles(loadStyles);
   const {
@@ -62,7 +65,7 @@ const ChatComponent: React.FC<ChatComponentProps> = ({
     setUserInput,
     setTypeId,
     isLoading,
-  } = useChat({ itemTypeId });
+  } = useChat({ itemTypeId, type });
 
   const [messages, setMessages] = useState(parsedMessages);
 
@@ -134,7 +137,10 @@ const ChatComponent: React.FC<ChatComponentProps> = ({
   );
 };
 
-const ChatModalTrigger: React.FC<ChatModalTriggerProps> = ({ itemTypeId }) => {
+const ChatModalTrigger: React.FC<ChatModalTriggerProps> = ({
+  itemTypeId,
+  type,
+}) => {
   const styles = useCustomStyles(loadStyles);
   const [isChatOpen, setIsChatOpen] = useState(false);
   const [isItemOpen, setIsItemOpen] = useState(false);
@@ -272,7 +278,7 @@ const ChatModalTrigger: React.FC<ChatModalTriggerProps> = ({ itemTypeId }) => {
             onPress={() => setIsChatOpen(false)}
             style={{ zIndex: 1001 }}
           />
-          <ChatComponent itemTypeId={itemTypeId} />
+          <ChatComponent itemTypeId={itemTypeId} type={type} />
         </Animated.View>
       )}
     </View>
diff --git a/packages/app/components/pack/PackDetails.tsx b/packages/app/components/pack/PackDetails.tsx
index eea7e3859..9ecf30bf7 100644
--- a/packages/app/components/pack/PackDetails.tsx
+++ b/packages/app/components/pack/PackDetails.tsx
@@ -153,6 +153,7 @@ export function PackDetails() {
             itemTypeId={currentPackId}
             title="Chat"
             trigger="Open Chat"
+            type="pack"
           />
         </View>
       </Layout>
diff --git a/packages/app/hooks/chat/useChat.ts b/packages/app/hooks/chat/useChat.ts
index 3ec47b0fe..913f5f403 100644
--- a/packages/app/hooks/chat/useChat.ts
+++ b/packages/app/hooks/chat/useChat.ts
@@ -6,6 +6,7 @@ import { useAuthUser } from 'app/auth/hooks';
 export const useChat = (itemTypeId = null) => {
   const user = useAuthUser();
   const [typeId, setTypeId] = useState(itemTypeId);
+  const [itemType, setItemType] = useState(itemTypeId);
   const [isLoading, setIsLoading] = useState(false);
 
   const [userInput, setUserInput] = useState('');
@@ -74,6 +75,7 @@ export const useChat = (itemTypeId = null) => {
       userId: user.id,
       userInput: userMessage,
       itemTypeId: typeId.itemTypeId,
+      type: typeId.type,
     });
     await refetch();
     setIsLoading(false);
diff --git a/packages/app/hooks/chat/useGetAIResponse.ts b/packages/app/hooks/chat/useGetAIResponse.ts
index 244c72c51..15d9f0aa6 100644
--- a/packages/app/hooks/chat/useGetAIResponse.ts
+++ b/packages/app/hooks/chat/useGetAIResponse.ts
@@ -42,11 +42,12 @@ export function useGetAIResponse() {
     },
   });
 
-  const getAIResponse = async ({ userId, userInput, itemTypeId }) => {
+  const getAIResponse = async ({ userId, userInput, itemTypeId, type }) => {
     return mutation.mutate({
       userId,
       userInput: userInput.message,
       itemTypeId,
+      type,
     });
   };
 
diff --git a/server/src/controllers/openAi/getAIResponse.ts b/server/src/controllers/openAi/getAIResponse.ts
index 48126cbc0..ca503cc7c 100644
--- a/server/src/controllers/openAi/getAIResponse.ts
+++ b/server/src/controllers/openAi/getAIResponse.ts
@@ -32,15 +32,17 @@ export function getAIResponseRoute() {
         userId: z.string(),
         userInput: z.string(),
         itemTypeId: z.string(),
+        type: z.string(),
       }),
     )
     .mutation(async (opts) => {
       const { env } = opts.ctx;
-      const { userId, userInput, itemTypeId } = opts.input;
+      const { userId, userInput, itemTypeId, type } = opts.input;
       return getAIResponseService(
         userId,
         itemTypeId,
         userInput,
+        type,
         env.OPENAI_API_KEY,
       );
     });
diff --git a/server/src/services/openAi/getAIResponseService.ts b/server/src/services/openAi/getAIResponseService.ts
index 2a847a942..a11b37195 100644
--- a/server/src/services/openAi/getAIResponseService.ts
+++ b/server/src/services/openAi/getAIResponseService.ts
@@ -1,8 +1,10 @@
 import OpenAI from 'openai';
 import Instructor from '@instructor-ai/instructor';
-import { z } from 'zod';
+import { PackSchema, ItemSchema } from './zodSchema';
 import { Conversation } from '../../drizzle/methods/Conversation';
 import { User } from '../../drizzle/methods/User';
+import { getPackByIdService } from '../pack/getPackByIdService';
+// import { getPackInformation } from './langchain';
 
 /**
  * Retrieves AI response for a given user input in a conversation.
@@ -12,10 +14,12 @@ import { User } from '../../drizzle/methods/User';
  * @param {string} userInput - The user input in the conversation.
  * @returns {Object} - The AI response and the updated conversation.
  */
+
 export const getAIResponseService = async (
   userId: string,
   itemTypeId: string,
   userInput: string,
+  type: string,
   openAIAPIKey: string,
 ): Promise<object> => {
   if (!openAIAPIKey) {
@@ -31,12 +35,49 @@ export const getAIResponseService = async (
     apiKey: openAIAPIKey,
   });
 
+  // Apply the patch to the OpenAI client
+  const client = Instructor({
+    client: openai,
+    mode: 'FUNCTIONS',
+  });
+
   const user = await userClass.findUser({ userId });
 
   if (!user) {
     throw new Error('User not found');
   }
 
+  async function getPackInformation(packId) {
+    if (!packId) return '';
+    const packData: any = await getPackByIdService(packId);
+
+    return `The user has a pack titled ${packData.name}, owned by ${packData.owner.name}. 
+    This pack contains items like ${packData.items
+      .map(
+        (item: any) =>
+          `${item.name} (${item.weight}${item.unit}, ${item.quantity} pcs, category: ${item.category.name})`,
+      )
+      .join(', ')}. 
+    The pack is ${packData.is_public ? 'public' : 'private'}, favorited by ${
+      packData.favorites_count
+    } users, created on ${new Date(packData.createdAt).toLocaleDateString()}. 
+    It is graded as ${packData?.grades?.weight}, ${
+      packData?.grades?.essentialItems
+    }, and ${
+      packData?.grades?.redundancyAndVersatility
+    } in weight, essential items, and redundancy/versatility respectively. 
+    The scores are: weight ${packData?.scores?.weightScore}, essential items ${
+      packData?.scores?.essentialItemsScore
+    }, and redundancy/versatility ${
+      packData?.scores?.redundancyAndVersatilityScore
+    }, 
+    totaling ${packData?.totalScore} with a total weight of ${
+      packData.total_weight
+    }g.`;
+  }
+
+  const packInfo = await getPackInformation(itemTypeId);
+
   let conversation: any = await conversationClass.findConversation(
     userId,
     itemTypeId,
@@ -60,10 +101,18 @@ export const getAIResponseService = async (
   // a detailed system message to instruct the model about its role
   const systemMessage = {
     role: 'system',
-    content: `You are a helpful assistant that provides hiking advice. 
-    You should only provide advice related to hiking and not generate any other type of content whatsoever.
-    If a user asks for help outside of the hiking domain, respond with: "Sorry, I can not help with that 😅!"
-    Additionally, make your responses more detailed when the user asks relevant hiking-related questions.`,
+    content: `You are a helpful assistant that provides hiking advice. You should only provide advice related to hiking and not generate any other type of content whatsoever. General greetings and polite interactions are fine. If a user asks for help outside of the hiking domain, respond with: "Sorry, I can not help with that 😅!" Additionally, make your responses more detailed when the user asks relevant hiking-related questions.
+
+    The user may have a hiking pack. ${packInfo}
+
+    When interacting with the user:
+    - Provide detailed advice on hiking-related questions.
+    - Use the pack details to give personalized recommendations and optimizations.
+    - Offer suggestions to improve the user's pack considering safety, comfort, and efficiency.
+    - Be proactive in suggesting useful items or changes based on the pack's contents.
+    - Always keep the user's trip specifics in mind, such as destination, duration, and weather conditions.
+
+    Remember, your goal is to enhance the user's hiking experience by providing valuable and relevant advice based on the context of their pack and trip.`,
   };
 
   // Add the system message to the beginning of the messages array
@@ -72,13 +121,20 @@ export const getAIResponseService = async (
   // Add the user message
   messages.push({ role: 'user', content: userInput });
 
-  const response = await openai.chat.completions.create({
+  const response = await client.chat.completions.create({
     model: 'gpt-3.5-turbo',
     messages,
-    temperature: 0.5, // Lower temperature to make output more deterministic
-    // min_tokens: 100, // Limit the length of the response this doesnt exist still
+    temperature: 0.5,
+    // response_model: { schema: PackSchema },
   });
 
+  // const response = await openai.chat.completions.create({
+  //   model: 'gpt-3.5-turbo',
+  //   messages,
+  //   temperature: 0.5, // Lower temperature to make output more deterministic
+  //   // min_tokens: 100, // Limit the length of the response this doesnt exist still
+  // });
+
   const aiResponse = response.choices?.[0]?.message?.content?.trim() || '';
   conversationHistory += `\nUser: ${userInput}\nAI: ${aiResponse}`;
 
diff --git a/server/src/services/openAi/langchain/index.ts b/server/src/services/openAi/langchain/index.ts
index f0b0e7dd3..bfcf71b22 100644
--- a/server/src/services/openAi/langchain/index.ts
+++ b/server/src/services/openAi/langchain/index.ts
@@ -1,8 +1,8 @@
 import { ChatOpenAI } from 'langchain/chat_models/openai';
 import { AIMessage, HumanMessage, SystemMessage } from 'langchain/schema';
 import Conversation from '../../../models/openai/conversationModel';
-import { getPackByIdService } from '../../../services/pack/pack.service';
-import { getTripByIdService } from '../../../services/trip/getTripByIdService';
+import { getPackByIdService } from '../../pack/getPackByIdService';
+import { getTripByIdService } from '../../trip/getTripByIdService';
 import mongoose from 'mongoose';
 import User from '../../../models/userModel';
 
@@ -80,7 +80,7 @@ export async function checkAPIKey() {
   }
 }
 
-async function getPackInformation(packId) {
+export async function getPackInformation(packId) {
   if (!packId) return '';
   const packData: any = await getPackByIdService(packId);
   return `Analyze the pack titled '${packData.name}', owned by ${packData.owners
diff --git a/server/src/services/openAi/zodSchema.ts b/server/src/services/openAi/zodSchema.ts
new file mode 100644
index 000000000..6d26c7b8e
--- /dev/null
+++ b/server/src/services/openAi/zodSchema.ts
@@ -0,0 +1,87 @@
+import { z } from 'zod';
+
+const ItemSchema = z
+  .object({
+    name: z.string().describe('The name of the item'),
+    weight: z.number().describe('The weight of the item'),
+    quantity: z.number().describe('The quantity of the item'),
+    unit: z.string().describe('The unit of measurement for the item'),
+    category: z.string().describe('The category the item belongs to'),
+    owners: z
+      .array(z.string())
+      .default([])
+      .describe('An array of user IDs who own the item'),
+    packs: z
+      .array(z.string())
+      .default([])
+      .describe('An array of pack IDs where the item is included'),
+    global: z
+      .boolean()
+      .default(false)
+      .describe(
+        'A boolean indicating whether the item is globally accessible or not',
+      ),
+  })
+  .describe(
+    'A detailed schema for an item, including its properties and associations',
+  );
+
+const PackSchema = z
+  .object({
+    name: z.string().describe('The name of the pack'),
+    items: z.array(z.string()).describe('An array of items in the pack'),
+    owner_id: z.string().describe('The ID of the owner of the pack'),
+    is_public: z
+      .boolean()
+      .describe('A boolean indicating whether the pack is public or not'),
+    favorited_by: z
+      .number()
+      .describe('The number of users who have favorited the pack'),
+    createdAt: z.string().describe('The creation date of the pack'),
+    grades: z
+      .object({
+        weight: z.string().default('').describe('The weight grade of the pack'),
+        essentialItems: z
+          .string()
+          .default('')
+          .describe('The essential items grade of the pack'),
+        redundancyAndVersatility: z
+          .string()
+          .default('')
+          .describe('The redundancy and versatility grade of the pack'),
+      })
+      .describe(
+        'An object containing the grades assigned to the pack based on various factors',
+      ),
+    scores: z
+      .object({
+        weightScore: z
+          .number()
+          .default(0)
+          .describe(
+            'The score calculated based on the total weight of the pack',
+          ),
+        essentialItemsScore: z
+          .number()
+          .default(0)
+          .describe(
+            'The score calculated based on the essential items in the pack',
+          ),
+        redundancyAndVersatilityScore: z
+          .number()
+          .default(0)
+          .describe(
+            'The score calculated based on the redundancy and versatility of items in the pack',
+          ),
+      })
+      .describe(
+        'An object containing the scores calculated for the pack based on various factors',
+      ),
+  })
+  .describe(
+    'A detailed available data of a users pack, including its properties, grades, and scores',
+  );
+
+// define for trip and items as well
+
+export { PackSchema, ItemSchema };
diff --git a/server/src/services/pack/getPackByIdService.ts b/server/src/services/pack/getPackByIdService.ts
index 91d76824b..a5b352c9a 100644
--- a/server/src/services/pack/getPackByIdService.ts
+++ b/server/src/services/pack/getPackByIdService.ts
@@ -23,10 +23,11 @@ export const getPackByIdService = async (packId: string) => {
     const pack = (await packClass.findPack({
       id: packId,
     })) as PackWithItemPacks;
+
     const packData = {
       ...pack,
-      scores: JSON.parse(pack.scores as string),
-      grades: JSON.parse(pack.grades as string),
+      scores: pack.scores ? JSON.parse(pack.scores as string) : {},
+      grades: pack.grades ? JSON.parse(pack.grades as string) : {},
       total_weight: packClass.computeTotalWeight(pack),
       favorites_count: packClass.computeFavouritesCount(pack),
       total_score: packClass.computeTotalScores(pack),

From b6de5cef62263f8e898fa89340a376ab6bd25074 Mon Sep 17 00:00:00 2001
From: Anmol Verma <anmolverma2810@gmail.com>
Date: Fri, 14 Jun 2024 15:25:27 +0530
Subject: [PATCH 031/257] Use tamagui media for responsiveness

---
 packages/app/components/ScoreContainer.tsx    |  2 --
 .../card/PackCardHeader/PackCardHeader.tsx    |  7 ++---
 packages/app/components/carousel/index.tsx    | 27 +++++++---------
 .../app/components/dashboard/HeroBanner.tsx   |  9 +++---
 .../dashboard/QuickActionButton.tsx           |  9 +++---
 .../dashboard/QuickActionSection.tsx          |  7 ++---
 packages/app/components/dashboard/Section.tsx |  7 ++---
 .../app/components/feed/FeedSearchFilter.tsx  | 27 ++++++----------
 .../app/components/itemtable/itemTable.tsx    | 31 +++++--------------
 packages/app/components/layout/Layout.tsx     | 14 +++------
 .../app/components/pack/PackContainer.tsx     |  6 ++--
 .../paginationChooseLimit/index.tsx           | 13 +++++---
 .../trip/TripCards/TripSearchCard.tsx         | 13 ++++----
 packages/app/screens/items/index.tsx          | 25 ++++++---------
 packages/ui/src/tamagui.config.ts             |  2 ++
 15 files changed, 80 insertions(+), 119 deletions(-)

diff --git a/packages/app/components/ScoreContainer.tsx b/packages/app/components/ScoreContainer.tsx
index 0a3776114..54277c935 100644
--- a/packages/app/components/ScoreContainer.tsx
+++ b/packages/app/components/ScoreContainer.tsx
@@ -11,8 +11,6 @@ import {
   useScoreProgress,
 } from 'app/hooks/score';
 import { View } from 'react-native';
-import { useScreenWidth } from 'app/hooks/common';
-import { SCREEN_WIDTH } from 'app/constants/breakpoint';
 
 interface ScoreProgressChartProps {
   score: number;
diff --git a/packages/app/components/card/PackCardHeader/PackCardHeader.tsx b/packages/app/components/card/PackCardHeader/PackCardHeader.tsx
index 58813f620..90019f99f 100644
--- a/packages/app/components/card/PackCardHeader/PackCardHeader.tsx
+++ b/packages/app/components/card/PackCardHeader/PackCardHeader.tsx
@@ -20,8 +20,7 @@ import { useEditPack } from 'app/hooks/packs/useEditPack';
 import { Platform } from 'react-native';
 import { CopyPackModal } from '../../pack/CopyPackModal';
 import { View } from 'react-native';
-import { useScreenWidth } from 'app/hooks/common';
-import { SCREEN_WIDTH } from 'app/constants/breakpoint';
+import { useMedia } from 'tamagui';
 
 interface PackCardHeaderProps {
   data: any;
@@ -39,7 +38,7 @@ export const PackCardHeader = ({ data, title }: PackCardHeaderProps) => {
   const { isDark, currentTheme } = useTheme();
   const router = useRouter();
   const { editPack } = useEditPack();
-  const { screenWidth } = useScreenWidth();
+  const { xs } = useMedia();
 
   const handleSavePack = () => {
     const packDetails = {
@@ -81,7 +80,7 @@ export const PackCardHeader = ({ data, title }: PackCardHeaderProps) => {
               />
             )}
             <View
-              style={{ width: screenWidth <= SCREEN_WIDTH ? '30vw' : '50vw' }}
+              style={{ width: xs ? '30vw' : '50vw' }}
             >
               <EditableText
                 isLoading={isLoading}
diff --git a/packages/app/components/carousel/index.tsx b/packages/app/components/carousel/index.tsx
index c09d65ab0..193e123f2 100644
--- a/packages/app/components/carousel/index.tsx
+++ b/packages/app/components/carousel/index.tsx
@@ -8,8 +8,7 @@ import {
 import { RStack } from '@packrat/ui';
 import ScrollButton from './ScrollButton';
 import useCustomStyles from 'app/hooks/useCustomStyles';
-import { useScreenWidth } from 'app/hooks/common';
-import { SCREEN_WIDTH } from 'app/constants/breakpoint';
+import { useMedia } from 'tamagui';
 
 interface CarouselProps {
   children?: ReactNode[];
@@ -27,7 +26,6 @@ const Carousel: React.FC<CarouselProps> = ({
   const scrollViewRef = useRef<ScrollView>(null);
   const [currentIndex, setCurrentIndex] = useState<number>(0);
   const styles = useCustomStyles(loadStyles);
-  const { screenWidth } = useScreenWidth();
 
   const handleScroll = (event: { nativeEvent: NativeScrollEvent }) => {
     const contentOffset = event.nativeEvent.contentOffset;
@@ -45,17 +43,13 @@ const Carousel: React.FC<CarouselProps> = ({
       setCurrentIndex(index);
     }
   };
+  const { xs, xxs } = useMedia();
 
   return (
     <RStack
       style={{
         alignSelf: 'center',
-        width:
-          Platform.OS === 'web'
-            ? screenWidth <= SCREEN_WIDTH
-              ? '80vw'
-              : '57vw'
-            : width * 0.7,
+        width: xxs ? width * 0.7 : xs ? '80vw' : '57vw',
         justifyContent: 'center',
         alignItems: 'center',
         flexDirection: 'row',
@@ -105,11 +99,14 @@ const Carousel: React.FC<CarouselProps> = ({
   );
 };
 
-const loadStyles = () => ({
-  carousel: {
-    flexDirection: 'row',
-    width: Platform.OS === 'web' ? '100%' : width * 0.8,
-  },
-});
+const loadStyles = () => {
+  const { xs, xxs } = useMedia();
+  return {
+    carousel: {
+      flexDirection: 'row',
+      width: xxs ? width * 0.8 : '100%',
+    },
+  };
+};
 
 export default Carousel;
diff --git a/packages/app/components/dashboard/HeroBanner.tsx b/packages/app/components/dashboard/HeroBanner.tsx
index a0d182643..9c64b0ce5 100644
--- a/packages/app/components/dashboard/HeroBanner.tsx
+++ b/packages/app/components/dashboard/HeroBanner.tsx
@@ -12,8 +12,7 @@ import { first } from 'lodash';
 import { hexToRGBA } from '../../utils/colorFunctions';
 import useCustomStyles from 'app/hooks/useCustomStyles';
 import { PlacesAutocomplete } from 'app/components/PlacesAutocomplete/PlacesAutocomplete';
-import { useScreenWidth } from 'app/hooks/common';
-import { SCREEN_WIDTH } from 'app/constants/breakpoint';
+import { useMedia } from 'tamagui';
 const RText: any = OriginalRText;
 
 interface HeroSectionProps {
@@ -74,7 +73,7 @@ const HeroSection: React.FC<HeroSectionProps> = ({ onSelect }) => {
       ? `Let's find a new trail, ${firstNameOrUser}`
       : "Let's find a new trail";
 
-  const { screenWidth } = useScreenWidth();
+  const {xs} = useMedia();
 
   return (
     <View style={styles.banner}>
@@ -95,7 +94,7 @@ const HeroSection: React.FC<HeroSectionProps> = ({ onSelect }) => {
               cardBackgroundColor || currentTheme.colors.secondaryBlue,
             alignItems: 'center',
             justifyContent: 'center',
-            width: screenWidth <= SCREEN_WIDTH ? '80vw' : '30vw',
+            width: xs ? '80vw' : '30vw',
             height: '30vh',
             padding: 50,
           }}
@@ -104,7 +103,7 @@ const HeroSection: React.FC<HeroSectionProps> = ({ onSelect }) => {
         >
           <RStack
             style={{
-              width: screenWidth <= SCREEN_WIDTH ? '55vw' : '25vw',
+              width: xs ? '55vw' : '25vw',
               height: '20vh',
               alignItems: 'center',
               justifyContent: 'center',
diff --git a/packages/app/components/dashboard/QuickActionButton.tsx b/packages/app/components/dashboard/QuickActionButton.tsx
index 00a81e38f..09479feb3 100644
--- a/packages/app/components/dashboard/QuickActionButton.tsx
+++ b/packages/app/components/dashboard/QuickActionButton.tsx
@@ -4,8 +4,7 @@ import { MaterialIcons } from '@expo/vector-icons';
 import React from 'react';
 import { theme } from '../../theme';
 import useCustomStyles from 'app/hooks/useCustomStyles';
-import { useScreenWidth } from 'app/hooks/common';
-import { SCREEN_WIDTH } from 'app/constants/breakpoint';
+import { useMedia } from 'tamagui';
 
 const RCard: any = OriginalRCard;
 
@@ -40,11 +39,11 @@ const QuickActionButton = ({
 
 const loadStyles = (theme: any) => {
   const { currentTheme } = theme;
-  const { screenWidth } = useScreenWidth();
+  const {xs} = useMedia();
   return {
     container: {
       margin: 10,
-      width: screenWidth <= SCREEN_WIDTH ? '35vw' : '10vw',
+      width: xs ? '35vw' : '10vw',
       height: '10vh',
       display: 'flex',
       alignItems: 'center',
@@ -53,7 +52,7 @@ const loadStyles = (theme: any) => {
       flexDirection: 'column',
       justifyContent: 'center',
       alignItems: 'center',
-      width: screenWidth <= SCREEN_WIDTH ? '35vw' : '10vw',
+      width: xs ? '35vw' : '10vw',
       height: '10vh',
       // paddingHorizontal: 40,
       // paddingVertical: 60,
diff --git a/packages/app/components/dashboard/QuickActionSection.tsx b/packages/app/components/dashboard/QuickActionSection.tsx
index 7e346a74d..25b9a6038 100644
--- a/packages/app/components/dashboard/QuickActionSection.tsx
+++ b/packages/app/components/dashboard/QuickActionSection.tsx
@@ -2,8 +2,7 @@ import { RStack } from '@packrat/ui';
 import QuickActionButton from './QuickActionButton';
 import useCustomStyles from 'app/hooks/useCustomStyles';
 import { useQuickActions } from 'app/hooks/dashboard';
-import { useScreenWidth } from 'app/hooks/common';
-import { SCREEN_WIDTH } from 'app/constants/breakpoint';
+import { useMedia } from 'tamagui';
 
 const QuickActionsSection = () => {
   const styles = useCustomStyles(loadStyles);
@@ -27,12 +26,12 @@ const QuickActionsSection = () => {
 
 const loadStyles = (theme) => {
   const { currentTheme } = theme;
-  const { screenWidth } = useScreenWidth();
+  const {xs } = useMedia();
   return {
     section: {
       marginBottom: 20,
       paddingHorizontal: 20, // Added padding here.
-      width: screenWidth <= SCREEN_WIDTH ? '80vw' : '22vw',
+      width: xs ? '80vw' : '22vw',
       display: 'flex',
       justifyContent: 'center',
     },
diff --git a/packages/app/components/dashboard/Section.tsx b/packages/app/components/dashboard/Section.tsx
index d4963ebe2..844987689 100644
--- a/packages/app/components/dashboard/Section.tsx
+++ b/packages/app/components/dashboard/Section.tsx
@@ -3,8 +3,7 @@ import { RCard } from '@packrat/ui';
 import React from 'react';
 import useCustomStyles from 'app/hooks/useCustomStyles';
 import { TouchableOpacity } from 'react-native';
-import { useScreenWidth } from 'app/hooks/common';
-import { SCREEN_WIDTH } from 'app/constants/breakpoint';
+import { useMedia } from 'tamagui';
 
 interface SectionProps {
   children: React.ReactNode;
@@ -25,7 +24,7 @@ const Section: React.FC<SectionProps> = ({ children, onPress }) => {
 
 const loadStyles = (theme: any) => {
   const { currentTheme } = theme;
-  const { screenWidth } = useScreenWidth();
+  const { xs } = useMedia();
   return {
     section: {
       marginBottom: 20,
@@ -33,7 +32,7 @@ const loadStyles = (theme: any) => {
     card: {
       justifyContent: 'center',
       alignItems: 'center',
-      width: screenWidth <= SCREEN_WIDTH ? '90vw' : '58vw',
+      width: xs ? '90vw' : '58vw',
       backgroundColor: currentTheme.colors.secondaryBlue,
       borderRadius: 8,
     },
diff --git a/packages/app/components/feed/FeedSearchFilter.tsx b/packages/app/components/feed/FeedSearchFilter.tsx
index a54e03e29..397d14b7c 100644
--- a/packages/app/components/feed/FeedSearchFilter.tsx
+++ b/packages/app/components/feed/FeedSearchFilter.tsx
@@ -1,8 +1,8 @@
 import React, { useState } from 'react';
 import useTheme from '../../hooks/useTheme';
 import useCustomStyles from 'app/hooks/useCustomStyles';
-import { Switch } from 'tamagui';
-import { Platform, View } from 'react-native';
+import { Switch, useMedia } from 'tamagui';
+import { View } from 'react-native';
 import {
   RIconButton,
   RSwitch,
@@ -16,8 +16,6 @@ import {
 import { AntDesign } from '@expo/vector-icons';
 import DropdownComponent from 'app/components/Dropdown';
 import Layout from 'app/components/layout/Layout';
-import { useScreenWidth } from 'app/hooks/common';
-import { SCREEN_WIDTH } from 'app/constants/breakpoint';
 const RStack: any = OriginalRStack;
 const RText: any = OriginalRText;
 const RSeparator: any = OriginalRSeparator;
@@ -62,7 +60,7 @@ const FeedSearchFilter = ({
   const [searchValue, setSearchValue] = useState('');
 
   const onSearch = (search) => setSearchQuery(search);
-  const { screenWidth } = useScreenWidth();
+  const {xs, xxs, xxxs} = useMedia();
 
   return (
     <Layout>
@@ -70,10 +68,10 @@ const FeedSearchFilter = ({
         <View style={styles.searchContainer}>
           <Form>
             <RStack
-              style={{ flexDirection: 'row',marginLeft:30, }}
+              style={{ flexDirection: 'row',marginLeft:40, }}
             >
               <FormInput
-                width={Platform.OS === "web" ? screenWidth <= 425 ? '30vw' : '12vw': '100%'}
+                width={xxxs? '30vw' : xxs ?'100%' : xs? '30vw' : '12vw'}
                 placeholder={`Search ${feedType || 'Feed'}`}
                 name="search"
                 value={searchValue}
@@ -119,7 +117,6 @@ const FeedSearchFilter = ({
                 <RSwitch
                   id="single-switch"
                   size="$1.5"
-                  width={ screenWidth <= SCREEN_WIDTH ?"10vw" : '3vw'}
                   checked={selectedTypes.pack}
                   onCheckedChange={handleTogglePack}
                 >
@@ -135,7 +132,6 @@ const FeedSearchFilter = ({
                 <RSwitch
                   id="two-switch"
                   size="$1.5"
-                  width={ screenWidth <= SCREEN_WIDTH ?"10vw" : '3vw'}
                   checked={selectedTypes.trip}
                   onCheckedChange={handleToggleTrip}
                 >
@@ -146,12 +142,12 @@ const FeedSearchFilter = ({
             <RStack
               style={{
                 flexDirection: 'row',
-                gap: Platform.OS === 'web' ? 10 : 60,
+                gap: xxxs ? 10 : xxs ?  60: 10,
                 alignItems: 'center',
               }}
             >
               <RText
-                fontSize={Platform.OS === 'web' ? 17 : 15}
+                fontSize={xxs ? 15: 17}
                 fontWeight="bold"
                 color={currentTheme.colors.textColor}
               >
@@ -164,11 +160,7 @@ const FeedSearchFilter = ({
                 placeholder={queryString}
                 style={styles.dropdown}
                 width={
-                  Platform.OS === 'web'
-                    ? screenWidth <= SCREEN_WIDTH
-                      ? '30vw'
-                      : '8vw'
-                    : '50%'
+                 xxxs ? '30vw' : xxs ? '50%' : xs ? '30vw' : '8vw'
                 }
               />
             </RStack>
@@ -191,6 +183,7 @@ const FeedSearchFilter = ({
 
 const loadStyles = (theme: any) => {
   const { currentTheme } = theme;
+  const {xxs, xs} = useMedia();
 
   return {
     mainContainer: {
@@ -205,7 +198,7 @@ const loadStyles = (theme: any) => {
       fontSize: 18,
       width: '60vw',
       borderRadius: 10,
-      marginTop: Platform.OS !== 'web' ? 20 : 0,
+      marginTop: xxs ? 20 : 0,
     },
     searchContainer: {
       flexDirection: 'row',
diff --git a/packages/app/components/itemtable/itemTable.tsx b/packages/app/components/itemtable/itemTable.tsx
index cb3c1be14..5a238d944 100644
--- a/packages/app/components/itemtable/itemTable.tsx
+++ b/packages/app/components/itemtable/itemTable.tsx
@@ -11,12 +11,11 @@ import Loader from '../Loader';
 import useCustomStyles from 'app/hooks/useCustomStyles';
 import { loadStyles } from './itemsTable.style';
 import { AddItem } from '../item/AddItem';
-import { useScreenWidth } from 'app/hooks/common';
 import { useDeleteItem } from 'app/hooks/items';
 import { useAuthUser } from 'app/auth/hooks';
 import Layout from 'app/components/layout/Layout';
 import { RButton, RStack, RText } from '@packrat/ui';
-import { SCREEN_WIDTH } from 'app/constants/breakpoint';
+import { useMedia } from 'tamagui';
 
 interface ItemsTableProps {
   limit: number;
@@ -58,7 +57,7 @@ export const ItemsTable = ({
   totalPages,
 }: ItemsTableProps) => {
   const flexArr = [1.5, 1, 1, 1, 0.65, 0.65, 0.65];
-  const { screenWidth } = useScreenWidth();
+  const { xs, xxs, xxxs } = useMedia();
   const { handleDeleteItem } = useDeleteItem();
 
   const { enableDarkMode, enableLightMode, isDark, isLight, currentTheme } =
@@ -84,12 +83,7 @@ export const ItemsTable = ({
       <RText
         style={{
           color: isDark ? 'white' : 'black',
-          fontSize:
-            Platform.OS === 'web'
-              ? screenWidth <= SCREEN_WIDTH
-                ? '12px'
-                : '15px'
-              : 15,
+          fontSize:xxs ? 15 : xs ? '12px' : '15px',
         }}
       >
         {name}
@@ -101,12 +95,7 @@ export const ItemsTable = ({
       <RText
         style={{
           color: isDark ? 'white' : 'black',
-          fontSize:
-            Platform.OS === 'web'
-              ? screenWidth <= SCREEN_WIDTH
-                ? '12px'
-                : '17px'
-              : 15,
+          fontSize:xxs ? 15 : xs ? '12px' : '15px',
         }}
       >
         {category?.name || type}
@@ -152,7 +141,7 @@ export const ItemsTable = ({
             paddingTop: 30,
             marginTop: 20,
             backgroundColor: isDark ? '#1A1A1D' : 'white',
-            width: screenWidth <= SCREEN_WIDTH ? '80vw' : '60vw',
+            width: xxxs? '100vw' : xs ? '80vw' : '60vw',
           }}
         >
           <ScrollView
@@ -177,12 +166,8 @@ export const ItemsTable = ({
                       data={
                         <RText
                           style={{
-                            fontSize:
-                              Platform.OS === 'web'
-                                ? screenWidth <= 425
-                                  ? 11
-                                  : 15
-                                : 15,
+                            fontSize: 15,
+                                 
                             fontWeight: 'bold',
                           }}
                         >
@@ -196,7 +181,7 @@ export const ItemsTable = ({
                 style={styles.head}
               />
               <ScrollView
-                style={{ height: Platform.OS === 'web' ? 400 : 'auto' }}
+                style={{ height: xxs ? 'auto' : 400 }}
               >
                 {isLoading ? (
                   <Loader />
diff --git a/packages/app/components/layout/Layout.tsx b/packages/app/components/layout/Layout.tsx
index c0d3dd7a7..b9bd94e94 100644
--- a/packages/app/components/layout/Layout.tsx
+++ b/packages/app/components/layout/Layout.tsx
@@ -1,21 +1,15 @@
-import { useScreenWidth } from 'app/hooks/common';
-import { SCREEN_WIDTH } from 'app/constants/breakpoint';
-import { Platform, View } from 'react-native';
+import { View } from 'react-native';
+import { useMedia } from 'tamagui';
 
 const Layout = ({ children }) => {
-  const { screenWidth } = useScreenWidth();
+  const { xs,xxs } = useMedia();
   return (
     <View
       style={{
         display: 'flex',
         alignItems: 'center',
         backgroundColor: 'transparent',
-        width:
-          Platform.OS === 'web'
-            ? screenWidth <= SCREEN_WIDTH
-              ? '100vw'
-              : '60vw'
-            : '100%',
+        width:xxs ? '100%' : xs ? '100vw' : '60vw',
         alignSelf: 'center',
       }}
     >
diff --git a/packages/app/components/pack/PackContainer.tsx b/packages/app/components/pack/PackContainer.tsx
index c1054b7f2..57d10e841 100644
--- a/packages/app/components/pack/PackContainer.tsx
+++ b/packages/app/components/pack/PackContainer.tsx
@@ -9,8 +9,6 @@ import useCustomStyles from 'app/hooks/useCustomStyles';
 import { useAuthUser } from 'app/auth/hooks';
 import { usePackId } from 'app/hooks/packs';
 import { createParam } from '@packrat/crosspath';
-import { SCREEN_WIDTH } from 'app/constants/breakpoint';
-import { useScreenWidth } from 'app/hooks/common';
 
 export default function PackContainer({ isCreatingTrip = false }) {
   const [isAddItemModalOpen, setIsAddItemModalOpen] = useState(false);
@@ -20,7 +18,7 @@ export default function PackContainer({ isCreatingTrip = false }) {
 
   const [refetch, setRefetch] = useState(false);
   const styles = useCustomStyles(loadStyles);
-  const { screenWidth } = useScreenWidth();
+  const { xs } = useMedia();
 
   // TODO - improve refetch logic. Should be handled entirely by the hook
 
@@ -84,7 +82,7 @@ export default function PackContainer({ isCreatingTrip = false }) {
             setIsAddItemModalOpen={setIsAddItemModalOpen}
           />
           <View
-            style={{ width: screenWidth <= SCREEN_WIDTH ? '70vw' : '60vw' }}
+            style={{ width: xs ? '70vw' : '60vw' }}
           >
             <TableContainer
               key={`table - ${currentPackId}`}
diff --git a/packages/app/components/paginationChooseLimit/index.tsx b/packages/app/components/paginationChooseLimit/index.tsx
index 7b4d087ea..3c214c53c 100644
--- a/packages/app/components/paginationChooseLimit/index.tsx
+++ b/packages/app/components/paginationChooseLimit/index.tsx
@@ -1,8 +1,9 @@
-import { Platform, View } from 'react-native';
+import {  View } from 'react-native';
 import React, { useState } from 'react';
 import DropdownComponent from '../Dropdown';
 import { RLabel } from '@packrat/ui';
 import useCustomStyles from 'app/hooks/useCustomStyles';
+import { useMedia } from 'tamagui';
 
 interface PaginationLimitProps {
   limit: string | number;
@@ -32,12 +33,14 @@ export const PaginationLimit = ({ limit, setLimit }: PaginationLimitProps) => {
     </View>
   );
 };
-const loadStyles = () => ({
+const loadStyles = () => {
+  const {xxs} = useMedia();
+  return {
   selectContainer: {
-    marginTop: Platform.OS === 'web' ? 10 : 20,
+    marginTop: xxs ? 20 : 10,
     width: '15rem',
     marginLeft: 20,
-    marginBottom: Platform.OS === 'web' ? 10 : 70,
+    marginBottom: xxs ? 70 : 10,
     alignSelf: 'left',
   },
-});
+}};
diff --git a/packages/app/components/trip/TripCards/TripSearchCard.tsx b/packages/app/components/trip/TripCards/TripSearchCard.tsx
index ff34c4870..c128bb782 100644
--- a/packages/app/components/trip/TripCards/TripSearchCard.tsx
+++ b/packages/app/components/trip/TripCards/TripSearchCard.tsx
@@ -3,10 +3,9 @@ import { TripCardBase } from './TripCardBase';
 import { useGEOLocationSearch } from 'app/hooks/geojson';
 
 import { FontAwesome } from '@expo/vector-icons';
-import { Platform, View } from 'react-native';
+import {  View } from 'react-native';
 import { PlacesAutocomplete } from 'app/components/PlacesAutocomplete';
-import { useScreenWidth } from 'app/hooks/common';
-import { SCREEN_WIDTH } from 'app/constants/breakpoint';
+import { useMedia } from 'tamagui';
 
 type TripSearchCardProps = {
   searchRef: any;
@@ -15,11 +14,11 @@ type TripSearchCardProps = {
 export const TripSearchCard = ({ searchRef }: TripSearchCardProps) => {
   const { currentTheme } = useTheme();
   const [, setGEOLocation] = useGEOLocationSearch();
-  const { screenWidth } = useScreenWidth();
 
   const handleSelectLocation = (geoJSON) => {
     setGEOLocation(geoJSON);
   };
+  const {xs} = useMedia();
 
   return (
     <TripCardBase
@@ -33,7 +32,7 @@ export const TripSearchCard = ({ searchRef }: TripSearchCardProps) => {
       )}
       title="Where are you heading?"
     >
-      <View style={{ width: screenWidth <= SCREEN_WIDTH ? '50vw' : '30vw' }}>
+      <View style={{ width: xs ? '50vw' : '30vw' }}>
         <PlacesAutocomplete ref={searchRef} onSelect={handleSelectLocation} />
       </View>
     </TripCardBase>
@@ -41,6 +40,8 @@ export const TripSearchCard = ({ searchRef }: TripSearchCardProps) => {
 };
 
 const loadStyles = (theme) => {
+  const {xxs} = useMedia();
+
   const { currentTheme } = theme;
 
   return {
@@ -52,7 +53,7 @@ const loadStyles = (theme) => {
     flex: 1,
     paddingHorizontal: 60,
     paddingVertical: 70,
-    height: Platform.OS === 'web' ? 450 : '100%',
+    height: xxs ? '100%' : 450,
     alignSelf: 'center',
   };
 };
diff --git a/packages/app/screens/items/index.tsx b/packages/app/screens/items/index.tsx
index 90517ed4d..c20f31c03 100644
--- a/packages/app/screens/items/index.tsx
+++ b/packages/app/screens/items/index.tsx
@@ -7,10 +7,10 @@ import { ItemsTable } from 'app/components/itemtable/itemTable';
 // import { Stack } from 'expo-router';
 import useCustomStyles from 'app/hooks/useCustomStyles';
 import { useItems } from 'app/hooks/items/useItems';
-import { usePagination, useScreenWidth } from 'app/hooks/common';
+import { usePagination } from 'app/hooks/common';
 import DropdownComponent from 'app/components/Dropdown';
 import { BaseModal, RScrollView, RStack, RText } from '@packrat/ui';
-import { SCREEN_WIDTH } from 'app/constants/breakpoint';
+import { useMedia } from 'tamagui';
 // import { checkNetworkConnected } from 'app/utils/netInfo';
 
 // const RTooltip: any = OriginalRTooltip;
@@ -59,7 +59,7 @@ export default function Items() {
     setSortedItems(sorted);
   }, [data]);
 
-  const { screenWidth } = useScreenWidth();
+  const { xs, xxxs, xxs } = useMedia();
 
   return (
     <RScrollView>
@@ -71,13 +71,13 @@ export default function Items() {
       <RStack style={styles.mainContainer}>
         <RStack
           style={{
-            width: screenWidth <= SCREEN_WIDTH ? '80vw' : '60vw',
+            width: xs ? '80vw' : '60vw',
             ...styles.container,
           }}
         >
           <RStack
             style={{
-              width: screenWidth <= SCREEN_WIDTH ? '45vw' : '40vw',
+              width: xs ? '45vw' : '40vw',
               ...styles.sortContainer,
             }}
           >
@@ -86,14 +86,8 @@ export default function Items() {
               value={value}
               data={optionValues}
               onValueChange={handleSort}
-              placeholder="Sort By"
-              width={
-                Platform.OS === 'web'
-                  ? screenWidth <= SCREEN_WIDTH
-                    ? '25vw'
-                    : '15vw'
-                  : 120
-              }
+              placeholder={value}
+              width={xxxs ?'25vw': xxs ? 120 : xs ? '25vw' : '15vw'}
             />
           </RStack>
           <BaseModal
@@ -163,6 +157,7 @@ export default function Items() {
 
 const loadStyles = (theme) => {
   const { currentTheme } = theme;
+  const {xxs,xxxs} = useMedia();
 
   return {
     mainContainer: {
@@ -174,7 +169,7 @@ const loadStyles = (theme) => {
     },
     button: {
       color: currentTheme.colors.white,
-      width: Platform.OS === 'web' ? '20rem' : '20%',
+      width: xxs ? '20%' : '20rem',
       display: 'flex',
       alignItems: 'center',
       textAlign: 'center',
@@ -188,7 +183,7 @@ const loadStyles = (theme) => {
     },
     sortContainer: {
       flexDirection: 'row',
-      gap: Platform.OS === 'web' ? 10 : 60,
+      gap: xxxs ? 10 : xxs ? 60: 10,
       alignItems: 'center',
     },
   };
diff --git a/packages/ui/src/tamagui.config.ts b/packages/ui/src/tamagui.config.ts
index 568ec8008..4f05b15a9 100644
--- a/packages/ui/src/tamagui.config.ts
+++ b/packages/ui/src/tamagui.config.ts
@@ -89,6 +89,8 @@ export const config = createTamagui({
   themes,
   tokens,
   media: createMedia({
+    xxxs:{maxWidth:375+10},
+    xxs:{maxWidth:400},
     xs: { maxWidth: 660 },
     sm: { maxWidth: 800 },
     md: { maxWidth: 1020 },

From 32571de2273d81ecd4a41de306be7f1c2591a9a5 Mon Sep 17 00:00:00 2001
From: pinocchio-life-like <icbr19fl@gmail.com>
Date: Fri, 14 Jun 2024 19:25:01 +0300
Subject: [PATCH 032/257] suggestion init

---
 package.json                                  |   1 +
 packages/app/components/chat/index.tsx        | 232 +++++++++++++++++-
 packages/app/components/pack/PackDetails.tsx  |  10 -
 packages/app/hooks/chat/useChat.ts            |  13 +-
 packages/app/hooks/chat/useGetAIResponse.ts   |  56 ++---
 .../Bento/elements/list/SuggestionList.tsx    |  69 ++++++
 packages/ui/src/Bento/elements/list/index.tsx |   1 +
 .../src/controllers/openAi/getAIResponse.ts   |  16 --
 .../controllers/openAi/getAISuggestions.ts    |  31 +++
 server/src/controllers/openAi/index.ts        |   1 +
 server/src/routes/trpcRouter.ts               |   7 +-
 .../services/openAi/getAIResponseService.ts   |  69 ++----
 .../services/openAi/getAISuggestionService.ts | 152 ++++++++++++
 server/src/services/openAi/openAi.service.ts  |   1 +
 .../openAi/referredItemInformation/index.ts   |  60 +++++
 server/src/services/openAi/zodSchema.ts       | 108 ++------
 yarn.lock                                     |  14 ++
 17 files changed, 641 insertions(+), 200 deletions(-)
 create mode 100644 packages/ui/src/Bento/elements/list/SuggestionList.tsx
 create mode 100644 server/src/controllers/openAi/getAISuggestions.ts
 create mode 100644 server/src/services/openAi/getAISuggestionService.ts
 create mode 100644 server/src/services/openAi/referredItemInformation/index.ts

diff --git a/package.json b/package.json
index d2f8c9698..c087cdaa3 100644
--- a/package.json
+++ b/package.json
@@ -88,6 +88,7 @@
   "packageManager": "yarn@4.1.1",
   "dependencies": {
     "@babel/runtime": "^7.21.0",
+    "@instructor-ai/instructor": "^1.4.0",
     "@manypkg/cli": "^0.21.0",
     "@prisma/extension-accelerate": "^0.6.2",
     "check-dependency-version-consistency": "^4.1.0",
diff --git a/packages/app/components/chat/index.tsx b/packages/app/components/chat/index.tsx
index 57adbf132..53553912e 100644
--- a/packages/app/components/chat/index.tsx
+++ b/packages/app/components/chat/index.tsx
@@ -10,10 +10,157 @@ import { RButton, RImage, RInput, RStack } from '@packrat/ui';
 import useCustomStyles from 'app/hooks/useCustomStyles';
 import { useChat } from 'app/hooks/chat/useChat';
 import { loadStyles } from './chat.style';
-import { ChatList } from '@packrat/ui/src/Bento/elements/list';
+import { ChatList, SuggestionList } from '@packrat/ui/src/Bento/elements/list';
 import { X } from '@tamagui/lucide-icons';
 import { MessageCircle, Camera, Settings, Home } from 'lucide-react-native';
 import { ActionItem } from './ActionItem';
+import { BasicTable } from '@packrat/ui/src/Bento/elements/tables';
+
+const chatteer = `Based on the details of your pack titled qwerty, there are some optimizations and essential items that can be added to improve safety, comfort, and efficiency while reducing excessive weight:
+
+1. Water (12oz, 12 pcs, category: Water):
+    - While it's essential to stay hydrated, carrying 12 bottles at 12oz each might be excessive weight-wise. Consider replacing some bottles with a hydration reservoir or collapsible water bottles to save weight.
+    - Add a lightweight water purification method like a purification straw or portable water filter to ensure access to clean water along the way.
+
+2. Chocolate (123oz, 213 pcs, category: Food):
+    - While chocolate can be a tasty treat, consider opting for trail-friendly snacks that are more lightweight and provide sustained energy such as energy bars, dried fruits, or nuts.
+    - Include trail mix or energy bars in your pack for quick and easy snacks while hiking.
+
+3. Jacket (4kg, 23 pcs, category: Essentials):
+    - Carrying a 4kg jacket is quite heavy and may not be suitable for hiking. Consider replacing it with a lightweight and packable waterproof jacket for weather protection. 
+    - Essential clothing items like quick-dry layers, extra socks, and a hat can provide more versatility and comfort without the excessive weight.
+
+New Item Suggestions:
+- Lightweight backpacking stove and dehydrated meals for quick and easy hot meals on the trail.
+- Compact first aid kit with essential supplies for emergencies.
+- Multi-tool with knife for various tasks while hiking.
+
+Suggested and Improved Pack for qwerty:
+1. Water (12oz, 6 pcs, category: Water)
+2. Trail Mix (8oz, 1 pcs, category: Food)
+3. Energy Bars (6oz, 2 pcs, category: Food)
+4. Lightweight Backpacking Stove (8oz, 1 pcs, category: Essentials)
+5. Dehydrated Meals (6oz, 2 pcs, category: Food)
+6. Lightweight Waterproof Jacket (1kg, 1 pcs, category: Essentials)
+7. Quick-Dry Layers (500g, 2 pcs, category: Essentials)
+8. Extra Socks (100g, 3 pairs, category: Essentials)
+9. Hat (100g, 1 pcs, category: Essentials)
+10. First Aid Kit (200g, 1 pcs, category: Essentials)
+11. Multi-Tool with Knife (150g, 1 pcs, category: Essentials)
+12. Hydration Reservoir (empty) or Lightweight Collapsible Water Bottles (category: Water)
+13. Purification Straw (category: Water)
+
+Total Estimated Weight: Reduced from 838810.8785g to a more manageable and efficient weight.
+
+ALWAYS be mindful of weight optimization to ensure a comfortable and safe hiking experience.`;
+
+const suggestion = {
+  Items: [
+    {
+      name: 'Water',
+      weight: 340.19449,
+      unit: 'g',
+      quantity: 6,
+      category: 'Water',
+    },
+    {
+      name: 'Trail Mix',
+      weight: 226.796185,
+      unit: 'g',
+      quantity: 1,
+      category: 'Food',
+    },
+    {
+      name: 'Energy Bars',
+      weight: 170.097139,
+      unit: 'g',
+      quantity: 2,
+      category: 'Food',
+    },
+    {
+      name: 'Lightweight Backpacking Stove',
+      weight: 226.796185,
+      unit: 'g',
+      quantity: 1,
+      category: 'Essentials',
+    },
+    {
+      name: 'Dehydrated Meals',
+      weight: 170.097139,
+      unit: 'g',
+      quantity: 2,
+      category: 'Food',
+    },
+    {
+      name: 'Lightweight Waterproof Jacket',
+      weight: 1000,
+      unit: 'g',
+      quantity: 1,
+      category: 'Essentials',
+    },
+    {
+      name: 'Quick-Dry Layers',
+      weight: 500,
+      unit: 'g',
+      quantity: 2,
+      category: 'Essentials',
+    },
+    {
+      name: 'Extra Socks',
+      weight: 100,
+      unit: 'g',
+      quantity: 3,
+      category: 'Essentials',
+    },
+    {
+      name: 'Hat',
+      weight: 100,
+      unit: 'g',
+      quantity: 1,
+      category: 'Essentials',
+    },
+    {
+      name: 'First Aid Kit',
+      weight: 200,
+      unit: 'g',
+      quantity: 1,
+      category: 'Essentials',
+    },
+    {
+      name: 'Multi-Tool with Knife',
+      weight: 150,
+      unit: 'g',
+      quantity: 1,
+      category: 'Essentials',
+    },
+    {
+      name: 'Hydration Reservoir',
+      weight: 0,
+      unit: 'g',
+      quantity: 1,
+      category: 'Water',
+    },
+    {
+      name: 'Purification Straw',
+      weight: 0,
+      unit: 'g',
+      quantity: 1,
+      category: 'Water',
+    },
+  ],
+};
+
+function groupItemsByCategory(suggestion) {
+  return suggestion.Items.reduce((acc, item, index) => {
+    const itemWithId = {
+      ...item,
+      id: `item${index}`,
+      category: { name: item.category },
+    };
+    (acc[item.category] = acc[item.category] || []).push(itemWithId);
+    return acc;
+  }, {});
+}
 
 // TODO check if we've fixed the chat screen on another branch
 // link: https://github.com/andrew-bierman/PackRat/issues/ ???
@@ -62,6 +209,7 @@ const ChatComponent: React.FC<ChatComponentProps> = ({
     parsedMessages,
     userInput,
     handleSendMessage,
+    handleSubmitAnalysis,
     setUserInput,
     setTypeId,
     isLoading,
@@ -137,6 +285,54 @@ const ChatComponent: React.FC<ChatComponentProps> = ({
   );
 };
 
+const SuggestionComponent = ({ itemTypeId = null, type = null }) => {
+  const { handleSubmitAnalysis } = useChat({ itemTypeId, type });
+  const styles = useCustomStyles(loadStyles);
+
+  const scrollViewRef = useRef<ScrollView>(null);
+
+  const handleLayout = () => {
+    scrollViewRef.current?.scrollToEnd({ animated: false });
+  };
+
+  return (
+    <View>
+      <RStack style={{ flex: 1 }}>
+        <Text style={{ width: '100%', textAlign: 'center', padding: 8 }}>
+          Allow me to suggest some improvements to your pack!
+        </Text>
+        <ScrollView
+          ref={scrollViewRef}
+          onContentSizeChange={handleLayout}
+          style={{ maxHeight: 620, width: '100%', borderRadius: 10 }}
+          showsVerticalScrollIndicator={false}
+          contentContainerStyle={{ flexGrow: 1, justifyContent: 'flex-end' }}
+        >
+          <SuggestionList suggestion={suggestion} />
+        </ScrollView>
+        <RStack
+          style={{
+            marginTop: 10,
+            gap: 8,
+            flexDirection: 'row',
+            width: '100%',
+          }}
+        >
+          <RButton
+            onClick={() => {
+              console.log(groupItemsByCategory(suggestion));
+              // handleSubmitAnalysis();
+            }}
+            style={{ width: '100%' }}
+          >
+            <Text style={styles.sendText}>Analyze</Text>
+          </RButton>
+        </RStack>
+      </RStack>
+    </View>
+  );
+};
+
 const ChatModalTrigger: React.FC<ChatModalTriggerProps> = ({
   itemTypeId,
   type,
@@ -256,7 +452,7 @@ const ChatModalTrigger: React.FC<ChatModalTriggerProps> = ({
             bottom: 60,
             right: 5,
             width: 450,
-            backgroundColor: '#000',
+            backgroundColor: '#fff',
             borderRadius: 10,
             padding: 4,
             zIndex: 1000,
@@ -281,6 +477,38 @@ const ChatModalTrigger: React.FC<ChatModalTriggerProps> = ({
           <ChatComponent itemTypeId={itemTypeId} type={type} />
         </Animated.View>
       )}
+      {isSuggestionsOpen && (
+        <Animated.View
+          style={{
+            position: 'absolute',
+            bottom: 60,
+            right: 5,
+            width: 450,
+            backgroundColor: '#fff',
+            borderRadius: 10,
+            padding: 4,
+            zIndex: 1000,
+            shadowColor: '#000',
+            shadowOffset: { width: 0, height: 2 },
+            shadowOpacity: 0.25,
+            shadowRadius: 3.84,
+            elevation: 5,
+          }}
+        >
+          <RButton
+            position="absolute"
+            backgroundColor="$background"
+            top="$2"
+            right="$2"
+            size="$2"
+            circular
+            icon={X}
+            onPress={() => setIsSuggestionsOpen(false)}
+            style={{ zIndex: 1001 }}
+          />
+          <SuggestionComponent itemTypeId={itemTypeId} type={type} />
+        </Animated.View>
+      )}
     </View>
   );
 };
diff --git a/packages/app/components/pack/PackDetails.tsx b/packages/app/components/pack/PackDetails.tsx
index 9ecf30bf7..41245119a 100644
--- a/packages/app/components/pack/PackDetails.tsx
+++ b/packages/app/components/pack/PackDetails.tsx
@@ -126,16 +126,6 @@ export function PackDetails() {
                                     isOwner={isOwner}
                                   />
                                 );
-                              // case SECTION.CHAT:
-                              //   return (
-                              //     <View style={styles.boxStyle}>
-                              //       <ChatContainer
-                              //         itemTypeId={currentPackId}
-                              //         title="Chat"
-                              //         trigger="Open Chat"
-                              //       />
-                              //     </View>
-                              //   );
                               default:
                                 return null;
                             }
diff --git a/packages/app/hooks/chat/useChat.ts b/packages/app/hooks/chat/useChat.ts
index 913f5f403..e686a413d 100644
--- a/packages/app/hooks/chat/useChat.ts
+++ b/packages/app/hooks/chat/useChat.ts
@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { useGetUserChats } from './useGetUserChats';
-import { useGetAIResponse } from './useGetAIResponse';
+import { useGetAIResponse, useGetAISuggestions } from './useGetAIResponse';
 import { useAuthUser } from 'app/auth/hooks';
 
 export const useChat = (itemTypeId = null) => {
@@ -18,6 +18,7 @@ export const useChat = (itemTypeId = null) => {
   );
 
   const { getAIResponse } = useGetAIResponse();
+  const { getAISuggestions } = useGetAISuggestions();
 
   const conversations = chatsData?.conversations?.history || '';
 
@@ -81,6 +82,15 @@ export const useChat = (itemTypeId = null) => {
     setIsLoading(false);
   };
 
+  const handleSubmitAnalysis = async () => {
+    await getAISuggestions({
+      userId: user.id,
+      itemTypeId: typeId.itemTypeId,
+      type: typeId.type,
+    });
+    await refetch();
+  };
+
   return {
     conversations,
     typeId,
@@ -88,6 +98,7 @@ export const useChat = (itemTypeId = null) => {
     userInput,
     isLoading,
     handleSendMessage,
+    handleSubmitAnalysis,
     setUserInput,
     setTypeId,
   };
diff --git a/packages/app/hooks/chat/useGetAIResponse.ts b/packages/app/hooks/chat/useGetAIResponse.ts
index 15d9f0aa6..455bd6fb2 100644
--- a/packages/app/hooks/chat/useGetAIResponse.ts
+++ b/packages/app/hooks/chat/useGetAIResponse.ts
@@ -3,41 +3,7 @@ import { queryTrpc } from '../../trpc';
 export function useGetAIResponse() {
   const utils = queryTrpc.useContext();
   const mutation = queryTrpc.getAIResponse.useMutation({
-    // onMutate: async ({ userId, conversationId, userInput }) => {
-    //   const previousConversation = queryTrpc.getConversationById.getData({
-    //     conversationId,
-    //   });
-    //   const newQueryData = {
-    //     ...previousConversation,
-    //     messages: [
-    //       ...previousConversation.messages,
-    //       {
-    //         message: userInput,
-    //         sender: userId,
-    //         id: Date.now().toString(),
-    //       },
-    //     ],
-    //   };
-    //   queryTrpc.getConversationById.setData(
-    //     { conversationId },
-    //     newQueryData,
-    //   );
-    //   return {
-    //     previousConversation,
-    //   };
-    // },
-    // onError: (err, { userId, conversationId, userInput }, context) => {
-    //
-    //
-    //   if (context.previousConversation) {
-    //     queryTrpc.getConversationById.setData(
-    //       { conversationId },
-    //       context.previousConversation,
-    //     );
-    //   }
-    // },
     onSuccess: () => {
-      //   queryTrpc.getUserChats.invalidate();
       utils.invalidate();
     },
   });
@@ -56,3 +22,25 @@ export function useGetAIResponse() {
     ...mutation,
   };
 }
+
+export function useGetAISuggestions() {
+  const utils = queryTrpc.useContext();
+  const mutation = queryTrpc.getAISuggestions.useMutation({
+    onSuccess: () => {
+      utils.invalidate();
+    },
+  });
+
+  const getAISuggestions = async ({ userId, itemTypeId, type }) => {
+    return mutation.mutate({
+      userId,
+      itemTypeId,
+      type,
+    });
+  };
+
+  return {
+    getAISuggestions,
+    ...mutation,
+  };
+}
diff --git a/packages/ui/src/Bento/elements/list/SuggestionList.tsx b/packages/ui/src/Bento/elements/list/SuggestionList.tsx
new file mode 100644
index 000000000..53d3d69f3
--- /dev/null
+++ b/packages/ui/src/Bento/elements/list/SuggestionList.tsx
@@ -0,0 +1,69 @@
+import React, { useEffect, useState } from 'react';
+import { Phone } from '@tamagui/lucide-icons';
+import type { ColorTokens } from 'tamagui';
+import { Avatar, Button, Circle, Separator, Text, View, YGroup } from 'tamagui';
+import { RButton } from '@packrat/ui';
+
+// type SuggestionList = typeof suggestion.Items;
+
+export function SuggestionList({ suggestion }) {
+  const [itemsList, setItemsList] = useState([]);
+
+  useEffect(() => {
+    setItemsList(suggestion.Items);
+  }, []);
+  return (
+    <YGroup width="100%" justifyContent="center" alignItems="center">
+      <View
+        $group-window-gtXs={{
+          padding: '$3',
+          width: 600,
+        }}
+        gap="$1.5"
+        minWidth="100%"
+      >
+        {itemsList.map((item, i) => (
+          <React.Fragment key={item.name}>
+            <Item item={item} />
+            {i < itemsList.length - 1 && <Separator />}
+          </React.Fragment>
+        ))}
+      </View>
+    </YGroup>
+  );
+}
+
+SuggestionList.fileName = 'List';
+
+function Item({ item }) {
+  return (
+    <YGroup.Item>
+      <View
+        flexDirection="row"
+        paddingVertical="$2"
+        gap="$2"
+        $group-window-gtXs={{
+          padding: '$4',
+          gap: '$4',
+        }}
+        backgroundColor="$color1"
+        alignItems="center"
+      >
+        <View flexDirection="column" flexShrink={1} justifyContent="center">
+          <Text selectable>{item.name}</Text>
+          <Text
+            selectable
+            fontSize="$2"
+            lineHeight="$2"
+            fontWeight="$2"
+            theme="alt1"
+          >
+            {item.category} {item.weight}
+            {item.unit}, {item.quantity}pcs
+          </Text>
+        </View>
+        <RButton marginLeft="auto">Add</RButton>
+      </View>
+    </YGroup.Item>
+  );
+}
diff --git a/packages/ui/src/Bento/elements/list/index.tsx b/packages/ui/src/Bento/elements/list/index.tsx
index b0714612f..fe173b153 100644
--- a/packages/ui/src/Bento/elements/list/index.tsx
+++ b/packages/ui/src/Bento/elements/list/index.tsx
@@ -4,3 +4,4 @@ export * from './ChatList';
 export * from './MasonryListExample';
 export * from './ItemValueList';
 export * from './List';
+export * from './SuggestionList';
diff --git a/server/src/controllers/openAi/getAIResponse.ts b/server/src/controllers/openAi/getAIResponse.ts
index ca503cc7c..d9355f452 100644
--- a/server/src/controllers/openAi/getAIResponse.ts
+++ b/server/src/controllers/openAi/getAIResponse.ts
@@ -1,9 +1,6 @@
 import { getAIResponseService } from '../../services/openAi/openAi.service';
 import { publicProcedure } from '../../trpc';
 import { z } from 'zod';
-// import { getAIResponseService } from './langchain';
-import { GetResponseFromAIError } from '../../helpers/errors';
-import { responseHandler } from '../../helpers/responseHandler';
 
 /**
  * Retrieves an AI response based on user input and conversation history.
@@ -11,19 +8,6 @@ import { responseHandler } from '../../helpers/responseHandler';
  * @param {Object} res - The response object.
  * @return {Object} The AI response and updated conversation object.
  */
-// export const getAIResponse = async (req, res, next) => {
-//   console.log('Helooooooooooooooooooooooooo');
-//   try {
-//     const { userId, userInput, itemTypeId } = req.body;
-
-//     const result = await getAIResponseService(userId, userInput, itemTypeId);
-
-//     res.locals.data = result;
-//     responseHandler(res);
-//   } catch (error) {
-//     next(GetResponseFromAIError);
-//   }
-// };
 
 export function getAIResponseRoute() {
   return publicProcedure
diff --git a/server/src/controllers/openAi/getAISuggestions.ts b/server/src/controllers/openAi/getAISuggestions.ts
new file mode 100644
index 000000000..8ea13f119
--- /dev/null
+++ b/server/src/controllers/openAi/getAISuggestions.ts
@@ -0,0 +1,31 @@
+import { getAISuggestionService } from '../../services/openAi/openAi.service';
+import { publicProcedure } from '../../trpc';
+import { z } from 'zod';
+
+/**
+ * Retrieves an AI response based on user input and conversation history.
+ * @param {Object} req - The request object.
+ * @param {Object} res - The response object.
+ * @return {Object} The AI response and updated conversation object.
+ */
+
+export function getAISuggestionsRoute() {
+  return publicProcedure
+    .input(
+      z.object({
+        userId: z.string(),
+        itemTypeId: z.string(),
+        type: z.string(),
+      }),
+    )
+    .mutation(async (opts) => {
+      const { env } = opts.ctx;
+      const { userId, itemTypeId, type } = opts.input;
+      return getAISuggestionService(
+        userId,
+        itemTypeId,
+        type,
+        env.OPENAI_API_KEY,
+      );
+    });
+}
diff --git a/server/src/controllers/openAi/index.ts b/server/src/controllers/openAi/index.ts
index f4a1ee401..238c5ae35 100644
--- a/server/src/controllers/openAi/index.ts
+++ b/server/src/controllers/openAi/index.ts
@@ -1,2 +1,3 @@
 export * from './getAIResponse';
 export * from './getUserChats';
+export * from './getAISuggestions';
diff --git a/server/src/routes/trpcRouter.ts b/server/src/routes/trpcRouter.ts
index a1ecf1c0c..235afe6e8 100644
--- a/server/src/routes/trpcRouter.ts
+++ b/server/src/routes/trpcRouter.ts
@@ -50,7 +50,11 @@ import {
   scorePackRoute,
 } from '../controllers/pack';
 
-import { getAIResponseRoute, getUserChatsRoute } from '../controllers/openAi';
+import {
+  getAIResponseRoute,
+  getUserChatsRoute,
+  getAISuggestionsRoute,
+} from '../controllers/openAi';
 import {
   addGlobalItemToPackRoute,
   addItemGlobalRoute,
@@ -167,6 +171,7 @@ export const appRouter = trpcRouter({
   getPhotonDetails: getPhotonDetailsRoute(),
   // open ai routes
   getAIResponse: getAIResponseRoute(),
+  getAISuggestions: getAISuggestionsRoute(),
   getUserChats: getUserChatsRoute(),
   // item routes
   getItems: getItemsRoute(),
diff --git a/server/src/services/openAi/getAIResponseService.ts b/server/src/services/openAi/getAIResponseService.ts
index a11b37195..eccbac0b4 100644
--- a/server/src/services/openAi/getAIResponseService.ts
+++ b/server/src/services/openAi/getAIResponseService.ts
@@ -1,11 +1,8 @@
 import OpenAI from 'openai';
 import Instructor from '@instructor-ai/instructor';
-import { PackSchema, ItemSchema } from './zodSchema';
 import { Conversation } from '../../drizzle/methods/Conversation';
 import { User } from '../../drizzle/methods/User';
-import { getPackByIdService } from '../pack/getPackByIdService';
-// import { getPackInformation } from './langchain';
-
+import { getPackInformation } from './referredItemInformation';
 /**
  * Retrieves AI response for a given user input in a conversation.
  * @param {PrismaClient} prisma - Prisma client.
@@ -47,37 +44,20 @@ export const getAIResponseService = async (
     throw new Error('User not found');
   }
 
-  async function getPackInformation(packId) {
-    if (!packId) return '';
-    const packData: any = await getPackByIdService(packId);
-
-    return `The user has a pack titled ${packData.name}, owned by ${packData.owner.name}. 
-    This pack contains items like ${packData.items
-      .map(
-        (item: any) =>
-          `${item.name} (${item.weight}${item.unit}, ${item.quantity} pcs, category: ${item.category.name})`,
-      )
-      .join(', ')}. 
-    The pack is ${packData.is_public ? 'public' : 'private'}, favorited by ${
-      packData.favorites_count
-    } users, created on ${new Date(packData.createdAt).toLocaleDateString()}. 
-    It is graded as ${packData?.grades?.weight}, ${
-      packData?.grades?.essentialItems
-    }, and ${
-      packData?.grades?.redundancyAndVersatility
-    } in weight, essential items, and redundancy/versatility respectively. 
-    The scores are: weight ${packData?.scores?.weightScore}, essential items ${
-      packData?.scores?.essentialItemsScore
-    }, and redundancy/versatility ${
-      packData?.scores?.redundancyAndVersatilityScore
-    }, 
-    totaling ${packData?.totalScore} with a total weight of ${
-      packData.total_weight
-    }g.`;
+  let itemInfo;
+  switch (type) {
+    case 'trip':
+      console.log('trip');
+      // info = await getTripInformation(itemTypeId);
+      break;
+    case 'pack':
+      itemInfo = await getPackInformation(itemTypeId);
+      break;
+    default:
+      console.log('trip');
+      throw new Error(`Invalid type: ${itemTypeId}`);
   }
 
-  const packInfo = await getPackInformation(itemTypeId);
-
   let conversation: any = await conversationClass.findConversation(
     userId,
     itemTypeId,
@@ -101,18 +81,7 @@ export const getAIResponseService = async (
   // a detailed system message to instruct the model about its role
   const systemMessage = {
     role: 'system',
-    content: `You are a helpful assistant that provides hiking advice. You should only provide advice related to hiking and not generate any other type of content whatsoever. General greetings and polite interactions are fine. If a user asks for help outside of the hiking domain, respond with: "Sorry, I can not help with that 😅!" Additionally, make your responses more detailed when the user asks relevant hiking-related questions.
-
-    The user may have a hiking pack. ${packInfo}
-
-    When interacting with the user:
-    - Provide detailed advice on hiking-related questions.
-    - Use the pack details to give personalized recommendations and optimizations.
-    - Offer suggestions to improve the user's pack considering safety, comfort, and efficiency.
-    - Be proactive in suggesting useful items or changes based on the pack's contents.
-    - Always keep the user's trip specifics in mind, such as destination, duration, and weather conditions.
-
-    Remember, your goal is to enhance the user's hiking experience by providing valuable and relevant advice based on the context of their pack and trip.`,
+    content: itemInfo,
   };
 
   // Add the system message to the beginning of the messages array
@@ -124,17 +93,9 @@ export const getAIResponseService = async (
   const response = await client.chat.completions.create({
     model: 'gpt-3.5-turbo',
     messages,
-    temperature: 0.5,
-    // response_model: { schema: PackSchema },
+    temperature: 0.8,
   });
 
-  // const response = await openai.chat.completions.create({
-  //   model: 'gpt-3.5-turbo',
-  //   messages,
-  //   temperature: 0.5, // Lower temperature to make output more deterministic
-  //   // min_tokens: 100, // Limit the length of the response this doesnt exist still
-  // });
-
   const aiResponse = response.choices?.[0]?.message?.content?.trim() || '';
   conversationHistory += `\nUser: ${userInput}\nAI: ${aiResponse}`;
 
diff --git a/server/src/services/openAi/getAISuggestionService.ts b/server/src/services/openAi/getAISuggestionService.ts
new file mode 100644
index 000000000..557ee2eeb
--- /dev/null
+++ b/server/src/services/openAi/getAISuggestionService.ts
@@ -0,0 +1,152 @@
+import OpenAI from 'openai';
+import Instructor from '@instructor-ai/instructor';
+import { User } from '../../drizzle/methods/User';
+import { getPackByIdService } from '../pack/getPackByIdService';
+import { getPackSuggestionPrompt } from './referredItemInformation';
+import { PackSchema } from './zodSchema';
+
+/**
+ * Retrieves AI response for a given user input in a conversation.
+ * @param {PrismaClient} prisma - Prisma client.
+ * @param {string} userId - The ID of the user.
+ * @param {string} itemTypeId - The ID of the conversation.
+ * @param {string} userInput - The user input in the conversation.
+ * @returns {Object} - The AI response and the updated conversation.
+ */
+
+export const getAISuggestionService = async (
+  userId: string,
+  itemTypeId: string,
+  type: string,
+  openAIAPIKey: string,
+): Promise<object> => {
+  if (!openAIAPIKey) {
+    throw new Error(
+      'Failed to get response from AI. OPENAI_API_KEY is not set.',
+    );
+  }
+  const userClass = new User();
+
+  const openai = new OpenAI({
+    apiKey: openAIAPIKey,
+  });
+
+  // Apply the patch to the OpenAI client
+  const client = Instructor({
+    client: openai,
+    mode: 'TOOLS',
+  });
+
+  const refiner = Instructor({
+    client: openai,
+    mode: 'FUNCTIONS',
+  });
+
+  const user = await userClass.findUser({ userId });
+
+  if (!user) {
+    throw new Error('User not found');
+  }
+
+  let itemInfo;
+  switch (type) {
+    case 'trip':
+      console.log('trip');
+      // info = await getTripInformation(itemTypeId);
+      break;
+    case 'pack':
+      itemInfo = await getPackSuggestionPrompt(itemTypeId);
+      break;
+    default:
+      console.log('trip');
+      throw new Error(`Invalid type: ${itemTypeId}`);
+  }
+
+  const response = await client.chat.completions.create({
+    model: 'gpt-3.5-turbo',
+    messages: [
+      {
+        role: 'system',
+        content: `Analyze and Optimize the user pack as per the following guidelines:
+            -Use the pack details to give personalized recommendations and optimizations.
+            -improve the pack items considering safety, comfort, and efficiency.
+            -Suggest a new Item that might reduce excessive weight, such as substituting heavy items with lighter alternatives (e.g., a water filter instead of carrying excessive water).
+            -add essential items that might be missing from the pack.
+
+            Here are some good guidelines to follow:
+            General:
+                Food:
+                Meals: Trail-friendly meals (freeze-dried, instant)
+                Snacks: Trail mix, energy bars, jerky, dried fruit
+                Water:
+                Hydration: Water bottles or hydration bladder
+                Purification: Water filter or purification tablets
+                Essentials:
+                Navigation: Map, compass, GPS device
+                Clothing: Weather-appropriate layers, hat, hiking boots, extra socks
+                Safety: First aid kit, personal medications, sunscreen, insect repellent
+                Gear: Comfortable backpack, headlamp with extra batteries, multi-tool
+                Documents: ID, permits, emergency contact info
+                Communication: Cell phone, portable charger or power bank
+
+            Food Guide:
+
+                Hey there, adventurers! Ready for your next hike? Here is a quick and tasty guide to fuel your journey:
+                Easy Snacks:
+                Trail Mix: Nuts, seeds, dried fruit, and chocolate bits.
+                Energy Bars: Natural ingredient bars.
+                Dried Fruits: Apricots, apple slices, raisins, dates.
+                Nuts & Seeds: Almonds, walnuts, sunflower seeds.
+                Lunch Options:
+                Sandwiches: Nut butter, cheese, or lean meat.
+                Wraps: Whole-grain tortillas with hummus, veggies, or protein.
+                Cheese & Crackers: Hard cheese and whole-grain crackers.
+                Quick Meals:
+                Instant Noodles/Couscous: Quick-cook with hot water.
+                Dehydrated Meals: Lightweight, just add water.
+
+            Essentials Guide:
+                Navigation: Map & Compass,GPS Device
+                Clothing: Quick-Dry Layers, Waterproof Jacket, Extra Socks, Hat and Sunglasses
+                Safety Gear: First Aid Kit, Multi-Tool/Knife, Whistle
+                Sun Protection: Sunscreen, Hat & Sunglasses
+                Light: Headlamp/Flashlight
+                Emergency Shelter: Bivy Sack/Space Blanket
+                Fire: Matches/Lighter
+                Backpack: Comfortable Hiking Backpack
+
+            Water Guide:
+                Water Bottles/Reservoir: Carry at least 2-3 liters.
+                Purification Straw: Lightweight and effective.
+                Portable Water Filter: Perfect for streams and lakes.
+
+            
+            * Give a good reasoning and then Finally 'ALWAYS' Give the suggested and improved pack in the users original request format,
+              remember the items in the pack array of of strings "name (weight and unit of measurement(lb, oz, kg, g), quantity pcs, category: category name)"
+              just like the user prompt. and category is of three Either Food, Water or Essentials.`,
+      },
+      { role: 'user', content: itemInfo },
+    ],
+  });
+
+  const aiResponse = response.choices?.[0]?.message?.content?.trim() || '';
+
+  const refined = await refiner.chat.completions.create({
+    model: 'gpt-3.5-turbo',
+    messages: [
+      {
+        role: 'user',
+        content: aiResponse,
+      },
+    ],
+    response_model: { schema: PackSchema, name: 'Pack' },
+    max_retries: 2,
+  });
+
+  console.log(aiResponse, refined);
+
+  return {
+    aiResponse,
+    refined,
+  };
+};
diff --git a/server/src/services/openAi/openAi.service.ts b/server/src/services/openAi/openAi.service.ts
index 40381c31a..ba4fa0252 100644
--- a/server/src/services/openAi/openAi.service.ts
+++ b/server/src/services/openAi/openAi.service.ts
@@ -1,2 +1,3 @@
 export * from './getAIResponseService';
 export * from './getUserChatsService';
+export * from './getAISuggestionService';
diff --git a/server/src/services/openAi/referredItemInformation/index.ts b/server/src/services/openAi/referredItemInformation/index.ts
new file mode 100644
index 000000000..d1c65d311
--- /dev/null
+++ b/server/src/services/openAi/referredItemInformation/index.ts
@@ -0,0 +1,60 @@
+import { getPackByIdService } from '../../pack/getPackByIdService';
+
+export async function getPackInformation(packId) {
+  if (!packId) return '';
+  const packData: any = await getPackByIdService(packId);
+
+  return `You are a helpful assistant that provides hiking advice. 
+    You should only provide advice related to hiking and not generate any other type of content whatsoever.
+    General greetings and polite interactions are fine.
+    If a user asks for help outside of the hiking domain, respond with: "Sorry, I can not help with that 😅!"
+
+    The user has a pack titled ${packData.name}, owned by ${packData.owner.name}. 
+
+    This pack contains items like ${packData.items
+      .map(
+        (item: any) =>
+          `${item.name} (${item.weight}${item.unit}, ${item.quantity} pcs, category: ${item.category.name})`,
+      )
+      .join(', ')}. 
+    The pack is ${packData.is_public ? 'public' : 'private'}, favorited by ${
+      packData.favorites_count
+    } users, created on ${new Date(packData.createdAt).toLocaleDateString()}. 
+    It is graded as ${packData?.grades?.weight}, ${
+      packData?.grades?.essentialItems
+    }, and ${
+      packData?.grades?.redundancyAndVersatility
+    } in weight, essential items, and redundancy/versatility respectively. 
+    The scores are: weight ${packData?.scores?.weightScore}, essential items ${
+      packData?.scores?.essentialItemsScore
+    }, and redundancy/versatility ${
+      packData?.scores?.redundancyAndVersatilityScore
+    }, 
+    totaling ${packData?.totalScore} with a total weight of ${
+      packData.total_weight
+    }g.
+    
+    When interacting with the user:
+    - Provide detailed advice on hiking-related questions.
+    - Use the pack details to give personalized recommendations and optimizations.
+    - Offer suggestions to improve the user's pack considering safety, comfort, and efficiency.
+    - Be proactive in suggesting useful items or changes based on the pack's contents.
+    - Always keep the user's trip specifics in mind, such as destination, duration, and weather conditions.
+
+    Remember, your goal is to enhance the user's hiking experience by providing valuable and relevant advice based on the context of their pack and trip.`;
+}
+
+export const getPackSuggestionPrompt = async (packId) => {
+  if (!packId) return '';
+  const packData: any = await getPackByIdService(packId);
+
+  return `Below are the details of my pack titled ${packData.name}
+    "Items: ${packData.items
+      .map(
+        (item: any) =>
+          `${item.name} (${item.weight}${item.unit}, ${item.quantity} pcs, category: ${item.category.name})`,
+      )
+      .join(', ')},
+    Total Weight: ${packData.total_weight}g".
+`;
+};
diff --git a/server/src/services/openAi/zodSchema.ts b/server/src/services/openAi/zodSchema.ts
index 6d26c7b8e..584eafc52 100644
--- a/server/src/services/openAi/zodSchema.ts
+++ b/server/src/services/openAi/zodSchema.ts
@@ -1,87 +1,31 @@
 import { z } from 'zod';
 
-const ItemSchema = z
-  .object({
-    name: z.string().describe('The name of the item'),
-    weight: z.number().describe('The weight of the item'),
-    quantity: z.number().describe('The quantity of the item'),
-    unit: z.string().describe('The unit of measurement for the item'),
-    category: z.string().describe('The category the item belongs to'),
-    owners: z
-      .array(z.string())
-      .default([])
-      .describe('An array of user IDs who own the item'),
-    packs: z
-      .array(z.string())
-      .default([])
-      .describe('An array of pack IDs where the item is included'),
-    global: z
-      .boolean()
-      .default(false)
-      .describe(
-        'A boolean indicating whether the item is globally accessible or not',
-      ),
-  })
-  .describe(
-    'A detailed schema for an item, including its properties and associations',
-  );
+const ItemSchema = z.object({
+  name: z.string(),
+  weight: z.number(),
+  unit: z.string(),
+  quantity: z.number(),
+  category: z.enum(['Food', 'Water', 'Essentials']),
+});
 
-const PackSchema = z
-  .object({
-    name: z.string().describe('The name of the pack'),
-    items: z.array(z.string()).describe('An array of items in the pack'),
-    owner_id: z.string().describe('The ID of the owner of the pack'),
-    is_public: z
-      .boolean()
-      .describe('A boolean indicating whether the pack is public or not'),
-    favorited_by: z
-      .number()
-      .describe('The number of users who have favorited the pack'),
-    createdAt: z.string().describe('The creation date of the pack'),
-    grades: z
-      .object({
-        weight: z.string().default('').describe('The weight grade of the pack'),
-        essentialItems: z
-          .string()
-          .default('')
-          .describe('The essential items grade of the pack'),
-        redundancyAndVersatility: z
-          .string()
-          .default('')
-          .describe('The redundancy and versatility grade of the pack'),
-      })
-      .describe(
-        'An object containing the grades assigned to the pack based on various factors',
-      ),
-    scores: z
-      .object({
-        weightScore: z
-          .number()
-          .default(0)
-          .describe(
-            'The score calculated based on the total weight of the pack',
-          ),
-        essentialItemsScore: z
-          .number()
-          .default(0)
-          .describe(
-            'The score calculated based on the essential items in the pack',
-          ),
-        redundancyAndVersatilityScore: z
-          .number()
-          .default(0)
-          .describe(
-            'The score calculated based on the redundancy and versatility of items in the pack',
-          ),
-      })
-      .describe(
-        'An object containing the scores calculated for the pack based on various factors',
-      ),
-  })
-  .describe(
-    'A detailed available data of a users pack, including its properties, grades, and scores',
-  );
+const UserSchema = z.object({
+  id: z.string(),
+  name: z.string(),
+  username: z.string(),
+});
 
-// define for trip and items as well
+const ItemPackSchema = z.object({
+  packId: z.string(),
+  item: ItemSchema,
+});
 
-export { PackSchema, ItemSchema };
+const TripSchema = z.object({
+  id: z.string(),
+  name: z.string(),
+});
+
+export const PackSchema = z.object({
+  Items: z
+    .array(ItemSchema)
+    .describe('This are items that are in the users pack'),
+});
diff --git a/yarn.lock b/yarn.lock
index ddccdbd56..9503de870 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4535,6 +4535,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@instructor-ai/instructor@npm:^1.4.0":
+  version: 1.4.0
+  resolution: "@instructor-ai/instructor@npm:1.4.0"
+  dependencies:
+    zod-stream: "npm:1.0.3"
+    zod-validation-error: "npm:^2.1.0"
+  peerDependencies:
+    openai: ">=4.28.0"
+    zod: ">=3.22.4"
+  checksum: 10/c982e5564e35d55eb43f4ce40b793626256359a062cad1f153bc8aba8e33d7c57c696ddcbf0cbb2c45a3f20740f64b21c052f585f28782e0987ff1e5f553c8ab
+  languageName: node
+  linkType: hard
+
 "@internationalized/date@npm:^3.5.3":
   version: 3.5.3
   resolution: "@internationalized/date@npm:3.5.3"
@@ -28805,6 +28818,7 @@ __metadata:
   resolution: "packrat-world@workspace:."
   dependencies:
     "@babel/runtime": "npm:^7.21.0"
+    "@instructor-ai/instructor": "npm:^1.4.0"
     "@manypkg/cli": "npm:^0.21.0"
     "@prisma/extension-accelerate": "npm:^0.6.2"
     check-dependency-version-consistency: "npm:^4.1.0"

From fe3b062b9a269fa500179733ccb8d473ec63e5ff Mon Sep 17 00:00:00 2001
From: Muhammad Hassan <mh7722178@gmail.com>
Date: Fri, 14 Jun 2024 22:31:51 +0500
Subject: [PATCH 033/257] Login and Signup UI Changed

---
 packages/app/screens/LoginScreen.tsx          | 140 +--------
 packages/app/screens/RegisterScreen.tsx       |  47 +--
 .../src/Bento/forms/layouts/SignInScreen.tsx  | 273 ++++++++++--------
 3 files changed, 181 insertions(+), 279 deletions(-)

diff --git a/packages/app/screens/LoginScreen.tsx b/packages/app/screens/LoginScreen.tsx
index a20221139..6195e5a5f 100644
--- a/packages/app/screens/LoginScreen.tsx
+++ b/packages/app/screens/LoginScreen.tsx
@@ -17,6 +17,7 @@ import { NODE_ENV } from '@packrat/config';
 import useTheme from '../hooks/useTheme';
 import { useGoogleAuth, useLogin } from 'app/auth/hooks';
 import { userSignIn as userSignInSchema } from '@packrat/validations';
+import { SignInScreen } from '@packrat/ui/src/Bento/forms/layouts';
 
 const RText: any = OriginalRText;
 const RHeading: any = OriginalRHeading;
@@ -52,145 +53,10 @@ export default function Login() {
               paddingTop: 32,
               paddingBottom: 32,
               width: '90%',
-              maxWidth: 290,
+              maxWidth: 400,
             }}
           >
-            <RHeading
-              fontSize={32}
-              color={
-                currentTheme.colors.background === '#0284c7'
-                  ? currentTheme.colors.black
-                  : 'white'
-              }
-              fontWeight="semibold"
-            >
-              Welcome
-            </RHeading>
-            <RHeading
-              color="grey"
-              fontWeight="medium"
-              fontSize={14}
-              style={{ marginTop: 8 }}
-            >
-              Sign in to continue!
-            </RHeading>
-
-            <Form
-              validationSchema={userSignInSchema}
-              style={{ marginTop: 16, gap: 8 }}
-            >
-              <FormInput
-                label="Email ID"
-                keyboardType="email-address"
-                name="email"
-              />
-              <FormInput label="Password" secureTextEntry name="password" />
-
-              <SubmitButton
-                style={{ marginTop: 16, backgroundColor: 'mediumpurple' }}
-                onSubmit={handleLogin}
-              >
-                Sign in
-              </SubmitButton>
-            </Form>
-            <RStack
-              style={{
-                marginTop: 16,
-                flexDirection: 'row',
-                justifyContent: 'center',
-                gap: 4,
-              }}
-            >
-              <RText fontSize={14} color="grey">
-                I'm a new user.
-              </RText>
-              <RLink href="/register">
-                <RText
-                  style={{
-                    color: '#818cf8',
-                    fontWeight: 400,
-                    fontSize: 12,
-                  }}
-                >
-                  Sign Up
-                </RText>
-              </RLink>
-            </RStack>
-
-            <RStack style={{ flexDirection: 'row', justifyContent: 'center' }}>
-              <RLink href="/password-reset">
-                <RText
-                  style={{
-                    color: '#818cf8',
-                    fontWeight: 400,
-                    fontSize: 12,
-                  }}
-                >
-                  Reset Password?
-                </RText>
-              </RLink>
-            </RStack>
-            {/* Google Login starts */}
-            <RStack
-              style={{
-                marginTop: 8,
-                flexDirection: 'row',
-                justifyContent: 'center',
-              }}
-            >
-              <RText color="grey" fontWeight="medium" fontSize={14}>
-                Or
-              </RText>
-            </RStack>
-
-            {/* Google Login */}
-            {enableGoogleLogin && (
-              <RStack
-                style={{
-                  marginTop: 8,
-                  flexDirection: 'row',
-                  justifyContent: 'center',
-                  alignItems: 'center',
-                }}
-              >
-                <RIconButton
-                  disabled={!isGoogleSignInReady}
-                  onPress={async () => await promptAsync()}
-                  backgroundColor="red"
-                  style={{ width: '100%', color: 'white' }}
-                  icon={
-                    <FontAwesome
-                      name="google"
-                      size={16}
-                      color={currentTheme.colors.white}
-                    />
-                  }
-                >
-                  Sign in with Google
-                </RIconButton>
-              </RStack>
-            )}
-
-            {/* Demo Login for Development start */}
-            {NODE_ENV !== 'production' && (
-              <RStack
-                style={{
-                  marginTop: 8,
-                  justifyContent: 'center',
-                  alignItems: 'center',
-                }}
-              >
-                <RButton
-                  style={{ width: '100%' }}
-                  disabled={!isGoogleSignInReady}
-                  onPress={() => handleLogin(demoUser)}
-                  backgroundColor="purple"
-                >
-                  Demo User
-                </RButton>
-              </RStack>
-            )}
-            {/* Demo Login for Development end */}
+            <SignInScreen mode="signin"/>
           </View>
         </RStack>
       </RStack>
diff --git a/packages/app/screens/RegisterScreen.tsx b/packages/app/screens/RegisterScreen.tsx
index 36b367e20..39f94349d 100644
--- a/packages/app/screens/RegisterScreen.tsx
+++ b/packages/app/screens/RegisterScreen.tsx
@@ -14,6 +14,7 @@ import { FontAwesome } from '@expo/vector-icons';
 import useTheme from '../hooks/useTheme';
 import { useRegisterUser, useGoogleAuth } from 'app/auth/hooks';
 import { userSignUp } from '@packrat/validations';
+import { SignInScreen } from '@packrat/ui/src/Bento/forms/layouts';
 
 const RText: any = OriginalRText;
 const RHeading: any = OriginalRHeading;
@@ -40,10 +41,11 @@ export default function Register() {
             paddingTop: 32,
             paddingBottom: 32,
             width: '90%',
-            maxWidth: 290,
+            maxWidth: 400,
           }}
         >
-          <RHeading
+          <SignInScreen mode="signup"/> 
+          {/* <RHeading
             fontSize={32}
             color={
               currentTheme.colors.background === '#0284c7'
@@ -53,36 +55,36 @@ export default function Register() {
             fontWeight="semibold"
           >
             Welcome
-          </RHeading>
-          <RHeading
+          </RHeading> */}
+          {/* <RHeading
             color="grey"
             fontWeight="medium"
             fontSize={14}
             style={{ marginTop: 8 }}
           >
             Sign up to continue!
-          </RHeading>
-          <Form validationSchema={userSignUp}>
-            <RStack style={{ marginTop: 16, gap: 8 }}>
-              <FormInput label="Name" name="name" />
+          </RHeading> */}
+          {/* <Form validationSchema={userSignUp}> */}
+            {/* <RStack style={{ marginTop: 16, gap: 8 }}> */}
+              {/* <FormInput label="Name" name="name" /> */}
 
-              <FormInput
+              {/* <FormInput
                 label="Email ID"
                 keyboardType="email-address"
                 name="email"
-              />
+              /> */}
 
-              <FormInput label="Username" name="username" />
+              {/* <FormInput label="Username" name="username" /> */}
 
-              <FormInput label="Password" secureTextEntry name="password" />
+              {/* <FormInput label="Password" secureTextEntry name="password" /> */}
 
-              <SubmitButton
+              {/* <SubmitButton
                 onSubmit={registerUser}
                 style={{ marginTop: 16, backgroundColor: 'mediumpurple' }}
               >
                 {'Sign up'}
-              </SubmitButton>
-              <RStack
+              </SubmitButton> */}
+              {/* <RStack
                 style={{
                   marginTop: 16,
                   flexDirection: 'row',
@@ -104,9 +106,9 @@ export default function Register() {
                     Login Here
                   </RText>
                 </RLink>
-              </RStack>
+              </RStack> */}
               {/* Google register */}
-              <RStack
+              {/* <RStack
                 style={{
                   marginTop: 8,
                   flexDirection: 'row',
@@ -116,9 +118,9 @@ export default function Register() {
                 <RText color="grey" fontWeight="medium" fontSize={14}>
                   Or
                 </RText>
-              </RStack>
+              </RStack> */}
               {/* Google register */}
-              <RStack
+              {/* <RStack
                 style={{
                   marginTop: 8,
                   flexDirection: 'row',
@@ -140,10 +142,11 @@ export default function Register() {
                 >
                   Sign up with Google
                 </RIconButton>
-              </RStack>
+              </RStack> */}
               {/* Google register */}
-            </RStack>
-          </Form>
+            {/* </RStack> */}
+          {/* </Form> */}
+
         </View>
       </View>
     </RScrollView>
diff --git a/packages/ui/src/Bento/forms/layouts/SignInScreen.tsx b/packages/ui/src/Bento/forms/layouts/SignInScreen.tsx
index 325668de8..35d14bcf0 100644
--- a/packages/ui/src/Bento/forms/layouts/SignInScreen.tsx
+++ b/packages/ui/src/Bento/forms/layouts/SignInScreen.tsx
@@ -1,4 +1,4 @@
-import { Facebook, Github } from '@tamagui/lucide-icons';
+// import { Facebook, Github } from '@tamagui/lucide-icons';
 import { useState } from 'react';
 import {
   AnimatePresence,
@@ -11,26 +11,59 @@ import {
   Theme,
   View,
 } from 'tamagui';
-import { Input } from '../inputs/components/inputsParts';
 import { FormCard } from './components/layoutParts';
+import { RLink } from '@packrat/ui';
+import { Form, FormInput, SubmitButton } from '@packrat/ui';
+import { userSignUp } from '@packrat/validations';
+import { userSignIn } from '@packrat/validations';
+import { useRegisterUser, useGoogleAuth, useLogin } from 'app/auth/hooks';
+import { FontAwesome } from '@expo/vector-icons';
+import {RIconButton} from '@packrat/ui';
+import useTheme from 'app/hooks/useTheme';
+
+
+type mode = 'signup' | 'signin';
 
 /** simulate signin */
-function useSignIn() {
-  const [status, setStatus] = useState<'idle' | 'loading' | 'success'>('idle');
-  return {
-    status: status,
-    signIn: () => {
-      setStatus('loading');
-      setTimeout(() => {
-        setStatus('success');
-      }, 2000);
-    },
-  };
-}
 
 /** ------ EXAMPLE ------ */
-export function SignInScreen() {
-  const { signIn, status } = useSignIn();
+export function SignInScreen({ mode }: mode) {
+  function useSignIn() {
+    const [status, setStatus] = useState<'idle' | 'loading' | 'success'>(
+      'idle',
+    );
+    const { handleLogin } = useLogin();
+    return {
+      signInStatus: status,
+      signIn: async (data) => {
+        await setStatus('loading');
+        console.log(status);
+        await handleLogin(data);
+        setStatus('idle');
+      },
+    };
+  }
+
+  function useSignup() {
+    const [status, setStatus] = useState<'idle' | 'loading' | 'success'>(
+      'idle',
+    );
+    const { registerUser } = useRegisterUser();
+    return {
+      signUpStatus: status,
+      signup: async (data) => {
+        setStatus('loading');
+        await registerUser(data);
+        setStatus('idle');
+      },
+    };
+  }
+  const { signIn, signInStatus } = useSignIn();
+  const { signup, signUpStatus } = useSignup();
+  const { promptAsync } = useGoogleAuth();
+  const { currentTheme } = useTheme();
+
+
   return (
     <FormCard>
       <View
@@ -46,114 +79,96 @@ export function SignInScreen() {
           width: 400,
         }}
       >
-        <H1
-          alignSelf="center"
-          size="$8"
-          $group-window-xs={{
-            size: '$7',
-          }}
-        >
-          Sign in to your account
+        <H1 alignSelf="center" size="$8" $group-window-xs={{ size: '$7' }}>
+          {mode === 'signup'
+            ? 'Sign up to your account'
+            : 'Sign in to your account'}
         </H1>
-        <View flexDirection="column" gap="$3">
-          <View flexDirection="column" gap="$1">
-            <Input size="$4">
-              <Input.Label htmlFor="email">Email</Input.Label>
-              <Input.Box>
-                <Input.Area id="email" placeholder="email@example.com" />
-              </Input.Box>
-            </Input>
-          </View>
-          <View flexDirection="column" gap="$1">
-            <Input size="$4">
-              <View
-                flexDirection="row"
-                alignItems="center"
-                justifyContent="space-between"
+        <Form validationSchema={mode === 'signup' ? userSignUp : userSignIn}>
+          <View flexDirection="column" gap="$3">
+            {mode === 'signup' && <FormInput label="Name" name="name" />}
+            <FormInput
+              label="Email ID"
+              keyboardType="email-address"
+              name="email"
+            />
+            {mode === 'signup' && (
+              <FormInput label="Username" name="username" />
+            )}
+            <FormInput label="Password" secureTextEntry name="password" />
+            <Theme inverse>
+              <SubmitButton
+                disabled={
+                  mode === 'signup'
+                    ? signInStatus === 'loading'
+                    : signUpStatus === 'loading'
+                }
+                onSubmit={(data) =>
+                  mode === 'signup' ? signup(data) : signIn(data)
+                }
+                style={{
+                  marginTop: 16,
+                  backgroundColor: '#232323',
+                  color: 'white',
+                }}
+                width="100%"
+                iconAfter={
+                  <AnimatePresence>
+                    {signUpStatus === 'loading' ||
+                      (signInStatus === 'loading' && (
+                        <Spinner
+                          color="$color"
+                          key="loading-spinner"
+                          opacity={1}
+                          scale={1}
+                          animation="quick"
+                          position="absolute"
+                          left="60%"
+                          enterStyle={{
+                            opacity: 0,
+                            scale: 0.5,
+                          }}
+                          exitStyle={{
+                            opacity: 0,
+                            scale: 0.5,
+                          }}
+                        />
+                      ))}
+                  </AnimatePresence>
+                }
               >
-                <Input.Label htmlFor="password">Password</Input.Label>
-                <ForgotPasswordLink />
-              </View>
-              <Input.Box>
-                <Input.Area
-                  textContentType="password"
-                  secureTextEntry
-                  id="password"
-                  placeholder="email@example.com"
-                />
-              </Input.Box>
-            </Input>
+                {mode === 'signup' ? 'Sign Up' : 'Sign In'}
+              </SubmitButton>
+            </Theme>
           </View>
-        </View>
-        <Theme inverse>
-          <Button
-            disabled={status === 'loading'}
-            onPress={signIn}
-            width="100%"
-            iconAfter={
-              <AnimatePresence>
-                {status === 'loading' && (
-                  <Spinner
-                    color="$color"
-                    key="loading-spinner"
-                    opacity={1}
-                    scale={1}
-                    animation="quick"
-                    position="absolute"
-                    left="60%"
-                    enterStyle={{
-                      opacity: 0,
-                      scale: 0.5,
-                    }}
-                    exitStyle={{
-                      opacity: 0,
-                      scale: 0.5,
-                    }}
-                  />
-                )}
-              </AnimatePresence>
-            }
-          >
-            <Button.Text>Sign In</Button.Text>
-          </Button>
-        </Theme>
-        <View flexDirection="column" gap="$3" width="100%" alignItems="center">
+          <View flexDirection="column" gap="$3" width="100%" alignItems="center">
           <Theme>
-            <View
-              flexDirection="column"
-              gap="$3"
-              width="100%"
-              alignSelf="center"
-              alignItems="center"
-            >
-              <View
-                flexDirection="row"
-                width="100%"
-                alignItems="center"
-                gap="$4"
+            <View flexDirection="row" width="100%" alignItems="center" gap="$4">
+              <Separator />
+              <Paragraph>Or</Paragraph>
+              <Separator />
+            </View>
+            <View flexDirection="row" flexWrap="wrap" gap="$3">
+            <RIconButton
+                flex={1}
+                onPress={async () => await promptAsync()}
+                icon={
+                  <FontAwesome
+                    name="google"
+                    size={16}
+                  />
+                }
               >
-                <Separator />
-                <Paragraph>Or</Paragraph>
-                <Separator />
-              </View>
-              <View flexDirection="row" flexWrap="wrap" gap="$3">
-                <Button flex={1} minWidth="100%">
-                  <Button.Icon>
-                    <Github color="$gray10" size="$1" />
-                  </Button.Icon>
-                  <Button.Text>Continue with Github</Button.Text>
-                </Button>
-                <Button flex={1}>
-                  <Button.Icon>
-                    <Facebook color="$blue10" size="$1" />
-                  </Button.Icon>
-                  <Button.Text>Continue with Facebook</Button.Text>
-                </Button>
-              </View>
+                Continue with Google
+              </RIconButton>
             </View>
           </Theme>
         </View>
-        <SignUpLink />
+        </Form>
+        
+        <View style={{alignItems : 'center', width : '100%'}}>
+        {mode === 'signin' ? <SignUpLink /> : <SignInLink />}
+        </View>
       </View>
     </FormCard>
   );
@@ -178,7 +193,7 @@ const Link = ({
 
 const SignUpLink = () => {
   return (
-    <Link href={`#`}>
+    <RLink href={`/register`}>
       <Paragraph textDecorationStyle="unset" ta="center">
         Don&apos;t have an account?{' '}
         <SizableText
@@ -190,13 +205,31 @@ const SignUpLink = () => {
           Sign up
         </SizableText>
       </Paragraph>
-    </Link>
+    </RLink>
+  );
+};
+
+const SignInLink = () => {
+  return (
+    <RLink href={`/sign-in`}>
+      <Paragraph textDecorationStyle="unset" ta="center">
+        Already have an account?{' '}
+        <SizableText
+          hoverStyle={{
+            color: '$colorHover',
+          }}
+          textDecorationLine="underline"
+        >
+          Sign in
+        </SizableText>
+      </Paragraph>
+    </RLink>
   );
 };
 
 const ForgotPasswordLink = () => {
   return (
-    <Link href={`#`}>
+    <RLink href={`/password-reset`}>
       <Paragraph
         color="$gray11"
         hoverStyle={{
@@ -207,6 +240,6 @@ const ForgotPasswordLink = () => {
       >
         Forgot your password?
       </Paragraph>
-    </Link>
+    </RLink>
   );
 };

From 380819ea4e2d7c749edc1ac57883f298abaebc36 Mon Sep 17 00:00:00 2001
From: Anmol Verma <anmolverma2810@gmail.com>
Date: Sat, 15 Jun 2024 02:01:31 +0530
Subject: [PATCH 034/257] alignment fixes

---
 packages/app/components/card/CustomCard.tsx              | 4 ++--
 packages/app/components/dashboard/FeedPreview.tsx        | 2 +-
 packages/app/components/dashboard/QuickActionSection.tsx | 2 +-
 packages/app/components/dashboard/Section.tsx            | 4 ++--
 packages/app/components/layout/Layout.tsx                | 4 ++--
 packages/app/components/pack/PackContainer.tsx           | 1 +
 packages/app/screens/items/index.tsx                     | 2 +-
 packages/ui/src/tamagui.config.ts                        | 4 ++--
 8 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/packages/app/components/card/CustomCard.tsx b/packages/app/components/card/CustomCard.tsx
index 3b417e0c8..3167bab31 100644
--- a/packages/app/components/card/CustomCard.tsx
+++ b/packages/app/components/card/CustomCard.tsx
@@ -72,7 +72,7 @@ export const CustomCard = ({
           )}
         </View>
         <RSeparator />
-        {type === 'pack' && authUser?.id === data.owner_id? (
+        {type === 'pack' && authUser?.id === data.owner_id ? (
           <>
             <View
               style={
@@ -82,7 +82,7 @@ export const CustomCard = ({
                   paddingRight: 16,
                   paddingLeft: 16,
                   position: 'relative',
-                  zIndex: '1',
+                  zIndex: 1,
                 } as any
               }
             >
diff --git a/packages/app/components/dashboard/FeedPreview.tsx b/packages/app/components/dashboard/FeedPreview.tsx
index 079f1d5d1..813ab2c6e 100644
--- a/packages/app/components/dashboard/FeedPreview.tsx
+++ b/packages/app/components/dashboard/FeedPreview.tsx
@@ -67,6 +67,6 @@ const FeedPreviewScroll: React.FC<FeedPreviewScrollProps> = ({ itemWidth }) => {
 };
 
 const FeedPreview: React.FC = () => {
-  return <FeedPreviewScroll itemWidth={250} />;
+  return <FeedPreviewScroll itemWidth={200} />;
 };
 export default FeedPreview;
diff --git a/packages/app/components/dashboard/QuickActionSection.tsx b/packages/app/components/dashboard/QuickActionSection.tsx
index 25b9a6038..20827f54a 100644
--- a/packages/app/components/dashboard/QuickActionSection.tsx
+++ b/packages/app/components/dashboard/QuickActionSection.tsx
@@ -9,7 +9,7 @@ const QuickActionsSection = () => {
   const { handleActionSelect, quickActionData } = useQuickActions();
 
   return (
-    <RStack style={{ flexDirection: 'row', ...styles.section }}>
+    <RStack style={{ flexDirection: 'row', ...styles.section, }}>
       {quickActionData.map((action) => (
         <QuickActionButton
           key={action.action}
diff --git a/packages/app/components/dashboard/Section.tsx b/packages/app/components/dashboard/Section.tsx
index 844987689..206778fa2 100644
--- a/packages/app/components/dashboard/Section.tsx
+++ b/packages/app/components/dashboard/Section.tsx
@@ -24,7 +24,7 @@ const Section: React.FC<SectionProps> = ({ children, onPress }) => {
 
 const loadStyles = (theme: any) => {
   const { currentTheme } = theme;
-  const { xs } = useMedia();
+  const { xs, xxxs, xxs, } = useMedia();
   return {
     section: {
       marginBottom: 20,
@@ -32,7 +32,7 @@ const loadStyles = (theme: any) => {
     card: {
       justifyContent: 'center',
       alignItems: 'center',
-      width: xs ? '90vw' : '58vw',
+      width: xxxs ? '90vw' : xxs ? '90vw' : xs ? '92vw': '88vw',
       backgroundColor: currentTheme.colors.secondaryBlue,
       borderRadius: 8,
     },
diff --git a/packages/app/components/layout/Layout.tsx b/packages/app/components/layout/Layout.tsx
index da26df9b5..265e14c8b 100644
--- a/packages/app/components/layout/Layout.tsx
+++ b/packages/app/components/layout/Layout.tsx
@@ -2,7 +2,7 @@ import { View } from 'react-native';
 import { useMedia } from 'tamagui';
 
 const Layout = ({ children }) => {
-  const { xs,xxs } = useMedia();
+  const { xs,xxs, xxxs } = useMedia();
   return (
     <View
       style={{
@@ -11,7 +11,7 @@ const Layout = ({ children }) => {
         alignItems: 'center',
         margin: '0 auto',
         backgroundColor: 'transparent',
-        width:xxs ? '100%' : xs ? '100vw' : '60vw',
+        width:xxxs? '100vw' : xxs ? '100%' : xs ? '100vw' : '60vw',
         alignSelf: 'center',
       }}
     >
diff --git a/packages/app/components/pack/PackContainer.tsx b/packages/app/components/pack/PackContainer.tsx
index 57d10e841..3fb82d1f1 100644
--- a/packages/app/components/pack/PackContainer.tsx
+++ b/packages/app/components/pack/PackContainer.tsx
@@ -9,6 +9,7 @@ import useCustomStyles from 'app/hooks/useCustomStyles';
 import { useAuthUser } from 'app/auth/hooks';
 import { usePackId } from 'app/hooks/packs';
 import { createParam } from '@packrat/crosspath';
+import { useMedia } from 'tamagui';
 
 export default function PackContainer({ isCreatingTrip = false }) {
   const [isAddItemModalOpen, setIsAddItemModalOpen] = useState(false);
diff --git a/packages/app/screens/items/index.tsx b/packages/app/screens/items/index.tsx
index c20f31c03..df7f9d6f4 100644
--- a/packages/app/screens/items/index.tsx
+++ b/packages/app/screens/items/index.tsx
@@ -71,7 +71,7 @@ export default function Items() {
       <RStack style={styles.mainContainer}>
         <RStack
           style={{
-            width: xs ? '80vw' : '60vw',
+            width:xxxs?'100vw': xxs? '80vw' : xs ? '80vw' : '60vw',
             ...styles.container,
           }}
         >
diff --git a/packages/ui/src/tamagui.config.ts b/packages/ui/src/tamagui.config.ts
index 4f05b15a9..5351d6236 100644
--- a/packages/ui/src/tamagui.config.ts
+++ b/packages/ui/src/tamagui.config.ts
@@ -89,8 +89,8 @@ export const config = createTamagui({
   themes,
   tokens,
   media: createMedia({
-    xxxs:{maxWidth:375+10},
-    xxs:{maxWidth:400},
+    xxxs:{maxWidth:390},
+    xxs:{maxWidth:398},
     xs: { maxWidth: 660 },
     sm: { maxWidth: 800 },
     md: { maxWidth: 1020 },

From c2c03a3877bf18665321883bba9ddc2ddef3a976 Mon Sep 17 00:00:00 2001
From: Anmol Verma <anmolverma2810@gmail.com>
Date: Sat, 15 Jun 2024 02:50:42 +0530
Subject: [PATCH 035/257] make useResponsive hook for wraping useMedia hook

---
 .../card/PackCardHeader/PackCardHeader.tsx    |  5 ++-
 packages/app/components/carousel/index.tsx    |  6 +--
 .../app/components/dashboard/HeroBanner.tsx   |  5 ++-
 .../dashboard/QuickActionButton.tsx           |  5 ++-
 .../dashboard/QuickActionSection.tsx          |  5 ++-
 packages/app/components/dashboard/Section.tsx |  5 ++-
 .../app/components/feed/FeedSearchFilter.tsx  |  4 +-
 .../app/components/itemtable/itemTable.tsx    |  5 ++-
 packages/app/components/layout/Layout.tsx     |  5 ++-
 .../app/components/pack/PackContainer.tsx     |  5 ++-
 .../paginationChooseLimit/index.tsx           |  5 ++-
 .../trip/TripCards/TripSearchCard.tsx         |  7 +--
 packages/app/hooks/useResponsive.tsx          | 43 +++++++++++++++++++
 packages/app/screens/items/index.tsx          |  7 +--
 14 files changed, 83 insertions(+), 29 deletions(-)
 create mode 100644 packages/app/hooks/useResponsive.tsx

diff --git a/packages/app/components/card/PackCardHeader/PackCardHeader.tsx b/packages/app/components/card/PackCardHeader/PackCardHeader.tsx
index 90019f99f..e933b01d4 100644
--- a/packages/app/components/card/PackCardHeader/PackCardHeader.tsx
+++ b/packages/app/components/card/PackCardHeader/PackCardHeader.tsx
@@ -20,7 +20,8 @@ import { useEditPack } from 'app/hooks/packs/useEditPack';
 import { Platform } from 'react-native';
 import { CopyPackModal } from '../../pack/CopyPackModal';
 import { View } from 'react-native';
-import { useMedia } from 'tamagui';
+import useResponsive from 'app/hooks/useResponsive';
+
 
 interface PackCardHeaderProps {
   data: any;
@@ -38,7 +39,7 @@ export const PackCardHeader = ({ data, title }: PackCardHeaderProps) => {
   const { isDark, currentTheme } = useTheme();
   const router = useRouter();
   const { editPack } = useEditPack();
-  const { xs } = useMedia();
+  const { xs } =  useResponsive();
 
   const handleSavePack = () => {
     const packDetails = {
diff --git a/packages/app/components/carousel/index.tsx b/packages/app/components/carousel/index.tsx
index 193e123f2..21cf8dc5c 100644
--- a/packages/app/components/carousel/index.tsx
+++ b/packages/app/components/carousel/index.tsx
@@ -8,7 +8,7 @@ import {
 import { RStack } from '@packrat/ui';
 import ScrollButton from './ScrollButton';
 import useCustomStyles from 'app/hooks/useCustomStyles';
-import { useMedia } from 'tamagui';
+import useResponsive from 'app/hooks/useResponsive';
 
 interface CarouselProps {
   children?: ReactNode[];
@@ -43,7 +43,7 @@ const Carousel: React.FC<CarouselProps> = ({
       setCurrentIndex(index);
     }
   };
-  const { xs, xxs } = useMedia();
+  const { xs, xxs } =  useResponsive();
 
   return (
     <RStack
@@ -100,7 +100,7 @@ const Carousel: React.FC<CarouselProps> = ({
 };
 
 const loadStyles = () => {
-  const { xs, xxs } = useMedia();
+  const { xs, xxs } =  useResponsive();
   return {
     carousel: {
       flexDirection: 'row',
diff --git a/packages/app/components/dashboard/HeroBanner.tsx b/packages/app/components/dashboard/HeroBanner.tsx
index 9c64b0ce5..be2f203a8 100644
--- a/packages/app/components/dashboard/HeroBanner.tsx
+++ b/packages/app/components/dashboard/HeroBanner.tsx
@@ -12,7 +12,8 @@ import { first } from 'lodash';
 import { hexToRGBA } from '../../utils/colorFunctions';
 import useCustomStyles from 'app/hooks/useCustomStyles';
 import { PlacesAutocomplete } from 'app/components/PlacesAutocomplete/PlacesAutocomplete';
-import { useMedia } from 'tamagui';
+import useResponsive from 'app/hooks/useResponsive';
+
 const RText: any = OriginalRText;
 
 interface HeroSectionProps {
@@ -73,7 +74,7 @@ const HeroSection: React.FC<HeroSectionProps> = ({ onSelect }) => {
       ? `Let's find a new trail, ${firstNameOrUser}`
       : "Let's find a new trail";
 
-  const {xs} = useMedia();
+  const {xs} =  useResponsive();
 
   return (
     <View style={styles.banner}>
diff --git a/packages/app/components/dashboard/QuickActionButton.tsx b/packages/app/components/dashboard/QuickActionButton.tsx
index fd445e0b8..c321f9414 100644
--- a/packages/app/components/dashboard/QuickActionButton.tsx
+++ b/packages/app/components/dashboard/QuickActionButton.tsx
@@ -4,7 +4,8 @@ import { MaterialIcons } from '@expo/vector-icons';
 import React from 'react';
 import { theme } from '../../theme';
 import useCustomStyles from 'app/hooks/useCustomStyles';
-import { useMedia } from 'tamagui';
+import useResponsive from 'app/hooks/useResponsive';
+
 
 const RCard: any = OriginalRCard;
 
@@ -39,7 +40,7 @@ const QuickActionButton = ({
 
 const loadStyles = (theme: any) => {
   const { currentTheme } = theme;
-  const {xs} = useMedia();
+  const {xs} =  useResponsive();
   return {
     container: {
       margin: 10,
diff --git a/packages/app/components/dashboard/QuickActionSection.tsx b/packages/app/components/dashboard/QuickActionSection.tsx
index 20827f54a..f648d1447 100644
--- a/packages/app/components/dashboard/QuickActionSection.tsx
+++ b/packages/app/components/dashboard/QuickActionSection.tsx
@@ -2,7 +2,8 @@ import { RStack } from '@packrat/ui';
 import QuickActionButton from './QuickActionButton';
 import useCustomStyles from 'app/hooks/useCustomStyles';
 import { useQuickActions } from 'app/hooks/dashboard';
-import { useMedia } from 'tamagui';
+import useResponsive from 'app/hooks/useResponsive';
+
 
 const QuickActionsSection = () => {
   const styles = useCustomStyles(loadStyles);
@@ -26,7 +27,7 @@ const QuickActionsSection = () => {
 
 const loadStyles = (theme) => {
   const { currentTheme } = theme;
-  const {xs } = useMedia();
+  const {xs } =  useResponsive();
   return {
     section: {
       marginBottom: 20,
diff --git a/packages/app/components/dashboard/Section.tsx b/packages/app/components/dashboard/Section.tsx
index 206778fa2..ae67bdb8e 100644
--- a/packages/app/components/dashboard/Section.tsx
+++ b/packages/app/components/dashboard/Section.tsx
@@ -3,7 +3,8 @@ import { RCard } from '@packrat/ui';
 import React from 'react';
 import useCustomStyles from 'app/hooks/useCustomStyles';
 import { TouchableOpacity } from 'react-native';
-import { useMedia } from 'tamagui';
+import useResponsive from 'app/hooks/useResponsive';
+
 
 interface SectionProps {
   children: React.ReactNode;
@@ -24,7 +25,7 @@ const Section: React.FC<SectionProps> = ({ children, onPress }) => {
 
 const loadStyles = (theme: any) => {
   const { currentTheme } = theme;
-  const { xs, xxxs, xxs, } = useMedia();
+  const { xs, xxxs, xxs, } =  useResponsive();
   return {
     section: {
       marginBottom: 20,
diff --git a/packages/app/components/feed/FeedSearchFilter.tsx b/packages/app/components/feed/FeedSearchFilter.tsx
index 397d14b7c..5b4709dec 100644
--- a/packages/app/components/feed/FeedSearchFilter.tsx
+++ b/packages/app/components/feed/FeedSearchFilter.tsx
@@ -60,7 +60,7 @@ const FeedSearchFilter = ({
   const [searchValue, setSearchValue] = useState('');
 
   const onSearch = (search) => setSearchQuery(search);
-  const {xs, xxs, xxxs} = useMedia();
+  const {xs, xxs, xxxs} =  useResponsive();
 
   return (
     <Layout>
@@ -183,7 +183,7 @@ const FeedSearchFilter = ({
 
 const loadStyles = (theme: any) => {
   const { currentTheme } = theme;
-  const {xxs, xs} = useMedia();
+  const {xxs, xs} =  useResponsive();
 
   return {
     mainContainer: {
diff --git a/packages/app/components/itemtable/itemTable.tsx b/packages/app/components/itemtable/itemTable.tsx
index 5a238d944..2158eeaa9 100644
--- a/packages/app/components/itemtable/itemTable.tsx
+++ b/packages/app/components/itemtable/itemTable.tsx
@@ -15,7 +15,8 @@ import { useDeleteItem } from 'app/hooks/items';
 import { useAuthUser } from 'app/auth/hooks';
 import Layout from 'app/components/layout/Layout';
 import { RButton, RStack, RText } from '@packrat/ui';
-import { useMedia } from 'tamagui';
+import useResponsive from 'app/hooks/useResponsive';
+
 
 interface ItemsTableProps {
   limit: number;
@@ -57,7 +58,7 @@ export const ItemsTable = ({
   totalPages,
 }: ItemsTableProps) => {
   const flexArr = [1.5, 1, 1, 1, 0.65, 0.65, 0.65];
-  const { xs, xxs, xxxs } = useMedia();
+  const { xs, xxs, xxxs } =  useResponsive();
   const { handleDeleteItem } = useDeleteItem();
 
   const { enableDarkMode, enableLightMode, isDark, isLight, currentTheme } =
diff --git a/packages/app/components/layout/Layout.tsx b/packages/app/components/layout/Layout.tsx
index 265e14c8b..83845171a 100644
--- a/packages/app/components/layout/Layout.tsx
+++ b/packages/app/components/layout/Layout.tsx
@@ -1,8 +1,9 @@
 import { View } from 'react-native';
-import { useMedia } from 'tamagui';
+import useResponsive from 'app/hooks/useResponsive';
+
 
 const Layout = ({ children }) => {
-  const { xs,xxs, xxxs } = useMedia();
+  const { xs,xxs, xxxs } =  useResponsive();
   return (
     <View
       style={{
diff --git a/packages/app/components/pack/PackContainer.tsx b/packages/app/components/pack/PackContainer.tsx
index 3fb82d1f1..791f371bd 100644
--- a/packages/app/components/pack/PackContainer.tsx
+++ b/packages/app/components/pack/PackContainer.tsx
@@ -9,7 +9,8 @@ import useCustomStyles from 'app/hooks/useCustomStyles';
 import { useAuthUser } from 'app/auth/hooks';
 import { usePackId } from 'app/hooks/packs';
 import { createParam } from '@packrat/crosspath';
-import { useMedia } from 'tamagui';
+import useResponsive from 'app/hooks/useResponsive';
+
 
 export default function PackContainer({ isCreatingTrip = false }) {
   const [isAddItemModalOpen, setIsAddItemModalOpen] = useState(false);
@@ -19,7 +20,7 @@ export default function PackContainer({ isCreatingTrip = false }) {
 
   const [refetch, setRefetch] = useState(false);
   const styles = useCustomStyles(loadStyles);
-  const { xs } = useMedia();
+  const { xs } =  useResponsive();
 
   // TODO - improve refetch logic. Should be handled entirely by the hook
 
diff --git a/packages/app/components/paginationChooseLimit/index.tsx b/packages/app/components/paginationChooseLimit/index.tsx
index 3c214c53c..57b31711b 100644
--- a/packages/app/components/paginationChooseLimit/index.tsx
+++ b/packages/app/components/paginationChooseLimit/index.tsx
@@ -3,7 +3,8 @@ import React, { useState } from 'react';
 import DropdownComponent from '../Dropdown';
 import { RLabel } from '@packrat/ui';
 import useCustomStyles from 'app/hooks/useCustomStyles';
-import { useMedia } from 'tamagui';
+import useResponsive from 'app/hooks/useResponsive';
+
 
 interface PaginationLimitProps {
   limit: string | number;
@@ -34,7 +35,7 @@ export const PaginationLimit = ({ limit, setLimit }: PaginationLimitProps) => {
   );
 };
 const loadStyles = () => {
-  const {xxs} = useMedia();
+  const {xxs} =  useResponsive();
   return {
   selectContainer: {
     marginTop: xxs ? 20 : 10,
diff --git a/packages/app/components/trip/TripCards/TripSearchCard.tsx b/packages/app/components/trip/TripCards/TripSearchCard.tsx
index c128bb782..6b1415da6 100644
--- a/packages/app/components/trip/TripCards/TripSearchCard.tsx
+++ b/packages/app/components/trip/TripCards/TripSearchCard.tsx
@@ -5,7 +5,8 @@ import { useGEOLocationSearch } from 'app/hooks/geojson';
 import { FontAwesome } from '@expo/vector-icons';
 import {  View } from 'react-native';
 import { PlacesAutocomplete } from 'app/components/PlacesAutocomplete';
-import { useMedia } from 'tamagui';
+import useResponsive from 'app/hooks/useResponsive';
+
 
 type TripSearchCardProps = {
   searchRef: any;
@@ -18,7 +19,7 @@ export const TripSearchCard = ({ searchRef }: TripSearchCardProps) => {
   const handleSelectLocation = (geoJSON) => {
     setGEOLocation(geoJSON);
   };
-  const {xs} = useMedia();
+  const {xs} =  useResponsive();
 
   return (
     <TripCardBase
@@ -40,7 +41,7 @@ export const TripSearchCard = ({ searchRef }: TripSearchCardProps) => {
 };
 
 const loadStyles = (theme) => {
-  const {xxs} = useMedia();
+  const {xxs} =  useResponsive();
 
   const { currentTheme } = theme;
 
diff --git a/packages/app/hooks/useResponsive.tsx b/packages/app/hooks/useResponsive.tsx
new file mode 100644
index 000000000..d7b509056
--- /dev/null
+++ b/packages/app/hooks/useResponsive.tsx
@@ -0,0 +1,43 @@
+import { useMedia } from 'tamagui';
+
+const useResponsive = () => {
+  const {
+    xxxs,
+    xxs,
+    xs,
+    sm,
+    md,
+    lg,
+    xl,
+    xxl,
+    gtXs,
+    gtSm,
+    gtMd,
+    gtLg,
+    short,
+    tall,
+    hoverNone,
+    pointerCoarse,
+  } = useMedia();
+
+  return {
+    xxxs,
+    xxs,
+    xs,
+    sm,
+    md,
+    lg,
+    xl,
+    xxl,
+    gtXs,
+    gtSm,
+    gtMd,
+    gtLg,
+    short,
+    tall,
+    hoverNone,
+    pointerCoarse,
+  };
+};
+
+export default useResponsive;
diff --git a/packages/app/screens/items/index.tsx b/packages/app/screens/items/index.tsx
index df7f9d6f4..421d93777 100644
--- a/packages/app/screens/items/index.tsx
+++ b/packages/app/screens/items/index.tsx
@@ -10,7 +10,8 @@ import { useItems } from 'app/hooks/items/useItems';
 import { usePagination } from 'app/hooks/common';
 import DropdownComponent from 'app/components/Dropdown';
 import { BaseModal, RScrollView, RStack, RText } from '@packrat/ui';
-import { useMedia } from 'tamagui';
+import useResponsive from 'app/hooks/useResponsive';
+
 // import { checkNetworkConnected } from 'app/utils/netInfo';
 
 // const RTooltip: any = OriginalRTooltip;
@@ -59,7 +60,7 @@ export default function Items() {
     setSortedItems(sorted);
   }, [data]);
 
-  const { xs, xxxs, xxs } = useMedia();
+  const { xs, xxxs, xxs } =  useResponsive();
 
   return (
     <RScrollView>
@@ -157,7 +158,7 @@ export default function Items() {
 
 const loadStyles = (theme) => {
   const { currentTheme } = theme;
-  const {xxs,xxxs} = useMedia();
+  const {xxs,xxxs} =  useResponsive();
 
   return {
     mainContainer: {

From 0afba9c44b084db06928e81a3b00de1118329d26 Mon Sep 17 00:00:00 2001
From: Anmol Verma <anmolverma2810@gmail.com>
Date: Sat, 15 Jun 2024 12:18:37 +0530
Subject: [PATCH 036/257] fix alignment and import

---
 packages/app/components/feed/FeedSearchFilter.tsx | 3 ++-
 packages/app/screens/items/index.tsx              | 4 +++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/app/components/feed/FeedSearchFilter.tsx b/packages/app/components/feed/FeedSearchFilter.tsx
index 5b4709dec..991576c0d 100644
--- a/packages/app/components/feed/FeedSearchFilter.tsx
+++ b/packages/app/components/feed/FeedSearchFilter.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import useTheme from '../../hooks/useTheme';
 import useCustomStyles from 'app/hooks/useCustomStyles';
-import { Switch, useMedia } from 'tamagui';
+import { Switch} from 'tamagui';
 import { View } from 'react-native';
 import {
   RIconButton,
@@ -16,6 +16,7 @@ import {
 import { AntDesign } from '@expo/vector-icons';
 import DropdownComponent from 'app/components/Dropdown';
 import Layout from 'app/components/layout/Layout';
+import useResponsive from 'app/hooks/useResponsive';
 const RStack: any = OriginalRStack;
 const RText: any = OriginalRText;
 const RSeparator: any = OriginalRSeparator;
diff --git a/packages/app/screens/items/index.tsx b/packages/app/screens/items/index.tsx
index 421d93777..1055d11ee 100644
--- a/packages/app/screens/items/index.tsx
+++ b/packages/app/screens/items/index.tsx
@@ -91,13 +91,15 @@ export default function Items() {
               width={xxxs ?'25vw': xxs ? 120 : xs ? '25vw' : '15vw'}
             />
           </RStack>
-          <BaseModal
+         <View style={{marginBottom:10}}>
+         <BaseModal
             title="Add a global Item"
             trigger="Add Item"
             // triggerComponent={<ModalTriggerButton />}
           >
             <AddItemGlobal />
           </BaseModal>
+         </View>
         </RStack>
         {!isError && data?.items && Array.isArray(data.items) && (
           <ItemsTable

From 303a0b6b32c0eb2628e9aba28373e751655c7838 Mon Sep 17 00:00:00 2001
From: pinocchio-life-like <icbr19fl@gmail.com>
Date: Sat, 15 Jun 2024 09:55:13 +0300
Subject: [PATCH 037/257] suggestion initials done

---
 packages/app/components/chat/index.tsx        |  24 +++-
 .../ui/src/Bento/elements/list/ChatList.tsx   |   2 +-
 .../elements/list/SuggestionDescription.tsx   | 120 ++++++++++++++++++
 .../Bento/elements/list/SuggestionList.tsx    |  23 +++-
 packages/ui/src/Bento/elements/list/index.tsx |   1 +
 5 files changed, 159 insertions(+), 11 deletions(-)
 create mode 100644 packages/ui/src/Bento/elements/list/SuggestionDescription.tsx

diff --git a/packages/app/components/chat/index.tsx b/packages/app/components/chat/index.tsx
index 53553912e..8ebe42369 100644
--- a/packages/app/components/chat/index.tsx
+++ b/packages/app/components/chat/index.tsx
@@ -10,13 +10,20 @@ import { RButton, RImage, RInput, RStack } from '@packrat/ui';
 import useCustomStyles from 'app/hooks/useCustomStyles';
 import { useChat } from 'app/hooks/chat/useChat';
 import { loadStyles } from './chat.style';
-import { ChatList, SuggestionList } from '@packrat/ui/src/Bento/elements/list';
+import {
+  ChatList,
+  SuggestionDescription,
+  SuggestionList,
+} from '@packrat/ui/src/Bento/elements/list';
 import { X } from '@tamagui/lucide-icons';
 import { MessageCircle, Camera, Settings, Home } from 'lucide-react-native';
 import { ActionItem } from './ActionItem';
 import { BasicTable } from '@packrat/ui/src/Bento/elements/tables';
 
-const chatteer = `Based on the details of your pack titled qwerty, there are some optimizations and essential items that can be added to improve safety, comfort, and efficiency while reducing excessive weight:
+const chatteer = [
+  {
+    role: 'ai',
+    content: `Based on the details of your pack titled qwerty, there are some optimizations and essential items that can be added to improve safety, comfort, and efficiency while reducing excessive weight:
 
 1. Water (12oz, 12 pcs, category: Water):
     - While it's essential to stay hydrated, carrying 12 bottles at 12oz each might be excessive weight-wise. Consider replacing some bottles with a hydration reservoir or collapsible water bottles to save weight.
@@ -52,7 +59,9 @@ Suggested and Improved Pack for qwerty:
 
 Total Estimated Weight: Reduced from 838810.8785g to a more manageable and efficient weight.
 
-ALWAYS be mindful of weight optimization to ensure a comfortable and safe hiking experience.`;
+ALWAYS be mindful of weight optimization to ensure a comfortable and safe hiking experience.`,
+  },
+];
 
 const suggestion = {
   Items: [
@@ -298,16 +307,17 @@ const SuggestionComponent = ({ itemTypeId = null, type = null }) => {
   return (
     <View>
       <RStack style={{ flex: 1 }}>
-        <Text style={{ width: '100%', textAlign: 'center', padding: 8 }}>
+        {/* <Text style={{ width: '100%', textAlign: 'center', padding: 8 }}>
           Allow me to suggest some improvements to your pack!
-        </Text>
+        </Text> */}
         <ScrollView
-          ref={scrollViewRef}
+          // ref={scrollViewRef}
           onContentSizeChange={handleLayout}
           style={{ maxHeight: 620, width: '100%', borderRadius: 10 }}
           showsVerticalScrollIndicator={false}
           contentContainerStyle={{ flexGrow: 1, justifyContent: 'flex-end' }}
         >
+          <SuggestionDescription data={chatteer} />
           <SuggestionList suggestion={suggestion} />
         </ScrollView>
         <RStack
@@ -466,6 +476,7 @@ const ChatModalTrigger: React.FC<ChatModalTriggerProps> = ({
           <RButton
             position="absolute"
             backgroundColor="$background"
+            color="$color"
             top="$2"
             right="$2"
             size="$2"
@@ -498,6 +509,7 @@ const ChatModalTrigger: React.FC<ChatModalTriggerProps> = ({
           <RButton
             position="absolute"
             backgroundColor="$background"
+            color="$color"
             top="$2"
             right="$2"
             size="$2"
diff --git a/packages/ui/src/Bento/elements/list/ChatList.tsx b/packages/ui/src/Bento/elements/list/ChatList.tsx
index b60392908..9a2cc7b31 100644
--- a/packages/ui/src/Bento/elements/list/ChatList.tsx
+++ b/packages/ui/src/Bento/elements/list/ChatList.tsx
@@ -74,7 +74,7 @@ function ChatItem({ item, index }: { item: Message; index: number }) {
   const itsMe = role === 'user';
   const avatar = itsMe ? avatars[0] : avatars[1];
   const [showMessage, setShowMessage] = useState(false);
-  const showDelay = 150;
+  const showDelay = 10;
   const [start, setStart] = useState(false);
   const { isDark } = useTheme();
 
diff --git a/packages/ui/src/Bento/elements/list/SuggestionDescription.tsx b/packages/ui/src/Bento/elements/list/SuggestionDescription.tsx
new file mode 100644
index 000000000..1c76f4d23
--- /dev/null
+++ b/packages/ui/src/Bento/elements/list/SuggestionDescription.tsx
@@ -0,0 +1,120 @@
+import { useEffect, useState } from 'react';
+import { FlatList } from 'react-native';
+import { AnimatePresence, Text, Theme, View, styled } from 'tamagui';
+
+import useTheme from 'app/hooks/useTheme';
+
+const List = styled(FlatList<Message>, {
+  backgroundColor: '$background',
+  gap: '$3',
+});
+
+const getMessages = (data: Message[]) => data;
+
+type Message = {
+  role: 'user' | 'ai';
+  content: string;
+};
+
+const renderItem = ({
+  item: message,
+  index,
+}: {
+  item: Message;
+  index: number;
+}) => {
+  return <ChatItem index={index + 1} key={index} item={message} />;
+};
+export function SuggestionDescription({ data }: { data: Message[] }) {
+  const [messages, setMessages] = useState<Message[]>([]);
+
+  useEffect(() => {
+    setMessages(getMessages(data)); // Reverse the messages array
+  }, [data]);
+
+  return (
+    <View
+      flexDirection="column"
+      height={'100%'}
+      minWidth="100%"
+      $group-window-gtXs={{ height: 700 }}
+    >
+      <List
+        $group-window-gtXs={{
+          padding: '$10',
+        }}
+        data={messages}
+        renderItem={renderItem}
+        windowSize={2}
+      />
+    </View>
+  );
+}
+
+SuggestionDescription.fileName = 'ChatList';
+
+function ChatItem({ item, index }: { item: Message; index: number }) {
+  const [showMessage, setShowMessage] = useState(false);
+  const showDelay = 10;
+  const [start, setStart] = useState(false);
+  const { isDark } = useTheme();
+
+  useEffect(() => {
+    // run animations after initial render calms down
+    (globalThis.requestIdleCallback || setTimeout)(() => {
+      setStart(true);
+    });
+  }, []);
+
+  useEffect(() => {
+    if (!start) return;
+    const timeout = setTimeout(() => {
+      setShowMessage((prev) => !prev);
+    }, showDelay);
+    return () => clearTimeout(timeout);
+  }, [start, showDelay]);
+
+  return (
+    <AnimatePresence>
+      {showMessage && (
+        <View
+          flexDirection={'row'}
+          alignItems="flex-start"
+          gap="$4"
+          alignSelf={'flex-start'}
+          maxWidth="100%"
+          minWidth="100%"
+          style={{ padding: '5px 5px', background: isDark ? '#333' : 'white' }}
+        >
+          <View
+            flexDirection="column"
+            alignItems={'flex-start'}
+            gap="$2"
+            // maxWidth={400}
+            justifyContent="center"
+            flexShrink={1}
+          >
+            <Theme name={'blue'}>
+              <View
+                backgroundColor="$color2"
+                padding="$4"
+                paddingVertical="$3"
+                borderRadius="$5"
+                flexShrink={1}
+              >
+                <Text
+                  fontSize="$3"
+                  fontWeight="$3"
+                  lineHeight="$3"
+                  flexShrink={1}
+                >
+                  {item.content}
+                </Text>
+              </View>
+            </Theme>
+          </View>
+        </View>
+      )}
+    </AnimatePresence>
+  );
+}
diff --git a/packages/ui/src/Bento/elements/list/SuggestionList.tsx b/packages/ui/src/Bento/elements/list/SuggestionList.tsx
index 53d3d69f3..5de361b4f 100644
--- a/packages/ui/src/Bento/elements/list/SuggestionList.tsx
+++ b/packages/ui/src/Bento/elements/list/SuggestionList.tsx
@@ -3,17 +3,28 @@ import { Phone } from '@tamagui/lucide-icons';
 import type { ColorTokens } from 'tamagui';
 import { Avatar, Button, Circle, Separator, Text, View, YGroup } from 'tamagui';
 import { RButton } from '@packrat/ui';
+import useTheme from 'app/hooks/useTheme';
 
 // type SuggestionList = typeof suggestion.Items;
 
 export function SuggestionList({ suggestion }) {
   const [itemsList, setItemsList] = useState([]);
+  const { isDark } = useTheme();
 
   useEffect(() => {
     setItemsList(suggestion.Items);
   }, []);
   return (
-    <YGroup width="100%" justifyContent="center" alignItems="center">
+    <YGroup
+      style={{
+        background: isDark ? '#333' : 'white',
+        padding: 10,
+        borderRadius: 0,
+      }}
+      width="100%"
+      justifyContent="center"
+      alignItems="center"
+    >
       <View
         $group-window-gtXs={{
           padding: '$3',
@@ -40,7 +51,8 @@ function Item({ item }) {
     <YGroup.Item>
       <View
         flexDirection="row"
-        paddingVertical="$2"
+        paddingVertical="$1"
+        paddingHorizontal="$1.5"
         gap="$2"
         $group-window-gtXs={{
           padding: '$4',
@@ -48,6 +60,7 @@ function Item({ item }) {
         }}
         backgroundColor="$color1"
         alignItems="center"
+        style={{ borderRadius: 5 }}
       >
         <View flexDirection="column" flexShrink={1} justifyContent="center">
           <Text selectable>{item.name}</Text>
@@ -56,13 +69,15 @@ function Item({ item }) {
             fontSize="$2"
             lineHeight="$2"
             fontWeight="$2"
-            theme="alt1"
+            // theme="alt1"
           >
             {item.category} {item.weight}
             {item.unit}, {item.quantity}pcs
           </Text>
         </View>
-        <RButton marginLeft="auto">Add</RButton>
+        <RButton style={{ borderRadius: 5 }} marginLeft="auto">
+          Add
+        </RButton>
       </View>
     </YGroup.Item>
   );
diff --git a/packages/ui/src/Bento/elements/list/index.tsx b/packages/ui/src/Bento/elements/list/index.tsx
index fe173b153..19597ecb4 100644
--- a/packages/ui/src/Bento/elements/list/index.tsx
+++ b/packages/ui/src/Bento/elements/list/index.tsx
@@ -5,3 +5,4 @@ export * from './MasonryListExample';
 export * from './ItemValueList';
 export * from './List';
 export * from './SuggestionList';
+export * from './SuggestionDescription';

From 36ea726d3103b9738ed0fdc97044d2709dbb8bb6 Mon Sep 17 00:00:00 2001
From: Taron <taron.aleksanyan.20@gmail.com>
Date: Sun, 2 Jun 2024 11:31:57 +0400
Subject: [PATCH 038/257] remove types folder from crosspath

---
 packages/crosspath/.gitignore               |  1 -
 packages/crosspath/types/lib-interface.d.ts |  4 ---
 packages/crosspath/types/model/index.d.ts   |  1 -
 packages/crosspath/types/model/types.d.ts   | 27 ---------------------
 4 files changed, 33 deletions(-)
 delete mode 100644 packages/crosspath/types/lib-interface.d.ts
 delete mode 100644 packages/crosspath/types/model/index.d.ts
 delete mode 100644 packages/crosspath/types/model/types.d.ts

diff --git a/packages/crosspath/.gitignore b/packages/crosspath/.gitignore
index 10780829a..53c37a166 100644
--- a/packages/crosspath/.gitignore
+++ b/packages/crosspath/.gitignore
@@ -1,2 +1 @@
-types
 dist
\ No newline at end of file
diff --git a/packages/crosspath/types/lib-interface.d.ts b/packages/crosspath/types/lib-interface.d.ts
deleted file mode 100644
index 524b24431..000000000
--- a/packages/crosspath/types/lib-interface.d.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import { LinkComponent, Router, CreateParam } from './model';
-export declare function Link(props: Parameters<LinkComponent>): ReturnType<LinkComponent>;
-export declare const createParam: CreateParam;
-export declare function useRouter(): Router;
diff --git a/packages/crosspath/types/model/index.d.ts b/packages/crosspath/types/model/index.d.ts
deleted file mode 100644
index fcb073fef..000000000
--- a/packages/crosspath/types/model/index.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './types';
diff --git a/packages/crosspath/types/model/types.d.ts b/packages/crosspath/types/model/types.d.ts
deleted file mode 100644
index 9c3ee437d..000000000
--- a/packages/crosspath/types/model/types.d.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { FC } from 'react';
-import { LinkProps } from 'solito/link';
-export interface CreateParamOptions {
-    initial?: string;
-    parse?: (param: string) => unknown;
-    stringify?: (param: unknown) => string;
-}
-export interface Router {
-    push: (url: URL) => void;
-    replace: (url: URL) => void;
-    back: () => void;
-}
-export type LinkComponent = FC<LinkProps>;
-export type URL = string | {
-    pathname?: string;
-    query?: Record<string, any>;
-    state?: Record<string, any>;
-    hash?: string;
-    as?: string | object;
-};
-export type CreateParam = <T>() => {
-    useParam: (key: keyof T, options?: CreateParamOptions) => [value: any, setValue: (value: any) => void];
-    useParams: (key: keyof T) => {
-        params: T;
-        setParams: (value: any) => void;
-    };
-};

From 721e0e9ca53e47d43e935b73d91ef951c64bfc45 Mon Sep 17 00:00:00 2001
From: Taron <taron.aleksanyan.20@gmail.com>
Date: Sun, 2 Jun 2024 11:37:32 +0400
Subject: [PATCH 039/257] add types to gitignore

---
 .gitignore | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.gitignore b/.gitignore
index e846469a0..56bc9d61f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,6 +1,7 @@
 mongodb-data
 *.env
 .env.local
+types
 .env.production
 .env.old
 node_modules

From cd67239df0cd9ceba1b06bbe068a54d2885cd618 Mon Sep 17 00:00:00 2001
From: Muhammad Hassan <mh7722178@gmail.com>
Date: Sat, 15 Jun 2024 14:43:23 +0500
Subject: [PATCH 040/257] Some Types Fixed

---
 packages/app/api/getTrails.ts                                  | 2 +-
 packages/app/components/card/CustomCard.tsx                    | 2 +-
 packages/app/components/card/PackCardHeader/PackCardHeader.tsx | 1 +
 packages/app/components/pack_table/TableItem.tsx               | 2 +-
 4 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/app/api/getTrails.ts b/packages/app/api/getTrails.ts
index 700be63e9..bb0f193da 100644
--- a/packages/app/api/getTrails.ts
+++ b/packages/app/api/getTrails.ts
@@ -1,5 +1,5 @@
 import axios from 'app/config/axios';
-import { api } from 'constants/api';
+import { api } from '../constants/api';
 import osmtogeojson from 'osmtogeojson';
 
 /**
diff --git a/packages/app/components/card/CustomCard.tsx b/packages/app/components/card/CustomCard.tsx
index 3b417e0c8..61190cd02 100644
--- a/packages/app/components/card/CustomCard.tsx
+++ b/packages/app/components/card/CustomCard.tsx
@@ -72,7 +72,7 @@ export const CustomCard = ({
           )}
         </View>
         <RSeparator />
-        {type === 'pack' && authUser?.id === data.owner_id? (
+        {type === 'pack' && authUser?.id === data?.owner_id? (
           <>
             <View
               style={
diff --git a/packages/app/components/card/PackCardHeader/PackCardHeader.tsx b/packages/app/components/card/PackCardHeader/PackCardHeader.tsx
index 58813f620..e27ce97e7 100644
--- a/packages/app/components/card/PackCardHeader/PackCardHeader.tsx
+++ b/packages/app/components/card/PackCardHeader/PackCardHeader.tsx
@@ -92,6 +92,7 @@ export const PackCardHeader = ({ data, title }: PackCardHeaderProps) => {
             </View>
           </RStack>
         }
+        link = {null}
         actionsComponent={
           user?.id === data.owner_id && (
             <ThreeDotsMenu onOpenChange={handleActionsOpenChange}>
diff --git a/packages/app/components/pack_table/TableItem.tsx b/packages/app/components/pack_table/TableItem.tsx
index 3830fa85c..1c82371f6 100644
--- a/packages/app/components/pack_table/TableItem.tsx
+++ b/packages/app/components/pack_table/TableItem.tsx
@@ -70,7 +70,7 @@ const TableItem = ({
 
   let rowData = [
     <RText px={8}>{name}</RText>,
-    <RText px={0}>{${formatNumber(weight)} ${unit}}</RText>,
+    <RText px={0}>${formatNumber(weight)} ${unit}</RText>,
     <RText px={0}>{quantity}</RText>,
   ];
   if (hasPermissions) {

From 2ae66dee2f390d9f2d912d4e3abaa773ff3eadc2 Mon Sep 17 00:00:00 2001
From: Taron <taron.aleksanyan.20@gmail.com>
Date: Wed, 5 Jun 2024 15:10:15 +0400
Subject: [PATCH 041/257] add native date picker

---
 .../trip/TripCards/TripDateRangeCard.tsx      |  22 ++--
 packages/ui/package.json                      |   2 +
 .../DateRangePicker.native.tsx                | 119 ++++++++++++++++++
 .../DateRangePicker/DateRangePicker.web.ts    |   3 +
 packages/ui/src/DateRangePicker/index.ts      |   1 +
 packages/ui/src/index.tsx                     |   1 +
 6 files changed, 135 insertions(+), 13 deletions(-)
 create mode 100644 packages/ui/src/DateRangePicker/DateRangePicker.native.tsx
 create mode 100644 packages/ui/src/DateRangePicker/DateRangePicker.web.ts
 create mode 100644 packages/ui/src/DateRangePicker/index.ts

diff --git a/packages/app/components/trip/TripCards/TripDateRangeCard.tsx b/packages/app/components/trip/TripCards/TripDateRangeCard.tsx
index 3355acc01..a772f5788 100644
--- a/packages/app/components/trip/TripCards/TripDateRangeCard.tsx
+++ b/packages/app/components/trip/TripCards/TripDateRangeCard.tsx
@@ -9,10 +9,8 @@ import {
 } from 'react-native-paper-dates';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 import useTheme from 'app/hooks/useTheme';
-import { RStack, RText, Datepickers } from '@packrat/ui';
+import { RStack, RText, DateRangePicker } from '@packrat/ui';
 import { TripCardBase } from './TripCardBase';
-import { View } from 'react-native';
-const { RangePicker } = Datepickers;
 
 export interface DateRange {
   start_date: Date | null;
@@ -60,16 +58,14 @@ export const TripDateRangeCard = ({
       )}
       title="Trip Date Range"
     >
-      <View style={{ width: '50vw' }}>
-        <RangePicker
-          selectedDates={selectedDates}
-          onDatesChange={onDatesChange}
-          offsetDate={offsetDate}
-          onOffsetChange={onOffsetChange}
-          open={open}
-          setOpen={setOpen}
-        />
-      </View>
+      <DateRangePicker
+        selectedDates={selectedDates}
+        onDatesChange={onDatesChange}
+        offsetDate={offsetDate}
+        onOffsetChange={onOffsetChange}
+        open={open}
+        setOpen={setOpen}
+      />
     </TripCardBase>
   );
 };
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 4f6c4f1f0..aaf9da08f 100755
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -49,11 +49,13 @@
     "expo-image-picker": "~14.7.1",
     "foxact": "^0.2.33",
     "jotai": "^2.6.4",
+    "moment-range": "^4.0.2",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-dropzone": "^14.2.3",
     "react-hook-form": "^7.51.0",
     "react-native": "0.73.6",
+    "react-native-calendars": "^1.1305.0",
     "react-native-svg": "14.1.0",
     "react-native-web": "^0.19.10",
     "swr": "^2.2.5",
diff --git a/packages/ui/src/DateRangePicker/DateRangePicker.native.tsx b/packages/ui/src/DateRangePicker/DateRangePicker.native.tsx
new file mode 100644
index 000000000..1619fc515
--- /dev/null
+++ b/packages/ui/src/DateRangePicker/DateRangePicker.native.tsx
@@ -0,0 +1,119 @@
+import React, { useMemo, useState } from 'react';
+import { View, Text, Modal } from 'react-native';
+import { Calendar } from 'react-native-calendars';
+import { extendMoment } from 'moment-range';
+import Moment from 'moment';
+import { Button } from 'tamagui';
+import { DatePickerInput } from '../Bento/elements/datepickers/common/dateParts';
+import RButton from '../RButton';
+
+const moment = extendMoment(Moment);
+type RangeDate = ReturnType<typeof moment>;
+
+interface RangePickerProps {
+  selectedDates: Date[];
+  onDatesChange: (dates: Date[]) => void;
+  offsetDate?: Date;
+  onOffsetChange?: (date: Date) => void;
+  open?: boolean;
+  setOpen: (open: boolean) => void;
+}
+
+const DateRangePicker = ({
+  selectedDates,
+  onDatesChange,
+  open,
+  setOpen,
+}: RangePickerProps) => {
+  const [range, setRange] = useState<[RangeDate?, RangeDate?]>(() => {
+    if (!Array.isArray(selectedDates)) {
+      return []
+    }
+
+    return selectedDates.map((date) => moment(date)) as [RangeDate, RangeDate]
+  })
+
+  const onDayPress = (day) => {
+    const selectedDay = moment(day.dateString, 'YYYY-MM-DD')
+    if(range.length < 1 || selectedDay.isSame(range[0], 'day')) {
+      return setRange([selectedDay])
+    }
+    const newRange = moment.range(range[0], selectedDay)
+    let rangeResult = [moment(newRange.start), moment(newRange.end)]
+    if(rangeResult[0].isAfter(rangeResult[1])) {
+      rangeResult = [rangeResult[1], rangeResult[0]]
+    }
+
+    setRange(rangeResult)
+    onDatesChange([range[0]?.toDate(), range[1]?.toDate()])
+    setOpen(false)
+  };
+
+  const markedDates = useMemo(() => {
+    const result = {}
+    const period = {
+      color: '#000000',
+      textColor: '#ffffff',
+      startingDay: false,
+      endingDay: false,
+    }
+    const [start, end] = range;
+
+    if(start) {
+      const dateString = moment(start).format('YYYY-MM-DD')
+      result[dateString] =  {...period, startingDay: true}
+    }
+
+    if(end) {
+      const dateString = moment(end).format('YYYY-MM-DD')
+      result[dateString] = {
+        ...period, 
+        endingDay: true,
+      }
+
+        // Mark all dates between start and end
+        const dates = Array.from(moment.range(start, end).by('day'));
+        dates.forEach((date) => {
+          const dateString = date.format('YYYY-MM-DD');
+          if (dateString !== moment(start).format('YYYY-MM-DD') && dateString !== moment(end).format('YYYY-MM-DD')) {
+            result[dateString] = period;
+          }
+        });
+    }
+
+    return result
+  }, [range])
+
+
+  return (
+    <>    
+      <Modal visible={open} onRequestClose={() => {
+        setOpen(false)
+      }}>
+        <View>
+          <Calendar
+            markingType={'period'}
+            current={(range?.[0] || moment()).format('YYYY-MM-DD')}
+            markedDates={markedDates}
+            onDayPress={onDayPress}
+          />
+          <RButton onPress={() => setOpen(false)} style={{marginHorizontal: 12, marginTop: 12}} >Close</RButton>
+        </View>
+      </Modal>
+      <DatePickerInput
+          value={`${range[0]?.format('YYYY-MM-DD') || ''}${
+            range[0] && range[1] ? ' - ' : ''
+          }${range[1]?.format('YYYY-MM-DD') || ''}`}
+          placeholder="Start date - End date"
+          onReset={() => {
+            setRange([]);
+          }}
+          onPressIn={() => setOpen(true)}
+          onButtonPress={() => setOpen(true)}
+          size='$3'
+        />
+    </>
+  );
+};
+
+export default DateRangePicker;
diff --git a/packages/ui/src/DateRangePicker/DateRangePicker.web.ts b/packages/ui/src/DateRangePicker/DateRangePicker.web.ts
new file mode 100644
index 000000000..4f94b8e41
--- /dev/null
+++ b/packages/ui/src/DateRangePicker/DateRangePicker.web.ts
@@ -0,0 +1,3 @@
+import { RangePicker } from '../Bento/elements/datepickers/RangePicker';
+
+export default RangePicker;
diff --git a/packages/ui/src/DateRangePicker/index.ts b/packages/ui/src/DateRangePicker/index.ts
new file mode 100644
index 000000000..06456fb67
--- /dev/null
+++ b/packages/ui/src/DateRangePicker/index.ts
@@ -0,0 +1 @@
+export {default as DateRangePicker} from './DateRangePicker'
\ No newline at end of file
diff --git a/packages/ui/src/index.tsx b/packages/ui/src/index.tsx
index 4d325661d..31ce07757 100644
--- a/packages/ui/src/index.tsx
+++ b/packages/ui/src/index.tsx
@@ -81,6 +81,7 @@ export { config } from './tamagui.config';
 // export * from 'tamagui';
 export * from '@tamagui/toast';
 export * from './Bento';
+export * from './DateRangePicker';
 export * from './dialog';
 export * from './list';
 export * from './modal';

From 2fb5305cb0d0dcd56993efa87dc346644c51821a Mon Sep 17 00:00:00 2001
From: Anmol Verma <anmolverma2810@gmail.com>
Date: Mon, 17 Jun 2024 00:58:55 +0530
Subject: [PATCH 042/257] Use context menu instead to threedotsMenu

---
 packages/app/components/card/CustomCard.tsx |  2 +-
 packages/app/components/pack/AddPack.tsx    | 28 +++++++++++++++------
 packages/ui/src/RContextMenu/index.tsx      | 14 +++++++----
 packages/ui/src/index.tsx                   |  2 +-
 4 files changed, 31 insertions(+), 15 deletions(-)

diff --git a/packages/app/components/card/CustomCard.tsx b/packages/app/components/card/CustomCard.tsx
index 3b417e0c8..370e6a087 100644
--- a/packages/app/components/card/CustomCard.tsx
+++ b/packages/app/components/card/CustomCard.tsx
@@ -82,7 +82,7 @@ export const CustomCard = ({
                   paddingRight: 16,
                   paddingLeft: 16,
                   position: 'relative',
-                  zIndex: '1',
+                  zIndex: 1,
                 } as any
               }
             >
diff --git a/packages/app/components/pack/AddPack.tsx b/packages/app/components/pack/AddPack.tsx
index 06c5f0ce4..9282bfd81 100644
--- a/packages/app/components/pack/AddPack.tsx
+++ b/packages/app/components/pack/AddPack.tsx
@@ -14,6 +14,7 @@ import useCustomStyles from 'app/hooks/useCustomStyles';
 import { useAddNewPack, usePackId } from 'app/hooks/packs';
 import { useRouter } from 'app/hooks/router';
 import { addPackSchema } from '@packrat/validations';
+import { RContextMenu } from '@packrat/ui/src/RContextMenu';
 
 const FormSelect: any = OriginalFormSelect;
 
@@ -72,14 +73,25 @@ export const AddPack = ({ isCreatingTrip = false, onSuccess }) => {
             label="Name"
             style={{ textAlign: 'left', width: 200 }}
           />
-          <FormSelect
-            onValueChange={handleonValueChange}
-            options={packSelectOptions}
-            name="isPublic"
-            label="Is Public"
-            accessibilityLabel="Choose Service"
-            placeholder={'Is Public'}
-          />
+          {Platform.OS === 'web' ? (
+            <FormSelect
+              onValueChange={handleonValueChange}
+              options={packSelectOptions}
+              name="isPublic"
+              label="Is Public"
+              accessibilityLabel="Choose Service"
+              placeholder={'Is Public'}
+            />
+          ) : (
+            <RContextMenu
+              menuItems={[
+                { label: 'Yes', onSelect: () => setIsPublic(true) },
+                { label: 'No', onSelect: () => setIsPublic(false) },
+              ]}
+              menuName="Is Public"
+            />
+          )}
+
           <SubmitButton style={styles.btn} onSubmit={handleAddPack}>
             <RText style={{ color: currentTheme.colors.text }}>
               {isLoading ? 'Loading...' : 'Add Pack'}
diff --git a/packages/ui/src/RContextMenu/index.tsx b/packages/ui/src/RContextMenu/index.tsx
index d83c83368..c41d14abf 100644
--- a/packages/ui/src/RContextMenu/index.tsx
+++ b/packages/ui/src/RContextMenu/index.tsx
@@ -1,6 +1,7 @@
 import { ComponentProps } from 'react';
 import * as ZeegoContextMenu from 'zeego/context-menu';
 import RButton from '../RButton';
+import RText from '../RText';
 
 type ContentProps = ComponentProps<(typeof ZeegoContextMenu)['Content']>;
 type ItemProps = ComponentProps<(typeof ZeegoContextMenu)['Item']>;
@@ -45,19 +46,22 @@ const ContextMenu = {
   ),
 };
 
-const ExampleContextMenu = () => {
+const RContextMenu = ({menuItems = [], menuName}) => {
   return (
     <ContextMenu.Root>
       <ContextMenu.Trigger>
-        <RButton>Open Menu</RButton>
+        <RButton>{menuName}</RButton>
       </ContextMenu.Trigger>
       <ContextMenu.Content>
-        {Array.from({ length: 3 }).map((_, i) => (
-          <ContextMenu.Item key={`${i}key`}>{`Item ${i}`}</ContextMenu.Item>
+        {menuItems.map(({label, onSelect=()=> {}}) => (
+          <ContextMenu.Item key={label} onSelect={onSelect} >
+        <ContextMenu.ItemTitle>{label}</ContextMenu.ItemTitle>
+
+          </ContextMenu.Item>
         ))}
       </ContextMenu.Content>
     </ContextMenu.Root>
   );
 };
 
-export { ContextMenu, ExampleContextMenu };
+export { ContextMenu, RContextMenu };
diff --git a/packages/ui/src/index.tsx b/packages/ui/src/index.tsx
index 4d325661d..af2b0e5e7 100644
--- a/packages/ui/src/index.tsx
+++ b/packages/ui/src/index.tsx
@@ -31,7 +31,7 @@ import YStack from './YStack';
 import ZDropdown from './ZDropdown';
 export { Container } from './Container';
 export { MainContentWeb } from './MainContentWeb';
-export { ContextMenu, ExampleContextMenu } from './RContextMenu';
+export { ContextMenu, RContextMenu } from './RContextMenu';
 export { DropdownMenu, ExampleDropdown } from './RDropdown/DropdownBase';
 export { RSkeleton } from './RSkeleton';
 

From 4de3eca5957d8ee2949f9eeff990a77a9123c716 Mon Sep 17 00:00:00 2001
From: Andrew Bierman <94939237+andrew-bierman@users.noreply.github.com>
Date: Sun, 16 Jun 2024 21:10:10 -0400
Subject: [PATCH 043/257] =?UTF-8?q?=F0=9F=8E=A8=20linting?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/app/components/card/CustomCard.tsx   |  2 +-
 .../card/PackCardHeader/PackCardHeader.tsx    | 29 +++++++------
 .../card/PackCardHeader/usePackTitleInput.ts  | 13 ++++--
 .../dashboard/QuickActionButton.tsx           |  2 +-
 .../app/components/feed/FeedSearchFilter.tsx  | 19 +++++----
 .../app/components/map/MapButtonsOverlay.tsx  |  2 +-
 .../app/components/map/NativeMap.native.tsx   |  8 +++-
 .../components/navigation/NavigationList.tsx  |  2 +-
 packages/app/hooks/packs/useDeletePack.ts     |  2 +-
 packages/app/screens/dashboard/index.tsx      | 10 ++---
 packages/crosspath/types/lib-interface.d.ts   |  4 +-
 packages/crosspath/types/model/types.d.ts     | 41 +++++++++++--------
 .../ui/src/Bento/elements/tables/Basic.tsx    |  4 +-
 .../ui/src/ThreeDotsMenu/ThreeDotsMenu.tsx    | 11 +++--
 14 files changed, 90 insertions(+), 59 deletions(-)

diff --git a/packages/app/components/card/CustomCard.tsx b/packages/app/components/card/CustomCard.tsx
index 3b417e0c8..6780b8fa9 100644
--- a/packages/app/components/card/CustomCard.tsx
+++ b/packages/app/components/card/CustomCard.tsx
@@ -72,7 +72,7 @@ export const CustomCard = ({
           )}
         </View>
         <RSeparator />
-        {type === 'pack' && authUser?.id === data.owner_id? (
+        {type === 'pack' && authUser?.id === data.owner_id ? (
           <>
             <View
               style={
diff --git a/packages/app/components/card/PackCardHeader/PackCardHeader.tsx b/packages/app/components/card/PackCardHeader/PackCardHeader.tsx
index 862eb4d40..8c0063dbf 100644
--- a/packages/app/components/card/PackCardHeader/PackCardHeader.tsx
+++ b/packages/app/components/card/PackCardHeader/PackCardHeader.tsx
@@ -32,9 +32,15 @@ interface PackCardHeaderProps {
 export const PackCardHeader = ({ data, title }: PackCardHeaderProps) => {
   const { isLoading, refetch } = useFetchSinglePack(data?.id);
   const user = useAuthUser();
-  const {handleDeletePack} = useDeletePack(data.id);
-  const { handleActionsOpenChange, handleEdit, handleSaveTitle, isEditMode,isOpen,setIsOpen } =
-    usePackTitleInput(data);
+  const { handleDeletePack } = useDeletePack(data.id);
+  const {
+    handleActionsOpenChange,
+    handleEdit,
+    handleSaveTitle,
+    isEditMode,
+    isOpen,
+    setIsOpen,
+  } = usePackTitleInput(data);
 
   const { isDark, currentTheme } = useTheme();
 
@@ -42,11 +48,11 @@ export const PackCardHeader = ({ data, title }: PackCardHeaderProps) => {
   const { editPack } = useEditPack();
   const { screenWidth } = useScreenWidth();
 
-const handleDelete = () => { 
-  handleDeletePack();
-  setIsOpen(false);
-  console.log("Pack Deleted");
- }
+  const handleDelete = () => {
+    handleDeletePack();
+    setIsOpen(false);
+    console.log('Pack Deleted');
+  };
   const handleSavePack = () => {
     const packDetails = {
       id: data.id,
@@ -55,14 +61,13 @@ const handleDelete = () => {
     };
     setIsOpen(false);
     editPack(packDetails);
-    console.log('Pack Saved'); 
-     
+    console.log('Pack Saved');
   };
   console.log('data', isOpen);
   return (
     <>
       <CustomCardHeader
-      link={""}
+        link={''}
         data={data}
         title={
           <RStack
@@ -105,7 +110,7 @@ const handleDelete = () => {
         }
         actionsComponent={
           user?.id === data.owner_id && (
-            <ThreeDotsMenu open={isOpen}   onOpenChange={handleActionsOpenChange}>
+            <ThreeDotsMenu open={isOpen} onOpenChange={handleActionsOpenChange}>
               <YStack space="$1">
                 <RButton onPress={handleEdit}>Edit</RButton>
                 <RButton onPress={handleSavePack}>Save</RButton>
diff --git a/packages/app/components/card/PackCardHeader/usePackTitleInput.ts b/packages/app/components/card/PackCardHeader/usePackTitleInput.ts
index 7d148c1cb..53c119077 100644
--- a/packages/app/components/card/PackCardHeader/usePackTitleInput.ts
+++ b/packages/app/components/card/PackCardHeader/usePackTitleInput.ts
@@ -18,7 +18,7 @@ export const usePackTitleInput = (data) => {
 
   const handleEdit = () => {
     isEditModeRef.current = true;
-    setIsOpen(false)
+    setIsOpen(false);
   };
 
   const handleSaveTitle = (title) => {
@@ -27,10 +27,17 @@ export const usePackTitleInput = (data) => {
       name: title,
       is_public: data.is_public,
     };
-     setIsOpen(false);
+    setIsOpen(false);
     editPack(packDetails);
     setIsEditMode(false);
   };
 
-  return { handleActionsOpenChange, isEditMode, handleEdit, handleSaveTitle,isOpen,setIsOpen };
+  return {
+    handleActionsOpenChange,
+    isEditMode,
+    handleEdit,
+    handleSaveTitle,
+    isOpen,
+    setIsOpen,
+  };
 };
diff --git a/packages/app/components/dashboard/QuickActionButton.tsx b/packages/app/components/dashboard/QuickActionButton.tsx
index d1b6b6773..9a9752202 100644
--- a/packages/app/components/dashboard/QuickActionButton.tsx
+++ b/packages/app/components/dashboard/QuickActionButton.tsx
@@ -63,7 +63,7 @@ const loadStyles = (theme: any) => {
     },
     text: {
       fontSize: 13,
-      fontWeight:'bold',
+      fontWeight: 'bold',
       color: currentTheme.colors.iconColor,
     },
   };
diff --git a/packages/app/components/feed/FeedSearchFilter.tsx b/packages/app/components/feed/FeedSearchFilter.tsx
index b705e5546..e94caba0d 100644
--- a/packages/app/components/feed/FeedSearchFilter.tsx
+++ b/packages/app/components/feed/FeedSearchFilter.tsx
@@ -69,11 +69,15 @@ const FeedSearchFilter = ({
       <View style={styles.filterContainer}>
         <View style={styles.searchContainer}>
           <Form>
-            <RStack
-              style={{ flexDirection: 'row',marginLeft:30, }}
-            >
+            <RStack style={{ flexDirection: 'row', marginLeft: 30 }}>
               <FormInput
-                width={Platform.OS === "web" ? screenWidth <= 425 ? '30vw' : '12vw': '100%'}
+                width={
+                  Platform.OS === 'web'
+                    ? screenWidth <= 425
+                      ? '30vw'
+                      : '12vw'
+                    : '100%'
+                }
                 placeholder={`Search ${feedType || 'Feed'}`}
                 name="search"
                 value={searchValue}
@@ -119,7 +123,7 @@ const FeedSearchFilter = ({
                 <RSwitch
                   id="single-switch"
                   size="$1.5"
-                  width={ screenWidth <= SCREEN_WIDTH ?"10vw" : '3vw'}
+                  width={screenWidth <= SCREEN_WIDTH ? '10vw' : '3vw'}
                   checked={selectedTypes.pack}
                   onCheckedChange={handleTogglePack}
                 >
@@ -135,7 +139,7 @@ const FeedSearchFilter = ({
                 <RSwitch
                   id="two-switch"
                   size="$1.5"
-                  width={ screenWidth <= SCREEN_WIDTH ?"10vw" : '3vw'}
+                  width={screenWidth <= SCREEN_WIDTH ? '10vw' : '3vw'}
                   checked={selectedTypes.trip}
                   onCheckedChange={handleToggleTrip}
                 >
@@ -193,7 +197,6 @@ const loadStyles = (theme: any) => {
   const { currentTheme } = theme;
 
   return {
-    
     mainContainer: {
       flex: 1,
       backgroundColor: currentTheme.colors.background,
@@ -225,4 +228,4 @@ const loadStyles = (theme: any) => {
   };
 };
 
-export default FeedSearchFilter;
\ No newline at end of file
+export default FeedSearchFilter;
diff --git a/packages/app/components/map/MapButtonsOverlay.tsx b/packages/app/components/map/MapButtonsOverlay.tsx
index 73d4199ce..8832ca6f9 100644
--- a/packages/app/components/map/MapButtonsOverlay.tsx
+++ b/packages/app/components/map/MapButtonsOverlay.tsx
@@ -334,7 +334,7 @@ const loadStyles = (theme) => {
     downloadText: {
       fontSize: 15,
       fontWeight: '500',
-      marginRight:8
+      marginRight: 8,
     },
     modal: {
       alignItems: 'center',
diff --git a/packages/app/components/map/NativeMap.native.tsx b/packages/app/components/map/NativeMap.native.tsx
index 7c1db095f..aa242f698 100644
--- a/packages/app/components/map/NativeMap.native.tsx
+++ b/packages/app/components/map/NativeMap.native.tsx
@@ -299,7 +299,13 @@ function NativeMap({ shape: shapeProp }) {
                 />
               </AlertDialog.Body>
               <AlertDialog.Footer>
-                <RStack style={{width:'60%', justifyContent:'space-between', flexDirection:'row'}}>
+                <RStack
+                  style={{
+                    width: '60%',
+                    justifyContent: 'space-between',
+                    flexDirection: 'row',
+                  }}
+                >
                   <RButton
                     variant="unstyled"
                     colorScheme="coolGray"
diff --git a/packages/app/components/navigation/NavigationList.tsx b/packages/app/components/navigation/NavigationList.tsx
index 2f056d433..2f85a023c 100644
--- a/packages/app/components/navigation/NavigationList.tsx
+++ b/packages/app/components/navigation/NavigationList.tsx
@@ -25,7 +25,7 @@ export const NavigationList: React.FC<NavigationListProps> = ({
             style={{
               width: '100%',
               borderRadius: 8,
-              marginBottom: isMobileView ? 6:0,
+              marginBottom: isMobileView ? 6 : 0,
               backgroundColor: currentTheme.colors.background,
               color: currentTheme.colors.white,
             }}
diff --git a/packages/app/hooks/packs/useDeletePack.ts b/packages/app/hooks/packs/useDeletePack.ts
index 331c066ba..0bacedeb1 100644
--- a/packages/app/hooks/packs/useDeletePack.ts
+++ b/packages/app/hooks/packs/useDeletePack.ts
@@ -12,5 +12,5 @@ export const useDeletePack = (id) => {
     } catch {}
   };
 
-  return {handleDeletePack};
+  return { handleDeletePack };
 };
diff --git a/packages/app/screens/dashboard/index.tsx b/packages/app/screens/dashboard/index.tsx
index 9047cf261..13b560ed4 100644
--- a/packages/app/screens/dashboard/index.tsx
+++ b/packages/app/screens/dashboard/index.tsx
@@ -59,11 +59,11 @@ const loadStyles = (theme) => {
       alignItems: 'stretch',
       paddingHorizontal: 20,
       width:
-      Platform.OS === 'web'
-        ? screenWidth <= SCREEN_WIDTH
-          ? '100vw'
-          : '90vw'
-        : '100%',
+        Platform.OS === 'web'
+          ? screenWidth <= SCREEN_WIDTH
+            ? '100vw'
+            : '90vw'
+          : '100%',
     },
     cardContainer: {
       flexDirection: 'column',
diff --git a/packages/crosspath/types/lib-interface.d.ts b/packages/crosspath/types/lib-interface.d.ts
index 524b24431..acf8c94d3 100644
--- a/packages/crosspath/types/lib-interface.d.ts
+++ b/packages/crosspath/types/lib-interface.d.ts
@@ -1,4 +1,6 @@
 import { LinkComponent, Router, CreateParam } from './model';
-export declare function Link(props: Parameters<LinkComponent>): ReturnType<LinkComponent>;
+export declare function Link(
+  props: Parameters<LinkComponent>,
+): ReturnType<LinkComponent>;
 export declare const createParam: CreateParam;
 export declare function useRouter(): Router;
diff --git a/packages/crosspath/types/model/types.d.ts b/packages/crosspath/types/model/types.d.ts
index 9c3ee437d..5e7b7414e 100644
--- a/packages/crosspath/types/model/types.d.ts
+++ b/packages/crosspath/types/model/types.d.ts
@@ -1,27 +1,32 @@
 import { FC } from 'react';
 import { LinkProps } from 'solito/link';
 export interface CreateParamOptions {
-    initial?: string;
-    parse?: (param: string) => unknown;
-    stringify?: (param: unknown) => string;
+  initial?: string;
+  parse?: (param: string) => unknown;
+  stringify?: (param: unknown) => string;
 }
 export interface Router {
-    push: (url: URL) => void;
-    replace: (url: URL) => void;
-    back: () => void;
+  push: (url: URL) => void;
+  replace: (url: URL) => void;
+  back: () => void;
 }
 export type LinkComponent = FC<LinkProps>;
-export type URL = string | {
-    pathname?: string;
-    query?: Record<string, any>;
-    state?: Record<string, any>;
-    hash?: string;
-    as?: string | object;
-};
-export type CreateParam = <T>() => {
-    useParam: (key: keyof T, options?: CreateParamOptions) => [value: any, setValue: (value: any) => void];
-    useParams: (key: keyof T) => {
-        params: T;
-        setParams: (value: any) => void;
+export type URL =
+  | string
+  | {
+      pathname?: string;
+      query?: Record<string, any>;
+      state?: Record<string, any>;
+      hash?: string;
+      as?: string | object;
     };
+export type CreateParam = <T>() => {
+  useParam: (
+    key: keyof T,
+    options?: CreateParamOptions,
+  ) => [value: any, setValue: (value: any) => void];
+  useParams: (key: keyof T) => {
+    params: T;
+    setParams: (value: any) => void;
+  };
 };
diff --git a/packages/ui/src/Bento/elements/tables/Basic.tsx b/packages/ui/src/Bento/elements/tables/Basic.tsx
index dcfd7ad2c..7ee30baf4 100644
--- a/packages/ui/src/Bento/elements/tables/Basic.tsx
+++ b/packages/ui/src/Bento/elements/tables/Basic.tsx
@@ -152,7 +152,7 @@ export function BasicTable({
       header: () => 'Category',
       cell: (info) => info.getValue(),
       // footer: (info) => 'category',
-    })
+    }),
   ];
 
   if (hasPermissions) {
@@ -161,7 +161,7 @@ export function BasicTable({
         id: 'actions',
         cell: (props) => <ActionButtons item={props.row.original} />,
         header: () => 'Actions',
-      })
+      }),
     );
   }
 
diff --git a/packages/ui/src/ThreeDotsMenu/ThreeDotsMenu.tsx b/packages/ui/src/ThreeDotsMenu/ThreeDotsMenu.tsx
index f03aaf8f5..07314982a 100644
--- a/packages/ui/src/ThreeDotsMenu/ThreeDotsMenu.tsx
+++ b/packages/ui/src/ThreeDotsMenu/ThreeDotsMenu.tsx
@@ -12,17 +12,20 @@ interface ThreeDotsMenuProps {
   open: boolean;
 }
 
-export function ThreeDotsMenu({ children, onOpenChange,open }: ThreeDotsMenuProps) {
-  console.log("ksksksks",open)
+export function ThreeDotsMenu({
+  children,
+  onOpenChange,
+  open,
+}: ThreeDotsMenuProps) {
+  console.log('ksksksks', open);
   return (
     <Popover
       size="$5"
       allowFlip
       placement="bottom"
       onOpenChange={onOpenChange}
-      open={Platform.OS != 'web'? open:undefined}
+      open={Platform.OS != 'web' ? open : undefined}
       disableFocus
-      
     >
       <Popover.Trigger asChild backgroundColor="transparent">
         <Button icon={MoreHorizontal} />

From 2a05ca0aaea271cf642d234931fc39ebbe620c66 Mon Sep 17 00:00:00 2001
From: Andrew Bierman <94939237+andrew-bierman@users.noreply.github.com>
Date: Sun, 16 Jun 2024 21:11:00 -0400
Subject: [PATCH 044/257] =?UTF-8?q?=F0=9F=8E=A8=20linting?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/app/components/card/CustomCard.tsx   |  2 +-
 .../dashboard/QuickActionButton.tsx           |  2 +-
 .../app/components/feed/FeedSearchFilter.tsx  | 18 ++++----
 .../app/components/map/MapButtonsOverlay.tsx  |  2 +-
 .../app/components/map/NativeMap.native.tsx   |  8 +++-
 .../components/navigation/NavigationList.tsx  |  2 +-
 packages/app/screens/dashboard/index.tsx      | 10 ++---
 packages/crosspath/types/lib-interface.d.ts   |  4 +-
 packages/crosspath/types/model/types.d.ts     | 41 +++++++++++--------
 .../ui/src/Bento/elements/tables/Basic.tsx    |  4 +-
 10 files changed, 55 insertions(+), 38 deletions(-)

diff --git a/packages/app/components/card/CustomCard.tsx b/packages/app/components/card/CustomCard.tsx
index 3b417e0c8..6780b8fa9 100644
--- a/packages/app/components/card/CustomCard.tsx
+++ b/packages/app/components/card/CustomCard.tsx
@@ -72,7 +72,7 @@ export const CustomCard = ({
           )}
         </View>
         <RSeparator />
-        {type === 'pack' && authUser?.id === data.owner_id? (
+        {type === 'pack' && authUser?.id === data.owner_id ? (
           <>
             <View
               style={
diff --git a/packages/app/components/dashboard/QuickActionButton.tsx b/packages/app/components/dashboard/QuickActionButton.tsx
index d1b6b6773..9a9752202 100644
--- a/packages/app/components/dashboard/QuickActionButton.tsx
+++ b/packages/app/components/dashboard/QuickActionButton.tsx
@@ -63,7 +63,7 @@ const loadStyles = (theme: any) => {
     },
     text: {
       fontSize: 13,
-      fontWeight:'bold',
+      fontWeight: 'bold',
       color: currentTheme.colors.iconColor,
     },
   };
diff --git a/packages/app/components/feed/FeedSearchFilter.tsx b/packages/app/components/feed/FeedSearchFilter.tsx
index a54e03e29..e94caba0d 100644
--- a/packages/app/components/feed/FeedSearchFilter.tsx
+++ b/packages/app/components/feed/FeedSearchFilter.tsx
@@ -69,11 +69,15 @@ const FeedSearchFilter = ({
       <View style={styles.filterContainer}>
         <View style={styles.searchContainer}>
           <Form>
-            <RStack
-              style={{ flexDirection: 'row',marginLeft:30, }}
-            >
+            <RStack style={{ flexDirection: 'row', marginLeft: 30 }}>
               <FormInput
-                width={Platform.OS === "web" ? screenWidth <= 425 ? '30vw' : '12vw': '100%'}
+                width={
+                  Platform.OS === 'web'
+                    ? screenWidth <= 425
+                      ? '30vw'
+                      : '12vw'
+                    : '100%'
+                }
                 placeholder={`Search ${feedType || 'Feed'}`}
                 name="search"
                 value={searchValue}
@@ -119,7 +123,7 @@ const FeedSearchFilter = ({
                 <RSwitch
                   id="single-switch"
                   size="$1.5"
-                  width={ screenWidth <= SCREEN_WIDTH ?"10vw" : '3vw'}
+                  width={screenWidth <= SCREEN_WIDTH ? '10vw' : '3vw'}
                   checked={selectedTypes.pack}
                   onCheckedChange={handleTogglePack}
                 >
@@ -135,7 +139,7 @@ const FeedSearchFilter = ({
                 <RSwitch
                   id="two-switch"
                   size="$1.5"
-                  width={ screenWidth <= SCREEN_WIDTH ?"10vw" : '3vw'}
+                  width={screenWidth <= SCREEN_WIDTH ? '10vw' : '3vw'}
                   checked={selectedTypes.trip}
                   onCheckedChange={handleToggleTrip}
                 >
@@ -224,4 +228,4 @@ const loadStyles = (theme: any) => {
   };
 };
 
-export default FeedSearchFilter;
\ No newline at end of file
+export default FeedSearchFilter;
diff --git a/packages/app/components/map/MapButtonsOverlay.tsx b/packages/app/components/map/MapButtonsOverlay.tsx
index 73d4199ce..8832ca6f9 100644
--- a/packages/app/components/map/MapButtonsOverlay.tsx
+++ b/packages/app/components/map/MapButtonsOverlay.tsx
@@ -334,7 +334,7 @@ const loadStyles = (theme) => {
     downloadText: {
       fontSize: 15,
       fontWeight: '500',
-      marginRight:8
+      marginRight: 8,
     },
     modal: {
       alignItems: 'center',
diff --git a/packages/app/components/map/NativeMap.native.tsx b/packages/app/components/map/NativeMap.native.tsx
index 7c1db095f..aa242f698 100644
--- a/packages/app/components/map/NativeMap.native.tsx
+++ b/packages/app/components/map/NativeMap.native.tsx
@@ -299,7 +299,13 @@ function NativeMap({ shape: shapeProp }) {
                 />
               </AlertDialog.Body>
               <AlertDialog.Footer>
-                <RStack style={{width:'60%', justifyContent:'space-between', flexDirection:'row'}}>
+                <RStack
+                  style={{
+                    width: '60%',
+                    justifyContent: 'space-between',
+                    flexDirection: 'row',
+                  }}
+                >
                   <RButton
                     variant="unstyled"
                     colorScheme="coolGray"
diff --git a/packages/app/components/navigation/NavigationList.tsx b/packages/app/components/navigation/NavigationList.tsx
index 2f056d433..2f85a023c 100644
--- a/packages/app/components/navigation/NavigationList.tsx
+++ b/packages/app/components/navigation/NavigationList.tsx
@@ -25,7 +25,7 @@ export const NavigationList: React.FC<NavigationListProps> = ({
             style={{
               width: '100%',
               borderRadius: 8,
-              marginBottom: isMobileView ? 6:0,
+              marginBottom: isMobileView ? 6 : 0,
               backgroundColor: currentTheme.colors.background,
               color: currentTheme.colors.white,
             }}
diff --git a/packages/app/screens/dashboard/index.tsx b/packages/app/screens/dashboard/index.tsx
index 9047cf261..13b560ed4 100644
--- a/packages/app/screens/dashboard/index.tsx
+++ b/packages/app/screens/dashboard/index.tsx
@@ -59,11 +59,11 @@ const loadStyles = (theme) => {
       alignItems: 'stretch',
       paddingHorizontal: 20,
       width:
-      Platform.OS === 'web'
-        ? screenWidth <= SCREEN_WIDTH
-          ? '100vw'
-          : '90vw'
-        : '100%',
+        Platform.OS === 'web'
+          ? screenWidth <= SCREEN_WIDTH
+            ? '100vw'
+            : '90vw'
+          : '100%',
     },
     cardContainer: {
       flexDirection: 'column',
diff --git a/packages/crosspath/types/lib-interface.d.ts b/packages/crosspath/types/lib-interface.d.ts
index 524b24431..acf8c94d3 100644
--- a/packages/crosspath/types/lib-interface.d.ts
+++ b/packages/crosspath/types/lib-interface.d.ts
@@ -1,4 +1,6 @@
 import { LinkComponent, Router, CreateParam } from './model';
-export declare function Link(props: Parameters<LinkComponent>): ReturnType<LinkComponent>;
+export declare function Link(
+  props: Parameters<LinkComponent>,
+): ReturnType<LinkComponent>;
 export declare const createParam: CreateParam;
 export declare function useRouter(): Router;
diff --git a/packages/crosspath/types/model/types.d.ts b/packages/crosspath/types/model/types.d.ts
index 9c3ee437d..5e7b7414e 100644
--- a/packages/crosspath/types/model/types.d.ts
+++ b/packages/crosspath/types/model/types.d.ts
@@ -1,27 +1,32 @@
 import { FC } from 'react';
 import { LinkProps } from 'solito/link';
 export interface CreateParamOptions {
-    initial?: string;
-    parse?: (param: string) => unknown;
-    stringify?: (param: unknown) => string;
+  initial?: string;
+  parse?: (param: string) => unknown;
+  stringify?: (param: unknown) => string;
 }
 export interface Router {
-    push: (url: URL) => void;
-    replace: (url: URL) => void;
-    back: () => void;
+  push: (url: URL) => void;
+  replace: (url: URL) => void;
+  back: () => void;
 }
 export type LinkComponent = FC<LinkProps>;
-export type URL = string | {
-    pathname?: string;
-    query?: Record<string, any>;
-    state?: Record<string, any>;
-    hash?: string;
-    as?: string | object;
-};
-export type CreateParam = <T>() => {
-    useParam: (key: keyof T, options?: CreateParamOptions) => [value: any, setValue: (value: any) => void];
-    useParams: (key: keyof T) => {
-        params: T;
-        setParams: (value: any) => void;
+export type URL =
+  | string
+  | {
+      pathname?: string;
+      query?: Record<string, any>;
+      state?: Record<string, any>;
+      hash?: string;
+      as?: string | object;
     };
+export type CreateParam = <T>() => {
+  useParam: (
+    key: keyof T,
+    options?: CreateParamOptions,
+  ) => [value: any, setValue: (value: any) => void];
+  useParams: (key: keyof T) => {
+    params: T;
+    setParams: (value: any) => void;
+  };
 };
diff --git a/packages/ui/src/Bento/elements/tables/Basic.tsx b/packages/ui/src/Bento/elements/tables/Basic.tsx
index dcfd7ad2c..7ee30baf4 100644
--- a/packages/ui/src/Bento/elements/tables/Basic.tsx
+++ b/packages/ui/src/Bento/elements/tables/Basic.tsx
@@ -152,7 +152,7 @@ export function BasicTable({
       header: () => 'Category',
       cell: (info) => info.getValue(),
       // footer: (info) => 'category',
-    })
+    }),
   ];
 
   if (hasPermissions) {
@@ -161,7 +161,7 @@ export function BasicTable({
         id: 'actions',
         cell: (props) => <ActionButtons item={props.row.original} />,
         header: () => 'Actions',
-      })
+      }),
     );
   }
 

From 9507cac7c438ce026cf846bb5d491ce65aa20913 Mon Sep 17 00:00:00 2001
From: Andrew Bierman <94939237+andrew-bierman@users.noreply.github.com>
Date: Sun, 16 Jun 2024 21:14:22 -0400
Subject: [PATCH 045/257] =?UTF-8?q?=F0=9F=90=9B=20remove=20logs?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../app/components/card/PackCardHeader/PackCardHeader.tsx     | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/app/components/card/PackCardHeader/PackCardHeader.tsx b/packages/app/components/card/PackCardHeader/PackCardHeader.tsx
index 8c0063dbf..f6cbd2ad9 100644
--- a/packages/app/components/card/PackCardHeader/PackCardHeader.tsx
+++ b/packages/app/components/card/PackCardHeader/PackCardHeader.tsx
@@ -51,7 +51,6 @@ export const PackCardHeader = ({ data, title }: PackCardHeaderProps) => {
   const handleDelete = () => {
     handleDeletePack();
     setIsOpen(false);
-    console.log('Pack Deleted');
   };
   const handleSavePack = () => {
     const packDetails = {
@@ -61,9 +60,8 @@ export const PackCardHeader = ({ data, title }: PackCardHeaderProps) => {
     };
     setIsOpen(false);
     editPack(packDetails);
-    console.log('Pack Saved');
   };
-  console.log('data', isOpen);
+  
   return (
     <>
       <CustomCardHeader

From dd04dd345abdfc9be9586cb0c9a6920371379112 Mon Sep 17 00:00:00 2001
From: Andrew Bierman <94939237+andrew-bierman@users.noreply.github.com>
Date: Sun, 16 Jun 2024 21:35:49 -0400
Subject: [PATCH 046/257] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20initial=20commit?=
 =?UTF-8?q?=20to=20add=20jewel's=20playwright=20tests?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .github/workflows/playwright.yml              | 29 +++++++
 apps/expo/package.json                        |  2 +-
 apps/next/package.json                        |  2 +-
 packages/app/package.json                     |  2 +-
 packages/playwright/.gitignore                |  5 ++
 packages/playwright/package.json              | 10 +++
 packages/playwright/playwright.config.ts      | 77 +++++++++++++++++
 packages/playwright/tests/About.spec.js       | 15 ++++
 packages/playwright/tests/Search.spec.js      | 16 ++++
 packages/playwright/tests/add-item.spec.js    | 13 +++
 packages/playwright/tests/add-items.spec.js   | 22 +++++
 packages/playwright/tests/create-trip.spec.js | 20 +++++
 packages/playwright/tests/example.spec.ts     | 18 ++++
 packages/playwright/tests/pack-create.spec.js | 20 +++++
 packages/playwright/tests/pack.spec.js        | 23 +++++
 packages/playwright/tests/packs.spec.js       | 16 ++++
 packages/playwright/tests/profile.spec.js     | 19 +++++
 packages/playwright/tests/sign-in.spec.js     | 11 +++
 packages/validations/package.json             |  2 +-
 server/package.json                           |  2 +-
 yarn.lock                                     | 84 +++++++++++++++++--
 21 files changed, 397 insertions(+), 11 deletions(-)
 create mode 100644 .github/workflows/playwright.yml
 create mode 100644 packages/playwright/.gitignore
 create mode 100644 packages/playwright/package.json
 create mode 100644 packages/playwright/playwright.config.ts
 create mode 100644 packages/playwright/tests/About.spec.js
 create mode 100644 packages/playwright/tests/Search.spec.js
 create mode 100644 packages/playwright/tests/add-item.spec.js
 create mode 100644 packages/playwright/tests/add-items.spec.js
 create mode 100644 packages/playwright/tests/create-trip.spec.js
 create mode 100644 packages/playwright/tests/example.spec.ts
 create mode 100644 packages/playwright/tests/pack-create.spec.js
 create mode 100644 packages/playwright/tests/pack.spec.js
 create mode 100644 packages/playwright/tests/packs.spec.js
 create mode 100644 packages/playwright/tests/profile.spec.js
 create mode 100644 packages/playwright/tests/sign-in.spec.js

diff --git a/.github/workflows/playwright.yml b/.github/workflows/playwright.yml
new file mode 100644
index 000000000..a6e9ac8d0
--- /dev/null
+++ b/.github/workflows/playwright.yml
@@ -0,0 +1,29 @@
+name: Playwright Tests
+on:
+  push:
+    branches: [ main, master ]
+  pull_request:
+    branches: [ main, master ]
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
+      with:
+        node-version: lts/*
+    - name: Install dependencies
+      run: npm install -g yarn && yarn
+    - name: Install Playwright Browsers
+      run: yarn playwright install --with-deps
+    - name: Run Playwright tests
+      run: |
+        cd packages/playwright
+        yarn playwright test
+    - uses: actions/upload-artifact@v4
+      if: always()
+      with:
+        name: playwright-report
+        path: playwright-report/
+        retention-days: 30
diff --git a/apps/expo/package.json b/apps/expo/package.json
index 85e077a73..178c83604 100644
--- a/apps/expo/package.json
+++ b/apps/expo/package.json
@@ -159,7 +159,7 @@
     "@tsconfig/react-native": "^3.0.2",
     "@types/jest": "^29.5.11",
     "@types/lodash": "^4.14.202",
-    "@types/node": "^20.8.3",
+    "@types/node": "^20.14.2",
     "@types/react": "~18.2.55",
     "@types/react-test-renderer": "^18.0.0",
     "@types/server": "^1.0.5",
diff --git a/apps/next/package.json b/apps/next/package.json
index e6d63c31a..5adc6b036 100644
--- a/apps/next/package.json
+++ b/apps/next/package.json
@@ -46,7 +46,7 @@
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@cloudflare/next-on-pages": "1.11.0",
     "@cloudflare/workers-types": "4.20240419.0",
-    "@types/node": "^20.8.3",
+    "@types/node": "^20.14.2",
     "babel-plugin-module-resolver": "^5.0.0",
     "eslint-plugin-next-on-pages": "^1.11.0",
     "patch-package": "^8.0.0",
diff --git a/packages/app/package.json b/packages/app/package.json
index 956976117..6e561edd6 100644
--- a/packages/app/package.json
+++ b/packages/app/package.json
@@ -145,7 +145,7 @@
     "@tsconfig/react-native": "^3.0.2",
     "@types/jest": "^29.5.11",
     "@types/lodash": "^4.14.202",
-    "@types/node": "^20.8.3",
+    "@types/node": "^20.14.2",
     "@types/react": "~18.2.55",
     "@types/react-native": "^0.72.5",
     "@types/react-test-renderer": "^18.0.0",
diff --git a/packages/playwright/.gitignore b/packages/playwright/.gitignore
new file mode 100644
index 000000000..68c5d18f0
--- /dev/null
+++ b/packages/playwright/.gitignore
@@ -0,0 +1,5 @@
+node_modules/
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
diff --git a/packages/playwright/package.json b/packages/playwright/package.json
new file mode 100644
index 000000000..ccecca996
--- /dev/null
+++ b/packages/playwright/package.json
@@ -0,0 +1,10 @@
+{
+  "name": "@packrat/playwright",
+  "devDependencies": {
+    "@playwright/test": "^1.44.1",
+    "@types/node": "^20.14.2"
+  },
+  "scripts": {
+    "test": "playwright test"
+  }
+}
diff --git a/packages/playwright/playwright.config.ts b/packages/playwright/playwright.config.ts
new file mode 100644
index 000000000..301801ee1
--- /dev/null
+++ b/packages/playwright/playwright.config.ts
@@ -0,0 +1,77 @@
+import { defineConfig, devices } from '@playwright/test';
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: './tests',
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: 'html',
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    // baseURL: 'http://127.0.0.1:3000',
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+
+    {
+      name: 'firefox',
+      use: { ...devices['Desktop Firefox'] },
+    },
+
+    {
+      name: 'webkit',
+      use: { ...devices['Desktop Safari'] },
+    },
+
+    /* Test against mobile viewports. */
+    // {
+    //   name: 'Mobile Chrome',
+    //   use: { ...devices['Pixel 5'] },
+    // },
+    // {
+    //   name: 'Mobile Safari',
+    //   use: { ...devices['iPhone 12'] },
+    // },
+
+    /* Test against branded browsers. */
+    // {
+    //   name: 'Microsoft Edge',
+    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
+    // },
+    // {
+    //   name: 'Google Chrome',
+    //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+    // },
+  ],
+
+  /* Run your local dev server before starting the tests */
+  // webServer: {
+  //   command: 'npm run start',
+  //   url: 'http://127.0.0.1:3000',
+  //   reuseExistingServer: !process.env.CI,
+  // },
+});
diff --git a/packages/playwright/tests/About.spec.js b/packages/playwright/tests/About.spec.js
new file mode 100644
index 000000000..6cfb8e251
--- /dev/null
+++ b/packages/playwright/tests/About.spec.js
@@ -0,0 +1,15 @@
+import { test, expect } from '@playwright/test';
+
+test('test', async ({ page }) => {
+  await page.goto('https://packrat.pages.dev/');
+  await page.getByRole('link', { name: 'Get Started' }).click();
+  await page.locator('input[type="email"]').click();
+  await page.locator('input[type="email"]').fill('zoot3@email.com');
+  await page.locator('input[type="password"]').click();
+  await page.locator('input[type="password"]').fill('12345678');
+  await page.getByRole('button', { name: 'Sign in', exact: true }).click();
+  await page.getByRole('button', { name: 'Menu' }).click();
+  await page.getByRole('button', { name: ' About' }).click();
+  await page.goto('https://github.com/andrew-bierman/PackRat');
+  await page.getByText('main254 Branches 0 Tags Go to').click();
+});
\ No newline at end of file
diff --git a/packages/playwright/tests/Search.spec.js b/packages/playwright/tests/Search.spec.js
new file mode 100644
index 000000000..0164233da
--- /dev/null
+++ b/packages/playwright/tests/Search.spec.js
@@ -0,0 +1,16 @@
+import { test, expect } from '@playwright/test';
+
+test('test', async ({ page }) => {
+  await page.goto('https://packrat.pages.dev/');
+  await page.getByRole('link', { name: 'Get Started' }).click();
+  await page.locator('input[type="email"]').click();
+  await page.locator('input[type="email"]').fill('zoot3@email.com');
+  await page.locator('input[type="password"]').click();
+  await page.locator('input[type="password"]').fill('12345678');
+  await page.getByRole('button', { name: 'Sign in', exact: true }).click();
+  await page.getByPlaceholder('Search by park, city, or trail').click();
+  await page.getByPlaceholder('Search by park, city, or trail').fill('Manila ');
+  await page.getByText('city', { exact: true }).click();
+  await page.getByText('').click();
+  await page.getByText('').click();
+});
\ No newline at end of file
diff --git a/packages/playwright/tests/add-item.spec.js b/packages/playwright/tests/add-item.spec.js
new file mode 100644
index 000000000..2491f6dbf
--- /dev/null
+++ b/packages/playwright/tests/add-item.spec.js
@@ -0,0 +1,13 @@
+import { test, expect } from '@playwright/test';
+
+test('test', async ({ page }) => {
+  await page.goto('https://packrat.pages.dev/pack/lxupicy18yl1woljm4ll24l4');
+  await page.getByRole('button', { name: 'Add Item' }).click();
+  await page.getByPlaceholder('Item Name').fill('item78');
+  await page.getByPlaceholder('Weight').click();
+  await page.getByPlaceholder('Weight').fill('3');
+  await page.getByPlaceholder('Quantity').click();
+  await page.getByPlaceholder('Quantity').fill('3');
+  await page.getByLabel('Add Item').getByText('Essentials').click();
+  await page.getByRole('button', { name: 'Add Item' }).click();
+});
\ No newline at end of file
diff --git a/packages/playwright/tests/add-items.spec.js b/packages/playwright/tests/add-items.spec.js
new file mode 100644
index 000000000..a6d0e2307
--- /dev/null
+++ b/packages/playwright/tests/add-items.spec.js
@@ -0,0 +1,22 @@
+import { test, expect } from '@playwright/test';
+
+test('test', async ({ page }) => {
+  await page.goto('https://packrat.pages.dev/');
+  await page.getByRole('link', { name: 'Get Started' }).click();
+  await page.locator('input[type="email"]').click();
+  await page.locator('input[type="email"]').fill('zoot3@email.com');
+  await page.locator('input[type="password"]').click();
+  await page.locator('input[type="password"]').fill('12345678');
+  await page.getByRole('button', { name: 'Sign in', exact: true }).click();
+  await page.getByRole('button', { name: 'Menu' }).click();
+  await page.getByRole('button', { name: ' Packs' }).click();
+  await page.getByRole('link', { name: 'Quantity field testing' }).click();
+  await page.getByRole('button', { name: 'Add Item' }).click();
+  await page.getByPlaceholder('Item Name').fill('items88888');
+  await page.getByPlaceholder('Weight').click();
+  await page.getByPlaceholder('Weight').fill('5');
+  await page.getByPlaceholder('Quantity').fill('5');
+  await page.getByPlaceholder('Quantity').click();
+  await page.getByLabel('Add Item').getByText('Essentials').click();
+  await page.getByRole('button', { name: 'Add Item' }).click();
+});
\ No newline at end of file
diff --git a/packages/playwright/tests/create-trip.spec.js b/packages/playwright/tests/create-trip.spec.js
new file mode 100644
index 000000000..9ec9e15da
--- /dev/null
+++ b/packages/playwright/tests/create-trip.spec.js
@@ -0,0 +1,20 @@
+import { test, expect } from '@playwright/test';
+
+test('test', async ({ page }) => {
+  await page.goto('https://packrat.pages.dev/');
+  await page.getByRole('link', { name: 'Get Started' }).click();
+  await page.locator('input[type="email"]').click();
+  await page.locator('input[type="email"]').fill('zoot3@email.com');
+  await page.locator('input[type="password"]').click();
+  await page.locator('input[type="password"]').fill('12345678');
+  await page.getByRole('button', { name: 'Sign in', exact: true }).click();
+  await page.getByText('Create a Trip').click();
+  await page.getByPlaceholder('Search').click();
+  await page.getByPlaceholder('Search').fill('manila ');
+  await page.locator('.css-175oi2r > div > ._dsp-flex > p').first().click();
+  await page.getByPlaceholder('Start date - End date').click();
+  await page.getByRole('button', { name: '17' }).nth(1).click();
+  await page.getByRole('button', { name: '20' }).nth(1).click();
+  await page.goto('https://packrat.pages.dev/trip/create?id=lxupicy18yl1woljm4ll24l4');
+
+});
\ No newline at end of file
diff --git a/packages/playwright/tests/example.spec.ts b/packages/playwright/tests/example.spec.ts
new file mode 100644
index 000000000..54a906a4e
--- /dev/null
+++ b/packages/playwright/tests/example.spec.ts
@@ -0,0 +1,18 @@
+import { test, expect } from '@playwright/test';
+
+test('has title', async ({ page }) => {
+  await page.goto('https://playwright.dev/');
+
+  // Expect a title "to contain" a substring.
+  await expect(page).toHaveTitle(/Playwright/);
+});
+
+test('get started link', async ({ page }) => {
+  await page.goto('https://playwright.dev/');
+
+  // Click the get started link.
+  await page.getByRole('link', { name: 'Get started' }).click();
+
+  // Expects page to have a heading with the name of Installation.
+  await expect(page.getByRole('heading', { name: 'Installation' })).toBeVisible();
+});
diff --git a/packages/playwright/tests/pack-create.spec.js b/packages/playwright/tests/pack-create.spec.js
new file mode 100644
index 000000000..a81b17cc0
--- /dev/null
+++ b/packages/playwright/tests/pack-create.spec.js
@@ -0,0 +1,20 @@
+import { test, expect } from '@playwright/test';
+
+test('test', async ({ page }) => {
+  await page.goto('https://packrat.pages.dev/');
+  await page.getByRole('link', { name: 'Get Started' }).click();
+  await page.locator('input[type="email"]').click();
+  await page.locator('input[type="email"]').fill('jew@email.com');
+  await page.locator('input[type="password"]').click();
+  await page.locator('input[type="password"]').fill('12345678');
+  await page.getByRole('button', { name: 'Sign in', exact: true }).click();
+  await page.getByRole('button', { name: 'Menu' }).click();
+  await page.getByRole('button', { name: ' Packs' }).click();
+  await page.getByRole('button', { name: 'Create' }).click();
+  await page.getByPlaceholder('Name').click();
+  await page.getByPlaceholder('Name').fill('testing123789');
+  await page.getByLabel('Is Public').click();
+  await page.getByLabel('Yes').click();
+  await page.getByRole('button', { name: 'Add Pack' }).click();
+ 
+});
\ No newline at end of file
diff --git a/packages/playwright/tests/pack.spec.js b/packages/playwright/tests/pack.spec.js
new file mode 100644
index 000000000..49933341e
--- /dev/null
+++ b/packages/playwright/tests/pack.spec.js
@@ -0,0 +1,23 @@
+import { test, expect } from '@playwright/test';
+
+test('test', async ({ page }) => {
+  await page.goto('https://packrat.pages.dev/');
+  await page.getByRole('link', { name: 'Get Started' }).click();
+  await page.locator('input[type="email"]').click();
+  await page.locator('input[type="email"]').fill('zoot3@email.com');
+  await page.locator('input[type="password"]').click();
+  await page.locator('input[type="password"]').fill('12345678');
+  await page.getByRole('button', { name: 'Sign in', exact: true }).click();
+  await page.getByText('Create a Pack').click();
+  await page.getByPlaceholder('Name').click();
+  await page.getByPlaceholder('Name').fill('testiiiiiing');
+  await page.getByRole('button', { name: 'Add Pack' }).click();
+  await page.getByRole('button', { name: 'Add Item' }).click();
+  await page.getByPlaceholder('Item Name').fill('iteeeeeeeeem1234');
+  await page.getByPlaceholder('Weight').click();
+  await page.getByPlaceholder('Weight').fill('2');
+  await page.getByPlaceholder('Quantity').click();
+  await page.getByPlaceholder('Quantity').fill('2');
+  await page.getByText('Essentials').click();
+  await page.getByRole('button', { name: 'Add Item' }).click();
+});
\ No newline at end of file
diff --git a/packages/playwright/tests/packs.spec.js b/packages/playwright/tests/packs.spec.js
new file mode 100644
index 000000000..8e563595f
--- /dev/null
+++ b/packages/playwright/tests/packs.spec.js
@@ -0,0 +1,16 @@
+import { test, expect } from '@playwright/test';
+
+test('test', async ({ page }) => {
+  await page.goto('https://packrat.pages.dev/packs');
+  await page.getByRole('link', { name: 'testiiiiing' }).click();
+  await page.getByRole('button', { name: 'Add Item' }).click();
+  await page.getByPlaceholder('Item Name').fill('aaaaaaaaaaaa');
+  await page.getByPlaceholder('Weight').click();
+  await page.getByPlaceholder('Weight').fill('22');
+  await page.getByPlaceholder('Weight').click();
+  await page.getByPlaceholder('Weight').fill('2');
+  await page.getByPlaceholder('Quantity').click();
+  await page.getByPlaceholder('Quantity').fill('2');
+  await page.getByText('Food').click();
+  await page.getByRole('button', { name: 'Add Item' }).click();
+});
\ No newline at end of file
diff --git a/packages/playwright/tests/profile.spec.js b/packages/playwright/tests/profile.spec.js
new file mode 100644
index 000000000..4efcc3fd8
--- /dev/null
+++ b/packages/playwright/tests/profile.spec.js
@@ -0,0 +1,19 @@
+import { test, expect } from '@playwright/test';
+
+test('test', async ({ page }) => {
+  await page.goto('https://packrat.pages.dev/');
+  await page.getByRole('link', { name: 'Get Started' }).click();
+  await page.locator('input[type="email"]').click();
+  await page.locator('input[type="email"]').fill('jew@email.com');
+  await page.locator('input[type="password"]').click();
+  await page.locator('input[type="password"]').fill('12345678');
+  await page.getByRole('button', { name: 'Sign in', exact: true }).click();
+  await page.getByRole('button', { name: 'Menu' }).click();
+  await page.getByRole('button', { name: ' Profile' }).click();
+  await page.getByRole('button', { name: 'Menu' }).click();
+  await page.getByRole('combobox').first().click();
+  await page.getByLabel('celsius').click();
+  await page.getByRole('combobox').nth(1).click();
+  await page.getByLabel('kg').click();
+  await page.getByRole('button', { name: 'Update profile' }).click();
+});
\ No newline at end of file
diff --git a/packages/playwright/tests/sign-in.spec.js b/packages/playwright/tests/sign-in.spec.js
new file mode 100644
index 000000000..dc46eec24
--- /dev/null
+++ b/packages/playwright/tests/sign-in.spec.js
@@ -0,0 +1,11 @@
+import { test, expect } from '@playwright/test';
+
+test('test', async ({ page }) => {
+  await page.goto('https://packrat.pages.dev/');
+  await page.getByRole('link', { name: 'Get Started' }).click();
+  await page.locator('input[type="email"]').click();
+  await page.locator('input[type="email"]').fill('zoot3@email.com');
+  await page.locator('input[type="password"]').click();
+  await page.locator('input[type="password"]').fill('12345678');
+  await page.getByRole('button', { name: 'Sign in', exact: true }).click();
+});
\ No newline at end of file
diff --git a/packages/validations/package.json b/packages/validations/package.json
index ef88435d2..1abf7529d 100644
--- a/packages/validations/package.json
+++ b/packages/validations/package.json
@@ -17,7 +17,7 @@
   "license": "ISC",
   "dependencies": {
     "@types/express": "^4.17.17",
-    "@types/node": "^20.8.3",
+    "@types/node": "^20.14.2",
     "express": "^4.19.2",
     "typescript": "^5.3.3",
     "zod": "^3.22.4"
diff --git a/server/package.json b/server/package.json
index 08d8b50f4..6ff3386fc 100644
--- a/server/package.json
+++ b/server/package.json
@@ -52,7 +52,7 @@
     "@types/cors": "^2.8.13",
     "@types/csurf": "^1.11.2",
     "@types/mongoose": "^5.11.97",
-    "@types/node": "^20.8.3",
+    "@types/node": "^20.14.2",
     "@types/swagger-jsdoc": "^6.0.1",
     "@types/swagger-ui-express": "^4.1.3",
     "@types/validator": "^13.11.1",
diff --git a/yarn.lock b/yarn.lock
index 2de354121..d6c90ba32 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5467,6 +5467,15 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@packrat/playwright@workspace:packages/playwright":
+  version: 0.0.0-use.local
+  resolution: "@packrat/playwright@workspace:packages/playwright"
+  dependencies:
+    "@playwright/test": "npm:^1.44.1"
+    "@types/node": "npm:^20.14.2"
+  languageName: unknown
+  linkType: soft
+
 "@packrat/ui@npm:*, @packrat/ui@workspace:packages/ui":
   version: 0.0.0-use.local
   resolution: "@packrat/ui@workspace:packages/ui"
@@ -5523,7 +5532,7 @@ __metadata:
   resolution: "@packrat/validations@workspace:packages/validations"
   dependencies:
     "@types/express": "npm:^4.17.17"
-    "@types/node": "npm:^20.8.3"
+    "@types/node": "npm:^20.14.2"
     express: "npm:^4.19.2"
     typescript: "npm:^5.3.3"
     zod: "npm:^3.22.4"
@@ -5553,6 +5562,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@playwright/test@npm:^1.44.1":
+  version: 1.44.1
+  resolution: "@playwright/test@npm:1.44.1"
+  dependencies:
+    playwright: "npm:1.44.1"
+  bin:
+    playwright: cli.js
+  checksum: 10/572b4c97834fae54fda833939b8f376df2c301b724f9825a3c705533efc124beb346dd9406f54cd771b3f79c00f0e5c70b5469ef33818a0d2e2ea17b19636f9a
+  languageName: node
+  linkType: hard
+
 "@pnpm/config.env-replace@npm:^1.1.0":
   version: 1.1.0
   resolution: "@pnpm/config.env-replace@npm:1.1.0"
@@ -11126,7 +11146,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/node@npm:*, @types/node@npm:>=12.12.47, @types/node@npm:>=13.7.0, @types/node@npm:^20.8.3":
+"@types/node@npm:*, @types/node@npm:>=12.12.47, @types/node@npm:>=13.7.0":
   version: 20.12.11
   resolution: "@types/node@npm:20.12.11"
   dependencies:
@@ -11151,6 +11171,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/node@npm:^20.14.2":
+  version: 20.14.2
+  resolution: "@types/node@npm:20.14.2"
+  dependencies:
+    undici-types: "npm:~5.26.4"
+  checksum: 10/c38e47b190fa0a8bdfde24b036dddcf9401551f2fb170a90ff33625c7d6f218907e81c74e0fa6e394804a32623c24c60c50e249badc951007830f0d02c48ee0f
+  languageName: node
+  linkType: hard
+
 "@types/nunjucks@npm:^3.1.0":
   version: 3.2.6
   resolution: "@types/nunjucks@npm:3.2.6"
@@ -12666,7 +12695,7 @@ __metadata:
     "@tsconfig/react-native": "npm:^3.0.2"
     "@types/jest": "npm:^29.5.11"
     "@types/lodash": "npm:^4.14.202"
-    "@types/node": "npm:^20.8.3"
+    "@types/node": "npm:^20.14.2"
     "@types/react": "npm:~18.2.55"
     "@types/react-native": "npm:^0.72.5"
     "@types/react-test-renderer": "npm:^18.0.0"
@@ -19544,7 +19573,7 @@ __metadata:
     "@tsconfig/react-native": "npm:^3.0.2"
     "@types/jest": "npm:^29.5.11"
     "@types/lodash": "npm:^4.14.202"
-    "@types/node": "npm:^20.8.3"
+    "@types/node": "npm:^20.14.2"
     "@types/react": "npm:~18.2.55"
     "@types/react-test-renderer": "npm:^18.0.0"
     "@types/server": "npm:^1.0.5"
@@ -21016,6 +21045,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"fsevents@npm:2.3.2":
+  version: 2.3.2
+  resolution: "fsevents@npm:2.3.2"
+  dependencies:
+    node-gyp: "npm:latest"
+  checksum: 10/6b5b6f5692372446ff81cf9501c76e3e0459a4852b3b5f1fc72c103198c125a6b8c72f5f166bdd76ffb2fca261e7f6ee5565daf80dca6e571e55bcc589cc1256
+  conditions: os=darwin
+  languageName: node
+  linkType: hard
+
 "fsevents@npm:^2.3.2, fsevents@npm:~2.3.2, fsevents@npm:~2.3.3":
   version: 2.3.3
   resolution: "fsevents@npm:2.3.3"
@@ -21036,6 +21075,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"fsevents@patch:fsevents@npm%3A2.3.2#optional!builtin<compat/fsevents>":
+  version: 2.3.2
+  resolution: "fsevents@patch:fsevents@npm%3A2.3.2#optional!builtin<compat/fsevents>::version=2.3.2&hash=df0bf1"
+  dependencies:
+    node-gyp: "npm:latest"
+  conditions: os=darwin
+  languageName: node
+  linkType: hard
+
 "fsevents@patch:fsevents@npm%3A^2.3.2#optional!builtin<compat/fsevents>, fsevents@patch:fsevents@npm%3A~2.3.2#optional!builtin<compat/fsevents>, fsevents@patch:fsevents@npm%3A~2.3.3#optional!builtin<compat/fsevents>":
   version: 2.3.3
   resolution: "fsevents@patch:fsevents@npm%3A2.3.3#optional!builtin<compat/fsevents>::version=2.3.3&hash=df0bf1"
@@ -27204,7 +27252,7 @@ __metadata:
     "@tamagui/config": "npm:1.96.0"
     "@tamagui/next-plugin": "npm:1.96.0"
     "@tamagui/next-theme": "npm:1.96.0"
-    "@types/node": "npm:^20.8.3"
+    "@types/node": "npm:^20.14.2"
     app: "npm:*"
     babel-plugin-module-resolver: "npm:^5.0.0"
     babel-preset-expo: "npm:^10.0.1"
@@ -29200,6 +29248,30 @@ __metadata:
   languageName: node
   linkType: hard
 
+"playwright-core@npm:1.44.1":
+  version: 1.44.1
+  resolution: "playwright-core@npm:1.44.1"
+  bin:
+    playwright-core: cli.js
+  checksum: 10/f79f9022bbb760daed371e36c802b27d43dc75e67de4d139d83b47feea51c8b884f3296cce85c3afa71c942290cef1b4369cd9ddf4dda5457a0a81772c73b50a
+  languageName: node
+  linkType: hard
+
+"playwright@npm:1.44.1":
+  version: 1.44.1
+  resolution: "playwright@npm:1.44.1"
+  dependencies:
+    fsevents: "npm:2.3.2"
+    playwright-core: "npm:1.44.1"
+  dependenciesMeta:
+    fsevents:
+      optional: true
+  bin:
+    playwright: cli.js
+  checksum: 10/3207178a78f1c971dddf99c9a08052e462c882092e0d47e3dd8287ced40897a49e387e545a61d31e5d68f7e443d7818660aa12ce43ab662d01d95bcfcfeca2ca
+  languageName: node
+  linkType: hard
+
 "plist@npm:^3.0.5":
   version: 3.1.0
   resolution: "plist@npm:3.1.0"
@@ -32272,7 +32344,7 @@ __metadata:
     "@types/csurf": "npm:^1.11.2"
     "@types/jest": "npm:^29.5.11"
     "@types/mongoose": "npm:^5.11.97"
-    "@types/node": "npm:^20.8.3"
+    "@types/node": "npm:^20.14.2"
     "@types/swagger-jsdoc": "npm:^6.0.1"
     "@types/swagger-ui-express": "npm:^4.1.3"
     "@types/validator": "npm:^13.11.1"

From ad74e950e16ef06ed720d59f0d606c942686b0a6 Mon Sep 17 00:00:00 2001
From: Anmol Verma <anmolverma2810@gmail.com>
Date: Mon, 17 Jun 2024 23:01:02 +0530
Subject: [PATCH 047/257] ui fixes

---
 .../card/PackCardHeader/PackCardHeader.tsx    |  7 +-----
 packages/app/components/carousel/index.tsx    |  7 ++----
 .../app/components/dashboard/HeroBanner.tsx   |  7 +-----
 .../dashboard/QuickActionButton.tsx           |  8 -------
 .../dashboard/QuickActionSection.tsx          |  3 ---
 packages/app/components/dashboard/Section.tsx |  4 +---
 .../dashboard/feedpreview.style.tsx           |  2 +-
 .../app/components/feed/FeedSearchFilter.tsx  | 17 +++++---------
 .../app/components/itemtable/itemTable.tsx    |  6 ++---
 packages/app/components/layout/Layout.tsx     |  5 +---
 .../app/components/pack/PackContainer.tsx     |  7 +-----
 packages/app/screens/items/index.tsx          | 23 ++++++++-----------
 12 files changed, 26 insertions(+), 70 deletions(-)

diff --git a/packages/app/components/card/PackCardHeader/PackCardHeader.tsx b/packages/app/components/card/PackCardHeader/PackCardHeader.tsx
index e933b01d4..1e2997c4a 100644
--- a/packages/app/components/card/PackCardHeader/PackCardHeader.tsx
+++ b/packages/app/components/card/PackCardHeader/PackCardHeader.tsx
@@ -20,7 +20,6 @@ import { useEditPack } from 'app/hooks/packs/useEditPack';
 import { Platform } from 'react-native';
 import { CopyPackModal } from '../../pack/CopyPackModal';
 import { View } from 'react-native';
-import useResponsive from 'app/hooks/useResponsive';
 
 
 interface PackCardHeaderProps {
@@ -39,7 +38,6 @@ export const PackCardHeader = ({ data, title }: PackCardHeaderProps) => {
   const { isDark, currentTheme } = useTheme();
   const router = useRouter();
   const { editPack } = useEditPack();
-  const { xs } =  useResponsive();
 
   const handleSavePack = () => {
     const packDetails = {
@@ -80,16 +78,13 @@ export const PackCardHeader = ({ data, title }: PackCardHeaderProps) => {
                 }}
               />
             )}
-            <View
-              style={{ width: xs ? '30vw' : '50vw' }}
-            >
+            
               <EditableText
                 isLoading={isLoading}
                 defaultValue={title}
                 isFocused={isEditMode}
                 onSave={handleSaveTitle}
               />
-            </View>
           </RStack>
         }
         actionsComponent={
diff --git a/packages/app/components/carousel/index.tsx b/packages/app/components/carousel/index.tsx
index 21cf8dc5c..36a981f97 100644
--- a/packages/app/components/carousel/index.tsx
+++ b/packages/app/components/carousel/index.tsx
@@ -8,7 +8,6 @@ import {
 import { RStack } from '@packrat/ui';
 import ScrollButton from './ScrollButton';
 import useCustomStyles from 'app/hooks/useCustomStyles';
-import useResponsive from 'app/hooks/useResponsive';
 
 interface CarouselProps {
   children?: ReactNode[];
@@ -43,13 +42,12 @@ const Carousel: React.FC<CarouselProps> = ({
       setCurrentIndex(index);
     }
   };
-  const { xs, xxs } =  useResponsive();
 
   return (
     <RStack
       style={{
         alignSelf: 'center',
-        width: xxs ? width * 0.7 : xs ? '80vw' : '57vw',
+        width: '90%',
         justifyContent: 'center',
         alignItems: 'center',
         flexDirection: 'row',
@@ -100,11 +98,10 @@ const Carousel: React.FC<CarouselProps> = ({
 };
 
 const loadStyles = () => {
-  const { xs, xxs } =  useResponsive();
   return {
     carousel: {
       flexDirection: 'row',
-      width: xxs ? width * 0.8 : '100%',
+      width: '100%',
     },
   };
 };
diff --git a/packages/app/components/dashboard/HeroBanner.tsx b/packages/app/components/dashboard/HeroBanner.tsx
index be2f203a8..5bed4f596 100644
--- a/packages/app/components/dashboard/HeroBanner.tsx
+++ b/packages/app/components/dashboard/HeroBanner.tsx
@@ -12,7 +12,6 @@ import { first } from 'lodash';
 import { hexToRGBA } from '../../utils/colorFunctions';
 import useCustomStyles from 'app/hooks/useCustomStyles';
 import { PlacesAutocomplete } from 'app/components/PlacesAutocomplete/PlacesAutocomplete';
-import useResponsive from 'app/hooks/useResponsive';
 
 const RText: any = OriginalRText;
 
@@ -74,7 +73,6 @@ const HeroSection: React.FC<HeroSectionProps> = ({ onSelect }) => {
       ? `Let's find a new trail, ${firstNameOrUser}`
       : "Let's find a new trail";
 
-  const {xs} =  useResponsive();
 
   return (
     <View style={styles.banner}>
@@ -95,7 +93,7 @@ const HeroSection: React.FC<HeroSectionProps> = ({ onSelect }) => {
               cardBackgroundColor || currentTheme.colors.secondaryBlue,
             alignItems: 'center',
             justifyContent: 'center',
-            width: xs ? '80vw' : '30vw',
+            width: '100%',
             height: '30vh',
             padding: 50,
           }}
@@ -104,10 +102,7 @@ const HeroSection: React.FC<HeroSectionProps> = ({ onSelect }) => {
         >
           <RStack
             style={{
-              width: xs ? '55vw' : '25vw',
-              height: '20vh',
               alignItems: 'center',
-              justifyContent: 'center',
             }}
           >
             <RText style={styles.title}>{bannerText}</RText>
diff --git a/packages/app/components/dashboard/QuickActionButton.tsx b/packages/app/components/dashboard/QuickActionButton.tsx
index c321f9414..f4bb83f69 100644
--- a/packages/app/components/dashboard/QuickActionButton.tsx
+++ b/packages/app/components/dashboard/QuickActionButton.tsx
@@ -4,7 +4,6 @@ import { MaterialIcons } from '@expo/vector-icons';
 import React from 'react';
 import { theme } from '../../theme';
 import useCustomStyles from 'app/hooks/useCustomStyles';
-import useResponsive from 'app/hooks/useResponsive';
 
 
 const RCard: any = OriginalRCard;
@@ -40,12 +39,9 @@ const QuickActionButton = ({
 
 const loadStyles = (theme: any) => {
   const { currentTheme } = theme;
-  const {xs} =  useResponsive();
   return {
     container: {
       margin: 10,
-      width: xs ? '35vw' : '10vw',
-      height: '10vh',
       display: 'flex',
       alignItems: 'center',
       padding: '20',
@@ -54,10 +50,6 @@ const loadStyles = (theme: any) => {
       flexDirection: 'column',
       justifyContent: 'center',
       alignItems: 'center',
-      width: xs ? '35vw' : '10vw',
-      height: '10vh',
-      // paddingHorizontal: 40,
-      // paddingVertical: 60,
       backgroundColor: currentTheme.colors.primary,
     },
     icon: {
diff --git a/packages/app/components/dashboard/QuickActionSection.tsx b/packages/app/components/dashboard/QuickActionSection.tsx
index f648d1447..53c421407 100644
--- a/packages/app/components/dashboard/QuickActionSection.tsx
+++ b/packages/app/components/dashboard/QuickActionSection.tsx
@@ -2,7 +2,6 @@ import { RStack } from '@packrat/ui';
 import QuickActionButton from './QuickActionButton';
 import useCustomStyles from 'app/hooks/useCustomStyles';
 import { useQuickActions } from 'app/hooks/dashboard';
-import useResponsive from 'app/hooks/useResponsive';
 
 
 const QuickActionsSection = () => {
@@ -27,12 +26,10 @@ const QuickActionsSection = () => {
 
 const loadStyles = (theme) => {
   const { currentTheme } = theme;
-  const {xs } =  useResponsive();
   return {
     section: {
       marginBottom: 20,
       paddingHorizontal: 20, // Added padding here.
-      width: xs ? '80vw' : '22vw',
       display: 'flex',
       justifyContent: 'center',
     },
diff --git a/packages/app/components/dashboard/Section.tsx b/packages/app/components/dashboard/Section.tsx
index ae67bdb8e..867ce952b 100644
--- a/packages/app/components/dashboard/Section.tsx
+++ b/packages/app/components/dashboard/Section.tsx
@@ -3,7 +3,6 @@ import { RCard } from '@packrat/ui';
 import React from 'react';
 import useCustomStyles from 'app/hooks/useCustomStyles';
 import { TouchableOpacity } from 'react-native';
-import useResponsive from 'app/hooks/useResponsive';
 
 
 interface SectionProps {
@@ -25,7 +24,6 @@ const Section: React.FC<SectionProps> = ({ children, onPress }) => {
 
 const loadStyles = (theme: any) => {
   const { currentTheme } = theme;
-  const { xs, xxxs, xxs, } =  useResponsive();
   return {
     section: {
       marginBottom: 20,
@@ -33,7 +31,7 @@ const loadStyles = (theme: any) => {
     card: {
       justifyContent: 'center',
       alignItems: 'center',
-      width: xxxs ? '90vw' : xxs ? '90vw' : xs ? '92vw': '88vw',
+      width: '100%',
       backgroundColor: currentTheme.colors.secondaryBlue,
       borderRadius: 8,
     },
diff --git a/packages/app/components/dashboard/feedpreview.style.tsx b/packages/app/components/dashboard/feedpreview.style.tsx
index cd9f59e83..7278adf92 100644
--- a/packages/app/components/dashboard/feedpreview.style.tsx
+++ b/packages/app/components/dashboard/feedpreview.style.tsx
@@ -8,7 +8,7 @@ const loadStyles = (theme: any, appTheme: any) => {
     },
     cardStyles: {
       height: 100,
-      width: 250,
+      width:'100%',
       backgroundColor: appTheme.colors.primary,
       borderRadius: 5,
       padding: 20,
diff --git a/packages/app/components/feed/FeedSearchFilter.tsx b/packages/app/components/feed/FeedSearchFilter.tsx
index 991576c0d..f78bdc38f 100644
--- a/packages/app/components/feed/FeedSearchFilter.tsx
+++ b/packages/app/components/feed/FeedSearchFilter.tsx
@@ -16,7 +16,6 @@ import {
 import { AntDesign } from '@expo/vector-icons';
 import DropdownComponent from 'app/components/Dropdown';
 import Layout from 'app/components/layout/Layout';
-import useResponsive from 'app/hooks/useResponsive';
 const RStack: any = OriginalRStack;
 const RText: any = OriginalRText;
 const RSeparator: any = OriginalRSeparator;
@@ -61,7 +60,6 @@ const FeedSearchFilter = ({
   const [searchValue, setSearchValue] = useState('');
 
   const onSearch = (search) => setSearchQuery(search);
-  const {xs, xxs, xxxs} =  useResponsive();
 
   return (
     <Layout>
@@ -72,7 +70,7 @@ const FeedSearchFilter = ({
               style={{ flexDirection: 'row',marginLeft:40, }}
             >
               <FormInput
-                width={xxxs? '30vw' : xxs ?'100%' : xs? '30vw' : '12vw'}
+                width='100%'
                 placeholder={`Search ${feedType || 'Feed'}`}
                 name="search"
                 value={searchValue}
@@ -143,12 +141,12 @@ const FeedSearchFilter = ({
             <RStack
               style={{
                 flexDirection: 'row',
-                gap: xxxs ? 10 : xxs ?  60: 10,
                 alignItems: 'center',
+                justifyContent:'space-between'
               }}
             >
               <RText
-                fontSize={xxs ? 15: 17}
+                fontSize={17}
                 fontWeight="bold"
                 color={currentTheme.colors.textColor}
               >
@@ -160,9 +158,7 @@ const FeedSearchFilter = ({
                 onValueChange={handleSortChange}
                 placeholder={queryString}
                 style={styles.dropdown}
-                width={
-                 xxxs ? '30vw' : xxs ? '50%' : xs ? '30vw' : '8vw'
-                }
+                width='55%'
               />
             </RStack>
             {(feedType === 'userPacks' || feedType === 'userTrips') && (
@@ -184,7 +180,6 @@ const FeedSearchFilter = ({
 
 const loadStyles = (theme: any) => {
   const { currentTheme } = theme;
-  const {xxs, xs} =  useResponsive();
 
   return {
     mainContainer: {
@@ -197,9 +192,9 @@ const loadStyles = (theme: any) => {
       backgroundColor: currentTheme.colors.card,
       padding: 15,
       fontSize: 18,
-      width: '60vw',
+      width: '100%',
       borderRadius: 10,
-      marginTop: xxs ? 20 : 0,
+      marginTop:  20,
     },
     searchContainer: {
       flexDirection: 'row',
diff --git a/packages/app/components/itemtable/itemTable.tsx b/packages/app/components/itemtable/itemTable.tsx
index 2158eeaa9..66a971a92 100644
--- a/packages/app/components/itemtable/itemTable.tsx
+++ b/packages/app/components/itemtable/itemTable.tsx
@@ -84,7 +84,7 @@ export const ItemsTable = ({
       <RText
         style={{
           color: isDark ? 'white' : 'black',
-          fontSize:xxs ? 15 : xs ? '12px' : '15px',
+          fontSize:15,
         }}
       >
         {name}
@@ -96,7 +96,7 @@ export const ItemsTable = ({
       <RText
         style={{
           color: isDark ? 'white' : 'black',
-          fontSize:xxs ? 15 : xs ? '12px' : '15px',
+          fontSize:15,
         }}
       >
         {category?.name || type}
@@ -182,7 +182,7 @@ export const ItemsTable = ({
                 style={styles.head}
               />
               <ScrollView
-                style={{ height: xxs ? 'auto' : 400 }}
+                style={{ height:  'auto' }}
               >
                 {isLoading ? (
                   <Loader />
diff --git a/packages/app/components/layout/Layout.tsx b/packages/app/components/layout/Layout.tsx
index 83845171a..6a6cc24be 100644
--- a/packages/app/components/layout/Layout.tsx
+++ b/packages/app/components/layout/Layout.tsx
@@ -1,18 +1,15 @@
 import { View } from 'react-native';
-import useResponsive from 'app/hooks/useResponsive';
 
 
 const Layout = ({ children }) => {
-  const { xs,xxs, xxxs } =  useResponsive();
   return (
     <View
       style={{
         display: 'flex',
         justifyContent: 'center',
         alignItems: 'center',
-        margin: '0 auto',
         backgroundColor: 'transparent',
-        width:xxxs? '100vw' : xxs ? '100%' : xs ? '100vw' : '60vw',
+        width:'100%',
         alignSelf: 'center',
       }}
     >
diff --git a/packages/app/components/pack/PackContainer.tsx b/packages/app/components/pack/PackContainer.tsx
index 791f371bd..18fd522c1 100644
--- a/packages/app/components/pack/PackContainer.tsx
+++ b/packages/app/components/pack/PackContainer.tsx
@@ -9,7 +9,6 @@ import useCustomStyles from 'app/hooks/useCustomStyles';
 import { useAuthUser } from 'app/auth/hooks';
 import { usePackId } from 'app/hooks/packs';
 import { createParam } from '@packrat/crosspath';
-import useResponsive from 'app/hooks/useResponsive';
 
 
 export default function PackContainer({ isCreatingTrip = false }) {
@@ -20,7 +19,6 @@ export default function PackContainer({ isCreatingTrip = false }) {
 
   const [refetch, setRefetch] = useState(false);
   const styles = useCustomStyles(loadStyles);
-  const { xs } =  useResponsive();
 
   // TODO - improve refetch logic. Should be handled entirely by the hook
 
@@ -83,9 +81,7 @@ export default function PackContainer({ isCreatingTrip = false }) {
             isAddItemModalOpen={isAddItemModalOpen}
             setIsAddItemModalOpen={setIsAddItemModalOpen}
           />
-          <View
-            style={{ width: xs ? '70vw' : '60vw' }}
-          >
+          
             <TableContainer
               key={`table - ${currentPackId}`}
               currentPack={currentPack}
@@ -93,7 +89,6 @@ export default function PackContainer({ isCreatingTrip = false }) {
               refetch={refetch}
               setRefetch={setRefetch}
             />
-          </View>
         </>
       )}
     </View>
diff --git a/packages/app/screens/items/index.tsx b/packages/app/screens/items/index.tsx
index 1055d11ee..b78837fd4 100644
--- a/packages/app/screens/items/index.tsx
+++ b/packages/app/screens/items/index.tsx
@@ -10,7 +10,6 @@ import { useItems } from 'app/hooks/items/useItems';
 import { usePagination } from 'app/hooks/common';
 import DropdownComponent from 'app/components/Dropdown';
 import { BaseModal, RScrollView, RStack, RText } from '@packrat/ui';
-import useResponsive from 'app/hooks/useResponsive';
 
 // import { checkNetworkConnected } from 'app/utils/netInfo';
 
@@ -60,7 +59,6 @@ export default function Items() {
     setSortedItems(sorted);
   }, [data]);
 
-  const { xs, xxxs, xxs } =  useResponsive();
 
   return (
     <RScrollView>
@@ -71,16 +69,14 @@ export default function Items() {
       /> */}
       <RStack style={styles.mainContainer}>
         <RStack
-          style={{
-            width:xxxs?'100vw': xxs? '80vw' : xs ? '80vw' : '60vw',
-            ...styles.container,
-          }}
+          style={
+            styles.container
+          }
         >
           <RStack
-            style={{
-              width: xs ? '45vw' : '40vw',
-              ...styles.sortContainer,
-            }}
+            style={
+              styles.sortContainer
+            }
           >
             <RText style={{ fontWeight: 'bold' }}>Sort By:</RText>
             <DropdownComponent
@@ -88,7 +84,7 @@ export default function Items() {
               data={optionValues}
               onValueChange={handleSort}
               placeholder={value}
-              width={xxxs ?'25vw': xxs ? 120 : xs ? '25vw' : '15vw'}
+              width='60%'
             />
           </RStack>
          <View style={{marginBottom:10}}>
@@ -160,7 +156,6 @@ export default function Items() {
 
 const loadStyles = (theme) => {
   const { currentTheme } = theme;
-  const {xxs,xxxs} =  useResponsive();
 
   return {
     mainContainer: {
@@ -172,7 +167,6 @@ const loadStyles = (theme) => {
     },
     button: {
       color: currentTheme.colors.white,
-      width: xxs ? '20%' : '20rem',
       display: 'flex',
       alignItems: 'center',
       textAlign: 'center',
@@ -181,12 +175,13 @@ const loadStyles = (theme) => {
       backgroundColor: currentTheme.colors.card,
       flexDirection: 'row',
       justifyContent: 'space-between',
+      width:'100%',
       padding: 30,
       borderRadius: 10,
     },
     sortContainer: {
       flexDirection: 'row',
-      gap: xxxs ? 10 : xxs ? 60: 10,
+      justifyContent:'space-between',
       alignItems: 'center',
     },
   };

From 7a16b0167bb34a25e75aa4465cd584f4c2b14216 Mon Sep 17 00:00:00 2001
From: Anmol Verma <anmolverma2810@gmail.com>
Date: Mon, 17 Jun 2024 23:13:40 +0530
Subject: [PATCH 048/257] comment usepackid hook

---
 packages/app/components/card/CustomCard.tsx | 2 +-
 packages/app/components/pack/AddPack.tsx    | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/app/components/card/CustomCard.tsx b/packages/app/components/card/CustomCard.tsx
index 3b417e0c8..370e6a087 100644
--- a/packages/app/components/card/CustomCard.tsx
+++ b/packages/app/components/card/CustomCard.tsx
@@ -82,7 +82,7 @@ export const CustomCard = ({
                   paddingRight: 16,
                   paddingLeft: 16,
                   position: 'relative',
-                  zIndex: '1',
+                  zIndex: 1,
                 } as any
               }
             >
diff --git a/packages/app/components/pack/AddPack.tsx b/packages/app/components/pack/AddPack.tsx
index 06c5f0ce4..433050fb7 100644
--- a/packages/app/components/pack/AddPack.tsx
+++ b/packages/app/components/pack/AddPack.tsx
@@ -23,7 +23,7 @@ export const AddPack = ({ isCreatingTrip = false, onSuccess }) => {
     useTheme();
   const styles = useCustomStyles(loadStyles);
   const router = useRouter();
-  const [_, setPackIdParam] = usePackId();
+  // const [_, setPackIdParam] = usePackId();
 
   const {
     addNewPackAsync,
@@ -51,7 +51,7 @@ export const AddPack = ({ isCreatingTrip = false, onSuccess }) => {
         return;
       }
 
-      setPackIdParam(response.id);
+      // setPackIdParam(response.id);
     } catch {}
   };
 

From 1e8b446c498230d9bafa1dffc4ee68943ca093a6 Mon Sep 17 00:00:00 2001
From: Anmol Verma <anmolverma2810@gmail.com>
Date: Tue, 18 Jun 2024 00:30:35 +0530
Subject: [PATCH 049/257] change select weight menu and top left menu

---
 .../card/PackCardHeader/PackCardHeader.tsx    | 22 ++++++++++++++++--
 packages/app/components/layout/Layout.tsx     |  2 +-
 packages/app/components/pack/PackDetails.tsx  | 22 +-----------------
 .../pack_table/TableHelperComponents.tsx      | 23 ++++++++++++++++---
 4 files changed, 42 insertions(+), 27 deletions(-)

diff --git a/packages/app/components/card/PackCardHeader/PackCardHeader.tsx b/packages/app/components/card/PackCardHeader/PackCardHeader.tsx
index 58813f620..75dd92c9f 100644
--- a/packages/app/components/card/PackCardHeader/PackCardHeader.tsx
+++ b/packages/app/components/card/PackCardHeader/PackCardHeader.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import useTheme from 'app/hooks/useTheme';
 import { CustomCardHeader } from '../CustomCardHeader';
-import { AntDesign } from '@expo/vector-icons';
+import { AntDesign, MaterialIcons } from '@expo/vector-icons';
 import { useAuthUser } from 'app/auth/hooks';
 import {
   ThreeDotsMenu,
@@ -12,6 +12,7 @@ import {
   RStack,
   RInput,
   RText,
+  RContextMenu,
 } from '@packrat/ui';
 import { useDeletePack, useFetchSinglePack } from 'app/hooks/packs';
 import { usePackTitleInput } from './usePackTitleInput';
@@ -94,13 +95,30 @@ export const PackCardHeader = ({ data, title }: PackCardHeaderProps) => {
         }
         actionsComponent={
           user?.id === data.owner_id && (
-            <ThreeDotsMenu onOpenChange={handleActionsOpenChange}>
+            Platform.OS === "web" ? (
+              <ThreeDotsMenu onOpenChange={handleActionsOpenChange}>
               <YStack space="$1">
                 <RButton onPress={handleEdit}>Edit</RButton>
                 <RButton onPress={handleSavePack}>Save</RButton>
                 <RButton onPress={handleDeletePack}>Delete</RButton>
               </YStack>
             </ThreeDotsMenu>
+            ) : (
+              <RContextMenu
+              menuItems={[
+                { label: 'Edit', onSelect:handleEdit },
+                { label: 'Save', onSelect: handleSavePack },
+                {label:'Delete', onSelect:handleDeletePack}
+              ]}
+              menuName={
+                <RIconButton
+          backgroundColor="transparent"
+          icon={<MaterialIcons name="more-horiz" size={18} />}
+          style={{ padding: 0 }}
+        />
+              }
+            />
+            )
           )
         }
       />
diff --git a/packages/app/components/layout/Layout.tsx b/packages/app/components/layout/Layout.tsx
index aecf0f01a..836c2cbca 100644
--- a/packages/app/components/layout/Layout.tsx
+++ b/packages/app/components/layout/Layout.tsx
@@ -10,7 +10,7 @@ const Layout = ({ children }) => {
         display: 'flex',
         justifyContent: 'center',
         alignItems: 'center',
-        margin: '0 auto',
+        marginTop:40,
         backgroundColor: 'transparent',
         width:
           Platform.OS === 'web'
diff --git a/packages/app/components/pack/PackDetails.tsx b/packages/app/components/pack/PackDetails.tsx
index d0637eac4..bcdd4800d 100644
--- a/packages/app/components/pack/PackDetails.tsx
+++ b/packages/app/components/pack/PackDetails.tsx
@@ -68,14 +68,7 @@ export function PackDetails() {
   return (
     <>
       <Layout>
-        <View
-          style={[
-            styles.mainContainer,
-            // Platform.OS == 'web'
-            //   ? { minHeight: '100vh' }
-            //   : { minHeight: Dimensions.get('screen').height },
-          ]}
-        >
+        
           {!isError && (
             <>
               <DetailsComponent
@@ -85,7 +78,6 @@ export function PackDetails() {
                 error={error as any}
                 additionalComps={
                   <>
-                    <View>
                       <FlatList
                         data={Object.entries(SECTION)}
                         contentContainerStyle={{ paddingBottom: 50 }}
@@ -142,14 +134,12 @@ export function PackDetails() {
                           }
                         }}
                       />
-                    </View>
                   </>
                 }
                 link={link}
               />
             </>
           )}
-        </View>
       </Layout>
       <View
         style={{
@@ -176,16 +166,6 @@ const loadStyles = (theme) => {
   const { currentTheme } = theme;
   console.log('currentTheme', currentTheme);
   return {
-    mainContainer: {
-      position: 'relative',
-      backgroundColor: currentTheme.colors.background,
-      flexDirection: 'column',
-      gap: 15,
-      fontSize: 18,
-      width: '100%',
-      flex: 1,
-      maxHeight: '91.2vh',
-    },
     packsContainer: {
       flexDirection: 'column',
       minHeight: '100vh',
diff --git a/packages/app/components/pack_table/TableHelperComponents.tsx b/packages/app/components/pack_table/TableHelperComponents.tsx
index ee1a4d2fe..c13531989 100644
--- a/packages/app/components/pack_table/TableHelperComponents.tsx
+++ b/packages/app/components/pack_table/TableHelperComponents.tsx
@@ -1,12 +1,14 @@
-import { Feather as OriginalFeather } from '@expo/vector-icons';
+import { MaterialIcons, Feather as OriginalFeather } from '@expo/vector-icons';
 import {
   RButton,
   RCheckbox,
   RSkeleton,
   RStack,
   RText as OriginalRText,
+  RContextMenu,
+  RIconButton,
 } from '@packrat/ui';
-import { View } from 'react-native';
+import { Platform, View } from 'react-native';
 import { Row } from 'react-native-table-component';
 import useCustomStyles from 'app/hooks/useCustomStyles';
 import useTheme from 'app/hooks/useTheme';
@@ -110,13 +112,28 @@ const IgnoreItemCheckbox = ({
 
 const WeightUnitDropdown = ({ value, onChange }: WeightUnitDropdownProps) => {
   return (
-    <DropdownComponent
+    Platform.OS === 'web' ? (
+      <DropdownComponent
       value={value}
       accessibilityLabel="Select weight unit"
       placeholder="Select weight unit"
       onValueChange={(itemValue) => onChange(itemValue)}
       data={['kg', 'g', 'lb', 'oz']}
     />
+    ) : (
+      <RContextMenu
+              menuItems={[
+                { label: 'kg', onSelect:() => onChange('kg') },
+                { label: 'g', onSelect: () => onChange('g') },
+                {label:'lb', onSelect:() => onChange('lb')},
+                {label:'oz', onSelect:() => onChange('oz')}
+              ]}
+              menuName={
+                <RButton>Select weight unit</RButton>
+              }
+            />
+    )
+    
   );
 };
 

From 4d65ff2bbde0e5a6d8527e06b21a7a85a6d56a71 Mon Sep 17 00:00:00 2001
From: Anmol Verma <anmolverma2810@gmail.com>
Date: Tue, 18 Jun 2024 00:53:17 +0530
Subject: [PATCH 050/257] remove scrollview

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

diff --git a/packages/app/components/pack/PackDetails.tsx b/packages/app/components/pack/PackDetails.tsx
index d68f7f452..7facca5e5 100644
--- a/packages/app/components/pack/PackDetails.tsx
+++ b/packages/app/components/pack/PackDetails.tsx
@@ -66,7 +66,7 @@ export function PackDetails() {
   if (isLoading) return <RText>Loading...</RText>;
 
   return (
-    <ScrollView>
+    <>
       <Layout>
         
           {!isError && (
@@ -160,7 +160,7 @@ export function PackDetails() {
           trigger="Open Chat"
         />
       </View>
-    </ScrollView>
+    </>
   );
 }
 

From 5045ba19f356593a1f298284864ffcedbc38e323 Mon Sep 17 00:00:00 2001
From: Anmol Verma <anmolverma2810@gmail.com>
Date: Tue, 18 Jun 2024 01:20:17 +0530
Subject: [PATCH 051/257] add navigation to profile from settings page

---
 packages/app/screens/user/Settings.tsx | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/packages/app/screens/user/Settings.tsx b/packages/app/screens/user/Settings.tsx
index fe997d614..b13f1171e 100644
--- a/packages/app/screens/user/Settings.tsx
+++ b/packages/app/screens/user/Settings.tsx
@@ -23,6 +23,8 @@ import { useRouter } from 'app/hooks/router';
 import useTheme from 'app/hooks/useTheme';
 import { userSettingsSchema, passwordChangeSchema } from '@packrat/validations';
 import { Platform } from 'react-native';
+import { useNavigate } from 'app/hooks/navigation';
+
 
 const weatherOptions = ['celsius', 'fahrenheit'].map((key) => ({
   label: key,
@@ -34,12 +36,16 @@ const weightOptions = ['lb', 'oz', 'kg', 'g'].map((key) => ({
   value: key,
 }));
 
+
+
 export default function Settings() {
   const { user, handleEditUser, handlePasswordsChange, handleUpdatePassword } =
     useProfileSettings();
 
   const { isDark, currentTheme } = useTheme();
   const router = useRouter();
+  const navigate = useNavigate();
+
 
   return user ? (
     <RScrollView style={{ backgroundColor: isDark ? '#1A1A1D' : 'white' }}>
@@ -59,7 +65,7 @@ export default function Settings() {
             flexDirection: 'row',
           }}
         >
-          {Platform.OS === 'web' && (
+       
             <RIconButton
               backgroundColor="transparent"
               icon={
@@ -73,11 +79,11 @@ export default function Settings() {
                 if (Platform.OS === 'web') {
                   window?.history?.back();
                 } else {
-                  router.back();
+                  navigate('/profile');
                 }
               }}
             />
-          )}
+        
           <RH2>Profile</RH2>
         </RStack>
         <Form

From 1e4bc73578aea48e0eb76cfcea2dc3e7fe433e36 Mon Sep 17 00:00:00 2001
From: Andrew Bierman <94939237+andrew-bierman@users.noreply.github.com>
Date: Mon, 17 Jun 2024 21:59:27 -0400
Subject: [PATCH 052/257] =?UTF-8?q?=E2=9E=95=20regen=20lock?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 yarn.lock | 73 ++++++++++++++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 70 insertions(+), 3 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 2de354121..292f60356 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5504,11 +5504,13 @@ __metadata:
     expo-image-picker: "npm:~14.7.1"
     foxact: "npm:^0.2.33"
     jotai: "npm:^2.6.4"
+    moment-range: "npm:^4.0.2"
     react: "npm:18.2.0"
     react-dom: "npm:18.2.0"
     react-dropzone: "npm:^14.2.3"
     react-hook-form: "npm:^7.51.0"
     react-native: "npm:0.73.6"
+    react-native-calendars: "npm:^1.1305.0"
     react-native-svg: "npm:14.1.0"
     react-native-web: "npm:^0.19.10"
     swr: "npm:^2.2.5"
@@ -17792,7 +17794,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"es6-symbol@npm:^3.1.1, es6-symbol@npm:^3.1.3":
+"es6-symbol@npm:^3.1.0, es6-symbol@npm:^3.1.1, es6-symbol@npm:^3.1.3":
   version: 3.1.4
   resolution: "es6-symbol@npm:3.1.4"
   dependencies:
@@ -22043,7 +22045,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"hoist-non-react-statics@npm:^3.3.0, hoist-non-react-statics@npm:^3.3.2":
+"hoist-non-react-statics@npm:^3.3.0, hoist-non-react-statics@npm:^3.3.1, hoist-non-react-statics@npm:^3.3.2":
   version: 3.3.2
   resolution: "hoist-non-react-statics@npm:3.3.2"
   dependencies:
@@ -25847,7 +25849,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"memoize-one@npm:^5.0.0":
+"memoize-one@npm:^5.0.0, memoize-one@npm:^5.2.1":
   version: 5.2.1
   resolution: "memoize-one@npm:5.2.1"
   checksum: 10/b7141dc148b5c6fdd51e77ecf0421fd2581681eb8756e0b3dfbd4fe765b5e2b5a6bc90214bb6f19a96b6aed44de17eda3407142a7be9e24ccd0774bbd9874d1b
@@ -26771,6 +26773,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"moment-range@npm:^4.0.2":
+  version: 4.0.2
+  resolution: "moment-range@npm:4.0.2"
+  dependencies:
+    es6-symbol: "npm:^3.1.0"
+  peerDependencies:
+    moment: ">= 2"
+  checksum: 10/b653f762ef97ef7e2861da3222ff9d488c80099b306830436e083c2fb22de6bb31eb68853bd6d8a7b0e64a9186624270a817c8b1fbd9aca27d8f7bab20e7b562
+  languageName: node
+  linkType: hard
+
+"moment@npm:^2.29.4":
+  version: 2.30.1
+  resolution: "moment@npm:2.30.1"
+  checksum: 10/ae42d876d4ec831ef66110bdc302c0657c664991e45cf2afffc4b0f6cd6d251dde11375c982a5c0564ccc0fa593fc564576ddceb8c8845e87c15f58aa6baca69
+  languageName: node
+  linkType: hard
+
 "mongodb-connection-string-url@npm:^2.6.0":
   version: 2.6.0
   resolution: "mongodb-connection-string-url@npm:2.6.0"
@@ -30415,6 +30435,25 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-native-calendars@npm:^1.1305.0":
+  version: 1.1305.0
+  resolution: "react-native-calendars@npm:1.1305.0"
+  dependencies:
+    hoist-non-react-statics: "npm:^3.3.1"
+    lodash: "npm:^4.17.15"
+    memoize-one: "npm:^5.2.1"
+    moment: "npm:^2.29.4"
+    prop-types: "npm:^15.5.10"
+    react-native-swipe-gestures: "npm:^1.0.5"
+    recyclerlistview: "npm:^4.0.0"
+    xdate: "npm:^0.8.0"
+  dependenciesMeta:
+    moment:
+      optional: true
+  checksum: 10/3fd911ce33bb9f57335781b0eb9211ea331abf821ed178092e3e5c8788512e51458d7e064e01f58733171257da5b569e726418c88d6b56c464b131488ef0fd8b
+  languageName: node
+  linkType: hard
+
 "react-native-dotenv@npm:^3.4.8":
   version: 3.4.11
   resolution: "react-native-dotenv@npm:3.4.11"
@@ -30671,6 +30710,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-native-swipe-gestures@npm:^1.0.5":
+  version: 1.0.5
+  resolution: "react-native-swipe-gestures@npm:1.0.5"
+  checksum: 10/d637bc40baa50fa0ce3b6cf2b494efeceaea03cc3875cb7cf7d76922914a21d5e6b098d4a084fb291ce61bfbb0a241c03cff24b15bebf0cfae1c146f4ad10d92
+  languageName: node
+  linkType: hard
+
 "react-native-table-component@https://github.com/slice312/react-native-table-component.git":
   version: 1.2.1
   resolution: "react-native-table-component@https://github.com/slice312/react-native-table-component.git#commit=e761c87ff56a463ad0452ef2a9c7ede315eef123"
@@ -31083,6 +31129,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"recyclerlistview@npm:^4.0.0":
+  version: 4.2.1
+  resolution: "recyclerlistview@npm:4.2.1"
+  dependencies:
+    lodash.debounce: "npm:4.0.8"
+    prop-types: "npm:15.8.1"
+    ts-object-utils: "npm:0.0.5"
+  peerDependencies:
+    react: ">= 15.2.1"
+    react-native: ">= 0.30.0"
+  checksum: 10/9c5080bfeb59a5b3127bf7b66338278b7fbc40a56aa1644add7e3de280a1f24458c49fdb08299058041f3afe49a085d06cfdfc997852345c4e9090ef48d27da6
+  languageName: node
+  linkType: hard
+
 "redeyed@npm:~2.1.0":
   version: 2.1.1
   resolution: "redeyed@npm:2.1.1"
@@ -36611,6 +36671,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"xdate@npm:^0.8.0":
+  version: 0.8.2
+  resolution: "xdate@npm:0.8.2"
+  checksum: 10/a53eb459151de366e1473af2f7da0c019df9b39157c28239eb9669a87f05e8ec7f3a118c9a8e72c35195e41599b0b197f7a5a8467d26e98e3f50ca9d6be38f08
+  languageName: node
+  linkType: hard
+
 "xdg-app-paths@npm:5.1.0":
   version: 5.1.0
   resolution: "xdg-app-paths@npm:5.1.0"

From 6141f1a8f979c9957358c25588cc7b9b60aaece3 Mon Sep 17 00:00:00 2001
From: Andrew Bierman <94939237+andrew-bierman@users.noreply.github.com>
Date: Mon, 17 Jun 2024 22:05:29 -0400
Subject: [PATCH 053/257] Update Layout.tsx

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

diff --git a/packages/app/components/layout/Layout.tsx b/packages/app/components/layout/Layout.tsx
index 6a6cc24be..befbd73fc 100644
--- a/packages/app/components/layout/Layout.tsx
+++ b/packages/app/components/layout/Layout.tsx
@@ -8,6 +8,7 @@ const Layout = ({ children }) => {
         display: 'flex',
         justifyContent: 'center',
         alignItems: 'center',
+        marginTop: 40,
         backgroundColor: 'transparent',
         width:'100%',
         alignSelf: 'center',

From a4c01c582ea925420e14253bc9d9343d8351beae Mon Sep 17 00:00:00 2001
From: Andrew Bierman <94939237+andrew-bierman@users.noreply.github.com>
Date: Mon, 17 Jun 2024 22:37:33 -0400
Subject: [PATCH 054/257] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20enhance=20error=20?=
 =?UTF-8?q?boundary=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/trip/TripCards/TripMapCard.tsx |  7 ++--
 packages/app/package.json                     |  1 +
 packages/ui/package.json                      |  1 +
 packages/ui/src/ErrorBoundary/index.ts        | 35 -------------------
 packages/ui/src/ErrorBoundary/index.tsx       | 30 ++++++++++++++++
 yarn.lock                                     | 22 ++++++++++++
 6 files changed, 59 insertions(+), 37 deletions(-)
 delete mode 100644 packages/ui/src/ErrorBoundary/index.ts
 create mode 100644 packages/ui/src/ErrorBoundary/index.tsx

diff --git a/packages/app/components/trip/TripCards/TripMapCard.tsx b/packages/app/components/trip/TripCards/TripMapCard.tsx
index b7d586e74..aebc2588e 100644
--- a/packages/app/components/trip/TripCards/TripMapCard.tsx
+++ b/packages/app/components/trip/TripCards/TripMapCard.tsx
@@ -1,8 +1,9 @@
-import { RStack, RText } from '@packrat/ui';
+import { ErrorBoundary, RStack, RText } from '@packrat/ui';
 import MapContainer from 'app/components/map/MapContainer';
 import useTheme from 'app/hooks/useTheme';
 import { TripCardBase } from './TripCardBase';
 import { FontAwesome5 } from '@expo/vector-icons';
+import React from 'react';
 
 type TripMapCardProps = {
   isLoading?: boolean;
@@ -29,7 +30,9 @@ export const TripMapCard = ({ isLoading, shape }: TripMapCardProps) => {
           <RText>Loading....</RText>
         </RStack>
       ) : (
-        <MapContainer shape={shape} />
+        <ErrorBoundary>
+          <MapContainer shape={shape} />
+        </ErrorBoundary>
       )}
     </TripCardBase>
   );
diff --git a/packages/app/package.json b/packages/app/package.json
index 6e561edd6..478c278ba 100644
--- a/packages/app/package.json
+++ b/packages/app/package.json
@@ -107,6 +107,7 @@
     "osmtogeojson": "^3.0.0-beta.5",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-error-boundary": "^4.0.13",
     "react-hook-form": "^7.51.0",
     "react-native": "0.73.6",
     "react-native-action-button": "^2.8.5",
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 4f6c4f1f0..15e06a8a5 100755
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -52,6 +52,7 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-dropzone": "^14.2.3",
+    "react-error-boundary": "^4.0.13",
     "react-hook-form": "^7.51.0",
     "react-native": "0.73.6",
     "react-native-svg": "14.1.0",
diff --git a/packages/ui/src/ErrorBoundary/index.ts b/packages/ui/src/ErrorBoundary/index.ts
deleted file mode 100644
index 7c380ae76..000000000
--- a/packages/ui/src/ErrorBoundary/index.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import { Component, ErrorInfo, ReactNode } from 'react';
-import { Text } from 'tamagui';
-
-interface Props {
-  children?: ReactNode;
-}
-
-interface State {
-  hasError: boolean;
-}
-
-class ErrorBoundary extends Component<Props, State> {
-  public state: State = {
-    hasError: false,
-  };
-
-  public static getDerivedStateFromError(_: Error): State {
-    // Update state so the next render will show the fallback UI.
-    return { hasError: true };
-  }
-
-  public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
-    console.error('Uncaught error:', error, errorInfo);
-  }
-
-  public render() {
-    if (this.state.hasError) {
-      return null;
-    }
-
-    return this.props.children;
-  }
-}
-
-export { ErrorBoundary };
diff --git a/packages/ui/src/ErrorBoundary/index.tsx b/packages/ui/src/ErrorBoundary/index.tsx
new file mode 100644
index 000000000..dbaaa423b
--- /dev/null
+++ b/packages/ui/src/ErrorBoundary/index.tsx
@@ -0,0 +1,30 @@
+import React, { ReactNode } from 'react';
+import { ErrorBoundary as ReactErrorBoundary } from 'react-error-boundary';
+import { Text } from 'tamagui';
+
+interface Props {
+  children?: ReactNode;
+  FallbackComponent?: React.ComponentType<{ error: Error, resetErrorBoundary: () => void }>;
+  onError?: (error: Error, errorInfo: React.ErrorInfo) => void;
+}
+
+const DefaultFallbackComponent = ({ error }: { error: Error }) => (
+  <Text>Something went wrong.</Text>
+);
+
+const ErrorBoundary: React.FC<Props> = ({
+  children,
+  FallbackComponent = DefaultFallbackComponent,
+  onError = (error, errorInfo) => console.error('Uncaught error:', error, errorInfo),
+}) => {
+  return (
+    <ReactErrorBoundary
+      FallbackComponent={FallbackComponent}
+      onError={onError}
+    >
+      {children}
+    </ReactErrorBoundary>
+  );
+};
+
+export { ErrorBoundary };
diff --git a/yarn.lock b/yarn.lock
index d6c90ba32..ad36bcfd7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1774,6 +1774,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/runtime@npm:^7.12.5":
+  version: 7.24.7
+  resolution: "@babel/runtime@npm:7.24.7"
+  dependencies:
+    regenerator-runtime: "npm:^0.14.0"
+  checksum: 10/7b77f566165dee62db3db0296e71d08cafda3f34e1b0dcefcd68427272e17c1704f4e4369bff76651b07b6e49d3ea5a0ce344818af9116e9292e4381e0918c76
+  languageName: node
+  linkType: hard
+
 "@babel/template@npm:^7.0.0, @babel/template@npm:^7.22.15, @babel/template@npm:^7.24.0, @babel/template@npm:^7.3.3":
   version: 7.24.0
   resolution: "@babel/template@npm:7.24.0"
@@ -5516,6 +5525,7 @@ __metadata:
     react: "npm:18.2.0"
     react-dom: "npm:18.2.0"
     react-dropzone: "npm:^14.2.3"
+    react-error-boundary: "npm:^4.0.13"
     react-hook-form: "npm:^7.51.0"
     react-native: "npm:0.73.6"
     react-native-svg: "npm:14.1.0"
@@ -12749,6 +12759,7 @@ __metadata:
     prettier: "npm:^3.2.5"
     react: "npm:18.2.0"
     react-dom: "npm:18.2.0"
+    react-error-boundary: "npm:^4.0.13"
     react-hook-form: "npm:^7.51.0"
     react-native: "npm:0.73.6"
     react-native-action-button: "npm:^2.8.5"
@@ -30430,6 +30441,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-error-boundary@npm:^4.0.13":
+  version: 4.0.13
+  resolution: "react-error-boundary@npm:4.0.13"
+  dependencies:
+    "@babel/runtime": "npm:^7.12.5"
+  peerDependencies:
+    react: ">=16.13.1"
+  checksum: 10/28fdf498a58621e21d93978c61719c52455bc00b778080259c5830fe003736153469ebc84f243d7989567b1196e25648c7592f7c8e47de47fcd7d12b875879b9
+  languageName: node
+  linkType: hard
+
 "react-fast-compare@npm:^3.2.2":
   version: 3.2.2
   resolution: "react-fast-compare@npm:3.2.2"

From aafe502db86bc2e261bb4097535e79fa26ae74a5 Mon Sep 17 00:00:00 2001
From: Andrew Bierman <94939237+andrew-bierman@users.noreply.github.com>
Date: Mon, 17 Jun 2024 23:12:50 -0400
Subject: [PATCH 055/257] =?UTF-8?q?=F0=9F=90=9B=20debugging=20native=20map?=
 =?UTF-8?q?=20crash=20on=20certain=20geojson=20structures=20-=20WIP?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../app/components/map/NativeMap.native.tsx   |  99 ++++----
 packages/app/hooks/map/useNativeMap.ts        | 220 ++++++++++--------
 packages/app/utils/mapFunctions.ts            |  57 +++++
 3 files changed, 226 insertions(+), 150 deletions(-)

diff --git a/packages/app/components/map/NativeMap.native.tsx b/packages/app/components/map/NativeMap.native.tsx
index aa242f698..0f4f1c827 100644
--- a/packages/app/components/map/NativeMap.native.tsx
+++ b/packages/app/components/map/NativeMap.native.tsx
@@ -19,21 +19,23 @@ import {
 import { MAPBOX_ACCESS_TOKEN } from '@packrat/config';
 
 import { theme } from '../../theme';
-import MapButtonsOverlay from './MapButtonsOverlay';
 import {
-  isShapeDownloadable,
-  isPoint,
   isLineString,
+  isPoint,
   isPolygonOrMultiPolygon,
+  isShapeDownloadable,
   multiPolygonBounds,
+  validateCoordinates,
+  validateShape,
 } from '../../utils/mapFunctions';
+import MapButtonsOverlay from './MapButtonsOverlay';
 
+import { gpx as toGeoJSON } from '@tmcw/togeojson';
+import { useNativeMap } from 'app/hooks/map/useNativeMap';
+import useCustomStyles from 'app/hooks/useCustomStyles';
 import * as DocumentPicker from 'expo-document-picker';
 import * as FileSystem from 'expo-file-system';
 import { DOMParser } from 'xmldom';
-import { gpx as toGeoJSON } from '@tmcw/togeojson';
-import useCustomStyles from 'app/hooks/useCustomStyles';
-import { useNativeMap } from 'app/hooks/map/useNativeMap';
 
 const RButton: any = OriginalRButton;
 const RInput: any = OriginalRInput;
@@ -41,11 +43,6 @@ const RInput: any = OriginalRInput;
 Mapbox.setWellKnownTileServer(Platform.OS === 'android' ? 'Mapbox' : 'mapbox');
 Mapbox.setAccessToken(MAPBOX_ACCESS_TOKEN);
 
-// console.log("MAPBOX_ACCESS_TOKEN", MAPBOX_ACCESS_TOKEN, typeof MAPBOX_ACCESS_TOKEN)
-// consts
-
-// MapView.setConnected(true);
-
 function NativeMap({ shape: shapeProp }) {
   const styles = useCustomStyles(loadStyles);
   const {
@@ -74,6 +71,23 @@ function NativeMap({ shape: shapeProp }) {
     previewMapStyle,
   } = useNativeMap({ shape: shapeProp });
 
+  const handleShapeUpload = async () => {
+    try {
+      const result: any = await DocumentPicker.getDocumentAsync({
+        type: '*/*',
+      });
+      if (result.type === 'success') {
+        const gpxString = await FileSystem.readAsStringAsync(result.uri);
+        const parsedGpx = new DOMParser().parseFromString(gpxString);
+        const geojson = toGeoJSON(parsedGpx);
+        validateShape(geojson);
+        setShape(geojson);
+      }
+    } catch (error) {
+      Alert.alert('Error', error.message);
+    }
+  };
+
   function CircleCapComp() {
     return (
       <View
@@ -96,7 +110,6 @@ function NativeMap({ shape: shapeProp }) {
       android: 'geo:0,0?q=',
     });
     const latLng = latLong.join(',');
-    // console.log('shape?.features[0]?.properties?.name',shape?.features[0]?.properties?.name)
     const label = shape?.features[0]?.properties?.name;
     const url =
       Platform.select({
@@ -107,13 +120,35 @@ function NativeMap({ shape: shapeProp }) {
       Linking.openURL(url);
     }
   };
+
+  let validCenterCoordinate = [0, 0];
+  try {
+    if (isPoint(shape)) {
+      validateCoordinates(pointLatLong);
+      validCenterCoordinate = pointLatLong;
+    } else if (isPolygonOrMultiPolygon(shape)) {
+      const bounds = multiPolygonBounds(shape.features[0]);
+      bounds.forEach(validateCoordinates);
+      validCenterCoordinate = bounds;
+    } else if (isLineString(shape)) {
+      const firstCoord = shape.features[0].geometry.coordinates[0];
+      validateCoordinates(firstCoord);
+      validCenterCoordinate = firstCoord;
+    } else {
+      validateCoordinates(trailCenterPoint);
+      validCenterCoordinate = trailCenterPoint;
+    }
+  } catch (error) {
+    Alert.alert('Invalid Shape Coordinates', error.message);
+    validCenterCoordinate = [0, 0];
+  }
+
   const element = (
     <View style={mapFullscreen ? (fullMapDimension as any) : previewMapStyle}>
       <Mapbox.MapView
         ref={mapViewRef}
         style={{ flex: 1 }}
         styleURL={mapStyle}
-        // onDidFinishRenderingMapFully={onMapLoaded}
         compassEnabled={false}
         logoEnabled={false}
         scrollEnabled={mapFullscreen}
@@ -122,17 +157,10 @@ function NativeMap({ shape: shapeProp }) {
         <Mapbox.Camera
           ref={camera}
           zoomLevel={zoomLevel ? zoomLevel - 0.8 : 10}
-          centerCoordinate={
-            isPoint(shape)
-              ? pointLatLong
-              : isPolygonOrMultiPolygon(shape)
-                ? multiPolygonBounds(shape.features[0])
-                : trailCenterPoint
-          }
+          centerCoordinate={validCenterCoordinate}
           animationMode={'flyTo'}
           animationDuration={2000}
         />
-        {/* // user location */}
         <Mapbox.PointAnnotation
           id={'1212'}
           coordinate={[location.longitude, location.latitude]}
@@ -160,7 +188,6 @@ function NativeMap({ shape: shapeProp }) {
               openMaps(pointLatLong);
             }}
           >
-            {/* <CircleCapComp /> */}
             <View>
               <MaterialCommunityIcons
                 name="map-marker"
@@ -178,11 +205,10 @@ function NativeMap({ shape: shapeProp }) {
               cluster
               clusterRadius={80}
               clusterMaxZoomLevel={14}
-              // style={{ zIndex: 1 }}
             >
               <Mapbox.LineLayer id="layer1" style={styles.lineLayer} />
             </Mapbox.ShapeSource>
-            {/* // top location */}
+            {/* top location */}
             {shape?.features[0]?.geometry?.coordinates?.length > 0 && (
               <Mapbox.PointAnnotation
                 id={'1212'}
@@ -243,21 +269,7 @@ function NativeMap({ shape: shapeProp }) {
         onDownload={() => {
           setShowMapNameInputDialog(true);
         }}
-        handleGpxUpload={async () => {
-          try {
-            const result: any = await DocumentPicker.getDocumentAsync({
-              type: '*/*',
-            });
-            if (result.type === 'success') {
-              const gpxString = await FileSystem.readAsStringAsync(result.uri);
-              const parsedGpx = new DOMParser().parseFromString(gpxString);
-              const geojson = toGeoJSON(parsedGpx);
-              setShape(geojson);
-            }
-          } catch (err) {
-            Alert.alert('An error occured');
-          }
-        }}
+        handleGpxUpload={handleShapeUpload}
         progress={progress}
       />
     </View>
@@ -269,12 +281,7 @@ function NativeMap({ shape: shapeProp }) {
         element
       ) : (
         <>
-          <Modal
-            visible={true}
-            // style={{ backgroundColor: "#000", height: "100%" }}
-          >
-            {element}
-          </Modal>
+          <Modal visible={true}>{element}</Modal>
           <AlertDialog
             isOpen={showMapNameInputDialog}
             onClose={() => {
@@ -326,7 +333,6 @@ function NativeMap({ shape: shapeProp }) {
                       const downloadOptions = {
                         name: mapName,
                         styleURL: 'mapbox://styles/mapbox/outdoors-v11',
-                        // bounds: await mapViewRef.current.getVisibleBounds(),
                         bounds,
                         minZoom: 0,
                         maxZoom: 8,
@@ -360,7 +366,6 @@ const loadStyles = () => ({
     backgroundColor: '#F5FCFF',
   },
   container: {
-    // height: 500,
     width: '100%',
     backgroundColor: 'white',
     marginBottom: 20,
diff --git a/packages/app/hooks/map/useNativeMap.ts b/packages/app/hooks/map/useNativeMap.ts
index 0318f388b..e1652b37e 100644
--- a/packages/app/hooks/map/useNativeMap.ts
+++ b/packages/app/hooks/map/useNativeMap.ts
@@ -1,38 +1,89 @@
-import React, { useEffect, useState, useRef } from 'react';
-import { Alert } from 'react-native';
 import Geolocation from '@react-native-community/geolocation';
 import { offlineManager } from '@rnmapbox/maps';
-import { Dimensions } from 'react-native';
-
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { Alert, Dimensions } from 'react-native';
 import {
   calculateZoomLevel,
   findTrailCenter,
   getShapeSourceBounds,
   mapboxStyles,
+  validateShape,
 } from '../../utils/mapFunctions';
 
-export const useNativeMap = ({ shape: shapeProp }) => {
-  const camera = useRef(null);
-  const mapViewRef = useRef(null);
-  const cancelRef = React.useRef(null);
-  const [location, setLocation] = useState({
+interface Location {
+  longitude: number;
+  latitude: number;
+}
+
+interface Shape {
+  features: Array<{ properties: { name: string } }>;
+}
+
+interface UseNativeMapProps {
+  shape: Shape;
+}
+
+const useLocation = () => {
+  const [location, setLocation] = useState<Location>({
     longitude: 0.0,
     latitude: 0.0,
   });
-  // const [getLocationLoading, setGetLocationLoading] = useState(false);
-  // const [correctLocation, setCorrectLocation] = useState(false);
-  const [mapFullscreen, setMapFullscreen] = useState(false);
+
+  const getPosition = useCallback((onSuccess: (location: Location) => void) => {
+    Geolocation.getCurrentPosition(
+      (data) => {
+        const newLocation = {
+          longitude: Number(data.coords.longitude),
+          latitude: Number(data.coords.latitude),
+        };
+        setLocation(newLocation);
+        onSuccess?.(newLocation);
+      },
+      (error) => {
+        Alert.alert('Something went wrong with location', error.message);
+      },
+      { enableHighAccuracy: false, timeout: 20000, maximumAge: 1000 },
+    );
+  }, []);
+
+  return { location, getPosition };
+};
+
+const useMapStyles = () => {
+  const [mapStyle, setMapStyle] = useState(mapboxStyles[0]?.style ?? '');
+
+  return { mapStyle, setMapStyle };
+};
+
+const useDownloadProgress = () => {
   const [progress, setProgress] = useState(0);
   const [downloading, setDownloading] = useState(false);
-  const [mapStyle, setMapStyle] = useState(mapboxStyles[0]?.style ?? '');
 
-  const [showMapNameInputDialog, setShowMapNameInputDialog] = useState(false);
-  const [shape, setShape] = useState(shapeProp);
-  const [mapName, setMapName] = useState(shape?.features[0]?.properties?.name);
-  const [trailCenterPoint, setTrailCenterPoint] = useState(
-    findTrailCenter(shape),
-  );
+  const onDownloadProgress = (offlineRegion: any, offlineRegionStatus: any) => {
+    setProgress(offlineRegionStatus.percentage);
+    setDownloading(true);
+    if (offlineRegionStatus.percentage === 100) {
+      Alert.alert('Map download successfully!');
+      setDownloading(false);
+    }
+  };
+
+  const errorListener = (offlineRegion: any, error: any) => {
+    Alert.alert(error.message);
+  };
+
+  const onDownload = async (optionsForDownload: any) => {
+    offlineManager
+      .createPack(optionsForDownload, onDownloadProgress, errorListener)
+      .catch((error: any) => {
+        Alert.alert(error.message);
+      });
+  };
 
+  return { progress, downloading, onDownload };
+};
+
+const useMapDimensions = () => {
   const dw = Dimensions.get('screen').width;
   const fullMapDimension = { width: dw || '100%', height: '100%' };
   const previewMapStyle = {
@@ -43,105 +94,68 @@ export const useNativeMap = ({ shape: shapeProp }) => {
     alignSelf: 'center',
   };
 
-  // consts
-  let bounds = getShapeSourceBounds(shape);
-  // console.log("🚀 ~ file: NativeMap.native.js:99 ~ NativeMap ~ bounds:", bounds)
-  if (bounds[0] && bounds[1]) {
-    bounds = [bounds[0], bounds[1]];
+  return { fullMapDimension, previewMapStyle };
+};
+
+export const useNativeMap = ({ shape: shapeProp }: UseNativeMapProps) => {
+  const camera = useRef(null);
+  const mapViewRef = useRef(null);
+  const cancelRef = useRef(null);
+
+  const { location, getPosition } = useLocation();
+  const { mapStyle, setMapStyle } = useMapStyles();
+  const { progress, downloading, onDownload } = useDownloadProgress();
+  const { fullMapDimension, previewMapStyle } = useMapDimensions();
+
+  const [mapFullscreen, setMapFullscreen] = useState(false);
+  const [showMapNameInputDialog, setShowMapNameInputDialog] = useState(false);
+  const [shape, setShape] = useState(shapeProp);
+  const [mapName, setMapName] = useState(shape?.features[0]?.properties?.name);
+  const [trailCenterPoint, setTrailCenterPoint] = useState(
+    findTrailCenter(shape),
+  );
+
+  let bounds;
+  try {
+    validateShape(shape);
+    bounds = getShapeSourceBounds(shape);
+    if (bounds[0] && bounds[1]) {
+      bounds = [bounds[0], bounds[1]];
+    }
+  } catch (error) {
+    Alert.alert('Invalid Shape', error.message);
+    bounds = [
+      [0, 0],
+      [0, 0],
+    ]; // Fallback bounds
   }
 
-  const zoomLevel = calculateZoomLevel(bounds, { width: dw, height: 360 });
-  //
-  //
+  const zoomLevel = calculateZoomLevel(bounds, {
+    width: Dimensions.get('screen').width,
+    height: 360,
+  });
 
-  // effects
   useEffect(() => {
-    // update the shape state when a new shapeProp gets passed
     if (shapeProp !== shape) setShape(shapeProp);
   }, [shapeProp]);
 
   useEffect(() => {
-    // update mapName & calculate new trailCenter whenever shape changes e.g newly passed shapeProp or new shape from gpx upload
-    setMapName(shape?.features[0]?.properties?.name);
-    setTrailCenterPoint(findTrailCenter(shape));
+    try {
+      validateShape(shape);
+      setMapName(shape?.features[0]?.properties?.name);
+      setTrailCenterPoint(findTrailCenter(shape));
+    } catch (error) {
+      Alert.alert('Invalid Shape', error.message);
+    }
   }, [shape]);
 
-  /**
-   * Retrieves the current position using Geolocation API and updates the location state.
-   *
-   * @param {function} onSucccess - a callback function to be executed on success
-   * @return {undefined} This function does not return anything
-   */
-  const getPosition = (onSucccess) => {
-    Geolocation.getCurrentPosition(
-      (data) => {
-        setLocation({
-          ...location,
-          longitude: Number(data.coords.longitude),
-          latitude: Number(data.coords.latitude),
-        });
-        // setCorrectLocation(true);
-        onSucccess?.(location);
-      },
-      (error) => {
-        // setCorrectLocation(false);
-        Alert.alert('Something went wrong with location', error.message);
-      },
-      { enableHighAccuracy: false, timeout: 20000, maximumAge: 1000 },
-    );
-  };
-
-  /**
-   * Handles the press event on the map.
-   *
-   * @param {Event} event - The press event object.
-   */
-  function onMapPress(event) {
+  const onMapPress = (event: any) => {
     // if (trailCenterPoint) {
     //   mapViewFullScreenRef?.current.setCamera({
     //     centerCoordinate: trailCenterPoint,
     //   });
     // }
-  }
-
-  /**
-   * Handles the download progress of an offline region.
-   *
-   * @param {Object} offlineRegion - The offline region being downloaded.
-   * @param {Object} offlineRegionStatus - The status of the offline region download.
-   * @returns {void}
-   */
-  function onDownloadProgress(offlineRegion, offlineRegionStatus) {
-    setProgress(offlineRegionStatus.percentage);
-    setDownloading(true);
-    if (offlineRegionStatus.percentage == 100) {
-      Alert.alert('Map download successfully!');
-      setDownloading(false);
-    }
-  }
-  /**
-   * A function that serves as an error listener for the offline region.
-   *
-   * @param {Object} offlineRegion - The offline region object.
-   * @param {Object} error - The error object.
-   */
-  function errorListener(offlineRegion, error) {
-    Alert.alert(error.message);
-  }
-  /**
-   * Downloads a file using the provided options.
-   *
-   * @param {object} optionsForDownload - The options for the download.
-   * @return {Promise} A promise that resolves when the download is complete.
-   */
-  async function onDownload(optionsForDownload) {
-    // start download
-    offlineManager
-      .createPack(optionsForDownload, onDownloadProgress, errorListener)
-      .catch((error) => {
-        Alert.alert(error.message);
-      });
-  }
+  };
 
   return {
     camera,
diff --git a/packages/app/utils/mapFunctions.ts b/packages/app/utils/mapFunctions.ts
index 4a0d20b76..f16c49f04 100644
--- a/packages/app/utils/mapFunctions.ts
+++ b/packages/app/utils/mapFunctions.ts
@@ -371,6 +371,60 @@ const multiPolygonBounds = (multipolygonData) => {
   return [centerLng, centerLat];
 };
 
+const validateCoordinates = (coordinates: any) => {
+  if (!Array.isArray(coordinates)) {
+    throw new Error('Invalid coordinates: Must be an array.');
+  }
+  coordinates.forEach((coord) => {
+    if (!Array.isArray(coord)) {
+      if (typeof coord !== 'number') {
+        throw new Error(
+          'Invalid coordinates: Each coordinate must be a number.',
+        );
+      }
+    } else {
+      validateCoordinates(coord);
+    }
+  });
+};
+
+const validateGeoJSON = (geojson: any) => {
+  if (!geojson || typeof geojson !== 'object') {
+    throw new Error('Invalid GeoJSON: Data is not an object.');
+  }
+  if (!geojson.type) {
+    throw new Error('Invalid GeoJSON: Missing "type" property.');
+  }
+  if (!geojson.features || !Array.isArray(geojson.features)) {
+    throw new Error('Invalid GeoJSON: Missing or invalid "features" property.');
+  }
+
+  geojson.features.forEach((feature) => {
+    if (feature.geometry && feature.geometry.coordinates) {
+      if (feature.geometry.type === 'Point') {
+        validateCoordinates(feature.geometry.coordinates);
+      } else if (
+        feature.geometry.type === 'LineString' ||
+        feature.geometry.type === 'Polygon'
+      ) {
+        feature.geometry.coordinates.forEach(validateCoordinates);
+      } else if (feature.geometry.type === 'MultiPolygon') {
+        feature.geometry.coordinates.forEach((polygon) => {
+          polygon.forEach(validateCoordinates);
+        });
+      }
+    }
+  });
+};
+
+const validateShape = (shape: any) => {
+  try {
+    validateGeoJSON(shape);
+  } catch (error) {
+    throw new Error(`Invalid shape: ${error.message}`);
+  }
+};
+
 export {
   defaultShape,
   getShapeSourceBounds,
@@ -388,4 +442,7 @@ export {
   isLineString,
   isPolygonOrMultiPolygon,
   multiPolygonBounds,
+  validateGeoJSON,
+  validateShape,
+  validateCoordinates,
 };

From 5859f083e84c84fc3f15df520a46b8e717c0ca26 Mon Sep 17 00:00:00 2001
From: Anmol Verma <anmolverma2810@gmail.com>
Date: Tue, 18 Jun 2024 16:37:36 +0530
Subject: [PATCH 056/257] changes in styling

---
 packages/app/components/destination/index.tsx |  1 +
 packages/app/components/feed/FeedCard.tsx     | 12 +-----------
 packages/app/components/layout/Layout.tsx     |  2 --
 .../app/components/user/UserDataContainer.tsx | 19 +++++++------------
 .../app/components/user/UserDetailList.tsx    |  2 +-
 packages/app/screens/trip/TripDetails.tsx     | 14 ++++----------
 .../app/screens/user/ProfileContainer.tsx     | 15 +++++----------
 7 files changed, 19 insertions(+), 46 deletions(-)

diff --git a/packages/app/components/destination/index.tsx b/packages/app/components/destination/index.tsx
index d28c3e211..e3ca9f8ac 100644
--- a/packages/app/components/destination/index.tsx
+++ b/packages/app/components/destination/index.tsx
@@ -215,6 +215,7 @@ const loadStyles = (theme) => {
       paddingBottom: 12,
       paddingLeft: 16,
       width: '100%',
+      marginBottom:40,
       backgroundColor: currentTheme.colors.background,
     },
     headerContainer: {
diff --git a/packages/app/components/feed/FeedCard.tsx b/packages/app/components/feed/FeedCard.tsx
index ec56a32d6..dfbb31749 100644
--- a/packages/app/components/feed/FeedCard.tsx
+++ b/packages/app/components/feed/FeedCard.tsx
@@ -126,20 +126,11 @@ export default function Card({
     <Layout>
       <ContextMenu.Root>
         <ContextMenu.Trigger>
-          <View
-            style={{
-              alignItems: 'center',
-              padding: 16,
-              flex: 1,
-              width: '60vw',
-            }}
-          >
+            
             <View
               style={{
                 width: '100%',
-                marginVertical: 'auto',
                 borderRadius: 15,
-                overflow: 'hidden',
                 borderColor: 'lightgray',
                 borderWidth: 1,
                 backgroundColor: `${currentTheme.colors.card}`,
@@ -345,7 +336,6 @@ export default function Card({
                 </RStack>
               </RStack>
             </View>
-          </View>
         </ContextMenu.Trigger>
         <ContextMenu.Content>
           <ContextMenu.Item
diff --git a/packages/app/components/layout/Layout.tsx b/packages/app/components/layout/Layout.tsx
index befbd73fc..a906ed6db 100644
--- a/packages/app/components/layout/Layout.tsx
+++ b/packages/app/components/layout/Layout.tsx
@@ -7,11 +7,9 @@ const Layout = ({ children }) => {
       style={{
         display: 'flex',
         justifyContent: 'center',
-        alignItems: 'center',
         marginTop: 40,
         backgroundColor: 'transparent',
         width:'100%',
-        alignSelf: 'center',
       }}
     >
       {children}
diff --git a/packages/app/components/user/UserDataContainer.tsx b/packages/app/components/user/UserDataContainer.tsx
index 5aed9e653..91306d7cf 100644
--- a/packages/app/components/user/UserDataContainer.tsx
+++ b/packages/app/components/user/UserDataContainer.tsx
@@ -96,19 +96,17 @@ export default function UserDataContainer({
       <LargeCard
         customStyle={{
           backgroundColor: hexToRGBA(currentTheme.colors.card, 0.2),
+          padding:10
         }}
       >
         <RStack
           style={{
-            gap: 16,
+            gap: 10,
             alignItems: 'center',
-            justifyContent: 'center',
             width: '100%',
-            padding: 24,
           }}
         >
           <RText
-            // color={currentTheme.colors.black}
             style={{
               textTransform: 'capitalize',
               fontSize: 24,
@@ -120,10 +118,6 @@ export default function UserDataContainer({
           </RText>
           <RStack
             style={{
-              flexWrap: 'wrap',
-              flexDirection: 'row',
-              justifyContent: 'center',
-              alignItems: 'center',
               width: '100%',
               padding: 4,
             }}
@@ -145,10 +139,11 @@ export default function UserDataContainer({
                   horizontal={true}
                   nestedScrollEnabled={true}
                   contentContainerStyle={{
-                    paddingHorizontal: 3,
-                    paddingVertical: 3,
-                    justifyContent: 'center',
-                    alignItems: 'center',
+                    padding:10
+                    // paddingHorizontal: 1,
+                    // paddingVertical: 3,
+                    // justifyContent: 'center',
+                    // alignItems: 'center',
                   }}
                 />
 
diff --git a/packages/app/components/user/UserDetailList.tsx b/packages/app/components/user/UserDetailList.tsx
index 09ccc8785..0a9174a41 100644
--- a/packages/app/components/user/UserDetailList.tsx
+++ b/packages/app/components/user/UserDetailList.tsx
@@ -75,7 +75,7 @@ const DataList = ({ data }: DataListProps) => {
           </View>
         </BaseModal>
       ) : (
-        <View style={{ marginLeft: 20 }}>
+        <View style={{ width:'30%' ,alignSelf:'center'}}>
           <BaseDialog
             title="See all"
             trigger="See all"
diff --git a/packages/app/screens/trip/TripDetails.tsx b/packages/app/screens/trip/TripDetails.tsx
index adefecdc1..f55684b3a 100644
--- a/packages/app/screens/trip/TripDetails.tsx
+++ b/packages/app/screens/trip/TripDetails.tsx
@@ -128,22 +128,16 @@ export function TripDetails() {
                             {data.start_date && (
                               <RStack>
                                 <Text style={styles.descriptionText}>
-                                  Start Date:{' '}
-                                  {format(
-                                    new Date(data.start_date),
-                                    'MM/dd/yyyy',
-                                  )}
+                                  Start Date:{data.start_date}
+                                  
                                 </Text>
                               </RStack>
                             )}
                             {data.end_date && (
                               <RStack>
                                 <Text style={styles.descriptionText}>
-                                  End Date:{' '}
-                                  {format(
-                                    new Date(data.end_date),
-                                    'MM/dd/yyyy',
-                                  )}
+                                  End Date:{data.end_date}
+                                  
                                 </Text>
                               </RStack>
                             )}
diff --git a/packages/app/screens/user/ProfileContainer.tsx b/packages/app/screens/user/ProfileContainer.tsx
index 602be90d3..0abc10912 100644
--- a/packages/app/screens/user/ProfileContainer.tsx
+++ b/packages/app/screens/user/ProfileContainer.tsx
@@ -250,22 +250,22 @@ export default function ProfileContainer({ id = null }) {
               )}
             </View>
             {packsList.length > 0 && (
-              <View style={styles.userDataContainer}>
+              // <View style={styles.userDataContainer}>
                 <UserDataContainer
                   data={packsList}
                   type="packs"
                   userId={user?.id}
                 />
-              </View>
+              // </View>
             )}
             {tripsList.length > 0 && (
-              <View style={styles.userDataContainer}>
+              // <View style={styles.userDataContainer}>
                 <UserDataContainer
                   data={tripsList}
                   type="trips"
                   userId={user?.id}
                 />
-              </View>
+              // </View>
             )}
           </View>
         </RStack>
@@ -334,12 +334,7 @@ const loadStyles = (theme) => {
       width: '100%',
       flex: 1,
     },
-    userDataContainer: {
-      marginBottom: 25,
-      width: '100%',
-      justifyContent: 'center',
-      alignItems: 'center',
-    },
+    
     userDataCard: {
       borderRadius: 15,
       backgroundColor: currentTheme.colors.card,

From e00edccdc6d4e31e7f49d2d3ca32e6952fdd98df Mon Sep 17 00:00:00 2001
From: Anmol Verma <anmolverma2810@gmail.com>
Date: Tue, 18 Jun 2024 22:24:58 +0530
Subject: [PATCH 057/257] replace sheet to zeego dropdown in RSelect

---
 packages/app/screens/items/index.tsx          |   4 +-
 .../ui/src/Bento/elements/tables/Basic.tsx    |   4 +-
 packages/ui/src/RSelect/index.tsx             | 129 +++++++-----------
 packages/ui/src/ZDropdown/index.tsx           | 123 +++++++----------
 packages/ui/src/index.tsx                     |   6 +-
 5 files changed, 102 insertions(+), 164 deletions(-)

diff --git a/packages/app/screens/items/index.tsx b/packages/app/screens/items/index.tsx
index b78837fd4..ac717040c 100644
--- a/packages/app/screens/items/index.tsx
+++ b/packages/app/screens/items/index.tsx
@@ -84,7 +84,7 @@ export default function Items() {
               data={optionValues}
               onValueChange={handleSort}
               placeholder={value}
-              width='60%'
+              width='50%'
             />
           </RStack>
          <View style={{marginBottom:10}}>
@@ -181,7 +181,7 @@ const loadStyles = (theme) => {
     },
     sortContainer: {
       flexDirection: 'row',
-      justifyContent:'space-between',
+      // justifyContent:'space-between',
       alignItems: 'center',
     },
   };
diff --git a/packages/ui/src/Bento/elements/tables/Basic.tsx b/packages/ui/src/Bento/elements/tables/Basic.tsx
index 7ee30baf4..113d4cf7b 100644
--- a/packages/ui/src/Bento/elements/tables/Basic.tsx
+++ b/packages/ui/src/Bento/elements/tables/Basic.tsx
@@ -109,12 +109,12 @@ export function BasicTable({
           Platform.OS === 'ios' ||
           window.innerWidth < 900 ? (
             <View>
-              <ZDropdown.Native
+              {/* <ZDropdown.Native
                 dropdownItems={[
                   { label: 'Edit', onSelect: handleEditClick },
                   { label: 'Delete', onSelect: handleDeleteClick },
                 ]}
-              />
+              /> */}
             </View>
           ) : (
             <View>
diff --git a/packages/ui/src/RSelect/index.tsx b/packages/ui/src/RSelect/index.tsx
index eb38203ff..09a99127e 100644
--- a/packages/ui/src/RSelect/index.tsx
+++ b/packages/ui/src/RSelect/index.tsx
@@ -3,20 +3,18 @@ import { Check, ChevronDown } from '@tamagui/lucide-icons';
 import {
   Adapt,
   Select as OriginalSelect,
-  Sheet,
-  YStack as OriginalYStack,
-  getFontSize,
   Text,
+  YStack,
+  getFontSize,
 } from 'tamagui';
+import { RDropdownMenu } from '../ZDropdown';
+import { Platform } from 'react-native';
 
-const YStack: any = OriginalYStack;
 const Select: any = OriginalSelect;
 
 // Entry point for the Select component
 export default function RSelect(props) {
-  // Default key names for text and value, can be overridden by props
   const { textKey = 'label', valueKey = 'value', ...otherProps } = props;
-
   return (
     <SelectItem native textKey={textKey} valueKey={valueKey} {...otherProps} />
   );
@@ -24,16 +22,9 @@ export default function RSelect(props) {
 
 // Function to extract option attributes from data items
 const extractOptionAttributes = (item, index, textKey, valueKey) => {
-  // Handle simple types: strings, numbers, and booleans
-  if (
-    typeof item === 'string' ||
-    typeof item === 'number' ||
-    typeof item === 'boolean'
-  ) {
+  if (typeof item === 'string' || typeof item === 'number' || typeof item === 'boolean') {
     return { text: item.toString(), value: item.toString(), index };
   }
-
-  // Handle objects
   if (typeof item === 'object' && item !== null) {
     return {
       text: item[textKey] ?? item.toString(),
@@ -41,8 +32,6 @@ const extractOptionAttributes = (item, index, textKey, valueKey) => {
       index,
     };
   }
-
-  // Default case for other invalid types
   return { text: 'Invalid Item', value: 'invalid', index };
 };
 
@@ -55,6 +44,7 @@ export function SelectItem(props) {
     placeholder = 'Select an option',
     textKey = 'label',
     valueKey = 'value',
+    native,
     ...forwardedProps
   } = props;
 
@@ -64,29 +54,17 @@ export function SelectItem(props) {
     }
   };
 
-  const options = useMemo(() => {
+  const menuItems = useMemo(() => {
     if (!Array.isArray(data)) return [];
-    return data
-      .map((item, index) =>
-        extractOptionAttributes(item, index, textKey, valueKey),
-      )
-      .map(({ text, value, index }) => (
-        <Select.Item key={`${text} + ${value}`} index={index} value={value}>
-          <Select.ItemText>
-            {text.charAt(0).toUpperCase() + text.slice(1)}
-          </Select.ItemText>
-          <Select.ItemIndicator marginLeft="auto">
-            <Check size={16} />
-          </Select.ItemIndicator>
-        </Select.Item>
-      ));
+    return data.map((item, index) => {
+      const { text, value, index: itemIndex } = extractOptionAttributes(item, index, textKey, valueKey);
+      return {
+        label: text.charAt(0).toUpperCase() + text.slice(1),
+        onSelect: () => handleChange(value),
+      };
+    });
   }, [data, textKey, valueKey]);
 
-  // Conditional rendering based on options
-  if (options.length === 0) {
-    return <Text>No options available</Text>;
-  }
-
   return (
     <Select
       value={value}
@@ -94,53 +72,44 @@ export function SelectItem(props) {
       onValueChange={handleChange}
       {...forwardedProps}
     >
-      <Select.Trigger width={220} iconAfter={ChevronDown}>
-        <Select.Value>{placeholder}</Select.Value>
-      </Select.Trigger>
-      <Adapt when="sm" platform="touch">
-        <Sheet
-          native={!!props.native}
-          modal
-          dismissOnSnapToBottom
-          animationConfig={{
-            type: 'spring',
-            damping: 20,
-            mass: 1.2,
-            stiffness: 250,
-          }}
-        >
-          <Sheet.Frame>
-            <Sheet.ScrollView>
-              <Adapt.Contents />
-            </Sheet.ScrollView>
-          </Sheet.Frame>
-          <Sheet.Overlay
-            animation="lazy"
-            enterStyle={{ opacity: 0 } as any}
-            exitStyle={{ opacity: 0 } as any}
-          />
-        </Sheet>
-      </Adapt>
-      <Select.Content zIndex={200000}>
+      {Platform.OS === 'web' && (
+        <>
+        <Select.Trigger width={220} iconAfter={ChevronDown}>
+          <Select.Value>{value || placeholder}</Select.Value>
+        </Select.Trigger>
+        <Select.Content zIndex={200000}>
         <Select.Viewport minWidth={200}>
-          <Select.Group>{options}</Select.Group>
-
-          {props.native && (
-            <YStack
-              position="absolute"
-              right={0}
-              top={0}
-              bottom={0}
-              alignItems="center"
-              justifyContent="center"
-              width={'$4'}
-              pointerEvents="none"
-            >
-              <ChevronDown size={getFontSize((props.size ?? '$true') as any)} />
-            </YStack>
-          )}
+          <Select.Group>
+            {menuItems.map(({ label, onSelect }, index) => (
+              <Select.Item key={`${label}-${index}`} value={label}>
+                <Select.ItemText>{label}</Select.ItemText>
+                <Select.ItemIndicator marginLeft="auto">
+                  <Check size={16} />
+                </Select.ItemIndicator>
+              </Select.Item>
+            ))}
+          </Select.Group>
         </Select.Viewport>
+        <YStack
+          position="absolute"
+          right={0}
+          top={0}
+          bottom={0}
+          alignItems="center"
+          justifyContent="center"
+          width={'$4'}
+          pointerEvents="none"
+        >
+          <ChevronDown size={getFontSize((props.size ?? '$true') as any)} />
+        </YStack>
       </Select.Content>
+      </>
+      )}
+      {native && (
+        <Adapt when="sm" platform="touch">
+          <RDropdownMenu menuItems={menuItems} menuName={placeholder} />
+        </Adapt>
+      ) }
     </Select>
   );
 }
diff --git a/packages/ui/src/ZDropdown/index.tsx b/packages/ui/src/ZDropdown/index.tsx
index a468cf5eb..1524a5930 100644
--- a/packages/ui/src/ZDropdown/index.tsx
+++ b/packages/ui/src/ZDropdown/index.tsx
@@ -1,83 +1,55 @@
-import * as DropdownMenu from 'zeego/dropdown-menu';
-import { styled } from 'tamagui';
-import { MaterialIcons } from '@expo/vector-icons';
-import { ViewProps } from 'react-native';
-
-import RIconButton from '../RIconButton';
-
-interface ExtendedDropdownMenuProps extends ViewProps {
-  css?: string;
-}
-
-interface ExtendedDropdownMenuItemProps extends ViewProps {
-  css?: string;
-  onSelect?: () => void;
-}
-
-const ExtendedDropdownMenuContent =
-  DropdownMenu.Content as React.ComponentType<ExtendedDropdownMenuProps>;
-
-const CustomContent = styled(ExtendedDropdownMenuContent, {
-  backgroundColor: 'white',
-  minWidth: '160px',
-  shadowColor: '#000',
-  borderRadius: '8px',
-  shadowOffset: {
-    width: 0,
-    height: ' 8px',
-  },
-  shadowOpacity: 0.2,
-  shadowRadius: '16px',
-  padding: '8px',
-});
-
-const ExtendedDropdownMenuItem =
-  DropdownMenu.Item as React.ComponentType<ExtendedDropdownMenuItemProps>;
-
-const CustomItem = styled(ExtendedDropdownMenuItem, {
-  padding: 10,
-  flexDirection: 'row',
-  alignItems: 'center',
-  hover: {
-    backgroundColor: 'gray',
-  },
-});
-
-const DropdownMenuItem = DropdownMenu.create(CustomItem, 'Item');
-
-export const ZDropdownWeb = ({ dropdownItems = [] }) => {
-  return (
-    <DropdownMenu.Root>
-      <DropdownMenu.Trigger>
-        <RIconButton
-          backgroundColor="transparent"
-          icon={<MaterialIcons name="more-horiz" size={25} />}
-          style={{ padding: 0 }}
-        />
-      </DropdownMenu.Trigger>
-      <CustomContent>
-        {dropdownItems.map(({ label, onSelect = () => {} }) => (
-          <CustomItem key={label} onSelect={onSelect}>
-            <DropdownMenu.ItemTitle>{label}</DropdownMenu.ItemTitle>
-          </CustomItem>
-        ))}
-      </CustomContent>
-    </DropdownMenu.Root>
-  );
+import { ComponentProps } from 'react';
+import * as ZeegoDropdownMenu from 'zeego/dropdown-menu';
+import RButton from '../RButton';
+import RText from '../RText';
+
+type ContentProps = ComponentProps<(typeof ZeegoDropdownMenu)['Content']>;
+type ItemProps = ComponentProps<(typeof ZeegoDropdownMenu)['Item']>;
+
+const DropdownMenu = {
+  ...ZeegoDropdownMenu,
+  Content: ZeegoDropdownMenu.create(
+    (props: ContentProps) => (
+      <ZeegoDropdownMenu.Content
+        {...props}
+        style={{
+          backgroundColor: 'white',
+          padding: 10,
+          borderRadius: 8,
+          gap: 10,
+          boxShadow: '0px 0px 16px -8px #484848',
+        }}
+      />
+    ),
+    'Content',
+  ),
+  Item: ZeegoDropdownMenu.create(
+    (props: ItemProps) => (
+      <ZeegoDropdownMenu.Item
+        {...props}
+        style={{
+          padding: 10,
+          backgroundColor: 'white',
+          flexDirection: 'row',
+          alignItems: 'center',
+          hoverStyle: {
+            backgroundColor: 'gray',
+          },
+        }}
+      />
+    ),
+    'Item',
+  ),
 };
 
-export const ZDropdownNative = ({ dropdownItems = [] }) => {
+const RDropdownMenu = ({ menuItems = [], menuName }) => {
   return (
     <DropdownMenu.Root>
       <DropdownMenu.Trigger>
-        <RIconButton
-          backgroundColor="transparent"
-          icon={<MaterialIcons name="more-horiz" size={25} />}
-          style={{ padding: 0 }}
-        />
+        <RButton>{menuName}</RButton>
       </DropdownMenu.Trigger>
       <DropdownMenu.Content>
-        {dropdownItems.map(({ label, onSelect = () => {} }) => (
+        {menuItems.map(({ label, onSelect = () => {} }) => (
           <DropdownMenu.Item key={label} onSelect={onSelect}>
             <DropdownMenu.ItemTitle>{label}</DropdownMenu.ItemTitle>
           </DropdownMenu.Item>
@@ -87,7 +59,4 @@ export const ZDropdownNative = ({ dropdownItems = [] }) => {
   );
 };
 
-export default {
-  Web: ZDropdownWeb,
-  Native: ZDropdownNative,
-};
+export { DropdownMenu, RDropdownMenu };
diff --git a/packages/ui/src/index.tsx b/packages/ui/src/index.tsx
index af2b0e5e7..c3a3cf0b1 100644
--- a/packages/ui/src/index.tsx
+++ b/packages/ui/src/index.tsx
@@ -28,11 +28,11 @@ import RParagraph from './Rparagraph';
 import SizableText from './SizableText';
 import XStack from './XStack';
 import YStack from './YStack';
-import ZDropdown from './ZDropdown';
+export { DropdownMenu, RDropdownMenu } from './ZDropdown';
 export { Container } from './Container';
 export { MainContentWeb } from './MainContentWeb';
 export { ContextMenu, RContextMenu } from './RContextMenu';
-export { DropdownMenu, ExampleDropdown } from './RDropdown/DropdownBase';
+// export { DropdownMenu, ExampleDropdown } from './RDropdown/DropdownBase';
 export { RSkeleton } from './RSkeleton';
 
 export { LoadingPlaceholder } from './LoadingPlaceholder';
@@ -71,7 +71,7 @@ export {
   SizableText,
   XStack,
   YStack,
-  ZDropdown,
+  // ZDropdown,
 };
 
 export * from './InputText';

From 78b2463d51c61ada0258145143538821434ca004 Mon Sep 17 00:00:00 2001
From: Anmol Verma <anmolverma2810@gmail.com>
Date: Wed, 19 Jun 2024 18:24:39 +0530
Subject: [PATCH 058/257] layout changes

---
 packages/app/components/feed/FeedCard.tsx | 394 +++++++++++-----------
 packages/app/components/layout/Layout.tsx |   3 +-
 2 files changed, 197 insertions(+), 200 deletions(-)

diff --git a/packages/app/components/feed/FeedCard.tsx b/packages/app/components/feed/FeedCard.tsx
index dfbb31749..6e2f376d3 100644
--- a/packages/app/components/feed/FeedCard.tsx
+++ b/packages/app/components/feed/FeedCard.tsx
@@ -124,240 +124,236 @@ export default function Card({
 
   return (
     <Layout>
-      <ContextMenu.Root>
-        <ContextMenu.Trigger>
-            
-            <View
-              style={{
-                width: '100%',
-                borderRadius: 15,
-                borderColor: 'lightgray',
-                borderWidth: 1,
-                backgroundColor: `${currentTheme.colors.card}`,
-              }}
-            >
-              <RStack style={{ padding: 16, gap: 50 }}>
-                <RStack style={{ gap: 10 }}>
-                  <RHeading>
-                    <View
+      <View
+        style={{
+          width: '80%',
+          borderRadius: 15,
+          borderColor: 'lightgray',
+          borderWidth: 1,
+          backgroundColor: `${currentTheme.colors.card}`,
+        }}
+      >
+        <ContextMenu.Root>
+          <ContextMenu.Trigger>
+            <RStack style={{ padding: 16, gap: 50 }}>
+              <RStack style={{ gap: 10 }}>
+                <RHeading>
+                  <View
+                    style={{
+                      flexDirection: 'row',
+                      alignItems: 'center',
+                      justifyContent: 'space-between',
+                      width: '100%',
+                    }}
+                  >
+                    <RLink
+                      href={type === 'pack' ? '/pack/' + id : '/trip/' + id}
+                      style={{ textDecoration: 'none' }}
+                    >
+                      <RText
+                        fontSize={18}
+                        color={currentTheme.colors.textColor}
+                      >
+                        {truncatedName}
+                      </RText>
+                    </RLink>
+                    <RStack
                       style={{
                         flexDirection: 'row',
                         alignItems: 'center',
-                        justifyContent: 'space-between',
-                        width: '100%',
+                        justifyContent: 'center',
+                        gap: 10,
                       }}
                     >
-                      <RLink
-                        href={type === 'pack' ? '/pack/' + id : '/trip/' + id}
-                        style={{ textDecoration: 'none' }}
-                      >
-                        <RText
-                          fontSize={18}
-                          color={currentTheme.colors.textColor}
+                      {type === 'pack' && (
+                        <View
+                          style={{
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                            justifyContent: 'space-between',
+                            gap: 8,
+                            // border: '1px solid #ccc',
+                          }}
                         >
-                          {truncatedName}
-                        </RText>
-                      </RLink>
-                      <RStack
-                        style={{
-                          flexDirection: 'row',
-                          alignItems: 'center',
-                          justifyContent: 'center',
-                          gap: 10,
-                        }}
-                      >
-                        {type === 'pack' && (
-                          <View
-                            style={{
-                              flexDirection: 'row',
-                              alignItems: 'center',
-                              justifyContent: 'space-between',
-                              gap: 8,
-                              // border: '1px solid #ccc',
-                            }}
-                          >
-                            <MaterialIcons
-                              name="backpack"
-                              size={24}
-                              color={currentTheme.colors.cardIconColor}
-                            />
-                            <DuplicateIcon link={`/pack/${id}?copy=true`} />
-                          </View>
-                        )}
-                        {type === 'trip' && (
-                          <Entypo
-                            name="location-pin"
+                          <MaterialIcons
+                            name="backpack"
                             size={24}
                             color={currentTheme.colors.cardIconColor}
                           />
-                        )}
-                      </RStack>
-                    </View>
-                  </RHeading>
+                          <DuplicateIcon link={`/pack/${id}?copy=true`} />
+                        </View>
+                      )}
+                      {type === 'trip' && (
+                        <Entypo
+                          name="location-pin"
+                          size={24}
+                          color={currentTheme.colors.cardIconColor}
+                        />
+                      )}
+                    </RStack>
+                  </View>
+                </RHeading>
 
-                  {type === 'pack' && (
-                    <RText fontSize="$1" color="mediumpurple" ml={-0.5} mt={-1}>
-                      Total Weight: {formatNumber(formattedWeight)} {weightUnit}
-                    </RText>
-                  )}
-                  {type === 'pack' && (
-                    <RText fontSize="$1" color="mediumpurple" ml={-0.5} mt={-1}>
-                      Total Quantity: {quantity}
-                    </RText>
-                  )}
+                {type === 'pack' && (
+                  <RText fontSize="$1" color="mediumpurple" ml={-0.5} mt={-1}>
+                    Total Weight: {formatNumber(formattedWeight)} {weightUnit}
+                  </RText>
+                )}
+                {type === 'pack' && (
+                  <RText fontSize="$1" color="mediumpurple" ml={-0.5} mt={-1}>
+                    Total Quantity: {quantity}
+                  </RText>
+                )}
 
-                  {type === 'trip' && (
-                    <RText fontSize="$1" color="mediumpurple" ml={-0.5} mt={-1}>
-                      {truncatedDestination}
-                    </RText>
-                  )}
-                </RStack>
+                {type === 'trip' && (
+                  <RText fontSize="$1" color="mediumpurple" ml={-0.5} mt={-1}>
+                    {truncatedDestination}
+                  </RText>
+                )}
+              </RStack>
 
+              <RStack
+                style={{
+                  // alignItems: 'center',
+                  justifyContent: 'space-between',
+                }}
+              >
                 <RStack
                   style={{
-                    // alignItems: 'center',
+                    flexDirection: 'row',
+                    alignItems: 'center',
                     justifyContent: 'space-between',
+                    // width: '100%',
                   }}
                 >
-                  <RStack
+                  <View
                     style={{
-                      flexDirection: 'row',
-                      alignItems: 'center',
-                      justifyContent: 'space-between',
-                      // width: '100%',
+                      flexDirection: 'column',
+                      alignItems: 'flex-start',
+                      gap: 8,
                     }}
                   >
-                    <View
-                      style={{
-                        flexDirection: 'column',
-                        alignItems: 'flex-start',
-                        gap: 8,
-                      }}
+                    <RLink
+                      href={`/profile/${type === 'pack' ? owner_id : owner_id}`}
+                      style={{ textDecoration: 'none' }}
                     >
-                      <RLink
-                        href={`/profile/${
-                          type === 'pack' ? owner_id : owner_id
-                        }`}
-                        style={{ textDecoration: 'none' }}
-                      >
-                        <RText color={currentTheme.colors.textColor}>
-                          View{' '}
-                          {owner?.username ? '@' + owner?.username : 'Owner'}
-                        </RText>
-                      </RLink>
-                      <View
-                        style={{
-                          flexDirection: 'row',
-                          alignItems: 'center',
-                          gap: 100,
-                        }}
-                      >
-                        <RText fontSize="$1" color="gray" flex={1}>
-                          {formatDistanceToNow(
-                            new Date(
-                              !Number.isNaN(new Date(createdAt).getTime())
-                                ? createdAt
-                                : new Date(),
-                            ).getTime(),
-                            {
-                              addSuffix: true,
-                            },
-                          ) ?? 0}
-                        </RText>
-                      </View>
-                    </View>
-
+                      <RText color={currentTheme.colors.textColor}>
+                        View {owner?.username ? '@' + owner?.username : 'Owner'}
+                      </RText>
+                    </RLink>
                     <View
                       style={{
-                        flexDirection: 'column',
+                        flexDirection: 'row',
                         alignItems: 'center',
+                        gap: 100,
                       }}
                     >
-                      {type === 'pack' && (
-                        <View>
-                          <RText
-                            fontSize="$2"
-                            color={currentTheme.colors.textColor}
-                          >
-                            Favorites
-                          </RText>
-                          <View
-                            style={{
-                              flexDirection: 'row',
-                              alignItems: 'center',
-                              gap: 8,
-                            }}
-                          >
-                            {user?.id === owner_id.id ? null : (
-                              <TouchableOpacity onPress={handleAddToFavorite}>
-                                <AntDesign
-                                  name="heart"
-                                  size={16}
-                                  color={
-                                    isFavorite
-                                      ? 'red'
-                                      : `${currentTheme.colors.cardIconColor}`
-                                  }
-                                />
-                              </TouchableOpacity>
-                            )}
+                      <RText fontSize="$1" color="gray" flex={1}>
+                        {formatDistanceToNow(
+                          new Date(
+                            !Number.isNaN(new Date(createdAt).getTime())
+                              ? createdAt
+                              : new Date(),
+                          ).getTime(),
+                          {
+                            addSuffix: true,
+                          },
+                        ) ?? 0}
+                      </RText>
+                    </View>
+                  </View>
+
+                  <View
+                    style={{
+                      flexDirection: 'column',
+                      alignItems: 'center',
+                    }}
+                  >
+                    {type === 'pack' && (
+                      <View>
+                        <RText
+                          fontSize="$2"
+                          color={currentTheme.colors.textColor}
+                        >
+                          Favorites
+                        </RText>
+                        <View
+                          style={{
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                            gap: 8,
+                          }}
+                        >
+                          {user?.id === owner_id.id ? null : (
+                            <TouchableOpacity onPress={handleAddToFavorite}>
+                              <AntDesign
+                                name="heart"
+                                size={16}
+                                color={
+                                  isFavorite
+                                    ? 'red'
+                                    : `${currentTheme.colors.cardIconColor}`
+                                }
+                              />
+                            </TouchableOpacity>
+                          )}
 
-                            <RText
-                              color={currentTheme.colors.textColor}
-                              fontSize="$2"
-                              fontWeight="400"
-                            >
-                              {favorites_count > 0 ? favorites_count : 0}
-                            </RText>
-                          </View>
-                        </View>
-                      )}
-                      {type === 'trip' && (
-                        <View>
                           <RText
-                            fontSize="$2"
                             color={currentTheme.colors.textColor}
-                          >
-                            Nights
-                          </RText>
-                          <RText
                             fontSize="$2"
-                            color={currentTheme.colors.textColor}
-                            style={{
-                              justifyContent: 'flex-end',
-                            }}
+                            fontWeight="400"
                           >
-                            {numberOfNights}
+                            {favorites_count > 0 ? favorites_count : 0}
                           </RText>
                         </View>
-                      )}
-                    </View>
-                  </RStack>
+                      </View>
+                    )}
+                    {type === 'trip' && (
+                      <View>
+                        <RText
+                          fontSize="$2"
+                          color={currentTheme.colors.textColor}
+                        >
+                          Nights
+                        </RText>
+                        <RText
+                          fontSize="$2"
+                          color={currentTheme.colors.textColor}
+                          style={{
+                            justifyContent: 'flex-end',
+                          }}
+                        >
+                          {numberOfNights}
+                        </RText>
+                      </View>
+                    )}
+                  </View>
                 </RStack>
               </RStack>
-            </View>
-        </ContextMenu.Trigger>
-        <ContextMenu.Content>
-          <ContextMenu.Item
-            textValue={`View ${type}`}
-            key="view"
-            onSelect={() => {
-              router.push(type === 'pack' ? '/pack/' + id : '/trip/' + id);
-            }}
-          >
-            <ContextMenu.ItemTitle>View {type}</ContextMenu.ItemTitle>
-          </ContextMenu.Item>
-          <ContextMenu.Item
-            textValue={`View owner`}
-            key="owner"
-            onSelect={() => {
-              router.push(`/profile/${owner_id}`);
-            }}
-          >
-            <ContextMenu.ItemTitle>View Owner</ContextMenu.ItemTitle>
-          </ContextMenu.Item>
-        </ContextMenu.Content>
-      </ContextMenu.Root>
+            </RStack>
+          </ContextMenu.Trigger>
+          <ContextMenu.Content>
+            <ContextMenu.Item
+              textValue={`View ${type}`}
+              key="view"
+              onSelect={() => {
+                router.push(type === 'pack' ? '/pack/' + id : '/trip/' + id);
+              }}
+            >
+              <ContextMenu.ItemTitle>View {type}</ContextMenu.ItemTitle>
+            </ContextMenu.Item>
+            <ContextMenu.Item
+              textValue={`View owner`}
+              key="owner"
+              onSelect={() => {
+                router.push(`/profile/${owner_id}`);
+              }}
+            >
+              <ContextMenu.ItemTitle>View Owner</ContextMenu.ItemTitle>
+            </ContextMenu.Item>
+          </ContextMenu.Content>
+        </ContextMenu.Root>
+      </View>
     </Layout>
   );
 }
diff --git a/packages/app/components/layout/Layout.tsx b/packages/app/components/layout/Layout.tsx
index a906ed6db..455c77f25 100644
--- a/packages/app/components/layout/Layout.tsx
+++ b/packages/app/components/layout/Layout.tsx
@@ -7,7 +7,8 @@ const Layout = ({ children }) => {
       style={{
         display: 'flex',
         justifyContent: 'center',
-        marginTop: 40,
+        marginTop: 20,
+        alignItems:'center',
         backgroundColor: 'transparent',
         width:'100%',
       }}

From caf542bcec7d1b9b9b279c94f804e14b4db4963c Mon Sep 17 00:00:00 2001
From: pinocchio-life-like <icbr19fl@gmail.com>
Date: Wed, 19 Jun 2024 18:26:52 +0300
Subject: [PATCH 059/257] 99

---
 packages/app/components/chat/index.tsx        | 230 +++++-------------
 packages/app/components/pack/PackDetails.tsx  | 132 +++++-----
 packages/app/hooks/chat/useChat.ts            |  84 +++++--
 packages/app/hooks/chat/useGetAIResponse.ts   |  29 ++-
 packages/crosspath/types/lib-interface.d.ts   |   4 +-
 packages/crosspath/types/model/types.d.ts     |  41 ++--
 .../Bento/elements/list/SuggestionList.tsx    |  36 ++-
 .../ui/src/ThreeDotsMenu/ThreeDotsMenu.tsx    |   1 -
 .../services/openAi/getAISuggestionService.ts |  30 ++-
 .../openAi/referredItemInformation/index.ts   |  83 ++++++-
 10 files changed, 350 insertions(+), 320 deletions(-)

diff --git a/packages/app/components/chat/index.tsx b/packages/app/components/chat/index.tsx
index 8ebe42369..403d71eeb 100644
--- a/packages/app/components/chat/index.tsx
+++ b/packages/app/components/chat/index.tsx
@@ -18,161 +18,6 @@ import {
 import { X } from '@tamagui/lucide-icons';
 import { MessageCircle, Camera, Settings, Home } from 'lucide-react-native';
 import { ActionItem } from './ActionItem';
-import { BasicTable } from '@packrat/ui/src/Bento/elements/tables';
-
-const chatteer = [
-  {
-    role: 'ai',
-    content: `Based on the details of your pack titled qwerty, there are some optimizations and essential items that can be added to improve safety, comfort, and efficiency while reducing excessive weight:
-
-1. Water (12oz, 12 pcs, category: Water):
-    - While it's essential to stay hydrated, carrying 12 bottles at 12oz each might be excessive weight-wise. Consider replacing some bottles with a hydration reservoir or collapsible water bottles to save weight.
-    - Add a lightweight water purification method like a purification straw or portable water filter to ensure access to clean water along the way.
-
-2. Chocolate (123oz, 213 pcs, category: Food):
-    - While chocolate can be a tasty treat, consider opting for trail-friendly snacks that are more lightweight and provide sustained energy such as energy bars, dried fruits, or nuts.
-    - Include trail mix or energy bars in your pack for quick and easy snacks while hiking.
-
-3. Jacket (4kg, 23 pcs, category: Essentials):
-    - Carrying a 4kg jacket is quite heavy and may not be suitable for hiking. Consider replacing it with a lightweight and packable waterproof jacket for weather protection. 
-    - Essential clothing items like quick-dry layers, extra socks, and a hat can provide more versatility and comfort without the excessive weight.
-
-New Item Suggestions:
-- Lightweight backpacking stove and dehydrated meals for quick and easy hot meals on the trail.
-- Compact first aid kit with essential supplies for emergencies.
-- Multi-tool with knife for various tasks while hiking.
-
-Suggested and Improved Pack for qwerty:
-1. Water (12oz, 6 pcs, category: Water)
-2. Trail Mix (8oz, 1 pcs, category: Food)
-3. Energy Bars (6oz, 2 pcs, category: Food)
-4. Lightweight Backpacking Stove (8oz, 1 pcs, category: Essentials)
-5. Dehydrated Meals (6oz, 2 pcs, category: Food)
-6. Lightweight Waterproof Jacket (1kg, 1 pcs, category: Essentials)
-7. Quick-Dry Layers (500g, 2 pcs, category: Essentials)
-8. Extra Socks (100g, 3 pairs, category: Essentials)
-9. Hat (100g, 1 pcs, category: Essentials)
-10. First Aid Kit (200g, 1 pcs, category: Essentials)
-11. Multi-Tool with Knife (150g, 1 pcs, category: Essentials)
-12. Hydration Reservoir (empty) or Lightweight Collapsible Water Bottles (category: Water)
-13. Purification Straw (category: Water)
-
-Total Estimated Weight: Reduced from 838810.8785g to a more manageable and efficient weight.
-
-ALWAYS be mindful of weight optimization to ensure a comfortable and safe hiking experience.`,
-  },
-];
-
-const suggestion = {
-  Items: [
-    {
-      name: 'Water',
-      weight: 340.19449,
-      unit: 'g',
-      quantity: 6,
-      category: 'Water',
-    },
-    {
-      name: 'Trail Mix',
-      weight: 226.796185,
-      unit: 'g',
-      quantity: 1,
-      category: 'Food',
-    },
-    {
-      name: 'Energy Bars',
-      weight: 170.097139,
-      unit: 'g',
-      quantity: 2,
-      category: 'Food',
-    },
-    {
-      name: 'Lightweight Backpacking Stove',
-      weight: 226.796185,
-      unit: 'g',
-      quantity: 1,
-      category: 'Essentials',
-    },
-    {
-      name: 'Dehydrated Meals',
-      weight: 170.097139,
-      unit: 'g',
-      quantity: 2,
-      category: 'Food',
-    },
-    {
-      name: 'Lightweight Waterproof Jacket',
-      weight: 1000,
-      unit: 'g',
-      quantity: 1,
-      category: 'Essentials',
-    },
-    {
-      name: 'Quick-Dry Layers',
-      weight: 500,
-      unit: 'g',
-      quantity: 2,
-      category: 'Essentials',
-    },
-    {
-      name: 'Extra Socks',
-      weight: 100,
-      unit: 'g',
-      quantity: 3,
-      category: 'Essentials',
-    },
-    {
-      name: 'Hat',
-      weight: 100,
-      unit: 'g',
-      quantity: 1,
-      category: 'Essentials',
-    },
-    {
-      name: 'First Aid Kit',
-      weight: 200,
-      unit: 'g',
-      quantity: 1,
-      category: 'Essentials',
-    },
-    {
-      name: 'Multi-Tool with Knife',
-      weight: 150,
-      unit: 'g',
-      quantity: 1,
-      category: 'Essentials',
-    },
-    {
-      name: 'Hydration Reservoir',
-      weight: 0,
-      unit: 'g',
-      quantity: 1,
-      category: 'Water',
-    },
-    {
-      name: 'Purification Straw',
-      weight: 0,
-      unit: 'g',
-      quantity: 1,
-      category: 'Water',
-    },
-  ],
-};
-
-function groupItemsByCategory(suggestion) {
-  return suggestion.Items.reduce((acc, item, index) => {
-    const itemWithId = {
-      ...item,
-      id: `item${index}`,
-      category: { name: item.category },
-    };
-    (acc[item.category] = acc[item.category] || []).push(itemWithId);
-    return acc;
-  }, {});
-}
-
-// TODO check if we've fixed the chat screen on another branch
-// link: https://github.com/andrew-bierman/PackRat/issues/ ???
 
 interface ChatComponentProps {
   showChatSelector?: boolean;
@@ -213,14 +58,10 @@ const ChatComponent: React.FC<ChatComponentProps> = ({
 }) => {
   const styles = useCustomStyles(loadStyles);
   const {
-    conversations,
-    typeId,
     parsedMessages,
     userInput,
     handleSendMessage,
-    handleSubmitAnalysis,
     setUserInput,
-    setTypeId,
     isLoading,
   } = useChat({ itemTypeId, type });
 
@@ -295,7 +136,30 @@ const ChatComponent: React.FC<ChatComponentProps> = ({
 };
 
 const SuggestionComponent = ({ itemTypeId = null, type = null }) => {
-  const { handleSubmitAnalysis } = useChat({ itemTypeId, type });
+  const [dots, setDots] = useState('.');
+  const {
+    handleSubmitAnalysis,
+    suggestions,
+    isAnalysisLoading,
+    setSuggestions,
+  } = useChat({
+    itemTypeId,
+    type,
+  });
+
+  useEffect(() => {
+    console.log(suggestions);
+  }, [suggestions]);
+
+  useEffect(() => {
+    if (isAnalysisLoading) {
+      const interval = setInterval(() => {
+        setDots((dots) => (dots.length < 3 ? dots + '.' : '.'));
+      }, 500); // Change dots every 500ms
+      return () => clearInterval(interval); // Clean up on component unmount
+    }
+  }, [isAnalysisLoading]);
+
   const styles = useCustomStyles(loadStyles);
 
   const scrollViewRef = useRef<ScrollView>(null);
@@ -304,21 +168,42 @@ const SuggestionComponent = ({ itemTypeId = null, type = null }) => {
     scrollViewRef.current?.scrollToEnd({ animated: false });
   };
 
+  const removeItem = (id) => {
+    console.log('remove item', id);
+    setSuggestions((prevSuggestion) => {
+      if (
+        prevSuggestion &&
+        prevSuggestion.suggestion &&
+        prevSuggestion.suggestion.Items
+      ) {
+        return {
+          ...prevSuggestion,
+          suggestion: {
+            Items: prevSuggestion.suggestion.Items.filter(
+              (item) => String(item.id) !== String(id),
+            ),
+          },
+        };
+      } else {
+        return prevSuggestion;
+      }
+    });
+  };
+
   return (
     <View>
       <RStack style={{ flex: 1 }}>
-        {/* <Text style={{ width: '100%', textAlign: 'center', padding: 8 }}>
-          Allow me to suggest some improvements to your pack!
-        </Text> */}
         <ScrollView
-          // ref={scrollViewRef}
           onContentSizeChange={handleLayout}
           style={{ maxHeight: 620, width: '100%', borderRadius: 10 }}
           showsVerticalScrollIndicator={false}
           contentContainerStyle={{ flexGrow: 1, justifyContent: 'flex-end' }}
         >
-          <SuggestionDescription data={chatteer} />
-          <SuggestionList suggestion={suggestion} />
+          <SuggestionDescription data={suggestions.reasoning} />
+          <SuggestionList
+            suggestion={suggestions.suggestion}
+            onAddItem={removeItem}
+          />
         </ScrollView>
         <RStack
           style={{
@@ -330,12 +215,15 @@ const SuggestionComponent = ({ itemTypeId = null, type = null }) => {
         >
           <RButton
             onClick={() => {
-              console.log(groupItemsByCategory(suggestion));
-              // handleSubmitAnalysis();
+              // console.log(groupItemsByCategory(suggestion));
+              handleSubmitAnalysis();
             }}
+            disabled={isAnalysisLoading}
             style={{ width: '100%' }}
           >
-            <Text style={styles.sendText}>Analyze</Text>
+            <Text style={styles.sendText}>
+              {isAnalysisLoading ? 'Loading' + dots : 'Analyze'}
+            </Text>
           </RButton>
         </RStack>
       </RStack>
@@ -366,8 +254,8 @@ const ChatModalTrigger: React.FC<ChatModalTriggerProps> = ({
       style={
         (styles.container,
         {
-          position: 'absolute',
-          right: 50,
+          position: 'fixed',
+          right: 250,
           bottom: 30,
           width: 60,
           height: 60,
diff --git a/packages/app/components/pack/PackDetails.tsx b/packages/app/components/pack/PackDetails.tsx
index cacb0ae40..a1afcdf78 100644
--- a/packages/app/components/pack/PackDetails.tsx
+++ b/packages/app/components/pack/PackDetails.tsx
@@ -68,75 +68,69 @@ export function PackDetails() {
   return (
     <>
       <Layout>
-        
-          {!isError && (
-            <>
-              <DetailsComponent
-                type="pack"
-                data={currentPack}
-                isLoading={isLoading}
-                error={error as any}
-                additionalComps={
-                  <>
-                      <FlatList
-                        data={Object.entries(SECTION)}
-                        contentContainerStyle={{ paddingBottom: 50 }}
-                        keyExtractor={([key, val]) => val}
-                        renderItem={({ item }) => {
-                          {
-                            switch (item[1]) {
-                              case SECTION.TABLE:
-                                return (
-                                  <TableContainer
-                                    currentPack={currentPack}
-                                    copy={canCopy}
-                                    hasPermissions={isAuthUserPack}
-                                  />
-                                );
-                              case SECTION.CTA:
-                                return isAuthUserPack ? (
-                                  <AddItemModal
-                                    currentPackId={
-                                      currentPackId ? currentPackId : ''
-                                    }
-                                    currentPack={currentPack}
-                                    isAddItemModalOpen={isAddItemModalOpen}
-                                    setIsAddItemModalOpen={
-                                      setIsAddItemModalOpen
-                                    }
-                                    // refetch={refetch}
-                                    setRefetch={() =>
-                                      setRefetch((prev) => !prev)
-                                    }
-                                  />
-                                ) : null;
-                              case SECTION.SCORECARD:
-                                return (
-                                  <ScoreContainer
-                                    type="pack"
-                                    data={currentPack}
-                                    isOwner={isOwner}
-                                  />
-                                );
-                              default:
-                                return null;
-                            }
-                          }
-                        }}
-                      />
-                  </>
-                }
-                link={link}
-              />
-            </>
-          )}
-          <ChatContainer
-            itemTypeId={currentPackId}
-            title="Chat"
-            trigger="Open Chat"
-            type="pack"
-          />
-        </View>
+        {!isError && (
+          <>
+            <DetailsComponent
+              type="pack"
+              data={currentPack}
+              isLoading={isLoading}
+              error={error as any}
+              additionalComps={
+                <>
+                  <FlatList
+                    data={Object.entries(SECTION)}
+                    contentContainerStyle={{ paddingBottom: 50 }}
+                    keyExtractor={([key, val]) => val}
+                    renderItem={({ item }) => {
+                      {
+                        switch (item[1]) {
+                          case SECTION.TABLE:
+                            return (
+                              <TableContainer
+                                currentPack={currentPack}
+                                copy={canCopy}
+                                hasPermissions={isAuthUserPack}
+                              />
+                            );
+                          case SECTION.CTA:
+                            return isAuthUserPack ? (
+                              <AddItemModal
+                                currentPackId={
+                                  currentPackId ? currentPackId : ''
+                                }
+                                currentPack={currentPack}
+                                isAddItemModalOpen={isAddItemModalOpen}
+                                setIsAddItemModalOpen={setIsAddItemModalOpen}
+                                // refetch={refetch}
+                                setRefetch={() => setRefetch((prev) => !prev)}
+                              />
+                            ) : null;
+                          case SECTION.SCORECARD:
+                            return (
+                              <ScoreContainer
+                                type="pack"
+                                data={currentPack}
+                                isOwner={isOwner}
+                              />
+                            );
+                          default:
+                            return null;
+                        }
+                      }
+                    }}
+                  />
+                </>
+              }
+              link={link}
+            />
+          </>
+        )}
+        <ChatContainer
+          itemTypeId={currentPackId}
+          title="Chat"
+          trigger="Open Chat"
+          type="pack"
+        />
       </Layout>
     </>
   );
diff --git a/packages/app/hooks/chat/useChat.ts b/packages/app/hooks/chat/useChat.ts
index e686a413d..43121300e 100644
--- a/packages/app/hooks/chat/useChat.ts
+++ b/packages/app/hooks/chat/useChat.ts
@@ -2,15 +2,37 @@ import { useState } from 'react';
 import { useGetUserChats } from './useGetUserChats';
 import { useGetAIResponse, useGetAISuggestions } from './useGetAIResponse';
 import { useAuthUser } from 'app/auth/hooks';
+import { v4 as uuidv4 } from 'uuid';
+
+interface Reasoning {
+  role: string;
+  content: string;
+}
+
+interface Suggestion {
+  name: string;
+  weight: number;
+  unit: string;
+  quantity: number;
+  category: string;
+}
+
+interface Suggestions {
+  reasoning: Reasoning[];
+  suggestion: Suggestion[];
+}
 
 export const useChat = (itemTypeId = null) => {
   const user = useAuthUser();
   const [typeId, setTypeId] = useState(itemTypeId);
-  const [itemType, setItemType] = useState(itemTypeId);
   const [isLoading, setIsLoading] = useState(false);
+  const [isAnalysisLoading, setIsAnalysisLoading] = useState(false);
+  const [suggestions, setSuggestions] = useState<Suggestions>({
+    reasoning: [],
+    suggestion: [],
+  });
 
   const [userInput, setUserInput] = useState('');
-  // const [parsedMessages, setParsedMessages] = useState([]);
 
   const { data: chatsData, refetch } = useGetUserChats(
     user.id,
@@ -43,21 +65,6 @@ export const useChat = (itemTypeId = null) => {
       return accumulator;
     }, []);
   };
-
-  // const conversation = conversations?.find(
-  //   (chat) => chat._id === conversationId,
-  // );
-
-  // useEffect(() => {
-  //
-  //   setParsedMessages(
-  //     conversation ? parseConversationHistory(conversation.history) : [],
-  //   );
-  // }, [conversationId]);
-
-  // /
-
-  // Compute parsedMessages directly
   const parsedMessages = conversations
     ? parseConversationHistory(conversations)
     : [];
@@ -65,8 +72,6 @@ export const useChat = (itemTypeId = null) => {
   //
 
   /**
-   * Handles sending a message.
-   *
    * @return {Promise<void>} This function returns nothing.
    */
   const handleSendMessage = async (userMessage) => {
@@ -83,12 +88,38 @@ export const useChat = (itemTypeId = null) => {
   };
 
   const handleSubmitAnalysis = async () => {
-    await getAISuggestions({
-      userId: user.id,
-      itemTypeId: typeId.itemTypeId,
-      type: typeId.type,
-    });
-    await refetch();
+    try {
+      setIsAnalysisLoading(true);
+      const response = await getAISuggestions({
+        userId: user.id,
+        itemTypeId: typeId.itemTypeId,
+        type: typeId.type,
+      });
+
+      setSuggestions({
+        reasoning: [{ role: 'ai', content: response.aiResponse }],
+        suggestion: {
+          ...response.refined,
+          Items: response.refined.Items.map((item) => {
+            const modifiedItem = {
+              ...item,
+              ownerId: user.id,
+              packId: itemTypeId.itemTypeId,
+              type: item.category,
+              id: uuidv4(),
+            };
+            delete modifiedItem.category;
+            return modifiedItem;
+          }),
+        },
+      });
+
+      console.log(response);
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setIsAnalysisLoading(false);
+    }
   };
 
   return {
@@ -101,5 +132,8 @@ export const useChat = (itemTypeId = null) => {
     handleSubmitAnalysis,
     setUserInput,
     setTypeId,
+    suggestions,
+    isAnalysisLoading,
+    setSuggestions,
   };
 };
diff --git a/packages/app/hooks/chat/useGetAIResponse.ts b/packages/app/hooks/chat/useGetAIResponse.ts
index 455bd6fb2..b1f129f9a 100644
--- a/packages/app/hooks/chat/useGetAIResponse.ts
+++ b/packages/app/hooks/chat/useGetAIResponse.ts
@@ -25,17 +25,26 @@ export function useGetAIResponse() {
 
 export function useGetAISuggestions() {
   const utils = queryTrpc.useContext();
-  const mutation = queryTrpc.getAISuggestions.useMutation({
-    onSuccess: () => {
-      utils.invalidate();
-    },
-  });
+  const mutation = queryTrpc.getAISuggestions.useMutation();
 
-  const getAISuggestions = async ({ userId, itemTypeId, type }) => {
-    return mutation.mutate({
-      userId,
-      itemTypeId,
-      type,
+  const getAISuggestions = ({ userId, itemTypeId, type }) => {
+    return new Promise((resolve, reject) => {
+      mutation.mutate(
+        {
+          userId,
+          itemTypeId,
+          type,
+        },
+        {
+          onSuccess: (data) => {
+            utils.invalidate();
+            resolve(data);
+          },
+          onError: (error) => {
+            reject(error);
+          },
+        },
+      );
     });
   };
 
diff --git a/packages/crosspath/types/lib-interface.d.ts b/packages/crosspath/types/lib-interface.d.ts
index acf8c94d3..524b24431 100644
--- a/packages/crosspath/types/lib-interface.d.ts
+++ b/packages/crosspath/types/lib-interface.d.ts
@@ -1,6 +1,4 @@
 import { LinkComponent, Router, CreateParam } from './model';
-export declare function Link(
-  props: Parameters<LinkComponent>,
-): ReturnType<LinkComponent>;
+export declare function Link(props: Parameters<LinkComponent>): ReturnType<LinkComponent>;
 export declare const createParam: CreateParam;
 export declare function useRouter(): Router;
diff --git a/packages/crosspath/types/model/types.d.ts b/packages/crosspath/types/model/types.d.ts
index 5e7b7414e..9c3ee437d 100644
--- a/packages/crosspath/types/model/types.d.ts
+++ b/packages/crosspath/types/model/types.d.ts
@@ -1,32 +1,27 @@
 import { FC } from 'react';
 import { LinkProps } from 'solito/link';
 export interface CreateParamOptions {
-  initial?: string;
-  parse?: (param: string) => unknown;
-  stringify?: (param: unknown) => string;
+    initial?: string;
+    parse?: (param: string) => unknown;
+    stringify?: (param: unknown) => string;
 }
 export interface Router {
-  push: (url: URL) => void;
-  replace: (url: URL) => void;
-  back: () => void;
+    push: (url: URL) => void;
+    replace: (url: URL) => void;
+    back: () => void;
 }
 export type LinkComponent = FC<LinkProps>;
-export type URL =
-  | string
-  | {
-      pathname?: string;
-      query?: Record<string, any>;
-      state?: Record<string, any>;
-      hash?: string;
-      as?: string | object;
-    };
+export type URL = string | {
+    pathname?: string;
+    query?: Record<string, any>;
+    state?: Record<string, any>;
+    hash?: string;
+    as?: string | object;
+};
 export type CreateParam = <T>() => {
-  useParam: (
-    key: keyof T,
-    options?: CreateParamOptions,
-  ) => [value: any, setValue: (value: any) => void];
-  useParams: (key: keyof T) => {
-    params: T;
-    setParams: (value: any) => void;
-  };
+    useParam: (key: keyof T, options?: CreateParamOptions) => [value: any, setValue: (value: any) => void];
+    useParams: (key: keyof T) => {
+        params: T;
+        setParams: (value: any) => void;
+    };
 };
diff --git a/packages/ui/src/Bento/elements/list/SuggestionList.tsx b/packages/ui/src/Bento/elements/list/SuggestionList.tsx
index 5de361b4f..e3a21ff8c 100644
--- a/packages/ui/src/Bento/elements/list/SuggestionList.tsx
+++ b/packages/ui/src/Bento/elements/list/SuggestionList.tsx
@@ -1,19 +1,21 @@
 import React, { useEffect, useState } from 'react';
-import { Phone } from '@tamagui/lucide-icons';
-import type { ColorTokens } from 'tamagui';
-import { Avatar, Button, Circle, Separator, Text, View, YGroup } from 'tamagui';
+import { Separator, Text, View, YGroup } from 'tamagui';
 import { RButton } from '@packrat/ui';
 import useTheme from 'app/hooks/useTheme';
+import { useAddPackItem } from 'app/hooks/packs/useAddPackItem';
+import { useAuthUser } from 'app/auth/hooks';
+import { user } from 'server/src/db/schema';
 
 // type SuggestionList = typeof suggestion.Items;
 
-export function SuggestionList({ suggestion }) {
+export function SuggestionList({ suggestion, onAddItem }) {
   const [itemsList, setItemsList] = useState([]);
   const { isDark } = useTheme();
 
   useEffect(() => {
-    setItemsList(suggestion.Items);
-  }, []);
+    setItemsList(suggestion?.Items || []);
+  }, [suggestion]);
+
   return (
     <YGroup
       style={{
@@ -34,8 +36,8 @@ export function SuggestionList({ suggestion }) {
         minWidth="100%"
       >
         {itemsList.map((item, i) => (
-          <React.Fragment key={item.name}>
-            <Item item={item} />
+          <React.Fragment key={item.id}>
+            <Item item={item} onAddItem={onAddItem} />
             {i < itemsList.length - 1 && <Separator />}
           </React.Fragment>
         ))}
@@ -46,7 +48,14 @@ export function SuggestionList({ suggestion }) {
 
 SuggestionList.fileName = 'List';
 
-function Item({ item }) {
+function Item({ item, onAddItem }) {
+  const { addPackItem, isLoading } = useAddPackItem();
+
+  const handleAddItem = (item) => {
+    addPackItem(item);
+    onAddItem(item.id);
+  };
+
   return (
     <YGroup.Item>
       <View
@@ -75,7 +84,14 @@ function Item({ item }) {
             {item.unit}, {item.quantity}pcs
           </Text>
         </View>
-        <RButton style={{ borderRadius: 5 }} marginLeft="auto">
+        <RButton
+          onPress={() => {
+            handleAddItem(item);
+          }}
+          style={{ borderRadius: 5 }}
+          marginLeft="auto"
+          disabled={isLoading}
+        >
           Add
         </RButton>
       </View>
diff --git a/packages/ui/src/ThreeDotsMenu/ThreeDotsMenu.tsx b/packages/ui/src/ThreeDotsMenu/ThreeDotsMenu.tsx
index 07314982a..64b66e672 100644
--- a/packages/ui/src/ThreeDotsMenu/ThreeDotsMenu.tsx
+++ b/packages/ui/src/ThreeDotsMenu/ThreeDotsMenu.tsx
@@ -17,7 +17,6 @@ export function ThreeDotsMenu({
   onOpenChange,
   open,
 }: ThreeDotsMenuProps) {
-  console.log('ksksksks', open);
   return (
     <Popover
       size="$5"
diff --git a/server/src/services/openAi/getAISuggestionService.ts b/server/src/services/openAi/getAISuggestionService.ts
index 557ee2eeb..5ec9f23c7 100644
--- a/server/src/services/openAi/getAISuggestionService.ts
+++ b/server/src/services/openAi/getAISuggestionService.ts
@@ -120,7 +120,33 @@ export const getAISuggestionService = async (
                 Purification Straw: Lightweight and effective.
                 Portable Water Filter: Perfect for streams and lakes.
 
-            
+            What to Pack and What's Too Heavy:
+
+                Lightweight Food Options:
+
+                  Snacks:
+
+                    Instead of whole nuts, consider packing trail mix or nut butter packets. 🥜
+                    Switch granola bars with lighter energy gels or fruit leathers. 🍇
+                  Meals:
+
+                    Replace cans of food with dehydrated meals or instant soup mixes. 🥫 ➡️🍲
+                    Use whole grain wraps instead of sandwiches with heavy bread to reduce weight. 🌯
+                  Fruits:
+
+                    Sub out whole fruits for dried fruits like apricots, raisins, or banana chips. 🍎 ➡️🍏
+                    Consider fruit strips or fruit leather instead of heavier fresh fruit. 🍑
+                  Hydration:
+
+                    Instead of carrying multiple bottles of water, use a lightweight water filter to refill from natural sources. 🚰
+                    Carry electrolyte powders instead of pre-made drinks. 💧➡️⚡
+                  Tips for Packing Light:
+
+                  Portion Control: Pack smaller portions of high-calorie, nutrient-dense foods.
+                  Resealable Bags: Use ziplock bags for organizing and reducing the weight of packaging.
+                  Multipurpose Items: Bring items that can serve multiple purposes (e.g., a pack towel that doubles as a napkin).
+              
+            * Packing lightly yet efficiently can make hike more pleasant. Make sure to suggest these lightweight food options to pack.
             * Give a good reasoning and then Finally 'ALWAYS' Give the suggested and improved pack in the users original request format,
               remember the items in the pack array of of strings "name (weight and unit of measurement(lb, oz, kg, g), quantity pcs, category: category name)"
               just like the user prompt. and category is of three Either Food, Water or Essentials.`,
@@ -143,8 +169,6 @@ export const getAISuggestionService = async (
     max_retries: 2,
   });
 
-  console.log(aiResponse, refined);
-
   return {
     aiResponse,
     refined,
diff --git a/server/src/services/openAi/referredItemInformation/index.ts b/server/src/services/openAi/referredItemInformation/index.ts
index d1c65d311..6342f570f 100644
--- a/server/src/services/openAi/referredItemInformation/index.ts
+++ b/server/src/services/openAi/referredItemInformation/index.ts
@@ -4,10 +4,11 @@ export async function getPackInformation(packId) {
   if (!packId) return '';
   const packData: any = await getPackByIdService(packId);
 
-  return `You are a helpful assistant that provides hiking advice. 
-    You should only provide advice related to hiking and not generate any other type of content whatsoever.
-    General greetings and polite interactions are fine.
-    If a user asks for help outside of the hiking domain, respond with: "Sorry, I can not help with that 😅!"
+  return `You are a Helpful PackRat Assistant who provides all information and assistance to users for 
+    Hiking Adventures  🏞️  Hiking is your specialty. You are to answer questions about trails, gears, safety
+    or packing trips. Note that you are only able to assist with hiking-related questions. If the user's inquiry isn't about hiking,
+    respond with "Sorry, I can not help with that 😅!. Ready to explore the great outdoors? I'm ready to help!"
+    General greetings and polite interactions are fine. Remember to always be helpful and informative. 
 
     The user has a pack titled ${packData.name}, owned by ${packData.owner.name}. 
 
@@ -37,7 +38,79 @@ export async function getPackInformation(packId) {
     When interacting with the user:
     - Provide detailed advice on hiking-related questions.
     - Use the pack details to give personalized recommendations and optimizations.
-    - Offer suggestions to improve the user's pack considering safety, comfort, and efficiency.
+    - Here are some good guidelines to follow:
+      General:
+          Food:
+          Meals: Trail-friendly meals (freeze-dried, instant)
+          Snacks: Trail mix, energy bars, jerky, dried fruit
+          Water:
+          Hydration: Water bottles or hydration bladder
+          Purification: Water filter or purification tablets
+          Essentials:
+          Navigation: Map, compass, GPS device
+          Clothing: Weather-appropriate layers, hat, hiking boots, extra socks
+          Safety: First aid kit, personal medications, sunscreen, insect repellent
+          Gear: Comfortable backpack, headlamp with extra batteries, multi-tool
+          Documents: ID, permits, emergency contact info
+          Communication: Cell phone, portable charger or power bank
+
+      Food Guide:
+
+          Hey there, adventurers! Ready for your next hike? Here is a quick and tasty guide to fuel your journey:
+          Easy Snacks:
+          Trail Mix: Nuts, seeds, dried fruit, and chocolate bits.
+          Energy Bars: Natural ingredient bars.
+          Dried Fruits: Apricots, apple slices, raisins, dates.
+          Nuts & Seeds: Almonds, walnuts, sunflower seeds.
+          Lunch Options:
+          Sandwiches: Nut butter, cheese, or lean meat.
+          Wraps: Whole-grain tortillas with hummus, veggies, or protein.
+          Cheese & Crackers: Hard cheese and whole-grain crackers.
+          Quick Meals:
+          Instant Noodles/Couscous: Quick-cook with hot water.
+          Dehydrated Meals: Lightweight, just add water.
+
+      Essentials Guide:
+          Navigation: Map & Compass,GPS Device
+          Clothing: Quick-Dry Layers, Waterproof Jacket, Extra Socks, Hat and Sunglasses
+          Safety Gear: First Aid Kit, Multi-Tool/Knife, Whistle
+          Sun Protection: Sunscreen, Hat & Sunglasses
+          Light: Headlamp/Flashlight
+          Emergency Shelter: Bivy Sack/Space Blanket
+          Fire: Matches/Lighter
+          Backpack: Comfortable Hiking Backpack
+
+      Water Guide:
+          Water Bottles/Reservoir: Carry at least 2-3 liters.
+          Purification Straw: Lightweight and effective.
+          Portable Water Filter: Perfect for streams and lakes.
+    - What to Pack and What's Too Heavy:
+
+      Lightweight Food Options:
+
+      Snacks:
+
+      Instead of whole nuts, consider packing trail mix or nut butter packets. 🥜
+      Switch granola bars with lighter energy gels or fruit leathers. 🍇
+      Meals:
+
+      Replace cans of food with dehydrated meals or instant soup mixes. 🥫 ➡️🍲
+      Use whole grain wraps instead of sandwiches with heavy bread to reduce weight. 🌯
+      Fruits:
+
+      Sub out whole fruits for dried fruits like apricots, raisins, or banana chips. 🍎 ➡️🍏
+      Consider fruit strips or fruit leather instead of heavier fresh fruit. 🍑
+      Hydration:
+
+      Instead of carrying multiple bottles of water, use a lightweight water filter to refill from natural sources. 🚰
+      Carry electrolyte powders instead of pre-made drinks. 💧➡️⚡
+      Tips for Packing Light:
+
+      Portion Control: Pack smaller portions of high-calorie, nutrient-dense foods.
+      Resealable Bags: Use ziplock bags for organizing and reducing the weight of packaging.
+      Multipurpose Items: Bring items that can serve multiple purposes (e.g., a pack towel that doubles as a napkin).
+      Packing lightly yet efficiently can make your hike more pleasant. Make sure to add these lightweight food options to your pack and enjoy a comfortable adventure! 🌞🍏🥜🍫🌲✨
+
     - Be proactive in suggesting useful items or changes based on the pack's contents.
     - Always keep the user's trip specifics in mind, such as destination, duration, and weather conditions.
 

From d324686ea9ec8055a9051bf7025b7f7d20a468d0 Mon Sep 17 00:00:00 2001
From: Anmol Verma <anmolverma2810@gmail.com>
Date: Wed, 19 Jun 2024 23:02:04 +0530
Subject: [PATCH 060/257] Introduce zeego as a prop to RSelect

---
 packages/app/components/Dropdown.tsx |  15 ++-
 packages/app/screens/items/index.tsx | 111 ++++++-----------------
 packages/ui/src/RSelect/index.tsx    | 131 +++++++++++++++++----------
 packages/ui/src/ZDropdown/index.tsx  |  10 +-
 4 files changed, 128 insertions(+), 139 deletions(-)

diff --git a/packages/app/components/Dropdown.tsx b/packages/app/components/Dropdown.tsx
index c754df9b5..7a610b1ef 100644
--- a/packages/app/components/Dropdown.tsx
+++ b/packages/app/components/Dropdown.tsx
@@ -116,14 +116,16 @@
 
 // export default DropdownComponent;
 
+import { RSelect } from '@packrat/ui';
 import React from 'react';
 import { View, Platform } from 'react-native';
-import { RSelect } from '@packrat/ui';
 
 interface DropdownComponentProps {
   width?: string | number;
   style?: any;
   placeholder?: string;
+  native?: boolean;
+  zeego?: boolean;
   [x: string]: any; // for the rest of the props
 }
 
@@ -131,9 +133,12 @@ export const DropdownComponent: React.FC<DropdownComponentProps> = ({
   width,
   style = {},
   placeholder,
+  native = false,
+  zeego = false,
   ...props
 }) => {
   const isWeb = Platform.OS === 'web';
+
   return (
     <View
       style={[
@@ -141,9 +146,15 @@ export const DropdownComponent: React.FC<DropdownComponentProps> = ({
         !isWeb && { flexDirection: 'row', justifyContent: 'center' },
       ]}
     >
-      <RSelect placeholder={placeholder || 'Select'} {...props} />
+      <RSelect
+        placeholder={placeholder || 'Select'}
+        native={native}
+        zeego={zeego}
+        {...props}
+      />
     </View>
   );
 };
 
 export default DropdownComponent;
+
diff --git a/packages/app/screens/items/index.tsx b/packages/app/screens/items/index.tsx
index ac717040c..a6265f34d 100644
--- a/packages/app/screens/items/index.tsx
+++ b/packages/app/screens/items/index.tsx
@@ -4,28 +4,28 @@ import { MaterialIcons } from '@expo/vector-icons';
 import useTheme from 'app/hooks/useTheme';
 import { AddItemGlobal } from 'app/components/item/AddItemGlobal';
 import { ItemsTable } from 'app/components/itemtable/itemTable';
-// import { Stack } from 'expo-router';
 import useCustomStyles from 'app/hooks/useCustomStyles';
 import { useItems } from 'app/hooks/items/useItems';
 import { usePagination } from 'app/hooks/common';
 import DropdownComponent from 'app/components/Dropdown';
 import { BaseModal, RScrollView, RStack, RText } from '@packrat/ui';
 
-// import { checkNetworkConnected } from 'app/utils/netInfo';
-
-// const RTooltip: any = OriginalRTooltip;
-// const BaseModal: any = OriginalBaseModal;
-// const RButton: any = OriginalRButton;
-
 export default function Items() {
-  const { enableDarkMode, enableLightMode, isDark, isLight, currentTheme } =
-    useTheme();
-
+  const { enableDarkMode, enableLightMode, isDark, isLight, currentTheme } = useTheme();
   const { limit, handleLimitChange, page, handlePageChange } = usePagination();
   const { data, isFetching, isError } = useItems({ limit, page });
   const styles = useCustomStyles(loadStyles);
   const [value, setValue] = useState('Food');
-  const optionValues = ['Food', 'Water', 'Essentials'];
+
+  // for zeego = {false} options will be:
+  // const optionValues = ['Food', 'Water', 'Essentials'];
+  
+  // for zeego ={true} options will be:
+  const optionValues=[
+    { label: 'Food', value: 'Food' },
+    { label: 'Water', value: 'Water' },
+    { label: 'Essentials', value: 'Essentials' },
+  ];
 
   const sortItemsByCategory = (items, selectedCategory) => {
     if (!items) {
@@ -44,9 +44,7 @@ export default function Items() {
     return [...selectedCategoryItems, ...otherItems];
   };
 
-  const [sortedItems, setSortedItems] = useState(
-    sortItemsByCategory(data?.items, value),
-  );
+  const [sortedItems, setSortedItems] = useState(sortItemsByCategory(data?.items, value));
 
   const handleSort = (category) => {
     setValue(category);
@@ -59,43 +57,30 @@ export default function Items() {
     setSortedItems(sorted);
   }, [data]);
 
-
   return (
     <RScrollView>
-      {/* <Stack.Screen
-        options={{
-          title: 'Items',
-        }}
-      /> */}
       <RStack style={styles.mainContainer}>
-        <RStack
-          style={
-            styles.container
-          }
-        >
-          <RStack
-            style={
-              styles.sortContainer
-            }
-          >
+        <RStack style={styles.container}>
+          <RStack style={styles.sortContainer}>
             <RText style={{ fontWeight: 'bold' }}>Sort By:</RText>
             <DropdownComponent
               value={value}
               data={optionValues}
               onValueChange={handleSort}
               placeholder={value}
-              width='50%'
+              width="50%"
+              native={true}
+              zeego={true}
             />
           </RStack>
-         <View style={{marginBottom:10}}>
-         <BaseModal
-            title="Add a global Item"
-            trigger="Add Item"
-            // triggerComponent={<ModalTriggerButton />}
-          >
-            <AddItemGlobal />
-          </BaseModal>
-         </View>
+          <View style={{ marginBottom: 10 }}>
+            <BaseModal
+              title="Add a global Item"
+              trigger="Add Item"
+            >
+              <AddItemGlobal />
+            </BaseModal>
+          </View>
         </RStack>
         {!isError && data?.items && Array.isArray(data.items) && (
           <ItemsTable
@@ -113,47 +98,6 @@ export default function Items() {
   );
 }
 
-// const ModalTriggerButton = ({ setIsModalOpen }) => {
-//   const { currentTheme } = useTheme();
-//   const styles = useCustomStyles(loadStyles);
-
-//   return (
-//     <View
-//       style={{
-//         display: 'flex',
-//         flexDirection: 'row',
-//         marginTop: '2rem',
-//         justifyContent: 'center',
-//         alignItems: 'center',
-//       }}
-//     >
-//       <RButton
-//         style={styles.button}
-//         onPress={() => {
-//           setIsModalOpen(true);
-//         }}
-//       >
-//         Add Item
-//       </RButton>
-//       {Platform.OS === 'web' && (
-//         <RTooltip
-//           label="Add a global item"
-//           placement="top left"
-//           openDelay={500}
-//         >
-//           <RButton width={8} height={8} style={{ backgroundColor: 'none' }}>
-//             <MaterialIcons
-//               name="info-outline"
-//               size={20}
-//               color={currentTheme.colors.background}
-//             />
-//           </RButton>
-//         </RTooltip>
-//       )}
-//     </View>
-//   );
-// };
-
 const loadStyles = (theme) => {
   const { currentTheme } = theme;
 
@@ -175,13 +119,14 @@ const loadStyles = (theme) => {
       backgroundColor: currentTheme.colors.card,
       flexDirection: 'row',
       justifyContent: 'space-between',
-      width:'100%',
+      width: '100%',
       padding: 30,
       borderRadius: 10,
     },
     sortContainer: {
+      width:150,
+      justifyContent:'space-between',
       flexDirection: 'row',
-      // justifyContent:'space-between',
       alignItems: 'center',
     },
   };
diff --git a/packages/ui/src/RSelect/index.tsx b/packages/ui/src/RSelect/index.tsx
index 09a99127e..4426801e6 100644
--- a/packages/ui/src/RSelect/index.tsx
+++ b/packages/ui/src/RSelect/index.tsx
@@ -3,28 +3,29 @@ import { Check, ChevronDown } from '@tamagui/lucide-icons';
 import {
   Adapt,
   Select as OriginalSelect,
-  Text,
-  YStack,
+  Sheet,
+  YStack as OriginalYStack,
   getFontSize,
+  Text,
 } from 'tamagui';
 import { RDropdownMenu } from '../ZDropdown';
-import { Platform } from 'react-native';
 
+const YStack: any = OriginalYStack;
 const Select: any = OriginalSelect;
 
-// Entry point for the Select component
 export default function RSelect(props) {
-  const { textKey = 'label', valueKey = 'value', ...otherProps } = props;
+  const { textKey = 'label', valueKey = 'value', zeego = false, native = false, ...otherProps } = props;
+
   return (
-    <SelectItem native textKey={textKey} valueKey={valueKey} {...otherProps} />
+    <SelectItem zeego={zeego} native={native} textKey={textKey} valueKey={valueKey} {...otherProps} />
   );
 }
 
-// Function to extract option attributes from data items
 const extractOptionAttributes = (item, index, textKey, valueKey) => {
   if (typeof item === 'string' || typeof item === 'number' || typeof item === 'boolean') {
     return { text: item.toString(), value: item.toString(), index };
   }
+
   if (typeof item === 'object' && item !== null) {
     return {
       text: item[textKey] ?? item.toString(),
@@ -32,10 +33,10 @@ const extractOptionAttributes = (item, index, textKey, valueKey) => {
       index,
     };
   }
+
   return { text: 'Invalid Item', value: 'invalid', index };
 };
 
-// Component to render the Select dropdown
 export function SelectItem(props) {
   const {
     value = '',
@@ -44,7 +45,8 @@ export function SelectItem(props) {
     placeholder = 'Select an option',
     textKey = 'label',
     valueKey = 'value',
-    native,
+    native = false,
+    zeego = false,
     ...forwardedProps
   } = props;
 
@@ -54,17 +56,38 @@ export function SelectItem(props) {
     }
   };
 
-  const menuItems = useMemo(() => {
+  const options = useMemo(() => {
     if (!Array.isArray(data)) return [];
-    return data.map((item, index) => {
-      const { text, value, index: itemIndex } = extractOptionAttributes(item, index, textKey, valueKey);
-      return {
-        label: text.charAt(0).toUpperCase() + text.slice(1),
-        onSelect: () => handleChange(value),
-      };
-    });
+    return data
+      .map((item, index) => extractOptionAttributes(item, index, textKey, valueKey))
+      .map(({ text, value, index }) => (
+        <Select.Item key={`${text} + ${value}`} index={index} value={value}>
+          <Select.ItemText>
+            {text.charAt(0).toUpperCase() + text.slice(1)}
+          </Select.ItemText>
+          <Select.ItemIndicator marginLeft="auto">
+            <Check size={16} />
+          </Select.ItemIndicator>
+        </Select.Item>
+      ));
   }, [data, textKey, valueKey]);
 
+  if (options.length === 0) {
+    return <Text>No options available</Text>;
+  }
+
+  if (zeego) {
+    return (
+      <RDropdownMenu
+        menuItems={data.map((item) => ({
+          label: item[textKey],
+          onSelect: () => handleChange(item[valueKey]),
+        }))}
+        menuName={placeholder}
+      />
+    );
+  }
+
   return (
     <Select
       value={value}
@@ -72,44 +95,54 @@ export function SelectItem(props) {
       onValueChange={handleChange}
       {...forwardedProps}
     >
-      {Platform.OS === 'web' && (
-        <>
-        <Select.Trigger width={220} iconAfter={ChevronDown}>
-          <Select.Value>{value || placeholder}</Select.Value>
-        </Select.Trigger>
-        <Select.Content zIndex={200000}>
+      <Select.Trigger width={220} iconAfter={ChevronDown}>
+        <Select.Value>{placeholder}</Select.Value>
+      </Select.Trigger>
+      <Select.Content zIndex={200000}>
         <Select.Viewport minWidth={200}>
-          <Select.Group>
-            {menuItems.map(({ label, onSelect }, index) => (
-              <Select.Item key={`${label}-${index}`} value={label}>
-                <Select.ItemText>{label}</Select.ItemText>
-                <Select.ItemIndicator marginLeft="auto">
-                  <Check size={16} />
-                </Select.ItemIndicator>
-              </Select.Item>
-            ))}
-          </Select.Group>
+          <Select.Group>{options}</Select.Group>
+          {native && (
+            <YStack
+              position="absolute"
+              right={0}
+              top={0}
+              bottom={0}
+              alignItems="center"
+              justifyContent="center"
+              width={'$4'}
+              pointerEvents="none"
+            >
+              <ChevronDown size={getFontSize((props.size ?? '$true') as any)} />
+            </YStack>
+          )}
         </Select.Viewport>
-        <YStack
-          position="absolute"
-          right={0}
-          top={0}
-          bottom={0}
-          alignItems="center"
-          justifyContent="center"
-          width={'$4'}
-          pointerEvents="none"
-        >
-          <ChevronDown size={getFontSize((props.size ?? '$true') as any)} />
-        </YStack>
       </Select.Content>
-      </>
-      )}
       {native && (
         <Adapt when="sm" platform="touch">
-          <RDropdownMenu menuItems={menuItems} menuName={placeholder} />
+          <Sheet
+            native
+            modal
+            dismissOnSnapToBottom
+            animationConfig={{
+              type: 'spring',
+              damping: 20,
+              mass: 1.2,
+              stiffness: 250,
+            }}
+          >
+            <Sheet.Frame>
+              <Sheet.ScrollView>
+                <Adapt.Contents />
+              </Sheet.ScrollView>
+            </Sheet.Frame>
+            <Sheet.Overlay
+              animation="lazy"
+              enterStyle={{ opacity: 0 } as any}
+              exitStyle={{ opacity: 0 } as any}
+            />
+          </Sheet>
         </Adapt>
-      ) }
+      )}
     </Select>
   );
 }
diff --git a/packages/ui/src/ZDropdown/index.tsx b/packages/ui/src/ZDropdown/index.tsx
index 1524a5930..8e37f804d 100644
--- a/packages/ui/src/ZDropdown/index.tsx
+++ b/packages/ui/src/ZDropdown/index.tsx
@@ -1,10 +1,10 @@
+import React from 'react';
 import { ComponentProps } from 'react';
 import * as ZeegoDropdownMenu from 'zeego/dropdown-menu';
 import RButton from '../RButton';
-import RText from '../RText';
 
-type ContentProps = ComponentProps<(typeof ZeegoDropdownMenu)['Content']>;
-type ItemProps = ComponentProps<(typeof ZeegoDropdownMenu)['Item']>;
+type ContentProps = ComponentProps<typeof ZeegoDropdownMenu.Content>;
+type ItemProps = ComponentProps<typeof ZeegoDropdownMenu.Item>;
 
 const DropdownMenu = {
   ...ZeegoDropdownMenu,
@@ -21,7 +21,7 @@ const DropdownMenu = {
         }}
       />
     ),
-    'Content',
+    'Content'
   ),
   Item: ZeegoDropdownMenu.create(
     (props: ItemProps) => (
@@ -38,7 +38,7 @@ const DropdownMenu = {
         }}
       />
     ),
-    'Item',
+    'Item'
   ),
 };
 

From cf19168111d0443238d743489eeb70dd3f24ad15 Mon Sep 17 00:00:00 2001
From: Anmol Verma <anmolverma2810@gmail.com>
Date: Thu, 20 Jun 2024 00:32:20 +0530
Subject: [PATCH 061/257] Correct props for searchfilter

---
 packages/app/components/user/UserDataCard.tsx |  2 +-
 .../app/components/user/UserDetailList.tsx    | 20 ++++++++-----------
 packages/app/utils/formatNumber.ts            |  2 +-
 3 files changed, 10 insertions(+), 14 deletions(-)

diff --git a/packages/app/components/user/UserDataCard.tsx b/packages/app/components/user/UserDataCard.tsx
index a2ed1ae96..dc5bdf812 100644
--- a/packages/app/components/user/UserDataCard.tsx
+++ b/packages/app/components/user/UserDataCard.tsx
@@ -147,7 +147,7 @@ const UserDataCard = ({
                   // marginTop: '-3px',
                 }}
               >
-                Total Weight: {total_weight}g
+                Total Weight: {total_weight.toFixed(2)}g
               </RText>
             ) : (
               <RText
diff --git a/packages/app/components/user/UserDetailList.tsx b/packages/app/components/user/UserDetailList.tsx
index 0a9174a41..584707cdd 100644
--- a/packages/app/components/user/UserDetailList.tsx
+++ b/packages/app/components/user/UserDetailList.tsx
@@ -57,15 +57,14 @@ const DataList = ({ data }: DataListProps) => {
           <View style={{ width: 'auto%', paddingBottom: 10 } as any}>
             <SearchFilter
               isSortHidden={true}
-              value={searchQuery}
-              onChange={() => {
-                setSearchQuery;
-              }}
+              queryString={searchQuery}
+              setSearchQuery={setSearchQuery}
+
             />
             <FlatList
               data={filteredData.slice(0, 2)}
               horizontal={false}
-              keyExtractor={(item) => item?._id + item?.type}
+              keyExtractor={(item) =>  item?.id}
               renderItem={({ item }) => (
                 <Card key={item?._id} type={item?.type} {...item} />
               )}
@@ -89,17 +88,14 @@ const DataList = ({ data }: DataListProps) => {
             footerComponent={undefined}
           >
             <SearchFilter
-              isSortHidden={true}
-              value={searchQuery}
-              onChange={() => {
-                setSearchQuery;
-              }}
-            />
+             isSortHidden={true}
+             queryString={searchQuery}
+             setSearchQuery={setSearchQuery}/>
 
             <FlatList
               data={filteredData}
               horizontal={false}
-              keyExtractor={(item) => item?._id + item?.type}
+              keyExtractor={(item) => item?._id }
               renderItem={({ item }) => (
                 <Card key={item?._id} type={item?.type} {...item} />
               )}
diff --git a/packages/app/utils/formatNumber.ts b/packages/app/utils/formatNumber.ts
index 742ab350a..c2f2e60db 100644
--- a/packages/app/utils/formatNumber.ts
+++ b/packages/app/utils/formatNumber.ts
@@ -6,7 +6,7 @@
  */
 export function formatNumber(num: number): string {
   if (num != null) {
-    return Number(num).toLocaleString();
+    return Number(num).toFixed(2).toLocaleString();
   } else {
     return '';
   }

From f8c146187638ebbb60166ec69439ce9ae34c8db7 Mon Sep 17 00:00:00 2001
From: Andrew Bierman <abbierman101@gmail.com>
Date: Wed, 19 Jun 2024 22:02:58 -0400
Subject: [PATCH 062/257] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20remove=20preinstal?=
 =?UTF-8?q?l=20requirement=20for=20yarn,=20to=20allow=20for=20bun=20on=20l?=
 =?UTF-8?q?ow=20memory=20systems?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/package.json b/package.json
index dfb15974d..7b30cb54f 100644
--- a/package.json
+++ b/package.json
@@ -55,7 +55,7 @@
     "next": "cd apps/next && yarn dev",
     "prebuild:expo": "cd apps/expo && yarn run prebuild:clean",
     "postinstall": "yarn build-ui && yarn build:validations && yarn build-crosspath && yarn setup:env && yarn fix:packages",
-    "preinstall": "npx only-allow yarn",
+    "preinstall:yarn": "npx only-allow yarn",
     "fix:packages": "yarn patch-package",
     "regen": "yarn install --refresh-lockfile",
     "setup:env": "npx ts-node .github/scripts/env.ts",

From 4af7638ea2b49cb9977055101eb830a76ff1bf96 Mon Sep 17 00:00:00 2001
From: Andrew Bierman <94939237+andrew-bierman@users.noreply.github.com>
Date: Wed, 19 Jun 2024 22:52:46 -0400
Subject: [PATCH 063/257] =?UTF-8?q?=F0=9F=90=9B=20fix=20styles=20on=20nati?=
 =?UTF-8?q?ve?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/app/components/feed/FeedCard.tsx | 2 +-
 packages/app/screens/trip/createTrip.tsx  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/app/components/feed/FeedCard.tsx b/packages/app/components/feed/FeedCard.tsx
index 6e2f376d3..2e602f47e 100644
--- a/packages/app/components/feed/FeedCard.tsx
+++ b/packages/app/components/feed/FeedCard.tsx
@@ -126,7 +126,7 @@ export default function Card({
     <Layout>
       <View
         style={{
-          width: '80%',
+          width: '100%',
           borderRadius: 15,
           borderColor: 'lightgray',
           borderWidth: 1,
diff --git a/packages/app/screens/trip/createTrip.tsx b/packages/app/screens/trip/createTrip.tsx
index dba8a8ccf..26f1bbe8c 100644
--- a/packages/app/screens/trip/createTrip.tsx
+++ b/packages/app/screens/trip/createTrip.tsx
@@ -104,6 +104,6 @@ const loadStyles = () => ({
   },
   container: {
     gap: 50,
-    padding: 50,
+    padding: 20,
   },
 });

From 84751a5d7bed971eddb8fab5f63a06471728a8a0 Mon Sep 17 00:00:00 2001
From: Muhammad Hassan <mh7722178@gmail.com>
Date: Thu, 20 Jun 2024 17:33:20 +0500
Subject: [PATCH 064/257] Fixed Some More Types

---
 packages/app/components/card/CustomCard.tsx            |  2 +-
 .../components/card/PackCardHeader/PackCardHeader.tsx  | 10 ++++++++--
 packages/app/components/carousel/index.tsx             |  4 ++--
 packages/app/components/chat/index.tsx                 |  2 +-
 packages/app/components/dashboard/FeedPreview.tsx      |  6 ++++--
 packages/app/components/destination/index.tsx          |  3 ++-
 packages/app/components/feed/FeedCard.tsx              |  6 +++---
 packages/app/components/feed/FeedSearchFilter.tsx      |  6 +++---
 packages/app/components/map/index.tsx                  |  1 +
 9 files changed, 25 insertions(+), 15 deletions(-)
 create mode 100644 packages/app/components/map/index.tsx

diff --git a/packages/app/components/card/CustomCard.tsx b/packages/app/components/card/CustomCard.tsx
index 61190cd02..8fbfa7ad6 100644
--- a/packages/app/components/card/CustomCard.tsx
+++ b/packages/app/components/card/CustomCard.tsx
@@ -72,7 +72,7 @@ export const CustomCard = ({
           )}
         </View>
         <RSeparator />
-        {type === 'pack' && authUser?.id === data?.owner_id? (
+        {type === 'pack' && authUser?.id === data?.owner_id.id ? (
           <>
             <View
               style={
diff --git a/packages/app/components/card/PackCardHeader/PackCardHeader.tsx b/packages/app/components/card/PackCardHeader/PackCardHeader.tsx
index e27ce97e7..070f22647 100644
--- a/packages/app/components/card/PackCardHeader/PackCardHeader.tsx
+++ b/packages/app/components/card/PackCardHeader/PackCardHeader.tsx
@@ -17,7 +17,7 @@ import { useDeletePack, useFetchSinglePack } from 'app/hooks/packs';
 import { usePackTitleInput } from './usePackTitleInput';
 import { useRouter } from 'app/hooks/router';
 import { useEditPack } from 'app/hooks/packs/useEditPack';
-import { Platform } from 'react-native';
+import { Dimensions, Platform } from 'react-native';
 import { CopyPackModal } from '../../pack/CopyPackModal';
 import { View } from 'react-native';
 import { useScreenWidth } from 'app/hooks/common';
@@ -49,6 +49,12 @@ export const PackCardHeader = ({ data, title }: PackCardHeaderProps) => {
     };
     editPack(packDetails);
   };
+
+  const getCalculatedWidth = () => {
+    const windowWidth = Dimensions.get('window').width;
+    return windowWidth <= SCREEN_WIDTH ? windowWidth * 0.3 : windowWidth * 0.5;
+  };
+
   return (
     <>
       <CustomCardHeader
@@ -81,7 +87,7 @@ export const PackCardHeader = ({ data, title }: PackCardHeaderProps) => {
               />
             )}
             <View
-              style={{ width: screenWidth <= SCREEN_WIDTH ? '30vw' : '50vw' }}
+              style={{ width: getCalculatedWidth() }}
             >
               <EditableText
                 isLoading={isLoading}
diff --git a/packages/app/components/carousel/index.tsx b/packages/app/components/carousel/index.tsx
index 6b1b92bad..de4faa182 100644
--- a/packages/app/components/carousel/index.tsx
+++ b/packages/app/components/carousel/index.tsx
@@ -21,7 +21,7 @@ const { height, width } = Dimensions.get('window');
 
 const Carousel: React.FC<CarouselProps> = ({
   children = [],
-  itemWidth,
+  itemWidth ,
   iconColor,
 }) => {
   const scrollViewRef = useRef<ScrollView>(null);
@@ -31,7 +31,7 @@ const Carousel: React.FC<CarouselProps> = ({
 
   const handleScroll = (event: { nativeEvent: NativeScrollEvent }) => {
     const contentOffset = event.nativeEvent.contentOffset;
-    const newIndex = Math.round(contentOffset.x / itemWidth);
+    const newIndex = Math.round(contentOffset.x / itemWidth || undefined);
     setCurrentIndex(newIndex);
   };
 
diff --git a/packages/app/components/chat/index.tsx b/packages/app/components/chat/index.tsx
index 3db0f588f..27f173f7c 100644
--- a/packages/app/components/chat/index.tsx
+++ b/packages/app/components/chat/index.tsx
@@ -32,7 +32,7 @@ interface ChatModalTriggerProps {
 const ChatComponent: React.FC<ChatComponentProps> = ({
   showChatSelector = true,
   defaultChatId = null,
-  itemTypeId = null,
+  itemTypeId = null, 
 }) => {
   const styles = useCustomStyles(loadStyles);
   const {
diff --git a/packages/app/components/dashboard/FeedPreview.tsx b/packages/app/components/dashboard/FeedPreview.tsx
index 079f1d5d1..bbb8ea5f7 100644
--- a/packages/app/components/dashboard/FeedPreview.tsx
+++ b/packages/app/components/dashboard/FeedPreview.tsx
@@ -10,7 +10,7 @@ import loadStyles from './feedpreview.style';
 interface FeedItem {
   id: string;
   name: string;
-  type: string;
+  type: string | null;
   description: string;
 }
 
@@ -23,9 +23,11 @@ const FeedPreviewScroll: React.FC<FeedPreviewScrollProps> = ({ itemWidth }) => {
   const styles = useCustomStyles(loadStyles);
   const { data: feedData } = useFeed();
 
+  console.log('feedData', feedData)
+
   return (
     <Carousel itemWidth={itemWidth}>
-      {feedData?.map((item: FeedItem, index: number) => {
+      {feedData?.filter((item): item is FeedItem => item.type !== null).map((item: FeedItem, index: number) => {
         const linkStr = `/${item.type}/${item.id}`;
         return linkStr ? (
           <RLink
diff --git a/packages/app/components/destination/index.tsx b/packages/app/components/destination/index.tsx
index d28c3e211..6e23976be 100644
--- a/packages/app/components/destination/index.tsx
+++ b/packages/app/components/destination/index.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Platform, ScrollView, View } from 'react-native';
 import { RButton, RStack, RText as OriginalRText } from '@packrat/ui';
 import useTheme from '../../hooks/useTheme';
-import MapContainer from 'app/components/map/MapContainer';
+import { MapContainer } from 'app/components/map';
 import { defaultShape } from '../../utils/mapFunctions';
 import LargeCard from '../card/LargeCard';
 import WeatherCard from '../weather/WeatherCard';
@@ -17,6 +17,7 @@ import { useFetchWeather, useFetchWeatherWeak } from '../../hooks/weather';
 import { PlacesAutocomplete } from '../PlacesAutocomplete/PlacesAutocomplete';
 import { useRouter } from 'app/hooks/router';
 
+
 const RText: any = OriginalRText;
 
 const DestinationHeader = ({ geoJSON, selectedSearchResult }) => {
diff --git a/packages/app/components/feed/FeedCard.tsx b/packages/app/components/feed/FeedCard.tsx
index ec56a32d6..2291ea3eb 100644
--- a/packages/app/components/feed/FeedCard.tsx
+++ b/packages/app/components/feed/FeedCard.tsx
@@ -43,9 +43,9 @@ interface CardProps {
   itemPacks?: any[];
 }
 
-// interface User {
-//   id: string;
-// }
+interface User {
+  id: string;
+}
 
 export default function Card({
   type,
diff --git a/packages/app/components/feed/FeedSearchFilter.tsx b/packages/app/components/feed/FeedSearchFilter.tsx
index a54e03e29..4d1a35eda 100644
--- a/packages/app/components/feed/FeedSearchFilter.tsx
+++ b/packages/app/components/feed/FeedSearchFilter.tsx
@@ -61,7 +61,7 @@ const FeedSearchFilter = ({
   const styles = useCustomStyles(loadStyles);
   const [searchValue, setSearchValue] = useState('');
 
-  const onSearch = (search) => setSearchQuery(search);
+  const onSearch = (search) => setSearchQuery(search || undefined);
   const { screenWidth } = useScreenWidth();
 
   return (
@@ -120,7 +120,7 @@ const FeedSearchFilter = ({
                   id="single-switch"
                   size="$1.5"
                   width={ screenWidth <= SCREEN_WIDTH ?"10vw" : '3vw'}
-                  checked={selectedTypes.pack}
+                  checked={selectedTypes?.pack}
                   onCheckedChange={handleTogglePack}
                 >
                   <Switch.Thumb />
@@ -136,7 +136,7 @@ const FeedSearchFilter = ({
                   id="two-switch"
                   size="$1.5"
                   width={ screenWidth <= SCREEN_WIDTH ?"10vw" : '3vw'}
-                  checked={selectedTypes.trip}
+                  checked={selectedTypes?.trip}
                   onCheckedChange={handleToggleTrip}
                 >
                   <Switch.Thumb />
diff --git a/packages/app/components/map/index.tsx b/packages/app/components/map/index.tsx
new file mode 100644
index 000000000..9a8ac062c
--- /dev/null
+++ b/packages/app/components/map/index.tsx
@@ -0,0 +1 @@
+export * from './MapContainer'
\ No newline at end of file

From faa2baebf37a7099012aac0850ae89ed56f5b90a Mon Sep 17 00:00:00 2001
From: pinocchio-life-like <icbr19fl@gmail.com>
Date: Thu, 20 Jun 2024 15:49:26 +0300
Subject: [PATCH 065/257] first version finalized

---
 packages/app/components/chat/chat.style.tsx |  37 ++++++-
 packages/app/components/chat/index.tsx      | 112 ++++----------------
 packages/app/constants/api.ts               |   4 +-
 3 files changed, 61 insertions(+), 92 deletions(-)

diff --git a/packages/app/components/chat/chat.style.tsx b/packages/app/components/chat/chat.style.tsx
index 412095929..e3d56af2e 100644
--- a/packages/app/components/chat/chat.style.tsx
+++ b/packages/app/components/chat/chat.style.tsx
@@ -9,7 +9,17 @@ export const loadStyles = (theme: any) => {
   const { currentTheme } = theme;
 
   return {
-    container: { flex: 1, padding: 16 },
+    container: {
+      flex: 1,
+      padding: 16,
+      position: 'fixed',
+      right: 250,
+      bottom: 30,
+      width: 60,
+      height: 60,
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
     headerText: { fontSize: 24, fontWeight: 'bold' },
     flatList: { flexGrow: 1, justifyContent: 'flex-end' },
     inputContainer: {
@@ -120,5 +130,30 @@ export const loadStyles = (theme: any) => {
       lineHeight: 18,
       color: 'rgba(224, 224, 224, 0.9)',
     },
+    logo: {
+      shadowColor: '#000',
+      shadowOffset: {
+        width: 0,
+        height: 2,
+      },
+      shadowOpacity: 0.75,
+      shadowRadius: 1.24,
+      elevation: 3,
+    },
+    animatedView: {
+      position: 'absolute',
+      bottom: 60,
+      right: 5,
+      width: 450,
+      backgroundColor: '#fff',
+      borderRadius: 10,
+      padding: 4,
+      zIndex: 1000,
+      shadowColor: '#000',
+      shadowOffset: { width: 2, height: 4 },
+      shadowOpacity: 0.25,
+      shadowRadius: 3.84,
+      elevation: 5,
+    },
   };
 };
diff --git a/packages/app/components/chat/index.tsx b/packages/app/components/chat/index.tsx
index 403d71eeb..bdb787068 100644
--- a/packages/app/components/chat/index.tsx
+++ b/packages/app/components/chat/index.tsx
@@ -193,18 +193,24 @@ const SuggestionComponent = ({ itemTypeId = null, type = null }) => {
   return (
     <View>
       <RStack style={{ flex: 1 }}>
-        <ScrollView
-          onContentSizeChange={handleLayout}
-          style={{ maxHeight: 620, width: '100%', borderRadius: 10 }}
-          showsVerticalScrollIndicator={false}
-          contentContainerStyle={{ flexGrow: 1, justifyContent: 'flex-end' }}
-        >
-          <SuggestionDescription data={suggestions.reasoning} />
-          <SuggestionList
-            suggestion={suggestions.suggestion}
-            onAddItem={removeItem}
-          />
-        </ScrollView>
+        {!suggestions.suggestion.Items ? (
+          <Text style={{ width: '100%', textAlign: 'center' }}>
+            Allow me to analyze your pack and help!
+          </Text>
+        ) : (
+          <ScrollView
+            onContentSizeChange={handleLayout}
+            style={{ maxHeight: 620, width: '100%', borderRadius: 10 }}
+            showsVerticalScrollIndicator={false}
+            contentContainerStyle={{ flexGrow: 1, justifyContent: 'flex-end' }}
+          >
+            <SuggestionDescription data={suggestions.reasoning} />
+            <SuggestionList
+              suggestion={suggestions.suggestion}
+              onAddItem={removeItem}
+            />
+          </ScrollView>
+        )}
         <RStack
           style={{
             marginTop: 10,
@@ -215,7 +221,6 @@ const SuggestionComponent = ({ itemTypeId = null, type = null }) => {
         >
           <RButton
             onClick={() => {
-              // console.log(groupItemsByCategory(suggestion));
               handleSubmitAnalysis();
             }}
             disabled={isAnalysisLoading}
@@ -250,20 +255,7 @@ const ChatModalTrigger: React.FC<ChatModalTriggerProps> = ({
   }, [isChatOpen]);
 
   return (
-    <View
-      style={
-        (styles.container,
-        {
-          position: 'fixed',
-          right: 250,
-          bottom: 30,
-          width: 60,
-          height: 60,
-          justifyContent: 'center',
-          alignItems: 'center',
-        })
-      }
-    >
+    <View style={styles.container}>
       <TouchableOpacity
         style={{
           width: 50,
@@ -291,38 +283,12 @@ const ChatModalTrigger: React.FC<ChatModalTriggerProps> = ({
           }}
           width={40}
           height={40}
-          style={{
-            ...styles.logo,
-            shadowColor: '#000',
-            shadowOffset: {
-              width: 0,
-              height: 2,
-            },
-            shadowOpacity: 0.75,
-            shadowRadius: 1.24,
-            elevation: 3,
-          }}
+          style={styles.logo}
           alt="PackRat Logo"
         />
       </TouchableOpacity>
       {isItemOpen && (
-        <Animated.View
-          style={{
-            position: 'absolute',
-            bottom: 60,
-            right: 5,
-            width: 308,
-            backgroundColor: '#000',
-            borderRadius: 10,
-            padding: 4,
-            zIndex: 1000,
-            shadowColor: '#000',
-            shadowOffset: { width: 0, height: 2 },
-            shadowOpacity: 0.25,
-            shadowRadius: 3.84,
-            elevation: 5,
-          }}
-        >
+        <Animated.View style={{ ...styles.animatedView, width: 308 }}>
           <View style={{ width: 300 }}>
             {actionItems.map((item, index) => {
               const { icon, color, title, description, type } = item;
@@ -344,23 +310,7 @@ const ChatModalTrigger: React.FC<ChatModalTriggerProps> = ({
         </Animated.View>
       )}
       {isChatOpen && (
-        <Animated.View
-          style={{
-            position: 'absolute',
-            bottom: 60,
-            right: 5,
-            width: 450,
-            backgroundColor: '#fff',
-            borderRadius: 10,
-            padding: 4,
-            zIndex: 1000,
-            shadowColor: '#000',
-            shadowOffset: { width: 0, height: 2 },
-            shadowOpacity: 0.25,
-            shadowRadius: 3.84,
-            elevation: 5,
-          }}
-        >
+        <Animated.View style={{ ...styles.animatedView, width: 450 }}>
           <RButton
             position="absolute"
             backgroundColor="$background"
@@ -377,23 +327,7 @@ const ChatModalTrigger: React.FC<ChatModalTriggerProps> = ({
         </Animated.View>
       )}
       {isSuggestionsOpen && (
-        <Animated.View
-          style={{
-            position: 'absolute',
-            bottom: 60,
-            right: 5,
-            width: 450,
-            backgroundColor: '#fff',
-            borderRadius: 10,
-            padding: 4,
-            zIndex: 1000,
-            shadowColor: '#000',
-            shadowOffset: { width: 0, height: 2 },
-            shadowOpacity: 0.25,
-            shadowRadius: 3.84,
-            elevation: 5,
-          }}
-        >
+        <Animated.View style={styles.animatedView}>
           <RButton
             position="absolute"
             backgroundColor="$background"
diff --git a/packages/app/constants/api.ts b/packages/app/constants/api.ts
index 858ac20dc..e7cc9ced6 100644
--- a/packages/app/constants/api.ts
+++ b/packages/app/constants/api.ts
@@ -1,5 +1,5 @@
-// import { API_URL } from '@packrat/config';
-const API_URL = import.meta.env.VITE_API_URL;
+import { API_URL } from '@packrat/config';
+// const API_URL = import.meta.env.VITE_API_URL;
 
 /**
  * The api url.

From 2cba098c00ddb263b883bfda4fa86671c0314226 Mon Sep 17 00:00:00 2001
From: pinocchio-life-like <icbr19fl@gmail.com>
Date: Thu, 20 Jun 2024 16:50:49 +0300
Subject: [PATCH 066/257] ll

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

diff --git a/packages/app/constants/api.ts b/packages/app/constants/api.ts
index 3de673360..858ac20dc 100644
--- a/packages/app/constants/api.ts
+++ b/packages/app/constants/api.ts
@@ -1,4 +1,5 @@
-import { API_URL } from '@packrat/config';
+// import { API_URL } from '@packrat/config';
+const API_URL = import.meta.env.VITE_API_URL;
 
 /**
  * The api url.

From 3cbdd321becf597c55d03f92a1b63ffefdbbfdd8 Mon Sep 17 00:00:00 2001
From: Anmol Verma <anmolverma2810@gmail.com>
Date: Thu, 20 Jun 2024 20:09:19 +0530
Subject: [PATCH 067/257] dropdown changes

---
 packages/app/components/Dropdown.tsx          |  2 +-
 .../card/PackCardHeader/PackCardHeader.tsx    | 96 +++++++------------
 .../card/PackCardHeader/usePackTitleInput.ts  | 21 +++-
 packages/app/components/pack/AddPack.tsx      | 36 ++++---
 .../pack_table/TableHelperComponents.tsx      | 36 ++++---
 packages/app/hooks/packs/useAddNewPack.ts     |  5 +-
 packages/ui/src/EditableText/EditableText.tsx |  4 +-
 .../ui/src/EditableText/useEditableText.ts    |  9 +-
 8 files changed, 99 insertions(+), 110 deletions(-)

diff --git a/packages/app/components/Dropdown.tsx b/packages/app/components/Dropdown.tsx
index 7a610b1ef..a0d338b9b 100644
--- a/packages/app/components/Dropdown.tsx
+++ b/packages/app/components/Dropdown.tsx
@@ -123,7 +123,7 @@ import { View, Platform } from 'react-native';
 interface DropdownComponentProps {
   width?: string | number;
   style?: any;
-  placeholder?: string;
+  placeholder?:any;
   native?: boolean;
   zeego?: boolean;
   [x: string]: any; // for the rest of the props
diff --git a/packages/app/components/card/PackCardHeader/PackCardHeader.tsx b/packages/app/components/card/PackCardHeader/PackCardHeader.tsx
index bfba0b687..b757ee743 100644
--- a/packages/app/components/card/PackCardHeader/PackCardHeader.tsx
+++ b/packages/app/components/card/PackCardHeader/PackCardHeader.tsx
@@ -4,24 +4,16 @@ import { CustomCardHeader } from '../CustomCardHeader';
 import { AntDesign, MaterialIcons } from '@expo/vector-icons';
 import { useAuthUser } from 'app/auth/hooks';
 import {
-  ThreeDotsMenu,
-  YStack,
-  RButton,
-  EditableText,
-  RIconButton,
   RStack,
-  RInput,
-  RText,
-  RContextMenu,
+  RIconButton,
+  EditableText,
+  
 } from '@packrat/ui';
-import { useDeletePack, useFetchSinglePack } from 'app/hooks/packs';
+import { useFetchSinglePack, useDeletePack } from 'app/hooks/packs';
 import { usePackTitleInput } from './usePackTitleInput';
 import { useRouter } from 'app/hooks/router';
-import { useEditPack } from 'app/hooks/packs/useEditPack';
-import { Platform } from 'react-native';
-import { CopyPackModal } from '../../pack/CopyPackModal';
-import { View } from 'react-native';
-
+import { Platform, View } from 'react-native';
+import DropdownComponent from 'app/components/Dropdown';
 
 interface PackCardHeaderProps {
   data: any;
@@ -42,25 +34,15 @@ export const PackCardHeader = ({ data, title }: PackCardHeaderProps) => {
     setIsOpen,
   } = usePackTitleInput(data);
 
-  const { isDark, currentTheme } = useTheme();
-
+  const { isDark } = useTheme();
   const router = useRouter();
-  const { editPack } = useEditPack();
 
-  const handleDelete = () => {
-    handleDeletePack();
-    setIsOpen(false);
-  };
-  const handleSavePack = () => {
-    const packDetails = {
-      id: data.id,
-      name: data.name,
-      is_public: data.is_public,
-    };
-    setIsOpen(false);
-    editPack(packDetails);
-  };
-  
+  const optionValues = [
+    { label: 'Edit', value: 'Edit' },
+    { label: 'Save', value: 'Save' },
+    { label: 'Delete', value: 'Delete' },
+  ];
+
   return (
     <>
       <CustomCardHeader
@@ -93,42 +75,34 @@ export const PackCardHeader = ({ data, title }: PackCardHeaderProps) => {
                 }}
               />
             )}
-            
-              <EditableText
-                isLoading={isLoading}
-                defaultValue={title}
-                isFocused={isEditMode}
-                onSave={handleSaveTitle}
-              />
+
+            <EditableText
+              isLoading={isLoading} 
+              defaultValue={title} 
+              isFocused={isEditMode} 
+              onSave={handleSaveTitle} 
+            />
           </RStack>
         }
         actionsComponent={
-          user?.id === data.owner_id && (
-            Platform.OS === "web" ? (
-              <ThreeDotsMenu open={isOpen} onOpenChange={handleActionsOpenChange}>
-              <YStack space="$1">
-                <RButton onPress={handleEdit}>Edit</RButton>
-                <RButton onPress={handleSavePack}>Save</RButton>
-                <RButton onPress={handleDelete}>Delete</RButton>
-              </YStack>
-            </ThreeDotsMenu>
-            ) : (
-              <RContextMenu
-              menuItems={[
-                { label: 'Edit', onSelect:handleEdit },
-                { label: 'Save', onSelect: handleSavePack },
-                {label:'Delete', onSelect:handleDeletePack}
-              ]}
-              menuName={
+          user?.id === data.owner_id &&
+          <View style={{ alignSelf: 'flex-end', flexDirection: 'row', width: '15%', justifyContent: 'flex-end' }}>
+            <DropdownComponent
+              value={null}
+              data={optionValues}
+              onValueChange={(value) => handleActionsOpenChange(value)}
+              placeholder={
                 <RIconButton
-          backgroundColor="transparent"
-          icon={<MaterialIcons name="more-horiz" size={18} />}
-          style={{ padding: 0 }}
-        />
+                  backgroundColor="transparent"
+                  icon={<MaterialIcons name="more-horiz" size={18} />}
+                  style={{ padding: 0 }}
+                />
               }
+              width="100%"
+              native={true}
+              zeego={true}
             />
-            )
-          )
+          </View>
         }
       />
     </>
diff --git a/packages/app/components/card/PackCardHeader/usePackTitleInput.ts b/packages/app/components/card/PackCardHeader/usePackTitleInput.ts
index 53c119077..76cd6b937 100644
--- a/packages/app/components/card/PackCardHeader/usePackTitleInput.ts
+++ b/packages/app/components/card/PackCardHeader/usePackTitleInput.ts
@@ -1,4 +1,5 @@
 import { useEditPack } from 'app/hooks/packs';
+import { useDeletePack } from 'app/hooks/packs';
 import { useRef, useState } from 'react';
 
 export const usePackTitleInput = (data) => {
@@ -6,6 +7,7 @@ export const usePackTitleInput = (data) => {
   const isEditModeRef = useRef(false);
   const [isOpen, setIsOpen] = useState(false);
   const { editPack } = useEditPack();
+  const { handleDeletePack } = useDeletePack(data.id);
 
   const handleActionsOpenChange = (state) => {
     setIsOpen(true);
@@ -14,11 +16,24 @@ export const usePackTitleInput = (data) => {
       setIsEditMode(true);
       setIsOpen(true);
     }
+    switch (state) {
+      case 'Edit':
+        handleEdit();
+        break;
+      case 'Save':
+        handleSaveTitle(data.name);
+        break;
+      case 'Delete':
+        handleDelete();
+        break;
+      default:
+        break;
+    }
   };
-
   const handleEdit = () => {
     isEditModeRef.current = true;
     setIsOpen(false);
+    setIsEditMode(true);
   };
 
   const handleSaveTitle = (title) => {
@@ -31,6 +46,10 @@ export const usePackTitleInput = (data) => {
     editPack(packDetails);
     setIsEditMode(false);
   };
+  const handleDelete = () => {
+    handleDeletePack();
+    setIsOpen(false);
+  };
 
   return {
     handleActionsOpenChange,
diff --git a/packages/app/components/pack/AddPack.tsx b/packages/app/components/pack/AddPack.tsx
index 9282bfd81..bcd3ac959 100644
--- a/packages/app/components/pack/AddPack.tsx
+++ b/packages/app/components/pack/AddPack.tsx
@@ -15,6 +15,7 @@ import { useAddNewPack, usePackId } from 'app/hooks/packs';
 import { useRouter } from 'app/hooks/router';
 import { addPackSchema } from '@packrat/validations';
 import { RContextMenu } from '@packrat/ui/src/RContextMenu';
+import DropdownComponent from 'app/components/Dropdown';
 
 const FormSelect: any = OriginalFormSelect;
 
@@ -24,7 +25,7 @@ export const AddPack = ({ isCreatingTrip = false, onSuccess }) => {
     useTheme();
   const styles = useCustomStyles(loadStyles);
   const router = useRouter();
-  const [_, setPackIdParam] = usePackId();
+  // const [_, setPackIdParam] = usePackId();
 
   const {
     addNewPackAsync,
@@ -52,14 +53,20 @@ export const AddPack = ({ isCreatingTrip = false, onSuccess }) => {
         return;
       }
 
-      setPackIdParam(response.id);
+      // setPackIdParam(response.id);
     } catch {}
   };
 
   const handleonValueChange = (itemValue) => {
-    setIsPublic(itemValue == 'true');
+    if(itemValue==='Yes'){
+      setIsPublic(true)
+    }else{
+      setIsPublic(false)
+    }
+    
   };
 
+ 
   return (
     <View style={styles.container}>
       <View style={styles.mobileStyle}>
@@ -73,24 +80,15 @@ export const AddPack = ({ isCreatingTrip = false, onSuccess }) => {
             label="Name"
             style={{ textAlign: 'left', width: 200 }}
           />
-          {Platform.OS === 'web' ? (
-            <FormSelect
+          <DropdownComponent
+              value={null}
+              data={packSelectOptions}
               onValueChange={handleonValueChange}
-              options={packSelectOptions}
-              name="isPublic"
-              label="Is Public"
-              accessibilityLabel="Choose Service"
-              placeholder={'Is Public'}
+              placeholder='Is Public:'
+              width="50%"
+              native={true}
+              zeego={true}
             />
-          ) : (
-            <RContextMenu
-              menuItems={[
-                { label: 'Yes', onSelect: () => setIsPublic(true) },
-                { label: 'No', onSelect: () => setIsPublic(false) },
-              ]}
-              menuName="Is Public"
-            />
-          )}
 
           <SubmitButton style={styles.btn} onSubmit={handleAddPack}>
             <RText style={{ color: currentTheme.colors.text }}>
diff --git a/packages/app/components/pack_table/TableHelperComponents.tsx b/packages/app/components/pack_table/TableHelperComponents.tsx
index c13531989..70453d569 100644
--- a/packages/app/components/pack_table/TableHelperComponents.tsx
+++ b/packages/app/components/pack_table/TableHelperComponents.tsx
@@ -49,6 +49,12 @@ interface CategoryRowProps {
 interface TitleRowProps {
   title: string;
 }
+const optionValues=[
+  { label: 'kg', value: 'kg' },
+  { label: 'g', value: 'g' },
+  { label: 'lb', value: 'lb' },
+  {label:'oz', value:'oz'}
+];
 
 const TitleRow = ({ title }: TitleRowProps) => {
   const styles = useCustomStyles(loadStyles);
@@ -112,27 +118,17 @@ const IgnoreItemCheckbox = ({
 
 const WeightUnitDropdown = ({ value, onChange }: WeightUnitDropdownProps) => {
   return (
-    Platform.OS === 'web' ? (
+    <View style={{alignSelf:'center', width:'50%'}}>
       <DropdownComponent
-      value={value}
-      accessibilityLabel="Select weight unit"
-      placeholder="Select weight unit"
-      onValueChange={(itemValue) => onChange(itemValue)}
-      data={['kg', 'g', 'lb', 'oz']}
-    />
-    ) : (
-      <RContextMenu
-              menuItems={[
-                { label: 'kg', onSelect:() => onChange('kg') },
-                { label: 'g', onSelect: () => onChange('g') },
-                {label:'lb', onSelect:() => onChange('lb')},
-                {label:'oz', onSelect:() => onChange('oz')}
-              ]}
-              menuName={
-                <RButton>Select weight unit</RButton>
-              }
-            />
-    )
+    value={value}
+    data={optionValues}
+    onValueChange={(itemValue) => onChange(itemValue)}
+    placeholder='Select weight unit'
+    width="100%"
+    native={true}
+    zeego={true}
+  />
+    </View>
     
   );
 };
diff --git a/packages/app/hooks/packs/useAddNewPack.ts b/packages/app/hooks/packs/useAddNewPack.ts
index f63c5281c..1d27298ba 100644
--- a/packages/app/hooks/packs/useAddNewPack.ts
+++ b/packages/app/hooks/packs/useAddNewPack.ts
@@ -9,10 +9,11 @@ export const useAddNewPack = () => {
   const utils = queryTrpc.useContext();
 
   const packSelectOptions = [
-    { value: '1', label: 'Yes' },
-    { value: '0', label: 'No' },
+    { value: 'Yes', label: 'Yes' },
+    { value: 'No', label: 'No' },
   ];
 
+
   const isPublicOption = packSelectOptions[0];
   if (!isPublicOption) {
     throw new Error('No select options available.');
diff --git a/packages/ui/src/EditableText/EditableText.tsx b/packages/ui/src/EditableText/EditableText.tsx
index d1e8c6039..4020d79a1 100644
--- a/packages/ui/src/EditableText/EditableText.tsx
+++ b/packages/ui/src/EditableText/EditableText.tsx
@@ -1,6 +1,5 @@
-import { useRef } from 'react';
+import React, { useRef } from 'react';
 import { TextInput } from 'react-native';
-
 import { useEditableText } from './useEditableText';
 import { LoadingPlaceholder } from '../LoadingPlaceholder';
 import { useInputFocus } from './useInputFocus';
@@ -38,7 +37,6 @@ export const EditableText = ({
         style={{
           fontSize: 20,
           fontWeight: 'bold',
-          // TODO change to theme value: currentTheme.colors.textPrimary
           color: '#0284c7',
           pointerEvents: 'auto',
         }}
diff --git a/packages/ui/src/EditableText/useEditableText.ts b/packages/ui/src/EditableText/useEditableText.ts
index 9444a42e9..4f54c74ff 100644
--- a/packages/ui/src/EditableText/useEditableText.ts
+++ b/packages/ui/src/EditableText/useEditableText.ts
@@ -1,11 +1,12 @@
 import { useEffect, useState } from 'react';
 
 export const useEditableText = ({ value, onChange, defaultValue, onSave }) => {
-  const [internalValue, setInternalValue] = useState(defaultValue);
+  const [internalValue, setInternalValue] = useState(value ?? defaultValue);
+
   const currentValue = onChange === undefined ? internalValue : value;
 
   const handleChange = (e) => {
-    const newValue = e.target.value;
+    const newValue = e.nativeEvent.text; // For React Native
 
     if (onChange === undefined) {
       setInternalValue(newValue);
@@ -25,7 +26,9 @@ export const useEditableText = ({ value, onChange, defaultValue, onSave }) => {
   }, [value]);
 
   useEffect(() => {
-    setInternalValue(defaultValue);
+    if (value === undefined) {
+      setInternalValue(defaultValue);
+    }
   }, [defaultValue]);
 
   return {

From 3ba1810d5da4e8b8e749ad8e6bad112a1d08be34 Mon Sep 17 00:00:00 2001
From: Anmol Verma <anmolverma2810@gmail.com>
Date: Thu, 20 Jun 2024 20:30:05 +0530
Subject: [PATCH 068/257] Replace touchableopacity with view

---
 packages/app/components/dashboard/QuickActionSection.tsx | 2 +-
 packages/app/components/dashboard/Section.tsx            | 9 ++++-----
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/packages/app/components/dashboard/QuickActionSection.tsx b/packages/app/components/dashboard/QuickActionSection.tsx
index 53c421407..40bfe4a16 100644
--- a/packages/app/components/dashboard/QuickActionSection.tsx
+++ b/packages/app/components/dashboard/QuickActionSection.tsx
@@ -29,7 +29,7 @@ const loadStyles = (theme) => {
   return {
     section: {
       marginBottom: 20,
-      paddingHorizontal: 20, // Added padding here.
+      paddingHorizontal: 20,
       display: 'flex',
       justifyContent: 'center',
     },
diff --git a/packages/app/components/dashboard/Section.tsx b/packages/app/components/dashboard/Section.tsx
index 867ce952b..f87122946 100644
--- a/packages/app/components/dashboard/Section.tsx
+++ b/packages/app/components/dashboard/Section.tsx
@@ -12,13 +12,11 @@ interface SectionProps {
 const Section: React.FC<SectionProps> = ({ children, onPress }) => {
   const styles = useCustomStyles(loadStyles);
   return (
-    <TouchableOpacity style={styles.section} onPress={onPress}>
-      {/* <View style={styles.section} onPress={onPress}> */}
+      <View style={styles.section} >
       <RCard style={{ borderRadius: 8 }}>
         <RCard.Header style={styles.card}>{children}</RCard.Header>
       </RCard>
-      {/* </View> */}
-    </TouchableOpacity>
+      </View>
   );
 };
 
@@ -32,8 +30,9 @@ const loadStyles = (theme: any) => {
       justifyContent: 'center',
       alignItems: 'center',
       width: '100%',
-      backgroundColor: currentTheme.colors.secondaryBlue,
       borderRadius: 8,
+      backgroundColor: currentTheme.colors.secondaryBlue,
+
     },
   };
 };

From 1e792f08bc950ed99482a43d54eee66d94aa8045 Mon Sep 17 00:00:00 2001
From: pinocchio-life-like <icbr19fl@gmail.com>
Date: Fri, 21 Jun 2024 08:44:40 +0300
Subject: [PATCH 069/257] google login fix

---
 packages/app/constants/api.ts                 |   4 +-
 packages/app/screens/LoginScreen.tsx          |  48 ++-
 packages/app/screens/RegisterScreen.tsx       | 149 ++-----
 .../src/Bento/forms/layouts/SignInScreen.tsx  | 210 +++------
 .../src/Bento/forms/layouts/SignUpScreen.tsx  | 403 +++++-------------
 5 files changed, 236 insertions(+), 578 deletions(-)

diff --git a/packages/app/constants/api.ts b/packages/app/constants/api.ts
index 858ac20dc..e7cc9ced6 100644
--- a/packages/app/constants/api.ts
+++ b/packages/app/constants/api.ts
@@ -1,5 +1,5 @@
-// import { API_URL } from '@packrat/config';
-const API_URL = import.meta.env.VITE_API_URL;
+import { API_URL } from '@packrat/config';
+// const API_URL = import.meta.env.VITE_API_URL;
 
 /**
  * The api url.
diff --git a/packages/app/screens/LoginScreen.tsx b/packages/app/screens/LoginScreen.tsx
index 6195e5a5f..15fc8dd6d 100644
--- a/packages/app/screens/LoginScreen.tsx
+++ b/packages/app/screens/LoginScreen.tsx
@@ -1,38 +1,35 @@
-import React, { useEffect } from 'react';
+import React, { useState } from 'react';
 import { View } from 'react-native';
-import {
-  RHeading as OriginalRHeading,
-  RStack,
-  RButton as OriginalRButton,
-  RText as OriginalRText,
-  RIconButton,
-  RScrollView,
-  Form as OriginalForm,
-  FormInput,
-  SubmitButton,
-  RLink,
-} from '@packrat/ui';
-import { FontAwesome } from '@expo/vector-icons';
-import { NODE_ENV } from '@packrat/config';
+import { RStack, RScrollView } from '@packrat/ui';
 import useTheme from '../hooks/useTheme';
 import { useGoogleAuth, useLogin } from 'app/auth/hooks';
-import { userSignIn as userSignInSchema } from '@packrat/validations';
 import { SignInScreen } from '@packrat/ui/src/Bento/forms/layouts';
 
-const RText: any = OriginalRText;
-const RHeading: any = OriginalRHeading;
-const Form: any = OriginalForm;
-const RButton: any = OriginalRButton;
-
 const demoUser = {
   email: 'zoot3@email.com',
   password: '12345678',
 };
 
 export default function Login() {
-  const { handleLogin } = useLogin();
   const { enableGoogleLogin, isGoogleSignInReady, promptAsync } =
     useGoogleAuth();
+
+  function useSignIn() {
+    const [status, setStatus] = useState<'idle' | 'loading' | 'success'>(
+      'idle',
+    );
+    const { handleLogin } = useLogin();
+    return {
+      signInStatus: status,
+      signIn: async (data) => {
+        await setStatus('loading');
+        await handleLogin(data);
+        setStatus('idle');
+      },
+    };
+  }
+
+  const { signIn, signInStatus } = useSignIn();
   const { currentTheme } = useTheme();
 
   return (
@@ -56,7 +53,12 @@ export default function Login() {
               maxWidth: 400,
             }}
           >
-            <SignInScreen mode="signin"/>
+            <SignInScreen
+              promptAsync={promptAsync}
+              signIn={signIn}
+              signInStatus={signInStatus}
+              isGoogleSignInReady={isGoogleSignInReady}
+            />
           </View>
         </RStack>
       </RStack>
diff --git a/packages/app/screens/RegisterScreen.tsx b/packages/app/screens/RegisterScreen.tsx
index 39f94349d..d14c05e42 100644
--- a/packages/app/screens/RegisterScreen.tsx
+++ b/packages/app/screens/RegisterScreen.tsx
@@ -1,28 +1,30 @@
 import { View } from 'react-native';
-import {
-  RHeading as OriginalRHeading,
-  RStack,
-  RText as OriginalRText,
-  RIconButton,
-  RScrollView,
-  Form,
-  FormInput,
-  SubmitButton,
-  RLink,
-} from '@packrat/ui';
-import { FontAwesome } from '@expo/vector-icons';
+import { RScrollView } from '@packrat/ui';
 import useTheme from '../hooks/useTheme';
 import { useRegisterUser, useGoogleAuth } from 'app/auth/hooks';
-import { userSignUp } from '@packrat/validations';
-import { SignInScreen } from '@packrat/ui/src/Bento/forms/layouts';
-
-const RText: any = OriginalRText;
-const RHeading: any = OriginalRHeading;
+import { SignUpScreen } from '@packrat/ui/src/Bento/forms/layouts';
+import { useState } from 'react';
 
 export default function Register() {
   const { currentTheme } = useTheme();
-  const { registerUser } = useRegisterUser();
-  const { promptAsync } = useGoogleAuth();
+  const { promptAsync, isGoogleSignInReady } = useGoogleAuth();
+
+  function useSignup() {
+    const [status, setStatus] = useState<'idle' | 'loading' | 'success'>(
+      'idle',
+    );
+    const { registerUser } = useRegisterUser();
+    return {
+      signUpStatus: status,
+      signup: async (data) => {
+        setStatus('loading');
+        await registerUser(data);
+        setStatus('idle');
+      },
+    };
+  }
+
+  const { signup, signUpStatus } = useSignup();
 
   return (
     <RScrollView contentContainerStyle={{ paddingBottom: 20 } as any}>
@@ -44,109 +46,12 @@ export default function Register() {
             maxWidth: 400,
           }}
         >
-          <SignInScreen mode="signup"/> 
-          {/* <RHeading
-            fontSize={32}
-            color={
-              currentTheme.colors.background === '#0284c7'
-                ? currentTheme.colors.black
-                : 'white'
-            }
-            fontWeight="semibold"
-          >
-            Welcome
-          </RHeading> */}
-          {/* <RHeading
-            color="grey"
-            fontWeight="medium"
-            fontSize={14}
-            style={{ marginTop: 8 }}
-          >
-            Sign up to continue!
-          </RHeading> */}
-          {/* <Form validationSchema={userSignUp}> */}
-            {/* <RStack style={{ marginTop: 16, gap: 8 }}> */}
-              {/* <FormInput label="Name" name="name" /> */}
-
-              {/* <FormInput
-                label="Email ID"
-                keyboardType="email-address"
-                name="email"
-              /> */}
-
-              {/* <FormInput label="Username" name="username" /> */}
-
-              {/* <FormInput label="Password" secureTextEntry name="password" /> */}
-
-              {/* <SubmitButton
-                onSubmit={registerUser}
-                style={{ marginTop: 16, backgroundColor: 'mediumpurple' }}
-              >
-                {'Sign up'}
-              </SubmitButton> */}
-              {/* <RStack
-                style={{
-                  marginTop: 16,
-                  flexDirection: 'row',
-                  justifyContent: 'center',
-                  gap: 4,
-                }}
-              >
-                <RText fontSize={14} color="grey">
-                  Already a User?
-                </RText>
-                <RLink href="/sign-in" style={{ textDecoration: 'none' }}>
-                  <RText
-                    style={{
-                      color: '#818cf8',
-                      fontSize: 14,
-                      fontWeight: 400,
-                    }}
-                  >
-                    Login Here
-                  </RText>
-                </RLink>
-              </RStack> */}
-              {/* Google register */}
-              {/* <RStack
-                style={{
-                  marginTop: 8,
-                  flexDirection: 'row',
-                  justifyContent: 'center',
-                }}
-              >
-                <RText color="grey" fontWeight="medium" fontSize={14}>
-                  Or
-                </RText>
-              </RStack> */}
-              {/* Google register */}
-              {/* <RStack
-                style={{
-                  marginTop: 8,
-                  flexDirection: 'row',
-                  justifyContent: 'center',
-                  alignItems: 'center',
-                }}
-              >
-                <RIconButton
-                  onPress={async () => await promptAsync()}
-                  backgroundColor="red"
-                  style={{ width: '100%', color: 'white' }}
-                  icon={
-                    <FontAwesome
-                      name="google"
-                      size={16}
-                      color={currentTheme.colors.white}
-                    />
-                  }
-                >
-                  Sign up with Google
-                </RIconButton>
-              </RStack> */}
-              {/* Google register */}
-            {/* </RStack> */}
-          {/* </Form> */}
-
+          <SignUpScreen
+            promptAsync={promptAsync}
+            signup={signup}
+            signUpStatus={signUpStatus}
+            isGoogleSignInReady={isGoogleSignInReady}
+          />
         </View>
       </View>
     </RScrollView>
diff --git a/packages/ui/src/Bento/forms/layouts/SignInScreen.tsx b/packages/ui/src/Bento/forms/layouts/SignInScreen.tsx
index 35d14bcf0..14d937aea 100644
--- a/packages/ui/src/Bento/forms/layouts/SignInScreen.tsx
+++ b/packages/ui/src/Bento/forms/layouts/SignInScreen.tsx
@@ -1,8 +1,6 @@
 // import { Facebook, Github } from '@tamagui/lucide-icons';
-import { useState } from 'react';
 import {
   AnimatePresence,
-  Button,
   H1,
   Paragraph,
   Separator,
@@ -14,56 +12,16 @@ import {
 import { FormCard } from './components/layoutParts';
 import { RLink } from '@packrat/ui';
 import { Form, FormInput, SubmitButton } from '@packrat/ui';
-import { userSignUp } from '@packrat/validations';
 import { userSignIn } from '@packrat/validations';
-import { useRegisterUser, useGoogleAuth, useLogin } from 'app/auth/hooks';
 import { FontAwesome } from '@expo/vector-icons';
-import {RIconButton} from '@packrat/ui';
-import useTheme from 'app/hooks/useTheme';
-
-
-type mode = 'signup' | 'signin';
-
-/** simulate signin */
-
-/** ------ EXAMPLE ------ */
-export function SignInScreen({ mode }: mode) {
-  function useSignIn() {
-    const [status, setStatus] = useState<'idle' | 'loading' | 'success'>(
-      'idle',
-    );
-    const { handleLogin } = useLogin();
-    return {
-      signInStatus: status,
-      signIn: async (data) => {
-        await setStatus('loading');
-        console.log(status);
-        await handleLogin(data);
-        setStatus('idle');
-      },
-    };
-  }
-
-  function useSignup() {
-    const [status, setStatus] = useState<'idle' | 'loading' | 'success'>(
-      'idle',
-    );
-    const { registerUser } = useRegisterUser();
-    return {
-      signUpStatus: status,
-      signup: async (data) => {
-        setStatus('loading');
-        await registerUser(data);
-        setStatus('idle');
-      },
-    };
-  }
-  const { signIn, signInStatus } = useSignIn();
-  const { signup, signUpStatus } = useSignup();
-  const { promptAsync } = useGoogleAuth();
-  const { currentTheme } = useTheme();
-
+import { RIconButton } from '@packrat/ui';
 
+export function SignInScreen({
+  promptAsync,
+  signIn,
+  signInStatus,
+  isGoogleSignInReady,
+}) {
   return (
     <FormCard>
       <View
@@ -80,32 +38,20 @@ export function SignInScreen({ mode }: mode) {
         }}
       >
         <H1 alignSelf="center" size="$8" $group-window-xs={{ size: '$7' }}>
-          {mode === 'signup'
-            ? 'Sign up to your account'
-            : 'Sign in to your account'}
+          Sign in to your account
         </H1>
-        <Form validationSchema={mode === 'signup' ? userSignUp : userSignIn}>
+        <Form validationSchema={userSignIn}>
           <View flexDirection="column" gap="$3">
-            {mode === 'signup' && <FormInput label="Name" name="name" />}
             <FormInput
               label="Email ID"
               keyboardType="email-address"
               name="email"
             />
-            {mode === 'signup' && (
-              <FormInput label="Username" name="username" />
-            )}
             <FormInput label="Password" secureTextEntry name="password" />
             <Theme inverse>
               <SubmitButton
-                disabled={
-                  mode === 'signup'
-                    ? signInStatus === 'loading'
-                    : signUpStatus === 'loading'
-                }
-                onSubmit={(data) =>
-                  mode === 'signup' ? signup(data) : signIn(data)
-                }
+                disabled={signInStatus === 'loading'}
+                onSubmit={(data) => signIn(data)}
                 style={{
                   marginTop: 16,
                   backgroundColor: '#232323',
@@ -114,60 +60,69 @@ export function SignInScreen({ mode }: mode) {
                 width="100%"
                 iconAfter={
                   <AnimatePresence>
-                    {signUpStatus === 'loading' ||
-                      (signInStatus === 'loading' && (
-                        <Spinner
-                          color="$color"
-                          key="loading-spinner"
-                          opacity={1}
-                          scale={1}
-                          animation="quick"
-                          position="absolute"
-                          left="60%"
-                          enterStyle={{
-                            opacity: 0,
-                            scale: 0.5,
-                          }}
-                          exitStyle={{
-                            opacity: 0,
-                            scale: 0.5,
-                          }}
-                        />
-                      ))}
+                    {signInStatus === 'loading' && (
+                      <Spinner
+                        color="$color"
+                        key="loading-spinner"
+                        opacity={1}
+                        scale={1}
+                        animation="quick"
+                        position="absolute"
+                        left="60%"
+                        enterStyle={{
+                          opacity: 0,
+                          scale: 0.5,
+                        }}
+                        exitStyle={{
+                          opacity: 0,
+                          scale: 0.5,
+                        }}
+                      />
+                    )}
                   </AnimatePresence>
                 }
               >
-                {mode === 'signup' ? 'Sign Up' : 'Sign In'}
+                Sign In
               </SubmitButton>
             </Theme>
           </View>
-          <View flexDirection="column" gap="$3" width="100%" alignItems="center">
-          <Theme>
-            <View flexDirection="row" width="100%" alignItems="center" gap="$4">
-              <Separator />
-              <Paragraph>Or</Paragraph>
-              <Separator />
-            </View>
-            <View flexDirection="row" flexWrap="wrap" gap="$3">
-            <RIconButton
-                flex={1}
-                onPress={async () => await promptAsync()}
-                icon={
-                  <FontAwesome
-                    name="google"
-                    size={16}
-                  />
-                }
+          <View
+            flexDirection="column"
+            gap="$3"
+            width="100%"
+            alignItems="center"
+          >
+            <Theme>
+              <View
+                flexDirection="row"
+                width="100%"
+                alignItems="center"
+                gap="$4"
               >
-                Continue with Google
-              </RIconButton>
-            </View>
-          </Theme>
-        </View>
+                <Separator />
+                <Paragraph>Or</Paragraph>
+                <Separator />
+              </View>
+              <View flexDirection="row" flexWrap="wrap" gap="$3">
+                <RIconButton
+                  disabled={!isGoogleSignInReady}
+                  flex={1}
+                  onPress={async (event) => {
+                    event.preventDefault();
+                    await promptAsync();
+                  }}
+                  icon={<FontAwesome name="google" size={16} />}
+                >
+                  Continue with Google
+                </RIconButton>
+              </View>
+              <ForgotPasswordLink />
+            </Theme>
+          </View>
         </Form>
-        
-        <View style={{alignItems : 'center', width : '100%'}}>
-        {mode === 'signin' ? <SignUpLink /> : <SignInLink />}
+
+        <View style={{ alignItems: 'center', width: '100%' }}>
+          <SignUpLink />
         </View>
       </View>
     </FormCard>
@@ -176,21 +131,6 @@ export function SignInScreen({ mode }: mode) {
 
 SignInScreen.fileName = 'SignInScreen';
 
-// Swap for your own Link
-const Link = ({
-  href,
-  children,
-}: {
-  href: string;
-  children: React.ReactNode;
-}) => {
-  return (
-    <View href={href} tag="a">
-      {children}
-    </View>
-  );
-};
-
 const SignUpLink = () => {
   return (
     <RLink href={`/register`}>
@@ -209,24 +149,6 @@ const SignUpLink = () => {
   );
 };
 
-const SignInLink = () => {
-  return (
-    <RLink href={`/sign-in`}>
-      <Paragraph textDecorationStyle="unset" ta="center">
-        Already have an account?{' '}
-        <SizableText
-          hoverStyle={{
-            color: '$colorHover',
-          }}
-          textDecorationLine="underline"
-        >
-          Sign in
-        </SizableText>
-      </Paragraph>
-    </RLink>
-  );
-};
-
 const ForgotPasswordLink = () => {
   return (
     <RLink href={`/password-reset`}>
diff --git a/packages/ui/src/Bento/forms/layouts/SignUpScreen.tsx b/packages/ui/src/Bento/forms/layouts/SignUpScreen.tsx
index dc70a0c8d..30ee5c092 100644
--- a/packages/ui/src/Bento/forms/layouts/SignUpScreen.tsx
+++ b/packages/ui/src/Bento/forms/layouts/SignUpScreen.tsx
@@ -1,248 +1,130 @@
-import { Camera, Check, Eye, EyeOff } from '@tamagui/lucide-icons';
-import { useId, useState } from 'react';
-import { Image } from 'react-native';
+// import { Facebook, Github } from '@tamagui/lucide-icons';
 import {
   AnimatePresence,
-  Button,
-  Checkbox,
   H1,
-  Label,
+  Paragraph,
+  Separator,
   SizableText,
   Spinner,
-  Stack,
-  Switch,
   Theme,
   View,
-  useEvent,
 } from 'tamagui';
 import { FormCard } from './components/layoutParts';
-import { Input } from '../inputs/components/inputsParts';
+import { RLink } from '@packrat/ui';
+import { Form, FormInput, SubmitButton } from '@packrat/ui';
+import { userSignUp } from '@packrat/validations';
+import { FontAwesome } from '@expo/vector-icons';
+import { RIconButton } from '@packrat/ui';
 
-/** simulate signin */
-function useSignIn() {
-  const [status, setStatus] = useState<'idle' | 'loading' | 'success'>('idle');
-  return {
-    status: status,
-    signUp: () => {
-      setStatus('loading');
-      setTimeout(() => {
-        setStatus('success');
-      }, 2000);
-    },
-  };
-}
-
-/** ------ EXAMPLE ------ */
-export function SignUpScreen() {
-  const uniqueId = useId();
-  const { signUp, status } = useSignIn();
-  const [showPassword, setShowPassword] = useState(false);
-  const [receiveNotification, setReceiveNotification] = useState(false);
+export function SignUpScreen({
+  promptAsync,
+  signup,
+  signUpStatus,
+  isGoogleSignInReady,
+}) {
   return (
     <FormCard>
       <View
         flexDirection="column"
         alignItems="stretch"
+        minWidth="100%"
         maxWidth="100%"
-        width={450}
         gap="$4"
-        $group-window-xs={{
-          gap: '$3',
-          paddingVertical: '$6',
-          paddingHorizontal: '$5',
+        padding="$4"
+        paddingVertical="$6"
+        $group-window-gtSm={{
+          paddingVertical: '$4',
+          width: 400,
         }}
       >
-        <H1 size="$9" fontWeight="bold">
-          Sign Up
+        <H1 alignSelf="center" size="$8" $group-window-xs={{ size: '$7' }}>
+          Create an account
         </H1>
-        <View flexDirection="row" flexWrap="wrap" width="100%" gap="$4">
-          <View
-            flexDirection="column"
-            flex={1}
-            gap="$1"
-            minWidth="100%"
-            $group-window-gtXs={{ minWidth: 'inherit' }}
-          >
-            <Input size="$4">
-              <Input.Label htmlFor={uniqueId + 'first-name'}>
-                First Name
-              </Input.Label>
-              <Input.Box minWidth="100%">
-                <Input.Area id={uniqueId + 'first-name'} />
-              </Input.Box>
-            </Input>
-          </View>
-          <View flexDirection="column" flex={1} gap="$1">
-            <Input size="$4">
-              <Input.Label htmlFor={uniqueId + 'last-name'}>
-                Last Name
-              </Input.Label>
-              <Input.Box>
-                <Input.Area id={uniqueId + 'last-name'} />
-              </Input.Box>
-            </Input>
-          </View>
-        </View>
-        <Input size="$4">
-          <Input.Label htmlFor={uniqueId + 'password'}>Password</Input.Label>
-          <Input.Box>
-            <Input.Area
-              id={uniqueId + 'password'}
-              secureTextEntry={!showPassword}
+        <Form validationSchema={userSignUp}>
+          <View flexDirection="column" gap="$3">
+            <FormInput label="Name" name="name" />
+            <FormInput
+              label="Email ID"
+              keyboardType="email-address"
+              name="email"
             />
-            <Input.Icon
-              cursor="pointer"
-              onPress={() => setShowPassword(!showPassword)}
-            >
-              {showPassword ? (
-                <Eye color="$gray11" />
-              ) : (
-                <EyeOff color="$gray11" />
-              )}
-            </Input.Icon>
-          </Input.Box>
-        </Input>
-        <Input size="$4">
-          <Input.Label htmlFor={uniqueId + 'repeat-password'}>
-            Repeat the password
-          </Input.Label>
-          <Input.Box>
-            <Input.Area secureTextEntry id={uniqueId + 'repeat-password'} />
-          </Input.Box>
-        </Input>
-        <View flexDirection="row" flexWrap="wrap" gap="$4">
-          <Input flex={1} size="$4">
-            <Input.Label htmlFor={uniqueId + 'city'}>City</Input.Label>
-            <Input.Box>
-              <Input.Area id={uniqueId + 'city'} />
-            </Input.Box>
-          </Input>
-          <Input flex={1} size="$4">
-            <Input.Label htmlFor={uniqueId + 'postal'}>
-              Postal code / ZIP
-            </Input.Label>
-            <Input.Box>
-              <Input.Area
-                inputMode="decimal"
-                id={uniqueId + 'postal'}
-                placeholder="1005"
-              />
-            </Input.Box>
-          </Input>
-        </View>
-        <View flexDirection="column" gap="$1">
-          <Input size="$4">
-            <Input.Label htmlFor={uniqueId + 'street'}>Street Name</Input.Label>
-            <Input.Box>
-              <Input.Area id={uniqueId + 'street'} />
-            </Input.Box>
-          </Input>
-        </View>
-        <View
-          borderWidth={1}
-          borderColor="$borderColor"
-          borderStyle="dotted"
-          flexDirection="column"
-          alignItems="center"
-          gap="$3"
-          paddingVertical="$6"
-          borderRadius="$4"
-        >
-          <Label htmlFor={uniqueId + 'add-pic'} size="$3">
-            Add Profile picture
-          </Label>
+            <FormInput label="Username" name="username" />
+            <FormInput label="Password" secureTextEntry name="password" />
+            <Theme inverse>
+              <SubmitButton
+                disabled={signUpStatus === 'loading'}
+                onSubmit={(data) => signup(data)}
+                style={{
+                  marginTop: 16,
+                  backgroundColor: '#232323',
+                  color: 'white',
+                }}
+                width="100%"
+                iconAfter={
+                  <AnimatePresence>
+                    {signUpStatus === 'loading' && (
+                      <Spinner
+                        color="$color"
+                        key="loading-spinner"
+                        opacity={1}
+                        scale={1}
+                        animation="quick"
+                        position="absolute"
+                        left="60%"
+                        enterStyle={{
+                          opacity: 0,
+                          scale: 0.5,
+                        }}
+                        exitStyle={{
+                          opacity: 0,
+                          scale: 0.5,
+                        }}
+                      />
+                    )}
+                  </AnimatePresence>
+                }
+              >
+                Sign Up
+              </SubmitButton>
+            </Theme>
+          </View>
           <View
-            focusable
-            backgroundColor="$background"
-            borderColor="$borderColor"
-            borderWidth={1}
-            borderRadius={10}
-            focusStyle={{
-              backgroundColor: '$backgroundFocus',
-              borderColor: '$borderColorFocus',
-            }}
-            hoverStyle={{
-              backgroundColor: '$backgroundHover',
-              borderColor: '$borderColorHover',
-            }}
-            cursor="pointer"
-            tag="button"
-            height="$8"
-            width="$8"
-            id={uniqueId + 'add-pic'}
-            theme="alt1"
+            flexDirection="column"
+            gap="$3"
+            width="100%"
+            alignItems="center"
           >
-            <Image
-              source={{
-                uri: '',
-              }}
-            />
-            <Stack
-              theme="alt1"
-              position="absolute"
-              width="100%"
-              height="100%"
-              justifyContent="center"
-              alignItems="center"
-            >
-              <Camera />
-            </Stack>
+            <Theme>
+              <View
+                flexDirection="row"
+                width="100%"
+                alignItems="center"
+                gap="$4"
+              >
+                <Separator />
+                <Paragraph>Or</Paragraph>
+                <Separator />
+              </View>
+              <View flexDirection="row" flexWrap="wrap" gap="$3">
+                <RIconButton
+                  disabled={!isGoogleSignInReady}
+                  flex={1}
+                  onPress={async (event) => {
+                    event.preventDefault();
+                    await promptAsync();
+                  }}
+                  icon={<FontAwesome name="google" size={16} />}
+                >
+                  Continue with Google
+                </RIconButton>
+              </View>
+            </Theme>
           </View>
+        </Form>
+
+        <View style={{ alignItems: 'center', width: '100%' }}>
+          <SignInLink />
         </View>
-        <VerticalCheckboxes />
-        <View flexDirection="row" alignItems="center">
-          <Label theme="alt1" htmlFor={uniqueId + 'notf'}>
-            Receive notifications
-          </Label>
-          <Switch
-            id={uniqueId + 'notf'}
-            checked={receiveNotification}
-            onCheckedChange={setReceiveNotification}
-            marginLeft="auto"
-            size="$2"
-          >
-            <Switch.Thumb animation="bouncy" />
-          </Switch>
-        </View>
-        <Theme inverse>
-          <Button
-            disabled={status === 'loading'}
-            onPress={signUp}
-            cursor={status === 'loading' ? 'progress' : 'pointer'}
-            alignSelf="flex-end"
-            minWidth="100%"
-            $gtSm={{
-              maxWidth: '$12',
-              minWidth: '$12',
-            }}
-            iconAfter={
-              <AnimatePresence>
-                {status === 'loading' && (
-                  <Spinner
-                    size="small"
-                    color="$color"
-                    key="loading-spinner"
-                    opacity={1}
-                    position="absolute"
-                    scale={0.5}
-                    left={110}
-                    animation="quick"
-                    enterStyle={{
-                      opacity: 0,
-                      scale: 0.5,
-                    }}
-                    exitStyle={{
-                      opacity: 0,
-                      scale: 0.5,
-                    }}
-                  />
-                )}
-              </AnimatePresence>
-            }
-          >
-            Sign Up
-          </Button>
-        </Theme>
       </View>
     </FormCard>
   );
@@ -250,73 +132,20 @@ export function SignUpScreen() {
 
 SignUpScreen.fileName = 'SignUpScreen';
 
-export function VerticalCheckboxes() {
-  const [values, setValues] = useState([
-    {
-      id: 'hor-developer',
-      label: 'Developer',
-      checked: false,
-    },
-    {
-      id: 'hor-designer',
-      label: 'Designer',
-      checked: false,
-    },
-  ]);
-  const toggleValue = (value: string) => {
-    setValues((prev) =>
-      prev.map((item) => ({
-        ...item,
-        checked: item.id === value ? !item.checked : item.checked,
-      })),
-    );
-  };
+const SignInLink = () => {
   return (
-    <View flexDirection="column" gap="$2.5">
-      <SizableText size="$5">Customize content</SizableText>
-      <View flexDirection="column" gap="$1">
-        <SizableText size="$4" fontWeight="300" col="$gray10">
-          Select type of user:
+    <RLink href={`/sign-in`}>
+      <Paragraph textDecorationStyle="unset" ta="center">
+        Already have an account?{' '}
+        <SizableText
+          hoverStyle={{
+            color: '$colorHover',
+          }}
+          textDecorationLine="underline"
+        >
+          Sign in
         </SizableText>
-        <View flexDirection="column">
-          {values.map(({ id, label, checked }) => (
-            <Item
-              key={label}
-              id={id}
-              toggleValue={toggleValue}
-              label={label}
-              checked={checked}
-            />
-          ))}
-        </View>
-      </View>
-    </View>
+      </Paragraph>
+    </RLink>
   );
-}
-
-function Item({
-  id,
-  toggleValue,
-  label,
-  checked,
-}: {
-  id: string;
-  toggleValue: (value: string) => void;
-  label: string;
-  checked: boolean;
-}) {
-  const onCheckedChange = useEvent(() => toggleValue(id));
-  return (
-    <View flexDirection="row" width={150} alignItems="center" gap="$3">
-      <Checkbox id={id} checked={checked} onCheckedChange={onCheckedChange}>
-        <Checkbox.Indicator>
-          <Check />
-        </Checkbox.Indicator>
-      </Checkbox>
-
-      <Label size="$3" htmlFor={id}>
-        {label}
-      </Label>
-    </View>
-  );
-}
+};

From 8dea2df02e39cfc9c90b8eb420a94833423dc9b3 Mon Sep 17 00:00:00 2001
From: Anmol Verma <anmolverma2810@gmail.com>
Date: Fri, 21 Jun 2024 18:28:36 +0530
Subject: [PATCH 070/257] Dropdown changes and fix for some warnings

---
 packages/app/components/card/CustomCard.tsx   |  1 +
 packages/app/components/chat/index.tsx        |  2 +-
 packages/app/components/item/AddItem.tsx      |  4 +-
 packages/app/components/item/ItemForm.tsx     | 27 +++++++++--
 .../components/navigation/NavigationList.tsx  |  6 +--
 packages/app/components/pack/AddPack.tsx      |  2 +-
 packages/ui/src/form/lib/LmSelect.tsx         | 47 +++++++++----------
 7 files changed, 54 insertions(+), 35 deletions(-)

diff --git a/packages/app/components/card/CustomCard.tsx b/packages/app/components/card/CustomCard.tsx
index 3167bab31..1bb060e87 100644
--- a/packages/app/components/card/CustomCard.tsx
+++ b/packages/app/components/card/CustomCard.tsx
@@ -49,6 +49,7 @@ export const CustomCard = ({
         isWeb && {
           borderRadius: 10,
           padding: isWeb ? '15 25' : 0,
+          width:'80%'
         },
       ]}
     >
diff --git a/packages/app/components/chat/index.tsx b/packages/app/components/chat/index.tsx
index 3db0f588f..88e38d7e5 100644
--- a/packages/app/components/chat/index.tsx
+++ b/packages/app/components/chat/index.tsx
@@ -160,7 +160,7 @@ const ChatModalTrigger: React.FC<ChatModalTriggerProps> = ({ itemTypeId }) => {
               },
               shadowOpacity: 0.75,
               shadowRadius: 1.24,
-              elevation: 3,
+              // elevation: 3,
             }}
             alt="PackRat Logo"
           />
diff --git a/packages/app/components/item/AddItem.tsx b/packages/app/components/item/AddItem.tsx
index b23feadc7..dd7e14e6f 100644
--- a/packages/app/components/item/AddItem.tsx
+++ b/packages/app/components/item/AddItem.tsx
@@ -2,7 +2,7 @@ import { View } from 'react-native';
 import { ItemForm } from './ItemForm'; // assuming you moved the form related code to a separate component
 import { useAddPackItem } from 'app/hooks/packs/useAddPackItem';
 import { useEditPackItem } from 'app/hooks/packs/useEditPackItem';
-import { usePackId } from 'app/hooks/packs/usePackId';
+// import { usePackId } from 'app/hooks/packs/usePackId';
 import {
   addItem as addItemSchema,
   editItem as editItemSchema,
@@ -50,7 +50,7 @@ export const AddItem = ({
   isItemPage,
   setIsAddItemModalOpen = () => {},
 }: AddItemProps) => {
-  const [currPackId] = usePackId();
+  // const [currPackId] = usePackId();
 
   const user = useAuthUser();
 
diff --git a/packages/app/components/item/ItemForm.tsx b/packages/app/components/item/ItemForm.tsx
index 2a4566f4c..b74ed057f 100644
--- a/packages/app/components/item/ItemForm.tsx
+++ b/packages/app/components/item/ItemForm.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import {
   RText,
   RStack,
@@ -8,11 +8,12 @@ import {
   FormSelect as OriginalFormSelect,
   FormRadioGroup as OriginalFormRadioGroup,
 } from '@packrat/ui';
-import { View } from 'react-native';
+import { Platform, View } from 'react-native';
 
 import { ItemCategoryEnum } from '../../constants/itemCategory';
 import useTheme from '../../hooks/useTheme';
 import { type Item } from '@packrat/validations';
+import DropdownComponent from 'app/components/Dropdown';
 
 const Form: any = OriginalForm;
 const FormSelect: any = OriginalFormSelect;
@@ -20,6 +21,7 @@ const FormRadioGroup: any = OriginalFormRadioGroup;
 
 const data = ['lb', 'oz', 'kg', 'g'].map((key) => ({ label: key, value: key }));
 
+
 interface ItemFormProps {
   handleSubmit: (data: Item) => void;
   showSubmitButton?: boolean;
@@ -57,11 +59,19 @@ export const ItemForm = ({
   }
   const { enableDarkMode, enableLightMode, isDark, isLight, currentTheme } =
     useTheme();
+    const [selectedUnit, setSelectedUnit] = useState('lb')
+
 
   const radioOptions = Object.values(ItemCategoryEnum)
     .filter((value) => !(hasWaterAdded && value === ItemCategoryEnum.WATER))
     .map((radioOption) => ({ label: radioOption, value: radioOption }));
 
+  const  handleUnitChange = (i) => {
+    console.log(i)
+    setSelectedUnit(i)
+  }
+
+
   return (
     <View>
       <Form
@@ -87,12 +97,23 @@ export const ItemForm = ({
               <FormInput name="weight" placeholder="Weight" isDecimal={true} />
             </View>
             {data && (
-              <FormSelect
+              Platform.OS === 'web' ? (
+                <FormSelect
                 options={data}
                 name="unit"
                 placeholder={'Unit'}
                 width="100"
               />
+              ) : (
+             <DropdownComponent
+             value={selectedUnit}
+             data={data}
+             onValueChange={handleUnitChange}
+             placeholder={selectedUnit}
+             width="50%"
+             native={true}
+             zeego={true}
+           />)
             )}
           </View>
           <FormInput
diff --git a/packages/app/components/navigation/NavigationList.tsx b/packages/app/components/navigation/NavigationList.tsx
index 2f85a023c..c5c7cc6c7 100644
--- a/packages/app/components/navigation/NavigationList.tsx
+++ b/packages/app/components/navigation/NavigationList.tsx
@@ -18,7 +18,7 @@ export const NavigationList: React.FC<NavigationListProps> = ({
   const { navigationItems } = useNavigationList();
   return (
     <>
-      {navigationItems?.map(({ type, ...Item }) => {
+      {navigationItems?.map(({ type, ...Item },index) => {
         const item = Item as any;
         return (
           <View
@@ -32,13 +32,13 @@ export const NavigationList: React.FC<NavigationListProps> = ({
             hoverStyle={{
               bg: currentTheme.colors.secondaryBlue as any,
             }}
-            key={item.href}
+            key={item.href+index}
           >
             {type === 'link' ? (
               <NavigationItem
                 item={item}
                 itemStyle={itemStyle}
-                key={item.href}
+                key={item.href+index}
                 onSelect={onItemSelect}
                 isMobileView={isMobileView}
               />
diff --git a/packages/app/components/pack/AddPack.tsx b/packages/app/components/pack/AddPack.tsx
index bcd3ac959..1b379e10e 100644
--- a/packages/app/components/pack/AddPack.tsx
+++ b/packages/app/components/pack/AddPack.tsx
@@ -11,7 +11,7 @@ import {
 import { BaseModal } from '@packrat/ui';
 import useTheme from '../../hooks/useTheme';
 import useCustomStyles from 'app/hooks/useCustomStyles';
-import { useAddNewPack, usePackId } from 'app/hooks/packs';
+import { useAddNewPack,} from 'app/hooks/packs';
 import { useRouter } from 'app/hooks/router';
 import { addPackSchema } from '@packrat/validations';
 import { RContextMenu } from '@packrat/ui/src/RContextMenu';
diff --git a/packages/ui/src/form/lib/LmSelect.tsx b/packages/ui/src/form/lib/LmSelect.tsx
index 4b11a287e..a926eba49 100644
--- a/packages/ui/src/form/lib/LmSelect.tsx
+++ b/packages/ui/src/form/lib/LmSelect.tsx
@@ -62,7 +62,26 @@ export function LmSelect({
     value ?? defaultValue ?? '',
   );
   const id = useId();
-  // rest.size = rest.size || '$4'
+
+  const handleChange = (val: string) => {
+    setSelectVal(val);
+    if (typeof onValueChange === 'function') {
+      onValueChange(val);
+    }
+  };
+
+  const memoizedOptions = useMemo(
+    () =>
+      options.map((item, i) => (
+        <Select.Item index={i} key={item.value} value={`${item.value}`}>
+          <Select.ItemText>{item.label}</Select.ItemText>
+          <Select.ItemIndicator marginLeft="auto">
+            <CheckRegular size={16} />
+          </Select.ItemIndicator>
+        </Select.Item>
+      )),
+    [options]
+  );
 
   return (
     <LmFormFieldContainer
@@ -86,17 +105,11 @@ export function LmSelect({
         disablePreventBodyScroll
         {...rest}
         value={selectVal}
-        onValueChange={(val) => {
-          setSelectVal(val);
-          if (typeof onValueChange === 'function') {
-            onValueChange(val);
-          }
-        }}
+        onValueChange={handleChange}
       >
         <Select.Trigger
           width={fullWidth ? '100%' : width}
           iconAfter={<CaretDownRegular />}
-          // minHeight={rest.size}
         >
           <Select.Value placeholder={placeholder} />
         </Select.Trigger>
@@ -135,24 +148,8 @@ export function LmSelect({
           <Select.Viewport>
             <Select.Group>
               {dropDownLabel && <Select.Label>{dropDownLabel}</Select.Label>}
-              {useMemo(
-                () =>
-                  options.map((item, i) => (
-                    <Select.Item
-                      index={i}
-                      key={item.value}
-                      value={`${item.value}`}
-                    >
-                      <Select.ItemText>{item.label}</Select.ItemText>
-                      <Select.ItemIndicator marginLeft="auto">
-                        <CheckRegular size={16} />
-                      </Select.ItemIndicator>
-                    </Select.Item>
-                  )),
-                [options],
-              )}
+              {memoizedOptions}
             </Select.Group>
-            {/* Native gets an extra icon */}
             {rest.native && (
               <YStack
                 position="absolute"

From 3321d9f98b7d070c4232e2db73a15ff7c339a8d0 Mon Sep 17 00:00:00 2001
From: Muhammad Hassan <mh7722178@gmail.com>
Date: Fri, 21 Jun 2024 19:01:25 +0500
Subject: [PATCH 071/257] Some More Types Fixed

---
 .../(drawer)/(tabs)/(stack)/about/index.tsx   |  2 +-
 .../(tabs)/(stack)/appearance/index.tsx       |  4 ++--
 .../(stack)/destination/[destinationId].tsx   |  5 ++---
 .../(drawer)/(tabs)/(stack)/pack/[id].tsx     |  4 ++--
 .../(drawer)/(tabs)/(stack)/pack/create.tsx   |  2 +-
 .../(drawer)/(tabs)/(stack)/packs/index.tsx   |  4 ++--
 .../(drawer)/(tabs)/(stack)/profile/[id].tsx  |  4 ++--
 .../(tabs)/(stack)/profile/settings/index.tsx |  2 +-
 .../(drawer)/(tabs)/(stack)/trip/[tripId].tsx |  4 ++--
 .../(drawer)/(tabs)/(stack)/trip/create.tsx   |  2 +-
 .../(drawer)/(tabs)/(stack)/trips/index.tsx   |  2 +-
 .../expo/app/(app)/(drawer)/(tabs)/search.tsx | 19 ++++++++++------
 apps/expo/app/(app)/modal.tsx                 | 22 ++++++++++---------
 apps/expo/app/(auth)/password-reset.tsx       |  4 ++--
 apps/expo/metro.config.js                     |  2 +-
 apps/next/pages/_app.tsx                      |  1 +
 packages/app/components/carousel/index.tsx    |  2 +-
 packages/app/components/chat/index.tsx        |  8 ++++---
 packages/app/components/feed/FeedCard.tsx     |  8 +++----
 .../app/components/feed/FeedSearchFilter.tsx  |  6 ++++-
 .../components/navigation/Navbar/Navbar.tsx   |  2 +-
 packages/app/components/pack/AddPack.tsx      |  7 +++++-
 .../app/components/pack/CopyPackModal.tsx     |  2 +-
 packages/app/components/pack/PackDetails.tsx  |  4 ++--
 packages/app/components/pack_table/Table.tsx  |  2 +-
 packages/app/hooks/chat/useChat.ts            |  6 ++---
 26 files changed, 74 insertions(+), 56 deletions(-)

diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/about/index.tsx b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/about/index.tsx
index 25c02fc2b..373202fb6 100644
--- a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/about/index.tsx
+++ b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/about/index.tsx
@@ -18,10 +18,10 @@ export default function AboutRoute() {
         </Head>
       )}
       <Stack.Screen
+        name="About"
         options={{
           // https://reactnavigation.org/docs/headers#setting-the-header-title
           title: 'About',
-          name: 'About',
           // https://reactnavigation.org/docs/headers#adjusting-header-styles
 
           // https://reactnavigation.org/docs/headers#replacing-the-title-with-a-custom-component
diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/appearance/index.tsx b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/appearance/index.tsx
index 662cb1903..d1a473f1f 100644
--- a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/appearance/index.tsx
+++ b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/appearance/index.tsx
@@ -12,10 +12,10 @@ export default function Appearance() {
         </Head>
       )}
       <Stack.Screen
+        name="Appearance"
         options={{
           // https://reactnavigation.org/docs/headers#setting-the-header-title
-          title: 'Appearance',
-          name: 'Appearance',
+          title: 'Appearance'
           // https://reactnavigation.org/docs/headers#adjusting-header-styles
 
           // https://reactnavigation.org/docs/headers#replacing-the-title-with-a-custom-component
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 9d698a380..e0b220f69 100644
--- a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/destination/[destinationId].tsx
+++ b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/destination/[destinationId].tsx
@@ -13,11 +13,10 @@ export default function Destination() {
         </Head>
       )}
       <Stack.Screen
+        name="Destination"
         options={{
           // https://reactnavigation.org/docs/headers#setting-the-header-title
-          title: 'Destination',
-          name: 'Destination',
-          options: { title: 'Destination' },
+          title: 'Destination'
           // https://reactnavigation.org/docs/headers#adjusting-header-styles
 
           // https://reactnavigation.org/docs/headers#replacing-the-title-with-a-custom-component
diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/pack/[id].tsx b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/pack/[id].tsx
index 63781b479..fca59af50 100644
--- a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/pack/[id].tsx
+++ b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/pack/[id].tsx
@@ -15,10 +15,10 @@ export default function Pack() {
         </Head>
       )}
       <Stack.Screen
+        name="Pack"
         options={{
           // https://reactnavigation.org/docs/headers#setting-the-header-title
-          title: 'Pack',
-          name: 'Pack',
+          title: 'Pack'
           // https://reactnavigation.org/docs/headers#adjusting-header-styles
 
           // https://reactnavigation.org/docs/headers#replacing-the-title-with-a-custom-component
diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/pack/create.tsx b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/pack/create.tsx
index 7274497ac..5a78bd6c0 100644
--- a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/pack/create.tsx
+++ b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/pack/create.tsx
@@ -13,10 +13,10 @@ export default function Pack() {
         </Head>
       )}
       <Stack.Screen
+        name="Create Pack"
         options={{
           // https://reactnavigation.org/docs/headers#setting-the-header-title
           title: 'Create Pack',
-          name: 'Create Pack',
           // https://reactnavigation.org/docs/headers#adjusting-header-styles
 
           // https://reactnavigation.org/docs/headers#replacing-the-title-with-a-custom-component
diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/packs/index.tsx b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/packs/index.tsx
index 275bafed4..308e12453 100644
--- a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/packs/index.tsx
+++ b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/packs/index.tsx
@@ -12,10 +12,10 @@ export default function Packs() {
         </Head>
       )}
       <Stack.Screen
+        name="Packs"
         options={{
           // https://reactnavigation.org/docs/headers#setting-the-header-title
-          title: 'Packs',
-          name: 'Packs',
+          title: 'Packs'
           // https://reactnavigation.org/docs/headers#adjusting-header-styles
 
           // https://reactnavigation.org/docs/headers#replacing-the-title-with-a-custom-component
diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/profile/[id].tsx b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/profile/[id].tsx
index 188382fda..1ab91f29c 100644
--- a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/profile/[id].tsx
+++ b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/profile/[id].tsx
@@ -6,7 +6,7 @@ import Head from 'expo-router/head';
 import { useProfileId } from 'app/hooks/user';
 
 const Profile = () => {
-  const { id } = useProfileId();
+  const [id] = useProfileId();
 
   return (
     <>
@@ -17,9 +17,9 @@ const Profile = () => {
         </Head>
       )}
       <Stack.Screen
+        name={`${id}'s Profile`}
         options={{
           title: `${id}'s Profile`,
-          name: `${id}'s Profile`,
         }}
       />
       <ProfileContainer id={id} />
diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/profile/settings/index.tsx b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/profile/settings/index.tsx
index 14ec97e8a..53af1e9f6 100644
--- a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/profile/settings/index.tsx
+++ b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/profile/settings/index.tsx
@@ -12,10 +12,10 @@ export default function SettingsPage() {
         </Head>
       )}
       <Stack.Screen
+        name="Settings"
         options={{
           // https://reactnavigation.org/docs/headers#setting-the-header-title
           title: 'Settings',
-          name: 'Settings',
           // http://reactnavigation.org/docs/headers#adjusting-header-styles
 
           // https://reactnavigation.org/docs/headers#replacing-the-title-with-a-custom-component
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 ca114b373..68a93f27c 100644
--- a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/trip/[tripId].tsx
+++ b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/trip/[tripId].tsx
@@ -15,10 +15,10 @@ export default function Trip() {
         </Head>
       )}
       <Stack.Screen
+        name="Trip"
         options={{
           // https://reactnavigation.org/docs/headers#setting-the-header-title
-          title: 'Trip',
-          name: 'Trip',
+          title: 'Trip'
           // https://reactnavigation.org/docs/headers#adjusting-header-styles
 
           // https://reactnavigation.org/docs/headers#replacing-the-title-with-a-custom-component
diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/trip/create.tsx b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/trip/create.tsx
index 7f3aac755..d4dbc7590 100644
--- a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/trip/create.tsx
+++ b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/trip/create.tsx
@@ -14,10 +14,10 @@ export default function Trip() {
         </Head>
       )}
       <Stack.Screen
+        name="Create Trip"
         options={{
           // https://reactnavigation.org/docs/headers#setting-the-header-title
           title: 'Create Trip',
-          name: 'Create Trip',
           // https://reactnavigation.org/docs/headers#adjusting-header-styles
 
           // https://reactnavigation.org/docs/headers#replacing-the-title-with-a-custom-component
diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/trips/index.tsx b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/trips/index.tsx
index 58921470c..4286dae8b 100644
--- a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/trips/index.tsx
+++ b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/trips/index.tsx
@@ -12,10 +12,10 @@ export default function FeedNav() {
         </Head>
       )}
       <Stack.Screen
+        name="Trips"
         options={{
           // https://reactnavigation.org/docs/headers#setting-the-header-title
           title: 'Trips',
-          name: 'Trips',
           // https://reactnavigation.org/docs/headers#adjusting-header-styles
 
           // https://reactnavigation.org/docs/headers#replacing-the-title-with-a-custom-component
diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/search.tsx b/apps/expo/app/(app)/(drawer)/(tabs)/search.tsx
index 5e56ca684..0b8203baa 100644
--- a/apps/expo/app/(app)/(drawer)/(tabs)/search.tsx
+++ b/apps/expo/app/(app)/(drawer)/(tabs)/search.tsx
@@ -6,6 +6,7 @@ import { useRouter } from 'app/hooks/router';
 import { PlacesAutocomplete } from 'app/components/PlacesAutocomplete';
 import { RStack } from '@packrat/ui';
 import useTheme from 'app/hooks/useTheme';
+import { View } from 'native-base';
 
 interface SearchResult {
   properties: {
@@ -58,13 +59,16 @@ export default function Search() {
   };
 
   return (
-    <RStack paddingTop={24} backgroundColor={currentTheme.colors.text}>
+    <RStack
+      style={{ paddingTop: 24, backgroundColor: currentTheme.colors.text }}
+    >
       {Platform.OS === 'web' && (
         <Head>
           <title>Search</title>
         </Head>
       )}
       <Stack.Screen
+        name="Search"
         options={{
           // https://reactnavigation.org/docs/headers#setting-the-header-title
           title: 'Search',
@@ -73,12 +77,13 @@ export default function Search() {
           // https://reactnavigation.org/docs/headers#replacing-the-title-with-a-custom-component
         }}
       />
-      <PlacesAutocomplete
-        style={{ width: '100%' }}
-        onSelect={handleSearchSelect}
-        placeholder="Search for a place"
-        ref={ref}
-      />
+      <View style={{ width: '100%' }}>
+        <PlacesAutocomplete
+          onSelect={handleSearchSelect}
+          placeholder="Search for a place"
+          ref={ref}
+        />
+      </View>
       {/* Add search virtual list for feed, packs, trips, places with prop to determine which to display */}
     </RStack>
   );
diff --git a/apps/expo/app/(app)/modal.tsx b/apps/expo/app/(app)/modal.tsx
index efe29a927..ac6207489 100644
--- a/apps/expo/app/(app)/modal.tsx
+++ b/apps/expo/app/(app)/modal.tsx
@@ -16,18 +16,20 @@ export default function Modal() {
           <title>Modal</title>
         </Head>
       )}
-      <Stack.Screen
-        options={{
-          // https://reactnavigation.org/docs/headers#setting-the-header-title
-          title: 'Modal',
-          // http://reactnavigation.org/docs/headers#adjusting-header-styles
+        <Stack.Screen
+          name="Modal"
+          options={{
+            // https://reactnavigation.org/docs/headers#setting-the-header-title
+            title: 'Modal',
+            // http://reactnavigation.org/docs/headers#adjusting-header-styles
 
-          // https://reactnavigation.org/docs/headers#replacing-the-title-with-a-custom-component
+            // https://reactnavigation.org/docs/headers#replacing-the-title-with-a-custom-component
+
+            presentation: 'modal',
+          }}
+          screenOptions={{ headerShown: false, headerTitle: 'modal' }}
+        />
 
-          presentation: 'modal',
-        }}
-        screenOptions={{ headerShown: false, headerTitle: 'modal' }}
-      />
       <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
         {/* Use `../` as a simple way to navigate to the root. This is not analogous to "goBack". */}
         {!isPresented && <Link href="../">Dismiss</Link>}
diff --git a/apps/expo/app/(auth)/password-reset.tsx b/apps/expo/app/(auth)/password-reset.tsx
index aeaecd130..caa3bf52d 100644
--- a/apps/expo/app/(auth)/password-reset.tsx
+++ b/apps/expo/app/(auth)/password-reset.tsx
@@ -13,10 +13,10 @@ export default function ResetPasswordRoute() {
         </Head>
       )}
       <Stack.Screen
+        name="Reset Password"
         options={{
           // https://reactnavigation.org/docs/headers#setting-the-header-title
-          title: 'Reset Password',
-          name: 'Reset Password',
+          title: 'Reset Password'
           // https://reactnavigation.org/docs/headers#adjusting-header-styles
 
           // https://reactnavigation.org/docs/headers#replacing-the-title-with-a-custom-component
diff --git a/apps/expo/metro.config.js b/apps/expo/metro.config.js
index ecf7e1671..59befe773 100644
--- a/apps/expo/metro.config.js
+++ b/apps/expo/metro.config.js
@@ -15,7 +15,7 @@ config.transformer.minifierConfig.compress.drop_console = true;
 config.resolver.assetExts.push('cjs');
 
 // Include 'mjs' and 'cjs' in source extensions
-config.resolver.sourceExts.push('mjs', 'cjs', '.solito.js');
+config.resolver.sourceExts.push('mjs', 'cjs', '.solito.js', 'native.ts', 'web.ts');
 
 // Find the project and workspace directories
 const projectRoot = __dirname;
diff --git a/apps/next/pages/_app.tsx b/apps/next/pages/_app.tsx
index 8ca0b0618..53f92b286 100644
--- a/apps/next/pages/_app.tsx
+++ b/apps/next/pages/_app.tsx
@@ -19,6 +19,7 @@ import { PortalProvider } from 'tamagui';
 import { Container, MainContentWeb } from '@packrat/ui';
 
 import * as WebBrowser from 'expo-web-browser';
+import { config } from '@packrat/ui/src/tamagui.config';
 WebBrowser.maybeCompleteAuthSession();
 
 if (process.env.NODE_ENV === 'production') {
diff --git a/packages/app/components/carousel/index.tsx b/packages/app/components/carousel/index.tsx
index de4faa182..3e2dc782c 100644
--- a/packages/app/components/carousel/index.tsx
+++ b/packages/app/components/carousel/index.tsx
@@ -31,7 +31,7 @@ const Carousel: React.FC<CarouselProps> = ({
 
   const handleScroll = (event: { nativeEvent: NativeScrollEvent }) => {
     const contentOffset = event.nativeEvent.contentOffset;
-    const newIndex = Math.round(contentOffset.x / itemWidth || undefined);
+    const newIndex = itemWidth ?  Math.round(contentOffset.x / itemWidth) : 0;
     setCurrentIndex(newIndex);
   };
 
diff --git a/packages/app/components/chat/index.tsx b/packages/app/components/chat/index.tsx
index 27f173f7c..add9bf7e3 100644
--- a/packages/app/components/chat/index.tsx
+++ b/packages/app/components/chat/index.tsx
@@ -32,7 +32,7 @@ interface ChatModalTriggerProps {
 const ChatComponent: React.FC<ChatComponentProps> = ({
   showChatSelector = true,
   defaultChatId = null,
-  itemTypeId = null, 
+  itemTypeId = null,
 }) => {
   const styles = useCustomStyles(loadStyles);
   const {
@@ -204,7 +204,6 @@ const ChatModalTrigger: React.FC<ChatModalTriggerProps> = ({ itemTypeId }) => {
           }}
         >
           <Button
-            position="absolute"
             backgroundColor="$background"
             top="$2"
             right="$2"
@@ -212,7 +211,10 @@ const ChatModalTrigger: React.FC<ChatModalTriggerProps> = ({ itemTypeId }) => {
             circular
             icon={X}
             onPress={() => setIsChatOpen(false)}
-            style={{ zIndex: 1001 }}
+            style={{
+              zIndex: 1001,
+              position: 'absolute',
+            }}
           />
           <ChatComponent itemTypeId={itemTypeId} />
         </Animated.View>
diff --git a/packages/app/components/feed/FeedCard.tsx b/packages/app/components/feed/FeedCard.tsx
index 2291ea3eb..f029adc64 100644
--- a/packages/app/components/feed/FeedCard.tsx
+++ b/packages/app/components/feed/FeedCard.tsx
@@ -2,7 +2,7 @@ import { AntDesign } from '@expo/vector-icons';
 import { formatDistanceToNow } from 'date-fns';
 import { MaterialIcons, Entypo } from '@expo/vector-icons';
 import useTheme from '../../hooks/useTheme';
-import { TouchableOpacity, View } from 'react-native';
+import { Platform, TouchableOpacity, View } from 'react-native';
 import { DuplicateIcon } from '../DuplicateIcon/index';
 import { truncateString } from '../../utils/truncateString';
 import {
@@ -35,7 +35,7 @@ interface CardProps {
     id: string;
   }>;
   favorites_count: number;
-  owner_id: string;
+  owner_id: string | {id : String};
   destination: string;
   createdAt: string;
   owners: Array<{ any: any }>;
@@ -131,7 +131,7 @@ export default function Card({
               alignItems: 'center',
               padding: 16,
               flex: 1,
-              width: '60vw',
+              width: Platform.OS === 'web' ?  '60vw' : "60%",
             }}
           >
             <View
@@ -297,7 +297,7 @@ export default function Card({
                               gap: 8,
                             }}
                           >
-                            {user?.id === owner_id.id ? null : (
+                            {user?.id === owner_id?.id ? null : (
                               <TouchableOpacity onPress={handleAddToFavorite}>
                                 <AntDesign
                                   name="heart"
diff --git a/packages/app/components/feed/FeedSearchFilter.tsx b/packages/app/components/feed/FeedSearchFilter.tsx
index 4d1a35eda..66e1fa73c 100644
--- a/packages/app/components/feed/FeedSearchFilter.tsx
+++ b/packages/app/components/feed/FeedSearchFilter.tsx
@@ -61,7 +61,11 @@ const FeedSearchFilter = ({
   const styles = useCustomStyles(loadStyles);
   const [searchValue, setSearchValue] = useState('');
 
-  const onSearch = (search) => setSearchQuery(search || undefined);
+  const onSearch : (search : string) => void = (search) => {
+    if(setSearchQuery){
+      setSearchQuery(search)
+    }
+  };
   const { screenWidth } = useScreenWidth();
 
   return (
diff --git a/packages/app/components/navigation/Navbar/Navbar.tsx b/packages/app/components/navigation/Navbar/Navbar.tsx
index a0f3b55ee..1cebe53ef 100644
--- a/packages/app/components/navigation/Navbar/Navbar.tsx
+++ b/packages/app/components/navigation/Navbar/Navbar.tsx
@@ -42,7 +42,7 @@ export const Navbar = () => {
             />
             <Text
               style={styles.logoText}
-              onClick={() => {
+              onPress={() => {
                 navigate('/');
               }}
             >
diff --git a/packages/app/components/pack/AddPack.tsx b/packages/app/components/pack/AddPack.tsx
index 06c5f0ce4..affa4f282 100644
--- a/packages/app/components/pack/AddPack.tsx
+++ b/packages/app/components/pack/AddPack.tsx
@@ -17,7 +17,12 @@ import { addPackSchema } from '@packrat/validations';
 
 const FormSelect: any = OriginalFormSelect;
 
-export const AddPack = ({ isCreatingTrip = false, onSuccess }) => {
+type AddPackProps = {
+  isCreatingTrip?: boolean;
+  onSuccess?: () => void;
+};
+
+export const AddPack : React.FC<AddPackProps> = ({ isCreatingTrip = false, onSuccess }) => {
   // Hooks
   const { enableDarkMode, enableLightMode, isDark, isLight, currentTheme } =
     useTheme();
diff --git a/packages/app/components/pack/CopyPackModal.tsx b/packages/app/components/pack/CopyPackModal.tsx
index 826246be2..263b1a3d4 100644
--- a/packages/app/components/pack/CopyPackModal.tsx
+++ b/packages/app/components/pack/CopyPackModal.tsx
@@ -40,7 +40,7 @@ export const CopyPackModal = ({ isOpen, onClose, currentPack }) => {
           unit: item.unit,
           packId: response.id,
           type: item.category.name,
-          ownerId: user.id,
+          ownerId: user?.id,
         });
       }
       onClose();
diff --git a/packages/app/components/pack/PackDetails.tsx b/packages/app/components/pack/PackDetails.tsx
index d0637eac4..f35052ea9 100644
--- a/packages/app/components/pack/PackDetails.tsx
+++ b/packages/app/components/pack/PackDetails.tsx
@@ -123,7 +123,7 @@ export function PackDetails() {
                                   <ScoreContainer
                                     type="pack"
                                     data={currentPack}
-                                    isOwner={isOwner}
+                                    isOwner={!!isOwner}
                                   />
                                 );
                               // case SECTION.CHAT:
@@ -163,7 +163,7 @@ export function PackDetails() {
         }}
       >
         <ChatContainer
-          itemTypeId={currentPackId}
+          itemTypeId={currentPackId ? currentPackId : null}
           title="Chat"
           trigger="Open Chat"
         />
diff --git a/packages/app/components/pack_table/Table.tsx b/packages/app/components/pack_table/Table.tsx
index 2acc6bad9..8bd885589 100644
--- a/packages/app/components/pack_table/Table.tsx
+++ b/packages/app/components/pack_table/Table.tsx
@@ -81,7 +81,7 @@ export const TableContainer = ({
             handleCheckboxChange={handleCheckboxChange}
             currentPack={currentPack}
             hasPermissions={isAuthUserPack}
-            refetch={refetch}
+            refetch={refetch ?? (() => {})}
             setRefetch={setRefetch}
           ></BasicTable>
           {/* <Table style={styles.tableStyle} flexArr={flexArr}>
diff --git a/packages/app/hooks/chat/useChat.ts b/packages/app/hooks/chat/useChat.ts
index 3ec47b0fe..d8570392d 100644
--- a/packages/app/hooks/chat/useChat.ts
+++ b/packages/app/hooks/chat/useChat.ts
@@ -3,7 +3,7 @@ import { useGetUserChats } from './useGetUserChats';
 import { useGetAIResponse } from './useGetAIResponse';
 import { useAuthUser } from 'app/auth/hooks';
 
-export const useChat = (itemTypeId = null) => {
+export const useChat = (itemTypeId?: string | null) => {
   const user = useAuthUser();
   const [typeId, setTypeId] = useState(itemTypeId);
   const [isLoading, setIsLoading] = useState(false);
@@ -12,7 +12,7 @@ export const useChat = (itemTypeId = null) => {
   // const [parsedMessages, setParsedMessages] = useState([]);
 
   const { data: chatsData, refetch } = useGetUserChats(
-    user.id,
+    user?.id,
     typeId.itemTypeId,
   );
 
@@ -71,7 +71,7 @@ export const useChat = (itemTypeId = null) => {
     setIsLoading(true);
     setUserInput('');
     await getAIResponse({
-      userId: user.id,
+      userId: user?.id,
       userInput: userMessage,
       itemTypeId: typeId.itemTypeId,
     });

From 9ac42a8d3759555609cd7e8a18bff39fb9d1dbec Mon Sep 17 00:00:00 2001
From: Anmol Verma <anmolverma2810@gmail.com>
Date: Fri, 21 Jun 2024 19:41:55 +0530
Subject: [PATCH 072/257] Changed action button in pack on native

---
 .../ui/src/Bento/elements/tables/Basic.tsx    | 24 +++++++++++++------
 packages/ui/src/ZDropdown/index.tsx           |  2 +-
 packages/ui/src/form/lib/rhf/LmInputRhf.tsx   |  4 ++--
 3 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/packages/ui/src/Bento/elements/tables/Basic.tsx b/packages/ui/src/Bento/elements/tables/Basic.tsx
index 113d4cf7b..1de7acbbf 100644
--- a/packages/ui/src/Bento/elements/tables/Basic.tsx
+++ b/packages/ui/src/Bento/elements/tables/Basic.tsx
@@ -11,8 +11,12 @@ import { Table } from './common/tableParts';
 import { DeletePackItemModal } from 'app/components/pack_table/DeletePackItemModal';
 import { EditPackItemModal } from 'app/components/pack_table/EditPackItemModal';
 import { AddItem } from 'app/components/item/AddItem';
-import { ZDropdown, ThreeDotsMenu, YStack, RButton } from '@packrat/ui';
+import { ThreeDotsMenu, YStack, RButton } from '@packrat/ui';
+
 import { Platform } from 'react-native';
+import  { RDropdownMenu }  from '../../../ZDropdown';
+import RIconButton from '../../../RIconButton';
+import { ChevronDown } from '@tamagui/lucide-icons';
 
 type ModalName = 'edit' | 'delete';
 
@@ -109,12 +113,18 @@ export function BasicTable({
           Platform.OS === 'ios' ||
           window.innerWidth < 900 ? (
             <View>
-              {/* <ZDropdown.Native
-                dropdownItems={[
-                  { label: 'Edit', onSelect: handleEditClick },
-                  { label: 'Delete', onSelect: handleDeleteClick },
-                ]}
-              /> */}
+              <RDropdownMenu
+                menuItems={[{label:'Edit', onSelect:handleEditClick},
+                  {label:'Delete', onSelect:handleDeleteClick}]}
+                 menuName={ <RIconButton
+                  backgroundColor="transparent"
+                  icon={ChevronDown}
+                  style={{ padding: 0 }}
+                />
+              }
+             />
+              
+            
             </View>
           ) : (
             <View>
diff --git a/packages/ui/src/ZDropdown/index.tsx b/packages/ui/src/ZDropdown/index.tsx
index 8e37f804d..30da32316 100644
--- a/packages/ui/src/ZDropdown/index.tsx
+++ b/packages/ui/src/ZDropdown/index.tsx
@@ -46,7 +46,7 @@ const RDropdownMenu = ({ menuItems = [], menuName }) => {
   return (
     <DropdownMenu.Root>
       <DropdownMenu.Trigger>
-        <RButton>{menuName}</RButton>
+        <RButton style={{backgroundColor:'transparent'}}>{menuName}</RButton>
       </DropdownMenu.Trigger>
       <DropdownMenu.Content>
         {menuItems.map(({ label, onSelect = () => {} }) => (
diff --git a/packages/ui/src/form/lib/rhf/LmInputRhf.tsx b/packages/ui/src/form/lib/rhf/LmInputRhf.tsx
index 3b404a8ec..6e13c4a05 100644
--- a/packages/ui/src/form/lib/rhf/LmInputRhf.tsx
+++ b/packages/ui/src/form/lib/rhf/LmInputRhf.tsx
@@ -67,11 +67,11 @@ const getInputKeyboardType = ({
   defaultKeyBoardType,
 }) => {
   if (isNumeric) {
-    return 'number-pwd';
+    return 'number-pad';
   }
 
   if (isDecimal) {
-    return 'decimal-pwd';
+    return 'decimal-pad';
   }
 
   return defaultKeyBoardType;

From bc788d6643045d925b6e0848615a035f132c5659 Mon Sep 17 00:00:00 2001
From: Anmol Verma <anmolverma2810@gmail.com>
Date: Fri, 21 Jun 2024 20:02:44 +0530
Subject: [PATCH 073/257] button color changes

---
 packages/ui/src/ZDropdown/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/src/ZDropdown/index.tsx b/packages/ui/src/ZDropdown/index.tsx
index 30da32316..8e37f804d 100644
--- a/packages/ui/src/ZDropdown/index.tsx
+++ b/packages/ui/src/ZDropdown/index.tsx
@@ -46,7 +46,7 @@ const RDropdownMenu = ({ menuItems = [], menuName }) => {
   return (
     <DropdownMenu.Root>
       <DropdownMenu.Trigger>
-        <RButton style={{backgroundColor:'transparent'}}>{menuName}</RButton>
+        <RButton>{menuName}</RButton>
       </DropdownMenu.Trigger>
       <DropdownMenu.Content>
         {menuItems.map(({ label, onSelect = () => {} }) => (

From 59ed31d25627239dca7dac0dea82dc15965dfbbe Mon Sep 17 00:00:00 2001
From: pinocchio-life-like <icbr19fl@gmail.com>
Date: Fri, 21 Jun 2024 18:37:28 +0300
Subject: [PATCH 074/257] flash fixed and for native and web

---
 package.json                                  |  1 +
 packages/app/context/theme.tsx                | 30 ++++++++-
 .../app/hooks/appearance/useAppearance.js     | 27 --------
 .../app/hooks/appearance/useAppearance.ts     | 61 +++++++++++++++++++
 yarn.lock                                     | 12 ++++
 5 files changed, 101 insertions(+), 30 deletions(-)
 delete mode 100644 packages/app/hooks/appearance/useAppearance.js
 create mode 100644 packages/app/hooks/appearance/useAppearance.ts

diff --git a/package.json b/package.json
index dfb15974d..8660afafd 100644
--- a/package.json
+++ b/package.json
@@ -90,6 +90,7 @@
     "@babel/runtime": "^7.21.0",
     "@manypkg/cli": "^0.21.0",
     "@prisma/extension-accelerate": "^0.6.2",
+    "@react-native-async-storage/async-storage": "^1.23.1",
     "check-dependency-version-consistency": "^4.1.0",
     "cross-env": "^7.0.3",
     "dotenv-cli": "^7.3.0",
diff --git a/packages/app/context/theme.tsx b/packages/app/context/theme.tsx
index 587b3bafb..08256f4bd 100644
--- a/packages/app/context/theme.tsx
+++ b/packages/app/context/theme.tsx
@@ -1,11 +1,13 @@
-import { createContext, useReducer } from 'react';
+import { createContext, useEffect, useReducer } from 'react';
 import { theme, darkTheme } from '../theme';
 import ThirdPartyThemeProviders from './ThirdPartyThemeProviders';
 import React from 'react';
+import { Platform } from 'react-native';
+import AsyncStorage from '@react-native-async-storage/async-storage';
 
 const initialState = {
-  isDark: false,
-  isLight: true,
+  isDark: null,
+  isLight: null,
   currentTheme: theme,
 };
 const handlers = {
@@ -59,6 +61,28 @@ const ThemeContext = createContext({
 export const ThemeProvider = ({ children }) => {
   const [state, dispatch] = useReducer(reducer, initialState);
 
+  useEffect(() => {
+    const fetchTheme = async () => {
+      let storedIsEnabled;
+      if (Platform.OS === 'web') {
+        storedIsEnabled = await localStorage.getItem('isEnabled');
+      } else {
+        storedIsEnabled = await AsyncStorage.getItem('isEnabled');
+      }
+
+      if (storedIsEnabled !== null) {
+        const isEnabled = JSON.parse(storedIsEnabled);
+        dispatch({
+          type: isEnabled ? 'ENABLE_DARK_MODE' : 'ENABLE_LIGHT_MODE',
+        });
+      } else {
+        dispatch({ type: 'ENABLE_LIGHT_MODE' });
+      }
+    };
+
+    fetchTheme();
+  }, []);
+
   /**
    * Enable dark mode.
    *
diff --git a/packages/app/hooks/appearance/useAppearance.js b/packages/app/hooks/appearance/useAppearance.js
deleted file mode 100644
index 40bf910d5..000000000
--- a/packages/app/hooks/appearance/useAppearance.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import { useState, useEffect } from 'react';
-import useTheme from '../useTheme';
-
-const useAppearance = () => {
-  const { enableDarkMode, enableLightMode, isDark, currentTheme } = useTheme();
-  const [isEnabled, setIsEnabled] = useState(false);
-
-  const toggleSwitch = () => {
-    setIsEnabled((prevIsEnabled) => {
-      const newState = !prevIsEnabled;
-      newState ? enableDarkMode() : enableLightMode();
-      return newState;
-    });
-  };
-
-  useEffect(() => {
-    setIsEnabled(isDark); // synchronize isEnabled with isDark whenever isDark changes
-  }, [isDark]);
-
-  return {
-    isEnabled,
-    toggleSwitch,
-    currentTheme,
-  };
-};
-
-export default useAppearance;
diff --git a/packages/app/hooks/appearance/useAppearance.ts b/packages/app/hooks/appearance/useAppearance.ts
new file mode 100644
index 000000000..b3cb6def4
--- /dev/null
+++ b/packages/app/hooks/appearance/useAppearance.ts
@@ -0,0 +1,61 @@
+import { useState, useEffect } from 'react';
+import useTheme from '../useTheme';
+import { Platform } from 'react-native';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+
+const useAppearance = () => {
+  const { enableDarkMode, enableLightMode, isDark, currentTheme } = useTheme();
+  const [isEnabled, setIsEnabled] = useState(isDark);
+
+  const setItem = async (key, value) => {
+    if (Platform.OS === 'web') {
+      localStorage.setItem(key, value);
+    } else {
+      await AsyncStorage.setItem(key, value);
+    }
+  };
+
+  const getItem = async (key) => {
+    if (Platform.OS === 'web') {
+      return localStorage.getItem(key);
+    } else {
+      return await AsyncStorage.getItem(key);
+    }
+  };
+
+  const toggleSwitch = async () => {
+    setIsEnabled((prevIsEnabled) => {
+      const newState = !prevIsEnabled;
+      newState ? enableDarkMode() : enableLightMode();
+      setItem('isEnabled', JSON.stringify(newState)); // store the new state
+      return newState;
+    });
+  };
+
+  useEffect(() => {
+    const getStoredIsEnabled = async () => {
+      const storedIsEnabled = await getItem('isEnabled'); // get the stored value
+      if (storedIsEnabled !== null) {
+        setIsEnabled(JSON.parse(storedIsEnabled)); // if it exists, use it
+      }
+    };
+    getStoredIsEnabled();
+  }, []); // Empty dependency array means this effect runs once on mount
+
+  useEffect(() => {
+    // This will run whenever isEnabled changes
+    if (isEnabled) {
+      enableDarkMode();
+    } else {
+      enableLightMode();
+    }
+  }, [isEnabled]);
+
+  return {
+    isEnabled,
+    toggleSwitch,
+    currentTheme,
+  };
+};
+
+export default useAppearance;
diff --git a/yarn.lock b/yarn.lock
index ad36bcfd7..1cd5961ba 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6828,6 +6828,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@react-native-async-storage/async-storage@npm:^1.23.1":
+  version: 1.23.1
+  resolution: "@react-native-async-storage/async-storage@npm:1.23.1"
+  dependencies:
+    merge-options: "npm:^3.0.4"
+  peerDependencies:
+    react-native: ^0.0.0-0 || >=0.60 <1.0
+  checksum: 10/9d0acc7edb0ba9ee414d6e62c656e5d571c9d9615e7e9f4748865b965178998f2e73786b8050387ada00ddb6faaca97b5cf2e010ceaeebe91571991364a0f515
+  languageName: node
+  linkType: hard
+
 "@react-native-community/cli-clean@npm:12.3.6":
   version: 12.3.6
   resolution: "@react-native-community/cli-clean@npm:12.3.6"
@@ -28646,6 +28657,7 @@ __metadata:
     "@babel/runtime": "npm:^7.21.0"
     "@manypkg/cli": "npm:^0.21.0"
     "@prisma/extension-accelerate": "npm:^0.6.2"
+    "@react-native-async-storage/async-storage": "npm:^1.23.1"
     check-dependency-version-consistency: "npm:^4.1.0"
     cross-env: "npm:^7.0.3"
     dotenv-cli: "npm:^7.3.0"

From 28ae4ec33782488e2458c42e5d97f41665be928d Mon Sep 17 00:00:00 2001
From: Tadjaur <tadjaur@tas-groups.com>
Date: Tue, 18 Jun 2024 09:43:43 +0100
Subject: [PATCH 075/257] Enable user to create the trip

---
 packages/app/components/pack_table/Table.tsx  | 12 +----
 .../components/pack_table/packtable.style.tsx |  7 ++-
 .../trip/TripCards/TripDateRangeCard.tsx      |  5 +-
 .../elements/datepickers/RangePicker.tsx      | 47 ++++++++++---------
 .../elements/datepickers/common/dateParts.tsx | 38 +++++++--------
 5 files changed, 47 insertions(+), 62 deletions(-)

diff --git a/packages/app/components/pack_table/Table.tsx b/packages/app/components/pack_table/Table.tsx
index 2acc6bad9..f383874fb 100644
--- a/packages/app/components/pack_table/Table.tsx
+++ b/packages/app/components/pack_table/Table.tsx
@@ -56,23 +56,13 @@ export const TableContainer = ({
     setRefetch,
     copy,
   });
-  const headerRow = ['Item Name', 'Weight', 'Quantity', ''];
-  let flexArr = [2, 1, 1, 1];
   const { deletePackItem } = useDeletePackItem();
 
-  if (
-    Platform.OS === 'android' ||
-    Platform.OS === 'ios' ||
-    window.innerWidth < 900
-  ) {
-    flexArr = [1, 1, 1, 1];
-  }
   if (isLoading) return <RSkeleton style={{}} />;
   if (error) return <ErrorMessage message={String(error)} />;
-  const isWeb = Platform.OS === 'web';
 
   return (
-    <View style={[styles.container, !isWeb && { width: '100%' }]}>
+    <View style={[styles.container ]}>
       {data?.length ? (
         <>
           <BasicTable
diff --git a/packages/app/components/pack_table/packtable.style.tsx b/packages/app/components/pack_table/packtable.style.tsx
index e203fd942..4a9abacfd 100644
--- a/packages/app/components/pack_table/packtable.style.tsx
+++ b/packages/app/components/pack_table/packtable.style.tsx
@@ -5,9 +5,9 @@ const loadStyles = (theme) => {
 
   return {
     container: {
-      flex: 1,
+      flex: isWeb? 1: 0,
       padding: 10,
-      width: Platform.OS === 'web' ? '100%' : 310,
+      width: isWeb ? '100%' : 310,
     },
     tableStyle: {
       width: '100%',
@@ -78,10 +78,9 @@ const loadStyles = (theme) => {
     totalWeightBox: {
       flexDirection: 'row',
       justifyContent: 'space-between',
-      width: Platform.OS === 'web' ? '100%' : 300,
+      width: isWeb ? '100%' : 300,
       paddingHorizontal: 25,
       marginVertical: 30,
-      flex: 1,
     },
   };
 };
diff --git a/packages/app/components/trip/TripCards/TripDateRangeCard.tsx b/packages/app/components/trip/TripCards/TripDateRangeCard.tsx
index a772f5788..00feb8cf8 100644
--- a/packages/app/components/trip/TripCards/TripDateRangeCard.tsx
+++ b/packages/app/components/trip/TripCards/TripDateRangeCard.tsx
@@ -1,5 +1,4 @@
 import React, { useEffect, useState } from 'react';
-import { Platform } from 'react-native';
 import { FontAwesome5 } from '@expo/vector-icons';
 import { format } from 'date-fns';
 import {
@@ -7,7 +6,6 @@ import {
   enGB,
   registerTranslation,
 } from 'react-native-paper-dates';
-import { SafeAreaProvider } from 'react-native-safe-area-context';
 import useTheme from 'app/hooks/useTheme';
 import { RStack, RText, DateRangePicker } from '@packrat/ui';
 import { TripCardBase } from './TripCardBase';
@@ -42,11 +40,12 @@ export const TripDateRangeCard = ({
           end_date: dates[1],
         }
       : null;
-    console.log({ dateRange });
+    console.info({ dateRange });
     setDateRange(dateRange);
     setSelectedDates(dates);
   };
 
+  console.info({dateRange, selectedDates, offsetDate})
   return (
     <TripCardBase
       icon={() => (
diff --git a/packages/ui/src/Bento/elements/datepickers/RangePicker.tsx b/packages/ui/src/Bento/elements/datepickers/RangePicker.tsx
index 3c1a985c7..d6d4f6eb3 100644
--- a/packages/ui/src/Bento/elements/datepickers/RangePicker.tsx
+++ b/packages/ui/src/Bento/elements/datepickers/RangePicker.tsx
@@ -1,4 +1,5 @@
 import {
+  DatePickerProvider,
   DatePickerProvider as _DatePickerProvider,
   useDatePickerContext,
 } from '@rehookify/datepicker';
@@ -211,10 +212,10 @@ function Calendar({
                         disabled={!d.inCurrentMonth}
                         {...(d.range === 'in-range' || d.selected
                           ? {
-                              hoverStyle: {
-                                backgroundColor: 'transparent',
-                              },
-                            }
+                            hoverStyle: {
+                              backgroundColor: 'transparent',
+                            },
+                          }
                           : {})}
                       >
                         <Button.Text
@@ -313,27 +314,11 @@ export function RangePicker({
     <DatePicker
       open={open}
       onOpenChange={setOpen}
-      config={{
-        selectedDates,
-        onDatesChange,
-        offsetDate,
-        onOffsetChange,
-        dates: {
-          mode: 'range',
-          // limit years to 2 years before and after current year
-          //   minDate: new Date(Y, M - 2, 1),
-          //   maxDate: new Date(Y, M + 2, 0),
-        },
-        calendar: {
-          offsets: [-1, 1],
-        },
-      }}
     >
       <DatePicker.Trigger asChild>
         <DatePickerInput
-          value={`${selectedDates[0]?.toDateString() || ''}${
-            selectedDates[0] && selectedDates[1] ? ' - ' : ''
-          }${selectedDates[1]?.toDateString() || ''}`}
+          value={`${selectedDates[0]?.toDateString() || ''}${selectedDates[0] && selectedDates[1] ? ' - ' : ''
+            }${selectedDates[1]?.toDateString() || ''}`}
           placeholder="Start date - End date"
           onReset={() => {
             onDatesChange([]);
@@ -345,7 +330,23 @@ export function RangePicker({
 
       <DatePicker.Content>
         <DatePicker.Content.Arrow />
-        <DatePickerBody />
+        <DatePickerProvider config={{
+          selectedDates,
+          onDatesChange,
+          offsetDate,
+          onOffsetChange,
+          dates: {
+            mode: 'range',
+            // limit years to 2 years before and after current year
+            //   minDate: new Date(Y, M - 2, 1),
+            //   maxDate: new Date(Y, M + 2, 0),
+          },
+          calendar: {
+            offsets: [-1, 1],
+          },
+        }}>
+          <DatePickerBody />
+        </DatePickerProvider>
       </DatePicker.Content>
     </DatePicker>
   );
diff --git a/packages/ui/src/Bento/elements/datepickers/common/dateParts.tsx b/packages/ui/src/Bento/elements/datepickers/common/dateParts.tsx
index c507b06f2..105f4f794 100644
--- a/packages/ui/src/Bento/elements/datepickers/common/dateParts.tsx
+++ b/packages/ui/src/Bento/elements/datepickers/common/dateParts.tsx
@@ -31,9 +31,7 @@ export function swapOnClick<D>(d: D) {
 const DatePickerProvider =
   _DatePickerProvider as React.ComponentType<DatePickerProviderProps>;
 
-type DatePickerProps = PopoverProps & {
-  config: DatePickerProviderProps['config'];
-};
+type DatePickerProps = PopoverProps;
 
 export const { Provider: HeaderTypeProvider, useStyledContext: useHeaderType } =
   createStyledContext({
@@ -42,26 +40,24 @@ export const { Provider: HeaderTypeProvider, useStyledContext: useHeaderType } =
   });
 
 const DatePickerImpl = (props: DatePickerProps) => {
-  const { children, config, ...rest } = props;
+  const { children, ...rest } = props;
 
   return (
-    <DatePickerProvider config={config}>
-      <Popover keepChildrenMounted size="$5" allowFlip {...rest}>
-        <Adapt when="sm" platform="touch">
-          <Popover.Sheet modal dismissOnSnapToBottom snapPointsMode="fit">
-            <Popover.Sheet.Frame padding="$4">
-              <Adapt.Contents />
-            </Popover.Sheet.Frame>
-            <Popover.Sheet.Overlay
-              animation="lazy"
-              enterStyle={{ opacity: 0 }}
-              exitStyle={{ opacity: 0 }}
-            />
-          </Popover.Sheet>
-        </Adapt>
-        {children}
-      </Popover>
-    </DatePickerProvider>
+    <Popover keepChildrenMounted size="$5" allowFlip {...rest}>
+      <Adapt when="sm" platform="touch">
+        <Popover.Sheet modal dismissOnSnapToBottom snapPointsMode="fit">
+          <Popover.Sheet.Frame padding="$4">
+            <Adapt.Contents />
+          </Popover.Sheet.Frame>
+          <Popover.Sheet.Overlay
+            animation="lazy"
+            enterStyle={{ opacity: 0 }}
+            exitStyle={{ opacity: 0 }}
+          />
+        </Popover.Sheet>
+      </Adapt>
+      {children}
+    </Popover>
   );
 };
 

From af0bcae2e1e88abf04b489f8eff589d0f4329426 Mon Sep 17 00:00:00 2001
From: Tadjaur <tadjaur@tas-groups.com>
Date: Fri, 21 Jun 2024 09:30:26 +0100
Subject: [PATCH 076/257] Fix trip ui

---
 .../components/SearchInput/SearchInput.tsx    | 45 +++++++++++--------
 packages/app/components/carousel/index.tsx    |  1 +
 packages/app/components/details/index.tsx     |  2 +-
 packages/app/components/pack/AddPack.tsx      |  5 +--
 .../components/pack_table/packtable.style.tsx |  2 +-
 packages/app/components/trip/TripCard.tsx     |  2 +-
 .../trip/TripCards/TripCardBase.tsx           |  1 -
 .../trip/TripCards/TripDateRangeCard.tsx      | 15 ++++++-
 .../trip/TripCards/TripPlaceCard.tsx          |  2 +-
 .../screens/trip/TripDetailsComponents.tsx    |  2 +-
 .../elements/datepickers/common/dateParts.tsx |  2 +-
 .../forms/inputs/components/inputsParts.tsx   |  1 +
 12 files changed, 49 insertions(+), 31 deletions(-)

diff --git a/packages/app/components/SearchInput/SearchInput.tsx b/packages/app/components/SearchInput/SearchInput.tsx
index 7ab0683be..a75b4dbc3 100644
--- a/packages/app/components/SearchInput/SearchInput.tsx
+++ b/packages/app/components/SearchInput/SearchInput.tsx
@@ -220,25 +220,32 @@ export const SearchInput = forwardRef<TextInput, SearchInputProps>(
               </RIconButton>
             )}
           </RStack>
-          {showSearchResults && results?.length > 0 && (
-            <RScrollView keyboardShouldPersistTaps="handled">
-              <View role="list" style={{ width: '100%' }}>
-                {results.map((result, i) => (
-                  <Pressable
-                    key={`result + ${i}`}
-                    role="listitem"
-                    onPress={() => {
-                      handleSearchResultClick(result);
-                    }}
-                    paddingHorizontal={16}
-                    paddingVertical={8}
-                  >
-                    {cloneElement(ResultItemComponent, { item: result })}
-                  </Pressable>
-                ))}
-              </View>
-            </RScrollView>
-          )}
+          <RStack
+            style={{
+              position: 'relative',
+              display: isVisible ? 'block' : 'none',
+            }}
+          >
+            {showSearchResults && results?.length > 0 && (
+              <RScrollView keyboardShouldPersistTaps="handled">
+                <View role="list" style={{ width: '100%' }}>
+                  {results.map((result, i) => (
+                    <Pressable
+                      key={`result + ${i}`}
+                      role="listitem"
+                      onPress={() => {
+                        handleSearchResultClick(result);
+                      }}
+                      paddingHorizontal={16}
+                      paddingVertical={8}
+                    >
+                      {cloneElement(ResultItemComponent, { item: result })}
+                    </Pressable>
+                  ))}
+                </View>
+              </RScrollView>
+            )}
+          </RStack>
         </RStack>
       );
     }
diff --git a/packages/app/components/carousel/index.tsx b/packages/app/components/carousel/index.tsx
index 36a981f97..94eab8c9e 100644
--- a/packages/app/components/carousel/index.tsx
+++ b/packages/app/components/carousel/index.tsx
@@ -51,6 +51,7 @@ const Carousel: React.FC<CarouselProps> = ({
         justifyContent: 'center',
         alignItems: 'center',
         flexDirection: 'row',
+        flex: 1
       }}
     >
       <ScrollButton
diff --git a/packages/app/components/details/index.tsx b/packages/app/components/details/index.tsx
index 94d7d7b69..a0523b606 100644
--- a/packages/app/components/details/index.tsx
+++ b/packages/app/components/details/index.tsx
@@ -80,5 +80,5 @@ export const DetailsComponent = ({
     }
   };
 
-  return <RStack>{renderDetails()}</RStack>;
+  return <RStack style={{width: '100%'}}>{renderDetails()}</RStack>;
 };
diff --git a/packages/app/components/pack/AddPack.tsx b/packages/app/components/pack/AddPack.tsx
index ca9930740..a1bf6e794 100644
--- a/packages/app/components/pack/AddPack.tsx
+++ b/packages/app/components/pack/AddPack.tsx
@@ -73,7 +73,7 @@ export const AddPack = ({ isCreatingTrip = false, onSuccess }) => {
             label="Name"
             style={{ textAlign: 'left', width: 200 }}
           />
-          {Platform.OS === 'web' ? (
+          {Platform.OS !== 'web' ? (
             <FormSelect
               onValueChange={handleonValueChange}
               options={packSelectOptions}
@@ -127,7 +127,6 @@ const loadStyles = (theme, appTheme) => {
   const { isDark, currentTheme } = theme;
   return {
     container: {
-      flex: 1,
       flexDirection: 'column',
       alignItems: 'center',
       textAlign: 'center',
@@ -169,7 +168,7 @@ const loadStyles = (theme, appTheme) => {
       paddingVertical: 12,
     },
     btn: {
-      width: Platform.OS === 'web' ? '200px' : '65%',
+      width: '200px',
       marginTop: 40,
       marginBottom: 20,
     },
diff --git a/packages/app/components/pack_table/packtable.style.tsx b/packages/app/components/pack_table/packtable.style.tsx
index 4a9abacfd..b33981dd6 100644
--- a/packages/app/components/pack_table/packtable.style.tsx
+++ b/packages/app/components/pack_table/packtable.style.tsx
@@ -7,7 +7,7 @@ const loadStyles = (theme) => {
     container: {
       flex: isWeb? 1: 0,
       padding: 10,
-      width: isWeb ? '100%' : 310,
+      width: '100%',
     },
     tableStyle: {
       width: '100%',
diff --git a/packages/app/components/trip/TripCard.tsx b/packages/app/components/trip/TripCard.tsx
index 5d7a6d822..972e8824e 100644
--- a/packages/app/components/trip/TripCard.tsx
+++ b/packages/app/components/trip/TripCard.tsx
@@ -70,7 +70,7 @@ export default function TripCard({
           ? styles.searchContainer
           : isMap
             ? styles.mapCard
-            : styles.containerMobile
+            : styles.mutualStyles
               ? styles.containerMobile
               : styles.mutualStyles
       }
diff --git a/packages/app/components/trip/TripCards/TripCardBase.tsx b/packages/app/components/trip/TripCards/TripCardBase.tsx
index cbaa9baa5..580d33316 100644
--- a/packages/app/components/trip/TripCards/TripCardBase.tsx
+++ b/packages/app/components/trip/TripCards/TripCardBase.tsx
@@ -83,7 +83,6 @@ const loadStylesBase = ({ currentTheme }) => {
     alignItems: 'center',
     gap: 25,
     flex: 1,
-    paddingHorizontal: 100,
     alignSelf: 'center',
   };
 };
diff --git a/packages/app/components/trip/TripCards/TripDateRangeCard.tsx b/packages/app/components/trip/TripCards/TripDateRangeCard.tsx
index 00feb8cf8..3c1fb3e83 100644
--- a/packages/app/components/trip/TripCards/TripDateRangeCard.tsx
+++ b/packages/app/components/trip/TripCards/TripDateRangeCard.tsx
@@ -40,12 +40,10 @@ export const TripDateRangeCard = ({
           end_date: dates[1],
         }
       : null;
-    console.info({ dateRange });
     setDateRange(dateRange);
     setSelectedDates(dates);
   };
 
-  console.info({dateRange, selectedDates, offsetDate})
   return (
     <TripCardBase
       icon={() => (
@@ -57,6 +55,7 @@ export const TripDateRangeCard = ({
       )}
       title="Trip Date Range"
     >
+<<<<<<< HEAD
       <DateRangePicker
         selectedDates={selectedDates}
         onDatesChange={onDatesChange}
@@ -65,6 +64,18 @@ export const TripDateRangeCard = ({
         open={open}
         setOpen={setOpen}
       />
+=======
+      <View style={{ maxWidth: '300px', width: '100%' }}>
+        <RangePicker
+          selectedDates={selectedDates}
+          onDatesChange={onDatesChange}
+          offsetDate={offsetDate}
+          onOffsetChange={onOffsetChange}
+          open={open}
+          setOpen={setOpen}
+        />
+      </View>
+>>>>>>> f6e67066 (Fix trip ui)
     </TripCardBase>
   );
 };
diff --git a/packages/app/components/trip/TripCards/TripPlaceCard.tsx b/packages/app/components/trip/TripCards/TripPlaceCard.tsx
index a09ac2aaa..b19ec34e6 100644
--- a/packages/app/components/trip/TripCards/TripPlaceCard.tsx
+++ b/packages/app/components/trip/TripCards/TripPlaceCard.tsx
@@ -32,7 +32,7 @@ const TripPlaceCard = ({
 
   return (
     <TripCardBase icon={icon} title={title}>
-      <RStack style={{ width: '80%' }}>
+      <RStack style={{ flex: 1, maxWidth: '100%' }}>
         <Carousel iconColor={isDark ? '#fff' : '#000'}>
           {data?.map((item) => {
             return (
diff --git a/packages/app/screens/trip/TripDetailsComponents.tsx b/packages/app/screens/trip/TripDetailsComponents.tsx
index 0aac91ac1..36628cf68 100644
--- a/packages/app/screens/trip/TripDetailsComponents.tsx
+++ b/packages/app/screens/trip/TripDetailsComponents.tsx
@@ -43,7 +43,7 @@ const TripCardComponent = ({ data, weatherObject, currentTheme }) =>
       //   data?.weather ? JSON?.parse(data?.weather)?.coord : weatherObject?.coord
       // }
     />
-  );
+  ) || <RText></RText>;
 
 const ScoreContainerComponent = ({ data, isOwner }) => (
   <View style={{ marginTop: '5%' }}>
diff --git a/packages/ui/src/Bento/elements/datepickers/common/dateParts.tsx b/packages/ui/src/Bento/elements/datepickers/common/dateParts.tsx
index 105f4f794..56317476e 100644
--- a/packages/ui/src/Bento/elements/datepickers/common/dateParts.tsx
+++ b/packages/ui/src/Bento/elements/datepickers/common/dateParts.tsx
@@ -108,7 +108,7 @@ export const DatePickerInput = Input.Area.styleable<DatePickerInputProps>(
     const { value, onButtonPress, size = '$3', onReset, ...rest } = props;
     return (
       <View $platform-native={{ minWidth: '100%' }}>
-        <Input size={size}>
+        <Input size={size} style={{overflow: 'hidden'}}>
           <Input.Box>
             <Input.Section>
               <Input.Area value={value} ref={ref} {...rest} />
diff --git a/packages/ui/src/Bento/forms/inputs/components/inputsParts.tsx b/packages/ui/src/Bento/forms/inputs/components/inputsParts.tsx
index e9b4ba6cf..7a800ec75 100644
--- a/packages/ui/src/Bento/forms/inputs/components/inputsParts.tsx
+++ b/packages/ui/src/Bento/forms/inputs/components/inputsParts.tsx
@@ -164,6 +164,7 @@ const InputImpl = InputFrame.styleable((props, ref) => {
 const InputSection = styled(XGroup.Item, {
   justifyContent: 'center',
   alignItems: 'center',
+  overflow: 'hidden',
   context: InputContext,
 });
 

From 56831160e7c265789ae0a714ccfe1b95bf9c8278 Mon Sep 17 00:00:00 2001
From: Tadjaur <tadjaur@tas-groups.com>
Date: Fri, 21 Jun 2024 09:49:23 +0100
Subject: [PATCH 077/257] fix pack scroll

---
 packages/app/components/pack/PackDetails.tsx  | 151 +++++++++---------
 .../trip/TripCards/TripDateRangeCard.tsx      |  13 --
 2 files changed, 79 insertions(+), 85 deletions(-)

diff --git a/packages/app/components/pack/PackDetails.tsx b/packages/app/components/pack/PackDetails.tsx
index 7facca5e5..2253d0f8f 100644
--- a/packages/app/components/pack/PackDetails.tsx
+++ b/packages/app/components/pack/PackDetails.tsx
@@ -68,78 +68,85 @@ export function PackDetails() {
   return (
     <>
       <Layout>
-        
-          {!isError && (
-            <>
-              <DetailsComponent
-                type="pack"
-                data={currentPack}
-                isLoading={isLoading}
-                error={error as any}
-                additionalComps={
-                  <>
-                      <FlatList
-                        data={Object.entries(SECTION)}
-                        contentContainerStyle={{ paddingBottom: 50 }}
-                        keyExtractor={([key, val]) => val}
-                        renderItem={({ item }) => {
-                          {
-                            switch (item[1]) {
-                              case SECTION.TABLE:
-                                return (
-                                  <TableContainer
-                                    currentPack={currentPack}
-                                    copy={canCopy}
-                                    hasPermissions={isAuthUserPack}
-                                  />
-                                );
-                              case SECTION.CTA:
-                                return isAuthUserPack ? (
-                                  <AddItemModal
-                                    currentPackId={
-                                      currentPackId ? currentPackId : ''
-                                    }
-                                    currentPack={currentPack}
-                                    isAddItemModalOpen={isAddItemModalOpen}
-                                    setIsAddItemModalOpen={
-                                      setIsAddItemModalOpen
-                                    }
-                                    // refetch={refetch}
-                                    setRefetch={() =>
-                                      setRefetch((prev) => !prev)
-                                    }
-                                  />
-                                ) : null;
-                              case SECTION.SCORECARD:
-                                return (
-                                  <ScoreContainer
-                                    type="pack"
-                                    data={currentPack}
-                                    isOwner={isOwner}
-                                  />
-                                );
-                              // case SECTION.CHAT:
-                              //   return (
-                              //     <View style={styles.boxStyle}>
-                              //       <ChatContainer
-                              //         itemTypeId={currentPackId}
-                              //         title="Chat"
-                              //         trigger="Open Chat"
-                              //       />
-                              //     </View>
-                              //   );
-                              default:
-                                return null;
-                            }
-                          }
-                        }}
-                      />
-                  </>
-                }
-                link={link}
-              />
-            </>
-          )}
+        {!isError && (
+          <View
+            style={[
+              styles.mainContainer,
+              Platform.OS == 'web'
+                ? { minHeight: '100vh', width: '100%' }
+                : { minHeight: Dimensions.get('screen').height },
+            ]}
+          >
+
+            <DetailsComponent
+              type="pack"
+              data={currentPack}
+              isLoading={isLoading}
+              error={error as any}
+              additionalComps={
+                <View>
+                  <FlatList
+                    data={Object.entries(SECTION)}
+                    contentContainerStyle={{ paddingBottom: 50 }}
+                    keyExtractor={([key, val]) => val}
+                    renderItem={({ item }) => {
+                      {
+                        switch (item[1]) {
+                          case SECTION.TABLE:
+                            return (
+                              <TableContainer
+                                currentPack={currentPack}
+                                copy={canCopy}
+                                hasPermissions={isAuthUserPack}
+                              />
+                            );
+                          case SECTION.CTA:
+                            return isAuthUserPack ? (
+                              <AddItemModal
+                                currentPackId={
+                                  currentPackId ? currentPackId : ''
+                                }
+                                currentPack={currentPack}
+                                isAddItemModalOpen={isAddItemModalOpen}
+                                setIsAddItemModalOpen={
+                                  setIsAddItemModalOpen
+                                }
+                                // refetch={refetch}
+                                setRefetch={() =>
+                                  setRefetch((prev) => !prev)
+                                }
+                              />
+                            ) : null;
+                          case SECTION.SCORECARD:
+                            return (
+                              <ScoreContainer
+                                type="pack"
+                                data={currentPack}
+                                isOwner={isOwner}
+                              />
+                            );
+                          case SECTION.CHAT:
+                            return (
+                              <View style={styles.boxStyle}>
+                                <ChatContainer
+                                  itemTypeId={currentPackId}
+                                  title="Chat"
+                                  trigger="Open Chat"
+                                />
+                              </View>
+                            );
+                          default:
+                            return null;
+                        }
+                      }
+                    }}
+                  />
+                </View>
+              }
+              link={link}
+            />
+          </View>
+        )}
       </Layout>
       <View
         style={{
diff --git a/packages/app/components/trip/TripCards/TripDateRangeCard.tsx b/packages/app/components/trip/TripCards/TripDateRangeCard.tsx
index 3c1fb3e83..d045e80c9 100644
--- a/packages/app/components/trip/TripCards/TripDateRangeCard.tsx
+++ b/packages/app/components/trip/TripCards/TripDateRangeCard.tsx
@@ -55,7 +55,6 @@ export const TripDateRangeCard = ({
       )}
       title="Trip Date Range"
     >
-<<<<<<< HEAD
       <DateRangePicker
         selectedDates={selectedDates}
         onDatesChange={onDatesChange}
@@ -64,18 +63,6 @@ export const TripDateRangeCard = ({
         open={open}
         setOpen={setOpen}
       />
-=======
-      <View style={{ maxWidth: '300px', width: '100%' }}>
-        <RangePicker
-          selectedDates={selectedDates}
-          onDatesChange={onDatesChange}
-          offsetDate={offsetDate}
-          onOffsetChange={onOffsetChange}
-          open={open}
-          setOpen={setOpen}
-        />
-      </View>
->>>>>>> f6e67066 (Fix trip ui)
     </TripCardBase>
   );
 };

From 2bf6c80c15ec7ebf314c434418f40fe37b3811b4 Mon Sep 17 00:00:00 2001
From: Tadjaur <tadjaur@tas-groups.com>
Date: Sat, 22 Jun 2024 11:32:33 +0100
Subject: [PATCH 078/257] fix score not show on mobile

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

diff --git a/packages/app/components/ScoreContainer.tsx b/packages/app/components/ScoreContainer.tsx
index 54277c935..6a4b1f074 100644
--- a/packages/app/components/ScoreContainer.tsx
+++ b/packages/app/components/ScoreContainer.tsx
@@ -11,6 +11,7 @@ import {
   useScoreProgress,
 } from 'app/hooks/score';
 import { View } from 'react-native';
+import { useMedia } from 'tamagui';
 
 interface ScoreProgressChartProps {
   score: number;
@@ -192,15 +193,14 @@ export const ScoreContainer: React.FC<ScoreContainerProps> = ({
   } = useScoreData(type, data);
 
   const handleScoreClick = useCalculateStore(id, type);
-
-  const isWeb = Platform.OS === 'web';
+  const media = useMedia()
 
   return (
     <RStack style={styles.box}>
       <XStack
-        style={[styles.hStack, !isWeb && { flexDirection: 'column', gap: 10 }]}
+        style={[styles.hStack, !media.gtXs && { flexDirection: 'column', gap: 32 }]}
       >
-        <YStack style={styles.vStack}>
+        <YStack style={media.gtXs ? styles.vStack : styles.vStackXS}>
           <RText style={styles.scoreText}>
             {isAlreadyScored ? title : 'Score this pack!'}
           </RText>
@@ -213,7 +213,7 @@ export const ScoreContainer: React.FC<ScoreContainerProps> = ({
           )}
         </YStack>
         {isAlreadyScored && (
-          <View style={{ width: '20vw' }}>
+          <View style={{ flex: 1, flexDirection: media.gtXs? 'column':'row', gap: 8 }}>
             <ScoreProgressChart score={totalScore} />
             <GradingPieChart scores={scores} />
           </View>
@@ -239,7 +239,12 @@ const loadStyles = (theme: any) => {
     vStack: {
       justifyContent: 'center',
       alignItems: 'flex-start',
-      width: Platform.OS == 'web' ? '60%' : '100%',
+      width: '60%',
+    },
+    vStackXS: {
+      justifyContent: 'center',
+      alignItems: 'center',
+      width: '100%',
     },
     scoreText: {
       color: currentTheme.colors.textPrimary,

From 9d94cb48926798824ef4d8556d3f8d9d0d1c7c75 Mon Sep 17 00:00:00 2001
From: Tadjaur <tadjaur@tas-groups.com>
Date: Sat, 22 Jun 2024 12:27:56 +0100
Subject: [PATCH 079/257] remove chat and web check

---
 packages/app/components/pack/AddPack.tsx     |  2 +-
 packages/app/components/pack/PackDetails.tsx | 10 ----------
 2 files changed, 1 insertion(+), 11 deletions(-)

diff --git a/packages/app/components/pack/AddPack.tsx b/packages/app/components/pack/AddPack.tsx
index a1bf6e794..05ee70038 100644
--- a/packages/app/components/pack/AddPack.tsx
+++ b/packages/app/components/pack/AddPack.tsx
@@ -73,7 +73,7 @@ export const AddPack = ({ isCreatingTrip = false, onSuccess }) => {
             label="Name"
             style={{ textAlign: 'left', width: 200 }}
           />
-          {Platform.OS !== 'web' ? (
+          {Platform.OS === 'web' ? (
             <FormSelect
               onValueChange={handleonValueChange}
               options={packSelectOptions}
diff --git a/packages/app/components/pack/PackDetails.tsx b/packages/app/components/pack/PackDetails.tsx
index 2253d0f8f..3003363df 100644
--- a/packages/app/components/pack/PackDetails.tsx
+++ b/packages/app/components/pack/PackDetails.tsx
@@ -125,16 +125,6 @@ export function PackDetails() {
                                 isOwner={isOwner}
                               />
                             );
-                          case SECTION.CHAT:
-                            return (
-                              <View style={styles.boxStyle}>
-                                <ChatContainer
-                                  itemTypeId={currentPackId}
-                                  title="Chat"
-                                  trigger="Open Chat"
-                                />
-                              </View>
-                            );
                           default:
                             return null;
                         }

From 7869fe3487bfc2ec5d9659ed6f620585487f8ba6 Mon Sep 17 00:00:00 2001
From: Tadjaur <tadjaur@tas-groups.com>
Date: Sat, 22 Jun 2024 12:46:31 +0100
Subject: [PATCH 080/257] revert to rangepicker due to error

---
 .../components/trip/TripCards/TripDateRangeCard.tsx  | 12 +++---------
 1 file changed, 3 insertions(+), 9 deletions(-)

diff --git a/packages/app/components/trip/TripCards/TripDateRangeCard.tsx b/packages/app/components/trip/TripCards/TripDateRangeCard.tsx
index d045e80c9..5bb272b87 100644
--- a/packages/app/components/trip/TripCards/TripDateRangeCard.tsx
+++ b/packages/app/components/trip/TripCards/TripDateRangeCard.tsx
@@ -1,14 +1,8 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import { FontAwesome5 } from '@expo/vector-icons';
-import { format } from 'date-fns';
-import {
-  DatePickerModal,
-  enGB,
-  registerTranslation,
-} from 'react-native-paper-dates';
 import useTheme from 'app/hooks/useTheme';
-import { RStack, RText, DateRangePicker } from '@packrat/ui';
 import { TripCardBase } from './TripCardBase';
+import { RangePicker } from '@packrat/ui/src/Bento/elements/datepickers';
 
 export interface DateRange {
   start_date: Date | null;
@@ -55,7 +49,7 @@ export const TripDateRangeCard = ({
       )}
       title="Trip Date Range"
     >
-      <DateRangePicker
+      <RangePicker
         selectedDates={selectedDates}
         onDatesChange={onDatesChange}
         offsetDate={offsetDate}

From f185486d116d01540b5a760e808e4a0ab3f66ae5 Mon Sep 17 00:00:00 2001
From: pinocchio-life-like <icbr19fl@gmail.com>
Date: Sat, 22 Jun 2024 14:56:56 +0300
Subject: [PATCH 081/257] fix force push

---
 packages/app/context/theme.tsx                | 23 +++++----
 .../app/hooks/appearance/useAppearance.ts     | 50 ++++---------------
 packages/app/hooks/storage/useStorageState.ts |  2 +-
 3 files changed, 24 insertions(+), 51 deletions(-)

diff --git a/packages/app/context/theme.tsx b/packages/app/context/theme.tsx
index 08256f4bd..fc74c08cf 100644
--- a/packages/app/context/theme.tsx
+++ b/packages/app/context/theme.tsx
@@ -1,14 +1,16 @@
-import { createContext, useEffect, useReducer } from 'react';
+import { createContext, useEffect, useReducer, useState } from 'react';
 import { theme, darkTheme } from '../theme';
 import ThirdPartyThemeProviders from './ThirdPartyThemeProviders';
 import React from 'react';
 import { Platform } from 'react-native';
 import AsyncStorage from '@react-native-async-storage/async-storage';
+import { useStorageState } from 'app/hooks/storage/useStorageState';
 
 const initialState = {
   isDark: null,
   isLight: null,
   currentTheme: theme,
+  loading: true,
 };
 const handlers = {
   /**
@@ -60,16 +62,12 @@ const ThemeContext = createContext({
  */
 export const ThemeProvider = ({ children }) => {
   const [state, dispatch] = useReducer(reducer, initialState);
+  const [[, storedIsEnabled], setStoredIsEnabled] =
+    useStorageState('isEnabled');
+  const [loading, setLoading] = useState(true);
 
   useEffect(() => {
     const fetchTheme = async () => {
-      let storedIsEnabled;
-      if (Platform.OS === 'web') {
-        storedIsEnabled = await localStorage.getItem('isEnabled');
-      } else {
-        storedIsEnabled = await AsyncStorage.getItem('isEnabled');
-      }
-
       if (storedIsEnabled !== null) {
         const isEnabled = JSON.parse(storedIsEnabled);
         dispatch({
@@ -78,10 +76,15 @@ export const ThemeProvider = ({ children }) => {
       } else {
         dispatch({ type: 'ENABLE_LIGHT_MODE' });
       }
+      setLoading(false);
     };
 
     fetchTheme();
-  }, []);
+  }, [storedIsEnabled]);
+
+  if (loading) {
+    return null; // Return null while determining the theme to avoid flash
+  }
 
   /**
    * Enable dark mode.
@@ -90,6 +93,7 @@ export const ThemeProvider = ({ children }) => {
    */
   const enableDarkMode = () => {
     dispatch({ type: 'ENABLE_DARK_MODE' });
+    setStoredIsEnabled(JSON.stringify(true));
   };
   /**
    * Enables light mode.
@@ -99,6 +103,7 @@ export const ThemeProvider = ({ children }) => {
    */
   const enableLightMode = () => {
     dispatch({ type: 'ENABLE_LIGHT_MODE' });
+    setStoredIsEnabled(JSON.stringify(false));
   };
 
   const key = `themeContext + isDark=${state.isDark} + isLight=${state.isLight}`;
diff --git a/packages/app/hooks/appearance/useAppearance.ts b/packages/app/hooks/appearance/useAppearance.ts
index b3cb6def4..a699f27e3 100644
--- a/packages/app/hooks/appearance/useAppearance.ts
+++ b/packages/app/hooks/appearance/useAppearance.ts
@@ -1,55 +1,23 @@
-import { useState, useEffect } from 'react';
 import useTheme from '../useTheme';
-import { Platform } from 'react-native';
-import AsyncStorage from '@react-native-async-storage/async-storage';
+import { useStorageState } from 'app/hooks/storage/useStorageState';
 
 const useAppearance = () => {
   const { enableDarkMode, enableLightMode, isDark, currentTheme } = useTheme();
-  const [isEnabled, setIsEnabled] = useState(isDark);
+  const [[, isEnabledString], setIsEnabled] = useStorageState('isEnabled');
 
-  const setItem = async (key, value) => {
-    if (Platform.OS === 'web') {
-      localStorage.setItem(key, value);
-    } else {
-      await AsyncStorage.setItem(key, value);
-    }
-  };
-
-  const getItem = async (key) => {
-    if (Platform.OS === 'web') {
-      return localStorage.getItem(key);
-    } else {
-      return await AsyncStorage.getItem(key);
-    }
-  };
+  // Convert string to boolean
+  const isEnabled = JSON.parse(isEnabledString);
 
   const toggleSwitch = async () => {
-    setIsEnabled((prevIsEnabled) => {
-      const newState = !prevIsEnabled;
-      newState ? enableDarkMode() : enableLightMode();
-      setItem('isEnabled', JSON.stringify(newState)); // store the new state
-      return newState;
-    });
-  };
-
-  useEffect(() => {
-    const getStoredIsEnabled = async () => {
-      const storedIsEnabled = await getItem('isEnabled'); // get the stored value
-      if (storedIsEnabled !== null) {
-        setIsEnabled(JSON.parse(storedIsEnabled)); // if it exists, use it
-      }
-    };
-    getStoredIsEnabled();
-  }, []); // Empty dependency array means this effect runs once on mount
-
-  useEffect(() => {
-    // This will run whenever isEnabled changes
-    if (isEnabled) {
+    const newIsEnabledValue = !isEnabled ? 'true' : 'false';
+    setIsEnabled(newIsEnabledValue);
+    // Apply theme change directly here to avoid dependency on isEnabled state update
+    if (!isEnabled) {
       enableDarkMode();
     } else {
       enableLightMode();
     }
-  }, [isEnabled]);
+  };
 
   return {
     isEnabled,
diff --git a/packages/app/hooks/storage/useStorageState.ts b/packages/app/hooks/storage/useStorageState.ts
index 3c594bde2..da3c5d694 100644
--- a/packages/app/hooks/storage/useStorageState.ts
+++ b/packages/app/hooks/storage/useStorageState.ts
@@ -50,7 +50,7 @@ export function useStorageState(key: string): UseStateHook<string> {
           console.error('Local storage is unavailable:', e);
         }
       } else {
-        SecureStore.getItemAsync(key).then((value) => {
+        await SecureStore.getItemAsync(key).then((value) => {
           setState(value);
         });
       }

From 3784ca4d8b74231796c3a77c84370c44d2b0c118 Mon Sep 17 00:00:00 2001
From: pinocchio-life-like <icbr19fl@gmail.com>
Date: Sat, 22 Jun 2024 15:25:44 +0300
Subject: [PATCH 082/257] flush on preview

---
 packages/app/context/theme.tsx | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/packages/app/context/theme.tsx b/packages/app/context/theme.tsx
index fc74c08cf..846c275d6 100644
--- a/packages/app/context/theme.tsx
+++ b/packages/app/context/theme.tsx
@@ -82,10 +82,6 @@ export const ThemeProvider = ({ children }) => {
     fetchTheme();
   }, [storedIsEnabled]);
 
-  if (loading) {
-    return null; // Return null while determining the theme to avoid flash
-  }
-
   /**
    * Enable dark mode.
    *
@@ -108,7 +104,7 @@ export const ThemeProvider = ({ children }) => {
 
   const key = `themeContext + isDark=${state.isDark} + isLight=${state.isLight}`;
 
-  return (
+  return loading ? null : (
     <ThemeContext.Provider
       key={key}
       value={{

From 9ad66389279bd9f8f2ff091fac559d23b6b533ee Mon Sep 17 00:00:00 2001
From: pinocchio-life-like <icbr19fl@gmail.com>
Date: Sat, 22 Jun 2024 17:42:36 +0300
Subject: [PATCH 083/257] fix clenup update

---
 package.json                                  |  3 +-
 .../Suggestion}/SuggestionDescription.tsx     |  0
 .../components/Suggestion}/SuggestionList.tsx |  4 ---
 packages/app/components/Suggestion/index.ts   |  2 ++
 packages/app/components/chat/index.tsx        | 10 +++---
 packages/ui/src/Bento/elements/list/index.tsx |  2 --
 server/package.json                           |  2 +-
 yarn.lock                                     | 34 ++++++-------------
 8 files changed, 19 insertions(+), 38 deletions(-)
 rename packages/{ui/src/Bento/elements/list => app/components/Suggestion}/SuggestionDescription.tsx (100%)
 rename packages/{ui/src/Bento/elements/list => app/components/Suggestion}/SuggestionList.tsx (94%)
 create mode 100644 packages/app/components/Suggestion/index.ts

diff --git a/package.json b/package.json
index c087cdaa3..2264c3058 100644
--- a/package.json
+++ b/package.json
@@ -88,7 +88,6 @@
   "packageManager": "yarn@4.1.1",
   "dependencies": {
     "@babel/runtime": "^7.21.0",
-    "@instructor-ai/instructor": "^1.4.0",
     "@manypkg/cli": "^0.21.0",
     "@prisma/extension-accelerate": "^0.6.2",
     "check-dependency-version-consistency": "^4.1.0",
@@ -97,7 +96,7 @@
     "eslint": "^8.56.0",
     "husky": "^8.0.0",
     "lint-staged": "^14.0.1",
-    "lucide-react-native": "^0.394.0",
+    "lucide-react-native": "^0.396.0",
     "npm-run-all": "^4.1.5",
     "patch-package": "^8.0.0",
     "postinstall-postinstall": "^2.1.0",
diff --git a/packages/ui/src/Bento/elements/list/SuggestionDescription.tsx b/packages/app/components/Suggestion/SuggestionDescription.tsx
similarity index 100%
rename from packages/ui/src/Bento/elements/list/SuggestionDescription.tsx
rename to packages/app/components/Suggestion/SuggestionDescription.tsx
diff --git a/packages/ui/src/Bento/elements/list/SuggestionList.tsx b/packages/app/components/Suggestion/SuggestionList.tsx
similarity index 94%
rename from packages/ui/src/Bento/elements/list/SuggestionList.tsx
rename to packages/app/components/Suggestion/SuggestionList.tsx
index e3a21ff8c..e2a88e418 100644
--- a/packages/ui/src/Bento/elements/list/SuggestionList.tsx
+++ b/packages/app/components/Suggestion/SuggestionList.tsx
@@ -3,10 +3,6 @@ import { Separator, Text, View, YGroup } from 'tamagui';
 import { RButton } from '@packrat/ui';
 import useTheme from 'app/hooks/useTheme';
 import { useAddPackItem } from 'app/hooks/packs/useAddPackItem';
-import { useAuthUser } from 'app/auth/hooks';
-import { user } from 'server/src/db/schema';
-
-// type SuggestionList = typeof suggestion.Items;
 
 export function SuggestionList({ suggestion, onAddItem }) {
   const [itemsList, setItemsList] = useState([]);
diff --git a/packages/app/components/Suggestion/index.ts b/packages/app/components/Suggestion/index.ts
new file mode 100644
index 000000000..f942c1757
--- /dev/null
+++ b/packages/app/components/Suggestion/index.ts
@@ -0,0 +1,2 @@
+export * from './SuggestionList';
+export * from './SuggestionDescription';
diff --git a/packages/app/components/chat/index.tsx b/packages/app/components/chat/index.tsx
index bdb787068..022d6ba80 100644
--- a/packages/app/components/chat/index.tsx
+++ b/packages/app/components/chat/index.tsx
@@ -10,14 +10,14 @@ import { RButton, RImage, RInput, RStack } from '@packrat/ui';
 import useCustomStyles from 'app/hooks/useCustomStyles';
 import { useChat } from 'app/hooks/chat/useChat';
 import { loadStyles } from './chat.style';
-import {
-  ChatList,
-  SuggestionDescription,
-  SuggestionList,
-} from '@packrat/ui/src/Bento/elements/list';
+import { ChatList } from '@packrat/ui/src/Bento/elements/list';
 import { X } from '@tamagui/lucide-icons';
 import { MessageCircle, Camera, Settings, Home } from 'lucide-react-native';
 import { ActionItem } from './ActionItem';
+import {
+  SuggestionDescription,
+  SuggestionList,
+} from '../../components/Suggestion';
 
 interface ChatComponentProps {
   showChatSelector?: boolean;
diff --git a/packages/ui/src/Bento/elements/list/index.tsx b/packages/ui/src/Bento/elements/list/index.tsx
index 19597ecb4..b0714612f 100644
--- a/packages/ui/src/Bento/elements/list/index.tsx
+++ b/packages/ui/src/Bento/elements/list/index.tsx
@@ -4,5 +4,3 @@ export * from './ChatList';
 export * from './MasonryListExample';
 export * from './ItemValueList';
 export * from './List';
-export * from './SuggestionList';
-export * from './SuggestionDescription';
diff --git a/server/package.json b/server/package.json
index 6ff3386fc..ab37d9d0f 100644
--- a/server/package.json
+++ b/server/package.json
@@ -39,7 +39,7 @@
     "@elysiajs/trpc": "^0.7.0",
     "@hono/node-server": "^1.11.0",
     "@hono/trpc-server": "^0.1.1",
-    "@instructor-ai/instructor": "^1.3.0",
+    "@instructor-ai/instructor": "^1.5.0",
     "@libsql/client": "^0.4.0-pre.5",
     "@packrat/validations": "*",
     "@paralleldrive/cuid2": "^2.2.2",
diff --git a/yarn.lock b/yarn.lock
index 6e785e45d..983316fdb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4531,29 +4531,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@instructor-ai/instructor@npm:^1.3.0":
-  version: 1.3.0
-  resolution: "@instructor-ai/instructor@npm:1.3.0"
-  dependencies:
-    zod-stream: "npm:1.0.3"
-    zod-validation-error: "npm:^2.1.0"
-  peerDependencies:
-    openai: ">=4.28.0"
-    zod: ">=3.22.4"
-  checksum: 10/29174fc7edfb6febbdddd68798160380ea4fe9e16c2e39853057c3b6f827ecda1e0334bffca8ec96cf477b51ee6e4088977ffffeb4c5034da91dd5cdc5f230f9
-  languageName: node
-  linkType: hard
-
-"@instructor-ai/instructor@npm:^1.4.0":
-  version: 1.4.0
-  resolution: "@instructor-ai/instructor@npm:1.4.0"
+"@instructor-ai/instructor@npm:^1.5.0":
+  version: 1.5.0
+  resolution: "@instructor-ai/instructor@npm:1.5.0"
   dependencies:
     zod-stream: "npm:1.0.3"
     zod-validation-error: "npm:^2.1.0"
   peerDependencies:
     openai: ">=4.28.0"
     zod: ">=3.22.4"
-  checksum: 10/c982e5564e35d55eb43f4ce40b793626256359a062cad1f153bc8aba8e33d7c57c696ddcbf0cbb2c45a3f20740f64b21c052f585f28782e0987ff1e5f553c8ab
+  checksum: 10/c547afffe3dcabaecfa179dc471413dfbe55d597c8ab74f5fa03b91497b3d2bc13ca0dad038d6744c77a0efac04dbd51017e83e66949e54bcb3dd3d70deabfee
   languageName: node
   linkType: hard
 
@@ -25827,14 +25814,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lucide-react-native@npm:^0.394.0":
-  version: 0.394.0
-  resolution: "lucide-react-native@npm:0.394.0"
+"lucide-react-native@npm:^0.396.0":
+  version: 0.396.0
+  resolution: "lucide-react-native@npm:0.396.0"
   peerDependencies:
     react: ^16.5.1 || ^17.0.0 || ^18.0.0
     react-native: "*"
     react-native-svg: ^12.0.0 || ^13.0.0 || ^14.0.0 || ^15.0.0
-  checksum: 10/13265594af4d450c77eca99c537ac01d2d4e08b397fa7c013611982b701fdc61794ad70fa6d9558ab87f804f0a327f365cb88d84c245e544d39d9a5719d0db1f
+  checksum: 10/b79bacfc258ad3e24832c9434e52527eba5c60c337e806e7d2ad98677bacb49a0ccfcefdef779ab3317dc71a6bf81ab815effa0bb22770e05d871c7635d7f5c2
   languageName: node
   linkType: hard
 
@@ -28897,7 +28884,6 @@ __metadata:
   resolution: "packrat-world@workspace:."
   dependencies:
     "@babel/runtime": "npm:^7.21.0"
-    "@instructor-ai/instructor": "npm:^1.4.0"
     "@manypkg/cli": "npm:^0.21.0"
     "@prisma/extension-accelerate": "npm:^0.6.2"
     check-dependency-version-consistency: "npm:^4.1.0"
@@ -28906,7 +28892,7 @@ __metadata:
     eslint: "npm:^8.56.0"
     husky: "npm:^8.0.0"
     lint-staged: "npm:^14.0.1"
-    lucide-react-native: "npm:^0.394.0"
+    lucide-react-native: "npm:^0.396.0"
     npm-run-all: "npm:^4.1.5"
     patch-package: "npm:^8.0.0"
     postinstall-postinstall: "npm:^2.1.0"
@@ -32678,7 +32664,7 @@ __metadata:
     "@faker-js/faker": "npm:^8.4.1"
     "@hono/node-server": "npm:^1.11.0"
     "@hono/trpc-server": "npm:^0.1.1"
-    "@instructor-ai/instructor": "npm:^1.3.0"
+    "@instructor-ai/instructor": "npm:^1.5.0"
     "@libsql/client": "npm:^0.4.0-pre.5"
     "@openapitools/openapi-generator-cli": "npm:^2.7.0"
     "@packrat/validations": "npm:*"

From f8bbd25147988f9d6e78d39e90738bbaf845be4d Mon Sep 17 00:00:00 2001
From: pinocchio-life-like <icbr19fl@gmail.com>
Date: Sat, 22 Jun 2024 18:15:30 +0300
Subject: [PATCH 084/257] possible fix for flashing

---
 packages/app/context/theme.tsx                | 22 +++++++++++--------
 .../app/hooks/appearance/useAppearance.ts     |  3 +--
 2 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/packages/app/context/theme.tsx b/packages/app/context/theme.tsx
index 846c275d6..ecbedca91 100644
--- a/packages/app/context/theme.tsx
+++ b/packages/app/context/theme.tsx
@@ -68,17 +68,21 @@ export const ThemeProvider = ({ children }) => {
 
   useEffect(() => {
     const fetchTheme = async () => {
-      if (storedIsEnabled !== null) {
-        const isEnabled = JSON.parse(storedIsEnabled);
-        dispatch({
-          type: isEnabled ? 'ENABLE_DARK_MODE' : 'ENABLE_LIGHT_MODE',
-        });
-      } else {
-        dispatch({ type: 'ENABLE_LIGHT_MODE' });
+      try {
+        if (storedIsEnabled !== null) {
+          const isEnabled = JSON.parse(storedIsEnabled);
+          dispatch({
+            type: isEnabled ? 'ENABLE_DARK_MODE' : 'ENABLE_LIGHT_MODE',
+          });
+        } else {
+          dispatch({ type: 'ENABLE_LIGHT_MODE' });
+        }
+      } catch (e) {
+        console.error('Local storage is unavailable:', e);
+      } finally {
+        setLoading(false);
       }
-      setLoading(false);
     };
-
     fetchTheme();
   }, [storedIsEnabled]);
 
diff --git a/packages/app/hooks/appearance/useAppearance.ts b/packages/app/hooks/appearance/useAppearance.ts
index a699f27e3..dd69d5ff2 100644
--- a/packages/app/hooks/appearance/useAppearance.ts
+++ b/packages/app/hooks/appearance/useAppearance.ts
@@ -2,7 +2,7 @@ import useTheme from '../useTheme';
 import { useStorageState } from 'app/hooks/storage/useStorageState';
 
 const useAppearance = () => {
-  const { enableDarkMode, enableLightMode, isDark, currentTheme } = useTheme();
+  const { enableDarkMode, enableLightMode, currentTheme } = useTheme();
   const [[, isEnabledString], setIsEnabled] = useStorageState('isEnabled');
 
   // Convert string to boolean
@@ -11,7 +11,6 @@ const useAppearance = () => {
   const toggleSwitch = async () => {
     const newIsEnabledValue = !isEnabled ? 'true' : 'false';
     setIsEnabled(newIsEnabledValue);
-    // Apply theme change directly here to avoid dependency on isEnabled state update
     if (!isEnabled) {
       enableDarkMode();
     } else {

From 02408dbd660b10891f34070d6daf2a025500e1d7 Mon Sep 17 00:00:00 2001
From: Muhammad Hassan <mh7722178@gmail.com>
Date: Sat, 22 Jun 2024 22:16:25 +0500
Subject: [PATCH 085/257] Some More Types Foxed

---
 packages/app/components/chat/index.tsx          |  4 ++--
 packages/app/components/feed/FeedCard.tsx       |  4 ++--
 packages/app/components/itemtable/itemTable.tsx |  2 +-
 packages/app/constants/convertStateToAbbr.ts    |  6 +++---
 packages/app/constants/pack/icons.ts            | 14 +++++++-------
 packages/app/context/Auth/SessionProvider.tsx   |  9 ++++++++-
 packages/app/hooks/chat/useChat.ts              |  6 +++---
 7 files changed, 26 insertions(+), 19 deletions(-)

diff --git a/packages/app/components/chat/index.tsx b/packages/app/components/chat/index.tsx
index add9bf7e3..f3507bddb 100644
--- a/packages/app/components/chat/index.tsx
+++ b/packages/app/components/chat/index.tsx
@@ -26,7 +26,7 @@ interface ChatComponentProps {
 interface ChatModalTriggerProps {
   title: string;
   trigger: string;
-  itemTypeId: string | null;
+  itemTypeId?: string | null;
 }
 
 const ChatComponent: React.FC<ChatComponentProps> = ({
@@ -44,7 +44,7 @@ const ChatComponent: React.FC<ChatComponentProps> = ({
     setUserInput,
     setTypeId,
     isLoading,
-  } = useChat({ itemTypeId });
+  } = useChat({ itemTypeId  });
 
   const [messages, setMessages] = useState(parsedMessages);
 
diff --git a/packages/app/components/feed/FeedCard.tsx b/packages/app/components/feed/FeedCard.tsx
index f029adc64..8431fafcb 100644
--- a/packages/app/components/feed/FeedCard.tsx
+++ b/packages/app/components/feed/FeedCard.tsx
@@ -297,7 +297,7 @@ export default function Card({
                               gap: 8,
                             }}
                           >
-                            {user?.id === owner_id?.id ? null : (
+                            {user?.id === owner_id ? (
                               <TouchableOpacity onPress={handleAddToFavorite}>
                                 <AntDesign
                                   name="heart"
@@ -309,7 +309,7 @@ export default function Card({
                                   }
                                 />
                               </TouchableOpacity>
-                            )}
+                            ) : null}
 
                             <RText
                               color={currentTheme.colors.textColor}
diff --git a/packages/app/components/itemtable/itemTable.tsx b/packages/app/components/itemtable/itemTable.tsx
index cb3c1be14..4da7ac77d 100644
--- a/packages/app/components/itemtable/itemTable.tsx
+++ b/packages/app/components/itemtable/itemTable.tsx
@@ -152,7 +152,7 @@ export const ItemsTable = ({
             paddingTop: 30,
             marginTop: 20,
             backgroundColor: isDark ? '#1A1A1D' : 'white',
-            width: screenWidth <= SCREEN_WIDTH ? '80vw' : '60vw',
+            width: Platform.OS === 'web' ? (screenWidth <= SCREEN_WIDTH ? '80vw' : '60vw') : (screenWidth <= SCREEN_WIDTH ? '80vw' : '60vw'),
           }}
         >
           <ScrollView
diff --git a/packages/app/constants/convertStateToAbbr.ts b/packages/app/constants/convertStateToAbbr.ts
index 2381c818e..5a4776d14 100644
--- a/packages/app/constants/convertStateToAbbr.ts
+++ b/packages/app/constants/convertStateToAbbr.ts
@@ -5,7 +5,7 @@
  * @param {string} to - The conversion direction. Possible values are "abbr" for abbreviation to name conversion and "name" for name to abbreviation conversion.
  * @return {string} The converted region name or abbreviation.
  */
-export default function abbrRegion(input, to) {
+export default function abbrRegion(input : string, to : 'abbr' | 'name') : string | undefined {
   const states = [
     ['Alabama', 'AL'],
     ['Alaska', 'AK'],
@@ -94,14 +94,14 @@ export default function abbrRegion(input, to) {
       return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
     });
     for (i = 0; i < regions.length; i++) {
-      if (regions[i][0] == input) {
+      if (regions[i] && regions[i][0] == input) {
         return regions[i][1];
       }
     }
   } else if (to == 'name') {
     input = input.toUpperCase();
     for (i = 0; i < regions.length; i++) {
-      if (regions[i][1] == input) {
+      if (regions[i] && regions[i][1] == input) {
         return regions[i][0];
       }
     }
diff --git a/packages/app/constants/pack/icons.ts b/packages/app/constants/pack/icons.ts
index 39207901a..7a8c6a8e6 100644
--- a/packages/app/constants/pack/icons.ts
+++ b/packages/app/constants/pack/icons.ts
@@ -4,12 +4,12 @@ export const categoryIcons = {
   [ItemCategoryEnum.ESSENTIALS]: 'check-square',
   [ItemCategoryEnum.FOOD]: 'coffee',
   [ItemCategoryEnum.WATER]: 'droplet',
-  [ItemCategoryEnum.CLOTHING]: 'tshirt',
-  [ItemCategoryEnum.SHELTER]: 'home',
-  [ItemCategoryEnum.SLEEPING]: 'moon',
-  [ItemCategoryEnum.HYGIENE]: 'smile',
-  [ItemCategoryEnum.TOOLS]: 'tool',
-  [ItemCategoryEnum.MEDICAL]: 'heart',
-  [ItemCategoryEnum.OTHER]: 'more-horizontal',
+  // [ItemCategoryEnum.CLOTHING]: 'tshirt',
+  // [ItemCategoryEnum.SHELTER]: 'home',
+  // [ItemCategoryEnum.SLEEPING]: 'moon',
+  // [ItemCategoryEnum.HYGIENE]: 'smile',
+  // [ItemCategoryEnum.TOOLS]: 'tool',
+  // [ItemCategoryEnum.MEDICAL]: 'heart',
+  // [ItemCategoryEnum.OTHER]: 'more-horizontal',
   Undefined: 'help-circle', // Choose an appropriate icon for "Undefined" category
 };
diff --git a/packages/app/context/Auth/SessionProvider.tsx b/packages/app/context/Auth/SessionProvider.tsx
index 30b74a80e..47e8655d0 100644
--- a/packages/app/context/Auth/SessionProvider.tsx
+++ b/packages/app/context/Auth/SessionProvider.tsx
@@ -3,7 +3,14 @@ import { useRouter } from 'app/hooks/router';
 import React, { useEffect } from 'react';
 import { useStorageState } from 'app/hooks/storage/useStorageState';
 
-const AuthContext = React.createContext(null);
+interface AuthContextType {
+  sessionSignIn: (session: any) => void; // Adjust 'any' to the specific session type
+  sessionSignOut: () => void;
+  session: string | null;
+  isLoading: boolean;
+}
+
+const AuthContext = React.createContext<AuthContextType | null>(null);
 
 // // This hook can be used to access the user info. TODO: implement
 export function useAuth() {
diff --git a/packages/app/hooks/chat/useChat.ts b/packages/app/hooks/chat/useChat.ts
index d8570392d..bc13b48c8 100644
--- a/packages/app/hooks/chat/useChat.ts
+++ b/packages/app/hooks/chat/useChat.ts
@@ -3,7 +3,7 @@ import { useGetUserChats } from './useGetUserChats';
 import { useGetAIResponse } from './useGetAIResponse';
 import { useAuthUser } from 'app/auth/hooks';
 
-export const useChat = (itemTypeId?: string | null) => {
+export const useChat = (itemTypeId: string | null = null) => {
   const user = useAuthUser();
   const [typeId, setTypeId] = useState(itemTypeId);
   const [isLoading, setIsLoading] = useState(false);
@@ -13,7 +13,7 @@ export const useChat = (itemTypeId?: string | null) => {
 
   const { data: chatsData, refetch } = useGetUserChats(
     user?.id,
-    typeId.itemTypeId,
+    typeId?.itemTypeId,
   );
 
   const { getAIResponse } = useGetAIResponse();
@@ -73,7 +73,7 @@ export const useChat = (itemTypeId?: string | null) => {
     await getAIResponse({
       userId: user?.id,
       userInput: userMessage,
-      itemTypeId: typeId.itemTypeId,
+      itemTypeId: typeId?.itemTypeId,
     });
     await refetch();
     setIsLoading(false);

From 31fa481a8bd8263d72d713e53cd38e2a17e0edcb Mon Sep 17 00:00:00 2001
From: Tadjaur <tadjaur@tas-groups.com>
Date: Sat, 22 Jun 2024 20:22:48 +0100
Subject: [PATCH 086/257] Fix app crash when viewing downloaded maps

---
 packages/app/screens/maps/index.tsx | 40 ++++++++++++++---------------
 packages/app/utils/mapFunctions.ts  |  2 +-
 2 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/packages/app/screens/maps/index.tsx b/packages/app/screens/maps/index.tsx
index 3cbb81eeb..ec035daf0 100644
--- a/packages/app/screens/maps/index.tsx
+++ b/packages/app/screens/maps/index.tsx
@@ -12,6 +12,7 @@ import {
 } from 'app/utils/mapFunctions';
 import { api } from 'app/constants/api';
 import { RStack } from '@packrat/ui';
+import useCustomStyles from 'app/hooks/useCustomStyles';
 
 function CircleCapComp() {
   const { enableDarkMode, enableLightMode, isDark, isLight, currentTheme } =
@@ -32,6 +33,8 @@ function CircleCapComp() {
 }
 
 export default function DownloadedMaps() {
+  const styles = useCustomStyles(loadStyles);
+
   const { enableDarkMode, enableLightMode, isDark, isLight, currentTheme } =
     useTheme();
   const [offlinePacks, setOfflinePacks] = useState(null);
@@ -42,9 +45,7 @@ export default function DownloadedMaps() {
   if (pack != null) {
     shape = pack && JSON.parse(JSON.parse(pack.metadata).shape);
     const dw = Dimensions.get('screen').width;
-    const bounds = getShapeSourceBounds(shape);
-
-    zoomLevel = calculateZoomLevel(bounds[0].concat(bounds[1]), {
+    zoomLevel = calculateZoomLevel(pack.bounds, {
       width: dw,
       height: 360,
     });
@@ -91,9 +92,8 @@ export default function DownloadedMaps() {
                       borderRadius: 10,
                     }}
                     source={{
-                      uri: `${api}/mapPreview/${
-                        pack?.bounds[0] + ',' + pack?.bounds[1]
-                      },10,60,60/600x600`,
+                      uri: `${api}/mapPreview/${pack?.bounds[0] + ',' + pack?.bounds[1]
+                        },10,60,60/600x600`,
                     }}
                   />
                 )}
@@ -129,8 +129,8 @@ export default function DownloadedMaps() {
             <Mapbox.Camera
               zoomLevel={zoomLevel}
               centerCoordinate={[
-                (pack.bounds[0][0] + pack.bounds[1][0]) / 2,
-                (pack.bounds[0][1] + pack.bounds[1][1]) / 2,
+                (pack.bounds[0] + pack.bounds[2]) / 2,
+                (pack.bounds[1] + pack.bounds[3]) / 2,
               ]}
               animationMode={'flyTo'}
               animationDuration={2000}
@@ -147,10 +147,7 @@ export default function DownloadedMaps() {
             >
               <Mapbox.LineLayer
                 id="layer1"
-                style={[
-                  styles.lineLayer,
-                  { lineColor: currentTheme.colors.cardIconColor },
-                ]}
+                style={styles.lineLayer}
               />
             </Mapbox.ShapeSource>
             {/* // top location */}
@@ -159,8 +156,8 @@ export default function DownloadedMaps() {
                 id={'cicleCap'}
                 coordinate={
                   shape?.features[0]?.geometry?.coordinates[
-                    shape?.features[0]?.geometry?.coordinates?.length - 1
-                  ]
+                  shape?.features[0]?.geometry?.coordinates?.length - 1
+                  ][0]
                 }
               >
                 <View>
@@ -183,9 +180,12 @@ export default function DownloadedMaps() {
   );
 }
 
-const styles = StyleSheet.create({
-  lineLayer: {
-    lineWidth: 4,
-    lineOpacity: 1,
-  },
-});
+const loadStyles = ({ currentTheme }) => {
+  return ({
+    lineLayer: {
+      lineWidth: 4,
+      lineOpacity: 1,
+      lineColor: currentTheme.colors.cardIconColor
+    },
+  });
+};
diff --git a/packages/app/utils/mapFunctions.ts b/packages/app/utils/mapFunctions.ts
index f16c49f04..f7278f229 100644
--- a/packages/app/utils/mapFunctions.ts
+++ b/packages/app/utils/mapFunctions.ts
@@ -163,7 +163,7 @@ function calculateZoomLevel(bounds, mapDim) {
   const lngDiff = ne.lng - sw.lng;
   const lngFraction = (lngDiff < 0 ? lngDiff + 360 : lngDiff) / 360;
 
-  const latZoom = zoom(mapDim.height, WORLD_DIM.height, latFraction);
+  const latZoom = zoom(mapDim.height, WORLD_DIM.height, Math.abs(latFraction));
   const lngZoom = zoom(mapDim.width, WORLD_DIM.width, lngFraction);
 
   return latZoom;

From 4d9e12aaac036d9b02d40728ecbafa4a879c700d Mon Sep 17 00:00:00 2001
From: Anmol Verma <anmolverma2810@gmail.com>
Date: Sun, 23 Jun 2024 01:03:41 +0530
Subject: [PATCH 087/257] Give minheight to scorecontainer

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

diff --git a/packages/app/components/pack/PackDetails.tsx b/packages/app/components/pack/PackDetails.tsx
index 7facca5e5..5a7c26dd9 100644
--- a/packages/app/components/pack/PackDetails.tsx
+++ b/packages/app/components/pack/PackDetails.tsx
@@ -112,11 +112,13 @@ export function PackDetails() {
                                 ) : null;
                               case SECTION.SCORECARD:
                                 return (
+                                  <View style={{minHeight:700}}>
                                   <ScoreContainer
                                     type="pack"
                                     data={currentPack}
                                     isOwner={isOwner}
                                   />
+                                  </View>
                                 );
                               // case SECTION.CHAT:
                               //   return (

From cdf07f4b8394f252838ff0467ba1050ac108e5de Mon Sep 17 00:00:00 2001
From: Muhammad Hassan <mh7722178@gmail.com>
Date: Sun, 23 Jun 2024 17:41:43 +0500
Subject: [PATCH 088/257] Some More Types Fixed

---
 apps/expo/app/(app)/modal.tsx                    |  4 +++-
 packages/app/auth/hooks/useLogout.ts             |  2 +-
 packages/app/components/chat/index.tsx           |  6 +++---
 packages/app/components/feed/FeedCard.tsx        |  6 +++---
 packages/app/components/pack/CopyPackModal.tsx   |  2 +-
 packages/app/components/pack_table/TableItem.tsx | 11 ++++++++---
 packages/app/components/progress/index.tsx       |  2 +-
 packages/app/components/weather/WeatherCard.tsx  |  8 ++++----
 packages/app/constants/convertStateToAbbr.ts     |  4 ++--
 packages/app/screens/trip/steps.tsx              | 15 ++++++++-------
 packages/app/screens/user/Settings.tsx           |  8 +++++---
 packages/ui/src/ZDropdown/index.tsx              | 13 +++++++++++--
 12 files changed, 50 insertions(+), 31 deletions(-)

diff --git a/apps/expo/app/(app)/modal.tsx b/apps/expo/app/(app)/modal.tsx
index ac6207489..adf307a82 100644
--- a/apps/expo/app/(app)/modal.tsx
+++ b/apps/expo/app/(app)/modal.tsx
@@ -26,8 +26,10 @@ export default function Modal() {
             // https://reactnavigation.org/docs/headers#replacing-the-title-with-a-custom-component
 
             presentation: 'modal',
+            headerShown: false,
+            headerTitle: 'model'
           }}
-          screenOptions={{ headerShown: false, headerTitle: 'modal' }}
+          // screenOptions={{ headerShown: false, headerTitle: 'modal' }}
         />
 
       <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
diff --git a/packages/app/auth/hooks/useLogout.ts b/packages/app/auth/hooks/useLogout.ts
index d97bd4db4..342fc5563 100644
--- a/packages/app/auth/hooks/useLogout.ts
+++ b/packages/app/auth/hooks/useLogout.ts
@@ -1,4 +1,4 @@
-import { Storage } from 'app/utils/storage';
+import Storage from 'app/utils/storage';
 import { useUserSetter } from './useUserSetter';
 
 export const useLogout = () => {
diff --git a/packages/app/components/chat/index.tsx b/packages/app/components/chat/index.tsx
index f3507bddb..04c35955e 100644
--- a/packages/app/components/chat/index.tsx
+++ b/packages/app/components/chat/index.tsx
@@ -204,9 +204,6 @@ const ChatModalTrigger: React.FC<ChatModalTriggerProps> = ({ itemTypeId }) => {
           }}
         >
           <Button
-            backgroundColor="$background"
-            top="$2"
-            right="$2"
             size="$2"
             circular
             icon={X}
@@ -214,6 +211,9 @@ const ChatModalTrigger: React.FC<ChatModalTriggerProps> = ({ itemTypeId }) => {
             style={{
               zIndex: 1001,
               position: 'absolute',
+              backgroundColor: `$background`,
+              top: `$2`,
+              right: `$2`,
             }}
           />
           <ChatComponent itemTypeId={itemTypeId} />
diff --git a/packages/app/components/feed/FeedCard.tsx b/packages/app/components/feed/FeedCard.tsx
index 8431fafcb..556959059 100644
--- a/packages/app/components/feed/FeedCard.tsx
+++ b/packages/app/components/feed/FeedCard.tsx
@@ -35,7 +35,7 @@ interface CardProps {
     id: string;
   }>;
   favorites_count: number;
-  owner_id: string | {id : String};
+  owner_id: string | { id: String };
   destination: string;
   createdAt: string;
   owners: Array<{ any: any }>;
@@ -121,7 +121,7 @@ export default function Card({
   let numberOfNights;
 
   if (duration) numberOfNights = JSON.parse(duration).numberOfNights;
-
+  const calculatedWidth = Platform.OS === 'web' ? '60vw' : '60%';
   return (
     <Layout>
       <ContextMenu.Root>
@@ -131,7 +131,7 @@ export default function Card({
               alignItems: 'center',
               padding: 16,
               flex: 1,
-              width: Platform.OS === 'web' ?  '60vw' : "60%",
+              width: calculatedWidth,
             }}
           >
             <View
diff --git a/packages/app/components/pack/CopyPackModal.tsx b/packages/app/components/pack/CopyPackModal.tsx
index 263b1a3d4..1a694938f 100644
--- a/packages/app/components/pack/CopyPackModal.tsx
+++ b/packages/app/components/pack/CopyPackModal.tsx
@@ -40,7 +40,7 @@ export const CopyPackModal = ({ isOpen, onClose, currentPack }) => {
           unit: item.unit,
           packId: response.id,
           type: item.category.name,
-          ownerId: user?.id,
+          ownerId: user?.id!,
         });
       }
       onClose();
diff --git a/packages/app/components/pack_table/TableItem.tsx b/packages/app/components/pack_table/TableItem.tsx
index 1c82371f6..fb0cc7192 100644
--- a/packages/app/components/pack_table/TableItem.tsx
+++ b/packages/app/components/pack_table/TableItem.tsx
@@ -12,7 +12,12 @@ import { RText, ZDropdown } from '@packrat/ui';
 import { useAuthUser } from 'app/auth/hooks';
 
 
-type ModalName = 'edit' | 'delete';
+type ModalName = 'edit' | 'delete' | null;
+
+type DropDownItems = {
+  label: string;
+  onSelect: () => void;
+}
 
 interface TableItemProps {
   itemData: any;
@@ -52,13 +57,13 @@ const TableItem = ({
     setActiveModal(null);
   };
 
-  let rowActionItems = [
+  let rowActionItems: DropDownItems[] = [
     { label: 'Delete', onSelect: () => openModal('delete') },
     // TODO Implement Ignore Pack Item functional
     // { label: 'Ignore', onSelect: () => {} },
   ];
 
-  if (authUser.id === itemData.ownerId) {
+  if (authUser && itemData && authUser.id === itemData.ownerId) {
     rowActionItems = [
       {
         label: 'Edit',
diff --git a/packages/app/components/progress/index.tsx b/packages/app/components/progress/index.tsx
index f373deaf4..e4990eb08 100644
--- a/packages/app/components/progress/index.tsx
+++ b/packages/app/components/progress/index.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { Progress } from 'native-base';
 import useTheme from 'app/hooks/useTheme';
-import { useProgressStore } from 'app/global-state/progressStore';
+import { useProgressStore } from 'app/atoms/progressStore';
 
 const ProgressBarComponent = () => {
   const { currentTheme } = useTheme();
diff --git a/packages/app/components/weather/WeatherCard.tsx b/packages/app/components/weather/WeatherCard.tsx
index 28c66ba6f..e1d03111b 100644
--- a/packages/app/components/weather/WeatherCard.tsx
+++ b/packages/app/components/weather/WeatherCard.tsx
@@ -57,7 +57,7 @@ export default function WeatherCard({
   const styles = useCustomStyles(loadStyles);
   const { dateFormatted, day, restOfWeek } = useDate();
 
-  const weatherIconUrl = `https://openweathermap.org/img/wn/${weatherObject.weather[0].icon}@2x.png`;
+  const weatherIconUrl = `https://openweathermap.org/img/wn/${weatherObject!.weather[0]!.icon}@2x.png`;
 
   return (
     <RStack
@@ -156,7 +156,7 @@ export default function WeatherCard({
             {convertToCelsius(weatherObject.main.temp)}
           </RText>
           <RText style={{ fontWeight: 700 }}>
-            {weatherObject.weather[0].description}
+            {weatherObject!.weather[0]!.description}
           </RText>
         </RStack>
       </RStack>
@@ -240,7 +240,7 @@ export default function WeatherCard({
           style={styles.cardContainer}
         >
           {weatherWeek.map((day, i) => {
-            const weatherIconUrl = `https://openweathermap.org/img/wn/${day.weather[0].icon}@2x.png`;
+            const weatherIconUrl = `https://openweathermap.org/img/wn/${day!.weather[0]!.icon}@2x.png`;
 
             return (
               <RStack
@@ -284,7 +284,7 @@ export default function WeatherCard({
             <RStack key={index} style={styles.weatherInfo}>
               <RText style={{ color: styles.tempColor.color }}>{day}</RText>
               <RText style={{ color: styles.tempColor.color }}>
-                {convertToCelsius(weatherWeek[index].main.temp)}
+                {convertToCelsius(weatherWeek[index]!.main!.temp)}
               </RText>
             </RStack>
           );
diff --git a/packages/app/constants/convertStateToAbbr.ts b/packages/app/constants/convertStateToAbbr.ts
index 5a4776d14..ea3cbc40a 100644
--- a/packages/app/constants/convertStateToAbbr.ts
+++ b/packages/app/constants/convertStateToAbbr.ts
@@ -94,14 +94,14 @@ export default function abbrRegion(input : string, to : 'abbr' | 'name') : strin
       return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
     });
     for (i = 0; i < regions.length; i++) {
-      if (regions[i] && regions[i][0] == input) {
+      if (regions[i] !== undefined && regions[i][0] == input) {
         return regions[i][1];
       }
     }
   } else if (to == 'name') {
     input = input.toUpperCase();
     for (i = 0; i < regions.length; i++) {
-      if (regions[i] && regions[i][1] == input) {
+      if (regions[i] !== undefined && regions[i][1] == input) {
         return regions[i][0];
       }
     }
diff --git a/packages/app/screens/trip/steps.tsx b/packages/app/screens/trip/steps.tsx
index ae836651b..98f71cbb3 100644
--- a/packages/app/screens/trip/steps.tsx
+++ b/packages/app/screens/trip/steps.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { FontAwesome5, FontAwesome } from '@expo/vector-icons';
-import { TripCard } from 'app/components/trip/TripCard';
+import TripCard from 'app/components/trip/TripCard';
 import WeatherCard from 'app/components/weather/WeatherCard';
 import { GearList } from 'app/components/GearList/GearList';
 import { SaveTripContainer } from 'app/components/trip/createTripModal';
@@ -8,8 +8,9 @@ import TripDateRange from 'app/components/trip/TripDateRange';
 import useTheme from 'app/hooks/useTheme';
 import useCustomStyles from 'app/hooks/useCustomStyles';
 import { useFetchWeather, useFetchWeatherWeak } from 'app/hooks/weather';
-import { useParks } from 'app/hooks/parks';
+import  useParks from 'app/hooks/parks';
 
+const { currentTheme } = useTheme()
 const steps = [
   {
     name: 'Step 1',
@@ -21,7 +22,7 @@ const steps = [
           <FontAwesome
             name="map"
             size={20}
-            color={theme.colors.cardIconColor}
+            color={currentTheme.colors.cardIconColor}
           />
         )}
       />
@@ -29,7 +30,7 @@ const steps = [
     sidebarData: {
       title: 'Where are you heading?',
       Icon: () => (
-        <FontAwesome name="map" size={20} color={theme.colors.cardIconColor} />
+        <FontAwesome name="map" size={20} color={currentTheme.colors.cardIconColor} />
       ),
     },
   },
@@ -51,7 +52,7 @@ const steps = [
           <FontAwesome5
             name="hiking"
             size={20}
-            color={theme.colors.cardIconColor}
+            color={currentTheme.colors.cardIconColor}
           />
         )}
       />
@@ -68,7 +69,7 @@ const steps = [
           <FontAwesome5
             name="mountain"
             size={20}
-            color={theme.colors.cardIconColor}
+            color={currentTheme.colors.cardIconColor}
           />
         )}
       />
@@ -92,7 +93,7 @@ const steps = [
           <FontAwesome5
             name="route"
             size={24}
-            color={theme.colors.cardIconColor}
+            color={currentTheme.colors.cardIconColor}
           />
         )}
         title="Map"
diff --git a/packages/app/screens/user/Settings.tsx b/packages/app/screens/user/Settings.tsx
index 2f88aa0e3..383734a18 100644
--- a/packages/app/screens/user/Settings.tsx
+++ b/packages/app/screens/user/Settings.tsx
@@ -45,7 +45,9 @@ export default function Settings() {
     <RScrollView style={{ backgroundColor: isDark ? '#1A1A1D' : 'white' }}>
       <RStack
         gap={8}
-        width="fit-content"
+        style={{
+          width: 'fit-content'
+        }}
         maw="100%"
         paddingVertical={20}
         paddingHorizontal={8}
@@ -142,10 +144,10 @@ export default function Settings() {
         <RStack marginTop={20} marginBottom={10}>
           <RH2>Change Password</RH2>
           <RSeparator marginVertical={8} />
-          <RText fontSize={16}>We will email you to verify the change.</RText>
+          <RText size={16}>We will email you to verify the change.</RText>
         </RStack>
         <Form validationSchema={passwordChangeSchema}>
-          <RStack space="$3" width="100%" marginHorizontal="auto">
+          <RStack space="$3" style={{width:"100%", marginHorizontal:"auto"}}>
             <RStack space="$2">
               <RLabel htmlFor="oldPassword">Old password</RLabel>
               <FormInput
diff --git a/packages/ui/src/ZDropdown/index.tsx b/packages/ui/src/ZDropdown/index.tsx
index a468cf5eb..8ca68a46b 100644
--- a/packages/ui/src/ZDropdown/index.tsx
+++ b/packages/ui/src/ZDropdown/index.tsx
@@ -5,6 +5,15 @@ import { ViewProps } from 'react-native';
 
 import RIconButton from '../RIconButton';
 
+type DropDownItems = {
+  label: string;
+  onSelect: () => void;
+};
+
+interface ZDropDownItems{
+  dropdownItems : DropDownItems[]
+}
+
 interface ExtendedDropdownMenuProps extends ViewProps {
   css?: string;
 }
@@ -45,7 +54,7 @@ const CustomItem = styled(ExtendedDropdownMenuItem, {
 
 const DropdownMenuItem = DropdownMenu.create(CustomItem, 'Item');
 
-export const ZDropdownWeb = ({ dropdownItems = [] }) => {
+export const ZDropdownWeb = ({ dropdownItems = [] } : ZDropDownItems) => {
   return (
     <DropdownMenu.Root>
       <DropdownMenu.Trigger>
@@ -66,7 +75,7 @@ export const ZDropdownWeb = ({ dropdownItems = [] }) => {
   );
 };
 
-export const ZDropdownNative = ({ dropdownItems = [] }) => {
+export const ZDropdownNative = ({ dropdownItems = [] } : ZDropDownItems) => {
   return (
     <DropdownMenu.Root>
       <DropdownMenu.Trigger>

From 6860f9beccb4a0230476a2e03237adb52910b7c0 Mon Sep 17 00:00:00 2001
From: Taron <taron.aleksanyan.20@gmail.com>
Date: Sun, 23 Jun 2024 18:15:16 +0400
Subject: [PATCH 089/257] eslint setup fixes

---
 .eslintrc-front.js        | 49 +++++++++++++++++++++++
 .eslintrc.js              | 69 ++++++++++++++++++++++++++++++++
 .husky/pre-commit         |  2 +-
 apps/expo/.eslintrc.js    | 76 +-----------------------------------
 apps/tauri/.eslintrc.cjs  | 18 ++-------
 apps/vite/.eslintrc.cjs   | 18 ++-------
 package.json              |  6 +--
 packages/app/.eslintrc.js | 82 +--------------------------------------
 packages/ui/.eslintrc.js  |  3 ++
 9 files changed, 132 insertions(+), 191 deletions(-)
 create mode 100644 .eslintrc-front.js
 create mode 100644 .eslintrc.js
 create mode 100644 packages/ui/.eslintrc.js

diff --git a/.eslintrc-front.js b/.eslintrc-front.js
new file mode 100644
index 000000000..510d39c4b
--- /dev/null
+++ b/.eslintrc-front.js
@@ -0,0 +1,49 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+  },
+  extends: ['./.eslintrc.js', 'plugin:react/recommended'],
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    project: './tsconfig.json',
+  },
+  plugins: ['react', 'react-native', '@typescript-eslint', 'prettier'],
+  rules: {
+    'prettier/prettier': 'error',
+    '@typescript-eslint/explicit-function-return-type': 'off',
+    '@typescript-eslint/prefer-nullish-coalescing': 'off',
+    '@typescript-eslint/strict-boolean-expressions': 'off',
+    '@typescript-eslint/no-explicit-any': 'off',
+    'react-native/no-inline-styles': 'off',
+    '@typescript-eslint/no-unused-vars': 'off',
+    '@typescript-eslint/restrict-template-expressions': 'off',
+    eqeqeq: 'off',
+    '@typescript-eslint/naming-convention': 'off',
+    'no-unreachable': 'off',
+    '@typescript-eslint/no-var-requires': 'off',
+    '@typescript-eslint/no-confusing-void-expression': 'off',
+    '@typescript-eslint/no-floating-promises': 'off',
+    '@typescript-eslint/no-misused-promises': 'off',
+    'import/no-duplicates': 'off',
+    'multiline-ternary': 'off',
+    'no-dupe-keys': 'off',
+    '@typescript-eslint/ban-ts-comment': 'off',
+    'array-callback-return': 'off',
+    '@typescript-eslint/array-callback-return': 'off',
+    'no-empty': 'off',
+    'operator-linebreak': 'off',
+    '@typescript-eslint/await-thenable': 'off',
+    '@typescript-eslint/prefer-optional-chain': 'off',
+    '@typescript-eslint/return-await': 'off',
+  },
+  settings: {
+    react: {
+      version: 'detect',
+    },
+  },
+};
diff --git a/.eslintrc.js b/.eslintrc.js
new file mode 100644
index 000000000..4df459c66
--- /dev/null
+++ b/.eslintrc.js
@@ -0,0 +1,69 @@
+// .eslintrc.js
+module.exports = {
+  env: {
+    es2021: true,
+  },
+  extends: [
+    'standard-with-typescript',
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'prettier',
+  ],
+  overrides: [
+    {
+      env: {
+        node: true,
+      },
+      files: ['.eslintrc.{js,cjs,jsx,ts,tsx}'],
+      parserOptions: {
+        sourceType: 'script',
+      },
+    },
+  ],
+  ignorePatterns: [
+    '.eslintrc.js',
+    '**/node_modules/**',
+    '**/dist/**',
+    '**/build/**',
+    '**/types/**',
+    '**/public/**',
+    'babel.config.js',
+  ],
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    project: './tsconfig.json',
+  },
+  plugins: ['react', 'react-native', '@typescript-eslint', 'prettier'],
+  rules: {
+    'prettier/prettier': 'error',
+    '@typescript-eslint/explicit-function-return-type': 'off',
+    '@typescript-eslint/prefer-nullish-coalescing': 'off',
+    '@typescript-eslint/strict-boolean-expressions': 'off',
+    '@typescript-eslint/no-explicit-any': 'off',
+    'react-native/no-inline-styles': 'off',
+    '@typescript-eslint/no-unused-vars': 'off',
+    '@typescript-eslint/restrict-template-expressions': 'off',
+    eqeqeq: 'off',
+    '@typescript-eslint/naming-convention': 'off',
+    'no-unreachable': 'off',
+    '@typescript-eslint/no-var-requires': 'off',
+    '@typescript-eslint/no-confusing-void-expression': 'off',
+    '@typescript-eslint/no-floating-promises': 'off',
+    '@typescript-eslint/no-misused-promises': 'off',
+    'import/no-duplicates': 'off',
+    'multiline-ternary': 'off',
+    'no-dupe-keys': 'off',
+    '@typescript-eslint/ban-ts-comment': 'off',
+    'array-callback-return': 'off',
+    '@typescript-eslint/array-callback-return': 'off',
+    'no-empty': 'off',
+    'operator-linebreak': 'off',
+    '@typescript-eslint/await-thenable': 'off',
+    '@typescript-eslint/prefer-optional-chain': 'off',
+    '@typescript-eslint/return-await': 'off',
+  },
+};
diff --git a/.husky/pre-commit b/.husky/pre-commit
index e260d861b..bafe092f8 100755
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@@ -10,7 +10,7 @@ echo "🔍 Running pre-commit hook"
 
 # Running lint-staged
 echo "🔄 Running lint-staged..."
-# npx lint-staged
+npx lint-staged
 
 if [ $? -eq 0 ]; then
   echo -e "${GREEN}✅ Lint-staged passed${NC}"
diff --git a/apps/expo/.eslintrc.js b/apps/expo/.eslintrc.js
index f695c35a0..926611f6e 100644
--- a/apps/expo/.eslintrc.js
+++ b/apps/expo/.eslintrc.js
@@ -1,82 +1,10 @@
 module.exports = {
-  env: {
-    browser: true,
-    es2021: true,
-  },
-  extends: [
-    'standard-with-typescript',
-    'plugin:@typescript-eslint/recommended',
-    'plugin:@tanstack/eslint-plugin-query/recommended',
-    'prettier',
-  ],
-  overrides: [
-    {
-      env: {
-        node: true,
-      },
-      files: ['.eslintrc.{js,cjs,jsx,ts,tsx}'],
-      parserOptions: {
-        sourceType: 'script',
-      },
-    },
-  ],
+  extends: ['../../.eslintrc-front.js'],
   ignorePatterns: [
-    '.eslintrc.js',
-    '**/node_modules/**',
-    '**/dist/**',
-    '**/coverage/**',
+    'metro.config.js',
     '**/build/**',
     '**/android/**',
     '**/ios/**',
     '**/web/**',
-    '**/config/**',
-    '**/constants/**',
-    '**/types/**',
-    '**/public/**',
-    'babel.config.js',
-    'metro.config.js',
   ],
-  parserOptions: {
-    ecmaFeatures: {
-      jsx: true,
-    },
-    ecmaVersion: 'latest',
-    sourceType: 'module',
-    project: './tsconfig.json',
-    tsconfigRootDir: __dirname,
-  },
-  plugins: ['react', 'react-native', '@typescript-eslint', 'prettier'],
-  rules: {
-    'prettier/prettier': 'error',
-    '@typescript-eslint/explicit-function-return-type': 'off',
-    '@typescript-eslint/prefer-nullish-coalescing': 'off',
-    '@typescript-eslint/strict-boolean-expressions': 'off',
-    '@typescript-eslint/no-explicit-any': 'off',
-    'react-native/no-inline-styles': 'off',
-    '@typescript-eslint/no-unused-vars': 'off',
-    '@typescript-eslint/restrict-template-expressions': 'off',
-    eqeqeq: 'off',
-    '@typescript-eslint/naming-convention': 'off',
-    'no-unreachable': 'off',
-    '@typescript-eslint/no-var-requires': 'off',
-    '@typescript-eslint/no-confusing-void-expression': 'off',
-    '@typescript-eslint/no-floating-promises': 'off',
-    '@typescript-eslint/no-misused-promises': 'off',
-    'import/no-duplicates': 'off',
-    'multiline-ternary': 'off',
-    'no-dupe-keys': 'off',
-    '@typescript-eslint/ban-ts-comment': 'off',
-    'array-callback-return': 'off',
-    '@typescript-eslint/array-callback-return': 'off',
-    'no-empty': 'off',
-    'operator-linebreak': 'off',
-    '@typescript-eslint/await-thenable': 'off',
-    '@typescript-eslint/prefer-optional-chain': 'off',
-    '@typescript-eslint/return-await': 'off',
-  },
-  settings: {
-    react: {
-      version: 'detect',
-    },
-  },
 };
diff --git a/apps/tauri/.eslintrc.cjs b/apps/tauri/.eslintrc.cjs
index d6c953795..1f81d8843 100644
--- a/apps/tauri/.eslintrc.cjs
+++ b/apps/tauri/.eslintrc.cjs
@@ -1,18 +1,6 @@
 module.exports = {
-  root: true,
-  env: { browser: true, es2020: true },
   extends: [
-    'eslint:recommended',
-    'plugin:@typescript-eslint/recommended',
-    'plugin:react-hooks/recommended',
+    '../../.eslintrc-front.js',
+    'plugin:@tanstack/eslint-plugin-query/recommended',
   ],
-  ignorePatterns: ['dist', '.eslintrc.cjs'],
-  parser: '@typescript-eslint/parser',
-  plugins: ['react-refresh'],
-  rules: {
-    'react-refresh/only-export-components': [
-      'warn',
-      { allowConstantExport: true },
-    ],
-  },
-}
+};
diff --git a/apps/vite/.eslintrc.cjs b/apps/vite/.eslintrc.cjs
index d6c953795..1f81d8843 100644
--- a/apps/vite/.eslintrc.cjs
+++ b/apps/vite/.eslintrc.cjs
@@ -1,18 +1,6 @@
 module.exports = {
-  root: true,
-  env: { browser: true, es2020: true },
   extends: [
-    'eslint:recommended',
-    'plugin:@typescript-eslint/recommended',
-    'plugin:react-hooks/recommended',
+    '../../.eslintrc-front.js',
+    'plugin:@tanstack/eslint-plugin-query/recommended',
   ],
-  ignorePatterns: ['dist', '.eslintrc.cjs'],
-  parser: '@typescript-eslint/parser',
-  plugins: ['react-refresh'],
-  rules: {
-    'react-refresh/only-export-components': [
-      'warn',
-      { allowConstantExport: true },
-    ],
-  },
-}
+};
diff --git a/package.json b/package.json
index dfb15974d..a2487d65c 100644
--- a/package.json
+++ b/package.json
@@ -103,10 +103,6 @@
     "typescript": "^5.3.3"
   },
   "lint-staged": {
-    "client/**/*.{js,jsx,ts,tsx}": [
-      "cd client && yarn run lint",
-      "prettier --write"
-    ],
     "server/**/*.{js,ts}": [
       "cd server && yarn run lint",
       "prettier --write"
@@ -146,4 +142,4 @@
   "resolutions": {
     "@react-native/assets-registry": "0.74.81"
   }
-}
+}
\ No newline at end of file
diff --git a/packages/app/.eslintrc.js b/packages/app/.eslintrc.js
index 70b471919..bee952fb0 100644
--- a/packages/app/.eslintrc.js
+++ b/packages/app/.eslintrc.js
@@ -1,83 +1,3 @@
 module.exports = {
-  env: {
-    browser: true,
-    es2021: true,
-  },
-  extends: [
-    'standard-with-typescript',
-    'eslint:recommended',
-    'plugin:react/recommended',
-    'plugin:@typescript-eslint/recommended',
-    'plugin:@tanstack/eslint-plugin-query/recommended',
-    'prettier',
-  ],
-  overrides: [
-    {
-      env: {
-        node: true,
-      },
-      files: ['.eslintrc.{js,cjs,jsx,ts,tsx}'],
-      parserOptions: {
-        sourceType: 'script',
-      },
-    },
-  ],
-  ignorePatterns: [
-    '.eslintrc.js',
-    '**/node_modules/**',
-    '**/dist/**',
-    '**/coverage/**',
-    '**/build/**',
-    '**/android/**',
-    '**/ios/**',
-    '**/web/**',
-    '**/config/**',
-    '**/constants/**',
-    '**/types/**',
-    '**/public/**',
-    'babel.config.js',
-    'metro.config.js',
-  ],
-  parserOptions: {
-    ecmaFeatures: {
-      jsx: true,
-    },
-    ecmaVersion: 'latest',
-    sourceType: 'module',
-    project: './tsconfig.json',
-  },
-  plugins: ['react', 'react-native', '@typescript-eslint', 'prettier'],
-  rules: {
-    'prettier/prettier': 'error',
-    '@typescript-eslint/explicit-function-return-type': 'off',
-    '@typescript-eslint/prefer-nullish-coalescing': 'off',
-    '@typescript-eslint/strict-boolean-expressions': 'off',
-    '@typescript-eslint/no-explicit-any': 'off',
-    'react-native/no-inline-styles': 'off',
-    '@typescript-eslint/no-unused-vars': 'off',
-    '@typescript-eslint/restrict-template-expressions': 'off',
-    eqeqeq: 'off',
-    '@typescript-eslint/naming-convention': 'off',
-    'no-unreachable': 'off',
-    '@typescript-eslint/no-var-requires': 'off',
-    '@typescript-eslint/no-confusing-void-expression': 'off',
-    '@typescript-eslint/no-floating-promises': 'off',
-    '@typescript-eslint/no-misused-promises': 'off',
-    'import/no-duplicates': 'off',
-    'multiline-ternary': 'off',
-    'no-dupe-keys': 'off',
-    '@typescript-eslint/ban-ts-comment': 'off',
-    'array-callback-return': 'off',
-    '@typescript-eslint/array-callback-return': 'off',
-    'no-empty': 'off',
-    'operator-linebreak': 'off',
-    '@typescript-eslint/await-thenable': 'off',
-    '@typescript-eslint/prefer-optional-chain': 'off',
-    '@typescript-eslint/return-await': 'off',
-  },
-  settings: {
-    react: {
-      version: 'detect',
-    },
-  },
+  extends: ['../../.eslintrc-front.js'],
 };
diff --git a/packages/ui/.eslintrc.js b/packages/ui/.eslintrc.js
new file mode 100644
index 000000000..bee952fb0
--- /dev/null
+++ b/packages/ui/.eslintrc.js
@@ -0,0 +1,3 @@
+module.exports = {
+  extends: ['../../.eslintrc-front.js'],
+};

From 585b4155b1cd4743e728b064a6f93c0fc681386f Mon Sep 17 00:00:00 2001
From: Muhammad Hassan <mh7722178@gmail.com>
Date: Sun, 23 Jun 2024 21:58:01 +0500
Subject: [PATCH 090/257] Types Fixes

---
 packages/app/auth/hooks/useLogout.ts          |  2 +-
 packages/app/components/card/CustomCard.tsx   |  2 +-
 .../card/PackCardHeader/PackCardHeader.tsx    | 43 +++++++++----------
 packages/app/components/feed/FeedCard.tsx     |  4 +-
 .../app/components/feed/FeedSearchFilter.tsx  |  6 +--
 .../app/components/itemtable/itemTable.tsx    |  5 ++-
 packages/app/components/pack/AddPack.tsx      | 16 +++++--
 packages/app/components/pack/PackDetails.tsx  |  2 +-
 .../pack_table/TableHelperComponents.tsx      | 19 +++++---
 .../trip/TripCards/TripSearchCard.tsx         |  5 ++-
 packages/app/components/user/UserDataCard.tsx |  2 +-
 packages/app/constants/convertStateToAbbr.ts  |  4 +-
 packages/app/hooks/chat/useChat.ts            | 10 +++--
 13 files changed, 71 insertions(+), 49 deletions(-)

diff --git a/packages/app/auth/hooks/useLogout.ts b/packages/app/auth/hooks/useLogout.ts
index 342fc5563..d97bd4db4 100644
--- a/packages/app/auth/hooks/useLogout.ts
+++ b/packages/app/auth/hooks/useLogout.ts
@@ -1,4 +1,4 @@
-import Storage from 'app/utils/storage';
+import { Storage } from 'app/utils/storage';
 import { useUserSetter } from './useUserSetter';
 
 export const useLogout = () => {
diff --git a/packages/app/components/card/CustomCard.tsx b/packages/app/components/card/CustomCard.tsx
index 3167bab31..43d67b46c 100644
--- a/packages/app/components/card/CustomCard.tsx
+++ b/packages/app/components/card/CustomCard.tsx
@@ -72,7 +72,7 @@ export const CustomCard = ({
           )}
         </View>
         <RSeparator />
-        {type === 'pack' && authUser?.id === data.owner_id ? (
+        {type === 'pack' && authUser?.id === data.owner_id.id ? (
           <>
             <View
               style={
diff --git a/packages/app/components/card/PackCardHeader/PackCardHeader.tsx b/packages/app/components/card/PackCardHeader/PackCardHeader.tsx
index 1b98a123d..65c4e4af3 100644
--- a/packages/app/components/card/PackCardHeader/PackCardHeader.tsx
+++ b/packages/app/components/card/PackCardHeader/PackCardHeader.tsx
@@ -22,7 +22,6 @@ import { Dimensions, Platform } from 'react-native';
 import { CopyPackModal } from '../../pack/CopyPackModal';
 import { View } from 'react-native';
 
-
 interface PackCardHeaderProps {
   data: any;
   title: string;
@@ -60,7 +59,7 @@ export const PackCardHeader = ({ data, title }: PackCardHeaderProps) => {
     setIsOpen(false);
     editPack(packDetails);
   };
-  
+
   return (
     <>
       <CustomCardHeader
@@ -93,43 +92,41 @@ export const PackCardHeader = ({ data, title }: PackCardHeaderProps) => {
                 }}
               />
             )}
-            
-              <EditableText
-                isLoading={isLoading}
-                defaultValue={title}
-                isFocused={isEditMode}
-                onSave={handleSaveTitle}
-              />
+
+            <EditableText
+              isLoading={isLoading}
+              defaultValue={title}
+              isFocused={isEditMode}
+              onSave={handleSaveTitle}
+            />
           </RStack>
         }
-        link = {null}
         actionsComponent={
-          user?.id === data.owner_id && (
-            Platform.OS === "web" ? (
-              <ThreeDotsMenu open={isOpen} onOpenChange={handleActionsOpenChange}>
+          user?.id === data.owner_id &&
+          (Platform.OS === 'web' ? (
+            <ThreeDotsMenu open={isOpen} onOpenChange={handleActionsOpenChange}>
               <YStack space="$1">
                 <RButton onPress={handleEdit}>Edit</RButton>
                 <RButton onPress={handleSavePack}>Save</RButton>
                 <RButton onPress={handleDelete}>Delete</RButton>
               </YStack>
             </ThreeDotsMenu>
-            ) : (
-              <RContextMenu
+          ) : (
+            <RContextMenu
               menuItems={[
-                { label: 'Edit', onSelect:handleEdit },
+                { label: 'Edit', onSelect: handleEdit },
                 { label: 'Save', onSelect: handleSavePack },
-                {label:'Delete', onSelect:handleDeletePack}
+                { label: 'Delete', onSelect: handleDeletePack },
               ]}
               menuName={
                 <RIconButton
-          backgroundColor="transparent"
-          icon={<MaterialIcons name="more-horiz" size={18} />}
-          style={{ padding: 0 }}
-        />
+                  backgroundColor="transparent"
+                  icon={<MaterialIcons name="more-horiz" size={18} />}
+                  style={{ padding: 0 }}
+                />
               }
             />
-            )
-          )
+          ))
         }
       />
     </>
diff --git a/packages/app/components/feed/FeedCard.tsx b/packages/app/components/feed/FeedCard.tsx
index f11966fa1..b75171baf 100644
--- a/packages/app/components/feed/FeedCard.tsx
+++ b/packages/app/components/feed/FeedCard.tsx
@@ -284,7 +284,7 @@ export default function Card({
                             gap: 8,
                           }}
                         >
-                          {user?.id === owner_id.id ? null : (
+                          {user?.id === owner_id ? (
                             <TouchableOpacity onPress={handleAddToFavorite}>
                               <AntDesign
                                 name="heart"
@@ -296,7 +296,7 @@ export default function Card({
                                 }
                               />
                             </TouchableOpacity>
-                          )}
+                          ) : null}
 
                           <RText
                             color={currentTheme.colors.textColor}
diff --git a/packages/app/components/feed/FeedSearchFilter.tsx b/packages/app/components/feed/FeedSearchFilter.tsx
index a83af08d3..6dbee2d2d 100644
--- a/packages/app/components/feed/FeedSearchFilter.tsx
+++ b/packages/app/components/feed/FeedSearchFilter.tsx
@@ -59,7 +59,7 @@ const FeedSearchFilter = ({
   const styles = useCustomStyles(loadStyles);
   const [searchValue, setSearchValue] = useState('');
 
-  const onSearch = (search) => setSearchQuery(search);
+  const onSearch = (search) => (setSearchQuery) ? setSearchQuery(search) : null;
 
   return (
     <Layout>
@@ -116,7 +116,7 @@ const FeedSearchFilter = ({
                 <RSwitch
                   id="single-switch"
                   size="$1.5"
-                  checked={selectedTypes.pack}
+                  checked={selectedTypes?.pack ?? false}
                   onCheckedChange={handleTogglePack}
                 >
                   <Switch.Thumb />
@@ -131,7 +131,7 @@ const FeedSearchFilter = ({
                 <RSwitch
                   id="two-switch"
                   size="$1.5"
-                  checked={selectedTypes.trip}
+                  checked={selectedTypes?.trip ?? false}
                   onCheckedChange={handleToggleTrip}
                 >
                   <Switch.Thumb />
diff --git a/packages/app/components/itemtable/itemTable.tsx b/packages/app/components/itemtable/itemTable.tsx
index 66a971a92..4a38506ca 100644
--- a/packages/app/components/itemtable/itemTable.tsx
+++ b/packages/app/components/itemtable/itemTable.tsx
@@ -16,6 +16,7 @@ import { useAuthUser } from 'app/auth/hooks';
 import Layout from 'app/components/layout/Layout';
 import { RButton, RStack, RText } from '@packrat/ui';
 import useResponsive from 'app/hooks/useResponsive';
+import { useScreenWidth } from 'hooks/common';
 
 
 interface ItemsTableProps {
@@ -132,6 +133,8 @@ export const ItemsTable = ({
     setPage(page - 1);
   };
 
+  const { screenWidth } = useScreenWidth()
+
   return (
     <Layout>
       <ScrollView>
@@ -142,7 +145,7 @@ export const ItemsTable = ({
             paddingTop: 30,
             marginTop: 20,
             backgroundColor: isDark ? '#1A1A1D' : 'white',
-            width: xxxs? '100vw' : xs ? '80vw' : '60vw',
+            width: xxxs? screenWidth * 1 : xs ? screenWidth * 0.8 : screenWidth * 0.6,
           }}
         >
           <ScrollView
diff --git a/packages/app/components/pack/AddPack.tsx b/packages/app/components/pack/AddPack.tsx
index f850aac28..17099645b 100644
--- a/packages/app/components/pack/AddPack.tsx
+++ b/packages/app/components/pack/AddPack.tsx
@@ -23,6 +23,11 @@ type AddPackProps = {
   onSuccess?: () => void;
 };
 
+interface MenuItem {
+  label: string,
+  onSelect: () => void
+}
+
 export const AddPack : React.FC<AddPackProps> = ({ isCreatingTrip = false, onSuccess }) => {
   // Hooks
   const { enableDarkMode, enableLightMode, isDark, isLight, currentTheme } =
@@ -31,6 +36,11 @@ export const AddPack : React.FC<AddPackProps> = ({ isCreatingTrip = false, onSuc
   const router = useRouter();
   // const [_, setPackIdParam] = usePackId();
 
+  const menuItems: MenuItem[] = [
+    { label: 'Yes', onSelect: () => setIsPublic(true) },
+    { label: 'No', onSelect: () => setIsPublic(false) },
+  ];
+
   const {
     addNewPackAsync,
     isError,
@@ -65,6 +75,7 @@ export const AddPack : React.FC<AddPackProps> = ({ isCreatingTrip = false, onSuc
     setIsPublic(itemValue == 'true');
   };
 
+
   return (
     <View style={styles.container}>
       <View style={styles.mobileStyle}>
@@ -89,10 +100,7 @@ export const AddPack : React.FC<AddPackProps> = ({ isCreatingTrip = false, onSuc
             />
           ) : (
             <RContextMenu
-              menuItems={[
-                { label: 'Yes', onSelect: () => setIsPublic(true) },
-                { label: 'No', onSelect: () => setIsPublic(false) },
-              ]}
+              menuItems={menuItems}
               menuName="Is Public"
             />
           )}
diff --git a/packages/app/components/pack/PackDetails.tsx b/packages/app/components/pack/PackDetails.tsx
index d4f4f6d6f..7ba1edca0 100644
--- a/packages/app/components/pack/PackDetails.tsx
+++ b/packages/app/components/pack/PackDetails.tsx
@@ -122,7 +122,7 @@ export function PackDetails() {
                               <ScoreContainer
                                 type="pack"
                                 data={currentPack}
-                                isOwner={isOwner}
+                                isOwner={isOwner ?? false}
                               />
                             );
                           default:
diff --git a/packages/app/components/pack_table/TableHelperComponents.tsx b/packages/app/components/pack_table/TableHelperComponents.tsx
index c13531989..f5ed9ba22 100644
--- a/packages/app/components/pack_table/TableHelperComponents.tsx
+++ b/packages/app/components/pack_table/TableHelperComponents.tsx
@@ -50,6 +50,11 @@ interface TitleRowProps {
   title: string;
 }
 
+interface MenuItems{
+  label: string,
+  onSelect: () => void,
+}
+
 const TitleRow = ({ title }: TitleRowProps) => {
   const styles = useCustomStyles(loadStyles);
   const rowData = [
@@ -110,6 +115,13 @@ const IgnoreItemCheckbox = ({
   </View>
 );
 
+const menuItem : MenuItems[] = [
+  { label: 'kg', onSelect:() => onChange('kg') },
+  { label: 'g', onSelect: () => onChange('g') },
+  {label:'lb', onSelect:() => onChange('lb')},
+  {label:'oz', onSelect:() => onChange('oz')}
+]
+
 const WeightUnitDropdown = ({ value, onChange }: WeightUnitDropdownProps) => {
   return (
     Platform.OS === 'web' ? (
@@ -122,12 +134,7 @@ const WeightUnitDropdown = ({ value, onChange }: WeightUnitDropdownProps) => {
     />
     ) : (
       <RContextMenu
-              menuItems={[
-                { label: 'kg', onSelect:() => onChange('kg') },
-                { label: 'g', onSelect: () => onChange('g') },
-                {label:'lb', onSelect:() => onChange('lb')},
-                {label:'oz', onSelect:() => onChange('oz')}
-              ]}
+              menuItems={menuItem}
               menuName={
                 <RButton>Select weight unit</RButton>
               }
diff --git a/packages/app/components/trip/TripCards/TripSearchCard.tsx b/packages/app/components/trip/TripCards/TripSearchCard.tsx
index 6b1415da6..682fb5277 100644
--- a/packages/app/components/trip/TripCards/TripSearchCard.tsx
+++ b/packages/app/components/trip/TripCards/TripSearchCard.tsx
@@ -6,6 +6,8 @@ import { FontAwesome } from '@expo/vector-icons';
 import {  View } from 'react-native';
 import { PlacesAutocomplete } from 'app/components/PlacesAutocomplete';
 import useResponsive from 'app/hooks/useResponsive';
+import { useScreenWidth } from 'app/hooks/common';
+
 
 
 type TripSearchCardProps = {
@@ -13,6 +15,7 @@ type TripSearchCardProps = {
 };
 
 export const TripSearchCard = ({ searchRef }: TripSearchCardProps) => {
+  const {screenWidth} = useScreenWidth()
   const { currentTheme } = useTheme();
   const [, setGEOLocation] = useGEOLocationSearch();
 
@@ -33,7 +36,7 @@ export const TripSearchCard = ({ searchRef }: TripSearchCardProps) => {
       )}
       title="Where are you heading?"
     >
-      <View style={{ width: xs ? '50vw' : '30vw' }}>
+      <View style={{ width: xs ? screenWidth * 0.5 : screenWidth * 0.3 }}>
         <PlacesAutocomplete ref={searchRef} onSelect={handleSelectLocation} />
       </View>
     </TripCardBase>
diff --git a/packages/app/components/user/UserDataCard.tsx b/packages/app/components/user/UserDataCard.tsx
index dc5bdf812..1f6633588 100644
--- a/packages/app/components/user/UserDataCard.tsx
+++ b/packages/app/components/user/UserDataCard.tsx
@@ -147,7 +147,7 @@ const UserDataCard = ({
                   // marginTop: '-3px',
                 }}
               >
-                Total Weight: {total_weight.toFixed(2)}g
+                Total Weight: {total_weight?.toFixed(2)}
               </RText>
             ) : (
               <RText
diff --git a/packages/app/constants/convertStateToAbbr.ts b/packages/app/constants/convertStateToAbbr.ts
index ea3cbc40a..eeed2ac5f 100644
--- a/packages/app/constants/convertStateToAbbr.ts
+++ b/packages/app/constants/convertStateToAbbr.ts
@@ -94,14 +94,14 @@ export default function abbrRegion(input : string, to : 'abbr' | 'name') : strin
       return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
     });
     for (i = 0; i < regions.length; i++) {
-      if (regions[i] !== undefined && regions[i][0] == input) {
+      if ((regions[i] ?? [])[0] == input) {
         return regions[i][1];
       }
     }
   } else if (to == 'name') {
     input = input.toUpperCase();
     for (i = 0; i < regions.length; i++) {
-      if (regions[i] !== undefined && regions[i][1] == input) {
+      if ((regions[i] ?? [])[1] == input) {
         return regions[i][0];
       }
     }
diff --git a/packages/app/hooks/chat/useChat.ts b/packages/app/hooks/chat/useChat.ts
index bc13b48c8..84c462750 100644
--- a/packages/app/hooks/chat/useChat.ts
+++ b/packages/app/hooks/chat/useChat.ts
@@ -3,7 +3,11 @@ import { useGetUserChats } from './useGetUserChats';
 import { useGetAIResponse } from './useGetAIResponse';
 import { useAuthUser } from 'app/auth/hooks';
 
-export const useChat = (itemTypeId: string | null = null) => {
+interface useChatParams{
+  itemTypeId: string | null;
+}
+
+export const useChat = ({itemTypeId = null} : useChatParams) => {
   const user = useAuthUser();
   const [typeId, setTypeId] = useState(itemTypeId);
   const [isLoading, setIsLoading] = useState(false);
@@ -13,7 +17,7 @@ export const useChat = (itemTypeId: string | null = null) => {
 
   const { data: chatsData, refetch } = useGetUserChats(
     user?.id,
-    typeId?.itemTypeId,
+    typeId,
   );
 
   const { getAIResponse } = useGetAIResponse();
@@ -73,7 +77,7 @@ export const useChat = (itemTypeId: string | null = null) => {
     await getAIResponse({
       userId: user?.id,
       userInput: userMessage,
-      itemTypeId: typeId?.itemTypeId,
+      itemTypeId: typeId,
     });
     await refetch();
     setIsLoading(false);

From b4bbfa46d117f35f86b3a446945be1cfc3618a2f Mon Sep 17 00:00:00 2001
From: Taron <taron.aleksanyan.20@gmail.com>
Date: Mon, 24 Jun 2024 01:34:57 +0400
Subject: [PATCH 091/257] kitchen-sync init for the web

---
 .../appearance/AppearanceContainer.tsx        |  62 +++++------
 .../AppearanceLayout.native.tsx               |   6 +
 .../AppearanceLayout/AppearanceLayout.tsx     |  26 +++++
 .../appearance/AppearanceLayout/index.ts      |   1 +
 packages/app/screens/appearance/DemoCard.tsx  |  35 ------
 .../app/screens/appearance/ThemeSwitch.tsx    |  22 ----
 .../screens/appearance/appearance.style.tsx   |  23 ----
 .../AppearanceDrawer/AppearanceDrawer.tsx     | 103 ++++++++++++++++++
 .../components/AppearanceDrawer/index.ts      |   1 +
 .../NavigationList/NavigationList.tsx         |  35 ++++++
 .../components/NavigationList/index.ts        |   1 +
 .../ui-kit/elements/button/Button.tsx         |   8 ++
 .../ui-kit/elements/button/index.ts           |   6 +
 .../appearance/ui-kit/elements/index.ts       |   3 +
 .../screens/appearance/ui-kit/form/index.ts   |   3 +
 .../appearance/ui-kit/form/input/Input.tsx    |   8 ++
 .../appearance/ui-kit/form/input/index.ts     |   6 +
 .../app/screens/appearance/ui-kit/index.ts    |   7 ++
 .../app/screens/appearance/useAppearance.tsx  |  20 ----
 19 files changed, 245 insertions(+), 131 deletions(-)
 create mode 100644 packages/app/screens/appearance/AppearanceLayout/AppearanceLayout.native.tsx
 create mode 100644 packages/app/screens/appearance/AppearanceLayout/AppearanceLayout.tsx
 create mode 100644 packages/app/screens/appearance/AppearanceLayout/index.ts
 delete mode 100644 packages/app/screens/appearance/DemoCard.tsx
 delete mode 100644 packages/app/screens/appearance/ThemeSwitch.tsx
 delete mode 100644 packages/app/screens/appearance/appearance.style.tsx
 create mode 100644 packages/app/screens/appearance/components/AppearanceDrawer/AppearanceDrawer.tsx
 create mode 100644 packages/app/screens/appearance/components/AppearanceDrawer/index.ts
 create mode 100644 packages/app/screens/appearance/components/NavigationList/NavigationList.tsx
 create mode 100644 packages/app/screens/appearance/components/NavigationList/index.ts
 create mode 100644 packages/app/screens/appearance/ui-kit/elements/button/Button.tsx
 create mode 100644 packages/app/screens/appearance/ui-kit/elements/button/index.ts
 create mode 100644 packages/app/screens/appearance/ui-kit/elements/index.ts
 create mode 100644 packages/app/screens/appearance/ui-kit/form/index.ts
 create mode 100644 packages/app/screens/appearance/ui-kit/form/input/Input.tsx
 create mode 100644 packages/app/screens/appearance/ui-kit/form/input/index.ts
 create mode 100644 packages/app/screens/appearance/ui-kit/index.ts
 delete mode 100644 packages/app/screens/appearance/useAppearance.tsx

diff --git a/packages/app/screens/appearance/AppearanceContainer.tsx b/packages/app/screens/appearance/AppearanceContainer.tsx
index cdc0b3e87..1da773fdc 100644
--- a/packages/app/screens/appearance/AppearanceContainer.tsx
+++ b/packages/app/screens/appearance/AppearanceContainer.tsx
@@ -1,39 +1,39 @@
-import React from 'react';
-import { YStack, RStack, RText } from '@packrat/ui';
-import { ScrollView } from 'tamagui';
-import { Card as RNPCard } from 'react-native-paper';
-import useAppearance from 'app/hooks/appearance/useAppearance';
-import useCustomStyles from 'app/hooks/useCustomStyles';
-import { loadStyles } from './appearance.style';
-import DemoCard from './DemoCard';
-import ThemeSwitch from './ThemeSwitch';
-import { DialogDemo } from '../../components/DialogDemo';
+import React, { useMemo } from 'react';
+import { ScrollView, View } from 'tamagui';
+import { AppearanceLayout } from './AppearanceLayout';
+import { NavigationList } from './components/NavigationList';
+import { UiKitRoutes } from './ui-kit';
+import find from 'lodash/find';
+import some from 'lodash/some';
 
 export default function AppearanceContainer() {
-  const { isEnabled, toggleSwitch, currentTheme } = useAppearance();
-  const [showKitchenSink, setShowKitchenSink] = React.useState(true);
-  const styles = useCustomStyles(loadStyles);
+  const [activeRoute, setActiveRoute] = React.useState('button');
+  console.log({ UiKitRoutes });
+  const ActiveComponent = useMemo(() => {
+    const currentRoute = findItemInObject(
+      UiKitRoutes,
+      ({ route }) => route === activeRoute,
+    );
+    console.log('currentRoute', currentRoute);
+    return currentRoute ? currentRoute.component : null;
+  }, [activeRoute]);
 
   return (
     <ScrollView>
-      <YStack style={styles.mainContainer}>
-        <RStack style={styles.infoSection}>
-          <ThemeSwitch
-            isEnabled={isEnabled}
-            toggleSwitch={toggleSwitch}
-            currentTheme={currentTheme}
-          />
-          <DemoCard />
-          {showKitchenSink && (
-            <RStack>
-              <RStack>
-                <RText>Kitchen Sink</RText>
-              </RStack>
-              <DialogDemo />
-            </RStack>
-          )}
-        </RStack>
-      </YStack>
+      <AppearanceLayout
+        navigationList={<NavigationList onRouteChange={setActiveRoute} />}
+        currentRoute={<ActiveComponent />}
+      />
     </ScrollView>
   );
 }
+
+const findItemInObject = (obj: Record<string, any[]>, predicate) => {
+  for (const [key, value] of Object.entries(obj)) {
+    const found = value.find(predicate);
+    console.log({ found });
+    if (found) {
+      return found;
+    }
+  }
+};
diff --git a/packages/app/screens/appearance/AppearanceLayout/AppearanceLayout.native.tsx b/packages/app/screens/appearance/AppearanceLayout/AppearanceLayout.native.tsx
new file mode 100644
index 000000000..2b416c837
--- /dev/null
+++ b/packages/app/screens/appearance/AppearanceLayout/AppearanceLayout.native.tsx
@@ -0,0 +1,6 @@
+import React from 'react';
+import { View } from 'tamagui';
+
+export const AppearanceLayout = () => {
+  return <View>View</View>;
+};
diff --git a/packages/app/screens/appearance/AppearanceLayout/AppearanceLayout.tsx b/packages/app/screens/appearance/AppearanceLayout/AppearanceLayout.tsx
new file mode 100644
index 000000000..cd81b87ab
--- /dev/null
+++ b/packages/app/screens/appearance/AppearanceLayout/AppearanceLayout.tsx
@@ -0,0 +1,26 @@
+import React, { Suspense, type ReactNode } from 'react';
+import { Text, View } from 'tamagui';
+
+export const AppearanceLayout = ({
+  navigationList,
+  currentRoute,
+}: {
+  navigationList: ReactNode;
+  currentRoute: ReactNode;
+}) => {
+  return (
+    <>
+      <View
+        style={{
+          display: 'flex',
+          flexDirection: 'row',
+        }}
+      >
+        <View style={{ width: 384 }}>{navigationList}</View>
+        <View style={{ flex: 1, background: '#fff', minHeight: '90vh' }}>
+          <Suspense fallback={<Text>Loading...</Text>}>{currentRoute}</Suspense>
+        </View>
+      </View>
+    </>
+  );
+};
diff --git a/packages/app/screens/appearance/AppearanceLayout/index.ts b/packages/app/screens/appearance/AppearanceLayout/index.ts
new file mode 100644
index 000000000..eda96b0de
--- /dev/null
+++ b/packages/app/screens/appearance/AppearanceLayout/index.ts
@@ -0,0 +1 @@
+export * from './AppearanceLayout';
diff --git a/packages/app/screens/appearance/DemoCard.tsx b/packages/app/screens/appearance/DemoCard.tsx
deleted file mode 100644
index f776264d2..000000000
--- a/packages/app/screens/appearance/DemoCard.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import React from 'react';
-import {
-  Card,
-  H2,
-  Paragraph,
-  XStack as OriginalXStack,
-  Button as OriginalButton,
-} from 'tamagui';
-
-const XStack: any = OriginalXStack;
-const Button: any = OriginalButton;
-
-const DemoCard = () => (
-  <Card
-    elevate
-    size="$4"
-    bordered
-    width={250}
-    height={300}
-    scale={0.9}
-    hoverStyle={{ scale: 0.925 }}
-    pressStyle={{ scale: 0.875 }}
-  >
-    <Card.Header padded>
-      <H2>Sony A7IV</H2>
-      <Paragraph theme="alt2">Now available</Paragraph>
-    </Card.Header>
-    <Card.Footer padded>
-      <XStack flex={1} />
-      <Button borderRadius="$10">Purchase</Button>
-    </Card.Footer>
-  </Card>
-);
-
-export default DemoCard;
diff --git a/packages/app/screens/appearance/ThemeSwitch.tsx b/packages/app/screens/appearance/ThemeSwitch.tsx
deleted file mode 100644
index 4c84325ca..000000000
--- a/packages/app/screens/appearance/ThemeSwitch.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from 'react';
-import { RText, RSwitch } from '@packrat/ui';
-
-const ThemeSwitch = ({ isEnabled, toggleSwitch, currentTheme }) => (
-  <>
-    <RText style={{ color: currentTheme.colors.drawerIconColor }}>
-      Theme Changer
-    </RText>
-    <RSwitch
-      trackColor={!isEnabled ? '#767577' : '#81b0ff'}
-      thumbColor={isEnabled ? '#f5dd4b' : '#f4f3f4'}
-      ios_backgroundColor="#3e3e3e"
-      onCheckedChange={toggleSwitch}
-      checked={isEnabled}
-    />
-    <RText style={{ color: currentTheme.colors.drawerIconColor }}>
-      {isEnabled ? 'Dark Mode' : 'Light Mode'}
-    </RText>
-  </>
-);
-
-export default ThemeSwitch;
diff --git a/packages/app/screens/appearance/appearance.style.tsx b/packages/app/screens/appearance/appearance.style.tsx
deleted file mode 100644
index dd75adfd6..000000000
--- a/packages/app/screens/appearance/appearance.style.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { StyleSheet } from 'react-native';
-
-export const loadStyles = () =>
-  StyleSheet.create({
-    mainContainer: {
-      flex: 1,
-      alignItems: 'center',
-      justifyContent: 'center',
-      padding: 25,
-    },
-    infoSection: {
-      flexDirection: 'column',
-      alignItems: 'center',
-      borderRadius: 12,
-      padding: 20,
-    },
-    nativeBaseBox: {
-      fontSize: 'md',
-      fontWeight: 'medium',
-      color: 'amber.100',
-      letterSpacing: 'lg',
-    } as any,
-  });
diff --git a/packages/app/screens/appearance/components/AppearanceDrawer/AppearanceDrawer.tsx b/packages/app/screens/appearance/components/AppearanceDrawer/AppearanceDrawer.tsx
new file mode 100644
index 000000000..52d509f9c
--- /dev/null
+++ b/packages/app/screens/appearance/components/AppearanceDrawer/AppearanceDrawer.tsx
@@ -0,0 +1,103 @@
+import { Drawer as ExpoDrawer } from 'expo-router/drawer';
+import { DrawerContentScrollView } from '@react-navigation/drawer';
+import React, { type ReactNode } from 'react';
+import useCustomStyles from 'app/hooks/useCustomStyles';
+
+export function AppearanceDrawer({
+  navigationList,
+}: {
+  navigationList: ReactNode;
+}) {
+  const styles = useCustomStyles(loadStyles);
+
+  return (
+    <ExpoDrawer
+      screenOptions={{
+        drawerPosition: 'right',
+        drawerType: 'slide',
+        drawerStyle: styles.drawerStyles,
+        headerShown: false,
+      }}
+      drawerContent={(props) => {
+        return (
+          <DrawerContentScrollView {...props}>
+            {navigationList}
+          </DrawerContentScrollView>
+        );
+      }}
+    />
+  );
+}
+
+const loadStyles = (theme) => {
+  const { currentTheme } = theme;
+
+  return {
+    drawerStyles: {
+      backgroundColor: currentTheme.colors.background,
+    },
+    safeArea: {
+      backgroundColor: currentTheme.colors.background,
+    },
+    container: {
+      width: '100%',
+      backgroundColor: currentTheme.colors.background,
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+    },
+    header: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      padding: 16,
+      width: '100%',
+    },
+    logoContainer: {
+      flexDirection: 'row',
+      alignItems: 'center',
+    },
+    logoWrapper: {
+      marginHorizontal: 10,
+    },
+    logoText: {
+      color: currentTheme.colors.text,
+      fontSize: 38,
+      fontWeight: '900',
+    },
+    menuBar: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'flex-end',
+      paddingHorizontal: 16,
+      height: 60,
+    },
+    menuBarItem: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 8,
+      paddingHorizontal: 12,
+    },
+    menuBarItemText: {
+      color: currentTheme.colors.text,
+      fontSize: 18,
+    },
+    drawerTrigger: {},
+    menuBarItemActive: {
+      // Apply styles for the active item
+      // ...
+    },
+    menuBarItemTextActive: {
+      // Apply styles for the active item's text
+      // ...
+    },
+    menuBarItemSelected: {
+      // Apply styles for the selected item
+      // ...
+    },
+    menuBarItemTextSelected: {
+      // Apply styles for the selected item's text
+      // ...
+    },
+  };
+};
diff --git a/packages/app/screens/appearance/components/AppearanceDrawer/index.ts b/packages/app/screens/appearance/components/AppearanceDrawer/index.ts
new file mode 100644
index 000000000..c4153a42b
--- /dev/null
+++ b/packages/app/screens/appearance/components/AppearanceDrawer/index.ts
@@ -0,0 +1 @@
+export * from './AppearanceDrawer';
diff --git a/packages/app/screens/appearance/components/NavigationList/NavigationList.tsx b/packages/app/screens/appearance/components/NavigationList/NavigationList.tsx
new file mode 100644
index 000000000..f30cd48e6
--- /dev/null
+++ b/packages/app/screens/appearance/components/NavigationList/NavigationList.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import { ChevronDown } from '@tamagui/lucide-icons';
+
+import { Accordion } from 'tamagui';
+import { UiKitRoutes } from 'app/screens/appearance/ui-kit';
+import { RButton, RStack, RText } from '@packrat/ui';
+export function NavigationList({
+  onRouteChange,
+}: {
+  onRouteChange: (route: string) => void;
+}) {
+  return (
+    <Accordion style={{ width: '100%' }}>
+      {Object.entries(UiKitRoutes).map(([key, value]) => {
+        console.log(key, value);
+        return (
+          <Accordion.Item key={key} value={key}>
+            <Accordion.Trigger>{key}</Accordion.Trigger>
+            <Accordion.Content>
+              <RStack>
+                {value.map(({ route }) => {
+                  return (
+                    <RButton onPress={() => onRouteChange(route)} key={route}>
+                      <RText>{route}</RText>
+                    </RButton>
+                  );
+                })}
+              </RStack>
+            </Accordion.Content>
+          </Accordion.Item>
+        );
+      })}
+    </Accordion>
+  );
+}
diff --git a/packages/app/screens/appearance/components/NavigationList/index.ts b/packages/app/screens/appearance/components/NavigationList/index.ts
new file mode 100644
index 000000000..ad0a38b77
--- /dev/null
+++ b/packages/app/screens/appearance/components/NavigationList/index.ts
@@ -0,0 +1 @@
+export * from './NavigationList';
diff --git a/packages/app/screens/appearance/ui-kit/elements/button/Button.tsx b/packages/app/screens/appearance/ui-kit/elements/button/Button.tsx
new file mode 100644
index 000000000..8bb429179
--- /dev/null
+++ b/packages/app/screens/appearance/ui-kit/elements/button/Button.tsx
@@ -0,0 +1,8 @@
+import React from 'react';
+import { Text } from 'react-native';
+
+const Button = () => {
+  return <Text>Button</Text>;
+};
+
+export default Button;
diff --git a/packages/app/screens/appearance/ui-kit/elements/button/index.ts b/packages/app/screens/appearance/ui-kit/elements/button/index.ts
new file mode 100644
index 000000000..16f583b81
--- /dev/null
+++ b/packages/app/screens/appearance/ui-kit/elements/button/index.ts
@@ -0,0 +1,6 @@
+import { lazy } from 'react';
+
+export const ButtonRoute = {
+  component: lazy(async () => import('./Button')),
+  route: 'button',
+};
diff --git a/packages/app/screens/appearance/ui-kit/elements/index.ts b/packages/app/screens/appearance/ui-kit/elements/index.ts
new file mode 100644
index 000000000..fc4c85a33
--- /dev/null
+++ b/packages/app/screens/appearance/ui-kit/elements/index.ts
@@ -0,0 +1,3 @@
+import { ButtonRoute } from './button';
+
+export const ElementsRoutes = [ButtonRoute];
diff --git a/packages/app/screens/appearance/ui-kit/form/index.ts b/packages/app/screens/appearance/ui-kit/form/index.ts
new file mode 100644
index 000000000..8b2305d25
--- /dev/null
+++ b/packages/app/screens/appearance/ui-kit/form/index.ts
@@ -0,0 +1,3 @@
+import { InputRoute } from './input';
+
+export const FormRoutes = [InputRoute];
diff --git a/packages/app/screens/appearance/ui-kit/form/input/Input.tsx b/packages/app/screens/appearance/ui-kit/form/input/Input.tsx
new file mode 100644
index 000000000..40ff6ec38
--- /dev/null
+++ b/packages/app/screens/appearance/ui-kit/form/input/Input.tsx
@@ -0,0 +1,8 @@
+import React from 'react';
+import { Text } from 'react-native';
+
+const Input = () => {
+  return <Text>Input</Text>;
+};
+
+export default Input;
diff --git a/packages/app/screens/appearance/ui-kit/form/input/index.ts b/packages/app/screens/appearance/ui-kit/form/input/index.ts
new file mode 100644
index 000000000..73a04b8b9
--- /dev/null
+++ b/packages/app/screens/appearance/ui-kit/form/input/index.ts
@@ -0,0 +1,6 @@
+import { lazy } from 'react';
+
+export const InputRoute = {
+  component: lazy(async () => import('./Input')),
+  route: 'input',
+};
diff --git a/packages/app/screens/appearance/ui-kit/index.ts b/packages/app/screens/appearance/ui-kit/index.ts
new file mode 100644
index 000000000..a6139f94f
--- /dev/null
+++ b/packages/app/screens/appearance/ui-kit/index.ts
@@ -0,0 +1,7 @@
+import { ElementsRoutes } from './elements';
+import { FormRoutes } from './form';
+
+export const UiKitRoutes = {
+  Elements: ElementsRoutes,
+  Form: FormRoutes,
+};
diff --git a/packages/app/screens/appearance/useAppearance.tsx b/packages/app/screens/appearance/useAppearance.tsx
deleted file mode 100644
index 67b46029b..000000000
--- a/packages/app/screens/appearance/useAppearance.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { useState } from 'react';
-
-const useAppearance = () => {
-  // Assume that the theme is initially set to light mode
-  const [isEnabled, setIsEnabled] = useState(false);
-
-  const currentTheme = {
-    colors: {
-      drawerIconColor: isEnabled ? '#ffffff' : '#000000',
-    },
-  };
-
-  const toggleSwitch = () => {
-    setIsEnabled((previousState) => !previousState);
-  };
-
-  return { isEnabled, toggleSwitch, currentTheme };
-};
-
-export default useAppearance;

From 193d2a78fd58a85175ac922ec0af25c96310014e Mon Sep 17 00:00:00 2001
From: Anmol Verma <anmolverma2810@gmail.com>
Date: Mon, 24 Jun 2024 21:13:36 +0530
Subject: [PATCH 092/257] Add bento table to global items list

---
 .../app/components/itemtable/itemTable.tsx    | 199 +++++-------------
 .../trip/TripCards/TripSearchCard.tsx         |   2 +-
 2 files changed, 54 insertions(+), 147 deletions(-)

diff --git a/packages/app/components/itemtable/itemTable.tsx b/packages/app/components/itemtable/itemTable.tsx
index 66a971a92..bd277b0e8 100644
--- a/packages/app/components/itemtable/itemTable.tsx
+++ b/packages/app/components/itemtable/itemTable.tsx
@@ -1,32 +1,14 @@
 import React from 'react';
-import { Dimensions, Platform, ScrollView, Text, View } from 'react-native';
-import { Table, Row, Cell } from 'react-native-table-component';
-import { AntDesign, MaterialIcons } from '@expo/vector-icons';
-import useTheme from '../../hooks/useTheme';
-import { formatNumber } from '../../utils/formatNumber';
-import { EditPackItemModal } from '../pack_table/EditPackItemModal';
-import { DeletePackItemModal } from '../pack_table/DeletePackItemModal';
-import { PaginationLimit } from '../paginationChooseLimit';
+import { ScrollView, View, Platform } from 'react-native';
+import useResponsive from 'app/hooks/useResponsive';
 import Loader from '../Loader';
-import useCustomStyles from 'app/hooks/useCustomStyles';
-import { loadStyles } from './itemsTable.style';
-import { AddItem } from '../item/AddItem';
+import useTheme from '../../hooks/useTheme';
 import { useDeleteItem } from 'app/hooks/items';
-import { useAuthUser } from 'app/auth/hooks';
 import Layout from 'app/components/layout/Layout';
+import { PaginationLimit } from '../paginationChooseLimit';
 import { RButton, RStack, RText } from '@packrat/ui';
-import useResponsive from 'app/hooks/useResponsive';
-
-
-interface ItemsTableProps {
-  limit: number;
-  setLimit: (limit: number) => void;
-  page: number;
-  setPage: (page: number) => void;
-  data: ItemType[];
-  isLoading: boolean;
-  totalPages: number;
-}
+import { AntDesign } from '@expo/vector-icons';
+import { BasicTable } from '@packrat/ui/src/Bento/elements/tables';
 
 interface ItemType {
   global: string;
@@ -38,14 +20,25 @@ interface ItemType {
   id: string;
   type: string;
   ownerId: string;
+  categoryId:string;
+  updatedAt:any;
+  createdAt:any;
 }
 
-interface TitleRowProps {
-  title: string;
-}
-
-interface TableItemProps {
-  itemData: ItemType;
+interface ItemsTableProps {
+  limit: number;
+  setLimit: (limit: number) => void;
+  page: number;
+  setPage: (page: number) => void;
+  data: ItemType[];
+  isLoading: boolean;
+  totalPages: number;
+  handleCheckboxChange: (itemId: string) => void;
+  onDelete: (params: { itemId: string; packId: string }) => void;
+  hasPermissions: boolean;
+  currentPack: any;
+  refetch: () => void;
+  setRefetch: () => void;
 }
 
 export const ItemsTable = ({
@@ -56,82 +49,30 @@ export const ItemsTable = ({
   data,
   isLoading,
   totalPages,
+  handleCheckboxChange,
+  onDelete,
+  hasPermissions,
+  currentPack,
+  refetch,
+  setRefetch,
 }: ItemsTableProps) => {
-  const flexArr = [1.5, 1, 1, 1, 0.65, 0.65, 0.65];
-  const { xs, xxs, xxxs } =  useResponsive();
+  const { xs, xxxs } = useResponsive();
+  const { isDark } = useTheme();
   const { handleDeleteItem } = useDeleteItem();
 
-  const { enableDarkMode, enableLightMode, isDark, isLight, currentTheme } =
-    useTheme();
-  const styles = useCustomStyles(loadStyles);
-  const TitleRow = ({ title }: TitleRowProps) => {
-    const rowData = [
-      <RStack style={{ flexDirection: 'row', ...styles.mainTitle }}>
-        <Text style={styles.titleText}>{title}</Text>
-      </RStack>,
-    ];
-
-    return (
-      <Row data={rowData} style={styles.title} textStyle={styles.titleText} />
-    );
-  };
-  const TableItem = ({ itemData }: TableItemProps) => {
-    const { name, weight, category, quantity, unit, id, type, ownerId } =
-      itemData;
-    const authUser = useAuthUser();
-
-    const rowData = [
-      <RText
-        style={{
-          color: isDark ? 'white' : 'black',
-          fontSize:15,
-        }}
-      >
-        {name}
-      </RText>,
-      <RText style={{ color: isDark ? 'white' : 'black' }}>
-        {formatNumber(weight)} {unit}
-      </RText>,
-      <RText style={{ color: isDark ? 'white' : 'black' }}>{quantity}</RText>,
-      <RText
-        style={{
-          color: isDark ? 'white' : 'black',
-          fontSize:15,
-        }}
-      >
-        {category?.name || type}
-      </RText>,
-    ];
-    return (
-      <Row
-        data={rowData}
-        style={{
-          backgroundColor: isDark ? '#1A1A1D' : 'white',
-          borderBottomWidth: !isDark ? 1 : 'none',
-          borderBottomColor: !isDark ? '#D1D5DB' : 'none',
-          ...styles.row,
-        }}
-        flexArr={flexArr}
-      />
-    );
-  };
-  /**
-   * Handles the logic for navigating to the next page.
-   *
-   * @return {undefined} This function doesn't return anything.
-   */
   const handleNextPage = () => {
     setPage(page + 1);
   };
-  /**
-   * Handles the action of going to the previous page.
-   *
-   * @return {undefined} There is no return value.
-   */
+
   const handlePreviousPage = () => {
     setPage(page - 1);
   };
 
+const filteredData = data.map(item => {
+  const { id, categoryId, createdAt, updatedAt, ownerId,global, ...filteredItem } = item;
+  return filteredItem;
+});
+
   return (
     <Layout>
       <ScrollView>
@@ -141,59 +82,25 @@ export const ItemsTable = ({
             flex: 1,
             paddingTop: 30,
             marginTop: 20,
+            marginBottom:20,
             backgroundColor: isDark ? '#1A1A1D' : 'white',
-            width: xxxs? '100vw' : xs ? '80vw' : '60vw',
+            width: xxxs ? '100vw' : xs ? '80vw' : '60vw',
           }}
         >
-          <ScrollView
-            horizontal={true}
-            contentContainerStyle={{
-              flexGrow: 1,
-              justifyContent: 'center',
-              maxWidth: '100%',
-            }}
-          >
-            <Table
-              style={styles.tableStyle}
-              borderStyle={{ borderColor: 'transparent' }}
-            >
-              <TitleRow title="Global Items List" />
-              <Row
-                flexArr={flexArr}
-                data={['Item Name', 'Weight', 'Quantity', 'Category'].map(
-                  (header, index) => (
-                    <Cell
-                      key={index}
-                      data={
-                        <RText
-                          style={{
-                            fontSize: 15,
-                                 
-                            fontWeight: 'bold',
-                          }}
-                        >
-                          {header}
-                        </RText>
-                      }
-                      textStyle={styles.headerText}
-                    />
-                  ),
-                )}
-                style={styles.head}
-              />
-              <ScrollView
-                style={{ height:  'auto' }}
-              >
-                {isLoading ? (
-                  <Loader />
-                ) : (
-                  data.map((item, index) => {
-                    return <TableItem key={index} itemData={item} />;
-                  })
-                )}
-              </ScrollView>
-            </Table>
-          </ScrollView>
+          {isLoading ? (
+            <Loader />
+          ) : (
+            <BasicTable
+              groupedData={filteredData}
+              handleCheckboxChange={handleCheckboxChange}
+              onDelete={onDelete}
+              hasPermissions={false}
+              currentPack={currentPack}
+              refetch={refetch}
+              setRefetch={setRefetch}
+            />
+          )}
+
           <View
             style={{
               display: 'flex',
diff --git a/packages/app/components/trip/TripCards/TripSearchCard.tsx b/packages/app/components/trip/TripCards/TripSearchCard.tsx
index 6b1415da6..424364b70 100644
--- a/packages/app/components/trip/TripCards/TripSearchCard.tsx
+++ b/packages/app/components/trip/TripCards/TripSearchCard.tsx
@@ -53,7 +53,7 @@ const loadStyles = (theme) => {
     gap: 10,
     flex: 1,
     paddingHorizontal: 60,
-    paddingVertical: 70,
+    paddingVertical: 20,
     height: xxs ? '100%' : 450,
     alignSelf: 'center',
   };

From deeaa6976ac24833f2d32d85abdad8a5b98d1335 Mon Sep 17 00:00:00 2001
From: Anmol Verma <anmolverma2810@gmail.com>
Date: Mon, 24 Jun 2024 21:48:21 +0530
Subject: [PATCH 093/257] move dropdown component to ui

---
 packages/app/components/card/PackCardHeader/PackCardHeader.tsx | 2 +-
 packages/app/components/feed/FeedSearchFilter.tsx              | 2 +-
 packages/app/components/item/ItemForm.tsx                      | 2 +-
 packages/app/components/pack/AddPack.tsx                       | 2 +-
 packages/app/components/pack/PackContainer.tsx                 | 2 +-
 packages/app/components/pack_table/TableHelperComponents.tsx   | 2 +-
 packages/app/components/paginationChooseLimit/index.tsx        | 3 +--
 packages/app/screens/items/index.tsx                           | 3 +--
 packages/{app/components => ui/src}/Dropdown.tsx               | 0
 packages/ui/src/index.tsx                                      | 1 +
 10 files changed, 9 insertions(+), 10 deletions(-)
 rename packages/{app/components => ui/src}/Dropdown.tsx (100%)

diff --git a/packages/app/components/card/PackCardHeader/PackCardHeader.tsx b/packages/app/components/card/PackCardHeader/PackCardHeader.tsx
index b757ee743..99dc858cb 100644
--- a/packages/app/components/card/PackCardHeader/PackCardHeader.tsx
+++ b/packages/app/components/card/PackCardHeader/PackCardHeader.tsx
@@ -7,13 +7,13 @@ import {
   RStack,
   RIconButton,
   EditableText,
+  DropdownComponent,
   
 } from '@packrat/ui';
 import { useFetchSinglePack, useDeletePack } from 'app/hooks/packs';
 import { usePackTitleInput } from './usePackTitleInput';
 import { useRouter } from 'app/hooks/router';
 import { Platform, View } from 'react-native';
-import DropdownComponent from 'app/components/Dropdown';
 
 interface PackCardHeaderProps {
   data: any;
diff --git a/packages/app/components/feed/FeedSearchFilter.tsx b/packages/app/components/feed/FeedSearchFilter.tsx
index a83af08d3..b45b76632 100644
--- a/packages/app/components/feed/FeedSearchFilter.tsx
+++ b/packages/app/components/feed/FeedSearchFilter.tsx
@@ -12,9 +12,9 @@ import {
   RButton,
   Form,
   FormInput,
+  DropdownComponent,
 } from '@packrat/ui';
 import { AntDesign } from '@expo/vector-icons';
-import DropdownComponent from 'app/components/Dropdown';
 import Layout from 'app/components/layout/Layout';
 const RStack: any = OriginalRStack;
 const RText: any = OriginalRText;
diff --git a/packages/app/components/item/ItemForm.tsx b/packages/app/components/item/ItemForm.tsx
index b74ed057f..83621ad9d 100644
--- a/packages/app/components/item/ItemForm.tsx
+++ b/packages/app/components/item/ItemForm.tsx
@@ -7,13 +7,13 @@ import {
   SubmitButton,
   FormSelect as OriginalFormSelect,
   FormRadioGroup as OriginalFormRadioGroup,
+  DropdownComponent,
 } from '@packrat/ui';
 import { Platform, View } from 'react-native';
 
 import { ItemCategoryEnum } from '../../constants/itemCategory';
 import useTheme from '../../hooks/useTheme';
 import { type Item } from '@packrat/validations';
-import DropdownComponent from 'app/components/Dropdown';
 
 const Form: any = OriginalForm;
 const FormSelect: any = OriginalFormSelect;
diff --git a/packages/app/components/pack/AddPack.tsx b/packages/app/components/pack/AddPack.tsx
index de83de123..0ccc946ff 100644
--- a/packages/app/components/pack/AddPack.tsx
+++ b/packages/app/components/pack/AddPack.tsx
@@ -7,6 +7,7 @@ import {
   FormInput,
   SubmitButton,
   useModal,
+  DropdownComponent,
 } from '@packrat/ui';
 import { BaseModal } from '@packrat/ui';
 import useTheme from '../../hooks/useTheme';
@@ -15,7 +16,6 @@ import { useAddNewPack,} from 'app/hooks/packs';
 import { useRouter } from 'app/hooks/router';
 import { addPackSchema } from '@packrat/validations';
 import { RContextMenu } from '@packrat/ui/src/RContextMenu';
-import DropdownComponent from 'app/components/Dropdown';
 
 const FormSelect: any = OriginalFormSelect;
 
diff --git a/packages/app/components/pack/PackContainer.tsx b/packages/app/components/pack/PackContainer.tsx
index 18fd522c1..6a1867950 100644
--- a/packages/app/components/pack/PackContainer.tsx
+++ b/packages/app/components/pack/PackContainer.tsx
@@ -1,5 +1,4 @@
 import { useEffect, useState } from 'react';
-import DropdownComponent from '../Dropdown';
 import { AddItem } from '../item/AddItem';
 import { TableContainer } from '../pack_table/Table';
 import { useUserPacks } from '../../hooks/packs/useUserPacks';
@@ -9,6 +8,7 @@ import useCustomStyles from 'app/hooks/useCustomStyles';
 import { useAuthUser } from 'app/auth/hooks';
 import { usePackId } from 'app/hooks/packs';
 import { createParam } from '@packrat/crosspath';
+import { DropdownComponent } from '@packrat/ui';
 
 
 export default function PackContainer({ isCreatingTrip = false }) {
diff --git a/packages/app/components/pack_table/TableHelperComponents.tsx b/packages/app/components/pack_table/TableHelperComponents.tsx
index 70453d569..772f79e70 100644
--- a/packages/app/components/pack_table/TableHelperComponents.tsx
+++ b/packages/app/components/pack_table/TableHelperComponents.tsx
@@ -7,12 +7,12 @@ import {
   RText as OriginalRText,
   RContextMenu,
   RIconButton,
+  DropdownComponent,
 } from '@packrat/ui';
 import { Platform, View } from 'react-native';
 import { Row } from 'react-native-table-component';
 import useCustomStyles from 'app/hooks/useCustomStyles';
 import useTheme from 'app/hooks/useTheme';
-import DropdownComponent from '../Dropdown';
 import { categoryIcons } from 'app/constants/pack/icons';
 import { formatNumber } from 'app/utils/formatNumber';
 import loadStyles from './packtable.style';
diff --git a/packages/app/components/paginationChooseLimit/index.tsx b/packages/app/components/paginationChooseLimit/index.tsx
index 57b31711b..51c0c2f02 100644
--- a/packages/app/components/paginationChooseLimit/index.tsx
+++ b/packages/app/components/paginationChooseLimit/index.tsx
@@ -1,7 +1,6 @@
 import {  View } from 'react-native';
 import React, { useState } from 'react';
-import DropdownComponent from '../Dropdown';
-import { RLabel } from '@packrat/ui';
+import { DropdownComponent, RLabel } from '@packrat/ui';
 import useCustomStyles from 'app/hooks/useCustomStyles';
 import useResponsive from 'app/hooks/useResponsive';
 
diff --git a/packages/app/screens/items/index.tsx b/packages/app/screens/items/index.tsx
index a6265f34d..7651bb930 100644
--- a/packages/app/screens/items/index.tsx
+++ b/packages/app/screens/items/index.tsx
@@ -7,8 +7,7 @@ import { ItemsTable } from 'app/components/itemtable/itemTable';
 import useCustomStyles from 'app/hooks/useCustomStyles';
 import { useItems } from 'app/hooks/items/useItems';
 import { usePagination } from 'app/hooks/common';
-import DropdownComponent from 'app/components/Dropdown';
-import { BaseModal, RScrollView, RStack, RText } from '@packrat/ui';
+import { BaseModal, DropdownComponent, RScrollView, RStack, RText } from '@packrat/ui';
 
 export default function Items() {
   const { enableDarkMode, enableLightMode, isDark, isLight, currentTheme } = useTheme();
diff --git a/packages/app/components/Dropdown.tsx b/packages/ui/src/Dropdown.tsx
similarity index 100%
rename from packages/app/components/Dropdown.tsx
rename to packages/ui/src/Dropdown.tsx
diff --git a/packages/ui/src/index.tsx b/packages/ui/src/index.tsx
index 956f476d9..aba3c6c8e 100644
--- a/packages/ui/src/index.tsx
+++ b/packages/ui/src/index.tsx
@@ -32,6 +32,7 @@ export { DropdownMenu, RDropdownMenu } from './ZDropdown';
 export { Container } from './Container';
 export { MainContentWeb } from './MainContentWeb';
 export { ContextMenu, RContextMenu } from './RContextMenu';
+export {DropdownComponent} from './Dropdown'
 // export { DropdownMenu, ExampleDropdown } from './RDropdown/DropdownBase';
 export { RSkeleton } from './RSkeleton';
 

From d4b6e909409324139a129369cd200c6cc45c8ea2 Mon Sep 17 00:00:00 2001
From: Muhammad Hassan <mh7722178@gmail.com>
Date: Tue, 25 Jun 2024 01:13:51 +0500
Subject: [PATCH 094/257] Fixed More Types

---
 .../PlacesAutocomplete/PlacesAutocomplete.tsx |  2 +-
 .../card/PackCardHeader/PackCardHeader.tsx    | 18 ++++++---
 .../app/components/itemtable/itemTable.tsx    |  2 +-
 packages/app/components/pack/AddPack.tsx      |  2 +-
 .../app/components/pack/CopyPackModal.tsx     |  4 +-
 packages/app/components/pack_table/Table.tsx  |  2 +-
 .../pack_table/TableHelperComponents.tsx      | 38 ++++++++-----------
 .../trip/TripCards/TripDateRangeCard.tsx      |  2 +-
 packages/app/constants/convertStateToAbbr.ts  |  5 ++-
 packages/app/hooks/common/useQueryUpdater.ts  |  2 +-
 packages/app/hooks/map/useNativeMap.ts        | 15 +++-----
 .../app/screens/trip/createTripStore/store.ts |  2 +-
 packages/app/screens/trip/useTripsData.ts     |  4 +-
 packages/app/screens/user/Settings.tsx        | 21 +++++-----
 packages/app/utils/storage/storage.web.ts     |  6 ++-
 .../ui/src/Bento/elements/tables/Basic.tsx    |  4 +-
 16 files changed, 66 insertions(+), 63 deletions(-)

diff --git a/packages/app/components/PlacesAutocomplete/PlacesAutocomplete.tsx b/packages/app/components/PlacesAutocomplete/PlacesAutocomplete.tsx
index 81b8db273..5af3d0029 100644
--- a/packages/app/components/PlacesAutocomplete/PlacesAutocomplete.tsx
+++ b/packages/app/components/PlacesAutocomplete/PlacesAutocomplete.tsx
@@ -18,7 +18,7 @@ export const PlacesAutocomplete = forwardRef<any, PlacesAutocompleteProps>(
   function PlacesAutoComplete({ onSelect, placeholder }, ref) {
     const { data, handleSelect, search, setSearch } =
       usePlacesAutoComplete(onSelect);
-    const inputRef = useRef<TextInput>();
+    const inputRef = useRef<TextInput>(null);
 
     useImperativeHandle(
       ref,
diff --git a/packages/app/components/card/PackCardHeader/PackCardHeader.tsx b/packages/app/components/card/PackCardHeader/PackCardHeader.tsx
index 65c4e4af3..88ebbef68 100644
--- a/packages/app/components/card/PackCardHeader/PackCardHeader.tsx
+++ b/packages/app/components/card/PackCardHeader/PackCardHeader.tsx
@@ -28,6 +28,12 @@ interface PackCardHeaderProps {
   link?: string;
 }
 
+interface MenuItems{
+  label: string,
+  onSelect: () => void,
+}
+
+
 export const PackCardHeader = ({ data, title }: PackCardHeaderProps) => {
   const { isLoading, refetch } = useFetchSinglePack(data?.id);
   const user = useAuthUser();
@@ -60,6 +66,12 @@ export const PackCardHeader = ({ data, title }: PackCardHeaderProps) => {
     editPack(packDetails);
   };
 
+  const menuItems: MenuItems[] = [
+    { label: 'Edit', onSelect: handleEdit },
+    { label: 'Save', onSelect: handleSavePack },
+    { label: 'Delete', onSelect: handleDelete },
+  ];
+
   return (
     <>
       <CustomCardHeader
@@ -113,11 +125,7 @@ export const PackCardHeader = ({ data, title }: PackCardHeaderProps) => {
             </ThreeDotsMenu>
           ) : (
             <RContextMenu
-              menuItems={[
-                { label: 'Edit', onSelect: handleEdit },
-                { label: 'Save', onSelect: handleSavePack },
-                { label: 'Delete', onSelect: handleDeletePack },
-              ]}
+              menuItems={menuItems}
               menuName={
                 <RIconButton
                   backgroundColor="transparent"
diff --git a/packages/app/components/itemtable/itemTable.tsx b/packages/app/components/itemtable/itemTable.tsx
index 4a38506ca..62107f3a9 100644
--- a/packages/app/components/itemtable/itemTable.tsx
+++ b/packages/app/components/itemtable/itemTable.tsx
@@ -16,7 +16,7 @@ import { useAuthUser } from 'app/auth/hooks';
 import Layout from 'app/components/layout/Layout';
 import { RButton, RStack, RText } from '@packrat/ui';
 import useResponsive from 'app/hooks/useResponsive';
-import { useScreenWidth } from 'hooks/common';
+import { useScreenWidth } from 'app/hooks/common/useScreenWidth';
 
 
 interface ItemsTableProps {
diff --git a/packages/app/components/pack/AddPack.tsx b/packages/app/components/pack/AddPack.tsx
index 17099645b..c6fdd0f94 100644
--- a/packages/app/components/pack/AddPack.tsx
+++ b/packages/app/components/pack/AddPack.tsx
@@ -18,7 +18,7 @@ import { RContextMenu } from '@packrat/ui/src/RContextMenu';
 
 const FormSelect: any = OriginalFormSelect;
 
-type AddPackProps = {
+interface AddPackProps {
   isCreatingTrip?: boolean;
   onSuccess?: () => void;
 };
diff --git a/packages/app/components/pack/CopyPackModal.tsx b/packages/app/components/pack/CopyPackModal.tsx
index 1a694938f..06963902d 100644
--- a/packages/app/components/pack/CopyPackModal.tsx
+++ b/packages/app/components/pack/CopyPackModal.tsx
@@ -73,8 +73,8 @@ export const CopyPackModal = ({ isOpen, onClose, currentPack }) => {
     >
       <RInput
         placeholder="Pack Name"
-        name="name"
-        label="Name"
+        // name="name"
+        // label="Name"
         value={packName}
         onChangeText={(t) => setPackName(t)}
         style={{ width: 200 }}
diff --git a/packages/app/components/pack_table/Table.tsx b/packages/app/components/pack_table/Table.tsx
index a5cc5d223..144689e3f 100644
--- a/packages/app/components/pack_table/Table.tsx
+++ b/packages/app/components/pack_table/Table.tsx
@@ -71,7 +71,7 @@ export const TableContainer = ({
             handleCheckboxChange={handleCheckboxChange}
             currentPack={currentPack}
             hasPermissions={isAuthUserPack}
-            refetch={refetch ?? (() => {})}
+            refetch={refetch ?? false}
             setRefetch={setRefetch}
           ></BasicTable>
           {/* <Table style={styles.tableStyle} flexArr={flexArr}>
diff --git a/packages/app/components/pack_table/TableHelperComponents.tsx b/packages/app/components/pack_table/TableHelperComponents.tsx
index f5ed9ba22..61fe8d468 100644
--- a/packages/app/components/pack_table/TableHelperComponents.tsx
+++ b/packages/app/components/pack_table/TableHelperComponents.tsx
@@ -50,9 +50,9 @@ interface TitleRowProps {
   title: string;
 }
 
-interface MenuItems{
-  label: string,
-  onSelect: () => void,
+interface MenuItems {
+  label: string;
+  onSelect: () => void;
 }
 
 const TitleRow = ({ title }: TitleRowProps) => {
@@ -115,32 +115,26 @@ const IgnoreItemCheckbox = ({
   </View>
 );
 
-const menuItem : MenuItems[] = [
-  { label: 'kg', onSelect:() => onChange('kg') },
-  { label: 'g', onSelect: () => onChange('g') },
-  {label:'lb', onSelect:() => onChange('lb')},
-  {label:'oz', onSelect:() => onChange('oz')}
-]
-
 const WeightUnitDropdown = ({ value, onChange }: WeightUnitDropdownProps) => {
-  return (
-    Platform.OS === 'web' ? (
-      <DropdownComponent
+  const menuItem: MenuItems[] = [
+    { label: 'kg', onSelect: () => onChange('kg') },
+    { label: 'g', onSelect: () => onChange('g') },
+    { label: 'lb', onSelect: () => onChange('lb') },
+    { label: 'oz', onSelect: () => onChange('oz') },
+  ];
+  return Platform.OS === 'web' ? (
+    <DropdownComponent
       value={value}
       accessibilityLabel="Select weight unit"
       placeholder="Select weight unit"
       onValueChange={(itemValue) => onChange(itemValue)}
       data={['kg', 'g', 'lb', 'oz']}
     />
-    ) : (
-      <RContextMenu
-              menuItems={menuItem}
-              menuName={
-                <RButton>Select weight unit</RButton>
-              }
-            />
-    )
-    
+  ) : (
+    <RContextMenu
+      menuItems={menuItem}
+      menuName={<RButton>Select weight unit</RButton>}
+    />
   );
 };
 
diff --git a/packages/app/components/trip/TripCards/TripDateRangeCard.tsx b/packages/app/components/trip/TripCards/TripDateRangeCard.tsx
index 5bb272b87..3a025393f 100644
--- a/packages/app/components/trip/TripCards/TripDateRangeCard.tsx
+++ b/packages/app/components/trip/TripCards/TripDateRangeCard.tsx
@@ -34,7 +34,7 @@ export const TripDateRangeCard = ({
           end_date: dates[1],
         }
       : null;
-    setDateRange(dateRange);
+    setDateRange(dateRange as DateRange);
     setSelectedDates(dates);
   };
 
diff --git a/packages/app/constants/convertStateToAbbr.ts b/packages/app/constants/convertStateToAbbr.ts
index eeed2ac5f..cbc847b18 100644
--- a/packages/app/constants/convertStateToAbbr.ts
+++ b/packages/app/constants/convertStateToAbbr.ts
@@ -5,7 +5,7 @@
  * @param {string} to - The conversion direction. Possible values are "abbr" for abbreviation to name conversion and "name" for name to abbreviation conversion.
  * @return {string} The converted region name or abbreviation.
  */
-export default function abbrRegion(input : string, to : 'abbr' | 'name') : string | undefined {
+export default function abbrRegion(input: string, to: 'abbr' | 'name'): string | undefined {
   const states = [
     ['Alabama', 'AL'],
     ['Alaska', 'AK'],
@@ -94,7 +94,7 @@ export default function abbrRegion(input : string, to : 'abbr' | 'name') : strin
       return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
     });
     for (i = 0; i < regions.length; i++) {
-      if ((regions[i] ?? [])[0] == input) {
+      if (regions[i][0] == input) {
         return regions[i][1];
       }
     }
@@ -106,4 +106,5 @@ export default function abbrRegion(input : string, to : 'abbr' | 'name') : strin
       }
     }
   }
+  return undefined;
 }
diff --git a/packages/app/hooks/common/useQueryUpdater.ts b/packages/app/hooks/common/useQueryUpdater.ts
index 776e23e5f..cc74c081a 100644
--- a/packages/app/hooks/common/useQueryUpdater.ts
+++ b/packages/app/hooks/common/useQueryUpdater.ts
@@ -3,7 +3,7 @@ import { getQueryKey } from '@trpc/react-query';
 
 export const useQueryUpdater = (key, params, type = 'query') => {
   const queryClient = useQueryClient();
-  const queryKey = getQueryKey(key, params, type);
+  const queryKey = getQueryKey(key, params, type as any);
 
   const handleUpdateQuery = (updateFunction) => {
     queryClient.setQueryData(queryKey, updateFunction);
diff --git a/packages/app/hooks/map/useNativeMap.ts b/packages/app/hooks/map/useNativeMap.ts
index e1652b37e..fc91a2f43 100644
--- a/packages/app/hooks/map/useNativeMap.ts
+++ b/packages/app/hooks/map/useNativeMap.ts
@@ -115,19 +115,16 @@ export const useNativeMap = ({ shape: shapeProp }: UseNativeMapProps) => {
     findTrailCenter(shape),
   );
 
-  let bounds;
+  let bounds: [number[], number[]] = [
+    [0, 0],
+    [0, 0],
+  ];
+
   try {
     validateShape(shape);
-    bounds = getShapeSourceBounds(shape);
-    if (bounds[0] && bounds[1]) {
-      bounds = [bounds[0], bounds[1]];
-    }
+    bounds = getShapeSourceBounds(shape) as [number[], number[]];
   } catch (error) {
     Alert.alert('Invalid Shape', error.message);
-    bounds = [
-      [0, 0],
-      [0, 0],
-    ]; // Fallback bounds
   }
 
   const zoomLevel = calculateZoomLevel(bounds, {
diff --git a/packages/app/screens/trip/createTripStore/store.ts b/packages/app/screens/trip/createTripStore/store.ts
index 0535f66e5..aca0e360b 100644
--- a/packages/app/screens/trip/createTripStore/store.ts
+++ b/packages/app/screens/trip/createTripStore/store.ts
@@ -29,7 +29,7 @@ export const setDateRange = (
   } | null,
 ): SetDateRangeAction => ({
   type: 'setDateRange',
-  payload: dateRange,
+  payload: dateRange || { start_date: new Date(), end_date: new Date() },
 });
 
 export const createTripInitialState: Partial<Record<addTripKey, any>> = {
diff --git a/packages/app/screens/trip/useTripsData.ts b/packages/app/screens/trip/useTripsData.ts
index 4e9892b61..2b735d52e 100644
--- a/packages/app/screens/trip/useTripsData.ts
+++ b/packages/app/screens/trip/useTripsData.ts
@@ -17,8 +17,8 @@ export const useTripsData = () => {
     isLoading: isPhotonLoading,
   } = useGetPhotonDetails({
     properties: {
-      osm_id: osm?.osmId,
-      osm_type: osm?.osmType,
+      osm_id: osm?.osmId ?? '',
+      osm_type: osm?.osmType ?? '',
     },
   });
 
diff --git a/packages/app/screens/user/Settings.tsx b/packages/app/screens/user/Settings.tsx
index 34af77beb..cb665a43b 100644
--- a/packages/app/screens/user/Settings.tsx
+++ b/packages/app/screens/user/Settings.tsx
@@ -52,13 +52,13 @@ export default function Settings() {
       <RStack
         gap={8}
         style={{
-          width: 'fit-content'
+          width: 'fit-content',
+          paddingVertical: 20,
+          paddingHorizontal : 8,
+          marginHorizontal: 'auto'.
+          marginVertical: 40,
         }}
         maw="100%"
-        paddingVertical={20}
-        paddingHorizontal={8}
-        marginHorizontal="auto"
-        marginVertical={40}
       >
         <RStack
           style={{
@@ -95,8 +95,7 @@ export default function Settings() {
           <RStack
             space="$3"
             maw="100%"
-            width="fit-content"
-            marginHorizontal="auto"
+            style={{width: 'fit-content', marginHorizontal: 'auto'}}
           >
             <ImageUpload
               label="Profile Picture"
@@ -124,7 +123,7 @@ export default function Settings() {
                   <RLabel>Weather: </RLabel>
                   <FormSelect
                     options={weatherOptions}
-                    name="preferredWeather"
+                    name="value.preferredWeather"
                     style={{ width: '100%' }}
                   />
                 </RStack>
@@ -132,7 +131,7 @@ export default function Settings() {
                   <RLabel>Weight: </RLabel>
                   <FormSelect
                     options={weightOptions}
-                    name="preferredWeight"
+                    name="value.preferredWeight"
                     style={{ width: '100%' }}
                   />
                 </RStack>
@@ -148,9 +147,9 @@ export default function Settings() {
           </RStack>
         </Form>
 
-        <RStack marginTop={20} marginBottom={10}>
+        <RStack style={{marginTop: 20, marginBottom: 10}}>
           <RH2>Change Password</RH2>
-          <RSeparator marginVertical={8} />
+          <RSeparator style={{ marginVertical: 8 }} />
           <RText size={16}>We will email you to verify the change.</RText>
         </RStack>
         <Form validationSchema={passwordChangeSchema}>
diff --git a/packages/app/utils/storage/storage.web.ts b/packages/app/utils/storage/storage.web.ts
index af19974c0..8c841cfea 100644
--- a/packages/app/utils/storage/storage.web.ts
+++ b/packages/app/utils/storage/storage.web.ts
@@ -6,7 +6,11 @@ export const storageEvents = new StorageEventEmitter();
 export const Storage = {
   getItem: async (key) => {
     try {
-      return JSON.parse(window.localStorage.getItem(key));
+      const item = window.localStorage.getItem(key);
+      if (item === null) {
+        return null; // Handle case where item is null
+      }
+      return JSON.parse(item);
     } catch {
       console.error('Failed to load data from storage');
     }
diff --git a/packages/ui/src/Bento/elements/tables/Basic.tsx b/packages/ui/src/Bento/elements/tables/Basic.tsx
index 7ee30baf4..2d44e4352 100644
--- a/packages/ui/src/Bento/elements/tables/Basic.tsx
+++ b/packages/ui/src/Bento/elements/tables/Basic.tsx
@@ -41,8 +41,8 @@ interface BasicTableProps {
   onDelete: (params: { itemId: string; packId: string }) => void;
   hasPermissions: boolean;
   currentPack: any;
-  refetch: () => void;
-  setRefetch: () => void;
+  refetch: boolean;
+  setRefetch: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
 /** ------ EXAMPLE ------ */

From bd5f62658517d2fa8115fcafaafe6bd21aee1509 Mon Sep 17 00:00:00 2001
From: Taron <taron.aleksanyan.20@gmail.com>
Date: Tue, 25 Jun 2024 14:03:11 +0400
Subject: [PATCH 095/257] kitchen sync for native

---
 packages/app/constants/api.ts                 |   2 +-
 .../appearance/AppearanceContainer.tsx        |  10 +-
 .../AppearanceLayout.native.tsx               |  31 +++++-
 .../AppearanceDrawer/AppearanceDrawer.tsx     | 103 ------------------
 .../components/AppearanceDrawer/index.ts      |   1 -
 .../AppearanceMobileMenu.tsx                  |  60 ++++++++++
 .../components/AppearanceMobileMenu/index.ts  |   1 +
 .../NavigationList/NavigationList.tsx         |  49 +++++++--
 .../elements/button/Button.tsx                |   0
 .../kitchen-sink/elements/button/index.ts     |   5 +
 .../kitchen-sink/elements/icon/Icon.tsx       |   8 ++
 .../kitchen-sink/elements/icon/index.ts       |   5 +
 .../appearance/kitchen-sink/elements/index.ts |   4 +
 .../{ui-kit => kitchen-sink}/form/index.ts    |   0
 .../form/input/Input.tsx                      |   0
 .../kitchen-sink/form/input/index.ts          |   5 +
 .../{ui-kit => kitchen-sink}/index.ts         |   2 +-
 .../ui-kit/elements/button/index.ts           |   6 -
 .../appearance/ui-kit/elements/index.ts       |   3 -
 .../appearance/ui-kit/form/input/index.ts     |   6 -
 20 files changed, 158 insertions(+), 143 deletions(-)
 delete mode 100644 packages/app/screens/appearance/components/AppearanceDrawer/AppearanceDrawer.tsx
 delete mode 100644 packages/app/screens/appearance/components/AppearanceDrawer/index.ts
 create mode 100644 packages/app/screens/appearance/components/AppearanceMobileMenu/AppearanceMobileMenu.tsx
 create mode 100644 packages/app/screens/appearance/components/AppearanceMobileMenu/index.ts
 rename packages/app/screens/appearance/{ui-kit => kitchen-sink}/elements/button/Button.tsx (100%)
 create mode 100644 packages/app/screens/appearance/kitchen-sink/elements/button/index.ts
 create mode 100644 packages/app/screens/appearance/kitchen-sink/elements/icon/Icon.tsx
 create mode 100644 packages/app/screens/appearance/kitchen-sink/elements/icon/index.ts
 create mode 100644 packages/app/screens/appearance/kitchen-sink/elements/index.ts
 rename packages/app/screens/appearance/{ui-kit => kitchen-sink}/form/index.ts (100%)
 rename packages/app/screens/appearance/{ui-kit => kitchen-sink}/form/input/Input.tsx (100%)
 create mode 100644 packages/app/screens/appearance/kitchen-sink/form/input/index.ts
 rename packages/app/screens/appearance/{ui-kit => kitchen-sink}/index.ts (79%)
 delete mode 100644 packages/app/screens/appearance/ui-kit/elements/button/index.ts
 delete mode 100644 packages/app/screens/appearance/ui-kit/elements/index.ts
 delete mode 100644 packages/app/screens/appearance/ui-kit/form/input/index.ts

diff --git a/packages/app/constants/api.ts b/packages/app/constants/api.ts
index e7cc9ced6..dec093934 100644
--- a/packages/app/constants/api.ts
+++ b/packages/app/constants/api.ts
@@ -6,4 +6,4 @@ import { API_URL } from '@packrat/config';
  * format: "{scheme}://{serverhost}:{port}/api"
  * e.g: "http://localhost:4200/api"
  */
-export const api = API_URL;
+export const api = 'https://811d-78-109-68-224.ngrok-free.app/api';
\ No newline at end of file
diff --git a/packages/app/screens/appearance/AppearanceContainer.tsx b/packages/app/screens/appearance/AppearanceContainer.tsx
index 1da773fdc..2aa7fe680 100644
--- a/packages/app/screens/appearance/AppearanceContainer.tsx
+++ b/packages/app/screens/appearance/AppearanceContainer.tsx
@@ -2,16 +2,14 @@ import React, { useMemo } from 'react';
 import { ScrollView, View } from 'tamagui';
 import { AppearanceLayout } from './AppearanceLayout';
 import { NavigationList } from './components/NavigationList';
-import { UiKitRoutes } from './ui-kit';
-import find from 'lodash/find';
-import some from 'lodash/some';
+import { KitchenSinkRoutes } from './kitchen-sink';
 
 export default function AppearanceContainer() {
   const [activeRoute, setActiveRoute] = React.useState('button');
-  console.log({ UiKitRoutes });
+  console.log({ KitchenSinkRoutes });
   const ActiveComponent = useMemo(() => {
     const currentRoute = findItemInObject(
-      UiKitRoutes,
+      KitchenSinkRoutes,
       ({ route }) => route === activeRoute,
     );
     console.log('currentRoute', currentRoute);
@@ -19,7 +17,7 @@ export default function AppearanceContainer() {
   }, [activeRoute]);
 
   return (
-    <ScrollView>
+    <ScrollView style={{ height: '100%' }}>
       <AppearanceLayout
         navigationList={<NavigationList onRouteChange={setActiveRoute} />}
         currentRoute={<ActiveComponent />}
diff --git a/packages/app/screens/appearance/AppearanceLayout/AppearanceLayout.native.tsx b/packages/app/screens/appearance/AppearanceLayout/AppearanceLayout.native.tsx
index 2b416c837..21ebe590d 100644
--- a/packages/app/screens/appearance/AppearanceLayout/AppearanceLayout.native.tsx
+++ b/packages/app/screens/appearance/AppearanceLayout/AppearanceLayout.native.tsx
@@ -1,6 +1,29 @@
-import React from 'react';
-import { View } from 'tamagui';
+import React, { Suspense, type ReactNode } from 'react';
+import { Text, View } from 'tamagui';
+import { AppearanceMobileMenu } from '../components/AppearanceMobileMenu';
 
-export const AppearanceLayout = () => {
-  return <View>View</View>;
+export const AppearanceLayout = ({
+  navigationList,
+  currentRoute,
+}: {
+  navigationList: ReactNode;
+  currentRoute: ReactNode;
+}) => {
+  return (
+    <>
+      <View
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          gap: 12,
+          height: '100%',
+        }}
+      >
+        <AppearanceMobileMenu navigationList={navigationList} />
+        <View style={{ flex: 1, background: '#fff' }}>
+          <Suspense fallback={<Text>Loading...</Text>}>{currentRoute}</Suspense>
+        </View>
+      </View>
+    </>
+  );
 };
diff --git a/packages/app/screens/appearance/components/AppearanceDrawer/AppearanceDrawer.tsx b/packages/app/screens/appearance/components/AppearanceDrawer/AppearanceDrawer.tsx
deleted file mode 100644
index 52d509f9c..000000000
--- a/packages/app/screens/appearance/components/AppearanceDrawer/AppearanceDrawer.tsx
+++ /dev/null
@@ -1,103 +0,0 @@
-import { Drawer as ExpoDrawer } from 'expo-router/drawer';
-import { DrawerContentScrollView } from '@react-navigation/drawer';
-import React, { type ReactNode } from 'react';
-import useCustomStyles from 'app/hooks/useCustomStyles';
-
-export function AppearanceDrawer({
-  navigationList,
-}: {
-  navigationList: ReactNode;
-}) {
-  const styles = useCustomStyles(loadStyles);
-
-  return (
-    <ExpoDrawer
-      screenOptions={{
-        drawerPosition: 'right',
-        drawerType: 'slide',
-        drawerStyle: styles.drawerStyles,
-        headerShown: false,
-      }}
-      drawerContent={(props) => {
-        return (
-          <DrawerContentScrollView {...props}>
-            {navigationList}
-          </DrawerContentScrollView>
-        );
-      }}
-    />
-  );
-}
-
-const loadStyles = (theme) => {
-  const { currentTheme } = theme;
-
-  return {
-    drawerStyles: {
-      backgroundColor: currentTheme.colors.background,
-    },
-    safeArea: {
-      backgroundColor: currentTheme.colors.background,
-    },
-    container: {
-      width: '100%',
-      backgroundColor: currentTheme.colors.background,
-      flexDirection: 'row',
-      justifyContent: 'space-between',
-      alignItems: 'center',
-    },
-    header: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      justifyContent: 'space-between',
-      padding: 16,
-      width: '100%',
-    },
-    logoContainer: {
-      flexDirection: 'row',
-      alignItems: 'center',
-    },
-    logoWrapper: {
-      marginHorizontal: 10,
-    },
-    logoText: {
-      color: currentTheme.colors.text,
-      fontSize: 38,
-      fontWeight: '900',
-    },
-    menuBar: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      justifyContent: 'flex-end',
-      paddingHorizontal: 16,
-      height: 60,
-    },
-    menuBarItem: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      gap: 8,
-      paddingHorizontal: 12,
-    },
-    menuBarItemText: {
-      color: currentTheme.colors.text,
-      fontSize: 18,
-    },
-    drawerTrigger: {},
-    menuBarItemActive: {
-      // Apply styles for the active item
-      // ...
-    },
-    menuBarItemTextActive: {
-      // Apply styles for the active item's text
-      // ...
-    },
-    menuBarItemSelected: {
-      // Apply styles for the selected item
-      // ...
-    },
-    menuBarItemTextSelected: {
-      // Apply styles for the selected item's text
-      // ...
-    },
-  };
-};
diff --git a/packages/app/screens/appearance/components/AppearanceDrawer/index.ts b/packages/app/screens/appearance/components/AppearanceDrawer/index.ts
deleted file mode 100644
index c4153a42b..000000000
--- a/packages/app/screens/appearance/components/AppearanceDrawer/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './AppearanceDrawer';
diff --git a/packages/app/screens/appearance/components/AppearanceMobileMenu/AppearanceMobileMenu.tsx b/packages/app/screens/appearance/components/AppearanceMobileMenu/AppearanceMobileMenu.tsx
new file mode 100644
index 000000000..3674d9e31
--- /dev/null
+++ b/packages/app/screens/appearance/components/AppearanceMobileMenu/AppearanceMobileMenu.tsx
@@ -0,0 +1,60 @@
+import React, { cloneElement } from 'react';
+import {
+  ChevronDown,
+} from '@tamagui/lucide-icons';
+import {
+  Adapt,
+  Button,
+  Popover,
+  Text,
+} from 'tamagui';
+
+export function AppearanceMobileMenu({
+  navigationList,
+}: {
+  navigationList: React.ReactNode;
+}) {
+  const [isOpen, setIsOpen] = React.useState(false);
+  return (
+    <>
+      <Button onPress={() => setIsOpen(true)} icon={ChevronDown}>
+          <Text>Components</Text>
+        </Button>
+    <Popover size="$5" allowFlip onOpenChange={setIsOpen} open={isOpen}>
+
+      <Adapt when="sm" platform="touch">
+        <Popover.Sheet modal dismissOnSnapToBottom>
+          <Popover.Sheet.Frame padding="$4">
+            <Adapt.Contents />
+          </Popover.Sheet.Frame>
+          <Popover.Sheet.Overlay
+            animation="lazy"
+            enterStyle={{ opacity: 0 }}
+            exitStyle={{ opacity: 0 }}
+          />
+        </Popover.Sheet>
+      </Adapt>
+
+      <Popover.Content
+        borderWidth={1}
+        borderColor="$borderColor"
+        enterStyle={{ y: -10, opacity: 0 }}
+        exitStyle={{ y: -10, opacity: 0 }}
+        elevate
+        style={{ padding: 0, width: 250 }}
+        animation={[
+          'quick',
+          {
+            opacity: {
+              overshootClamping: true,
+            },
+          },
+        ]}
+      >
+        <Popover.Arrow borderWidth={1} borderColor="$borderColor" />
+        {cloneElement(navigationList, {onPressItem: () => {setIsOpen(false)}})}
+      </Popover.Content>
+    </Popover>
+    </>
+  );
+}
diff --git a/packages/app/screens/appearance/components/AppearanceMobileMenu/index.ts b/packages/app/screens/appearance/components/AppearanceMobileMenu/index.ts
new file mode 100644
index 000000000..23eb67c0a
--- /dev/null
+++ b/packages/app/screens/appearance/components/AppearanceMobileMenu/index.ts
@@ -0,0 +1 @@
+export * from './AppearanceMobileMenu';
diff --git a/packages/app/screens/appearance/components/NavigationList/NavigationList.tsx b/packages/app/screens/appearance/components/NavigationList/NavigationList.tsx
index f30cd48e6..c2f82dbcb 100644
--- a/packages/app/screens/appearance/components/NavigationList/NavigationList.tsx
+++ b/packages/app/screens/appearance/components/NavigationList/NavigationList.tsx
@@ -1,31 +1,56 @@
 import React from 'react';
 import { ChevronDown } from '@tamagui/lucide-icons';
 
-import { Accordion } from 'tamagui';
-import { UiKitRoutes } from 'app/screens/appearance/ui-kit';
-import { RButton, RStack, RText } from '@packrat/ui';
+import { Accordion, YGroup, ListItem, Square, Separator, Paragraph } from 'tamagui';
+import { KitchenSinkRoutes } from 'app/screens/appearance/kitchen-sink';
+import { Pressable } from 'react-native';
 export function NavigationList({
   onRouteChange,
+  onPressItem,
 }: {
   onRouteChange: (route: string) => void;
+  onPressItem: (route: string) => void;
 }) {
   return (
-    <Accordion style={{ width: '100%' }}>
-      {Object.entries(UiKitRoutes).map(([key, value]) => {
-        console.log(key, value);
+    <Accordion style={{ width: '100%', overflowY: 'auto' }} type='multiple'>
+      {Object.entries(KitchenSinkRoutes).map(([key, value]) => {
         return (
           <Accordion.Item key={key} value={key}>
-            <Accordion.Trigger>{key}</Accordion.Trigger>
+            <Accordion.Trigger flexDirection="row" justifyContent="space-between">
+          {({
+            open,
+          }: {
+            open: boolean
+          }) => (
+            <>
+              <Paragraph>{key}</Paragraph>
+              <Square animation="quick" rotate={open ? '180deg' : '0deg'}>
+                <ChevronDown size="$1" />
+              </Square>
+            </>
+          )}
+        </Accordion.Trigger>
             <Accordion.Content>
-              <RStack>
+              <YGroup alignSelf="center" bordered width="100%" size="$4" overflow='auto'>
                 {value.map(({ route }) => {
                   return (
-                    <RButton onPress={() => onRouteChange(route)} key={route}>
-                      <RText>{route}</RText>
-                    </RButton>
+                    <>
+                      <Pressable
+                        onPress={() => {
+                          onPressItem?.(route)
+                          onRouteChange(route)
+                        }}
+                        key={route}
+                      >
+                        <YGroup.Item>
+                          <ListItem hoverTheme title={route} />
+                        </YGroup.Item>
+                      </Pressable>
+                      <Separator />
+                    </>
                   );
                 })}
-              </RStack>
+              </YGroup>
             </Accordion.Content>
           </Accordion.Item>
         );
diff --git a/packages/app/screens/appearance/ui-kit/elements/button/Button.tsx b/packages/app/screens/appearance/kitchen-sink/elements/button/Button.tsx
similarity index 100%
rename from packages/app/screens/appearance/ui-kit/elements/button/Button.tsx
rename to packages/app/screens/appearance/kitchen-sink/elements/button/Button.tsx
diff --git a/packages/app/screens/appearance/kitchen-sink/elements/button/index.ts b/packages/app/screens/appearance/kitchen-sink/elements/button/index.ts
new file mode 100644
index 000000000..bae8e192f
--- /dev/null
+++ b/packages/app/screens/appearance/kitchen-sink/elements/button/index.ts
@@ -0,0 +1,5 @@
+import Button from './Button'
+export const ButtonRoute = {
+  component: Button,
+  route: 'button',
+};
diff --git a/packages/app/screens/appearance/kitchen-sink/elements/icon/Icon.tsx b/packages/app/screens/appearance/kitchen-sink/elements/icon/Icon.tsx
new file mode 100644
index 000000000..a42818fe1
--- /dev/null
+++ b/packages/app/screens/appearance/kitchen-sink/elements/icon/Icon.tsx
@@ -0,0 +1,8 @@
+import React from 'react';
+import { Text } from 'react-native';
+
+const Icon = () => {
+  return <Text>Icon</Text>;
+};
+
+export default Icon;
diff --git a/packages/app/screens/appearance/kitchen-sink/elements/icon/index.ts b/packages/app/screens/appearance/kitchen-sink/elements/icon/index.ts
new file mode 100644
index 000000000..4c295d2e2
--- /dev/null
+++ b/packages/app/screens/appearance/kitchen-sink/elements/icon/index.ts
@@ -0,0 +1,5 @@
+import Icon from './Icon'
+export const IconRoute = {
+  component: Icon,
+  route: 'icon',
+};
diff --git a/packages/app/screens/appearance/kitchen-sink/elements/index.ts b/packages/app/screens/appearance/kitchen-sink/elements/index.ts
new file mode 100644
index 000000000..09717f0b1
--- /dev/null
+++ b/packages/app/screens/appearance/kitchen-sink/elements/index.ts
@@ -0,0 +1,4 @@
+import { ButtonRoute } from './button';
+import { IconRoute } from './icon';
+
+export const ElementsRoutes = [ButtonRoute, IconRoute];
diff --git a/packages/app/screens/appearance/ui-kit/form/index.ts b/packages/app/screens/appearance/kitchen-sink/form/index.ts
similarity index 100%
rename from packages/app/screens/appearance/ui-kit/form/index.ts
rename to packages/app/screens/appearance/kitchen-sink/form/index.ts
diff --git a/packages/app/screens/appearance/ui-kit/form/input/Input.tsx b/packages/app/screens/appearance/kitchen-sink/form/input/Input.tsx
similarity index 100%
rename from packages/app/screens/appearance/ui-kit/form/input/Input.tsx
rename to packages/app/screens/appearance/kitchen-sink/form/input/Input.tsx
diff --git a/packages/app/screens/appearance/kitchen-sink/form/input/index.ts b/packages/app/screens/appearance/kitchen-sink/form/input/index.ts
new file mode 100644
index 000000000..bb05ed040
--- /dev/null
+++ b/packages/app/screens/appearance/kitchen-sink/form/input/index.ts
@@ -0,0 +1,5 @@
+import Input from './Input'
+export const InputRoute = {
+  component: Input,
+  route: 'input',
+};
diff --git a/packages/app/screens/appearance/ui-kit/index.ts b/packages/app/screens/appearance/kitchen-sink/index.ts
similarity index 79%
rename from packages/app/screens/appearance/ui-kit/index.ts
rename to packages/app/screens/appearance/kitchen-sink/index.ts
index a6139f94f..85f9825ba 100644
--- a/packages/app/screens/appearance/ui-kit/index.ts
+++ b/packages/app/screens/appearance/kitchen-sink/index.ts
@@ -1,7 +1,7 @@
 import { ElementsRoutes } from './elements';
 import { FormRoutes } from './form';
 
-export const UiKitRoutes = {
+export const KitchenSinkRoutes = {
   Elements: ElementsRoutes,
   Form: FormRoutes,
 };
diff --git a/packages/app/screens/appearance/ui-kit/elements/button/index.ts b/packages/app/screens/appearance/ui-kit/elements/button/index.ts
deleted file mode 100644
index 16f583b81..000000000
--- a/packages/app/screens/appearance/ui-kit/elements/button/index.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { lazy } from 'react';
-
-export const ButtonRoute = {
-  component: lazy(async () => import('./Button')),
-  route: 'button',
-};
diff --git a/packages/app/screens/appearance/ui-kit/elements/index.ts b/packages/app/screens/appearance/ui-kit/elements/index.ts
deleted file mode 100644
index fc4c85a33..000000000
--- a/packages/app/screens/appearance/ui-kit/elements/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { ButtonRoute } from './button';
-
-export const ElementsRoutes = [ButtonRoute];
diff --git a/packages/app/screens/appearance/ui-kit/form/input/index.ts b/packages/app/screens/appearance/ui-kit/form/input/index.ts
deleted file mode 100644
index 73a04b8b9..000000000
--- a/packages/app/screens/appearance/ui-kit/form/input/index.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { lazy } from 'react';
-
-export const InputRoute = {
-  component: lazy(async () => import('./Input')),
-  route: 'input',
-};

From 0984ef370c9bf743fc0203e532f8b21ddde9943a Mon Sep 17 00:00:00 2001
From: pinocchio-life-like <icbr19fl@gmail.com>
Date: Tue, 25 Jun 2024 17:42:34 +0300
Subject: [PATCH 096/257] fix undefined user name header on profile

---
 .../(drawer)/(tabs)/(stack)/profile/[id].tsx  | 13 ++++++-----
 .../app/screens/user/ProfileContainer.tsx     | 22 +++++++++----------
 2 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/profile/[id].tsx b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/profile/[id].tsx
index 188382fda..74fa4f696 100644
--- a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/profile/[id].tsx
+++ b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/profile/[id].tsx
@@ -4,22 +4,25 @@ import { StyleSheet, Text, View, Platform } from 'react-native';
 import ProfileContainer from 'app/screens/user/ProfileContainer';
 import Head from 'expo-router/head';
 import { useProfileId } from 'app/hooks/user';
+import { useProfile } from 'app/hooks/user';
 
 const Profile = () => {
-  const { id } = useProfileId();
+  const [id] = useProfileId();
+  const { user } = useProfile(id);
+  const userRealName = user?.name ?? null;
 
   return (
     <>
       {Platform.OS === 'web' && (
         <Head>
-          <title>{`${id}'s Profile`}</title>
-          <meta name="description" content={`${id}'s Profile`} />
+          <title>{`${userRealName}'s Profile`}</title>
+          <meta name="description" content={`${userRealName}'s Profile`} />
         </Head>
       )}
       <Stack.Screen
         options={{
-          title: `${id}'s Profile`,
-          name: `${id}'s Profile`,
+          title: `${userRealName}'s Profile`,
+          name: `${userRealName}'s Profile`,
         }}
       />
       <ProfileContainer id={id} />
diff --git a/packages/app/screens/user/ProfileContainer.tsx b/packages/app/screens/user/ProfileContainer.tsx
index 0abc10912..bcdcc8b78 100644
--- a/packages/app/screens/user/ProfileContainer.tsx
+++ b/packages/app/screens/user/ProfileContainer.tsx
@@ -251,20 +251,20 @@ export default function ProfileContainer({ id = null }) {
             </View>
             {packsList.length > 0 && (
               // <View style={styles.userDataContainer}>
-                <UserDataContainer
-                  data={packsList}
-                  type="packs"
-                  userId={user?.id}
-                />
+              <UserDataContainer
+                data={packsList}
+                type="packs"
+                userId={user?.id}
+              />
               // </View>
             )}
             {tripsList.length > 0 && (
               // <View style={styles.userDataContainer}>
-                <UserDataContainer
-                  data={tripsList}
-                  type="trips"
-                  userId={user?.id}
-                />
+              <UserDataContainer
+                data={tripsList}
+                type="trips"
+                userId={user?.id}
+              />
               // </View>
             )}
           </View>
@@ -334,7 +334,7 @@ const loadStyles = (theme) => {
       width: '100%',
       flex: 1,
     },
-    
+
     userDataCard: {
       borderRadius: 15,
       backgroundColor: currentTheme.colors.card,

From eb4247894c24085c87bde75c17e3ee963e119324 Mon Sep 17 00:00:00 2001
From: Anmol Verma <anmolverma2810@gmail.com>
Date: Tue, 25 Jun 2024 20:22:25 +0530
Subject: [PATCH 097/257] Wrap details component with view

---
 packages/app/components/pack/AddPack.tsx      |  30 ++--
 .../app/components/pack/PackContainer.tsx     |  17 +-
 packages/app/components/pack/PackDetails.tsx  | 147 +++++++++---------
 .../pack_table/TableHelperComponents.tsx      |  27 ++--
 4 files changed, 111 insertions(+), 110 deletions(-)

diff --git a/packages/app/components/pack/AddPack.tsx b/packages/app/components/pack/AddPack.tsx
index 0ccc946ff..70f7c625e 100644
--- a/packages/app/components/pack/AddPack.tsx
+++ b/packages/app/components/pack/AddPack.tsx
@@ -12,10 +12,11 @@ import {
 import { BaseModal } from '@packrat/ui';
 import useTheme from '../../hooks/useTheme';
 import useCustomStyles from 'app/hooks/useCustomStyles';
-import { useAddNewPack,} from 'app/hooks/packs';
+import { useAddNewPack } from 'app/hooks/packs';
 import { useRouter } from 'app/hooks/router';
 import { addPackSchema } from '@packrat/validations';
 import { RContextMenu } from '@packrat/ui/src/RContextMenu';
+import useResponsive from 'app/hooks/useResponsive';
 
 const FormSelect: any = OriginalFormSelect;
 
@@ -58,15 +59,14 @@ export const AddPack = ({ isCreatingTrip = false, onSuccess }) => {
   };
 
   const handleonValueChange = (itemValue) => {
-    if(itemValue==='Yes'){
-      setIsPublic(true)
-    }else{
-      setIsPublic(false)
+    if (itemValue === 'Yes') {
+      setIsPublic(true);
+    } else {
+      setIsPublic(false);
     }
-    
   };
+  const { xxs, xxl } = useResponsive();
 
- 
   return (
     <View style={styles.container}>
       <View style={styles.mobileStyle}>
@@ -81,14 +81,14 @@ export const AddPack = ({ isCreatingTrip = false, onSuccess }) => {
             style={{ textAlign: 'left', width: 200 }}
           />
           <DropdownComponent
-              value={null}
-              data={packSelectOptions}
-              onValueChange={handleonValueChange}
-              placeholder='Is Public:'
-              width="50%"
-              native={true}
-              zeego={true}
-            />
+            value={null}
+            data={packSelectOptions}
+            onValueChange={handleonValueChange}
+            placeholder="Is Public:"
+            width={xxs ? '50%' : xxl ? '11%' : '50%'}
+            native={true}
+            zeego={true}
+          />
 
           <SubmitButton style={styles.btn} onSubmit={handleAddPack}>
             <RText style={{ color: currentTheme.colors.text }}>
diff --git a/packages/app/components/pack/PackContainer.tsx b/packages/app/components/pack/PackContainer.tsx
index 6a1867950..ab8700f2a 100644
--- a/packages/app/components/pack/PackContainer.tsx
+++ b/packages/app/components/pack/PackContainer.tsx
@@ -10,7 +10,6 @@ import { usePackId } from 'app/hooks/packs';
 import { createParam } from '@packrat/crosspath';
 import { DropdownComponent } from '@packrat/ui';
 
-
 export default function PackContainer({ isCreatingTrip = false }) {
   const [isAddItemModalOpen, setIsAddItemModalOpen] = useState(false);
   const [packIdParam, setPackIdParam] = usePackId();
@@ -81,14 +80,14 @@ export default function PackContainer({ isCreatingTrip = false }) {
             isAddItemModalOpen={isAddItemModalOpen}
             setIsAddItemModalOpen={setIsAddItemModalOpen}
           />
-          
-            <TableContainer
-              key={`table - ${currentPackId}`}
-              currentPack={currentPack}
-              selectedPack={currentPackId}
-              refetch={refetch}
-              setRefetch={setRefetch}
-            />
+
+          <TableContainer
+            key={`table - ${currentPackId}`}
+            currentPack={currentPack}
+            selectedPack={currentPackId}
+            refetch={refetch}
+            setRefetch={setRefetch}
+          />
         </>
       )}
     </View>
diff --git a/packages/app/components/pack/PackDetails.tsx b/packages/app/components/pack/PackDetails.tsx
index 5a7c26dd9..15fb12514 100644
--- a/packages/app/components/pack/PackDetails.tsx
+++ b/packages/app/components/pack/PackDetails.tsx
@@ -68,80 +68,79 @@ export function PackDetails() {
   return (
     <>
       <Layout>
-        
-          {!isError && (
-            <>
-              <DetailsComponent
-                type="pack"
-                data={currentPack}
-                isLoading={isLoading}
-                error={error as any}
-                additionalComps={
-                  <>
-                      <FlatList
-                        data={Object.entries(SECTION)}
-                        contentContainerStyle={{ paddingBottom: 50 }}
-                        keyExtractor={([key, val]) => val}
-                        renderItem={({ item }) => {
-                          {
-                            switch (item[1]) {
-                              case SECTION.TABLE:
-                                return (
-                                  <TableContainer
-                                    currentPack={currentPack}
-                                    copy={canCopy}
-                                    hasPermissions={isAuthUserPack}
-                                  />
-                                );
-                              case SECTION.CTA:
-                                return isAuthUserPack ? (
-                                  <AddItemModal
-                                    currentPackId={
-                                      currentPackId ? currentPackId : ''
-                                    }
-                                    currentPack={currentPack}
-                                    isAddItemModalOpen={isAddItemModalOpen}
-                                    setIsAddItemModalOpen={
-                                      setIsAddItemModalOpen
-                                    }
-                                    // refetch={refetch}
-                                    setRefetch={() =>
-                                      setRefetch((prev) => !prev)
-                                    }
-                                  />
-                                ) : null;
-                              case SECTION.SCORECARD:
-                                return (
-                                  <View style={{minHeight:700}}>
-                                  <ScoreContainer
-                                    type="pack"
-                                    data={currentPack}
-                                    isOwner={isOwner}
-                                  />
-                                  </View>
-                                );
-                              // case SECTION.CHAT:
-                              //   return (
-                              //     <View style={styles.boxStyle}>
-                              //       <ChatContainer
-                              //         itemTypeId={currentPackId}
-                              //         title="Chat"
-                              //         trigger="Open Chat"
-                              //       />
-                              //     </View>
-                              //   );
-                              default:
-                                return null;
-                            }
-                          }
-                        }}
-                      />
-                  </>
-                }
-                link={link}
-              />
-            </>
-          )}
+        {!isError && (
+          <View
+            style={{
+              minHeight: '100%',
+            }}
+          >
+            <DetailsComponent
+              type="pack"
+              data={currentPack}
+              isLoading={isLoading}
+              error={error as any}
+              additionalComps={
+                <>
+                  <FlatList
+                    data={Object.entries(SECTION)}
+                    contentContainerStyle={{ paddingBottom: 50 }}
+                    keyExtractor={([key, val]) => val}
+                    renderItem={({ item }) => {
+                      {
+                        switch (item[1]) {
+                          case SECTION.TABLE:
+                            return (
+                              <TableContainer
+                                currentPack={currentPack}
+                                copy={canCopy}
+                                hasPermissions={isAuthUserPack}
+                              />
+                            );
+                          case SECTION.CTA:
+                            return isAuthUserPack ? (
+                              <AddItemModal
+                                currentPackId={
+                                  currentPackId ? currentPackId : ''
+                                }
+                                currentPack={currentPack}
+                                isAddItemModalOpen={isAddItemModalOpen}
+                                setIsAddItemModalOpen={setIsAddItemModalOpen}
+                                // refetch={refetch}
+                                setRefetch={() => setRefetch((prev) => !prev)}
+                              />
+                            ) : null;
+                          case SECTION.SCORECARD:
+                            return (
+                              <View style={{ minHeight: 800 }}>
+                                <ScoreContainer
+                                  type="pack"
+                                  data={currentPack}
+                                  isOwner={isOwner}
+                                />
+                              </View>
+                            );
+                          // case SECTION.CHAT:
+                          //   return (
+                          //     <View style={styles.boxStyle}>
+                          //       <ChatContainer
+                          //         itemTypeId={currentPackId}
+                          //         title="Chat"
+                          //         trigger="Open Chat"
+                          //       />
+                          //     </View>
+                          //   );
+                          default:
+                            return null;
+                        }
+                      }
+                    }}
+                  />
+                </>
+              }
+              link={link}
+            />
+          </View>
+        )}
       </Layout>
       <View
         style={{
diff --git a/packages/app/components/pack_table/TableHelperComponents.tsx b/packages/app/components/pack_table/TableHelperComponents.tsx
index 772f79e70..80067a8d7 100644
--- a/packages/app/components/pack_table/TableHelperComponents.tsx
+++ b/packages/app/components/pack_table/TableHelperComponents.tsx
@@ -17,6 +17,7 @@ import { categoryIcons } from 'app/constants/pack/icons';
 import { formatNumber } from 'app/utils/formatNumber';
 import loadStyles from './packtable.style';
 import React from 'react';
+import useResponsive from 'app/hooks/useResponsive';
 
 const RText: any = OriginalRText;
 const Feather: any = OriginalFeather;
@@ -49,11 +50,11 @@ interface CategoryRowProps {
 interface TitleRowProps {
   title: string;
 }
-const optionValues=[
+const optionValues = [
   { label: 'kg', value: 'kg' },
   { label: 'g', value: 'g' },
   { label: 'lb', value: 'lb' },
-  {label:'oz', value:'oz'}
+  { label: 'oz', value: 'oz' },
 ];
 
 const TitleRow = ({ title }: TitleRowProps) => {
@@ -117,19 +118,21 @@ const IgnoreItemCheckbox = ({
 );
 
 const WeightUnitDropdown = ({ value, onChange }: WeightUnitDropdownProps) => {
+  const { xxs, xxl } = useResponsive();
   return (
-    <View style={{alignSelf:'center', width:'50%'}}>
+    <View
+      style={{ alignSelf: 'center', width: xxs ? '50%' : xxl ? '15%' : '50%' }}
+    >
       <DropdownComponent
-    value={value}
-    data={optionValues}
-    onValueChange={(itemValue) => onChange(itemValue)}
-    placeholder='Select weight unit'
-    width="100%"
-    native={true}
-    zeego={true}
-  />
+        value={value}
+        data={optionValues}
+        onValueChange={(itemValue) => onChange(itemValue)}
+        placeholder="Select weight unit"
+        width="100%"
+        native={true}
+        zeego={true}
+      />
     </View>
-    
   );
 };
 

From f8136f89630646ce4fda509ab98e8f786aa1ac7f Mon Sep 17 00:00:00 2001
From: Anmol Verma <anmolverma2810@gmail.com>
Date: Tue, 25 Jun 2024 20:29:26 +0530
Subject: [PATCH 098/257] Resize minheight

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

diff --git a/packages/app/components/pack/PackDetails.tsx b/packages/app/components/pack/PackDetails.tsx
index 15fb12514..8832e9e3f 100644
--- a/packages/app/components/pack/PackDetails.tsx
+++ b/packages/app/components/pack/PackDetails.tsx
@@ -26,6 +26,7 @@ import { useFetchSinglePack } from '../../hooks/packs';
 import { useAuthUser } from 'app/auth/hooks';
 import { useIsAuthUserPack } from 'app/hooks/packs/useIsAuthUserPack';
 import Layout from 'app/components/layout/Layout';
+import useResponsive from 'app/hooks/useResponsive';
 
 const SECTION = {
   TABLE: 'TABLE',
@@ -64,6 +65,7 @@ export function PackDetails() {
   const isError = error !== null;
 
   if (isLoading) return <RText>Loading...</RText>;
+  const {xxs,xxl} = useResponsive();
 
   return (
     <>
@@ -111,7 +113,7 @@ export function PackDetails() {
                             ) : null;
                           case SECTION.SCORECARD:
                             return (
-                              <View style={{ minHeight: 800 }}>
+                              <View style={{ minHeight: xxs ? 800 : xxl ? 100 : 800 }}>
                                 <ScoreContainer
                                   type="pack"
                                   data={currentPack}

From 630fb04faed063639616848e36dce4c00010dcc2 Mon Sep 17 00:00:00 2001
From: Muhammad Hassan <mh7722178@gmail.com>
Date: Tue, 25 Jun 2024 21:13:24 +0500
Subject: [PATCH 099/257] All Types Errors Fixed

---
 .../card/PackCardHeader/PackCardHeader.tsx    | 11 ++-
 .../app/components/map/MapButtonsOverlay.tsx  | 10 +--
 .../app/components/map/NativeMap.native.tsx   | 36 +++++++--
 .../components/navigation/Navbar/Navbar.tsx   |  8 +-
 packages/app/components/pack/AddPack.tsx      | 29 +++----
 .../pack_table/TableHelperComponents.tsx      |  4 +-
 packages/app/constants/convertStateToAbbr.ts  | 39 +++++++---
 .../hooks/destination/useGetPhotonDetails.ts  |  2 +-
 packages/app/hooks/feed/publicFeed.ts         |  2 +-
 packages/app/hooks/map/useNativeMap.ts        | 27 +++++--
 packages/app/hooks/map/useWebMap.ts           |  6 +-
 packages/app/hooks/packs/useAddNewPack.ts     | 75 +++++++++++++++----
 packages/app/hooks/packs/useUserPacks.ts      | 14 +++-
 packages/app/hooks/storage/useStorage.ts      | 19 +++--
 packages/app/hooks/user/useProfile.ts         |  6 +-
 packages/app/screens/map/index.tsx            |  6 +-
 packages/app/screens/maps/index.tsx           | 70 ++++++++++-------
 packages/app/screens/user/Settings.tsx        | 21 +++---
 packages/app/utils/getEnumValues.ts           |  4 +-
 packages/ui/src/RContextMenu/index.tsx        |  7 +-
 packages/ui/src/form/components/Select.tsx    | 11 ++-
 21 files changed, 272 insertions(+), 135 deletions(-)

diff --git a/packages/app/components/card/PackCardHeader/PackCardHeader.tsx b/packages/app/components/card/PackCardHeader/PackCardHeader.tsx
index 88ebbef68..42e644378 100644
--- a/packages/app/components/card/PackCardHeader/PackCardHeader.tsx
+++ b/packages/app/components/card/PackCardHeader/PackCardHeader.tsx
@@ -22,18 +22,17 @@ import { Dimensions, Platform } from 'react-native';
 import { CopyPackModal } from '../../pack/CopyPackModal';
 import { View } from 'react-native';
 
+interface MenuItems {
+  label: string;
+  onSelect: () => void;
+}
+
 interface PackCardHeaderProps {
   data: any;
   title: string;
   link?: string;
 }
 
-interface MenuItems{
-  label: string,
-  onSelect: () => void,
-}
-
-
 export const PackCardHeader = ({ data, title }: PackCardHeaderProps) => {
   const { isLoading, refetch } = useFetchSinglePack(data?.id);
   const user = useAuthUser();
diff --git a/packages/app/components/map/MapButtonsOverlay.tsx b/packages/app/components/map/MapButtonsOverlay.tsx
index 8832ca6f9..15404eb8f 100644
--- a/packages/app/components/map/MapButtonsOverlay.tsx
+++ b/packages/app/components/map/MapButtonsOverlay.tsx
@@ -19,13 +19,13 @@ import useCustomStyles from 'app/hooks/useCustomStyles';
 
 interface MapButtonsOverlayProps {
   mapFullscreen: boolean;
-  enableFullScreen: () => void;
+  enableFullScreen?: () => void;
   disableFullScreen: () => void;
-  handleChangeMapStyle: (style: string) => void;
+  handleChangeMapStyle?: (style: string) => void;
   downloadable: boolean;
-  downloading: boolean;
-  fetchLocation: () => void;
-  onDownload: () => void;
+  downloading?: boolean;
+  fetchLocation?: () => void;
+  onDownload?: () => void;
   handleGpxUpload?: () => void;
   progress?: number;
   navigateToMaps?: () => void;
diff --git a/packages/app/components/map/NativeMap.native.tsx b/packages/app/components/map/NativeMap.native.tsx
index 0f4f1c827..75c14cc23 100644
--- a/packages/app/components/map/NativeMap.native.tsx
+++ b/packages/app/components/map/NativeMap.native.tsx
@@ -37,13 +37,36 @@ import * as DocumentPicker from 'expo-document-picker';
 import * as FileSystem from 'expo-file-system';
 import { DOMParser } from 'xmldom';
 
+interface GeoJsonProperties {
+  name?: string;
+}
+
+interface Geometry {
+  type: string;
+  coordinates: any;
+}
+
+interface Feature {
+  type: 'Feature';
+  properties?: GeoJsonProperties;
+  geometry: Geometry;
+}
+
+interface Shape {
+  features: Feature[];
+}
+
+interface NativeMapProps {
+  shape: Shape;
+}
+
 const RButton: any = OriginalRButton;
 const RInput: any = OriginalRInput;
 
 Mapbox.setWellKnownTileServer(Platform.OS === 'android' ? 'Mapbox' : 'mapbox');
 Mapbox.setAccessToken(MAPBOX_ACCESS_TOKEN);
 
-function NativeMap({ shape: shapeProp }) {
+const NativeMap: React.FC<NativeMapProps> = ({ shape: shapeProp }) => {
   const styles = useCustomStyles(loadStyles);
   const {
     camera,
@@ -81,7 +104,7 @@ function NativeMap({ shape: shapeProp }) {
         const parsedGpx = new DOMParser().parseFromString(gpxString);
         const geojson = toGeoJSON(parsedGpx);
         validateShape(geojson);
-        setShape(geojson);
+        setShape(geojson as Shape);
       }
     } catch (error) {
       Alert.alert('Error', error.message);
@@ -201,7 +224,7 @@ function NativeMap({ shape: shapeProp }) {
             <Mapbox.ShapeSource
               id="source1"
               lineMetrics={true}
-              shape={shape.features[0]}
+              shape={shape.features[0] as GeoJSON.Feature<GeoJSON.Geometry>}
               cluster
               clusterRadius={80}
               clusterMaxZoomLevel={14}
@@ -231,7 +254,10 @@ function NativeMap({ shape: shapeProp }) {
             )}
           </>
         ) : (
-          <Mapbox.ShapeSource id={'some-feature'} shape={shape.features[0]}>
+          <Mapbox.ShapeSource
+            id={'some-feature'}
+            shape={shape.features[0] as GeoJSON.Feature<GeoJSON.Geometry>}
+          >
             <Mapbox.LineLayer
               sourceID="some-feature"
               id="some-feature-line"
@@ -355,7 +381,7 @@ function NativeMap({ shape: shapeProp }) {
       )}
     </SafeAreaView>
   );
-}
+};
 
 const loadStyles = () => ({
   page: {
diff --git a/packages/app/components/navigation/Navbar/Navbar.tsx b/packages/app/components/navigation/Navbar/Navbar.tsx
index 1cebe53ef..0fd60159c 100644
--- a/packages/app/components/navigation/Navbar/Navbar.tsx
+++ b/packages/app/components/navigation/Navbar/Navbar.tsx
@@ -42,7 +42,7 @@ export const Navbar = () => {
             />
             <Text
               style={styles.logoText}
-              onPress={() => {
+              onClick={() => {
                 navigate('/');
               }}
             >
@@ -78,7 +78,7 @@ const loadStyles = (currentTheme, isScrolled, screenWidth) => {
     safeArea: {
       backgroundColor,
       width: '100%',
-      margin: 'auto',
+      margin: 0,
       transition: NavbarStyles.transition,
       ...(isFloating
         ? {
@@ -90,10 +90,10 @@ const loadStyles = (currentTheme, isScrolled, screenWidth) => {
         : {}),
       ...(isWeb
         ? {
-            position: 'fixed',
+            position: "fixed",
             top: 0,
             zIndex: 100,
-            width: '100vw',
+            width: Platform.OS === 'web' ? '100vw' : '100%',
           }
         : {}),
     },
diff --git a/packages/app/components/pack/AddPack.tsx b/packages/app/components/pack/AddPack.tsx
index c6fdd0f94..a6dc1b122 100644
--- a/packages/app/components/pack/AddPack.tsx
+++ b/packages/app/components/pack/AddPack.tsx
@@ -16,18 +16,13 @@ import { useRouter } from 'app/hooks/router';
 import { addPackSchema } from '@packrat/validations';
 import { RContextMenu } from '@packrat/ui/src/RContextMenu';
 
-const FormSelect: any = OriginalFormSelect;
-
-interface AddPackProps {
-  isCreatingTrip?: boolean;
-  onSuccess?: () => void;
-};
-
-interface MenuItem {
-  label: string,
-  onSelect: () => void
+interface MenuItems {
+  label: string;
+  onSelect: () => void;
 }
 
+const FormSelect: any = OriginalFormSelect;
+
 export const AddPack : React.FC<AddPackProps> = ({ isCreatingTrip = false, onSuccess }) => {
   // Hooks
   const { enableDarkMode, enableLightMode, isDark, isLight, currentTheme } =
@@ -36,11 +31,6 @@ export const AddPack : React.FC<AddPackProps> = ({ isCreatingTrip = false, onSuc
   const router = useRouter();
   // const [_, setPackIdParam] = usePackId();
 
-  const menuItems: MenuItem[] = [
-    { label: 'Yes', onSelect: () => setIsPublic(true) },
-    { label: 'No', onSelect: () => setIsPublic(false) },
-  ];
-
   const {
     addNewPackAsync,
     isError,
@@ -75,6 +65,10 @@ export const AddPack : React.FC<AddPackProps> = ({ isCreatingTrip = false, onSuc
     setIsPublic(itemValue == 'true');
   };
 
+  const menuItems: MenuItems[] = [
+    { label: 'Yes', onSelect: () => setIsPublic(true) },
+    { label: 'No', onSelect: () => setIsPublic(false) },
+  ];
 
   return (
     <View style={styles.container}>
@@ -99,10 +93,7 @@ export const AddPack : React.FC<AddPackProps> = ({ isCreatingTrip = false, onSuc
               placeholder={'Is Public'}
             />
           ) : (
-            <RContextMenu
-              menuItems={menuItems}
-              menuName="Is Public"
-            />
+            <RContextMenu menuItems={menuItems} menuName="Is Public" />
           )}
 
           <SubmitButton style={styles.btn} onSubmit={handleAddPack}>
diff --git a/packages/app/components/pack_table/TableHelperComponents.tsx b/packages/app/components/pack_table/TableHelperComponents.tsx
index 61fe8d468..39ebde8e0 100644
--- a/packages/app/components/pack_table/TableHelperComponents.tsx
+++ b/packages/app/components/pack_table/TableHelperComponents.tsx
@@ -116,7 +116,7 @@ const IgnoreItemCheckbox = ({
 );
 
 const WeightUnitDropdown = ({ value, onChange }: WeightUnitDropdownProps) => {
-  const menuItem: MenuItems[] = [
+  const menuItems: MenuItems[] = [
     { label: 'kg', onSelect: () => onChange('kg') },
     { label: 'g', onSelect: () => onChange('g') },
     { label: 'lb', onSelect: () => onChange('lb') },
@@ -132,7 +132,7 @@ const WeightUnitDropdown = ({ value, onChange }: WeightUnitDropdownProps) => {
     />
   ) : (
     <RContextMenu
-      menuItems={menuItem}
+      menuItems={menuItems}
       menuName={<RButton>Select weight unit</RButton>}
     />
   );
diff --git a/packages/app/constants/convertStateToAbbr.ts b/packages/app/constants/convertStateToAbbr.ts
index cbc847b18..20e9cca18 100644
--- a/packages/app/constants/convertStateToAbbr.ts
+++ b/packages/app/constants/convertStateToAbbr.ts
@@ -5,8 +5,14 @@
  * @param {string} to - The conversion direction. Possible values are "abbr" for abbreviation to name conversion and "name" for name to abbreviation conversion.
  * @return {string} The converted region name or abbreviation.
  */
-export default function abbrRegion(input: string, to: 'abbr' | 'name'): string | undefined {
-  const states = [
+
+type Region = [string, string];
+
+export default function abbrRegion(
+  input: string,
+  to: 'abbr' | 'name',
+): string | undefined {
+  const states: Region[] = [
     ['Alabama', 'AL'],
     ['Alaska', 'AK'],
     ['American Samoa', 'AS'],
@@ -70,7 +76,7 @@ export default function abbrRegion(input: string, to: 'abbr' | 'name'): string |
   ];
 
   // So happy that Canada and the US have distinct abbreviations
-  const provinces = [
+  const provinces: Region[] = [
     ['Alberta', 'AB'],
     ['British Columbia', 'BC'],
     ['Manitoba', 'MB'],
@@ -86,25 +92,34 @@ export default function abbrRegion(input: string, to: 'abbr' | 'name'): string |
     ['Yukon', 'YT'],
   ];
 
-  const regions = states.concat(provinces);
+  const regions: Region[] = states.concat(provinces);
 
   let i; // Reusable loop variable
   if (to == 'abbr') {
     input = input?.replace(/\w\S*/g, function (txt) {
       return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
     });
-    for (i = 0; i < regions.length; i++) {
-      if (regions[i][0] == input) {
-        return regions[i][1];
-      }
+    const found = regions.find(([name]) => name === input);
+    if (found) {
+      return found[1];
     }
+    // for (i = 0; i < regions.length; i++) {
+    //   if (regions[i][0] == input) {
+    //     return regions[i][1];
+    //   }
+    // }
   } else if (to == 'name') {
     input = input.toUpperCase();
-    for (i = 0; i < regions.length; i++) {
-      if ((regions[i] ?? [])[1] == input) {
-        return regions[i][0];
-      }
+
+    const found = regions.find(([name]) => name === input);
+    if (found) {
+      return found[0];
     }
+    // for (i = 0; i < regions.length; i++) {
+    //   if (regions[i][1] == input) {
+    //     return regions[i][0];
+    //   }
+    // }
   }
   return undefined;
 }
diff --git a/packages/app/hooks/destination/useGetPhotonDetails.ts b/packages/app/hooks/destination/useGetPhotonDetails.ts
index 016e16363..c14d25742 100644
--- a/packages/app/hooks/destination/useGetPhotonDetails.ts
+++ b/packages/app/hooks/destination/useGetPhotonDetails.ts
@@ -10,7 +10,7 @@ export const useGetPhotonDetails = ({
 
   const { isLoading, isError, data, error } =
     queryTrpc.getPhotonDetails.useQuery(
-      { id: osm_id, type: osm_type },
+      { id: osm_id as string, type: osm_type as string },
       {
         enabled,
       },
diff --git a/packages/app/hooks/feed/publicFeed.ts b/packages/app/hooks/feed/publicFeed.ts
index f8581075a..ad25ec0bd 100644
--- a/packages/app/hooks/feed/publicFeed.ts
+++ b/packages/app/hooks/feed/publicFeed.ts
@@ -21,7 +21,7 @@ type OptionalDataType = {
 export const usePublicFeed = (queryString, selectedTypes) => {
   let data: OptionalDataType = [];
   let isLoading = true;
-  let refetch = null;
+  let refetch = () => {};
   try {
     const queryOptions = {
       refetchOnWindowFocus: false,
diff --git a/packages/app/hooks/map/useNativeMap.ts b/packages/app/hooks/map/useNativeMap.ts
index fc91a2f43..8e695be0e 100644
--- a/packages/app/hooks/map/useNativeMap.ts
+++ b/packages/app/hooks/map/useNativeMap.ts
@@ -1,5 +1,5 @@
 import Geolocation from '@react-native-community/geolocation';
-import { offlineManager } from '@rnmapbox/maps';
+import { offlineManager, MapView  } from '@rnmapbox/maps';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { Alert, Dimensions } from 'react-native';
 import {
@@ -15,8 +15,23 @@ interface Location {
   latitude: number;
 }
 
+interface GeoJsonProperties {
+  name?: string;
+}
+
+interface Geometry {
+  type: string;
+  coordinates: any;
+}
+
+interface Feature {
+  type: string;
+  properties?: GeoJsonProperties;
+  geometry: Geometry;
+}
+
 interface Shape {
-  features: Array<{ properties: { name: string } }>;
+  features: Feature[];
 }
 
 interface UseNativeMapProps {
@@ -99,7 +114,7 @@ const useMapDimensions = () => {
 
 export const useNativeMap = ({ shape: shapeProp }: UseNativeMapProps) => {
   const camera = useRef(null);
-  const mapViewRef = useRef(null);
+  const mapViewRef = useRef<MapView>(null);
   const cancelRef = useRef(null);
 
   const { location, getPosition } = useLocation();
@@ -109,8 +124,10 @@ export const useNativeMap = ({ shape: shapeProp }: UseNativeMapProps) => {
 
   const [mapFullscreen, setMapFullscreen] = useState(false);
   const [showMapNameInputDialog, setShowMapNameInputDialog] = useState(false);
-  const [shape, setShape] = useState(shapeProp);
-  const [mapName, setMapName] = useState(shape?.features[0]?.properties?.name);
+  const [shape, setShape] = useState<Shape>(shapeProp);
+  const [mapName, setMapName] = useState<string | undefined>(
+    shape?.features[0]?.properties?.name,
+  );
   const [trailCenterPoint, setTrailCenterPoint] = useState(
     findTrailCenter(shape),
   );
diff --git a/packages/app/hooks/map/useWebMap.ts b/packages/app/hooks/map/useWebMap.ts
index d1a92d7f9..a8acbfd31 100644
--- a/packages/app/hooks/map/useWebMap.ts
+++ b/packages/app/hooks/map/useWebMap.ts
@@ -187,13 +187,13 @@ const useMapEffects = ({
     } catch (error) {
       console.error(error);
     }
-  }, [mapFullscreen]);
+  }, [mapFullscreen, shape]);
 
   // Effect to handle shape changes and update map layers
   useEffect(() => {
     if (map.current && isPoint(shape)) {
       addPoints(map.current);
-    } else if (map.current && shape.features[0].geometry.type !== 'Point') {
+    } else if (map.current && !isPoint(shape)) {
       removeTrailLayer(map.current);
       addTrailLayer(map.current);
       map.current.setCenter(trailCenterPointRef.current);
@@ -404,7 +404,7 @@ const useMapActions = ({
         map.current.setStyle(style);
         if (isPoint(shape)) {
           map.current.on('style.load', () => addPoints(map.current));
-        } else if (isPolygonOrMultiPolygon) {
+        } else if (isPolygonOrMultiPolygon(shape)) {
           // Add Polygon
         } else {
           map.current.on('style.load', () => {
diff --git a/packages/app/hooks/packs/useAddNewPack.ts b/packages/app/hooks/packs/useAddNewPack.ts
index f63c5281c..0b389e9cd 100644
--- a/packages/app/hooks/packs/useAddNewPack.ts
+++ b/packages/app/hooks/packs/useAddNewPack.ts
@@ -2,7 +2,55 @@ import { useState } from 'react';
 import { queryTrpc } from '../../trpc';
 import { useAuthUser } from 'app/auth/hooks';
 
-export const useAddNewPack = () => {
+interface Pack {
+  id: number;
+  name: string;
+  is_public: boolean;
+  owner_id: string;
+}
+
+interface PacksData {
+  packs: Pack[];
+  message?: string;
+}
+
+interface GetDataParams {
+  ownerId: string;
+  queryBy: string;
+}
+
+interface SetDataParams {
+  ownerId: string;
+  queryBy: string;
+}
+
+type DataUpdateFunction<TData> = (prevData?: TData) => TData;
+
+interface UseAddNewPackResult {
+  mutation: {
+    isLoading: boolean;
+    isError: boolean;
+    isSuccess: boolean;
+    error: any; // Adjust the type as needed
+    data: any; // Adjust the type as needed
+    mutate: (data: Pack) => void;
+    mutateAsync: (data: Pack) => Promise<any>;
+  };
+  addNewPack: (data: { name: string; isPublic: boolean }) => void;
+  addNewPackAsync: (data: { name: string; isPublic: boolean }) => Promise<any>;
+  isLoading: boolean;
+  isError: boolean;
+  isSuccess: boolean;
+  error: any; // Adjust the type as needed
+  response: any; // Adjust the type as needed
+  name: string;
+  isPublic: boolean;
+  setIsPublic: (value: boolean) => void;
+  setName: (value: string) => void;
+  packSelectOptions: { value: string; label: string }[];
+}
+
+export const useAddNewPack = (): UseAddNewPackResult  => {
   const user = useAuthUser();
   const [name, setName] = useState('');
   const [isPublic, setIsPublic] = useState(false);
@@ -41,26 +89,23 @@ export const useAddNewPack = () => {
 
   const mutation = queryTrpc.addPack.useMutation({
     onMutate: async (packData) => {
-      // Check if packData is not void
       if (!packData) {
         throw new Error('Pack data is not available.');
       }
 
-      utils.getPacks.cancel({
-        ownerId: packData?.owner_id,
-        queryBy: '',
-      });
       // Step 1: Define optimistic update
       const optimisticUpdate = {
         ...packData,
         id: Date.now(),
       };
 
+      // Get current query data
       const oldQueryData = utils.getPacks.getData({
         ownerId: packData?.owner_id,
         queryBy: '',
       });
 
+      // Prepare updated query data
       const newQueryData = {
         ...oldQueryData,
         packs:
@@ -68,42 +113,46 @@ export const useAddNewPack = () => {
             ? [...oldQueryData?.packs, optimisticUpdate]
             : [optimisticUpdate],
       };
+
+      // Update query data
       utils.getPacks.setData(
         {
           ownerId: packData.owner_id,
           queryBy: '',
         },
-        (oldQueryData) => newQueryData,
+        () => newQueryData,
       );
+
       setName('');
       setIsPublic(false);
-      return {
-        oldQueryData,
-      };
+
+      return { oldQueryData };
     },
     onError: (_error, _pack, context) => {
-      // Check if context is not undefined
       if (!context) {
         throw new Error('Context is not available.');
       }
 
-      // Check if packData is not void
       if (!_pack) {
         throw new Error('Pack data is not available.');
       }
 
+      // Restore old query data on error
       utils.getPacks.setData(
         {
           ownerId: _pack.owner_id,
           queryBy: '',
         },
-        (oldQueryData) => context.oldQueryData,
+        // Ensure the callback returns the correct structure
+        () => context.oldQueryData,
       );
     },
     onSuccess: (result) => {
+      // Invalidate the query on success
       utils.getPacks.invalidate();
     },
   });
+
   return {
     mutation,
     addNewPack,
diff --git a/packages/app/hooks/packs/useUserPacks.ts b/packages/app/hooks/packs/useUserPacks.ts
index baae9152b..69043a120 100644
--- a/packages/app/hooks/packs/useUserPacks.ts
+++ b/packages/app/hooks/packs/useUserPacks.ts
@@ -16,10 +16,16 @@ export const useUserPacks = (ownerId: string | undefined, queryString = '') => {
       keepPreviousData: true,
     },
   );
-  utils.getPacks.setData({
-    ownerId: ownerId || '',
-    queryBy: queryString,
-  });
+  utils.getPacks.setData(
+    {
+      ownerId: ownerId || '',
+      queryBy: queryString,
+    },
+    (oldData) => {
+      //This was added to fix typescript error and passing oldData to determine new data
+      return data;
+    },
+  );
 
   // Extract packs or set an empty array if data is undefined.
   const packs = data?.packs || [];
diff --git a/packages/app/hooks/storage/useStorage.ts b/packages/app/hooks/storage/useStorage.ts
index a68d337a5..3da25a0da 100644
--- a/packages/app/hooks/storage/useStorage.ts
+++ b/packages/app/hooks/storage/useStorage.ts
@@ -3,12 +3,19 @@ import { Storage, storageEvents } from 'app/utils/storage';
 
 type UseStateHook<T> = [[boolean, T | null], (value?: T | null) => void];
 
-const useAsyncState = (initialValue) => {
-  return useReducer((state = null, action) => [false, action], initialValue);
+const useAsyncState = <T>(
+  initialValue: T | null,
+): [[boolean, T | null], (value?: T | null) => void] => {
+  return useReducer(
+    (state: [boolean, T | null], action: T | null): [boolean, T | null] => {
+      return [false, action];
+    },
+    [true, initialValue],
+  );
 };
 
 export function useStorage(key: string): UseStateHook<string> {
-  const [state, setState] = useAsyncState(key);
+  const [state, setState] = useAsyncState<string>(null);
 
   useEffect(() => {
     (async () => {
@@ -20,12 +27,12 @@ export function useStorage(key: string): UseStateHook<string> {
       }
     })();
 
-    const handleChange = (evt) => {
+    const handleChange = (evt: { key: string; value: string | null }) => {
       if (evt.key !== key) return;
       setState(evt.value);
     };
 
-    const handleRemove = (evt) => {
+    const handleRemove = (evt: { key: string }) => {
       if (evt.key !== key) return;
       setState(null);
     };
@@ -39,7 +46,7 @@ export function useStorage(key: string): UseStateHook<string> {
     };
   }, [key]);
 
-  // Set
+  // Set value in storage
   const setValue = useCallback(
     (value: string | null) => {
       Storage.setItem(key, value);
diff --git a/packages/app/hooks/user/useProfile.ts b/packages/app/hooks/user/useProfile.ts
index 0f065feca..886b5b462 100644
--- a/packages/app/hooks/user/useProfile.ts
+++ b/packages/app/hooks/user/useProfile.ts
@@ -9,7 +9,7 @@ export const useProfile = (id = null) => {
   const authUser = useAuthUser();
   const userId = id ?? authUser?.id;
 
-  const isCurrentUser = useMatchesCurrentUser(userId); // TODO: Implement this hook in more components
+  const isCurrentUser = useMatchesCurrentUser(userId as string); // TODO: Implement this hook in more components
 
   const {
     data: allPacks,
@@ -27,13 +27,13 @@ export const useProfile = (id = null) => {
     data: allFavorites,
     isLoading: allFavoritesLoading,
     error: allFavoritesError,
-  } = useFetchUserFavorites(userId); // TODO: Add enabled as parameter
+  } = useFetchUserFavorites(userId as string); // TODO: Add enabled as parameter
 
   const {
     data: userData,
     isLoading: userIsLoading,
     error: userError,
-  } = useGetUser(userId);
+  } = useGetUser(userId as string);
 
   const user = !isCurrentUser ? userData : authUser;
 
diff --git a/packages/app/screens/map/index.tsx b/packages/app/screens/map/index.tsx
index cb477355b..eef08de51 100644
--- a/packages/app/screens/map/index.tsx
+++ b/packages/app/screens/map/index.tsx
@@ -14,6 +14,10 @@ import useTheme from 'app/hooks/useTheme';
 import { ErrorBoundary } from '@packrat/ui';
 import useCustomStyles from 'app/hooks/useCustomStyles';
 
+interface MapViewRef {
+  current: Mapbox.MapView | null;
+}
+
 Mapbox.setAccessToken(MAPBOX_ACCESS_TOKEN);
 
 export default function Map() {
@@ -24,7 +28,7 @@ export default function Map() {
 
   // sourcery skip: avoid-function-declarations-in-blocks
   function CustomizedMap() {
-    const mapViewRef = useRef(null);
+    const mapViewRef = useRef<MapViewRef>(null);
 
     const [style, setStyle] = React.useState(
       'mapbox://styles/mapbox/outdoors-v11',
diff --git a/packages/app/screens/maps/index.tsx b/packages/app/screens/maps/index.tsx
index 3cbb81eeb..daa2e23cf 100644
--- a/packages/app/screens/maps/index.tsx
+++ b/packages/app/screens/maps/index.tsx
@@ -13,6 +13,11 @@ import {
 import { api } from 'app/constants/api';
 import { RStack } from '@packrat/ui';
 
+interface Pack {
+  bounds: number[][];
+  metadata: string;
+}
+
 function CircleCapComp() {
   const { enableDarkMode, enableLightMode, isDark, isLight, currentTheme } =
     useTheme();
@@ -34,28 +39,41 @@ function CircleCapComp() {
 export default function DownloadedMaps() {
   const { enableDarkMode, enableLightMode, isDark, isLight, currentTheme } =
     useTheme();
-  const [offlinePacks, setOfflinePacks] = useState(null);
+  const [offlinePacks, setOfflinePacks] = useState<any[]>([]);
   const [showMap, setShowMap] = useState(false);
-  const [pack, setPack] = useState(null);
+  const [pack, setPack] = useState<Pack | null>(null);
+  const [zoomLevel, setZoomLevel] = useState<number | null>(null);
 
   let shape, zoomLevel;
-  if (pack != null) {
-    shape = pack && JSON.parse(JSON.parse(pack.metadata).shape);
-    const dw = Dimensions.get('screen').width;
-    const bounds = getShapeSourceBounds(shape);
-
-    zoomLevel = calculateZoomLevel(bounds[0].concat(bounds[1]), {
-      width: dw,
-      height: 360,
-    });
-  }
-
   useEffect(() => {
     offlineManager.getPacks().then((packs) => {
       setOfflinePacks(packs);
     });
   }, []);
 
+  useEffect(() => {
+    if (pack) {
+      const shape = JSON.parse(JSON.parse(pack.metadata).shape);
+      const dw = Dimensions.get('screen').width;
+      const bounds = getShapeSourceBounds(shape);
+      if (bounds) {
+        const calculatedZoomLevel = calculateZoomLevel(
+          bounds[0].concat(bounds[1]),
+          {
+            width: dw,
+            height: 360,
+          },
+        );
+        setZoomLevel(calculatedZoomLevel);
+      }
+    }
+  }, [pack]);
+
+  const handleMapPress = (selectedPack: any) => {
+    setPack(selectedPack.pack);
+    setShowMap(true);
+  };
+
   return (
     <View style={{ backgroundColor: currentTheme.colors.background }}>
       <Text
@@ -69,19 +87,17 @@ export default function DownloadedMaps() {
       >
         Downloaded Maps
       </Text>
-      {offlinePacks ? (
+      {offlinePacks.length > 0 ? (
         <View style={{ gap: 4 }}>
           {offlinePacks.map(({ pack }) => {
             const metadata = JSON.parse(pack.metadata);
             return (
               <TouchableOpacity
+                key={pack.id}
                 style={{
                   padding: 20,
                 }}
-                onPress={() => {
-                  setPack(pack);
-                  setShowMap(true);
-                }}
+                onPress={() => handleMapPress({ pack })}
               >
                 {pack && (
                   <Image
@@ -91,9 +107,7 @@ export default function DownloadedMaps() {
                       borderRadius: 10,
                     }}
                     source={{
-                      uri: `${api}/mapPreview/${
-                        pack?.bounds[0] + ',' + pack?.bounds[1]
-                      },10,60,60/600x600`,
+                      uri: `${api}/mapPreview/${pack.bounds[0]},${pack.bounds[1]},10,60,60/600x600`,
                     }}
                   />
                 )}
@@ -116,7 +130,7 @@ export default function DownloadedMaps() {
           <Text>loading...</Text>
         </RStack>
       )}
-      {showMap ? (
+      {showMap && pack && zoomLevel !== null && (
         <Modal visible={true}>
           <Mapbox.MapView
             style={{ flex: 1 }}
@@ -129,8 +143,8 @@ export default function DownloadedMaps() {
             <Mapbox.Camera
               zoomLevel={zoomLevel}
               centerCoordinate={[
-                (pack.bounds[0][0] + pack.bounds[1][0]) / 2,
-                (pack.bounds[0][1] + pack.bounds[1][1]) / 2,
+                (pack.bounds[0]?.[0] + pack.bounds[1]?.[0]) / 2,
+                (pack.bounds[0]?.[1] + pack.bounds[1]?.[1]) / 2,
               ]}
               animationMode={'flyTo'}
               animationDuration={2000}
@@ -156,10 +170,10 @@ export default function DownloadedMaps() {
             {/* // top location */}
             {shape?.features[0]?.geometry?.coordinates?.length > 0 && (
               <Mapbox.PointAnnotation
-                id={'cicleCap'}
+                id={'circleCap'}
                 coordinate={
-                  shape?.features[0]?.geometry?.coordinates[
-                    shape?.features[0]?.geometry?.coordinates?.length - 1
+                  shape.features[0].geometry.coordinates[
+                    shape.features[0].geometry.coordinates.length - 1
                   ]
                 }
               >
@@ -178,7 +192,7 @@ export default function DownloadedMaps() {
             downloadable={false}
           />
         </Modal>
-      ) : null}
+      )}
     </View>
   );
 }
diff --git a/packages/app/screens/user/Settings.tsx b/packages/app/screens/user/Settings.tsx
index cb665a43b..f4b615b8e 100644
--- a/packages/app/screens/user/Settings.tsx
+++ b/packages/app/screens/user/Settings.tsx
@@ -51,14 +51,12 @@ export default function Settings() {
     <RScrollView style={{ backgroundColor: isDark ? '#1A1A1D' : 'white' }}>
       <RStack
         gap={8}
-        style={{
-          width: 'fit-content',
-          paddingVertical: 20,
-          paddingHorizontal : 8,
-          marginHorizontal: 'auto'.
-          marginVertical: 40,
-        }}
+        width="fit-content"
         maw="100%"
+        paddingVertical={20}
+        paddingHorizontal={8}
+        marginHorizontal="auto"
+        marginVertical={40}
       >
         <RStack
           style={{
@@ -95,7 +93,8 @@ export default function Settings() {
           <RStack
             space="$3"
             maw="100%"
-            style={{width: 'fit-content', marginHorizontal: 'auto'}}
+            width="fit-content"
+            marginHorizontal="auto"
           >
             <ImageUpload
               label="Profile Picture"
@@ -147,13 +146,13 @@ export default function Settings() {
           </RStack>
         </Form>
 
-        <RStack style={{marginTop: 20, marginBottom: 10}}>
+        <RStack style={{ marginTop: 20, marginBottom: 10 }}>
           <RH2>Change Password</RH2>
-          <RSeparator style={{ marginVertical: 8 }} />
+          <RSeparator marginVertical={8}/>
           <RText size={16}>We will email you to verify the change.</RText>
         </RStack>
         <Form validationSchema={passwordChangeSchema}>
-          <RStack space="$3" style={{width:"100%", marginHorizontal:"auto"}}>
+          <RStack space="$3" width="100%" marginHorizontal="auto">
             <RStack space="$2">
               <RLabel htmlFor="oldPassword">Old password</RLabel>
               <FormInput
diff --git a/packages/app/utils/getEnumValues.ts b/packages/app/utils/getEnumValues.ts
index fd9cff6bd..82d87b5f9 100644
--- a/packages/app/utils/getEnumValues.ts
+++ b/packages/app/utils/getEnumValues.ts
@@ -1,4 +1,6 @@
-export function getEnumValues<T>(enumType: T): Array<T[keyof T]> {
+export function getEnumValues<T extends Record<string, string | number>>(
+  enumType: T,
+): Array<T[keyof T]> {
   return (Object.values(enumType) as Array<T[keyof T]>).filter(
     (value) => typeof value === 'number' || typeof value === 'string',
   );
diff --git a/packages/ui/src/RContextMenu/index.tsx b/packages/ui/src/RContextMenu/index.tsx
index c41d14abf..12f627967 100644
--- a/packages/ui/src/RContextMenu/index.tsx
+++ b/packages/ui/src/RContextMenu/index.tsx
@@ -6,6 +6,11 @@ import RText from '../RText';
 type ContentProps = ComponentProps<(typeof ZeegoContextMenu)['Content']>;
 type ItemProps = ComponentProps<(typeof ZeegoContextMenu)['Item']>;
 
+interface MenuItems{
+  label: string,
+  onSelect: () => void,
+}
+
 const ContextMenu = {
   ...ZeegoContextMenu,
   Content: ZeegoContextMenu.create(
@@ -46,7 +51,7 @@ const ContextMenu = {
   ),
 };
 
-const RContextMenu = ({menuItems = [], menuName}) => {
+const RContextMenu = ({menuItems = [], menuName}: {menuItems: MenuItems[], menuName: React.ReactNode}) => {
   return (
     <ContextMenu.Root>
       <ContextMenu.Trigger>
diff --git a/packages/ui/src/form/components/Select.tsx b/packages/ui/src/form/components/Select.tsx
index c35e14bd7..9c6f4e6c4 100644
--- a/packages/ui/src/form/components/Select.tsx
+++ b/packages/ui/src/form/components/Select.tsx
@@ -1,11 +1,14 @@
 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>;
+}
 
 // TODO change the name to "Input" after handling tamagui all components export,
 // which is cause of a name collision
 export const FormSelect = (props: Props) => {
-  return <LmSelectRhf {...props} />;
-};
+  const { style, ...rest } = props;
+  return <LmSelectRhf {...rest} style={style} />;
+};
\ No newline at end of file

From c224ca0f4a76e01fde0b22736a381f22763ad84c Mon Sep 17 00:00:00 2001
From: Muhammad Hassan <mh7722178@gmail.com>
Date: Tue, 25 Jun 2024 21:14:26 +0500
Subject: [PATCH 100/257] All Type Error Fixed

---
 packages/app/screens/maps/index.tsx | 63 +++++++++++++----------------
 1 file changed, 28 insertions(+), 35 deletions(-)

diff --git a/packages/app/screens/maps/index.tsx b/packages/app/screens/maps/index.tsx
index daa2e23cf..d748cd0fe 100644
--- a/packages/app/screens/maps/index.tsx
+++ b/packages/app/screens/maps/index.tsx
@@ -42,38 +42,27 @@ export default function DownloadedMaps() {
   const [offlinePacks, setOfflinePacks] = useState<any[]>([]);
   const [showMap, setShowMap] = useState(false);
   const [pack, setPack] = useState<Pack | null>(null);
-  const [zoomLevel, setZoomLevel] = useState<number | null>(null);
+    const [zoomLevel, setZoomLevel] = useState<number | null>(null);
+
 
   let shape, zoomLevel;
+  if (pack != null) {
+    shape = pack && JSON.parse(JSON.parse(pack.metadata).shape);
+    const dw = Dimensions.get('screen').width;
+    const bounds = getShapeSourceBounds(shape);
+
+    zoomLevel = calculateZoomLevel(bounds[0].concat(bounds[1]), {
+      width: dw,
+      height: 360,
+    });
+  }
+
   useEffect(() => {
     offlineManager.getPacks().then((packs) => {
       setOfflinePacks(packs);
     });
   }, []);
 
-  useEffect(() => {
-    if (pack) {
-      const shape = JSON.parse(JSON.parse(pack.metadata).shape);
-      const dw = Dimensions.get('screen').width;
-      const bounds = getShapeSourceBounds(shape);
-      if (bounds) {
-        const calculatedZoomLevel = calculateZoomLevel(
-          bounds[0].concat(bounds[1]),
-          {
-            width: dw,
-            height: 360,
-          },
-        );
-        setZoomLevel(calculatedZoomLevel);
-      }
-    }
-  }, [pack]);
-
-  const handleMapPress = (selectedPack: any) => {
-    setPack(selectedPack.pack);
-    setShowMap(true);
-  };
-
   return (
     <View style={{ backgroundColor: currentTheme.colors.background }}>
       <Text
@@ -87,17 +76,19 @@ export default function DownloadedMaps() {
       >
         Downloaded Maps
       </Text>
-      {offlinePacks.length > 0 ? (
+      {offlinePacks ? (
         <View style={{ gap: 4 }}>
           {offlinePacks.map(({ pack }) => {
             const metadata = JSON.parse(pack.metadata);
             return (
               <TouchableOpacity
-                key={pack.id}
                 style={{
                   padding: 20,
                 }}
-                onPress={() => handleMapPress({ pack })}
+                onPress={() => {
+                  setPack(pack);
+                  setShowMap(true);
+                }}
               >
                 {pack && (
                   <Image
@@ -107,7 +98,9 @@ export default function DownloadedMaps() {
                       borderRadius: 10,
                     }}
                     source={{
-                      uri: `${api}/mapPreview/${pack.bounds[0]},${pack.bounds[1]},10,60,60/600x600`,
+                      uri: `${api}/mapPreview/${
+                        pack?.bounds[0] + ',' + pack?.bounds[1]
+                      },10,60,60/600x600`,
                     }}
                   />
                 )}
@@ -130,7 +123,7 @@ export default function DownloadedMaps() {
           <Text>loading...</Text>
         </RStack>
       )}
-      {showMap && pack && zoomLevel !== null && (
+      {showMap ? (
         <Modal visible={true}>
           <Mapbox.MapView
             style={{ flex: 1 }}
@@ -143,8 +136,8 @@ export default function DownloadedMaps() {
             <Mapbox.Camera
               zoomLevel={zoomLevel}
               centerCoordinate={[
-                (pack.bounds[0]?.[0] + pack.bounds[1]?.[0]) / 2,
-                (pack.bounds[0]?.[1] + pack.bounds[1]?.[1]) / 2,
+                (pack?.bounds[0]?.[0] + pack?.bounds[1]?.[0]) / 2 ?? 0,
+                (pack?.bounds[0]?.[1] + pack?.bounds[1]?.[1]) / 2 ?? 0,
               ]}
               animationMode={'flyTo'}
               animationDuration={2000}
@@ -170,10 +163,10 @@ export default function DownloadedMaps() {
             {/* // top location */}
             {shape?.features[0]?.geometry?.coordinates?.length > 0 && (
               <Mapbox.PointAnnotation
-                id={'circleCap'}
+                id={'cicleCap'}
                 coordinate={
-                  shape.features[0].geometry.coordinates[
-                    shape.features[0].geometry.coordinates.length - 1
+                  shape?.features[0]?.geometry?.coordinates[
+                    shape?.features[0]?.geometry?.coordinates?.length - 1
                   ]
                 }
               >
@@ -192,7 +185,7 @@ export default function DownloadedMaps() {
             downloadable={false}
           />
         </Modal>
-      )}
+      ) : null}
     </View>
   );
 }

From 26e4a2574121fc6ec593aeaa42010649e8874898 Mon Sep 17 00:00:00 2001
From: Tadjaur <tadjaur@tas-groups.com>
Date: Tue, 25 Jun 2024 18:31:59 +0100
Subject: [PATCH 101/257] Fix pack dropdown not showing on dev

---
 packages/app/components/pack/PackContainer.tsx | 17 ++++++++---------
 packages/app/screens/maps/index.tsx            | 18 ++++++++----------
 packages/ui/src/Dropdown.tsx                   |  6 ++----
 3 files changed, 18 insertions(+), 23 deletions(-)

diff --git a/packages/app/components/pack/PackContainer.tsx b/packages/app/components/pack/PackContainer.tsx
index 6a1867950..ab8700f2a 100644
--- a/packages/app/components/pack/PackContainer.tsx
+++ b/packages/app/components/pack/PackContainer.tsx
@@ -10,7 +10,6 @@ import { usePackId } from 'app/hooks/packs';
 import { createParam } from '@packrat/crosspath';
 import { DropdownComponent } from '@packrat/ui';
 
-
 export default function PackContainer({ isCreatingTrip = false }) {
   const [isAddItemModalOpen, setIsAddItemModalOpen] = useState(false);
   const [packIdParam, setPackIdParam] = usePackId();
@@ -81,14 +80,14 @@ export default function PackContainer({ isCreatingTrip = false }) {
             isAddItemModalOpen={isAddItemModalOpen}
             setIsAddItemModalOpen={setIsAddItemModalOpen}
           />
-          
-            <TableContainer
-              key={`table - ${currentPackId}`}
-              currentPack={currentPack}
-              selectedPack={currentPackId}
-              refetch={refetch}
-              setRefetch={setRefetch}
-            />
+
+          <TableContainer
+            key={`table - ${currentPackId}`}
+            currentPack={currentPack}
+            selectedPack={currentPackId}
+            refetch={refetch}
+            setRefetch={setRefetch}
+          />
         </>
       )}
     </View>
diff --git a/packages/app/screens/maps/index.tsx b/packages/app/screens/maps/index.tsx
index ec035daf0..18f34cfca 100644
--- a/packages/app/screens/maps/index.tsx
+++ b/packages/app/screens/maps/index.tsx
@@ -92,8 +92,9 @@ export default function DownloadedMaps() {
                       borderRadius: 10,
                     }}
                     source={{
-                      uri: `${api}/mapPreview/${pack?.bounds[0] + ',' + pack?.bounds[1]
-                        },10,60,60/600x600`,
+                      uri: `${api}/mapPreview/${
+                        pack?.bounds[0] + ',' + pack?.bounds[1]
+                      },10,60,60/600x600`,
                     }}
                   />
                 )}
@@ -145,10 +146,7 @@ export default function DownloadedMaps() {
               clusterMaxZoomLevel={14}
               style={{ zIndex: 1 }}
             >
-              <Mapbox.LineLayer
-                id="layer1"
-                style={styles.lineLayer}
-              />
+              <Mapbox.LineLayer id="layer1" style={styles.lineLayer} />
             </Mapbox.ShapeSource>
             {/* // top location */}
             {shape?.features[0]?.geometry?.coordinates?.length > 0 && (
@@ -156,7 +154,7 @@ export default function DownloadedMaps() {
                 id={'cicleCap'}
                 coordinate={
                   shape?.features[0]?.geometry?.coordinates[
-                  shape?.features[0]?.geometry?.coordinates?.length - 1
+                    shape?.features[0]?.geometry?.coordinates?.length - 1
                   ][0]
                 }
               >
@@ -181,11 +179,11 @@ export default function DownloadedMaps() {
 }
 
 const loadStyles = ({ currentTheme }) => {
-  return ({
+  return {
     lineLayer: {
       lineWidth: 4,
       lineOpacity: 1,
-      lineColor: currentTheme.colors.cardIconColor
+      lineColor: currentTheme.colors.cardIconColor,
     },
-  });
+  };
 };
diff --git a/packages/ui/src/Dropdown.tsx b/packages/ui/src/Dropdown.tsx
index a0d338b9b..d700ca445 100644
--- a/packages/ui/src/Dropdown.tsx
+++ b/packages/ui/src/Dropdown.tsx
@@ -123,7 +123,7 @@ import { View, Platform } from 'react-native';
 interface DropdownComponentProps {
   width?: string | number;
   style?: any;
-  placeholder?:any;
+  placeholder?: any;
   native?: boolean;
   zeego?: boolean;
   [x: string]: any; // for the rest of the props
@@ -133,7 +133,6 @@ export const DropdownComponent: React.FC<DropdownComponentProps> = ({
   width,
   style = {},
   placeholder,
-  native = false,
   zeego = false,
   ...props
 }) => {
@@ -148,7 +147,7 @@ export const DropdownComponent: React.FC<DropdownComponentProps> = ({
     >
       <RSelect
         placeholder={placeholder || 'Select'}
-        native={native}
+        native={!isWeb}
         zeego={zeego}
         {...props}
       />
@@ -157,4 +156,3 @@ export const DropdownComponent: React.FC<DropdownComponentProps> = ({
 };
 
 export default DropdownComponent;
-

From 55328eb6dfca6df0cbe578783ad7efd5c04eb408 Mon Sep 17 00:00:00 2001
From: pinocchio-life-like <icbr19fl@gmail.com>
Date: Wed, 26 Jun 2024 09:21:06 +0300
Subject: [PATCH 102/257] resolve

---
 package.json              |  3 ---
 packages/app/package.json |  4 ++--
 yarn.lock                 | 34 ++++++++++------------------------
 3 files changed, 12 insertions(+), 29 deletions(-)

diff --git a/package.json b/package.json
index 2264c3058..dfb15974d 100644
--- a/package.json
+++ b/package.json
@@ -96,13 +96,10 @@
     "eslint": "^8.56.0",
     "husky": "^8.0.0",
     "lint-staged": "^14.0.1",
-    "lucide-react-native": "^0.396.0",
     "npm-run-all": "^4.1.5",
     "patch-package": "^8.0.0",
     "postinstall-postinstall": "^2.1.0",
     "prettier": "^3.2.5",
-    "react-native-reanimated": "^3.12.0",
-    "react-native-safe-area-context": "^4.10.4",
     "typescript": "^5.3.3"
   },
   "lint-staged": {
diff --git a/packages/app/package.json b/packages/app/package.json
index 478c278ba..17f02eff2 100644
--- a/packages/app/package.json
+++ b/packages/app/package.json
@@ -118,8 +118,8 @@
     "react-native-google-places-autocomplete": "^2.5.1",
     "react-native-paper": "^5.10.6",
     "react-native-paper-dates": "^0.18.12",
-    "react-native-reanimated": "~3.6.2",
-    "react-native-safe-area-context": "4.8.2",
+    "react-native-reanimated": "^3.12.1",
+    "react-native-safe-area-context": "^4.10.5",
     "react-native-screens": "~3.29.0",
     "react-native-select-dropdown": "^3.3.4",
     "react-native-svg": "14.1.0",
diff --git a/yarn.lock b/yarn.lock
index 983316fdb..8980c350d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -12981,8 +12981,8 @@ __metadata:
     react-native-google-places-autocomplete: "npm:^2.5.1"
     react-native-paper: "npm:^5.10.6"
     react-native-paper-dates: "npm:^0.18.12"
-    react-native-reanimated: "npm:~3.6.2"
-    react-native-safe-area-context: "npm:4.8.2"
+    react-native-reanimated: "npm:^3.12.1"
+    react-native-safe-area-context: "npm:^4.10.5"
     react-native-screens: "npm:~3.29.0"
     react-native-select-dropdown: "npm:^3.3.4"
     react-native-svg: "npm:14.1.0"
@@ -25814,17 +25814,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lucide-react-native@npm:^0.396.0":
-  version: 0.396.0
-  resolution: "lucide-react-native@npm:0.396.0"
-  peerDependencies:
-    react: ^16.5.1 || ^17.0.0 || ^18.0.0
-    react-native: "*"
-    react-native-svg: ^12.0.0 || ^13.0.0 || ^14.0.0 || ^15.0.0
-  checksum: 10/b79bacfc258ad3e24832c9434e52527eba5c60c337e806e7d2ad98677bacb49a0ccfcefdef779ab3317dc71a6bf81ab815effa0bb22770e05d871c7635d7f5c2
-  languageName: node
-  linkType: hard
-
 "luxon@npm:^3.2.1":
   version: 3.4.4
   resolution: "luxon@npm:3.4.4"
@@ -28892,13 +28881,10 @@ __metadata:
     eslint: "npm:^8.56.0"
     husky: "npm:^8.0.0"
     lint-staged: "npm:^14.0.1"
-    lucide-react-native: "npm:^0.396.0"
     npm-run-all: "npm:^4.1.5"
     patch-package: "npm:^8.0.0"
     postinstall-postinstall: "npm:^2.1.0"
     prettier: "npm:^3.2.5"
-    react-native-reanimated: "npm:^3.12.0"
-    react-native-safe-area-context: "npm:^4.10.4"
     typescript: "npm:^5.3.3"
   languageName: unknown
   linkType: soft
@@ -30945,9 +30931,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-native-reanimated@npm:^3.12.0":
-  version: 3.12.0
-  resolution: "react-native-reanimated@npm:3.12.0"
+"react-native-reanimated@npm:^3.12.1":
+  version: 3.12.1
+  resolution: "react-native-reanimated@npm:3.12.1"
   dependencies:
     "@babel/plugin-transform-arrow-functions": "npm:^7.0.0-0"
     "@babel/plugin-transform-nullish-coalescing-operator": "npm:^7.0.0-0"
@@ -30961,7 +30947,7 @@ __metadata:
     "@babel/core": ^7.0.0-0
     react: "*"
     react-native: "*"
-  checksum: 10/415fb2bfa3ef2134760358c017ae4919727e648a3615cf85d87a95604f17a5ab15fdb25601e266349a3532b0b8b47d73de43b31b2a5dce7d4301997da3c8c739
+  checksum: 10/5cdf5012dfc495405870df0af22a11b454bed3bd53d3e94f5b08755f1e9367526cc7bc5b93ac19000bb74cce3d409325202c4be855241362e2e14913fba64257
   languageName: node
   linkType: hard
 
@@ -30996,13 +30982,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-native-safe-area-context@npm:^4.10.4":
-  version: 4.10.4
-  resolution: "react-native-safe-area-context@npm:4.10.4"
+"react-native-safe-area-context@npm:^4.10.5":
+  version: 4.10.5
+  resolution: "react-native-safe-area-context@npm:4.10.5"
   peerDependencies:
     react: "*"
     react-native: "*"
-  checksum: 10/314700a17ade765a5843ea78736d1b90e5f8de87abf2e3d46044f805a03e522f58d656d8fd9d61cb3d405d04d5ef64c64a6d5c8b4b0accaa2efeac089d4f93b7
+  checksum: 10/0bc7b4cd442e7a5deb0470f3b915ec2cf6b54337ea527fc7f5bde4f4dd062d420cb2b40fb886df96853f01951cfcb69a35fb4f6f47561cef5e195d9d68c54c3c
   languageName: node
   linkType: hard
 

From 4dd02ff659dcdf4885ae4bedd5086c9edae3d796 Mon Sep 17 00:00:00 2001
From: pinocchio-life-like <icbr19fl@gmail.com>
Date: Wed, 26 Jun 2024 09:23:21 +0300
Subject: [PATCH 103/257] update and resolved

---
 package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 4dbb3f0d0..afb8f0b02 100644
--- a/package.json
+++ b/package.json
@@ -55,7 +55,7 @@
     "next": "cd apps/next && yarn dev",
     "prebuild:expo": "cd apps/expo && yarn run prebuild:clean",
     "postinstall": "yarn build-ui && yarn build:validations && yarn build-crosspath && yarn setup:env && yarn fix:packages",
-    "preinstall:yarn": "npx only-allow yarn",
+    "preinstall": "npx only-allow yarn",
     "fix:packages": "yarn patch-package",
     "regen": "yarn install --refresh-lockfile",
     "setup:env": "npx ts-node .github/scripts/env.ts",
@@ -142,4 +142,4 @@
   "resolutions": {
     "@react-native/assets-registry": "0.74.81"
   }
-}
\ No newline at end of file
+}

From 0bb425a1875c7d4953b9cabcae8753cbf7609ac4 Mon Sep 17 00:00:00 2001
From: pinocchio-life-like <icbr19fl@gmail.com>
Date: Wed, 26 Jun 2024 09:46:58 +0300
Subject: [PATCH 104/257] update and resolved

---
 packages/app/components/pack/PackDetails.tsx | 10 +++++++---
 packages/app/package.json                    |  1 +
 yarn.lock                                    | 12 ++++++++++++
 3 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/packages/app/components/pack/PackDetails.tsx b/packages/app/components/pack/PackDetails.tsx
index 36aba9873..454f069be 100644
--- a/packages/app/components/pack/PackDetails.tsx
+++ b/packages/app/components/pack/PackDetails.tsx
@@ -65,7 +65,7 @@ export function PackDetails() {
   const isError = error !== null;
 
   if (isLoading) return <RText>Loading...</RText>;
-  const {xxs,xxl} = useResponsive();
+  const { xxs, xxl } = useResponsive();
 
   return (
     <>
@@ -113,7 +113,11 @@ export function PackDetails() {
                             ) : null;
                           case SECTION.SCORECARD:
                             return (
-                              <View style={{ minHeight: xxs ? 800 : xxl ? 100 : 800 }}>
+                              <View
+                                style={{
+                                  minHeight: xxs ? 800 : xxl ? 100 : 800,
+                                }}
+                              >
                                 <ScoreContainer
                                   type="pack"
                                   data={currentPack}
@@ -163,7 +167,7 @@ export function PackDetails() {
           trigger="Open Chat"
           type="pack"
         />
-      </Layout>
+      </View>
     </>
   );
 }
diff --git a/packages/app/package.json b/packages/app/package.json
index 17f02eff2..9534ce8a3 100644
--- a/packages/app/package.json
+++ b/packages/app/package.json
@@ -100,6 +100,7 @@
     "immer": "^10.0.3",
     "jotai": "^2.6.4",
     "lodash": "^4.17.21",
+    "lucide-react-native": "^0.396.0",
     "mapbox-gl": "1.13.3",
     "moti": "^0.27.2",
     "native-base": "^3.4.28",
diff --git a/yarn.lock b/yarn.lock
index 8980c350d..92130ce7f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -12962,6 +12962,7 @@ __metadata:
     immer: "npm:^10.0.3"
     jotai: "npm:^2.6.4"
     lodash: "npm:^4.17.21"
+    lucide-react-native: "npm:^0.396.0"
     mapbox-gl: "npm:1.13.3"
     moti: "npm:^0.27.2"
     native-base: "npm:^3.4.28"
@@ -25814,6 +25815,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lucide-react-native@npm:^0.396.0":
+  version: 0.396.0
+  resolution: "lucide-react-native@npm:0.396.0"
+  peerDependencies:
+    react: ^16.5.1 || ^17.0.0 || ^18.0.0
+    react-native: "*"
+    react-native-svg: ^12.0.0 || ^13.0.0 || ^14.0.0 || ^15.0.0
+  checksum: 10/b79bacfc258ad3e24832c9434e52527eba5c60c337e806e7d2ad98677bacb49a0ccfcefdef779ab3317dc71a6bf81ab815effa0bb22770e05d871c7635d7f5c2
+  languageName: node
+  linkType: hard
+
 "luxon@npm:^3.2.1":
   version: 3.4.4
   resolution: "luxon@npm:3.4.4"

From 113aff32bd04c7218446cbc970e69ba42128d7f7 Mon Sep 17 00:00:00 2001
From: Eliyas Asefa <103815611+pinocchio-life-like@users.noreply.github.com>
Date: Wed, 26 Jun 2024 09:50:43 +0300
Subject: [PATCH 105/257] Update package.json

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

diff --git a/package.json b/package.json
index afb8f0b02..ef1785a85 100644
--- a/package.json
+++ b/package.json
@@ -55,7 +55,7 @@
     "next": "cd apps/next && yarn dev",
     "prebuild:expo": "cd apps/expo && yarn run prebuild:clean",
     "postinstall": "yarn build-ui && yarn build:validations && yarn build-crosspath && yarn setup:env && yarn fix:packages",
-    "preinstall": "npx only-allow yarn",
+    "preinstall:yarn": "npx only-allow yarn",
     "fix:packages": "yarn patch-package",
     "regen": "yarn install --refresh-lockfile",
     "setup:env": "npx ts-node .github/scripts/env.ts",

From 4f73f0d885ad0a8664038dbf4f33b2507c9624f8 Mon Sep 17 00:00:00 2001
From: Anmol Verma <anmolverma2810@gmail.com>
Date: Wed, 26 Jun 2024 14:44:54 +0530
Subject: [PATCH 106/257] resize buttons

---
 packages/app/components/pack/AddPack.tsx      |  38 +++---
 packages/app/components/pack/PackDetails.tsx  | 127 ++++++++----------
 .../pack_table/TableHelperComponents.tsx      |  42 +++---
 packages/ui/src/tamagui.config.ts             |  16 +--
 4 files changed, 111 insertions(+), 112 deletions(-)

diff --git a/packages/app/components/pack/AddPack.tsx b/packages/app/components/pack/AddPack.tsx
index 70f7c625e..b7ffba622 100644
--- a/packages/app/components/pack/AddPack.tsx
+++ b/packages/app/components/pack/AddPack.tsx
@@ -1,26 +1,31 @@
-import React from 'react';
-import { Platform, View } from 'react-native';
 import {
-  RText,
+  BaseModal,
+  DropdownComponent,
   Form,
-  FormSelect as OriginalFormSelect,
   FormInput,
+  FormSelect as OriginalFormSelect,
+  RText,
   SubmitButton,
   useModal,
-  DropdownComponent,
 } from '@packrat/ui';
-import { BaseModal } from '@packrat/ui';
-import useTheme from '../../hooks/useTheme';
-import useCustomStyles from 'app/hooks/useCustomStyles';
+import { addPackSchema } from '@packrat/validations';
 import { useAddNewPack } from 'app/hooks/packs';
 import { useRouter } from 'app/hooks/router';
-import { addPackSchema } from '@packrat/validations';
-import { RContextMenu } from '@packrat/ui/src/RContextMenu';
+import useCustomStyles from 'app/hooks/useCustomStyles';
 import useResponsive from 'app/hooks/useResponsive';
+import React from 'react';
+import { View } from 'react-native';
+import useTheme from '../../hooks/useTheme';
 
 const FormSelect: any = OriginalFormSelect;
 
-export const AddPack = ({ isCreatingTrip = false, onSuccess }) => {
+export const AddPack = ({
+  isCreatingTrip = false,
+  onSuccess,
+}: {
+  isCreatingTrip: boolean;
+  onSuccess: any;
+}) => {
   // Hooks
   const { enableDarkMode, enableLightMode, isDark, isLight, currentTheme } =
     useTheme();
@@ -51,7 +56,6 @@ export const AddPack = ({ isCreatingTrip = false, onSuccess }) => {
       }
       if (!isCreatingTrip) {
         router.push(`/pack/${response.id}`);
-        return;
       }
 
       // setPackIdParam(response.id);
@@ -65,7 +69,7 @@ export const AddPack = ({ isCreatingTrip = false, onSuccess }) => {
       setIsPublic(false);
     }
   };
-  const { xxs, xxl } = useResponsive();
+  const { xxs, xxl, xs } = useResponsive();
 
   return (
     <View style={styles.container}>
@@ -85,7 +89,7 @@ export const AddPack = ({ isCreatingTrip = false, onSuccess }) => {
             data={packSelectOptions}
             onValueChange={handleonValueChange}
             placeholder="Is Public:"
-            width={xxs ? '50%' : xxl ? '11%' : '50%'}
+            width={xxs ? '50%' : xs ? '50%' : xxl ? '10%' : '50%'}
             native={true}
             zeego={true}
           />
@@ -103,7 +107,11 @@ export const AddPack = ({ isCreatingTrip = false, onSuccess }) => {
   );
 };
 
-export const AddPackContainer = ({ isCreatingTrip }) => {
+export const AddPackContainer = ({
+  isCreatingTrip,
+}: {
+  isCreatingTrip: boolean;
+}) => {
   return (
     <BaseModal title="Add Pack" trigger="Add Pack" footerComponent={undefined}>
       <PackModalContent isCreatingTrip={isCreatingTrip} />
diff --git a/packages/app/components/pack/PackDetails.tsx b/packages/app/components/pack/PackDetails.tsx
index 8832e9e3f..b8dbf765f 100644
--- a/packages/app/components/pack/PackDetails.tsx
+++ b/packages/app/components/pack/PackDetails.tsx
@@ -1,32 +1,21 @@
 import React, { useState } from 'react';
 
-import PackContainer from './PackContainer';
-import { DetailsHeader } from '../details/header';
-import { TableContainer } from '../pack_table/Table';
-import { RButton, RText } from '@packrat/ui';
-import { DetailsComponent } from '../details';
-import {
-  Dimensions,
-  Platform,
-  View,
-  FlatList,
-  TouchableOpacity,
-  ScrollView,
-} from 'react-native';
-import { theme } from '../../theme';
 import { CLIENT_URL } from '@packrat/config';
-import ScoreContainer from '../ScoreContainer';
-import ChatContainer from '../chat';
-import { AddItem } from '../item/AddItem';
-import { AddItemModal } from './AddItemModal';
-import useCustomStyles from 'app/hooks/useCustomStyles';
-import { useUserPacks } from 'app/hooks/packs/useUserPacks';
-import { usePackId } from 'app/hooks/packs/usePackId';
-import { useFetchSinglePack } from '../../hooks/packs';
+import { RText } from '@packrat/ui';
 import { useAuthUser } from 'app/auth/hooks';
-import { useIsAuthUserPack } from 'app/hooks/packs/useIsAuthUserPack';
 import Layout from 'app/components/layout/Layout';
+import { useIsAuthUserPack } from 'app/hooks/packs/useIsAuthUserPack';
+import { usePackId } from 'app/hooks/packs/usePackId';
+import { useUserPacks } from 'app/hooks/packs/useUserPacks';
+import useCustomStyles from 'app/hooks/useCustomStyles';
 import useResponsive from 'app/hooks/useResponsive';
+import { FlatList, View } from 'react-native';
+import { useFetchSinglePack } from '../../hooks/packs';
+import ScoreContainer from '../ScoreContainer';
+import ChatContainer from '../chat';
+import { DetailsComponent } from '../details';
+import { TableContainer } from '../pack_table/Table';
+import { AddItemModal } from './AddItemModal';
 
 const SECTION = {
   TABLE: 'TABLE',
@@ -45,6 +34,7 @@ export function PackDetails() {
   const userId = user?.id;
   const [isAddItemModalOpen, setIsAddItemModalOpen] = useState(false);
   const [refetch, setRefetch] = useState(false);
+  const { xxs, xxl } = useResponsive();
 
   const { data: userPacks, isLoading: isUserPacksLoading } =
     useUserPacks(userId);
@@ -65,7 +55,6 @@ export function PackDetails() {
   const isError = error !== null;
 
   if (isLoading) return <RText>Loading...</RText>;
-  const {xxs,xxl} = useResponsive();
 
   return (
     <>
@@ -88,52 +77,52 @@ export function PackDetails() {
                     contentContainerStyle={{ paddingBottom: 50 }}
                     keyExtractor={([key, val]) => val}
                     renderItem={({ item }) => {
-                      {
-                        switch (item[1]) {
-                          case SECTION.TABLE:
-                            return (
-                              <TableContainer
-                                currentPack={currentPack}
-                                copy={canCopy}
-                                hasPermissions={isAuthUserPack}
-                              />
-                            );
-                          case SECTION.CTA:
-                            return isAuthUserPack ? (
-                              <AddItemModal
-                                currentPackId={
-                                  currentPackId ? currentPackId : ''
-                                }
-                                currentPack={currentPack}
-                                isAddItemModalOpen={isAddItemModalOpen}
-                                setIsAddItemModalOpen={setIsAddItemModalOpen}
-                                // refetch={refetch}
-                                setRefetch={() => setRefetch((prev) => !prev)}
+                      switch (item[1]) {
+                        case SECTION.TABLE:
+                          return (
+                            <TableContainer
+                              currentPack={currentPack}
+                              copy={canCopy}
+                              hasPermissions={isAuthUserPack}
+                            />
+                          );
+                        case SECTION.CTA:
+                          return isAuthUserPack ? (
+                            <AddItemModal
+                              currentPackId={currentPackId || ''}
+                              currentPack={currentPack}
+                              isAddItemModalOpen={isAddItemModalOpen}
+                              setIsAddItemModalOpen={setIsAddItemModalOpen}
+                              // refetch={refetch}
+                              setRefetch={() => setRefetch((prev) => !prev)}
+                            />
+                          ) : null;
+                        case SECTION.SCORECARD:
+                          return (
+                            <View
+                              style={{
+                                minHeight: xxs ? 800 : xxl ? 100 : 800,
+                              }}
+                            >
+                              <ScoreContainer
+                                type="pack"
+                                data={currentPack}
+                                isOwner={isOwner}
                               />
-                            ) : null;
-                          case SECTION.SCORECARD:
-                            return (
-                              <View style={{ minHeight: xxs ? 800 : xxl ? 100 : 800 }}>
-                                <ScoreContainer
-                                  type="pack"
-                                  data={currentPack}
-                                  isOwner={isOwner}
-                                />
-                              </View>
-                            );
-                          // case SECTION.CHAT:
-                          //   return (
-                          //     <View style={styles.boxStyle}>
-                          //       <ChatContainer
-                          //         itemTypeId={currentPackId}
-                          //         title="Chat"
-                          //         trigger="Open Chat"
-                          //       />
-                          //     </View>
-                          //   );
-                          default:
-                            return null;
-                        }
+                            </View>
+                          );
+                        // case SECTION.CHAT:
+                        //   return (
+                        //     <View style={styles.boxStyle}>
+                        //       <ChatContainer
+                        //         itemTypeId={currentPackId}
+                        //         title="Chat"
+                        //         trigger="Open Chat"
+                        //       />
+                        //     </View>
+                        //   );
+                        default:
+                          return null;
                       }
                     }}
                   />
diff --git a/packages/app/components/pack_table/TableHelperComponents.tsx b/packages/app/components/pack_table/TableHelperComponents.tsx
index 80067a8d7..7ca7407a1 100644
--- a/packages/app/components/pack_table/TableHelperComponents.tsx
+++ b/packages/app/components/pack_table/TableHelperComponents.tsx
@@ -1,23 +1,19 @@
-import { MaterialIcons, Feather as OriginalFeather } from '@expo/vector-icons';
+import { Feather as OriginalFeather } from '@expo/vector-icons';
 import {
-  RButton,
+  DropdownComponent,
+  RText as OriginalRText,
   RCheckbox,
-  RSkeleton,
   RStack,
-  RText as OriginalRText,
-  RContextMenu,
-  RIconButton,
-  DropdownComponent,
 } from '@packrat/ui';
-import { Platform, View } from 'react-native';
-import { Row } from 'react-native-table-component';
+import { categoryIcons } from 'app/constants/pack/icons';
 import useCustomStyles from 'app/hooks/useCustomStyles';
+import useResponsive from 'app/hooks/useResponsive';
 import useTheme from 'app/hooks/useTheme';
-import { categoryIcons } from 'app/constants/pack/icons';
 import { formatNumber } from 'app/utils/formatNumber';
-import loadStyles from './packtable.style';
 import React from 'react';
-import useResponsive from 'app/hooks/useResponsive';
+import { View } from 'react-native';
+import { Row } from 'react-native-table-component';
+import loadStyles from './packtable.style';
 
 const RText: any = OriginalRText;
 const Feather: any = OriginalFeather;
@@ -60,7 +56,7 @@ const optionValues = [
 const TitleRow = ({ title }: TitleRowProps) => {
   const styles = useCustomStyles(loadStyles);
   const rowData = [
-    <RStack style={{ flexDirection: 'row', ...styles.mainTitle }}>
+    <RStack style={{ flexDirection: 'row', ...styles.mainTitle }} key="2">
       <RText fontSize="$2" style={styles.titleText}>
         {title}
       </RText>
@@ -78,7 +74,10 @@ const CategoryRow = ({ category }: CategoryRowProps) => {
   const styles = useCustomStyles(loadStyles);
 
   const rowData = [
-    <RStack style={{ flexDirection: 'row', gap: 8, ...styles.categoryRow }}>
+    <RStack
+      style={{ flexDirection: 'row', gap: 8, ...styles.categoryRow }}
+      key="1"
+    >
       <Feather
         name={categoryIcons[category]}
         size={16}
@@ -118,10 +117,13 @@ const IgnoreItemCheckbox = ({
 );
 
 const WeightUnitDropdown = ({ value, onChange }: WeightUnitDropdownProps) => {
-  const { xxs, xxl } = useResponsive();
+  const { xxs, xxl, xs } = useResponsive();
   return (
     <View
-      style={{ alignSelf: 'center', width: xxs ? '50%' : xxl ? '15%' : '50%' }}
+      style={{
+        alignSelf: 'center',
+        width: xxs ? '50%' : xs ? '50%' : xxl ? '15%' : '50%',
+      }}
     >
       <DropdownComponent
         value={value}
@@ -153,10 +155,10 @@ const ErrorMessage = ({ message }: ErrorMessageProps) => (
 );
 
 export {
-  WeightUnitDropdown,
-  TotalWeightBox,
-  IgnoreItemCheckbox,
-  ErrorMessage,
   CategoryRow,
+  ErrorMessage,
+  IgnoreItemCheckbox,
   TitleRow,
+  TotalWeightBox,
+  WeightUnitDropdown,
 };
diff --git a/packages/ui/src/tamagui.config.ts b/packages/ui/src/tamagui.config.ts
index 5351d6236..435fb6eae 100644
--- a/packages/ui/src/tamagui.config.ts
+++ b/packages/ui/src/tamagui.config.ts
@@ -1,9 +1,9 @@
-import { createTamagui } from 'tamagui';
+import { createAnimations } from '@tamagui/animations-react-native';
 import { createInterFont } from '@tamagui/font-inter';
-import { shorthands } from '@tamagui/shorthands';
-import { tokens, themes } from '@tamagui/themes/v2';
 import { createMedia } from '@tamagui/react-native-media-driver';
-import { createAnimations } from '@tamagui/animations-react-native';
+import { shorthands } from '@tamagui/shorthands';
+import { themes, tokens } from '@tamagui/themes/v2';
+import { createTamagui } from 'tamagui';
 
 // Define fonts using createInterFont
 const headingFont = createInterFont({
@@ -89,14 +89,14 @@ export const config = createTamagui({
   themes,
   tokens,
   media: createMedia({
-    xxxs:{maxWidth:390},
-    xxs:{maxWidth:398},
-    xs: { maxWidth: 660 },
+    xxxs: { maxWidth: 390 },
+    xxs: { maxWidth: 398 },
+    xs: { maxWidth: 450 },
     sm: { maxWidth: 800 },
     md: { maxWidth: 1020 },
     lg: { maxWidth: 1280 },
     xl: { maxWidth: 1420 },
-    xxl: { maxWidth: 1600 },
+    xxl: { maxWidth: 1900 },
     gtXs: { minWidth: 660 + 1 },
     gtSm: { minWidth: 800 + 1 },
     gtMd: { minWidth: 1020 + 1 },

From 4d63d4ad460d574fd3ec444dda58a643ada3e59e Mon Sep 17 00:00:00 2001
From: Anmol Verma <anmolverma2810@gmail.com>
Date: Wed, 26 Jun 2024 15:16:51 +0530
Subject: [PATCH 107/257] resize minheight

---
 packages/app/components/pack/PackDetails.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/app/components/pack/PackDetails.tsx b/packages/app/components/pack/PackDetails.tsx
index b8dbf765f..3ff1f4e62 100644
--- a/packages/app/components/pack/PackDetails.tsx
+++ b/packages/app/components/pack/PackDetails.tsx
@@ -34,7 +34,7 @@ export function PackDetails() {
   const userId = user?.id;
   const [isAddItemModalOpen, setIsAddItemModalOpen] = useState(false);
   const [refetch, setRefetch] = useState(false);
-  const { xxs, xxl } = useResponsive();
+  const { xxs, xxl, xs } = useResponsive();
 
   const { data: userPacks, isLoading: isUserPacksLoading } =
     useUserPacks(userId);
@@ -101,7 +101,13 @@ export function PackDetails() {
                           return (
                             <View
                               style={{
-                                minHeight: xxs ? 800 : xxl ? 100 : 800,
+                                minHeight: xxs
+                                  ? 800
+                                  : xs
+                                    ? 800
+                                    : xxl
+                                      ? 100
+                                      : 800,
                               }}
                             >
                               <ScoreContainer

From bd207adeefd3b0938d4ca4b50dae31244e08f3cb Mon Sep 17 00:00:00 2001
From: Anmol Verma <anmolverma2810@gmail.com>
Date: Wed, 26 Jun 2024 20:23:40 +0530
Subject: [PATCH 108/257] Add paginated bento table to itemstable

---
 .../app/components/itemtable/itemTable.tsx    |  83 ++----
 .../elements/tables/PaginatedSortedTable.tsx  | 239 ++++++++++++++++++
 .../ui/src/Bento/elements/tables/index.tsx    |   1 +
 3 files changed, 259 insertions(+), 64 deletions(-)
 create mode 100644 packages/ui/src/Bento/elements/tables/PaginatedSortedTable.tsx

diff --git a/packages/app/components/itemtable/itemTable.tsx b/packages/app/components/itemtable/itemTable.tsx
index bd277b0e8..6a610d0b4 100644
--- a/packages/app/components/itemtable/itemTable.tsx
+++ b/packages/app/components/itemtable/itemTable.tsx
@@ -1,14 +1,10 @@
 import React from 'react';
-import { ScrollView, View, Platform } from 'react-native';
+import { ScrollView, View } from 'react-native';
 import useResponsive from 'app/hooks/useResponsive';
 import Loader from '../Loader';
 import useTheme from '../../hooks/useTheme';
-import { useDeleteItem } from 'app/hooks/items';
 import Layout from 'app/components/layout/Layout';
-import { PaginationLimit } from '../paginationChooseLimit';
-import { RButton, RStack, RText } from '@packrat/ui';
-import { AntDesign } from '@expo/vector-icons';
-import { BasicTable } from '@packrat/ui/src/Bento/elements/tables';
+import { PaginatedSortedTable } from '@packrat/ui/src/Bento/elements/tables';
 
 interface ItemType {
   global: string;
@@ -20,9 +16,9 @@ interface ItemType {
   id: string;
   type: string;
   ownerId: string;
-  categoryId:string;
-  updatedAt:any;
-  createdAt:any;
+  categoryId: string;
+  updatedAt: any;
+  createdAt: any;
 }
 
 interface ItemsTableProps {
@@ -58,20 +54,19 @@ export const ItemsTable = ({
 }: ItemsTableProps) => {
   const { xs, xxxs } = useResponsive();
   const { isDark } = useTheme();
-  const { handleDeleteItem } = useDeleteItem();
 
-  const handleNextPage = () => {
-    setPage(page + 1);
-  };
-
-  const handlePreviousPage = () => {
-    setPage(page - 1);
-  };
-
-const filteredData = data.map(item => {
-  const { id, categoryId, createdAt, updatedAt, ownerId,global, ...filteredItem } = item;
-  return filteredItem;
-});
+  const filteredData = data.map((item) => {
+    const {
+      id,
+      categoryId,
+      createdAt,
+      updatedAt,
+      ownerId,
+      global,
+      ...filteredItem
+    } = item;
+    return filteredItem;
+  });
 
   return (
     <Layout>
@@ -82,7 +77,7 @@ const filteredData = data.map(item => {
             flex: 1,
             paddingTop: 30,
             marginTop: 20,
-            marginBottom:20,
+            marginBottom: 20,
             backgroundColor: isDark ? '#1A1A1D' : 'white',
             width: xxxs ? '100vw' : xs ? '80vw' : '60vw',
           }}
@@ -90,7 +85,7 @@ const filteredData = data.map(item => {
           {isLoading ? (
             <Loader />
           ) : (
-            <BasicTable
+            <PaginatedSortedTable
               groupedData={filteredData}
               handleCheckboxChange={handleCheckboxChange}
               onDelete={onDelete}
@@ -100,46 +95,6 @@ const filteredData = data.map(item => {
               setRefetch={setRefetch}
             />
           )}
-
-          <View
-            style={{
-              display: 'flex',
-              flexDirection: 'row',
-              justifyContent: 'center',
-              marginTop: 20,
-            }}
-          >
-            <RButton
-              style={{
-                width: 50,
-                backgroundColor: page < 2 ? 'gray' : '#0284c7',
-                borderRadius: 5,
-                borderColor: page < 2 ? 'gray' : '#0284c7',
-                borderWidth: 1,
-                borderStyle: 'solid',
-              }}
-              disabled={page < 2}
-              onPress={handlePreviousPage}
-            >
-              <AntDesign name="left" size={16} color="white" />
-            </RButton>
-            <RButton
-              style={{
-                marginLeft: 10,
-                width: 50,
-                backgroundColor: page === totalPages ? 'gray' : '#0284c7',
-                borderRadius: 5,
-                borderColor: page === totalPages ? 'gray' : '#0284c7',
-                borderWidth: 1,
-                borderStyle: 'solid',
-              }}
-              disabled={page === totalPages}
-              onPress={handleNextPage}
-            >
-              <AntDesign name="right" size={16} color="white" />
-            </RButton>
-          </View>
-          <PaginationLimit limit={limit} setLimit={setLimit} />
         </View>
       </ScrollView>
     </Layout>
diff --git a/packages/ui/src/Bento/elements/tables/PaginatedSortedTable.tsx b/packages/ui/src/Bento/elements/tables/PaginatedSortedTable.tsx
new file mode 100644
index 000000000..c0253496e
--- /dev/null
+++ b/packages/ui/src/Bento/elements/tables/PaginatedSortedTable.tsx
@@ -0,0 +1,239 @@
+import React, { useState, useMemo } from 'react';
+import {
+  createColumnHelper,
+  flexRender,
+  getCoreRowModel,
+  useReactTable,
+  getSortedRowModel,
+  getPaginationRowModel,
+} from '@tanstack/react-table';
+import { useMedia } from 'tamagui';
+import { Text, View, Button, getTokenValue } from 'tamagui';
+import { Table } from './common/tableParts';
+
+const ITEMS_PER_PAGE = 10;
+
+interface Category {
+  id: string;
+  name: string;
+}
+
+interface Item {
+  id: string;
+  name: string;
+  ownerId: string;
+  weight: number;
+  quantity: number;
+  unit: string;
+  category: Category;
+}
+
+interface GroupedData {
+  [key: string]: Item[];
+}
+
+interface PaginatedSortedTableProps {
+  groupedData: GroupedData;
+  handleCheckboxChange: (itemId: string) => void;
+  onDelete: (params: { itemId: string; packId: string }) => void;
+  hasPermissions: boolean;
+  currentPack: any;
+  refetch: () => void;
+  setRefetch: () => void;
+}
+
+export function PaginatedSortedTable({
+  groupedData,
+  onDelete,
+  hasPermissions,
+  currentPack,
+  refetch,
+  setRefetch,
+}: PaginatedSortedTableProps) {
+  const columnHelper = createColumnHelper<Item>();
+
+  const columns = [
+    columnHelper.accessor('name', {
+      cell: (info) => info.getValue(),
+      header: () => 'Name',
+      footer: (info) => info.column.id,
+    }),
+    columnHelper.accessor('weight', {
+      cell: (info) => info.getValue(),
+      header: () => 'Weight',
+      footer: (info) => info.column.id,
+    }),
+    columnHelper.accessor('quantity', {
+      header: () => 'Quantity',
+      cell: (info) => info.renderValue(),
+      footer: (info) => info.column.id,
+    }),
+    columnHelper.accessor('category.name', {
+      header: () => 'Category',
+      cell: (info) => info.getValue(),
+      footer: (info) => 'category',
+    }),
+  ];
+
+  const data = useMemo(() => Object.values(groupedData).flat(), [groupedData]);
+
+  const table = useReactTable({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    initialState: { pagination: { pageSize: ITEMS_PER_PAGE } },
+  });
+
+  const { sm } = useMedia();
+
+  if (sm) {
+    return (
+      <View
+        style={{
+          alignItems: 'center',
+          justifyContent: 'center',
+          width: '100%',
+          marginBottom: 30,
+        }}
+      >
+        {table.getRowModel().rows.map((row) => (
+          <View
+            key={row.id}
+            borderRadius="$4"
+            borderWidth="$1"
+            borderColor="$borderColor"
+            flex={1}
+            alignSelf="stretch"
+            gap="$3"
+          >
+            <View gap="$3" mx="$3" my="$3">
+              {row.getVisibleCells().map((cell) => {
+                const value = cell.getContext().getValue();
+                return (
+                  <View fd="row" justifyContent="space-between" key={cell.id}>
+                    <Text>
+                      {cell.column.id.charAt(0).toUpperCase() +
+                        cell.column.id.slice(1)}
+                    </Text>
+                    <Text color="$gray10">{value}</Text>
+                  </View>
+                );
+              })}
+            </View>
+          </View>
+        ))}
+        <View
+          style={{
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            marginTop: 10,
+          }}
+        >
+          <Button
+            onPress={() => table.previousPage()}
+            disabled={!table.getCanPreviousPage()}
+          >
+            Previous
+          </Button>
+          <Text
+            style={{
+              flexDirection: 'row',
+              alignSelf: 'center',
+              fontSize: 15,
+            }}
+          >
+            Page {table.getState().pagination.pageIndex + 1} of{' '}
+            {table.getPageCount()}
+          </Text>
+          <Button
+            onPress={() => table.nextPage()}
+            disabled={!table.getCanNextPage()}
+          >
+            Next
+          </Button>
+        </View>
+      </View>
+    );
+  }
+
+  return (
+    <View
+      style={{ alignItems: 'center', justifyContent: 'center', width: '100%' }}
+    >
+      <Table
+        alignCells={{ x: 'center', y: 'center' }}
+        alignHeaderCells={{ y: 'center', x: 'center' }}
+        cellWidth="$18"
+        cellHeight="$5"
+        borderWidth={0.5}
+        maxWidth={getTokenValue('$25') * columns.length}
+      >
+        <Table.Head>
+          {table.getHeaderGroups().map((headerGroup) => (
+            <Table.Row
+              backgrounded
+              backgroundColor="$color2"
+              key={headerGroup.id}
+            >
+              {headerGroup.headers.map((header) => (
+                <Table.HeaderCell key={header.id}>
+                  <Text onClick={() => header.column.getToggleSortingHandler()}>
+                    {flexRender(
+                      header.column.columnDef.header,
+                      header.getContext(),
+                    )}
+                  </Text>
+                </Table.HeaderCell>
+              ))}
+            </Table.Row>
+          ))}
+        </Table.Head>
+        <Table.Body>
+          {table.getRowModel().rows.map((row) => (
+            <Table.Row key={row.id}>
+              {row.getVisibleCells().map((cell) => (
+                <Table.Cell key={cell.id}>
+                  <Text color="$gray11">
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </Text>
+                </Table.Cell>
+              ))}
+            </Table.Row>
+          ))}
+        </Table.Body>
+      </Table>
+      <View
+        style={{
+          flexDirection: 'row',
+          justifyContent: 'space-between',
+          marginTop: 10,
+        }}
+      >
+        <Button
+          onPress={() => table.previousPage()}
+          disabled={!table.getCanPreviousPage()}
+        >
+          Previous
+        </Button>
+        <Text
+          style={{
+            flexDirection: 'row',
+            alignSelf: 'center',
+            fontSize: 15,
+          }}
+        >
+          Page {table.getState().pagination.pageIndex + 1} of{' '}
+          {table.getPageCount()}
+        </Text>
+        <Button
+          onPress={() => table.nextPage()}
+          disabled={!table.getCanNextPage()}
+        >
+          Next
+        </Button>
+      </View>
+    </View>
+  );
+}
diff --git a/packages/ui/src/Bento/elements/tables/index.tsx b/packages/ui/src/Bento/elements/tables/index.tsx
index 02055e496..6a1db47eb 100644
--- a/packages/ui/src/Bento/elements/tables/index.tsx
+++ b/packages/ui/src/Bento/elements/tables/index.tsx
@@ -1,3 +1,4 @@
 export * from './Basic';
 export * from './SortableTable';
 export * from './UsersTable';
+export * from './PaginatedSortedTable';

From 3f445d4d4038ca1555a68e75c7ae112dbad75c04 Mon Sep 17 00:00:00 2001
From: Taron <taron.aleksanyan.20@gmail.com>
Date: Wed, 26 Jun 2024 23:25:28 +0400
Subject: [PATCH 109/257] revert api url

---
 packages/app/constants/api.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/app/constants/api.ts b/packages/app/constants/api.ts
index dec093934..6009103f5 100644
--- a/packages/app/constants/api.ts
+++ b/packages/app/constants/api.ts
@@ -6,4 +6,4 @@ import { API_URL } from '@packrat/config';
  * format: "{scheme}://{serverhost}:{port}/api"
  * e.g: "http://localhost:4200/api"
  */
-export const api = 'https://811d-78-109-68-224.ngrok-free.app/api';
\ No newline at end of file
+export const api = API_URL;
\ No newline at end of file

From 4d9f03f6be1e9a2c09630d27fa256cbf32e906a7 Mon Sep 17 00:00:00 2001
From: Muhammad Hassan <mh7722178@gmail.com>
Date: Thu, 27 Jun 2024 11:54:30 +0500
Subject: [PATCH 110/257] link in PackCardHeader made optional

---
 .../app/components/card/CustomCardHeader.tsx    | 17 ++++++++++++++++-
 .../card/PackCardHeader/PackCardHeader.tsx      |  1 -
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/packages/app/components/card/CustomCardHeader.tsx b/packages/app/components/card/CustomCardHeader.tsx
index eb4deb688..b90e23e99 100644
--- a/packages/app/components/card/CustomCardHeader.tsx
+++ b/packages/app/components/card/CustomCardHeader.tsx
@@ -8,8 +8,23 @@ import { useAuthUser } from 'app/auth/hooks';
 import useTheme from '../../hooks/useTheme';
 import { CopyPackModal } from 'app/components/pack/CopyPackModal';
 
+interface CustomCardHeaderProps {
+  data: {
+    owner_id: string | { id: string };
+    owners?: Array<{ name: string }>;
+  };
+  title: string | JSX.Element;
+  link?: string;
+  actionsComponent: JSX.Element;
+}
+
 const RText: any = OriginalRText;
-export const CustomCardHeader = ({ data, title, link, actionsComponent }) => {
+export const CustomCardHeader = ({
+  data,
+  title,
+  link,
+  actionsComponent,
+}: CustomCardHeaderProps) => {
   const { isCopied, handleCopyLink } = useCopyClipboard(link);
   const user = useAuthUser();
   const { isDark } = useTheme();
diff --git a/packages/app/components/card/PackCardHeader/PackCardHeader.tsx b/packages/app/components/card/PackCardHeader/PackCardHeader.tsx
index 42e644378..573406fc2 100644
--- a/packages/app/components/card/PackCardHeader/PackCardHeader.tsx
+++ b/packages/app/components/card/PackCardHeader/PackCardHeader.tsx
@@ -74,7 +74,6 @@ export const PackCardHeader = ({ data, title }: PackCardHeaderProps) => {
   return (
     <>
       <CustomCardHeader
-        link={''}
         data={data}
         title={
           <RStack

From 7eecc149d2c7f6109e2af7299818212b9add80a4 Mon Sep 17 00:00:00 2001
From: Muhammad Hassan <mh7722178@gmail.com>
Date: Thu, 27 Jun 2024 16:07:18 +0500
Subject: [PATCH 111/257] Build Fix

---
 package.json                                  |   2 +-
 .../card/PackCardHeader/PackCardHeader.tsx    |   6 +-
 packages/app/components/pack/PackDetails.tsx  |  50 ++++----
 .../pack_table/TableHelperComponents.tsx      |   2 +-
 packages/ui/src/ZDropdown/index.tsx           | 121 +++++++-----------
 5 files changed, 79 insertions(+), 102 deletions(-)

diff --git a/package.json b/package.json
index 4dbb3f0d0..ef1785a85 100644
--- a/package.json
+++ b/package.json
@@ -142,4 +142,4 @@
   "resolutions": {
     "@react-native/assets-registry": "0.74.81"
   }
-}
\ No newline at end of file
+}
diff --git a/packages/app/components/card/PackCardHeader/PackCardHeader.tsx b/packages/app/components/card/PackCardHeader/PackCardHeader.tsx
index 8850d0d13..d4bd1b65d 100644
--- a/packages/app/components/card/PackCardHeader/PackCardHeader.tsx
+++ b/packages/app/components/card/PackCardHeader/PackCardHeader.tsx
@@ -8,6 +8,10 @@ import {
   RIconButton,
   EditableText,
   DropdownComponent,
+  ThreeDotsMenu,
+  YStack,
+  RButton,
+  RContextMenu,
   
 } from '@packrat/ui';
 import { useFetchSinglePack, useDeletePack } from 'app/hooks/packs';
@@ -16,7 +20,7 @@ import { useRouter } from 'app/hooks/router';
 import { useEditPack } from 'app/hooks/packs/useEditPack';
 import { Dimensions, Platform } from 'react-native';
 import { CopyPackModal } from '../../pack/CopyPackModal';
-import { Platform, View } from 'react-native';
+import { View } from 'react-native';
 
 interface MenuItems {
   label: string;
diff --git a/packages/app/components/pack/PackDetails.tsx b/packages/app/components/pack/PackDetails.tsx
index 7ba1edca0..5f65cca34 100644
--- a/packages/app/components/pack/PackDetails.tsx
+++ b/packages/app/components/pack/PackDetails.tsx
@@ -26,6 +26,7 @@ import { useFetchSinglePack } from '../../hooks/packs';
 import { useAuthUser } from 'app/auth/hooks';
 import { useIsAuthUserPack } from 'app/hooks/packs/useIsAuthUserPack';
 import Layout from 'app/components/layout/Layout';
+import useResponsive from 'app/hooks/useResponsive';
 
 const SECTION = {
   TABLE: 'TABLE',
@@ -64,27 +65,24 @@ export function PackDetails() {
   const isError = error !== null;
 
   if (isLoading) return <RText>Loading...</RText>;
+  const {xxs,xxl} = useResponsive();
 
   return (
     <>
       <Layout>
         {!isError && (
           <View
-            style={[
-              styles.mainContainer,
-              Platform.OS == 'web'
-                ? { minHeight: '100vh', width: '100%' }
-                : { minHeight: Dimensions.get('screen').height },
-            ]}
+            style={{
+              minHeight: '100%',
+            }}
           >
-
             <DetailsComponent
               type="pack"
               data={currentPack}
               isLoading={isLoading}
               error={error as any}
               additionalComps={
-                <View>
+                <>
                   <FlatList
                     data={Object.entries(SECTION)}
                     contentContainerStyle={{ paddingBottom: 50 }}
@@ -108,30 +106,38 @@ export function PackDetails() {
                                 }
                                 currentPack={currentPack}
                                 isAddItemModalOpen={isAddItemModalOpen}
-                                setIsAddItemModalOpen={
-                                  setIsAddItemModalOpen
-                                }
+                                setIsAddItemModalOpen={setIsAddItemModalOpen}
                                 // refetch={refetch}
-                                setRefetch={() =>
-                                  setRefetch((prev) => !prev)
-                                }
+                                setRefetch={() => setRefetch((prev) => !prev)}
                               />
                             ) : null;
                           case SECTION.SCORECARD:
                             return (
-                              <ScoreContainer
-                                type="pack"
-                                data={currentPack}
-                                isOwner={isOwner ?? false}
-                              />
+                              <View style={{ minHeight: xxs ? 800 : xxl ? 100 : 800 }}>
+                                <ScoreContainer
+                                  type="pack"
+                                  data={currentPack}
+                                  isOwner={isOwner}
+                                />
+                              </View>
                             );
+                          // case SECTION.CHAT:
+                          //   return (
+                          //     <View style={styles.boxStyle}>
+                          //       <ChatContainer
+                          //         itemTypeId={currentPackId}
+                          //         title="Chat"
+                          //         trigger="Open Chat"
+                          //       />
+                          //     </View>
+                          //   );
                           default:
                             return null;
                         }
                       }
                     }}
                   />
-                </View>
+                </>
               }
               link={link}
             />
@@ -152,7 +158,7 @@ export function PackDetails() {
         }}
       >
         <ChatContainer
-          itemTypeId={currentPackId ? currentPackId : null}
+          itemTypeId={currentPackId}
           title="Chat"
           trigger="Open Chat"
         />
@@ -181,4 +187,4 @@ const loadStyles = (theme) => {
       minHeight: 400,
     },
   };
-};
+};
\ No newline at end of file
diff --git a/packages/app/components/pack_table/TableHelperComponents.tsx b/packages/app/components/pack_table/TableHelperComponents.tsx
index 39ebde8e0..c60e207aa 100644
--- a/packages/app/components/pack_table/TableHelperComponents.tsx
+++ b/packages/app/components/pack_table/TableHelperComponents.tsx
@@ -7,12 +7,12 @@ import {
   RText as OriginalRText,
   RContextMenu,
   RIconButton,
+  DropdownComponent
 } from '@packrat/ui';
 import { Platform, View } from 'react-native';
 import { Row } from 'react-native-table-component';
 import useCustomStyles from 'app/hooks/useCustomStyles';
 import useTheme from 'app/hooks/useTheme';
-import DropdownComponent from '../Dropdown';
 import { categoryIcons } from 'app/constants/pack/icons';
 import { formatNumber } from 'app/utils/formatNumber';
 import loadStyles from './packtable.style';
diff --git a/packages/ui/src/ZDropdown/index.tsx b/packages/ui/src/ZDropdown/index.tsx
index 66ae24451..815048599 100644
--- a/packages/ui/src/ZDropdown/index.tsx
+++ b/packages/ui/src/ZDropdown/index.tsx
@@ -1,81 +1,48 @@
-import * as DropdownMenu from 'zeego/dropdown-menu';
-import { styled } from 'tamagui';
-import { MaterialIcons } from '@expo/vector-icons';
-import { ViewProps } from 'react-native';
-
-import RIconButton from '../RIconButton';
-
-type DropDownItems = {
-  label: string;
-  onSelect: () => void;
-};
-
-interface ZDropDownItems{
-  dropdownItems : DropDownItems[]
-}
-
-interface ExtendedDropdownMenuProps extends ViewProps {
-  css?: string;
-}
-
-interface ExtendedDropdownMenuItemProps extends ViewProps {
-  css?: string;
-  onSelect?: () => void;
-}
-
-const ExtendedDropdownMenuContent =
-  DropdownMenu.Content as React.ComponentType<ExtendedDropdownMenuProps>;
-
-const CustomContent = styled(ExtendedDropdownMenuContent, {
-  backgroundColor: 'white',
-  minWidth: '160px',
-  shadowColor: '#000',
-  borderRadius: '8px',
-  shadowOffset: {
-    width: 0,
-    height: ' 8px',
-  },
-  shadowOpacity: 0.2,
-  shadowRadius: '16px',
-  padding: '8px',
-});
-
-const ExtendedDropdownMenuItem =
-  DropdownMenu.Item as React.ComponentType<ExtendedDropdownMenuItemProps>;
-
-const CustomItem = styled(ExtendedDropdownMenuItem, {
-  padding: 10,
-  flexDirection: 'row',
-  alignItems: 'center',
-  hover: {
-    backgroundColor: 'gray',
-  },
-});
-
-const DropdownMenuItem = DropdownMenu.create(CustomItem, 'Item');
-
-export const ZDropdownWeb = ({ dropdownItems = [] } : ZDropDownItems) => {
-  return (
-    <DropdownMenu.Root>
-      <DropdownMenu.Trigger>
-        <RIconButton
-          backgroundColor="transparent"
-          icon={<MaterialIcons name="more-horiz" size={25} />}
-          style={{ padding: 0 }}
-        />
-      </DropdownMenu.Trigger>
-      <CustomContent>
-        {dropdownItems.map(({ label, onSelect = () => {} }) => (
-          <CustomItem key={label} onSelect={onSelect}>
-            <DropdownMenu.ItemTitle>{label}</DropdownMenu.ItemTitle>
-          </CustomItem>
-        ))}
-      </CustomContent>
-    </DropdownMenu.Root>
-  );
+import React from 'react';
+import { ComponentProps } from 'react';
+import * as ZeegoDropdownMenu from 'zeego/dropdown-menu';
+import RButton from '../RButton';
+
+type ContentProps = ComponentProps<typeof ZeegoDropdownMenu.Content>;
+type ItemProps = ComponentProps<typeof ZeegoDropdownMenu.Item>;
+
+const DropdownMenu = {
+  ...ZeegoDropdownMenu,
+  Content: ZeegoDropdownMenu.create(
+    (props: ContentProps) => (
+      <ZeegoDropdownMenu.Content
+        {...props}
+        style={{
+          backgroundColor: 'white',
+          padding: 10,
+          borderRadius: 8,
+          gap: 10,
+          boxShadow: '0px 0px 16px -8px #484848',
+        }}
+      />
+    ),
+    'Content'
+  ),
+  Item: ZeegoDropdownMenu.create(
+    (props: ItemProps) => (
+      <ZeegoDropdownMenu.Item
+        {...props}
+        style={{
+          padding: 10,
+          backgroundColor: 'white',
+          flexDirection: 'row',
+          alignItems: 'center',
+          hoverStyle: {
+            backgroundColor: 'gray',
+          },
+        }}
+      />
+    ),
+    'Item'
+  ),
 };
 
-export const ZDropdownNative = ({ dropdownItems = [] } : ZDropDownItems) => {
+const RDropdownMenu = ({ menuItems = [], menuName }) => {
   return (
     <DropdownMenu.Root>
       <DropdownMenu.Trigger>
@@ -92,4 +59,4 @@ export const ZDropdownNative = ({ dropdownItems = [] } : ZDropDownItems) => {
   );
 };
 
-export { DropdownMenu, RDropdownMenu };
+export { DropdownMenu, RDropdownMenu };
\ No newline at end of file

From 2f0c372ae341eff27ed955a8a3213996e0a467b3 Mon Sep 17 00:00:00 2001
From: Muhammad Hassan <mh7722178@gmail.com>
Date: Thu, 27 Jun 2024 17:16:01 +0500
Subject: [PATCH 112/257] Requested Changes Fixed

---
 .../(drawer)/(tabs)/(stack)/profile/[id].tsx  |  4 ++-
 packages/app/components/card/CustomCard.tsx   |  4 ++-
 packages/app/components/carousel/index.tsx    | 10 ++++---
 packages/app/components/chat/index.tsx        |  2 +-
 packages/app/hooks/chat/useChat.ts            |  9 +++----
 packages/app/screens/user/Settings.tsx        |  4 +--
 .../ui/src/Bento/elements/tables/Basic.tsx    | 27 ++++++++++---------
 7 files changed, 32 insertions(+), 28 deletions(-)

diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/profile/[id].tsx b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/profile/[id].tsx
index 1ab91f29c..56cc0d80c 100644
--- a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/profile/[id].tsx
+++ b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/profile/[id].tsx
@@ -7,12 +7,14 @@ import { useProfileId } from 'app/hooks/user';
 
 const Profile = () => {
   const [id] = useProfileId();
+  const { user } = useProfile(id);
+  const userRealName = user?.name ?? null;
 
   return (
     <>
       {Platform.OS === 'web' && (
         <Head>
-          <title>{`${id}'s Profile`}</title>
+          <title>{`${userRealName}'s Profile`}</title>
           <meta name="description" content={`${id}'s Profile`} />
         </Head>
       )}
diff --git a/packages/app/components/card/CustomCard.tsx b/packages/app/components/card/CustomCard.tsx
index df1eddbac..f55c72de6 100644
--- a/packages/app/components/card/CustomCard.tsx
+++ b/packages/app/components/card/CustomCard.tsx
@@ -39,6 +39,8 @@ export const CustomCard = ({
 
   const isWeb = Platform.OS === 'web';
 
+  console.log('owner_idowner_idowner_id', owner_id)
+
   return (
     <View
       style={[
@@ -122,4 +124,4 @@ const loadStyles = (theme) => {
       alignSelf: 'center',
     },
   };
-};
+};
\ No newline at end of file
diff --git a/packages/app/components/carousel/index.tsx b/packages/app/components/carousel/index.tsx
index cf60dd9d0..96279d737 100644
--- a/packages/app/components/carousel/index.tsx
+++ b/packages/app/components/carousel/index.tsx
@@ -19,7 +19,7 @@ const { height, width } = Dimensions.get('window');
 
 const Carousel: React.FC<CarouselProps> = ({
   children = [],
-  itemWidth ,
+  itemWidth,
   iconColor,
 }) => {
   const scrollViewRef = useRef<ScrollView>(null);
@@ -28,8 +28,10 @@ const Carousel: React.FC<CarouselProps> = ({
 
   const handleScroll = (event: { nativeEvent: NativeScrollEvent }) => {
     const contentOffset = event.nativeEvent.contentOffset;
-    const newIndex = itemWidth ?  Math.round(contentOffset.x / itemWidth) : 0;
-    setCurrentIndex(newIndex);
+    if (itemWidth) {
+      const newIndex = Math.round(contentOffset.x / itemWidth);
+      setCurrentIndex(newIndex);
+    }
   };
 
   const scrollToIndex = (index: number) => {
@@ -51,7 +53,7 @@ const Carousel: React.FC<CarouselProps> = ({
         justifyContent: 'center',
         alignItems: 'center',
         flexDirection: 'row',
-        flex: 1
+        flex: 1,
       }}
     >
       <ScrollButton
diff --git a/packages/app/components/chat/index.tsx b/packages/app/components/chat/index.tsx
index af9e60a8a..07cd306b4 100644
--- a/packages/app/components/chat/index.tsx
+++ b/packages/app/components/chat/index.tsx
@@ -26,7 +26,7 @@ interface ChatComponentProps {
 interface ChatModalTriggerProps {
   title: string;
   trigger: string;
-  itemTypeId?: string | null;
+  itemTypeId: string | null;
 }
 
 const ChatComponent: React.FC<ChatComponentProps> = ({
diff --git a/packages/app/hooks/chat/useChat.ts b/packages/app/hooks/chat/useChat.ts
index 84c462750..6107bf7f5 100644
--- a/packages/app/hooks/chat/useChat.ts
+++ b/packages/app/hooks/chat/useChat.ts
@@ -3,11 +3,11 @@ import { useGetUserChats } from './useGetUserChats';
 import { useGetAIResponse } from './useGetAIResponse';
 import { useAuthUser } from 'app/auth/hooks';
 
-interface useChatParams{
+interface useChatParams {
   itemTypeId: string | null;
 }
 
-export const useChat = ({itemTypeId = null} : useChatParams) => {
+export const useChat = ({ itemTypeId }: useChatParams) => {
   const user = useAuthUser();
   const [typeId, setTypeId] = useState(itemTypeId);
   const [isLoading, setIsLoading] = useState(false);
@@ -15,10 +15,7 @@ export const useChat = ({itemTypeId = null} : useChatParams) => {
   const [userInput, setUserInput] = useState('');
   // const [parsedMessages, setParsedMessages] = useState([]);
 
-  const { data: chatsData, refetch } = useGetUserChats(
-    user?.id,
-    typeId,
-  );
+  const { data: chatsData, refetch } = useGetUserChats(user.id, typeId);
 
   const { getAIResponse } = useGetAIResponse();
 
diff --git a/packages/app/screens/user/Settings.tsx b/packages/app/screens/user/Settings.tsx
index f4b615b8e..1f772bacd 100644
--- a/packages/app/screens/user/Settings.tsx
+++ b/packages/app/screens/user/Settings.tsx
@@ -122,7 +122,7 @@ export default function Settings() {
                   <RLabel>Weather: </RLabel>
                   <FormSelect
                     options={weatherOptions}
-                    name="value.preferredWeather"
+                    name="preferredWeather"
                     style={{ width: '100%' }}
                   />
                 </RStack>
@@ -130,7 +130,7 @@ export default function Settings() {
                   <RLabel>Weight: </RLabel>
                   <FormSelect
                     options={weightOptions}
-                    name="value.preferredWeight"
+                    name="preferredWeight"
                     style={{ width: '100%' }}
                   />
                 </RStack>
diff --git a/packages/ui/src/Bento/elements/tables/Basic.tsx b/packages/ui/src/Bento/elements/tables/Basic.tsx
index 1227333c4..b6b286843 100644
--- a/packages/ui/src/Bento/elements/tables/Basic.tsx
+++ b/packages/ui/src/Bento/elements/tables/Basic.tsx
@@ -14,7 +14,7 @@ import { AddItem } from 'app/components/item/AddItem';
 import { ThreeDotsMenu, YStack, RButton } from '@packrat/ui';
 
 import { Platform } from 'react-native';
-import  { RDropdownMenu }  from '../../../ZDropdown';
+import { RDropdownMenu } from '../../../ZDropdown';
 import RIconButton from '../../../RIconButton';
 import { ChevronDown } from '@tamagui/lucide-icons';
 
@@ -45,7 +45,7 @@ interface BasicTableProps {
   onDelete: (params: { itemId: string; packId: string }) => void;
   hasPermissions: boolean;
   currentPack: any;
-  refetch: boolean;
+  refetch: () => void;
   setRefetch: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
@@ -114,17 +114,18 @@ export function BasicTable({
           window.innerWidth < 900 ? (
             <View>
               <RDropdownMenu
-                menuItems={[{label:'Edit', onSelect:handleEditClick},
-                  {label:'Delete', onSelect:handleDeleteClick}]}
-                 menuName={ <RIconButton
-                  backgroundColor="transparent"
-                  icon={ChevronDown}
-                  style={{ padding: 0 }}
-                />
-              }
-             />
-              
-            
+                menuItems={[
+                  { label: 'Edit', onSelect: handleEditClick },
+                  { label: 'Delete', onSelect: handleDeleteClick },
+                ]}
+                menuName={
+                  <RIconButton
+                    backgroundColor="transparent"
+                    icon={ChevronDown}
+                    style={{ padding: 0 }}
+                  />
+                }
+              />
             </View>
           ) : (
             <View>

From 894dd2186008140ae6d9dd7982bb9bc4aa3526bd Mon Sep 17 00:00:00 2001
From: Muhammad Hassan <mh7722178@gmail.com>
Date: Thu, 27 Jun 2024 17:27:30 +0500
Subject: [PATCH 113/257] reverted

---
 apps/expo/app/(app)/(drawer)/(tabs)/(stack)/profile/[id].tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/profile/[id].tsx b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/profile/[id].tsx
index 56cc0d80c..fa72bf088 100644
--- a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/profile/[id].tsx
+++ b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/profile/[id].tsx
@@ -15,7 +15,7 @@ const Profile = () => {
       {Platform.OS === 'web' && (
         <Head>
           <title>{`${userRealName}'s Profile`}</title>
-          <meta name="description" content={`${id}'s Profile`} />
+          <meta name="description" content={`${userRealName}'s Profile`} />
         </Head>
       )}
       <Stack.Screen

From 1f17ce006e80558807358cb01a2252d4355d6c19 Mon Sep 17 00:00:00 2001
From: Muhammad Hassan <mh7722178@gmail.com>
Date: Thu, 27 Jun 2024 17:32:19 +0500
Subject: [PATCH 114/257] reverted

---
 apps/expo/app/(app)/(drawer)/(tabs)/(stack)/profile/[id].tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/profile/[id].tsx b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/profile/[id].tsx
index fa72bf088..996c5d9b1 100644
--- a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/profile/[id].tsx
+++ b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/profile/[id].tsx
@@ -19,7 +19,7 @@ const Profile = () => {
         </Head>
       )}
       <Stack.Screen
-        name={`${id}'s Profile`}
+        name={`${userRealName}'s Profile`}
         options={{
           title: `${id}'s Profile`,
         }}

From 3a85fe7b4f902dc91c2b9ce386d92a9336400e18 Mon Sep 17 00:00:00 2001
From: Muhammad Hassan <mh7722178@gmail.com>
Date: Thu, 27 Jun 2024 17:36:10 +0500
Subject: [PATCH 115/257] reverted

---
 apps/expo/app/(app)/(drawer)/(tabs)/(stack)/profile/[id].tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/profile/[id].tsx b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/profile/[id].tsx
index 996c5d9b1..5db459fed 100644
--- a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/profile/[id].tsx
+++ b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/profile/[id].tsx
@@ -21,7 +21,7 @@ const Profile = () => {
       <Stack.Screen
         name={`${userRealName}'s Profile`}
         options={{
-          title: `${id}'s Profile`,
+          title: `${userRealName}'s Profile`,
         }}
       />
       <ProfileContainer id={id} />

From 6cf38815876fb6db1e88933afd2e0a37abe03f6b Mon Sep 17 00:00:00 2001
From: Muhammad Hassan <mh7722178@gmail.com>
Date: Thu, 27 Jun 2024 17:36:52 +0500
Subject: [PATCH 116/257] reverted

---
 apps/expo/app/(app)/(drawer)/(tabs)/(stack)/profile/[id].tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/profile/[id].tsx b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/profile/[id].tsx
index 5db459fed..a34f721cb 100644
--- a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/profile/[id].tsx
+++ b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/profile/[id].tsx
@@ -3,7 +3,7 @@ import { useEffect, useState } from 'react';
 import { StyleSheet, Text, View, Platform } from 'react-native';
 import ProfileContainer from 'app/screens/user/ProfileContainer';
 import Head from 'expo-router/head';
-import { useProfileId } from 'app/hooks/user';
+import { useProfile, useProfileId } from 'app/hooks/user';
 
 const Profile = () => {
   const [id] = useProfileId();

From 00158cb111f0cd7afec353a167b7559cbc85308b Mon Sep 17 00:00:00 2001
From: Tadjaur <tadjaur@tas-groups.com>
Date: Wed, 26 Jun 2024 20:01:03 +0100
Subject: [PATCH 117/257] Fix offline maps screen not scrolling on native app

---
 packages/app/screens/maps/index.tsx | 118 ++++++++++++++--------------
 1 file changed, 61 insertions(+), 57 deletions(-)

diff --git a/packages/app/screens/maps/index.tsx b/packages/app/screens/maps/index.tsx
index 18f34cfca..811bc8761 100644
--- a/packages/app/screens/maps/index.tsx
+++ b/packages/app/screens/maps/index.tsx
@@ -11,7 +11,7 @@ import {
   getShapeSourceBounds,
 } from 'app/utils/mapFunctions';
 import { api } from 'app/constants/api';
-import { RStack } from '@packrat/ui';
+import { RScrollView, RStack } from '@packrat/ui';
 import useCustomStyles from 'app/hooks/useCustomStyles';
 
 function CircleCapComp() {
@@ -58,65 +58,69 @@ export default function DownloadedMaps() {
   }, []);
 
   return (
-    <View style={{ backgroundColor: currentTheme.colors.background }}>
-      <Text
-        style={{
-          textAlign: 'center',
-          fontSize: 20,
-          fontWeight: 'bold',
-          marginBottom: 20,
-          color: currentTheme.colors.text,
-        }}
-      >
-        Downloaded Maps
-      </Text>
-      {offlinePacks ? (
-        <View style={{ gap: 4 }}>
-          {offlinePacks.map(({ pack }) => {
-            const metadata = JSON.parse(pack.metadata);
-            return (
-              <TouchableOpacity
-                style={{
-                  padding: 20,
-                }}
-                onPress={() => {
-                  setPack(pack);
-                  setShowMap(true);
-                }}
-              >
-                {pack && (
-                  <Image
+    <>
+      <RScrollView nestedScrollEnabled={true} mb={50}>
+        <View style={{ backgroundColor: currentTheme.colors.background }}>
+          <Text
+            style={{
+              textAlign: 'center',
+              fontSize: 20,
+              fontWeight: 'bold',
+              marginBottom: 20,
+              color: currentTheme.colors.text,
+            }}
+          >
+            Downloaded Maps
+          </Text>
+          {offlinePacks ? (
+            <View style={{ gap: 4 }}>
+              {offlinePacks.map(({ pack }) => {
+                const metadata = JSON.parse(pack.metadata);
+                return (
+                  <TouchableOpacity
                     style={{
-                      width: '100%',
-                      height: 200,
-                      borderRadius: 10,
+                      padding: 20,
                     }}
-                    source={{
-                      uri: `${api}/mapPreview/${
-                        pack?.bounds[0] + ',' + pack?.bounds[1]
-                      },10,60,60/600x600`,
+                    onPress={() => {
+                      setPack(pack);
+                      setShowMap(true);
                     }}
-                  />
-                )}
-                <Text
-                  style={{
-                    fontSize: 16,
-                    fontWeight: 'bold',
-                    marginTop: 5,
-                    color: currentTheme.colors.text,
-                  }}
-                >
-                  {metadata.name}
-                </Text>
-              </TouchableOpacity>
-            );
-          })}
+                  >
+                    {pack && (
+                      <Image
+                        style={{
+                          width: '100%',
+                          height: 200,
+                          borderRadius: 10,
+                        }}
+                        source={{
+                          uri: `${api}/mapPreview/${
+                            pack?.bounds[0] + ',' + pack?.bounds[1]
+                          },10,60,60/600x600`,
+                        }}
+                      />
+                    )}
+                    <Text
+                      style={{
+                        fontSize: 16,
+                        fontWeight: 'bold',
+                        marginTop: 5,
+                        color: currentTheme.colors.text,
+                      }}
+                    >
+                      {metadata.name}
+                    </Text>
+                  </TouchableOpacity>
+                );
+              })}
+            </View>
+          ) : (
+            <RStack>
+              <Text>loading...</Text>
+            </RStack>
+          )}
         </View>
-      ) : (
-        <RStack>
-          <Text>loading...</Text>
-        </RStack>
-      )}
+      </RScrollView>
       {showMap ? (
         <Modal visible={true}>
           <Mapbox.MapView
@@ -174,7 +178,7 @@ export default function DownloadedMaps() {
           />
         </Modal>
       ) : null}
-    </View>
+    </>
   );
 }
 

From fbb3eb5feab65f433ac39a06dc4b6bc39a923655 Mon Sep 17 00:00:00 2001
From: Tadjaur <tadjaur@tas-groups.com>
Date: Wed, 26 Jun 2024 20:32:36 +0100
Subject: [PATCH 118/257] update the offline maps styles

---
 packages/app/screens/maps/index.tsx | 124 +++++++++++++++-------------
 1 file changed, 65 insertions(+), 59 deletions(-)

diff --git a/packages/app/screens/maps/index.tsx b/packages/app/screens/maps/index.tsx
index 811bc8761..30c42ae15 100644
--- a/packages/app/screens/maps/index.tsx
+++ b/packages/app/screens/maps/index.tsx
@@ -58,68 +58,74 @@ export default function DownloadedMaps() {
   }, []);
 
   return (
-    <>
+    <View
+      style={{
+        backgroundColor: currentTheme.colors.background,
+        height: '100%',
+      }}
+    >
       <RScrollView nestedScrollEnabled={true} mb={50}>
-        <View style={{ backgroundColor: currentTheme.colors.background }}>
-          <Text
-            style={{
-              textAlign: 'center',
-              fontSize: 20,
-              fontWeight: 'bold',
-              marginBottom: 20,
-              color: currentTheme.colors.text,
-            }}
-          >
-            Downloaded Maps
-          </Text>
-          {offlinePacks ? (
-            <View style={{ gap: 4 }}>
-              {offlinePacks.map(({ pack }) => {
-                const metadata = JSON.parse(pack.metadata);
-                return (
-                  <TouchableOpacity
+        <Text
+          style={{
+            textAlign: 'center',
+            fontSize: 20,
+            fontWeight: 'bold',
+            marginVertical: 20,
+            color: currentTheme.colors.text,
+          }}
+        >
+          Downloaded Maps
+        </Text>
+        {offlinePacks ? (
+          <View style={{ gap: 16, paddingHorizontal: 16, paddingBottom: 16 }}>
+            {offlinePacks.map(({ pack }) => {
+              const metadata = JSON.parse(pack.metadata);
+              return (
+                <TouchableOpacity
+                  style={{
+                    padding: 8,
+                    backgroundColor: `${currentTheme.colors.secondaryBlue}`,
+                    borderRadius: 15,
+                  }}
+                  onPress={() => {
+                    setPack(pack);
+                    setShowMap(true);
+                  }}
+                >
+                  {pack && (
+                    <Image
+                      style={{
+                        width: '100%',
+                        height: 200,
+                        borderRadius: 15,
+                      }}
+                      source={{
+                        uri: `${api}/mapPreview/${
+                          pack?.bounds[0] + ',' + pack?.bounds[1]
+                        },10,60,60/600x600`,
+                      }}
+                    />
+                  )}
+                  <Text
                     style={{
-                      padding: 20,
-                    }}
-                    onPress={() => {
-                      setPack(pack);
-                      setShowMap(true);
+                      fontSize: 16,
+                      fontWeight: 'bold',
+                      marginTop: 5,
+                      textAlign: 'center',
+                      color: currentTheme.colors.text,
                     }}
                   >
-                    {pack && (
-                      <Image
-                        style={{
-                          width: '100%',
-                          height: 200,
-                          borderRadius: 10,
-                        }}
-                        source={{
-                          uri: `${api}/mapPreview/${
-                            pack?.bounds[0] + ',' + pack?.bounds[1]
-                          },10,60,60/600x600`,
-                        }}
-                      />
-                    )}
-                    <Text
-                      style={{
-                        fontSize: 16,
-                        fontWeight: 'bold',
-                        marginTop: 5,
-                        color: currentTheme.colors.text,
-                      }}
-                    >
-                      {metadata.name}
-                    </Text>
-                  </TouchableOpacity>
-                );
-              })}
-            </View>
-          ) : (
-            <RStack>
-              <Text>loading...</Text>
-            </RStack>
-          )}
-        </View>
+                    {metadata.name}
+                  </Text>
+                </TouchableOpacity>
+              );
+            })}
+          </View>
+        ) : (
+          <RStack>
+            <Text>loading...</Text>
+          </RStack>
+        )}
       </RScrollView>
       {showMap ? (
         <Modal visible={true}>
@@ -178,7 +184,7 @@ export default function DownloadedMaps() {
           />
         </Modal>
       ) : null}
-    </>
+    </View>
   );
 }
 

From 1ff8a1bef03610e40315ed804a84b69a7cd56cf2 Mon Sep 17 00:00:00 2001
From: Anmol Verma <anmolverma2810@gmail.com>
Date: Thu, 27 Jun 2024 23:37:47 +0530
Subject: [PATCH 119/257] fix map error

---
 .../app/components/map/NativeMap.native.tsx   |  3 +-
 packages/app/utils/mapFunctions.ts            | 28 +++++++++++--------
 2 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/packages/app/components/map/NativeMap.native.tsx b/packages/app/components/map/NativeMap.native.tsx
index 0f4f1c827..9e26c0b3c 100644
--- a/packages/app/components/map/NativeMap.native.tsx
+++ b/packages/app/components/map/NativeMap.native.tsx
@@ -128,7 +128,7 @@ function NativeMap({ shape: shapeProp }) {
       validCenterCoordinate = pointLatLong;
     } else if (isPolygonOrMultiPolygon(shape)) {
       const bounds = multiPolygonBounds(shape.features[0]);
-      bounds.forEach(validateCoordinates);
+      validateCoordinates(bounds);
       validCenterCoordinate = bounds;
     } else if (isLineString(shape)) {
       const firstCoord = shape.features[0].geometry.coordinates[0];
@@ -141,6 +141,7 @@ function NativeMap({ shape: shapeProp }) {
   } catch (error) {
     Alert.alert('Invalid Shape Coordinates', error.message);
     validCenterCoordinate = [0, 0];
+    throw new Error(error);
   }
 
   const element = (
diff --git a/packages/app/utils/mapFunctions.ts b/packages/app/utils/mapFunctions.ts
index f7278f229..ce6122925 100644
--- a/packages/app/utils/mapFunctions.ts
+++ b/packages/app/utils/mapFunctions.ts
@@ -400,19 +400,23 @@ const validateGeoJSON = (geojson: any) => {
   }
 
   geojson.features.forEach((feature) => {
-    if (feature.geometry && feature.geometry.coordinates) {
-      if (feature.geometry.type === 'Point') {
-        validateCoordinates(feature.geometry.coordinates);
-      } else if (
-        feature.geometry.type === 'LineString' ||
-        feature.geometry.type === 'Polygon'
-      ) {
-        feature.geometry.coordinates.forEach(validateCoordinates);
-      } else if (feature.geometry.type === 'MultiPolygon') {
-        feature.geometry.coordinates.forEach((polygon) => {
-          polygon.forEach(validateCoordinates);
-        });
+    try {
+      if (feature.geometry && feature.geometry.coordinates) {
+        if (feature.geometry.type === 'Point') {
+          validateCoordinates(feature.geometry.coordinates);
+        } else if (
+          feature.geometry.type === 'LineString' ||
+          feature.geometry.type === 'Polygon'
+        ) {
+          feature.geometry.coordinates.forEach(validateCoordinates);
+        } else if (feature.geometry.type === 'MultiPolygon') {
+          feature.geometry.coordinates.forEach((polygon) => {
+            polygon.forEach(validateCoordinates);
+          });
+        }
       }
+    } catch (e) {
+      throw new Error(e);
     }
   });
 };

From ccd9850b67f8cc841d86739ea887f152e1bd7190 Mon Sep 17 00:00:00 2001
From: Anmol Verma <anmolverma2810@gmail.com>
Date: Fri, 28 Jun 2024 11:33:27 +0530
Subject: [PATCH 120/257] Modify isShapeDownlodable

---
 packages/app/utils/mapFunctions.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/app/utils/mapFunctions.ts b/packages/app/utils/mapFunctions.ts
index ce6122925..be1301fb3 100644
--- a/packages/app/utils/mapFunctions.ts
+++ b/packages/app/utils/mapFunctions.ts
@@ -307,7 +307,7 @@ const getLocation = async () => {
  * @return {boolean} Returns true if the shape is downloadable, false otherwise.
  */
 const isShapeDownloadable = (shape) => {
-  return shape?.features[0]?.geometry?.coordinates?.length > 1;
+  return shape?.features[0]?.geometry?.coordinates?.length >= 1;
 };
 
 /**

From 815fdf04ded191bdc7e5629423ede508f2ac5433 Mon Sep 17 00:00:00 2001
From: Anmol Verma <anmolverma2810@gmail.com>
Date: Fri, 28 Jun 2024 17:46:43 +0530
Subject: [PATCH 121/257] Add pagination limit component

---
 .../app/components/itemtable/itemTable.tsx    |  3 +-
 .../paginationChooseLimit/index.tsx           | 22 ++++++-------
 packages/app/screens/items/index.tsx          | 32 ++++++++++++-------
 .../elements/tables/PaginatedSortedTable.tsx  |  1 +
 4 files changed, 34 insertions(+), 24 deletions(-)

diff --git a/packages/app/components/itemtable/itemTable.tsx b/packages/app/components/itemtable/itemTable.tsx
index 6a610d0b4..4b9917c11 100644
--- a/packages/app/components/itemtable/itemTable.tsx
+++ b/packages/app/components/itemtable/itemTable.tsx
@@ -5,7 +5,7 @@ import Loader from '../Loader';
 import useTheme from '../../hooks/useTheme';
 import Layout from 'app/components/layout/Layout';
 import { PaginatedSortedTable } from '@packrat/ui/src/Bento/elements/tables';
-
+import { PaginationLimit } from '../paginationChooseLimit';
 interface ItemType {
   global: string;
   name: string;
@@ -95,6 +95,7 @@ export const ItemsTable = ({
               setRefetch={setRefetch}
             />
           )}
+          <PaginationLimit limit={limit} setLimit={setLimit} />
         </View>
       </ScrollView>
     </Layout>
diff --git a/packages/app/components/paginationChooseLimit/index.tsx b/packages/app/components/paginationChooseLimit/index.tsx
index 51c0c2f02..b3cf6c57f 100644
--- a/packages/app/components/paginationChooseLimit/index.tsx
+++ b/packages/app/components/paginationChooseLimit/index.tsx
@@ -1,10 +1,9 @@
-import {  View } from 'react-native';
+import { View } from 'react-native';
 import React, { useState } from 'react';
 import { DropdownComponent, RLabel } from '@packrat/ui';
 import useCustomStyles from 'app/hooks/useCustomStyles';
 import useResponsive from 'app/hooks/useResponsive';
 
-
 interface PaginationLimitProps {
   limit: string | number;
   setLimit: (limit: string | number) => void;
@@ -34,13 +33,14 @@ export const PaginationLimit = ({ limit, setLimit }: PaginationLimitProps) => {
   );
 };
 const loadStyles = () => {
-  const {xxs} =  useResponsive();
+  const { xxs } = useResponsive();
   return {
-  selectContainer: {
-    marginTop: xxs ? 20 : 10,
-    width: '15rem',
-    marginLeft: 20,
-    marginBottom: xxs ? 70 : 10,
-    alignSelf: 'left',
-  },
-}};
+    selectContainer: {
+      marginTop: xxs ? 20 : 10,
+      width: '15rem',
+      marginLeft: 20,
+      marginBottom: xxs ? 70 : 10,
+      alignSelf: 'left',
+    },
+  };
+};
diff --git a/packages/app/screens/items/index.tsx b/packages/app/screens/items/index.tsx
index 7651bb930..b22c3f225 100644
--- a/packages/app/screens/items/index.tsx
+++ b/packages/app/screens/items/index.tsx
@@ -7,10 +7,18 @@ import { ItemsTable } from 'app/components/itemtable/itemTable';
 import useCustomStyles from 'app/hooks/useCustomStyles';
 import { useItems } from 'app/hooks/items/useItems';
 import { usePagination } from 'app/hooks/common';
-import { BaseModal, DropdownComponent, RScrollView, RStack, RText } from '@packrat/ui';
+import {
+  BaseModal,
+  DropdownComponent,
+  RScrollView,
+  RStack,
+  RText,
+} from '@packrat/ui';
+import useResponsive from 'app/hooks/useResponsive';
 
 export default function Items() {
-  const { enableDarkMode, enableLightMode, isDark, isLight, currentTheme } = useTheme();
+  const { enableDarkMode, enableLightMode, isDark, isLight, currentTheme } =
+    useTheme();
   const { limit, handleLimitChange, page, handlePageChange } = usePagination();
   const { data, isFetching, isError } = useItems({ limit, page });
   const styles = useCustomStyles(loadStyles);
@@ -18,9 +26,9 @@ export default function Items() {
 
   // for zeego = {false} options will be:
   // const optionValues = ['Food', 'Water', 'Essentials'];
-  
+
   // for zeego ={true} options will be:
-  const optionValues=[
+  const optionValues = [
     { label: 'Food', value: 'Food' },
     { label: 'Water', value: 'Water' },
     { label: 'Essentials', value: 'Essentials' },
@@ -43,7 +51,9 @@ export default function Items() {
     return [...selectedCategoryItems, ...otherItems];
   };
 
-  const [sortedItems, setSortedItems] = useState(sortItemsByCategory(data?.items, value));
+  const [sortedItems, setSortedItems] = useState(
+    sortItemsByCategory(data?.items, value),
+  );
 
   const handleSort = (category) => {
     setValue(category);
@@ -67,16 +77,13 @@ export default function Items() {
               data={optionValues}
               onValueChange={handleSort}
               placeholder={value}
-              width="50%"
+              width="80%"
               native={true}
               zeego={true}
             />
           </RStack>
           <View style={{ marginBottom: 10 }}>
-            <BaseModal
-              title="Add a global Item"
-              trigger="Add Item"
-            >
+            <BaseModal title="Add a global Item" trigger="Add Item">
               <AddItemGlobal />
             </BaseModal>
           </View>
@@ -99,6 +106,7 @@ export default function Items() {
 
 const loadStyles = (theme) => {
   const { currentTheme } = theme;
+  const { xxs, xs } = useResponsive();
 
   return {
     mainContainer: {
@@ -123,8 +131,8 @@ const loadStyles = (theme) => {
       borderRadius: 10,
     },
     sortContainer: {
-      width:150,
-      justifyContent:'space-between',
+      width: xxs ? '50%' : xs ? '50%' : '20%',
+      justifyContent: 'space-between',
       flexDirection: 'row',
       alignItems: 'center',
     },
diff --git a/packages/ui/src/Bento/elements/tables/PaginatedSortedTable.tsx b/packages/ui/src/Bento/elements/tables/PaginatedSortedTable.tsx
index c0253496e..82495a604 100644
--- a/packages/ui/src/Bento/elements/tables/PaginatedSortedTable.tsx
+++ b/packages/ui/src/Bento/elements/tables/PaginatedSortedTable.tsx
@@ -208,6 +208,7 @@ export function PaginatedSortedTable({
         style={{
           flexDirection: 'row',
           justifyContent: 'space-between',
+          width: '25%',
           marginTop: 10,
         }}
       >

From b8c98ad72442b5a5f2d19baeff693a1783894e33 Mon Sep 17 00:00:00 2001
From: Taron <taron.aleksanyan.20@gmail.com>
Date: Sat, 29 Jun 2024 10:36:45 +0400
Subject: [PATCH 122/257] fix user setter hook

---
 packages/app/auth/hooks/useUserSetter.ts | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/packages/app/auth/hooks/useUserSetter.ts b/packages/app/auth/hooks/useUserSetter.ts
index 304203577..f04b7dc0f 100644
--- a/packages/app/auth/hooks/useUserSetter.ts
+++ b/packages/app/auth/hooks/useUserSetter.ts
@@ -1,16 +1,15 @@
 import { useCallback } from 'react';
 import { getQueryKey } from '@trpc/react-query';
 import { queryTrpc } from 'app/trpc';
-import { useQueryClient } from '@tanstack/react-query';
-import { User } from '../ts';
+import { type User } from '../ts';
 
 export const useUserSetter = () => {
-  const queryClient = useQueryClient();
+  const utils = queryTrpc.useUtils();
   const userKey = getQueryKey(queryTrpc.getMe, undefined, 'query');
 
   const setUser = useCallback(
-    (data: User | null) => queryClient.setQueryData(userKey, data),
-    [queryClient, userKey],
+    (data: User | null) => utils.getMe.setData(null, data),
+    [utils, userKey],
   );
 
   return setUser;

From c26a25e83f815b08bb98e7f1210c6a6c005e29dc Mon Sep 17 00:00:00 2001
From: Taron <taron.aleksanyan.20@gmail.com>
Date: Sat, 29 Jun 2024 12:17:41 +0400
Subject: [PATCH 123/257] fix useStorage hook initial value

---
 packages/app/hooks/storage/useStorage.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/app/hooks/storage/useStorage.ts b/packages/app/hooks/storage/useStorage.ts
index a68d337a5..75e36ed4b 100644
--- a/packages/app/hooks/storage/useStorage.ts
+++ b/packages/app/hooks/storage/useStorage.ts
@@ -7,8 +7,8 @@ const useAsyncState = (initialValue) => {
   return useReducer((state = null, action) => [false, action], initialValue);
 };
 
-export function useStorage(key: string): UseStateHook<string> {
-  const [state, setState] = useAsyncState(key);
+export function useStorage<T>(key: string, initialValue?: T): UseStateHook<T> {
+  const [state, setState] = useAsyncState(initialValue || '');
 
   useEffect(() => {
     (async () => {

From a91d7615a446211828934585d967a4e211fad449 Mon Sep 17 00:00:00 2001
From: Taron <taron.aleksanyan.20@gmail.com>
Date: Sat, 29 Jun 2024 14:35:11 +0400
Subject: [PATCH 124/257] fix auh wrapper

---
 packages/app/auth/AuthLoader.tsx                      | 6 +++---
 packages/app/auth/AuthWrapper.tsx                     | 7 ++++---
 packages/app/auth/hooks/useGetMe.ts                   | 8 +++++---
 packages/app/auth/hooks/useUser.ts                    | 2 +-
 packages/app/components/navigation/NavigationList.tsx | 7 ++++---
 5 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/packages/app/auth/AuthLoader.tsx b/packages/app/auth/AuthLoader.tsx
index 905069772..a486e066a 100644
--- a/packages/app/auth/AuthLoader.tsx
+++ b/packages/app/auth/AuthLoader.tsx
@@ -1,17 +1,17 @@
-import { useAuthUserToken } from './hooks';
+import { useUserQuery } from './hooks';
 
 export const AuthLoader = ({
   children,
   loadingElement,
   unauthorizedElement,
 }) => {
-  const { token, isLoading } = useAuthUserToken();
+  const { isLoading, user } = useUserQuery();
 
   if (isLoading) {
     return loadingElement;
   }
 
-  if (!token) {
+  if (!user) {
     return unauthorizedElement;
   }
 
diff --git a/packages/app/auth/AuthWrapper.tsx b/packages/app/auth/AuthWrapper.tsx
index b8333851b..ae1803665 100644
--- a/packages/app/auth/AuthWrapper.tsx
+++ b/packages/app/auth/AuthWrapper.tsx
@@ -1,14 +1,15 @@
+import React from 'react';
 import { AuthLoader } from 'app/auth/AuthLoader';
 import { Redirect } from 'app/components/Redirect';
 import { RSpinner, RText } from '@packrat/ui';
 import { Platform, View } from 'react-native';
 import LandingPage from 'app/components/landing_page';
 
-type Props = {
+interface AuthWrapperProps {
   children?: React.ReactNode;
-};
+}
 
-export const AuthWrapper = ({ children }: Props) => {
+export const AuthWrapper = ({ children }: AuthWrapperProps) => {
   return (
     <AuthLoader
       loadingElement={
diff --git a/packages/app/auth/hooks/useGetMe.ts b/packages/app/auth/hooks/useGetMe.ts
index e06f6d0a0..919024ecb 100644
--- a/packages/app/auth/hooks/useGetMe.ts
+++ b/packages/app/auth/hooks/useGetMe.ts
@@ -1,10 +1,12 @@
 import { queryTrpc } from '../../trpc';
-import { useStorage } from 'app/hooks/storage/useStorage';
+import { useAuthUserToken } from './useUser';
 
 export const useGetMe = () => {
-  const [[_, token]] = useStorage('token'); // TODO add enabled based on token to avoid unneeded requests
+  const { token, isLoading: isTokenLoading } = useAuthUserToken();
 
-  const { data, isLoading } = queryTrpc.getMe.useQuery();
+  const { data, isLoading } = queryTrpc.getMe.useQuery(null, {
+    enabled: !!token && !isTokenLoading,
+  });
 
   return { data, isLoading };
 };
diff --git a/packages/app/auth/hooks/useUser.ts b/packages/app/auth/hooks/useUser.ts
index ac2c18167..467cfaa17 100644
--- a/packages/app/auth/hooks/useUser.ts
+++ b/packages/app/auth/hooks/useUser.ts
@@ -8,7 +8,7 @@ export const useUserQuery = () => {
 };
 
 export const useAuthUserToken = () => {
-  const [[isLoading, token]] = useStorage('token');
+  const [[isLoading, token]] = useStorage<string>('token');
 
   return { token, isLoading };
 };
diff --git a/packages/app/components/navigation/NavigationList.tsx b/packages/app/components/navigation/NavigationList.tsx
index c5c7cc6c7..6a31de984 100644
--- a/packages/app/components/navigation/NavigationList.tsx
+++ b/packages/app/components/navigation/NavigationList.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import { useNavigationList } from 'app/hooks/navigation';
 import { NavigationItem } from './NavigationItem';
 import { useIsMobileView } from 'app/hooks/common';
@@ -18,7 +19,7 @@ export const NavigationList: React.FC<NavigationListProps> = ({
   const { navigationItems } = useNavigationList();
   return (
     <>
-      {navigationItems?.map(({ type, ...Item },index) => {
+      {navigationItems?.map(({ type, ...Item }, index) => {
         const item = Item as any;
         return (
           <View
@@ -32,13 +33,13 @@ export const NavigationList: React.FC<NavigationListProps> = ({
             hoverStyle={{
               bg: currentTheme.colors.secondaryBlue as any,
             }}
-            key={item.href+index}
+            key={item.href + index}
           >
             {type === 'link' ? (
               <NavigationItem
                 item={item}
                 itemStyle={itemStyle}
-                key={item.href+index}
+                key={item.href + index}
                 onSelect={onItemSelect}
                 isMobileView={isMobileView}
               />

From d7147a01adbec810966ccbc603f713082235711b Mon Sep 17 00:00:00 2001
From: Taron <taron.aleksanyan.20@gmail.com>
Date: Sat, 29 Jun 2024 16:08:47 +0400
Subject: [PATCH 125/257] fix home page auth

---
 apps/vite/src/routes/index.tsx    | 11 +++++++----
 packages/app/auth/AuthWrapper.tsx |  8 ++++++--
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/apps/vite/src/routes/index.tsx b/apps/vite/src/routes/index.tsx
index 2fe1b91b0..e77a75ce0 100644
--- a/apps/vite/src/routes/index.tsx
+++ b/apps/vite/src/routes/index.tsx
@@ -1,14 +1,17 @@
+import React from 'react';
 import Dashboard from 'app/screens/dashboard';
 import LandingPage from 'app/components/landing_page';
-import { useAuthUser } from 'app/auth/hooks';
 import { createFileRoute } from '@tanstack/react-router';
+import { AuthWrapper } from 'app/auth/AuthWrapper';
 
 export const Route = createFileRoute('/')({
   component: Home,
 });
 
 export default function Home() {
-  const user = useAuthUser();
-
-  return <>{!user ? <LandingPage /> : <Dashboard />}</>;
+  return (
+    <AuthWrapper unauthorizedElement={<LandingPage />}>
+      <Dashboard />
+    </AuthWrapper>
+  );
 }
diff --git a/packages/app/auth/AuthWrapper.tsx b/packages/app/auth/AuthWrapper.tsx
index ae1803665..e2b08f4eb 100644
--- a/packages/app/auth/AuthWrapper.tsx
+++ b/packages/app/auth/AuthWrapper.tsx
@@ -7,9 +7,13 @@ import LandingPage from 'app/components/landing_page';
 
 interface AuthWrapperProps {
   children?: React.ReactNode;
+  unauthorizedElement: React.ReactNode;
 }
 
-export const AuthWrapper = ({ children }: AuthWrapperProps) => {
+export const AuthWrapper = ({
+  children,
+  unauthorizedElement,
+}: AuthWrapperProps) => {
   return (
     <AuthLoader
       loadingElement={
@@ -23,7 +27,7 @@ export const AuthWrapper = ({ children }: AuthWrapperProps) => {
           </View>
         )
       }
-      unauthorizedElement={<LandingPage />}
+      unauthorizedElement={unauthorizedElement || <LandingPage />}
     >
       {children}
     </AuthLoader>

From e9cd412135ed2e508544c471e7a627078d73b875 Mon Sep 17 00:00:00 2001
From: Eliyas Asefa <103815611+pinocchio-life-like@users.noreply.github.com>
Date: Sat, 29 Jun 2024 17:51:42 +0300
Subject: [PATCH 126/257] Revert "Enhance/chat"

---
 package.json                                  |   2 +-
 .../Suggestion/SuggestionDescription.tsx      | 120 --------
 .../components/Suggestion/SuggestionList.tsx  |  96 ------
 packages/app/components/Suggestion/index.ts   |   2 -
 packages/app/components/chat/ActionItem.tsx   | 118 --------
 packages/app/components/chat/chat.style.tsx   |  78 +----
 packages/app/components/chat/index.tsx        | 282 +++++-------------
 packages/app/components/pack/PackDetails.tsx  |  12 +-
 packages/app/hooks/chat/useChat.ts            |  85 ++----
 packages/app/hooks/chat/useGetAIResponse.ts   |  68 +++--
 packages/app/package.json                     |   5 +-
 .../ui/src/Bento/elements/list/ChatList.tsx   |   2 +-
 .../ui/src/ThreeDotsMenu/ThreeDotsMenu.tsx    |   1 +
 server/package.json                           |   2 +-
 .../src/controllers/openAi/getAIResponse.ts   |  20 +-
 .../controllers/openAi/getAISuggestions.ts    |  31 --
 server/src/controllers/openAi/index.ts        |   1 -
 server/src/routes/trpcRouter.ts               |   7 +-
 .../services/openAi/getAIResponseService.ts   |  35 +--
 .../services/openAi/getAISuggestionService.ts | 176 -----------
 server/src/services/openAi/langchain/index.ts |   6 +-
 server/src/services/openAi/openAi.service.ts  |   1 -
 .../openAi/referredItemInformation/index.ts   | 133 ---------
 server/src/services/openAi/zodSchema.ts       |  31 --
 .../src/services/pack/getPackByIdService.ts   |   5 +-
 yarn.lock                                     | 265 +---------------
 26 files changed, 179 insertions(+), 1405 deletions(-)
 delete mode 100644 packages/app/components/Suggestion/SuggestionDescription.tsx
 delete mode 100644 packages/app/components/Suggestion/SuggestionList.tsx
 delete mode 100644 packages/app/components/Suggestion/index.ts
 delete mode 100644 packages/app/components/chat/ActionItem.tsx
 delete mode 100644 server/src/controllers/openAi/getAISuggestions.ts
 delete mode 100644 server/src/services/openAi/getAISuggestionService.ts
 delete mode 100644 server/src/services/openAi/referredItemInformation/index.ts
 delete mode 100644 server/src/services/openAi/zodSchema.ts

diff --git a/package.json b/package.json
index ef1785a85..4dbb3f0d0 100644
--- a/package.json
+++ b/package.json
@@ -142,4 +142,4 @@
   "resolutions": {
     "@react-native/assets-registry": "0.74.81"
   }
-}
+}
\ No newline at end of file
diff --git a/packages/app/components/Suggestion/SuggestionDescription.tsx b/packages/app/components/Suggestion/SuggestionDescription.tsx
deleted file mode 100644
index 1c76f4d23..000000000
--- a/packages/app/components/Suggestion/SuggestionDescription.tsx
+++ /dev/null
@@ -1,120 +0,0 @@
-import { useEffect, useState } from 'react';
-import { FlatList } from 'react-native';
-import { AnimatePresence, Text, Theme, View, styled } from 'tamagui';
-
-import useTheme from 'app/hooks/useTheme';
-
-const List = styled(FlatList<Message>, {
-  backgroundColor: '$background',
-  gap: '$3',
-});
-
-const getMessages = (data: Message[]) => data;
-
-type Message = {
-  role: 'user' | 'ai';
-  content: string;
-};
-
-const renderItem = ({
-  item: message,
-  index,
-}: {
-  item: Message;
-  index: number;
-}) => {
-  return <ChatItem index={index + 1} key={index} item={message} />;
-};
-export function SuggestionDescription({ data }: { data: Message[] }) {
-  const [messages, setMessages] = useState<Message[]>([]);
-
-  useEffect(() => {
-    setMessages(getMessages(data)); // Reverse the messages array
-  }, [data]);
-
-  return (
-    <View
-      flexDirection="column"
-      height={'100%'}
-      minWidth="100%"
-      $group-window-gtXs={{ height: 700 }}
-    >
-      <List
-        $group-window-gtXs={{
-          padding: '$10',
-        }}
-        data={messages}
-        renderItem={renderItem}
-        windowSize={2}
-      />
-    </View>
-  );
-}
-
-SuggestionDescription.fileName = 'ChatList';
-
-function ChatItem({ item, index }: { item: Message; index: number }) {
-  const [showMessage, setShowMessage] = useState(false);
-  const showDelay = 10;
-  const [start, setStart] = useState(false);
-  const { isDark } = useTheme();
-
-  useEffect(() => {
-    // run animations after initial render calms down
-    (globalThis.requestIdleCallback || setTimeout)(() => {
-      setStart(true);
-    });
-  }, []);
-
-  useEffect(() => {
-    if (!start) return;
-    const timeout = setTimeout(() => {
-      setShowMessage((prev) => !prev);
-    }, showDelay);
-    return () => clearTimeout(timeout);
-  }, [start, showDelay]);
-
-  return (
-    <AnimatePresence>
-      {showMessage && (
-        <View
-          flexDirection={'row'}
-          alignItems="flex-start"
-          gap="$4"
-          alignSelf={'flex-start'}
-          maxWidth="100%"
-          minWidth="100%"
-          style={{ padding: '5px 5px', background: isDark ? '#333' : 'white' }}
-        >
-          <View
-            flexDirection="column"
-            alignItems={'flex-start'}
-            gap="$2"
-            // maxWidth={400}
-            justifyContent="center"
-            flexShrink={1}
-          >
-            <Theme name={'blue'}>
-              <View
-                backgroundColor="$color2"
-                padding="$4"
-                paddingVertical="$3"
-                borderRadius="$5"
-                flexShrink={1}
-              >
-                <Text
-                  fontSize="$3"
-                  fontWeight="$3"
-                  lineHeight="$3"
-                  flexShrink={1}
-                >
-                  {item.content}
-                </Text>
-              </View>
-            </Theme>
-          </View>
-        </View>
-      )}
-    </AnimatePresence>
-  );
-}
diff --git a/packages/app/components/Suggestion/SuggestionList.tsx b/packages/app/components/Suggestion/SuggestionList.tsx
deleted file mode 100644
index e2a88e418..000000000
--- a/packages/app/components/Suggestion/SuggestionList.tsx
+++ /dev/null
@@ -1,96 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { Separator, Text, View, YGroup } from 'tamagui';
-import { RButton } from '@packrat/ui';
-import useTheme from 'app/hooks/useTheme';
-import { useAddPackItem } from 'app/hooks/packs/useAddPackItem';
-
-export function SuggestionList({ suggestion, onAddItem }) {
-  const [itemsList, setItemsList] = useState([]);
-  const { isDark } = useTheme();
-
-  useEffect(() => {
-    setItemsList(suggestion?.Items || []);
-  }, [suggestion]);
-
-  return (
-    <YGroup
-      style={{
-        background: isDark ? '#333' : 'white',
-        padding: 10,
-        borderRadius: 0,
-      }}
-      width="100%"
-      justifyContent="center"
-      alignItems="center"
-    >
-      <View
-        $group-window-gtXs={{
-          padding: '$3',
-          width: 600,
-        }}
-        gap="$1.5"
-        minWidth="100%"
-      >
-        {itemsList.map((item, i) => (
-          <React.Fragment key={item.id}>
-            <Item item={item} onAddItem={onAddItem} />
-            {i < itemsList.length - 1 && <Separator />}
-          </React.Fragment>
-        ))}
-      </View>
-    </YGroup>
-  );
-}
-
-SuggestionList.fileName = 'List';
-
-function Item({ item, onAddItem }) {
-  const { addPackItem, isLoading } = useAddPackItem();
-
-  const handleAddItem = (item) => {
-    addPackItem(item);
-    onAddItem(item.id);
-  };
-
-  return (
-    <YGroup.Item>
-      <View
-        flexDirection="row"
-        paddingVertical="$1"
-        paddingHorizontal="$1.5"
-        gap="$2"
-        $group-window-gtXs={{
-          padding: '$4',
-          gap: '$4',
-        }}
-        backgroundColor="$color1"
-        alignItems="center"
-        style={{ borderRadius: 5 }}
-      >
-        <View flexDirection="column" flexShrink={1} justifyContent="center">
-          <Text selectable>{item.name}</Text>
-          <Text
-            selectable
-            fontSize="$2"
-            lineHeight="$2"
-            fontWeight="$2"
-            // theme="alt1"
-          >
-            {item.category} {item.weight}
-            {item.unit}, {item.quantity}pcs
-          </Text>
-        </View>
-        <RButton
-          onPress={() => {
-            handleAddItem(item);
-          }}
-          style={{ borderRadius: 5 }}
-          marginLeft="auto"
-          disabled={isLoading}
-        >
-          Add
-        </RButton>
-      </View>
-    </YGroup.Item>
-  );
-}
diff --git a/packages/app/components/Suggestion/index.ts b/packages/app/components/Suggestion/index.ts
deleted file mode 100644
index f942c1757..000000000
--- a/packages/app/components/Suggestion/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './SuggestionList';
-export * from './SuggestionDescription';
diff --git a/packages/app/components/chat/ActionItem.tsx b/packages/app/components/chat/ActionItem.tsx
deleted file mode 100644
index 8ae173aa3..000000000
--- a/packages/app/components/chat/ActionItem.tsx
+++ /dev/null
@@ -1,118 +0,0 @@
-import React, { useState } from 'react';
-import { View, Text, Pressable, StyleSheet } from 'react-native';
-import Animated, {
-  useSharedValue,
-  useAnimatedStyle,
-  withTiming,
-  FadeIn,
-} from 'react-native-reanimated';
-import { LucideIcon } from 'lucide-react-native';
-
-const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
-
-interface ActionItemProps {
-  icon: LucideIcon;
-  color: string;
-  title: string;
-  description: string;
-  type: string;
-  setIsChatOpen: (value: boolean) => void;
-  setIsSuggestionOpen: (value: boolean) => void;
-  setIsItemOpen: (value: boolean) => void;
-}
-
-export const ActionItem: React.FC<ActionItemProps> = ({
-  icon: Icon,
-  color,
-  title,
-  type,
-  description,
-  setIsChatOpen,
-  setIsSuggestionOpen,
-  setIsItemOpen,
-}) => {
-  const [scale, setScale] = useState(1);
-
-  const actionItemAStyle = {
-    transform: [{ scale: scale }],
-  };
-
-  const handlePressOut = () => {
-    setScale(0.95);
-    switch (type) {
-      case 'chat':
-        setIsItemOpen(false);
-        setIsChatOpen(true);
-        break;
-      case 'suggestion':
-        setIsItemOpen(false);
-        setIsSuggestionOpen(true);
-        break;
-      default:
-        break;
-    }
-  };
-
-  return (
-    <AnimatedPressable
-      entering={FadeIn.duration(100)}
-      onPressIn={() => {
-        setScale(0.95);
-      }}
-      onPressOut={handlePressOut}
-      style={[styles.actionItem, actionItemAStyle]}
-    >
-      <View
-        style={{
-          ...styles.iconContainer,
-          backgroundColor: color,
-        }}
-      >
-        <Icon size={24} color="white" />
-      </View>
-      <View style={styles.actionTextContainer}>
-        <Text style={styles.actionTitle}>{title}</Text>
-        <Text style={styles.actionDescription}>{description}</Text>
-      </View>
-    </AnimatedPressable>
-  );
-};
-
-const styles = StyleSheet.create({
-  actionItem: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    backgroundColor: 'rgba(44, 44, 46, 0.6)',
-    borderRadius: 10,
-    padding: 8,
-    borderWidth: 1.3, // Adding border
-    borderColor: '#3a3a3c', // Slightly lighter border color
-    height: 80,
-    width: 300,
-    marginBottom: 2,
-  },
-  iconContainer: {
-    width: 40,
-    height: 40,
-    borderRadius: 20,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  actionTextContainer: {
-    marginLeft: 6,
-    paddingRight: 10,
-    rowGap: 4,
-    width: '90%',
-  },
-  actionTitle: {
-    color: 'white',
-    fontSize: 16,
-    fontWeight: 'bold',
-  },
-  actionDescription: {
-    fontSize: 14,
-    fontWeight: '500',
-    lineHeight: 18,
-    color: 'rgba(224, 224, 224, 0.9)',
-  },
-});
diff --git a/packages/app/components/chat/chat.style.tsx b/packages/app/components/chat/chat.style.tsx
index e3d56af2e..b088df0d7 100644
--- a/packages/app/components/chat/chat.style.tsx
+++ b/packages/app/components/chat/chat.style.tsx
@@ -1,25 +1,8 @@
-import { Dimensions } from 'react-native';
-
-const { width, height } = Dimensions.get('window');
-
-export const SCREEN_WIDTH = width;
-export const SCREEN_HEIGHT = height;
-
 export const loadStyles = (theme: any) => {
   const { currentTheme } = theme;
 
   return {
-    container: {
-      flex: 1,
-      padding: 16,
-      position: 'fixed',
-      right: 250,
-      bottom: 30,
-      width: 60,
-      height: 60,
-      justifyContent: 'center',
-      alignItems: 'center',
-    },
+    container: { flex: 1, padding: 16 },
     headerText: { fontSize: 24, fontWeight: 'bold' },
     flatList: { flexGrow: 1, justifyContent: 'flex-end' },
     inputContainer: {
@@ -96,64 +79,5 @@ export const loadStyles = (theme: any) => {
       padding: 10,
       zIndex: 1000,
     },
-    actionItem: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      backgroundColor: 'rgba(44, 44, 46, 0.6)',
-      borderRadius: 15,
-      padding: 10,
-      borderWidth: 1.3, // Adding border
-      borderColor: '#3a3a3c', // Slightly lighter border color
-      height: 112,
-      width: SCREEN_WIDTH * 0.82,
-    },
-    iconContainer: {
-      width: 40,
-      height: 40,
-      borderRadius: 20,
-      alignItems: 'center',
-      justifyContent: 'center',
-    },
-    actionTextContainer: {
-      marginLeft: 10,
-      rowGap: 4,
-      width: '90%',
-    },
-    actionTitle: {
-      color: 'white',
-      fontSize: 16,
-      fontWeight: 'bold',
-    },
-    actionDescription: {
-      fontSize: 14,
-      fontWeight: '500',
-      lineHeight: 18,
-      color: 'rgba(224, 224, 224, 0.9)',
-    },
-    logo: {
-      shadowColor: '#000',
-      shadowOffset: {
-        width: 0,
-        height: 2,
-      },
-      shadowOpacity: 0.75,
-      shadowRadius: 1.24,
-      elevation: 3,
-    },
-    animatedView: {
-      position: 'absolute',
-      bottom: 60,
-      right: 5,
-      width: 450,
-      backgroundColor: '#fff',
-      borderRadius: 10,
-      padding: 4,
-      zIndex: 1000,
-      shadowColor: '#000',
-      shadowOffset: { width: 2, height: 4 },
-      shadowOpacity: 0.25,
-      shadowRadius: 3.84,
-      elevation: 5,
-    },
   };
 };
diff --git a/packages/app/components/chat/index.tsx b/packages/app/components/chat/index.tsx
index 022d6ba80..88e38d7e5 100644
--- a/packages/app/components/chat/index.tsx
+++ b/packages/app/components/chat/index.tsx
@@ -11,59 +11,40 @@ import useCustomStyles from 'app/hooks/useCustomStyles';
 import { useChat } from 'app/hooks/chat/useChat';
 import { loadStyles } from './chat.style';
 import { ChatList } from '@packrat/ui/src/Bento/elements/list';
+import { Button } from 'tamagui';
 import { X } from '@tamagui/lucide-icons';
-import { MessageCircle, Camera, Settings, Home } from 'lucide-react-native';
-import { ActionItem } from './ActionItem';
-import {
-  SuggestionDescription,
-  SuggestionList,
-} from '../../components/Suggestion';
+
+// TODO check if we've fixed the chat screen on another branch
+// link: https://github.com/andrew-bierman/PackRat/issues/ ???
 
 interface ChatComponentProps {
   showChatSelector?: boolean;
   defaultChatId?: string | null;
   itemTypeId?: string | null;
-  type?: string | null;
 }
 
 interface ChatModalTriggerProps {
   title: string;
   trigger: string;
   itemTypeId: string | null;
-  type: string;
 }
 
-const actionItems = [
-  {
-    icon: MessageCircle,
-    color: 'orange',
-    title: 'Message',
-    description: 'Interact with our AI-powered chatbot.',
-    type: 'chat',
-  },
-  {
-    icon: Settings,
-    color: 'teal',
-    title: 'Suggestions',
-    description: 'See how you can improve your pack.',
-    type: 'suggestion',
-  },
-];
-
 const ChatComponent: React.FC<ChatComponentProps> = ({
   showChatSelector = true,
   defaultChatId = null,
   itemTypeId = null,
-  type = null,
 }) => {
   const styles = useCustomStyles(loadStyles);
   const {
+    conversations,
+    typeId,
     parsedMessages,
     userInput,
     handleSendMessage,
     setUserInput,
+    setTypeId,
     isLoading,
-  } = useChat({ itemTypeId, type });
+  } = useChat({ itemTypeId });
 
   const [messages, setMessages] = useState(parsedMessages);
 
@@ -135,115 +116,9 @@ const ChatComponent: React.FC<ChatComponentProps> = ({
   );
 };
 
-const SuggestionComponent = ({ itemTypeId = null, type = null }) => {
-  const [dots, setDots] = useState('.');
-  const {
-    handleSubmitAnalysis,
-    suggestions,
-    isAnalysisLoading,
-    setSuggestions,
-  } = useChat({
-    itemTypeId,
-    type,
-  });
-
-  useEffect(() => {
-    console.log(suggestions);
-  }, [suggestions]);
-
-  useEffect(() => {
-    if (isAnalysisLoading) {
-      const interval = setInterval(() => {
-        setDots((dots) => (dots.length < 3 ? dots + '.' : '.'));
-      }, 500); // Change dots every 500ms
-      return () => clearInterval(interval); // Clean up on component unmount
-    }
-  }, [isAnalysisLoading]);
-
-  const styles = useCustomStyles(loadStyles);
-
-  const scrollViewRef = useRef<ScrollView>(null);
-
-  const handleLayout = () => {
-    scrollViewRef.current?.scrollToEnd({ animated: false });
-  };
-
-  const removeItem = (id) => {
-    console.log('remove item', id);
-    setSuggestions((prevSuggestion) => {
-      if (
-        prevSuggestion &&
-        prevSuggestion.suggestion &&
-        prevSuggestion.suggestion.Items
-      ) {
-        return {
-          ...prevSuggestion,
-          suggestion: {
-            Items: prevSuggestion.suggestion.Items.filter(
-              (item) => String(item.id) !== String(id),
-            ),
-          },
-        };
-      } else {
-        return prevSuggestion;
-      }
-    });
-  };
-
-  return (
-    <View>
-      <RStack style={{ flex: 1 }}>
-        {!suggestions.suggestion.Items ? (
-          <Text style={{ width: '100%', textAlign: 'center' }}>
-            Allow me to analyze your pack and help!
-          </Text>
-        ) : (
-          <ScrollView
-            onContentSizeChange={handleLayout}
-            style={{ maxHeight: 620, width: '100%', borderRadius: 10 }}
-            showsVerticalScrollIndicator={false}
-            contentContainerStyle={{ flexGrow: 1, justifyContent: 'flex-end' }}
-          >
-            <SuggestionDescription data={suggestions.reasoning} />
-            <SuggestionList
-              suggestion={suggestions.suggestion}
-              onAddItem={removeItem}
-            />
-          </ScrollView>
-        )}
-        <RStack
-          style={{
-            marginTop: 10,
-            gap: 8,
-            flexDirection: 'row',
-            width: '100%',
-          }}
-        >
-          <RButton
-            onClick={() => {
-              handleSubmitAnalysis();
-            }}
-            disabled={isAnalysisLoading}
-            style={{ width: '100%' }}
-          >
-            <Text style={styles.sendText}>
-              {isAnalysisLoading ? 'Loading' + dots : 'Analyze'}
-            </Text>
-          </RButton>
-        </RStack>
-      </RStack>
-    </View>
-  );
-};
-
-const ChatModalTrigger: React.FC<ChatModalTriggerProps> = ({
-  itemTypeId,
-  type,
-}) => {
+const ChatModalTrigger: React.FC<ChatModalTriggerProps> = ({ itemTypeId }) => {
   const styles = useCustomStyles(loadStyles);
   const [isChatOpen, setIsChatOpen] = useState(false);
-  const [isItemOpen, setIsItemOpen] = useState(false);
-  const [isSuggestionsOpen, setIsSuggestionsOpen] = useState(false);
   const animationValue = useRef(new Animated.Value(0)).current;
 
   useEffect(() => {
@@ -256,65 +131,81 @@ const ChatModalTrigger: React.FC<ChatModalTriggerProps> = ({
 
   return (
     <View style={styles.container}>
-      <TouchableOpacity
-        style={{
-          width: 50,
-          height: 50,
-          borderRadius: 25,
-          justifyContent: 'center',
-          alignItems: 'center',
-        }}
-        onPress={() => {
-          if (isChatOpen || isSuggestionsOpen) {
-            setIsItemOpen(false);
-            setIsChatOpen(false);
-            setIsSuggestionsOpen(false);
-          } else {
-            setIsItemOpen(!isItemOpen);
-          }
-        }}
-      >
-        <RImage
-          source={{
-            // TODO: Update this to use the intended chat logo
-            uri: 'https://raw.githubusercontent.com/andrew-bierman/PackRat/4ad449702c088e505c4b484219121d365150f971/packages/app/assets/chat-svgrepo-com%20(1).svg',
+      <TouchableOpacity onPress={() => setIsChatOpen(!isChatOpen)}>
+        <TouchableOpacity
+          style={{
             width: 50,
             height: 50,
+            borderRadius: 25,
+            justifyContent: 'center',
+            alignItems: 'center',
           }}
-          width={40}
-          height={40}
-          style={styles.logo}
-          alt="PackRat Logo"
-        />
+          onPress={() => setIsChatOpen(!isChatOpen)}
+        >
+          <RImage
+            source={{
+              // TODO: Update this to use the intended chat logo
+              uri: 'https://raw.githubusercontent.com/andrew-bierman/PackRat/4ad449702c088e505c4b484219121d365150f971/packages/app/assets/chat-svgrepo-com%20(1).svg',
+              width: 50,
+              height: 50,
+            }}
+            width={40}
+            height={40}
+            style={{
+              ...styles.logo,
+              shadowColor: '#000',
+              shadowOffset: {
+                width: 0,
+                height: 2,
+              },
+              shadowOpacity: 0.75,
+              shadowRadius: 1.24,
+              // elevation: 3,
+            }}
+            alt="PackRat Logo"
+          />
+        </TouchableOpacity>
       </TouchableOpacity>
-      {isItemOpen && (
-        <Animated.View style={{ ...styles.animatedView, width: 308 }}>
-          <View style={{ width: 300 }}>
-            {actionItems.map((item, index) => {
-              const { icon, color, title, description, type } = item;
-              return (
-                <ActionItem
-                  key={index}
-                  icon={icon}
-                  color={color}
-                  title={title}
-                  type={type}
-                  description={description}
-                  setIsChatOpen={setIsChatOpen}
-                  setIsItemOpen={setIsItemOpen}
-                  setIsSuggestionOpen={setIsSuggestionsOpen}
-                />
-              );
-            })}
-          </View>
-        </Animated.View>
-      )}
       {isChatOpen && (
-        <Animated.View style={{ ...styles.animatedView, width: 450 }}>
-          <RButton
+        <Animated.View
+          style={{
+            position: 'absolute',
+            bottom: 50,
+            right: 20,
+            width: 450,
+            // height: 700,
+            backgroundColor: '#fff',
+            borderRadius: 10,
+            padding: 4,
+            zIndex: 1000,
+            shadowColor: '#000',
+            shadowOffset: { width: 0, height: 2 },
+            shadowOpacity: 0.25,
+            shadowRadius: 3.84,
+            elevation: 5,
+            transform: [
+              {
+                translateX: animationValue.interpolate({
+                  inputRange: [0, 1],
+                  outputRange: [225, 0], // half of your view width
+                }),
+              },
+              {
+                translateY: animationValue.interpolate({
+                  inputRange: [0, 1],
+                  outputRange: [350, 0], // half of your view height
+                }),
+              },
+              {
+                scale: animationValue,
+              },
+            ],
+            opacity: animationValue,
+          }}
+        >
+          <Button
             position="absolute"
             backgroundColor="$background"
-            color="$color"
             top="$2"
             right="$2"
             size="$2"
@@ -323,24 +214,7 @@ const ChatModalTrigger: React.FC<ChatModalTriggerProps> = ({
             onPress={() => setIsChatOpen(false)}
             style={{ zIndex: 1001 }}
           />
-          <ChatComponent itemTypeId={itemTypeId} type={type} />
-        </Animated.View>
-      )}
-      {isSuggestionsOpen && (
-        <Animated.View style={styles.animatedView}>
-          <RButton
-            position="absolute"
-            backgroundColor="$background"
-            color="$color"
-            top="$2"
-            right="$2"
-            size="$2"
-            circular
-            icon={X}
-            onPress={() => setIsSuggestionsOpen(false)}
-            style={{ zIndex: 1001 }}
-          />
-          <SuggestionComponent itemTypeId={itemTypeId} type={type} />
+          <ChatComponent itemTypeId={itemTypeId} />
         </Animated.View>
       )}
     </View>
diff --git a/packages/app/components/pack/PackDetails.tsx b/packages/app/components/pack/PackDetails.tsx
index 72821b8ce..3ff1f4e62 100644
--- a/packages/app/components/pack/PackDetails.tsx
+++ b/packages/app/components/pack/PackDetails.tsx
@@ -156,7 +156,6 @@ export function PackDetails() {
           itemTypeId={currentPackId}
           title="Chat"
           trigger="Open Chat"
-          type="pack"
         />
       </View>
     </>
@@ -165,17 +164,8 @@ export function PackDetails() {
 
 const loadStyles = (theme) => {
   const { currentTheme } = theme;
+  console.log('currentTheme', currentTheme);
   return {
-    mainContainer: {
-      position: 'relative',
-      backgroundColor: currentTheme.colors.background,
-      flexDirection: 'column',
-      gap: 15,
-      fontSize: 18,
-      width: '100%',
-      // flex: 1,
-      maxHeight: '91.2vh',
-    },
     packsContainer: {
       flexDirection: 'column',
       minHeight: '100vh',
diff --git a/packages/app/hooks/chat/useChat.ts b/packages/app/hooks/chat/useChat.ts
index 43121300e..3ec47b0fe 100644
--- a/packages/app/hooks/chat/useChat.ts
+++ b/packages/app/hooks/chat/useChat.ts
@@ -1,38 +1,15 @@
 import { useState } from 'react';
 import { useGetUserChats } from './useGetUserChats';
-import { useGetAIResponse, useGetAISuggestions } from './useGetAIResponse';
+import { useGetAIResponse } from './useGetAIResponse';
 import { useAuthUser } from 'app/auth/hooks';
-import { v4 as uuidv4 } from 'uuid';
-
-interface Reasoning {
-  role: string;
-  content: string;
-}
-
-interface Suggestion {
-  name: string;
-  weight: number;
-  unit: string;
-  quantity: number;
-  category: string;
-}
-
-interface Suggestions {
-  reasoning: Reasoning[];
-  suggestion: Suggestion[];
-}
 
 export const useChat = (itemTypeId = null) => {
   const user = useAuthUser();
   const [typeId, setTypeId] = useState(itemTypeId);
   const [isLoading, setIsLoading] = useState(false);
-  const [isAnalysisLoading, setIsAnalysisLoading] = useState(false);
-  const [suggestions, setSuggestions] = useState<Suggestions>({
-    reasoning: [],
-    suggestion: [],
-  });
 
   const [userInput, setUserInput] = useState('');
+  // const [parsedMessages, setParsedMessages] = useState([]);
 
   const { data: chatsData, refetch } = useGetUserChats(
     user.id,
@@ -40,7 +17,6 @@ export const useChat = (itemTypeId = null) => {
   );
 
   const { getAIResponse } = useGetAIResponse();
-  const { getAISuggestions } = useGetAISuggestions();
 
   const conversations = chatsData?.conversations?.history || '';
 
@@ -65,6 +41,21 @@ export const useChat = (itemTypeId = null) => {
       return accumulator;
     }, []);
   };
+
+  // const conversation = conversations?.find(
+  //   (chat) => chat._id === conversationId,
+  // );
+
+  // useEffect(() => {
+  //
+  //   setParsedMessages(
+  //     conversation ? parseConversationHistory(conversation.history) : [],
+  //   );
+  // }, [conversationId]);
+
+  // /
+
+  // Compute parsedMessages directly
   const parsedMessages = conversations
     ? parseConversationHistory(conversations)
     : [];
@@ -72,6 +63,8 @@ export const useChat = (itemTypeId = null) => {
   //
 
   /**
+   * Handles sending a message.
+   *
    * @return {Promise<void>} This function returns nothing.
    */
   const handleSendMessage = async (userMessage) => {
@@ -81,47 +74,11 @@ export const useChat = (itemTypeId = null) => {
       userId: user.id,
       userInput: userMessage,
       itemTypeId: typeId.itemTypeId,
-      type: typeId.type,
     });
     await refetch();
     setIsLoading(false);
   };
 
-  const handleSubmitAnalysis = async () => {
-    try {
-      setIsAnalysisLoading(true);
-      const response = await getAISuggestions({
-        userId: user.id,
-        itemTypeId: typeId.itemTypeId,
-        type: typeId.type,
-      });
-
-      setSuggestions({
-        reasoning: [{ role: 'ai', content: response.aiResponse }],
-        suggestion: {
-          ...response.refined,
-          Items: response.refined.Items.map((item) => {
-            const modifiedItem = {
-              ...item,
-              ownerId: user.id,
-              packId: itemTypeId.itemTypeId,
-              type: item.category,
-              id: uuidv4(),
-            };
-            delete modifiedItem.category;
-            return modifiedItem;
-          }),
-        },
-      });
-
-      console.log(response);
-    } catch (error) {
-      console.error(error);
-    } finally {
-      setIsAnalysisLoading(false);
-    }
-  };
-
   return {
     conversations,
     typeId,
@@ -129,11 +86,7 @@ export const useChat = (itemTypeId = null) => {
     userInput,
     isLoading,
     handleSendMessage,
-    handleSubmitAnalysis,
     setUserInput,
     setTypeId,
-    suggestions,
-    isAnalysisLoading,
-    setSuggestions,
   };
 };
diff --git a/packages/app/hooks/chat/useGetAIResponse.ts b/packages/app/hooks/chat/useGetAIResponse.ts
index b1f129f9a..244c72c51 100644
--- a/packages/app/hooks/chat/useGetAIResponse.ts
+++ b/packages/app/hooks/chat/useGetAIResponse.ts
@@ -3,17 +3,50 @@ import { queryTrpc } from '../../trpc';
 export function useGetAIResponse() {
   const utils = queryTrpc.useContext();
   const mutation = queryTrpc.getAIResponse.useMutation({
+    // onMutate: async ({ userId, conversationId, userInput }) => {
+    //   const previousConversation = queryTrpc.getConversationById.getData({
+    //     conversationId,
+    //   });
+    //   const newQueryData = {
+    //     ...previousConversation,
+    //     messages: [
+    //       ...previousConversation.messages,
+    //       {
+    //         message: userInput,
+    //         sender: userId,
+    //         id: Date.now().toString(),
+    //       },
+    //     ],
+    //   };
+    //   queryTrpc.getConversationById.setData(
+    //     { conversationId },
+    //     newQueryData,
+    //   );
+    //   return {
+    //     previousConversation,
+    //   };
+    // },
+    // onError: (err, { userId, conversationId, userInput }, context) => {
+    //
+    //
+    //   if (context.previousConversation) {
+    //     queryTrpc.getConversationById.setData(
+    //       { conversationId },
+    //       context.previousConversation,
+    //     );
+    //   }
+    // },
     onSuccess: () => {
+      //   queryTrpc.getUserChats.invalidate();
       utils.invalidate();
     },
   });
 
-  const getAIResponse = async ({ userId, userInput, itemTypeId, type }) => {
+  const getAIResponse = async ({ userId, userInput, itemTypeId }) => {
     return mutation.mutate({
       userId,
       userInput: userInput.message,
       itemTypeId,
-      type,
     });
   };
 
@@ -22,34 +55,3 @@ export function useGetAIResponse() {
     ...mutation,
   };
 }
-
-export function useGetAISuggestions() {
-  const utils = queryTrpc.useContext();
-  const mutation = queryTrpc.getAISuggestions.useMutation();
-
-  const getAISuggestions = ({ userId, itemTypeId, type }) => {
-    return new Promise((resolve, reject) => {
-      mutation.mutate(
-        {
-          userId,
-          itemTypeId,
-          type,
-        },
-        {
-          onSuccess: (data) => {
-            utils.invalidate();
-            resolve(data);
-          },
-          onError: (error) => {
-            reject(error);
-          },
-        },
-      );
-    });
-  };
-
-  return {
-    getAISuggestions,
-    ...mutation,
-  };
-}
diff --git a/packages/app/package.json b/packages/app/package.json
index 9534ce8a3..478c278ba 100644
--- a/packages/app/package.json
+++ b/packages/app/package.json
@@ -100,7 +100,6 @@
     "immer": "^10.0.3",
     "jotai": "^2.6.4",
     "lodash": "^4.17.21",
-    "lucide-react-native": "^0.396.0",
     "mapbox-gl": "1.13.3",
     "moti": "^0.27.2",
     "native-base": "^3.4.28",
@@ -119,8 +118,8 @@
     "react-native-google-places-autocomplete": "^2.5.1",
     "react-native-paper": "^5.10.6",
     "react-native-paper-dates": "^0.18.12",
-    "react-native-reanimated": "^3.12.1",
-    "react-native-safe-area-context": "^4.10.5",
+    "react-native-reanimated": "~3.6.2",
+    "react-native-safe-area-context": "4.8.2",
     "react-native-screens": "~3.29.0",
     "react-native-select-dropdown": "^3.3.4",
     "react-native-svg": "14.1.0",
diff --git a/packages/ui/src/Bento/elements/list/ChatList.tsx b/packages/ui/src/Bento/elements/list/ChatList.tsx
index 9a2cc7b31..7f96addae 100644
--- a/packages/ui/src/Bento/elements/list/ChatList.tsx
+++ b/packages/ui/src/Bento/elements/list/ChatList.tsx
@@ -74,7 +74,7 @@ function ChatItem({ item, index }: { item: Message; index: number }) {
   const itsMe = role === 'user';
   const avatar = itsMe ? avatars[0] : avatars[1];
   const [showMessage, setShowMessage] = useState(false);
-  const showDelay = 10;
+  const showDelay = index * 50;
   const [start, setStart] = useState(false);
   const { isDark } = useTheme();
 
diff --git a/packages/ui/src/ThreeDotsMenu/ThreeDotsMenu.tsx b/packages/ui/src/ThreeDotsMenu/ThreeDotsMenu.tsx
index 64b66e672..07314982a 100644
--- a/packages/ui/src/ThreeDotsMenu/ThreeDotsMenu.tsx
+++ b/packages/ui/src/ThreeDotsMenu/ThreeDotsMenu.tsx
@@ -17,6 +17,7 @@ export function ThreeDotsMenu({
   onOpenChange,
   open,
 }: ThreeDotsMenuProps) {
+  console.log('ksksksks', open);
   return (
     <Popover
       size="$5"
diff --git a/server/package.json b/server/package.json
index ab37d9d0f..6ff3386fc 100644
--- a/server/package.json
+++ b/server/package.json
@@ -39,7 +39,7 @@
     "@elysiajs/trpc": "^0.7.0",
     "@hono/node-server": "^1.11.0",
     "@hono/trpc-server": "^0.1.1",
-    "@instructor-ai/instructor": "^1.5.0",
+    "@instructor-ai/instructor": "^1.3.0",
     "@libsql/client": "^0.4.0-pre.5",
     "@packrat/validations": "*",
     "@paralleldrive/cuid2": "^2.2.2",
diff --git a/server/src/controllers/openAi/getAIResponse.ts b/server/src/controllers/openAi/getAIResponse.ts
index d9355f452..48126cbc0 100644
--- a/server/src/controllers/openAi/getAIResponse.ts
+++ b/server/src/controllers/openAi/getAIResponse.ts
@@ -1,6 +1,9 @@
 import { getAIResponseService } from '../../services/openAi/openAi.service';
 import { publicProcedure } from '../../trpc';
 import { z } from 'zod';
+// import { getAIResponseService } from './langchain';
+import { GetResponseFromAIError } from '../../helpers/errors';
+import { responseHandler } from '../../helpers/responseHandler';
 
 /**
  * Retrieves an AI response based on user input and conversation history.
@@ -8,6 +11,19 @@ import { z } from 'zod';
  * @param {Object} res - The response object.
  * @return {Object} The AI response and updated conversation object.
  */
+// export const getAIResponse = async (req, res, next) => {
+//   console.log('Helooooooooooooooooooooooooo');
+//   try {
+//     const { userId, userInput, itemTypeId } = req.body;
+
+//     const result = await getAIResponseService(userId, userInput, itemTypeId);
+
+//     res.locals.data = result;
+//     responseHandler(res);
+//   } catch (error) {
+//     next(GetResponseFromAIError);
+//   }
+// };
 
 export function getAIResponseRoute() {
   return publicProcedure
@@ -16,17 +32,15 @@ export function getAIResponseRoute() {
         userId: z.string(),
         userInput: z.string(),
         itemTypeId: z.string(),
-        type: z.string(),
       }),
     )
     .mutation(async (opts) => {
       const { env } = opts.ctx;
-      const { userId, userInput, itemTypeId, type } = opts.input;
+      const { userId, userInput, itemTypeId } = opts.input;
       return getAIResponseService(
         userId,
         itemTypeId,
         userInput,
-        type,
         env.OPENAI_API_KEY,
       );
     });
diff --git a/server/src/controllers/openAi/getAISuggestions.ts b/server/src/controllers/openAi/getAISuggestions.ts
deleted file mode 100644
index 8ea13f119..000000000
--- a/server/src/controllers/openAi/getAISuggestions.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import { getAISuggestionService } from '../../services/openAi/openAi.service';
-import { publicProcedure } from '../../trpc';
-import { z } from 'zod';
-
-/**
- * Retrieves an AI response based on user input and conversation history.
- * @param {Object} req - The request object.
- * @param {Object} res - The response object.
- * @return {Object} The AI response and updated conversation object.
- */
-
-export function getAISuggestionsRoute() {
-  return publicProcedure
-    .input(
-      z.object({
-        userId: z.string(),
-        itemTypeId: z.string(),
-        type: z.string(),
-      }),
-    )
-    .mutation(async (opts) => {
-      const { env } = opts.ctx;
-      const { userId, itemTypeId, type } = opts.input;
-      return getAISuggestionService(
-        userId,
-        itemTypeId,
-        type,
-        env.OPENAI_API_KEY,
-      );
-    });
-}
diff --git a/server/src/controllers/openAi/index.ts b/server/src/controllers/openAi/index.ts
index 238c5ae35..f4a1ee401 100644
--- a/server/src/controllers/openAi/index.ts
+++ b/server/src/controllers/openAi/index.ts
@@ -1,3 +1,2 @@
 export * from './getAIResponse';
 export * from './getUserChats';
-export * from './getAISuggestions';
diff --git a/server/src/routes/trpcRouter.ts b/server/src/routes/trpcRouter.ts
index 235afe6e8..a1ecf1c0c 100644
--- a/server/src/routes/trpcRouter.ts
+++ b/server/src/routes/trpcRouter.ts
@@ -50,11 +50,7 @@ import {
   scorePackRoute,
 } from '../controllers/pack';
 
-import {
-  getAIResponseRoute,
-  getUserChatsRoute,
-  getAISuggestionsRoute,
-} from '../controllers/openAi';
+import { getAIResponseRoute, getUserChatsRoute } from '../controllers/openAi';
 import {
   addGlobalItemToPackRoute,
   addItemGlobalRoute,
@@ -171,7 +167,6 @@ export const appRouter = trpcRouter({
   getPhotonDetails: getPhotonDetailsRoute(),
   // open ai routes
   getAIResponse: getAIResponseRoute(),
-  getAISuggestions: getAISuggestionsRoute(),
   getUserChats: getUserChatsRoute(),
   // item routes
   getItems: getItemsRoute(),
diff --git a/server/src/services/openAi/getAIResponseService.ts b/server/src/services/openAi/getAIResponseService.ts
index eccbac0b4..2a847a942 100644
--- a/server/src/services/openAi/getAIResponseService.ts
+++ b/server/src/services/openAi/getAIResponseService.ts
@@ -1,8 +1,9 @@
 import OpenAI from 'openai';
 import Instructor from '@instructor-ai/instructor';
+import { z } from 'zod';
 import { Conversation } from '../../drizzle/methods/Conversation';
 import { User } from '../../drizzle/methods/User';
-import { getPackInformation } from './referredItemInformation';
+
 /**
  * Retrieves AI response for a given user input in a conversation.
  * @param {PrismaClient} prisma - Prisma client.
@@ -11,12 +12,10 @@ import { getPackInformation } from './referredItemInformation';
  * @param {string} userInput - The user input in the conversation.
  * @returns {Object} - The AI response and the updated conversation.
  */
-
 export const getAIResponseService = async (
   userId: string,
   itemTypeId: string,
   userInput: string,
-  type: string,
   openAIAPIKey: string,
 ): Promise<object> => {
   if (!openAIAPIKey) {
@@ -32,32 +31,12 @@ export const getAIResponseService = async (
     apiKey: openAIAPIKey,
   });
 
-  // Apply the patch to the OpenAI client
-  const client = Instructor({
-    client: openai,
-    mode: 'FUNCTIONS',
-  });
-
   const user = await userClass.findUser({ userId });
 
   if (!user) {
     throw new Error('User not found');
   }
 
-  let itemInfo;
-  switch (type) {
-    case 'trip':
-      console.log('trip');
-      // info = await getTripInformation(itemTypeId);
-      break;
-    case 'pack':
-      itemInfo = await getPackInformation(itemTypeId);
-      break;
-    default:
-      console.log('trip');
-      throw new Error(`Invalid type: ${itemTypeId}`);
-  }
-
   let conversation: any = await conversationClass.findConversation(
     userId,
     itemTypeId,
@@ -81,7 +60,10 @@ export const getAIResponseService = async (
   // a detailed system message to instruct the model about its role
   const systemMessage = {
     role: 'system',
-    content: itemInfo,
+    content: `You are a helpful assistant that provides hiking advice. 
+    You should only provide advice related to hiking and not generate any other type of content whatsoever.
+    If a user asks for help outside of the hiking domain, respond with: "Sorry, I can not help with that 😅!"
+    Additionally, make your responses more detailed when the user asks relevant hiking-related questions.`,
   };
 
   // Add the system message to the beginning of the messages array
@@ -90,10 +72,11 @@ export const getAIResponseService = async (
   // Add the user message
   messages.push({ role: 'user', content: userInput });
 
-  const response = await client.chat.completions.create({
+  const response = await openai.chat.completions.create({
     model: 'gpt-3.5-turbo',
     messages,
-    temperature: 0.8,
+    temperature: 0.5, // Lower temperature to make output more deterministic
+    // min_tokens: 100, // Limit the length of the response this doesnt exist still
   });
 
   const aiResponse = response.choices?.[0]?.message?.content?.trim() || '';
diff --git a/server/src/services/openAi/getAISuggestionService.ts b/server/src/services/openAi/getAISuggestionService.ts
deleted file mode 100644
index 5ec9f23c7..000000000
--- a/server/src/services/openAi/getAISuggestionService.ts
+++ /dev/null
@@ -1,176 +0,0 @@
-import OpenAI from 'openai';
-import Instructor from '@instructor-ai/instructor';
-import { User } from '../../drizzle/methods/User';
-import { getPackByIdService } from '../pack/getPackByIdService';
-import { getPackSuggestionPrompt } from './referredItemInformation';
-import { PackSchema } from './zodSchema';
-
-/**
- * Retrieves AI response for a given user input in a conversation.
- * @param {PrismaClient} prisma - Prisma client.
- * @param {string} userId - The ID of the user.
- * @param {string} itemTypeId - The ID of the conversation.
- * @param {string} userInput - The user input in the conversation.
- * @returns {Object} - The AI response and the updated conversation.
- */
-
-export const getAISuggestionService = async (
-  userId: string,
-  itemTypeId: string,
-  type: string,
-  openAIAPIKey: string,
-): Promise<object> => {
-  if (!openAIAPIKey) {
-    throw new Error(
-      'Failed to get response from AI. OPENAI_API_KEY is not set.',
-    );
-  }
-  const userClass = new User();
-
-  const openai = new OpenAI({
-    apiKey: openAIAPIKey,
-  });
-
-  // Apply the patch to the OpenAI client
-  const client = Instructor({
-    client: openai,
-    mode: 'TOOLS',
-  });
-
-  const refiner = Instructor({
-    client: openai,
-    mode: 'FUNCTIONS',
-  });
-
-  const user = await userClass.findUser({ userId });
-
-  if (!user) {
-    throw new Error('User not found');
-  }
-
-  let itemInfo;
-  switch (type) {
-    case 'trip':
-      console.log('trip');
-      // info = await getTripInformation(itemTypeId);
-      break;
-    case 'pack':
-      itemInfo = await getPackSuggestionPrompt(itemTypeId);
-      break;
-    default:
-      console.log('trip');
-      throw new Error(`Invalid type: ${itemTypeId}`);
-  }
-
-  const response = await client.chat.completions.create({
-    model: 'gpt-3.5-turbo',
-    messages: [
-      {
-        role: 'system',
-        content: `Analyze and Optimize the user pack as per the following guidelines:
-            -Use the pack details to give personalized recommendations and optimizations.
-            -improve the pack items considering safety, comfort, and efficiency.
-            -Suggest a new Item that might reduce excessive weight, such as substituting heavy items with lighter alternatives (e.g., a water filter instead of carrying excessive water).
-            -add essential items that might be missing from the pack.
-
-            Here are some good guidelines to follow:
-            General:
-                Food:
-                Meals: Trail-friendly meals (freeze-dried, instant)
-                Snacks: Trail mix, energy bars, jerky, dried fruit
-                Water:
-                Hydration: Water bottles or hydration bladder
-                Purification: Water filter or purification tablets
-                Essentials:
-                Navigation: Map, compass, GPS device
-                Clothing: Weather-appropriate layers, hat, hiking boots, extra socks
-                Safety: First aid kit, personal medications, sunscreen, insect repellent
-                Gear: Comfortable backpack, headlamp with extra batteries, multi-tool
-                Documents: ID, permits, emergency contact info
-                Communication: Cell phone, portable charger or power bank
-
-            Food Guide:
-
-                Hey there, adventurers! Ready for your next hike? Here is a quick and tasty guide to fuel your journey:
-                Easy Snacks:
-                Trail Mix: Nuts, seeds, dried fruit, and chocolate bits.
-                Energy Bars: Natural ingredient bars.
-                Dried Fruits: Apricots, apple slices, raisins, dates.
-                Nuts & Seeds: Almonds, walnuts, sunflower seeds.
-                Lunch Options:
-                Sandwiches: Nut butter, cheese, or lean meat.
-                Wraps: Whole-grain tortillas with hummus, veggies, or protein.
-                Cheese & Crackers: Hard cheese and whole-grain crackers.
-                Quick Meals:
-                Instant Noodles/Couscous: Quick-cook with hot water.
-                Dehydrated Meals: Lightweight, just add water.
-
-            Essentials Guide:
-                Navigation: Map & Compass,GPS Device
-                Clothing: Quick-Dry Layers, Waterproof Jacket, Extra Socks, Hat and Sunglasses
-                Safety Gear: First Aid Kit, Multi-Tool/Knife, Whistle
-                Sun Protection: Sunscreen, Hat & Sunglasses
-                Light: Headlamp/Flashlight
-                Emergency Shelter: Bivy Sack/Space Blanket
-                Fire: Matches/Lighter
-                Backpack: Comfortable Hiking Backpack
-
-            Water Guide:
-                Water Bottles/Reservoir: Carry at least 2-3 liters.
-                Purification Straw: Lightweight and effective.
-                Portable Water Filter: Perfect for streams and lakes.
-
-            What to Pack and What's Too Heavy:
-
-                Lightweight Food Options:
-
-                  Snacks:
-
-                    Instead of whole nuts, consider packing trail mix or nut butter packets. 🥜
-                    Switch granola bars with lighter energy gels or fruit leathers. 🍇
-                  Meals:
-
-                    Replace cans of food with dehydrated meals or instant soup mixes. 🥫 ➡️🍲
-                    Use whole grain wraps instead of sandwiches with heavy bread to reduce weight. 🌯
-                  Fruits:
-
-                    Sub out whole fruits for dried fruits like apricots, raisins, or banana chips. 🍎 ➡️🍏
-                    Consider fruit strips or fruit leather instead of heavier fresh fruit. 🍑
-                  Hydration:
-
-                    Instead of carrying multiple bottles of water, use a lightweight water filter to refill from natural sources. 🚰
-                    Carry electrolyte powders instead of pre-made drinks. 💧➡️⚡
-                  Tips for Packing Light:
-
-                  Portion Control: Pack smaller portions of high-calorie, nutrient-dense foods.
-                  Resealable Bags: Use ziplock bags for organizing and reducing the weight of packaging.
-                  Multipurpose Items: Bring items that can serve multiple purposes (e.g., a pack towel that doubles as a napkin).
-              
-            * Packing lightly yet efficiently can make hike more pleasant. Make sure to suggest these lightweight food options to pack.
-            * Give a good reasoning and then Finally 'ALWAYS' Give the suggested and improved pack in the users original request format,
-              remember the items in the pack array of of strings "name (weight and unit of measurement(lb, oz, kg, g), quantity pcs, category: category name)"
-              just like the user prompt. and category is of three Either Food, Water or Essentials.`,
-      },
-      { role: 'user', content: itemInfo },
-    ],
-  });
-
-  const aiResponse = response.choices?.[0]?.message?.content?.trim() || '';
-
-  const refined = await refiner.chat.completions.create({
-    model: 'gpt-3.5-turbo',
-    messages: [
-      {
-        role: 'user',
-        content: aiResponse,
-      },
-    ],
-    response_model: { schema: PackSchema, name: 'Pack' },
-    max_retries: 2,
-  });
-
-  return {
-    aiResponse,
-    refined,
-  };
-};
diff --git a/server/src/services/openAi/langchain/index.ts b/server/src/services/openAi/langchain/index.ts
index bfcf71b22..f0b0e7dd3 100644
--- a/server/src/services/openAi/langchain/index.ts
+++ b/server/src/services/openAi/langchain/index.ts
@@ -1,8 +1,8 @@
 import { ChatOpenAI } from 'langchain/chat_models/openai';
 import { AIMessage, HumanMessage, SystemMessage } from 'langchain/schema';
 import Conversation from '../../../models/openai/conversationModel';
-import { getPackByIdService } from '../../pack/getPackByIdService';
-import { getTripByIdService } from '../../trip/getTripByIdService';
+import { getPackByIdService } from '../../../services/pack/pack.service';
+import { getTripByIdService } from '../../../services/trip/getTripByIdService';
 import mongoose from 'mongoose';
 import User from '../../../models/userModel';
 
@@ -80,7 +80,7 @@ export async function checkAPIKey() {
   }
 }
 
-export async function getPackInformation(packId) {
+async function getPackInformation(packId) {
   if (!packId) return '';
   const packData: any = await getPackByIdService(packId);
   return `Analyze the pack titled '${packData.name}', owned by ${packData.owners
diff --git a/server/src/services/openAi/openAi.service.ts b/server/src/services/openAi/openAi.service.ts
index ba4fa0252..40381c31a 100644
--- a/server/src/services/openAi/openAi.service.ts
+++ b/server/src/services/openAi/openAi.service.ts
@@ -1,3 +1,2 @@
 export * from './getAIResponseService';
 export * from './getUserChatsService';
-export * from './getAISuggestionService';
diff --git a/server/src/services/openAi/referredItemInformation/index.ts b/server/src/services/openAi/referredItemInformation/index.ts
deleted file mode 100644
index 6342f570f..000000000
--- a/server/src/services/openAi/referredItemInformation/index.ts
+++ /dev/null
@@ -1,133 +0,0 @@
-import { getPackByIdService } from '../../pack/getPackByIdService';
-
-export async function getPackInformation(packId) {
-  if (!packId) return '';
-  const packData: any = await getPackByIdService(packId);
-
-  return `You are a Helpful PackRat Assistant who provides all information and assistance to users for 
-    Hiking Adventures  🏞️  Hiking is your specialty. You are to answer questions about trails, gears, safety
-    or packing trips. Note that you are only able to assist with hiking-related questions. If the user's inquiry isn't about hiking,
-    respond with "Sorry, I can not help with that 😅!. Ready to explore the great outdoors? I'm ready to help!"
-    General greetings and polite interactions are fine. Remember to always be helpful and informative. 
-
-    The user has a pack titled ${packData.name}, owned by ${packData.owner.name}. 
-
-    This pack contains items like ${packData.items
-      .map(
-        (item: any) =>
-          `${item.name} (${item.weight}${item.unit}, ${item.quantity} pcs, category: ${item.category.name})`,
-      )
-      .join(', ')}. 
-    The pack is ${packData.is_public ? 'public' : 'private'}, favorited by ${
-      packData.favorites_count
-    } users, created on ${new Date(packData.createdAt).toLocaleDateString()}. 
-    It is graded as ${packData?.grades?.weight}, ${
-      packData?.grades?.essentialItems
-    }, and ${
-      packData?.grades?.redundancyAndVersatility
-    } in weight, essential items, and redundancy/versatility respectively. 
-    The scores are: weight ${packData?.scores?.weightScore}, essential items ${
-      packData?.scores?.essentialItemsScore
-    }, and redundancy/versatility ${
-      packData?.scores?.redundancyAndVersatilityScore
-    }, 
-    totaling ${packData?.totalScore} with a total weight of ${
-      packData.total_weight
-    }g.
-    
-    When interacting with the user:
-    - Provide detailed advice on hiking-related questions.
-    - Use the pack details to give personalized recommendations and optimizations.
-    - Here are some good guidelines to follow:
-      General:
-          Food:
-          Meals: Trail-friendly meals (freeze-dried, instant)
-          Snacks: Trail mix, energy bars, jerky, dried fruit
-          Water:
-          Hydration: Water bottles or hydration bladder
-          Purification: Water filter or purification tablets
-          Essentials:
-          Navigation: Map, compass, GPS device
-          Clothing: Weather-appropriate layers, hat, hiking boots, extra socks
-          Safety: First aid kit, personal medications, sunscreen, insect repellent
-          Gear: Comfortable backpack, headlamp with extra batteries, multi-tool
-          Documents: ID, permits, emergency contact info
-          Communication: Cell phone, portable charger or power bank
-
-      Food Guide:
-
-          Hey there, adventurers! Ready for your next hike? Here is a quick and tasty guide to fuel your journey:
-          Easy Snacks:
-          Trail Mix: Nuts, seeds, dried fruit, and chocolate bits.
-          Energy Bars: Natural ingredient bars.
-          Dried Fruits: Apricots, apple slices, raisins, dates.
-          Nuts & Seeds: Almonds, walnuts, sunflower seeds.
-          Lunch Options:
-          Sandwiches: Nut butter, cheese, or lean meat.
-          Wraps: Whole-grain tortillas with hummus, veggies, or protein.
-          Cheese & Crackers: Hard cheese and whole-grain crackers.
-          Quick Meals:
-          Instant Noodles/Couscous: Quick-cook with hot water.
-          Dehydrated Meals: Lightweight, just add water.
-
-      Essentials Guide:
-          Navigation: Map & Compass,GPS Device
-          Clothing: Quick-Dry Layers, Waterproof Jacket, Extra Socks, Hat and Sunglasses
-          Safety Gear: First Aid Kit, Multi-Tool/Knife, Whistle
-          Sun Protection: Sunscreen, Hat & Sunglasses
-          Light: Headlamp/Flashlight
-          Emergency Shelter: Bivy Sack/Space Blanket
-          Fire: Matches/Lighter
-          Backpack: Comfortable Hiking Backpack
-
-      Water Guide:
-          Water Bottles/Reservoir: Carry at least 2-3 liters.
-          Purification Straw: Lightweight and effective.
-          Portable Water Filter: Perfect for streams and lakes.
-    - What to Pack and What's Too Heavy:
-
-      Lightweight Food Options:
-
-      Snacks:
-
-      Instead of whole nuts, consider packing trail mix or nut butter packets. 🥜
-      Switch granola bars with lighter energy gels or fruit leathers. 🍇
-      Meals:
-
-      Replace cans of food with dehydrated meals or instant soup mixes. 🥫 ➡️🍲
-      Use whole grain wraps instead of sandwiches with heavy bread to reduce weight. 🌯
-      Fruits:
-
-      Sub out whole fruits for dried fruits like apricots, raisins, or banana chips. 🍎 ➡️🍏
-      Consider fruit strips or fruit leather instead of heavier fresh fruit. 🍑
-      Hydration:
-
-      Instead of carrying multiple bottles of water, use a lightweight water filter to refill from natural sources. 🚰
-      Carry electrolyte powders instead of pre-made drinks. 💧➡️⚡
-      Tips for Packing Light:
-
-      Portion Control: Pack smaller portions of high-calorie, nutrient-dense foods.
-      Resealable Bags: Use ziplock bags for organizing and reducing the weight of packaging.
-      Multipurpose Items: Bring items that can serve multiple purposes (e.g., a pack towel that doubles as a napkin).
-      Packing lightly yet efficiently can make your hike more pleasant. Make sure to add these lightweight food options to your pack and enjoy a comfortable adventure! 🌞🍏🥜🍫🌲✨
-
-    - Be proactive in suggesting useful items or changes based on the pack's contents.
-    - Always keep the user's trip specifics in mind, such as destination, duration, and weather conditions.
-
-    Remember, your goal is to enhance the user's hiking experience by providing valuable and relevant advice based on the context of their pack and trip.`;
-}
-
-export const getPackSuggestionPrompt = async (packId) => {
-  if (!packId) return '';
-  const packData: any = await getPackByIdService(packId);
-
-  return `Below are the details of my pack titled ${packData.name}
-    "Items: ${packData.items
-      .map(
-        (item: any) =>
-          `${item.name} (${item.weight}${item.unit}, ${item.quantity} pcs, category: ${item.category.name})`,
-      )
-      .join(', ')},
-    Total Weight: ${packData.total_weight}g".
-`;
-};
diff --git a/server/src/services/openAi/zodSchema.ts b/server/src/services/openAi/zodSchema.ts
deleted file mode 100644
index 584eafc52..000000000
--- a/server/src/services/openAi/zodSchema.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import { z } from 'zod';
-
-const ItemSchema = z.object({
-  name: z.string(),
-  weight: z.number(),
-  unit: z.string(),
-  quantity: z.number(),
-  category: z.enum(['Food', 'Water', 'Essentials']),
-});
-
-const UserSchema = z.object({
-  id: z.string(),
-  name: z.string(),
-  username: z.string(),
-});
-
-const ItemPackSchema = z.object({
-  packId: z.string(),
-  item: ItemSchema,
-});
-
-const TripSchema = z.object({
-  id: z.string(),
-  name: z.string(),
-});
-
-export const PackSchema = z.object({
-  Items: z
-    .array(ItemSchema)
-    .describe('This are items that are in the users pack'),
-});
diff --git a/server/src/services/pack/getPackByIdService.ts b/server/src/services/pack/getPackByIdService.ts
index a5b352c9a..91d76824b 100644
--- a/server/src/services/pack/getPackByIdService.ts
+++ b/server/src/services/pack/getPackByIdService.ts
@@ -23,11 +23,10 @@ export const getPackByIdService = async (packId: string) => {
     const pack = (await packClass.findPack({
       id: packId,
     })) as PackWithItemPacks;
-
     const packData = {
       ...pack,
-      scores: pack.scores ? JSON.parse(pack.scores as string) : {},
-      grades: pack.grades ? JSON.parse(pack.grades as string) : {},
+      scores: JSON.parse(pack.scores as string),
+      grades: JSON.parse(pack.grades as string),
       total_weight: packClass.computeTotalWeight(pack),
       favorites_count: packClass.computeFavouritesCount(pack),
       total_score: packClass.computeTotalScores(pack),
diff --git a/yarn.lock b/yarn.lock
index 92130ce7f..7ff7ebb8c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -117,16 +117,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/code-frame@npm:^7.24.7":
-  version: 7.24.7
-  resolution: "@babel/code-frame@npm:7.24.7"
-  dependencies:
-    "@babel/highlight": "npm:^7.24.7"
-    picocolors: "npm:^1.0.0"
-  checksum: 10/4812e94885ba7e3213d49583a155fdffb05292330f0a9b2c41b49288da70cf3c746a3fda0bf1074041a6d741c33f8d7be24be5e96f41ef77395eeddc5c9ff624
-  languageName: node
-  linkType: hard
-
 "@babel/compat-data@npm:^7.20.5, @babel/compat-data@npm:^7.22.6, @babel/compat-data@npm:^7.23.5, @babel/compat-data@npm:^7.24.4":
   version: 7.24.4
   resolution: "@babel/compat-data@npm:7.24.4"
@@ -169,18 +159,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/generator@npm:^7.24.7":
-  version: 7.24.7
-  resolution: "@babel/generator@npm:7.24.7"
-  dependencies:
-    "@babel/types": "npm:^7.24.7"
-    "@jridgewell/gen-mapping": "npm:^0.3.5"
-    "@jridgewell/trace-mapping": "npm:^0.3.25"
-    jsesc: "npm:^2.5.1"
-  checksum: 10/c71d24a4b41b19c10d2f2eb819f27d4cf94220e2322f7c8fed8bfbbb115b2bebbdd6dc1f27dac78a175e90604def58d763af87e0fa81ce4ab1582858162cf768
-  languageName: node
-  linkType: hard
-
 "@babel/helper-annotate-as-pure@npm:^7.18.6, @babel/helper-annotate-as-pure@npm:^7.22.5":
   version: 7.22.5
   resolution: "@babel/helper-annotate-as-pure@npm:7.22.5"
@@ -266,15 +244,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-environment-visitor@npm:^7.24.7":
-  version: 7.24.7
-  resolution: "@babel/helper-environment-visitor@npm:7.24.7"
-  dependencies:
-    "@babel/types": "npm:^7.24.7"
-  checksum: 10/079d86e65701b29ebc10baf6ed548d17c19b808a07aa6885cc141b690a78581b180ee92b580d755361dc3b16adf975b2d2058b8ce6c86675fcaf43cf22f2f7c6
-  languageName: node
-  linkType: hard
-
 "@babel/helper-function-name@npm:^7.23.0":
   version: 7.23.0
   resolution: "@babel/helper-function-name@npm:7.23.0"
@@ -285,16 +254,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-function-name@npm:^7.24.7":
-  version: 7.24.7
-  resolution: "@babel/helper-function-name@npm:7.24.7"
-  dependencies:
-    "@babel/template": "npm:^7.24.7"
-    "@babel/types": "npm:^7.24.7"
-  checksum: 10/2ceb3d9b2b35a0fc4100fc06ed7be3bc38f03ff0bf128ff0edbc0cc7dd842967b1496fc70b5c616c747d7711c2b87e7d025c8888f48740631d6148a9d3614f85
-  languageName: node
-  linkType: hard
-
 "@babel/helper-hoist-variables@npm:^7.22.5":
   version: 7.22.5
   resolution: "@babel/helper-hoist-variables@npm:7.22.5"
@@ -304,15 +263,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-hoist-variables@npm:^7.24.7":
-  version: 7.24.7
-  resolution: "@babel/helper-hoist-variables@npm:7.24.7"
-  dependencies:
-    "@babel/types": "npm:^7.24.7"
-  checksum: 10/6cfdcf2289cd12185dcdbdf2435fa8d3447b797ac75851166de9fc8503e2fd0021db6baf8dfbecad3753e582c08e6a3f805c8d00cbed756060a877d705bd8d8d
-  languageName: node
-  linkType: hard
-
 "@babel/helper-member-expression-to-functions@npm:^7.23.0, @babel/helper-member-expression-to-functions@npm:^7.24.5":
   version: 7.24.5
   resolution: "@babel/helper-member-expression-to-functions@npm:7.24.5"
@@ -362,13 +312,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-plugin-utils@npm:^7.24.7":
-  version: 7.24.7
-  resolution: "@babel/helper-plugin-utils@npm:7.24.7"
-  checksum: 10/dad51622f0123fdba4e2d40a81a6b7d6ef4b1491b2f92fd9749447a36bde809106cf117358705057a2adc8fd73d5dc090222e0561b1213dae8601c8367f5aac8
-  languageName: node
-  linkType: hard
-
 "@babel/helper-remap-async-to-generator@npm:^7.18.9, @babel/helper-remap-async-to-generator@npm:^7.22.20":
   version: 7.22.20
   resolution: "@babel/helper-remap-async-to-generator@npm:7.22.20"
@@ -413,16 +356,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-skip-transparent-expression-wrappers@npm:^7.24.7":
-  version: 7.24.7
-  resolution: "@babel/helper-skip-transparent-expression-wrappers@npm:7.24.7"
-  dependencies:
-    "@babel/traverse": "npm:^7.24.7"
-    "@babel/types": "npm:^7.24.7"
-  checksum: 10/784a6fdd251a9a7e42ccd04aca087ecdab83eddc60fda76a2950e00eb239cc937d3c914266f0cc476298b52ac3f44ffd04c358e808bd17552a7e008d75494a77
-  languageName: node
-  linkType: hard
-
 "@babel/helper-split-export-declaration@npm:^7.24.5":
   version: 7.24.5
   resolution: "@babel/helper-split-export-declaration@npm:7.24.5"
@@ -432,15 +365,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-split-export-declaration@npm:^7.24.7":
-  version: 7.24.7
-  resolution: "@babel/helper-split-export-declaration@npm:7.24.7"
-  dependencies:
-    "@babel/types": "npm:^7.24.7"
-  checksum: 10/ff04a3071603c87de0d6ee2540b7291ab36305b329bd047cdbb6cbd7db335a12f9a77af1cf708779f75f13c4d9af46093c00b34432e50b2411872c658d1a2e5e
-  languageName: node
-  linkType: hard
-
 "@babel/helper-string-parser@npm:^7.24.1":
   version: 7.24.1
   resolution: "@babel/helper-string-parser@npm:7.24.1"
@@ -448,13 +372,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-string-parser@npm:^7.24.7":
-  version: 7.24.7
-  resolution: "@babel/helper-string-parser@npm:7.24.7"
-  checksum: 10/603d8d962bbe89907aa99a8f19a006759ab7b2464615f20a6a22e3e2e8375af37ddd0e5175c9e622e1c4b2d83607ffb41055a59d0ce34404502af30fde573a5c
-  languageName: node
-  linkType: hard
-
 "@babel/helper-validator-identifier@npm:^7.22.20, @babel/helper-validator-identifier@npm:^7.24.5":
   version: 7.24.5
   resolution: "@babel/helper-validator-identifier@npm:7.24.5"
@@ -462,13 +379,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-validator-identifier@npm:^7.24.7":
-  version: 7.24.7
-  resolution: "@babel/helper-validator-identifier@npm:7.24.7"
-  checksum: 10/86875063f57361471b531dbc2ea10bbf5406e12b06d249b03827d361db4cad2388c6f00936bcd9dc86479f7e2c69ea21412c2228d4b3672588b754b70a449d4b
-  languageName: node
-  linkType: hard
-
 "@babel/helper-validator-option@npm:^7.23.5":
   version: 7.23.5
   resolution: "@babel/helper-validator-option@npm:7.23.5"
@@ -510,18 +420,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/highlight@npm:^7.24.7":
-  version: 7.24.7
-  resolution: "@babel/highlight@npm:7.24.7"
-  dependencies:
-    "@babel/helper-validator-identifier": "npm:^7.24.7"
-    chalk: "npm:^2.4.2"
-    js-tokens: "npm:^4.0.0"
-    picocolors: "npm:^1.0.0"
-  checksum: 10/69b73f38cdd4f881b09b939a711e76646da34f4834f4ce141d7a49a6bb1926eab1c594148970a8aa9360398dff800f63aade4e81fafdd7c8d8a8489ea93bfec1
-  languageName: node
-  linkType: hard
-
 "@babel/parser@npm:^7.1.0, @babel/parser@npm:^7.1.6, @babel/parser@npm:^7.13.16, @babel/parser@npm:^7.14.7, @babel/parser@npm:^7.20.0, @babel/parser@npm:^7.20.15, @babel/parser@npm:^7.20.7, @babel/parser@npm:^7.23.3, @babel/parser@npm:^7.23.9, @babel/parser@npm:^7.24.0, @babel/parser@npm:^7.24.5":
   version: 7.24.5
   resolution: "@babel/parser@npm:7.24.5"
@@ -531,15 +429,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/parser@npm:^7.24.7":
-  version: 7.24.7
-  resolution: "@babel/parser@npm:7.24.7"
-  bin:
-    parser: ./bin/babel-parser.js
-  checksum: 10/ef9ebce60e13db560ccc7af9235d460f6726bb7e23ae2d675098c1fc43d5249067be60d4118889dad33b1d4f85162cf66baf554719e1669f29bb20e71322568e
-  languageName: node
-  linkType: hard
-
 "@babel/plugin-bugfix-firefox-class-in-computed-class-key@npm:^7.24.5":
   version: 7.24.5
   resolution: "@babel/plugin-bugfix-firefox-class-in-computed-class-key@npm:7.24.5"
@@ -1014,17 +903,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-arrow-functions@npm:^7.0.0-0":
-  version: 7.24.7
-  resolution: "@babel/plugin-transform-arrow-functions@npm:7.24.7"
-  dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.24.7"
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: 10/6720173645826046878015c579c2ca9d93cdba79a2832f0180f5cf147d9817c85bf9c8338b16d6bdaa71f87809b7a194a6902e6c82ec00b6354aca6b40abe5e6
-  languageName: node
-  linkType: hard
-
 "@babel/plugin-transform-async-generator-functions@npm:^7.24.3":
   version: 7.24.3
   resolution: "@babel/plugin-transform-async-generator-functions@npm:7.24.3"
@@ -1356,18 +1234,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-nullish-coalescing-operator@npm:^7.0.0-0":
-  version: 7.24.7
-  resolution: "@babel/plugin-transform-nullish-coalescing-operator@npm:7.24.7"
-  dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.24.7"
-    "@babel/plugin-syntax-nullish-coalescing-operator": "npm:^7.8.3"
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: 10/113cd24b6ce4d0a8e54ad9324428244942ce752a3fd38f8b615c3a786641ec18a00a01b662fe4cbebf369358f5904a975bbde0a977b839f2438b16f0d7d1dd36
-  languageName: node
-  linkType: hard
-
 "@babel/plugin-transform-nullish-coalescing-operator@npm:^7.24.1":
   version: 7.24.1
   resolution: "@babel/plugin-transform-nullish-coalescing-operator@npm:7.24.1"
@@ -1441,19 +1307,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-optional-chaining@npm:^7.0.0-0":
-  version: 7.24.7
-  resolution: "@babel/plugin-transform-optional-chaining@npm:7.24.7"
-  dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.24.7"
-    "@babel/helper-skip-transparent-expression-wrappers": "npm:^7.24.7"
-    "@babel/plugin-syntax-optional-chaining": "npm:^7.8.3"
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: 10/0835caa8fa8561ba5da8edb82aee93aef8e5145eae33e5400569bb4fae879c596cd35d3bfe7519b222261fc370b1291c499870ca6ad9903e1a71cfaaa27a5454
-  languageName: node
-  linkType: hard
-
 "@babel/plugin-transform-optional-chaining@npm:^7.24.1, @babel/plugin-transform-optional-chaining@npm:^7.24.5":
   version: 7.24.5
   resolution: "@babel/plugin-transform-optional-chaining@npm:7.24.5"
@@ -1636,17 +1489,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-shorthand-properties@npm:^7.0.0-0":
-  version: 7.24.7
-  resolution: "@babel/plugin-transform-shorthand-properties@npm:7.24.7"
-  dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.24.7"
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: 10/c68c2be965007e0cb6667daa209bc0af877cab4b327ef2e21b2114c38554243c3f7fdcc5b03679b20f72a26d966aa646af771f3165c882067e85a3887647f028
-  languageName: node
-  linkType: hard
-
 "@babel/plugin-transform-spread@npm:^7.0.0, @babel/plugin-transform-spread@npm:^7.24.1":
   version: 7.24.1
   resolution: "@babel/plugin-transform-spread@npm:7.24.1"
@@ -1681,17 +1523,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-template-literals@npm:^7.0.0-0":
-  version: 7.24.7
-  resolution: "@babel/plugin-transform-template-literals@npm:7.24.7"
-  dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.24.7"
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: 10/ecf05a8511176d5570cb0d481577a407a4e8a9a430f86522d809e0ac2c823913e854ef9e2a1c83c0bd7c12489d82e1b48fabb52e697e80d6a6962125197593ca
-  languageName: node
-  linkType: hard
-
 "@babel/plugin-transform-typeof-symbol@npm:^7.24.5":
   version: 7.24.5
   resolution: "@babel/plugin-transform-typeof-symbol@npm:7.24.5"
@@ -1963,17 +1794,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/template@npm:^7.24.7":
-  version: 7.24.7
-  resolution: "@babel/template@npm:7.24.7"
-  dependencies:
-    "@babel/code-frame": "npm:^7.24.7"
-    "@babel/parser": "npm:^7.24.7"
-    "@babel/types": "npm:^7.24.7"
-  checksum: 10/5975d404ef51cf379515eb0f80b115981d0b9dff5539e53a47516644abb8c83d7559f5b083eb1d4977b20d8359ebb2f911ccd4f729143f8958fdc465f976d843
-  languageName: node
-  linkType: hard
-
 "@babel/traverse@npm:^7.1.6, @babel/traverse@npm:^7.20.0, @babel/traverse@npm:^7.23.3, @babel/traverse@npm:^7.24.1, @babel/traverse@npm:^7.24.5":
   version: 7.24.5
   resolution: "@babel/traverse@npm:7.24.5"
@@ -1992,24 +1812,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/traverse@npm:^7.24.7":
-  version: 7.24.7
-  resolution: "@babel/traverse@npm:7.24.7"
-  dependencies:
-    "@babel/code-frame": "npm:^7.24.7"
-    "@babel/generator": "npm:^7.24.7"
-    "@babel/helper-environment-visitor": "npm:^7.24.7"
-    "@babel/helper-function-name": "npm:^7.24.7"
-    "@babel/helper-hoist-variables": "npm:^7.24.7"
-    "@babel/helper-split-export-declaration": "npm:^7.24.7"
-    "@babel/parser": "npm:^7.24.7"
-    "@babel/types": "npm:^7.24.7"
-    debug: "npm:^4.3.1"
-    globals: "npm:^11.1.0"
-  checksum: 10/785cf26383a992740e492efba7016de964cd06c05c9d7146fa1b5ead409e054c444f50b36dc37856884a56e32cf9d3105ddf1543486b6df68300bffb117a245a
-  languageName: node
-  linkType: hard
-
 "@babel/types@npm:^7.0.0, @babel/types@npm:^7.1.6, @babel/types@npm:^7.20.0, @babel/types@npm:^7.20.7, @babel/types@npm:^7.21.3, @babel/types@npm:^7.22.15, @babel/types@npm:^7.22.5, @babel/types@npm:^7.23.0, @babel/types@npm:^7.23.3, @babel/types@npm:^7.23.4, @babel/types@npm:^7.24.0, @babel/types@npm:^7.24.5, @babel/types@npm:^7.3.3, @babel/types@npm:^7.4.4, @babel/types@npm:^7.8.3":
   version: 7.24.5
   resolution: "@babel/types@npm:7.24.5"
@@ -2021,17 +1823,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/types@npm:^7.24.7":
-  version: 7.24.7
-  resolution: "@babel/types@npm:7.24.7"
-  dependencies:
-    "@babel/helper-string-parser": "npm:^7.24.7"
-    "@babel/helper-validator-identifier": "npm:^7.24.7"
-    to-fast-properties: "npm:^2.0.0"
-  checksum: 10/ad3c8c0d6fb4acb0bb74bb5b4bb849b181bf6185677ef9c59c18856c81e43628d0858253cf232f0eca806f02e08eff85a1d3e636a3e94daea737597796b0b430
-  languageName: node
-  linkType: hard
-
 "@bcoe/v8-coverage@npm:^0.2.3":
   version: 0.2.3
   resolution: "@bcoe/v8-coverage@npm:0.2.3"
@@ -4531,16 +4322,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@instructor-ai/instructor@npm:^1.5.0":
-  version: 1.5.0
-  resolution: "@instructor-ai/instructor@npm:1.5.0"
+"@instructor-ai/instructor@npm:^1.3.0":
+  version: 1.3.0
+  resolution: "@instructor-ai/instructor@npm:1.3.0"
   dependencies:
     zod-stream: "npm:1.0.3"
     zod-validation-error: "npm:^2.1.0"
   peerDependencies:
     openai: ">=4.28.0"
     zod: ">=3.22.4"
-  checksum: 10/c547afffe3dcabaecfa179dc471413dfbe55d597c8ab74f5fa03b91497b3d2bc13ca0dad038d6744c77a0efac04dbd51017e83e66949e54bcb3dd3d70deabfee
+  checksum: 10/29174fc7edfb6febbdddd68798160380ea4fe9e16c2e39853057c3b6f827ecda1e0334bffca8ec96cf477b51ee6e4088977ffffeb4c5034da91dd5cdc5f230f9
   languageName: node
   linkType: hard
 
@@ -12962,7 +12753,6 @@ __metadata:
     immer: "npm:^10.0.3"
     jotai: "npm:^2.6.4"
     lodash: "npm:^4.17.21"
-    lucide-react-native: "npm:^0.396.0"
     mapbox-gl: "npm:1.13.3"
     moti: "npm:^0.27.2"
     native-base: "npm:^3.4.28"
@@ -12982,8 +12772,8 @@ __metadata:
     react-native-google-places-autocomplete: "npm:^2.5.1"
     react-native-paper: "npm:^5.10.6"
     react-native-paper-dates: "npm:^0.18.12"
-    react-native-reanimated: "npm:^3.12.1"
-    react-native-safe-area-context: "npm:^4.10.5"
+    react-native-reanimated: "npm:~3.6.2"
+    react-native-safe-area-context: "npm:4.8.2"
     react-native-screens: "npm:~3.29.0"
     react-native-select-dropdown: "npm:^3.3.4"
     react-native-svg: "npm:14.1.0"
@@ -25815,17 +25605,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lucide-react-native@npm:^0.396.0":
-  version: 0.396.0
-  resolution: "lucide-react-native@npm:0.396.0"
-  peerDependencies:
-    react: ^16.5.1 || ^17.0.0 || ^18.0.0
-    react-native: "*"
-    react-native-svg: ^12.0.0 || ^13.0.0 || ^14.0.0 || ^15.0.0
-  checksum: 10/b79bacfc258ad3e24832c9434e52527eba5c60c337e806e7d2ad98677bacb49a0ccfcefdef779ab3317dc71a6bf81ab815effa0bb22770e05d871c7635d7f5c2
-  languageName: node
-  linkType: hard
-
 "luxon@npm:^3.2.1":
   version: 3.4.4
   resolution: "luxon@npm:3.4.4"
@@ -30943,26 +30722,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-native-reanimated@npm:^3.12.1":
-  version: 3.12.1
-  resolution: "react-native-reanimated@npm:3.12.1"
-  dependencies:
-    "@babel/plugin-transform-arrow-functions": "npm:^7.0.0-0"
-    "@babel/plugin-transform-nullish-coalescing-operator": "npm:^7.0.0-0"
-    "@babel/plugin-transform-optional-chaining": "npm:^7.0.0-0"
-    "@babel/plugin-transform-shorthand-properties": "npm:^7.0.0-0"
-    "@babel/plugin-transform-template-literals": "npm:^7.0.0-0"
-    "@babel/preset-typescript": "npm:^7.16.7"
-    convert-source-map: "npm:^2.0.0"
-    invariant: "npm:^2.2.4"
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-    react: "*"
-    react-native: "*"
-  checksum: 10/5cdf5012dfc495405870df0af22a11b454bed3bd53d3e94f5b08755f1e9367526cc7bc5b93ac19000bb74cce3d409325202c4be855241362e2e14913fba64257
-  languageName: node
-  linkType: hard
-
 "react-native-reanimated@npm:~3.6.2":
   version: 3.6.3
   resolution: "react-native-reanimated@npm:3.6.3"
@@ -30994,16 +30753,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-native-safe-area-context@npm:^4.10.5":
-  version: 4.10.5
-  resolution: "react-native-safe-area-context@npm:4.10.5"
-  peerDependencies:
-    react: "*"
-    react-native: "*"
-  checksum: 10/0bc7b4cd442e7a5deb0470f3b915ec2cf6b54337ea527fc7f5bde4f4dd062d420cb2b40fb886df96853f01951cfcb69a35fb4f6f47561cef5e195d9d68c54c3c
-  languageName: node
-  linkType: hard
-
 "react-native-screens@npm:~3.29.0":
   version: 3.29.0
   resolution: "react-native-screens@npm:3.29.0"
@@ -32662,7 +32411,7 @@ __metadata:
     "@faker-js/faker": "npm:^8.4.1"
     "@hono/node-server": "npm:^1.11.0"
     "@hono/trpc-server": "npm:^0.1.1"
-    "@instructor-ai/instructor": "npm:^1.5.0"
+    "@instructor-ai/instructor": "npm:^1.3.0"
     "@libsql/client": "npm:^0.4.0-pre.5"
     "@openapitools/openapi-generator-cli": "npm:^2.7.0"
     "@packrat/validations": "npm:*"

From a4405f49f83ddcc3916a3117489ef1c571af7ca5 Mon Sep 17 00:00:00 2001
From: Taron <taron.aleksanyan.20@gmail.com>
Date: Sun, 30 Jun 2024 01:54:20 +0400
Subject: [PATCH 127/257] logout user on unauthorized error

---
 packages/app/auth/hooks/useGetMe.ts           | 12 ----------
 packages/app/auth/hooks/useUser.ts            | 24 +++++++++++++------
 packages/app/auth/hooks/useUserSetter.ts      |  4 +---
 packages/app/config/trpcAxiosClient.ts        | 12 ++++++++++
 .../provider/TrpcTanstackProvider/index.tsx   |  6 ++---
 packages/app/trpc.ts                          |  3 +++
 server/src/trpc/utils/auth.ts                 | 18 ++++++++++----
 7 files changed, 48 insertions(+), 31 deletions(-)
 delete mode 100644 packages/app/auth/hooks/useGetMe.ts

diff --git a/packages/app/auth/hooks/useGetMe.ts b/packages/app/auth/hooks/useGetMe.ts
deleted file mode 100644
index 919024ecb..000000000
--- a/packages/app/auth/hooks/useGetMe.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { queryTrpc } from '../../trpc';
-import { useAuthUserToken } from './useUser';
-
-export const useGetMe = () => {
-  const { token, isLoading: isTokenLoading } = useAuthUserToken();
-
-  const { data, isLoading } = queryTrpc.getMe.useQuery(null, {
-    enabled: !!token && !isTokenLoading,
-  });
-
-  return { data, isLoading };
-};
diff --git a/packages/app/auth/hooks/useUser.ts b/packages/app/auth/hooks/useUser.ts
index 467cfaa17..55e6b8498 100644
--- a/packages/app/auth/hooks/useUser.ts
+++ b/packages/app/auth/hooks/useUser.ts
@@ -1,11 +1,5 @@
 import { useStorage } from 'app/hooks/storage/useStorage';
-import { useGetMe } from './useGetMe';
-
-export const useUserQuery = () => {
-  const { data: user, isLoading } = useGetMe();
-
-  return { isLoading, user };
-};
+import { queryTrpc } from 'app/trpc';
 
 export const useAuthUserToken = () => {
   const [[isLoading, token]] = useStorage<string>('token');
@@ -13,6 +7,22 @@ export const useAuthUserToken = () => {
   return { token, isLoading };
 };
 
+export const useUserQuery = () => {
+  const { token, isLoading: isTokenLoading } = useAuthUserToken();
+  const isRequestEnabled = !!token && !isTokenLoading;
+
+  const { data, isLoading: isRequestLoading } = queryTrpc.getMe.useQuery(null, {
+    enabled: isRequestEnabled,
+  });
+
+  // Sometimes the isLoading state don't work as expected so we have this solution here
+  // isLoading stays true when request is not enabled
+  // TODO fix loading state
+  const isLoading = (isRequestEnabled && isRequestLoading) || isTokenLoading;
+
+  return { user: data, isLoading };
+};
+
 export const useAuthUser = () => {
   const { user } = useUserQuery();
 
diff --git a/packages/app/auth/hooks/useUserSetter.ts b/packages/app/auth/hooks/useUserSetter.ts
index f04b7dc0f..415f69299 100644
--- a/packages/app/auth/hooks/useUserSetter.ts
+++ b/packages/app/auth/hooks/useUserSetter.ts
@@ -1,15 +1,13 @@
 import { useCallback } from 'react';
-import { getQueryKey } from '@trpc/react-query';
 import { queryTrpc } from 'app/trpc';
 import { type User } from '../ts';
 
 export const useUserSetter = () => {
   const utils = queryTrpc.useUtils();
-  const userKey = getQueryKey(queryTrpc.getMe, undefined, 'query');
 
   const setUser = useCallback(
     (data: User | null) => utils.getMe.setData(null, data),
-    [utils, userKey],
+    [utils],
   );
 
   return setUser;
diff --git a/packages/app/config/trpcAxiosClient.ts b/packages/app/config/trpcAxiosClient.ts
index 9af50a107..33c2d5fb7 100644
--- a/packages/app/config/trpcAxiosClient.ts
+++ b/packages/app/config/trpcAxiosClient.ts
@@ -1,6 +1,9 @@
 import axios, { AxiosResponse } from 'axios';
+import { Storage } from 'app/utils/storage';
 import { InformUser } from 'app/utils/ToastUtils';
 import { getErrorMessageFromError } from 'app/utils/apiUtils';
+import { getQueryKey } from '@trpc/react-query';
+import { queryClient, queryTrpc } from 'app/trpc';
 
 const REQUESTS_TO_SKIP_SUCCESS_MESSAGE = [
   'getMe',
@@ -35,6 +38,15 @@ const responseInterceptor = (response: AxiosResponse) => {
 };
 
 const responseErrorInterceptor = (response: AxiosResponse) => {
+  if (response?.response?.data?.error?.data?.httpStatus === 401) {
+    Storage.removeItem('token');
+    queryClient.setQueriesData(
+      getQueryKey(queryTrpc.getMe, undefined, 'query'),
+      null,
+    );
+    queryClient.invalidateQueries();
+  }
+
   if (
     response.config.method === 'get' ||
     REQUESTS_TO_SKIP_ERROR_MESSAGE.some((url) =>
diff --git a/packages/app/provider/TrpcTanstackProvider/index.tsx b/packages/app/provider/TrpcTanstackProvider/index.tsx
index c52b7eee2..aab2a6348 100644
--- a/packages/app/provider/TrpcTanstackProvider/index.tsx
+++ b/packages/app/provider/TrpcTanstackProvider/index.tsx
@@ -1,20 +1,18 @@
 import React, { useEffect } from 'react';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { QueryClientProvider } from '@tanstack/react-query';
 import { createAsyncStoragePersister } from '@tanstack/query-async-storage-persister';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { onlineManager } from '@tanstack/react-query';
 import NetInfo from '@react-native-community/netinfo';
-import { queryTrpc, trpc } from '../../trpc';
+import { queryTrpc, trpc, queryClient } from '../../trpc';
 import { api } from 'app/constants/api';
 import { Platform } from 'react-native';
 
 export const TrpcTanstackProvider: React.FC<{ children: React.ReactNode }> = ({
   children,
 }) => {
-  const [queryClient] = React.useState(() => new QueryClient());
-
   const persister = createAsyncStoragePersister({
     storage: AsyncStorage,
     throttleTime: 3000,
diff --git a/packages/app/trpc.ts b/packages/app/trpc.ts
index cf684e2d2..cbf53c24f 100644
--- a/packages/app/trpc.ts
+++ b/packages/app/trpc.ts
@@ -3,6 +3,7 @@ import type { AppRouter } from 'server/src/routes/trpcRouter';
 import { api } from './constants/api';
 import { createTRPCReact } from '@trpc/react-query';
 import { Storage } from 'app/utils/storage';
+import { QueryClient } from '@tanstack/react-query';
 import axios from 'app/config/trpcAxiosClient';
 
 export const getToken = async () => {
@@ -50,3 +51,5 @@ export const trpc = queryTrpc.createClient({
   ],
   transformer: undefined,
 });
+
+export const queryClient = new QueryClient();
diff --git a/server/src/trpc/utils/auth.ts b/server/src/trpc/utils/auth.ts
index fa753fbe5..8520da6bb 100644
--- a/server/src/trpc/utils/auth.ts
+++ b/server/src/trpc/utils/auth.ts
@@ -39,14 +39,22 @@ const extractToken = (req: Request): string | null => {
 const findUser = async (token: string, jwtSecret: string) => {
   const userClass = new User();
   // const user: any = await userClass.validateResetToken(token, jwtSecret);
-  const decoded = await jwt.verify(token, jwtSecret);
-  const user = await userClass.findUser({ userId: decoded.id });
-  if (!user)
+  try {
+    const decoded = await jwt.verify(token, jwtSecret);
+    const user = await userClass.findUser({ userId: decoded.id });
+    if (!user)
+      throw new TRPCError({
+        code: 'UNAUTHORIZED',
+        message: 'User associated with this token not found.',
+      });
+
+    return user;
+  } catch {
     throw new TRPCError({
-      code: 'NOT_FOUND',
+      code: 'UNAUTHORIZED',
       message: 'User associated with this token not found.',
     });
-  return user;
+  }
 };
 
 const extractTokenAndGetUser = async (req: Request, jwtSecret: string) => {

From 66fe13eff627103543c4c6a95d977076c0ce555e Mon Sep 17 00:00:00 2001
From: Anmol Verma <anmolverma2810@gmail.com>
Date: Sun, 30 Jun 2024 11:57:04 +0530
Subject: [PATCH 128/257] Apply check for copy button

---
 packages/app/components/card/CustomCardHeader.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/app/components/card/CustomCardHeader.tsx b/packages/app/components/card/CustomCardHeader.tsx
index eb4deb688..c0c2ba24f 100644
--- a/packages/app/components/card/CustomCardHeader.tsx
+++ b/packages/app/components/card/CustomCardHeader.tsx
@@ -36,7 +36,7 @@ export const CustomCardHeader = ({ data, title, link, actionsComponent }) => {
           </RText>
         </RLink>
       </View>
-      {user?.id !== data.owner_id && (
+      {user?.id !== data.owner_id && data.type !== 'trip' && (
         <RButton
           onPress={() => {
             setIsCopyPackModalOpen(true);

From ca31d2b343d193619ea5c6abbdc7597a4cb6dbd1 Mon Sep 17 00:00:00 2001
From: Anmol Verma <anmolverma2810@gmail.com>
Date: Sun, 30 Jun 2024 18:40:31 +0530
Subject: [PATCH 129/257] Add props in paginatedsortedtable

---
 .../app/components/itemtable/itemTable.tsx    |  9 ++++---
 .../elements/tables/PaginatedSortedTable.tsx  | 25 +++++++++++++------
 2 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/packages/app/components/itemtable/itemTable.tsx b/packages/app/components/itemtable/itemTable.tsx
index 4b9917c11..141c3dc73 100644
--- a/packages/app/components/itemtable/itemTable.tsx
+++ b/packages/app/components/itemtable/itemTable.tsx
@@ -75,11 +75,9 @@ export const ItemsTable = ({
           style={{
             paddingVertical: 16,
             flex: 1,
-            paddingTop: 30,
-            marginTop: 20,
-            marginBottom: 20,
+            padding: 30,
             backgroundColor: isDark ? '#1A1A1D' : 'white',
-            width: xxxs ? '100vw' : xs ? '80vw' : '60vw',
+            width: '100%',
           }}
         >
           {isLoading ? (
@@ -93,6 +91,9 @@ export const ItemsTable = ({
               currentPack={currentPack}
               refetch={refetch}
               setRefetch={setRefetch}
+              totalPages={totalPages}
+              page={page}
+              setPage={setPage}
             />
           )}
           <PaginationLimit limit={limit} setLimit={setLimit} />
diff --git a/packages/ui/src/Bento/elements/tables/PaginatedSortedTable.tsx b/packages/ui/src/Bento/elements/tables/PaginatedSortedTable.tsx
index 82495a604..0465d471f 100644
--- a/packages/ui/src/Bento/elements/tables/PaginatedSortedTable.tsx
+++ b/packages/ui/src/Bento/elements/tables/PaginatedSortedTable.tsx
@@ -40,6 +40,9 @@ interface PaginatedSortedTableProps {
   currentPack: any;
   refetch: () => void;
   setRefetch: () => void;
+  totalPages: any;
+  page: any;
+  setPage: any;
 }
 
 export function PaginatedSortedTable({
@@ -49,6 +52,9 @@ export function PaginatedSortedTable({
   currentPack,
   refetch,
   setRefetch,
+  totalPages,
+  page,
+  setPage,
 }: PaginatedSortedTableProps) {
   const columnHelper = createColumnHelper<Item>();
 
@@ -83,7 +89,11 @@ export function PaginatedSortedTable({
     getCoreRowModel: getCoreRowModel(),
     getSortedRowModel: getSortedRowModel(),
     getPaginationRowModel: getPaginationRowModel(),
-    initialState: { pagination: { pageSize: ITEMS_PER_PAGE } },
+    state: {
+      pagination: { pageSize: ITEMS_PER_PAGE, pageIndex: page || 0 },
+    },
+    manualPagination: true,
+    pageCount: totalPages || 1,
   });
 
   const { sm } = useMedia();
@@ -132,7 +142,7 @@ export function PaginatedSortedTable({
           }}
         >
           <Button
-            onPress={() => table.previousPage()}
+            onPress={() => setPage(page - 1)}
             disabled={!table.getCanPreviousPage()}
           >
             Previous
@@ -144,11 +154,11 @@ export function PaginatedSortedTable({
               fontSize: 15,
             }}
           >
-            Page {table.getState().pagination.pageIndex + 1} of{' '}
+            Page {table.getState().pagination.pageIndex} of{' '}
             {table.getPageCount()}
           </Text>
           <Button
-            onPress={() => table.nextPage()}
+            onPress={() => setPage(page + 1)}
             disabled={!table.getCanNextPage()}
           >
             Next
@@ -213,7 +223,7 @@ export function PaginatedSortedTable({
         }}
       >
         <Button
-          onPress={() => table.previousPage()}
+          onPress={() => setPage(page - 1)}
           disabled={!table.getCanPreviousPage()}
         >
           Previous
@@ -225,11 +235,10 @@ export function PaginatedSortedTable({
             fontSize: 15,
           }}
         >
-          Page {table.getState().pagination.pageIndex + 1} of{' '}
-          {table.getPageCount()}
+          Page {table.getState().pagination.pageIndex} of {table.getPageCount()}
         </Text>
         <Button
-          onPress={() => table.nextPage()}
+          onPress={() => setPage(page + 1)}
           disabled={!table.getCanNextPage()}
         >
           Next

From 9928dd6af47e1650f80e46873f3551a2809d9ab8 Mon Sep 17 00:00:00 2001
From: Taron <taron.aleksanyan.20@gmail.com>
Date: Sun, 30 Jun 2024 17:46:10 +0400
Subject: [PATCH 130/257] add delete account section

---
 packages/app/hooks/user/useDeleteProfile.ts   | 17 ++++
 packages/app/screens/user/Settings.tsx        | 81 +++++++++++++------
 .../src/validations/userRoutesValidator.ts    |  4 +
 3 files changed, 79 insertions(+), 23 deletions(-)
 create mode 100644 packages/app/hooks/user/useDeleteProfile.ts

diff --git a/packages/app/hooks/user/useDeleteProfile.ts b/packages/app/hooks/user/useDeleteProfile.ts
new file mode 100644
index 000000000..eaf6d401c
--- /dev/null
+++ b/packages/app/hooks/user/useDeleteProfile.ts
@@ -0,0 +1,17 @@
+import { queryTrpc } from '../../trpc';
+import { useAuthUser } from '../../auth/hooks/useUser';
+
+export const useDeleteProfile = () => {
+  const user = useAuthUser();
+  const { mutateAsync: deleteUserAsync, isLoading } =
+    queryTrpc.deleteUser.useMutation();
+
+  const deleteProfile = async () => {
+    try {
+      await deleteUserAsync({ userId: user?.id });
+      // TODO add logout
+    } catch {}
+  };
+
+  return { deleteProfile, isLoading };
+};
diff --git a/packages/app/screens/user/Settings.tsx b/packages/app/screens/user/Settings.tsx
index b13f1171e..d0482c674 100644
--- a/packages/app/screens/user/Settings.tsx
+++ b/packages/app/screens/user/Settings.tsx
@@ -16,15 +16,20 @@ import {
   FormSelect,
   SubmitButton,
   RIconButton,
+  RSpinner,
 } from '@packrat/ui';
 import Avatar from 'app/components/Avatar/Avatar';
 import { useProfileSettings } from 'app/hooks/user';
 import { useRouter } from 'app/hooks/router';
 import useTheme from 'app/hooks/useTheme';
-import { userSettingsSchema, passwordChangeSchema } from '@packrat/validations';
+import {
+  userSettingsSchema,
+  passwordChangeSchema,
+  deleteUserForm,
+} from '@packrat/validations';
 import { Platform } from 'react-native';
 import { useNavigate } from 'app/hooks/navigation';
-
+import { useDeleteProfile } from '../../hooks/user/useDeleteProfile';
 
 const weatherOptions = ['celsius', 'fahrenheit'].map((key) => ({
   label: key,
@@ -36,16 +41,15 @@ const weightOptions = ['lb', 'oz', 'kg', 'g'].map((key) => ({
   value: key,
 }));
 
-
-
 export default function Settings() {
   const { user, handleEditUser, handlePasswordsChange, handleUpdatePassword } =
     useProfileSettings();
+  const { deleteProfile, isLoading } = useDeleteProfile();
 
   const { isDark, currentTheme } = useTheme();
   const router = useRouter();
   const navigate = useNavigate();
-
+  console.log(deleteUserForm);
 
   return user ? (
     <RScrollView style={{ backgroundColor: isDark ? '#1A1A1D' : 'white' }}>
@@ -65,25 +69,23 @@ export default function Settings() {
             flexDirection: 'row',
           }}
         >
-       
-            <RIconButton
-              backgroundColor="transparent"
-              icon={
-                <AntDesign
-                  name="arrowleft"
-                  size={24}
-                  color={isDark ? 'white' : 'black'}
-                />
+          <RIconButton
+            backgroundColor="transparent"
+            icon={
+              <AntDesign
+                name="arrowleft"
+                size={24}
+                color={isDark ? 'white' : 'black'}
+              />
+            }
+            onPress={() => {
+              if (Platform.OS === 'web') {
+                window?.history?.back();
+              } else {
+                navigate('/profile');
               }
-              onPress={() => {
-                if (Platform.OS === 'web') {
-                  window?.history?.back();
-                } else {
-                  navigate('/profile');
-                }
-              }}
-            />
-        
+            }}
+          />
           <RH2>Profile</RH2>
         </RStack>
         <Form
@@ -187,6 +189,39 @@ export default function Settings() {
             </SubmitButton>
           </RStack>
         </Form>
+        <RStack marginTop={20} marginBottom={10}>
+          <RH2>Delete account</RH2>
+          <RSeparator marginVertical={8} />
+          <RText fontSize={16}>
+            Deleting your account will remove all your information from our
+            database. This cannot be undone
+          </RText>
+        </RStack>
+        <Form validationSchema={deleteUserForm}>
+          <RStack width="100%" marginHorizontal="auto">
+            <RLabel htmlFor="confirmText">
+              To confirm this, type "delete"
+            </RLabel>
+            <RStack space="$2" flexDirection="row">
+              <FormInput
+                id="confirmText"
+                style={{ minWidth: 268 }}
+                name="confirmText"
+              />
+              <SubmitButton
+                onSubmit={deleteProfile}
+                disabled={isLoading}
+                color="white"
+                style={{
+                  backgroundColor: 'red',
+                  opacity: isLoading ? 0.4 : 1,
+                }}
+              >
+                {isLoading ? <RSpinner color="#f6f6f6" /> : 'Delete account'}
+              </SubmitButton>
+            </RStack>
+          </RStack>
+        </Form>
       </RStack>
     </RScrollView>
   ) : null;
diff --git a/packages/validations/src/validations/userRoutesValidator.ts b/packages/validations/src/validations/userRoutesValidator.ts
index db62e35d4..1dbd22f77 100644
--- a/packages/validations/src/validations/userRoutesValidator.ts
+++ b/packages/validations/src/validations/userRoutesValidator.ts
@@ -72,6 +72,10 @@ export const deleteUser = z.object({
   userId: z.string(),
 });
 
+export const deleteUserForm = z.object({
+  confirmText: z.literal('delete'),
+});
+
 export const linkFirebaseAuth = z.object({
   firebaseAuthToken: z.string(),
 });

From efbf07e9400165c8feffe97492cbd8fabdc7f63d Mon Sep 17 00:00:00 2001
From: Taron <taron.aleksanyan.20@gmail.com>
Date: Sun, 30 Jun 2024 17:56:32 +0400
Subject: [PATCH 131/257] logout current user on delete account

---
 packages/app/config/trpcAxiosClient.ts      | 11 ++---------
 packages/app/hooks/user/useDeleteProfile.ts |  3 ++-
 packages/app/screens/user/Settings.tsx      |  1 -
 packages/app/utils/userUtils.ts             | 12 ++++++++++++
 4 files changed, 16 insertions(+), 11 deletions(-)
 create mode 100644 packages/app/utils/userUtils.ts

diff --git a/packages/app/config/trpcAxiosClient.ts b/packages/app/config/trpcAxiosClient.ts
index 33c2d5fb7..6eed78e04 100644
--- a/packages/app/config/trpcAxiosClient.ts
+++ b/packages/app/config/trpcAxiosClient.ts
@@ -1,9 +1,7 @@
 import axios, { AxiosResponse } from 'axios';
-import { Storage } from 'app/utils/storage';
 import { InformUser } from 'app/utils/ToastUtils';
+import { logoutAuthUser } from 'app/utils/userUtils';
 import { getErrorMessageFromError } from 'app/utils/apiUtils';
-import { getQueryKey } from '@trpc/react-query';
-import { queryClient, queryTrpc } from 'app/trpc';
 
 const REQUESTS_TO_SKIP_SUCCESS_MESSAGE = [
   'getMe',
@@ -39,12 +37,7 @@ const responseInterceptor = (response: AxiosResponse) => {
 
 const responseErrorInterceptor = (response: AxiosResponse) => {
   if (response?.response?.data?.error?.data?.httpStatus === 401) {
-    Storage.removeItem('token');
-    queryClient.setQueriesData(
-      getQueryKey(queryTrpc.getMe, undefined, 'query'),
-      null,
-    );
-    queryClient.invalidateQueries();
+    logoutAuthUser();
   }
 
   if (
diff --git a/packages/app/hooks/user/useDeleteProfile.ts b/packages/app/hooks/user/useDeleteProfile.ts
index eaf6d401c..f259820fb 100644
--- a/packages/app/hooks/user/useDeleteProfile.ts
+++ b/packages/app/hooks/user/useDeleteProfile.ts
@@ -1,5 +1,6 @@
 import { queryTrpc } from '../../trpc';
 import { useAuthUser } from '../../auth/hooks/useUser';
+import { logoutAuthUser } from 'app/utils/userUtils';
 
 export const useDeleteProfile = () => {
   const user = useAuthUser();
@@ -9,7 +10,7 @@ export const useDeleteProfile = () => {
   const deleteProfile = async () => {
     try {
       await deleteUserAsync({ userId: user?.id });
-      // TODO add logout
+      logoutAuthUser();
     } catch {}
   };
 
diff --git a/packages/app/screens/user/Settings.tsx b/packages/app/screens/user/Settings.tsx
index d0482c674..f9e39023a 100644
--- a/packages/app/screens/user/Settings.tsx
+++ b/packages/app/screens/user/Settings.tsx
@@ -49,7 +49,6 @@ export default function Settings() {
   const { isDark, currentTheme } = useTheme();
   const router = useRouter();
   const navigate = useNavigate();
-  console.log(deleteUserForm);
 
   return user ? (
     <RScrollView style={{ backgroundColor: isDark ? '#1A1A1D' : 'white' }}>
diff --git a/packages/app/utils/userUtils.ts b/packages/app/utils/userUtils.ts
new file mode 100644
index 000000000..e18847d7f
--- /dev/null
+++ b/packages/app/utils/userUtils.ts
@@ -0,0 +1,12 @@
+import { Storage } from 'app/utils/storage';
+import { getQueryKey } from '@trpc/react-query';
+import { queryClient, queryTrpc } from 'app/trpc';
+
+export const logoutAuthUser = () => {
+  Storage.removeItem('token');
+  queryClient.setQueriesData(
+    getQueryKey(queryTrpc.getMe, undefined, 'query'),
+    null,
+  );
+  queryClient.invalidateQueries();
+};

From 8acc9d4429432e66ba326f2bef8159d54b753050 Mon Sep 17 00:00:00 2001
From: Anmol Verma <anmolverma2810@gmail.com>
Date: Mon, 1 Jul 2024 16:53:01 +0530
Subject: [PATCH 132/257] Change placeholder for dropdown

---
 packages/app/components/paginationChooseLimit/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/app/components/paginationChooseLimit/index.tsx b/packages/app/components/paginationChooseLimit/index.tsx
index b3cf6c57f..3f665d5e9 100644
--- a/packages/app/components/paginationChooseLimit/index.tsx
+++ b/packages/app/components/paginationChooseLimit/index.tsx
@@ -23,7 +23,7 @@ export const PaginationLimit = ({ limit, setLimit }: PaginationLimitProps) => {
         value={limit}
         width="100%"
         accessibilityLabel="choose the number of items to be displayed"
-        placeholder="Choose a value"
+        placeholder={limit}
         onValueChange={(itemValue: string) => {
           setLimit(itemValue);
         }}

From 8dc50e3159fefdf732ff2bc370aed85774f14857 Mon Sep 17 00:00:00 2001
From: Anmol Verma <anmolverma2810@gmail.com>
Date: Mon, 1 Jul 2024 17:00:26 +0530
Subject: [PATCH 133/257] Add all items option to sort dropdown

---
 packages/app/screens/items/index.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/app/screens/items/index.tsx b/packages/app/screens/items/index.tsx
index b22c3f225..c26f9c097 100644
--- a/packages/app/screens/items/index.tsx
+++ b/packages/app/screens/items/index.tsx
@@ -32,6 +32,7 @@ export default function Items() {
     { label: 'Food', value: 'Food' },
     { label: 'Water', value: 'Water' },
     { label: 'Essentials', value: 'Essentials' },
+    { label: 'All items', value: 'All items' },
   ];
 
   const sortItemsByCategory = (items, selectedCategory) => {

From 5b9f9b82f5af498fa3c4bbcd99b7de8eefb9dcc9 Mon Sep 17 00:00:00 2001
From: Muhammad Hassan <mh7722178@gmail.com>
Date: Mon, 1 Jul 2024 18:56:55 +0500
Subject: [PATCH 134/257] Fixed Required Changes

---
 packages/app/components/card/CustomCard.tsx   |  2 -
 packages/app/components/details/index.tsx     |  3 +-
 packages/app/components/pack/AddPack.tsx      |  9 ++--
 packages/app/components/pack/PackDetails.tsx  | 48 +++++++++----------
 .../pack_table/TableHelperComponents.tsx      | 13 ++---
 packages/app/hooks/packs/useUserPacks.ts      |  2 +-
 6 files changed, 39 insertions(+), 38 deletions(-)

diff --git a/packages/app/components/card/CustomCard.tsx b/packages/app/components/card/CustomCard.tsx
index f55c72de6..74c72d4be 100644
--- a/packages/app/components/card/CustomCard.tsx
+++ b/packages/app/components/card/CustomCard.tsx
@@ -39,8 +39,6 @@ export const CustomCard = ({
 
   const isWeb = Platform.OS === 'web';
 
-  console.log('owner_idowner_idowner_id', owner_id)
-
   return (
     <View
       style={[
diff --git a/packages/app/components/details/index.tsx b/packages/app/components/details/index.tsx
index a0523b606..0704edc96 100644
--- a/packages/app/components/details/index.tsx
+++ b/packages/app/components/details/index.tsx
@@ -20,10 +20,10 @@ export const DetailsComponent = ({
   additionalComps,
   link,
 }: DetailsComponent) => {
+  console.log('type', type)
   const renderDetails = () => {
     switch (type) {
       case 'pack':
-        // Add pack-specific logic here
         return (
           <>
             <CustomCard
@@ -75,7 +75,6 @@ export const DetailsComponent = ({
           </>
         );
       default:
-        // Handle unknown types
         return null;
     }
   };
diff --git a/packages/app/components/pack/AddPack.tsx b/packages/app/components/pack/AddPack.tsx
index b7ffba622..d41c4ab4e 100644
--- a/packages/app/components/pack/AddPack.tsx
+++ b/packages/app/components/pack/AddPack.tsx
@@ -13,7 +13,7 @@ import { useAddNewPack } from 'app/hooks/packs';
 import { useRouter } from 'app/hooks/router';
 import useCustomStyles from 'app/hooks/useCustomStyles';
 import useResponsive from 'app/hooks/useResponsive';
-import React from 'react';
+import React, { useState } from 'react';
 import { View } from 'react-native';
 import useTheme from '../../hooks/useTheme';
 
@@ -31,6 +31,7 @@ export const AddPack = ({
     useTheme();
   const styles = useCustomStyles(loadStyles);
   const router = useRouter();
+  const [selectedValue, SetSelectedValue] = useState('No')
   // const [_, setPackIdParam] = usePackId();
 
   const {
@@ -64,8 +65,10 @@ export const AddPack = ({
 
   const handleonValueChange = (itemValue) => {
     if (itemValue === 'Yes') {
+      SetSelectedValue('Yes')
       setIsPublic(true);
     } else {
+      SetSelectedValue('No')
       setIsPublic(false);
     }
   };
@@ -88,8 +91,8 @@ export const AddPack = ({
             value={null}
             data={packSelectOptions}
             onValueChange={handleonValueChange}
-            placeholder="Is Public:"
-            width={xxs ? '50%' : xs ? '50%' : xxl ? '10%' : '50%'}
+            placeholder={`Is Public: ${selectedValue}`}
+            width={xxs ? '50%' : xs ? '50%' : xxl ? '15%' : '50%'}
             native={true}
             zeego={true}
           />
diff --git a/packages/app/components/pack/PackDetails.tsx b/packages/app/components/pack/PackDetails.tsx
index 262700827..b53119d84 100644
--- a/packages/app/components/pack/PackDetails.tsx
+++ b/packages/app/components/pack/PackDetails.tsx
@@ -9,7 +9,7 @@ import { usePackId } from 'app/hooks/packs/usePackId';
 import { useUserPacks } from 'app/hooks/packs/useUserPacks';
 import useCustomStyles from 'app/hooks/useCustomStyles';
 import useResponsive from 'app/hooks/useResponsive';
-import { FlatList, View } from 'react-native';
+import { FlatList, Platform, View } from 'react-native';
 import { useFetchSinglePack } from '../../hooks/packs';
 import ScoreContainer from '../ScoreContainer';
 import ChatContainer from '../chat';
@@ -46,7 +46,7 @@ export function PackDetails() {
   } = useFetchSinglePack(packId);
   const isAuthUserPack = useIsAuthUserPack(currentPack);
 
-  const styles = useCustomStyles(loadStyles);
+  // const styles = useCustomStyles(loadStyles);
   const currentPackId = currentPack && currentPack.id;
 
   // check if user is owner of pack, and that pack and user exists
@@ -93,7 +93,7 @@ export function PackDetails() {
                               currentPack={currentPack}
                               isAddItemModalOpen={isAddItemModalOpen}
                               setIsAddItemModalOpen={setIsAddItemModalOpen}
-                              // refetch={refetch}
+                              refetch={refetch}
                               setRefetch={() => setRefetch((prev) => !prev)}
                             />
                           ) : null;
@@ -162,24 +162,24 @@ export function PackDetails() {
   );
 }
 
-const loadStyles = (theme) => {
-  const { currentTheme } = theme;
-  console.log('currentTheme', currentTheme);
-  return {
-    packsContainer: {
-      flexDirection: 'column',
-      minHeight: '100vh',
-      padding: 25,
-      fontSize: 26,
-    },
-    dropdown: {
-      backgroundColor: currentTheme.colors.white,
-    },
-    boxStyle: {
-      padding: 5,
-      borderRadius: 10,
-      width: '100%',
-      minHeight: 400,
-    },
-  };
-};
\ No newline at end of file
+// const loadStyles = (theme) => {
+//   const { currentTheme } = theme;
+//   console.log('currentTheme', currentTheme);
+//   return {
+//     packsContainer: {
+//       flexDirection: 'column',
+//       minHeight: Platform.OS === 'web' ? '100vh' : '100%',
+//       padding: 25,
+//       fontSize: 26,
+//     },
+//     dropdown: {
+//       backgroundColor: currentTheme.colors.white,
+//     },
+//     boxStyle: {
+//       padding: 5,
+//       borderRadius: 10,
+//       width: '100%',
+//       minHeight: 400,
+//     },
+//   };
+// };
diff --git a/packages/app/components/pack_table/TableHelperComponents.tsx b/packages/app/components/pack_table/TableHelperComponents.tsx
index d3c384367..e11146a45 100644
--- a/packages/app/components/pack_table/TableHelperComponents.tsx
+++ b/packages/app/components/pack_table/TableHelperComponents.tsx
@@ -46,11 +46,12 @@ interface CategoryRowProps {
 interface TitleRowProps {
   title: string;
 }
-
-interface MenuItems {
-  label: string;
-  onSelect: () => void;
-}
+const optionValues = [
+  { label: 'kg', value: 'kg' },
+  { label: 'g', value: 'g' },
+  { label: 'lb', value: 'lb' },
+  { label: 'oz', value: 'oz' },
+];
 
 const TitleRow = ({ title }: TitleRowProps) => {
   const styles = useCustomStyles(loadStyles);
@@ -160,4 +161,4 @@ export {
   TitleRow,
   TotalWeightBox,
   WeightUnitDropdown,
-};
+};
\ No newline at end of file
diff --git a/packages/app/hooks/packs/useUserPacks.ts b/packages/app/hooks/packs/useUserPacks.ts
index 69043a120..5eb654154 100644
--- a/packages/app/hooks/packs/useUserPacks.ts
+++ b/packages/app/hooks/packs/useUserPacks.ts
@@ -22,7 +22,7 @@ export const useUserPacks = (ownerId: string | undefined, queryString = '') => {
       queryBy: queryString,
     },
     (oldData) => {
-      //This was added to fix typescript error and passing oldData to determine new data
+      // This was added to fix typescript error and passing oldData to determine new data
       return data;
     },
   );

From bbde6251155700804e4743e3ebb139823bb4e163 Mon Sep 17 00:00:00 2001
From: pinocchio-life-like <icbr19fl@gmail.com>
Date: Tue, 2 Jul 2024 16:18:13 +0300
Subject: [PATCH 135/257] rebase and fix

---
 package.json                                  |   2 +-
 .../Suggestion/SuggestionDescription.tsx      | 120 ++++++++
 .../components/Suggestion/SuggestionList.tsx  |  96 ++++++
 packages/app/components/Suggestion/index.ts   |   2 +
 packages/app/components/chat/ActionItem.tsx   | 118 ++++++++
 packages/app/components/chat/chat.style.tsx   |  78 ++++-
 packages/app/components/chat/index.tsx        | 282 +++++++++++++-----
 packages/app/components/pack/PackDetails.tsx  |   1 +
 packages/app/hooks/chat/useChat.ts            |  85 ++++--
 packages/app/hooks/chat/useGetAIResponse.ts   |  68 ++---
 packages/app/package.json                     |   1 +
 .../ui/src/Bento/elements/list/ChatList.tsx   |   2 +-
 .../ui/src/ThreeDotsMenu/ThreeDotsMenu.tsx    |   1 -
 .../src/controllers/openAi/getAIResponse.ts   |  20 +-
 .../controllers/openAi/getAISuggestions.ts    |  31 ++
 server/src/controllers/openAi/index.ts        |   1 +
 server/src/routes/trpcRouter.ts               |   7 +-
 .../services/openAi/getAIResponseService.ts   |  35 ++-
 .../services/openAi/getAISuggestionService.ts | 176 +++++++++++
 server/src/services/openAi/langchain/index.ts |   6 +-
 server/src/services/openAi/openAi.service.ts  |   1 +
 .../openAi/referredItemInformation/index.ts   | 133 +++++++++
 server/src/services/openAi/zodSchema.ts       |  31 ++
 .../src/services/pack/getPackByIdService.ts   |   5 +-
 yarn.lock                                     |  12 +
 25 files changed, 1146 insertions(+), 168 deletions(-)
 create mode 100644 packages/app/components/Suggestion/SuggestionDescription.tsx
 create mode 100644 packages/app/components/Suggestion/SuggestionList.tsx
 create mode 100644 packages/app/components/Suggestion/index.ts
 create mode 100644 packages/app/components/chat/ActionItem.tsx
 create mode 100644 server/src/controllers/openAi/getAISuggestions.ts
 create mode 100644 server/src/services/openAi/getAISuggestionService.ts
 create mode 100644 server/src/services/openAi/referredItemInformation/index.ts
 create mode 100644 server/src/services/openAi/zodSchema.ts

diff --git a/package.json b/package.json
index 4dbb3f0d0..ef1785a85 100644
--- a/package.json
+++ b/package.json
@@ -142,4 +142,4 @@
   "resolutions": {
     "@react-native/assets-registry": "0.74.81"
   }
-}
\ No newline at end of file
+}
diff --git a/packages/app/components/Suggestion/SuggestionDescription.tsx b/packages/app/components/Suggestion/SuggestionDescription.tsx
new file mode 100644
index 000000000..1c76f4d23
--- /dev/null
+++ b/packages/app/components/Suggestion/SuggestionDescription.tsx
@@ -0,0 +1,120 @@
+import { useEffect, useState } from 'react';
+import { FlatList } from 'react-native';
+import { AnimatePresence, Text, Theme, View, styled } from 'tamagui';
+
+import useTheme from 'app/hooks/useTheme';
+
+const List = styled(FlatList<Message>, {
+  backgroundColor: '$background',
+  gap: '$3',
+});
+
+const getMessages = (data: Message[]) => data;
+
+type Message = {
+  role: 'user' | 'ai';
+  content: string;
+};
+
+const renderItem = ({
+  item: message,
+  index,
+}: {
+  item: Message;
+  index: number;
+}) => {
+  return <ChatItem index={index + 1} key={index} item={message} />;
+};
+export function SuggestionDescription({ data }: { data: Message[] }) {
+  const [messages, setMessages] = useState<Message[]>([]);
+
+  useEffect(() => {
+    setMessages(getMessages(data)); // Reverse the messages array
+  }, [data]);
+
+  return (
+    <View
+      flexDirection="column"
+      height={'100%'}
+      minWidth="100%"
+      $group-window-gtXs={{ height: 700 }}
+    >
+      <List
+        $group-window-gtXs={{
+          padding: '$10',
+        }}
+        data={messages}
+        renderItem={renderItem}
+        windowSize={2}
+      />
+    </View>
+  );
+}
+
+SuggestionDescription.fileName = 'ChatList';
+
+function ChatItem({ item, index }: { item: Message; index: number }) {
+  const [showMessage, setShowMessage] = useState(false);
+  const showDelay = 10;
+  const [start, setStart] = useState(false);
+  const { isDark } = useTheme();
+
+  useEffect(() => {
+    // run animations after initial render calms down
+    (globalThis.requestIdleCallback || setTimeout)(() => {
+      setStart(true);
+    });
+  }, []);
+
+  useEffect(() => {
+    if (!start) return;
+    const timeout = setTimeout(() => {
+      setShowMessage((prev) => !prev);
+    }, showDelay);
+    return () => clearTimeout(timeout);
+  }, [start, showDelay]);
+
+  return (
+    <AnimatePresence>
+      {showMessage && (
+        <View
+          flexDirection={'row'}
+          alignItems="flex-start"
+          gap="$4"
+          alignSelf={'flex-start'}
+          maxWidth="100%"
+          minWidth="100%"
+          style={{ padding: '5px 5px', background: isDark ? '#333' : 'white' }}
+        >
+          <View
+            flexDirection="column"
+            alignItems={'flex-start'}
+            gap="$2"
+            // maxWidth={400}
+            justifyContent="center"
+            flexShrink={1}
+          >
+            <Theme name={'blue'}>
+              <View
+                backgroundColor="$color2"
+                padding="$4"
+                paddingVertical="$3"
+                borderRadius="$5"
+                flexShrink={1}
+              >
+                <Text
+                  fontSize="$3"
+                  fontWeight="$3"
+                  lineHeight="$3"
+                  flexShrink={1}
+                >
+                  {item.content}
+                </Text>
+              </View>
+            </Theme>
+          </View>
+        </View>
+      )}
+    </AnimatePresence>
+  );
+}
diff --git a/packages/app/components/Suggestion/SuggestionList.tsx b/packages/app/components/Suggestion/SuggestionList.tsx
new file mode 100644
index 000000000..e2a88e418
--- /dev/null
+++ b/packages/app/components/Suggestion/SuggestionList.tsx
@@ -0,0 +1,96 @@
+import React, { useEffect, useState } from 'react';
+import { Separator, Text, View, YGroup } from 'tamagui';
+import { RButton } from '@packrat/ui';
+import useTheme from 'app/hooks/useTheme';
+import { useAddPackItem } from 'app/hooks/packs/useAddPackItem';
+
+export function SuggestionList({ suggestion, onAddItem }) {
+  const [itemsList, setItemsList] = useState([]);
+  const { isDark } = useTheme();
+
+  useEffect(() => {
+    setItemsList(suggestion?.Items || []);
+  }, [suggestion]);
+
+  return (
+    <YGroup
+      style={{
+        background: isDark ? '#333' : 'white',
+        padding: 10,
+        borderRadius: 0,
+      }}
+      width="100%"
+      justifyContent="center"
+      alignItems="center"
+    >
+      <View
+        $group-window-gtXs={{
+          padding: '$3',
+          width: 600,
+        }}
+        gap="$1.5"
+        minWidth="100%"
+      >
+        {itemsList.map((item, i) => (
+          <React.Fragment key={item.id}>
+            <Item item={item} onAddItem={onAddItem} />
+            {i < itemsList.length - 1 && <Separator />}
+          </React.Fragment>
+        ))}
+      </View>
+    </YGroup>
+  );
+}
+
+SuggestionList.fileName = 'List';
+
+function Item({ item, onAddItem }) {
+  const { addPackItem, isLoading } = useAddPackItem();
+
+  const handleAddItem = (item) => {
+    addPackItem(item);
+    onAddItem(item.id);
+  };
+
+  return (
+    <YGroup.Item>
+      <View
+        flexDirection="row"
+        paddingVertical="$1"
+        paddingHorizontal="$1.5"
+        gap="$2"
+        $group-window-gtXs={{
+          padding: '$4',
+          gap: '$4',
+        }}
+        backgroundColor="$color1"
+        alignItems="center"
+        style={{ borderRadius: 5 }}
+      >
+        <View flexDirection="column" flexShrink={1} justifyContent="center">
+          <Text selectable>{item.name}</Text>
+          <Text
+            selectable
+            fontSize="$2"
+            lineHeight="$2"
+            fontWeight="$2"
+            // theme="alt1"
+          >
+            {item.category} {item.weight}
+            {item.unit}, {item.quantity}pcs
+          </Text>
+        </View>
+        <RButton
+          onPress={() => {
+            handleAddItem(item);
+          }}
+          style={{ borderRadius: 5 }}
+          marginLeft="auto"
+          disabled={isLoading}
+        >
+          Add
+        </RButton>
+      </View>
+    </YGroup.Item>
+  );
+}
diff --git a/packages/app/components/Suggestion/index.ts b/packages/app/components/Suggestion/index.ts
new file mode 100644
index 000000000..f942c1757
--- /dev/null
+++ b/packages/app/components/Suggestion/index.ts
@@ -0,0 +1,2 @@
+export * from './SuggestionList';
+export * from './SuggestionDescription';
diff --git a/packages/app/components/chat/ActionItem.tsx b/packages/app/components/chat/ActionItem.tsx
new file mode 100644
index 000000000..8ae173aa3
--- /dev/null
+++ b/packages/app/components/chat/ActionItem.tsx
@@ -0,0 +1,118 @@
+import React, { useState } from 'react';
+import { View, Text, Pressable, StyleSheet } from 'react-native';
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withTiming,
+  FadeIn,
+} from 'react-native-reanimated';
+import { LucideIcon } from 'lucide-react-native';
+
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+
+interface ActionItemProps {
+  icon: LucideIcon;
+  color: string;
+  title: string;
+  description: string;
+  type: string;
+  setIsChatOpen: (value: boolean) => void;
+  setIsSuggestionOpen: (value: boolean) => void;
+  setIsItemOpen: (value: boolean) => void;
+}
+
+export const ActionItem: React.FC<ActionItemProps> = ({
+  icon: Icon,
+  color,
+  title,
+  type,
+  description,
+  setIsChatOpen,
+  setIsSuggestionOpen,
+  setIsItemOpen,
+}) => {
+  const [scale, setScale] = useState(1);
+
+  const actionItemAStyle = {
+    transform: [{ scale: scale }],
+  };
+
+  const handlePressOut = () => {
+    setScale(0.95);
+    switch (type) {
+      case 'chat':
+        setIsItemOpen(false);
+        setIsChatOpen(true);
+        break;
+      case 'suggestion':
+        setIsItemOpen(false);
+        setIsSuggestionOpen(true);
+        break;
+      default:
+        break;
+    }
+  };
+
+  return (
+    <AnimatedPressable
+      entering={FadeIn.duration(100)}
+      onPressIn={() => {
+        setScale(0.95);
+      }}
+      onPressOut={handlePressOut}
+      style={[styles.actionItem, actionItemAStyle]}
+    >
+      <View
+        style={{
+          ...styles.iconContainer,
+          backgroundColor: color,
+        }}
+      >
+        <Icon size={24} color="white" />
+      </View>
+      <View style={styles.actionTextContainer}>
+        <Text style={styles.actionTitle}>{title}</Text>
+        <Text style={styles.actionDescription}>{description}</Text>
+      </View>
+    </AnimatedPressable>
+  );
+};
+
+const styles = StyleSheet.create({
+  actionItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: 'rgba(44, 44, 46, 0.6)',
+    borderRadius: 10,
+    padding: 8,
+    borderWidth: 1.3, // Adding border
+    borderColor: '#3a3a3c', // Slightly lighter border color
+    height: 80,
+    width: 300,
+    marginBottom: 2,
+  },
+  iconContainer: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  actionTextContainer: {
+    marginLeft: 6,
+    paddingRight: 10,
+    rowGap: 4,
+    width: '90%',
+  },
+  actionTitle: {
+    color: 'white',
+    fontSize: 16,
+    fontWeight: 'bold',
+  },
+  actionDescription: {
+    fontSize: 14,
+    fontWeight: '500',
+    lineHeight: 18,
+    color: 'rgba(224, 224, 224, 0.9)',
+  },
+});
diff --git a/packages/app/components/chat/chat.style.tsx b/packages/app/components/chat/chat.style.tsx
index b088df0d7..e3d56af2e 100644
--- a/packages/app/components/chat/chat.style.tsx
+++ b/packages/app/components/chat/chat.style.tsx
@@ -1,8 +1,25 @@
+import { Dimensions } from 'react-native';
+
+const { width, height } = Dimensions.get('window');
+
+export const SCREEN_WIDTH = width;
+export const SCREEN_HEIGHT = height;
+
 export const loadStyles = (theme: any) => {
   const { currentTheme } = theme;
 
   return {
-    container: { flex: 1, padding: 16 },
+    container: {
+      flex: 1,
+      padding: 16,
+      position: 'fixed',
+      right: 250,
+      bottom: 30,
+      width: 60,
+      height: 60,
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
     headerText: { fontSize: 24, fontWeight: 'bold' },
     flatList: { flexGrow: 1, justifyContent: 'flex-end' },
     inputContainer: {
@@ -79,5 +96,64 @@ export const loadStyles = (theme: any) => {
       padding: 10,
       zIndex: 1000,
     },
+    actionItem: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      backgroundColor: 'rgba(44, 44, 46, 0.6)',
+      borderRadius: 15,
+      padding: 10,
+      borderWidth: 1.3, // Adding border
+      borderColor: '#3a3a3c', // Slightly lighter border color
+      height: 112,
+      width: SCREEN_WIDTH * 0.82,
+    },
+    iconContainer: {
+      width: 40,
+      height: 40,
+      borderRadius: 20,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    actionTextContainer: {
+      marginLeft: 10,
+      rowGap: 4,
+      width: '90%',
+    },
+    actionTitle: {
+      color: 'white',
+      fontSize: 16,
+      fontWeight: 'bold',
+    },
+    actionDescription: {
+      fontSize: 14,
+      fontWeight: '500',
+      lineHeight: 18,
+      color: 'rgba(224, 224, 224, 0.9)',
+    },
+    logo: {
+      shadowColor: '#000',
+      shadowOffset: {
+        width: 0,
+        height: 2,
+      },
+      shadowOpacity: 0.75,
+      shadowRadius: 1.24,
+      elevation: 3,
+    },
+    animatedView: {
+      position: 'absolute',
+      bottom: 60,
+      right: 5,
+      width: 450,
+      backgroundColor: '#fff',
+      borderRadius: 10,
+      padding: 4,
+      zIndex: 1000,
+      shadowColor: '#000',
+      shadowOffset: { width: 2, height: 4 },
+      shadowOpacity: 0.25,
+      shadowRadius: 3.84,
+      elevation: 5,
+    },
   };
 };
diff --git a/packages/app/components/chat/index.tsx b/packages/app/components/chat/index.tsx
index 88e38d7e5..022d6ba80 100644
--- a/packages/app/components/chat/index.tsx
+++ b/packages/app/components/chat/index.tsx
@@ -11,40 +11,59 @@ import useCustomStyles from 'app/hooks/useCustomStyles';
 import { useChat } from 'app/hooks/chat/useChat';
 import { loadStyles } from './chat.style';
 import { ChatList } from '@packrat/ui/src/Bento/elements/list';
-import { Button } from 'tamagui';
 import { X } from '@tamagui/lucide-icons';
-
-// TODO check if we've fixed the chat screen on another branch
-// link: https://github.com/andrew-bierman/PackRat/issues/ ???
+import { MessageCircle, Camera, Settings, Home } from 'lucide-react-native';
+import { ActionItem } from './ActionItem';
+import {
+  SuggestionDescription,
+  SuggestionList,
+} from '../../components/Suggestion';
 
 interface ChatComponentProps {
   showChatSelector?: boolean;
   defaultChatId?: string | null;
   itemTypeId?: string | null;
+  type?: string | null;
 }
 
 interface ChatModalTriggerProps {
   title: string;
   trigger: string;
   itemTypeId: string | null;
+  type: string;
 }
 
+const actionItems = [
+  {
+    icon: MessageCircle,
+    color: 'orange',
+    title: 'Message',
+    description: 'Interact with our AI-powered chatbot.',
+    type: 'chat',
+  },
+  {
+    icon: Settings,
+    color: 'teal',
+    title: 'Suggestions',
+    description: 'See how you can improve your pack.',
+    type: 'suggestion',
+  },
+];
+
 const ChatComponent: React.FC<ChatComponentProps> = ({
   showChatSelector = true,
   defaultChatId = null,
   itemTypeId = null,
+  type = null,
 }) => {
   const styles = useCustomStyles(loadStyles);
   const {
-    conversations,
-    typeId,
     parsedMessages,
     userInput,
     handleSendMessage,
     setUserInput,
-    setTypeId,
     isLoading,
-  } = useChat({ itemTypeId });
+  } = useChat({ itemTypeId, type });
 
   const [messages, setMessages] = useState(parsedMessages);
 
@@ -116,9 +135,115 @@ const ChatComponent: React.FC<ChatComponentProps> = ({
   );
 };
 
-const ChatModalTrigger: React.FC<ChatModalTriggerProps> = ({ itemTypeId }) => {
+const SuggestionComponent = ({ itemTypeId = null, type = null }) => {
+  const [dots, setDots] = useState('.');
+  const {
+    handleSubmitAnalysis,
+    suggestions,
+    isAnalysisLoading,
+    setSuggestions,
+  } = useChat({
+    itemTypeId,
+    type,
+  });
+
+  useEffect(() => {
+    console.log(suggestions);
+  }, [suggestions]);
+
+  useEffect(() => {
+    if (isAnalysisLoading) {
+      const interval = setInterval(() => {
+        setDots((dots) => (dots.length < 3 ? dots + '.' : '.'));
+      }, 500); // Change dots every 500ms
+      return () => clearInterval(interval); // Clean up on component unmount
+    }
+  }, [isAnalysisLoading]);
+
+  const styles = useCustomStyles(loadStyles);
+
+  const scrollViewRef = useRef<ScrollView>(null);
+
+  const handleLayout = () => {
+    scrollViewRef.current?.scrollToEnd({ animated: false });
+  };
+
+  const removeItem = (id) => {
+    console.log('remove item', id);
+    setSuggestions((prevSuggestion) => {
+      if (
+        prevSuggestion &&
+        prevSuggestion.suggestion &&
+        prevSuggestion.suggestion.Items
+      ) {
+        return {
+          ...prevSuggestion,
+          suggestion: {
+            Items: prevSuggestion.suggestion.Items.filter(
+              (item) => String(item.id) !== String(id),
+            ),
+          },
+        };
+      } else {
+        return prevSuggestion;
+      }
+    });
+  };
+
+  return (
+    <View>
+      <RStack style={{ flex: 1 }}>
+        {!suggestions.suggestion.Items ? (
+          <Text style={{ width: '100%', textAlign: 'center' }}>
+            Allow me to analyze your pack and help!
+          </Text>
+        ) : (
+          <ScrollView
+            onContentSizeChange={handleLayout}
+            style={{ maxHeight: 620, width: '100%', borderRadius: 10 }}
+            showsVerticalScrollIndicator={false}
+            contentContainerStyle={{ flexGrow: 1, justifyContent: 'flex-end' }}
+          >
+            <SuggestionDescription data={suggestions.reasoning} />
+            <SuggestionList
+              suggestion={suggestions.suggestion}
+              onAddItem={removeItem}
+            />
+          </ScrollView>
+        )}
+        <RStack
+          style={{
+            marginTop: 10,
+            gap: 8,
+            flexDirection: 'row',
+            width: '100%',
+          }}
+        >
+          <RButton
+            onClick={() => {
+              handleSubmitAnalysis();
+            }}
+            disabled={isAnalysisLoading}
+            style={{ width: '100%' }}
+          >
+            <Text style={styles.sendText}>
+              {isAnalysisLoading ? 'Loading' + dots : 'Analyze'}
+            </Text>
+          </RButton>
+        </RStack>
+      </RStack>
+    </View>
+  );
+};
+
+const ChatModalTrigger: React.FC<ChatModalTriggerProps> = ({
+  itemTypeId,
+  type,
+}) => {
   const styles = useCustomStyles(loadStyles);
   const [isChatOpen, setIsChatOpen] = useState(false);
+  const [isItemOpen, setIsItemOpen] = useState(false);
+  const [isSuggestionsOpen, setIsSuggestionsOpen] = useState(false);
   const animationValue = useRef(new Animated.Value(0)).current;
 
   useEffect(() => {
@@ -131,81 +256,65 @@ const ChatModalTrigger: React.FC<ChatModalTriggerProps> = ({ itemTypeId }) => {
 
   return (
     <View style={styles.container}>
-      <TouchableOpacity onPress={() => setIsChatOpen(!isChatOpen)}>
-        <TouchableOpacity
-          style={{
+      <TouchableOpacity
+        style={{
+          width: 50,
+          height: 50,
+          borderRadius: 25,
+          justifyContent: 'center',
+          alignItems: 'center',
+        }}
+        onPress={() => {
+          if (isChatOpen || isSuggestionsOpen) {
+            setIsItemOpen(false);
+            setIsChatOpen(false);
+            setIsSuggestionsOpen(false);
+          } else {
+            setIsItemOpen(!isItemOpen);
+          }
+        }}
+      >
+        <RImage
+          source={{
+            // TODO: Update this to use the intended chat logo
+            uri: 'https://raw.githubusercontent.com/andrew-bierman/PackRat/4ad449702c088e505c4b484219121d365150f971/packages/app/assets/chat-svgrepo-com%20(1).svg',
             width: 50,
             height: 50,
-            borderRadius: 25,
-            justifyContent: 'center',
-            alignItems: 'center',
           }}
-          onPress={() => setIsChatOpen(!isChatOpen)}
-        >
-          <RImage
-            source={{
-              // TODO: Update this to use the intended chat logo
-              uri: 'https://raw.githubusercontent.com/andrew-bierman/PackRat/4ad449702c088e505c4b484219121d365150f971/packages/app/assets/chat-svgrepo-com%20(1).svg',
-              width: 50,
-              height: 50,
-            }}
-            width={40}
-            height={40}
-            style={{
-              ...styles.logo,
-              shadowColor: '#000',
-              shadowOffset: {
-                width: 0,
-                height: 2,
-              },
-              shadowOpacity: 0.75,
-              shadowRadius: 1.24,
-              // elevation: 3,
-            }}
-            alt="PackRat Logo"
-          />
-        </TouchableOpacity>
+          width={40}
+          height={40}
+          style={styles.logo}
+          alt="PackRat Logo"
+        />
       </TouchableOpacity>
+      {isItemOpen && (
+        <Animated.View style={{ ...styles.animatedView, width: 308 }}>
+          <View style={{ width: 300 }}>
+            {actionItems.map((item, index) => {
+              const { icon, color, title, description, type } = item;
+              return (
+                <ActionItem
+                  key={index}
+                  icon={icon}
+                  color={color}
+                  title={title}
+                  type={type}
+                  description={description}
+                  setIsChatOpen={setIsChatOpen}
+                  setIsItemOpen={setIsItemOpen}
+                  setIsSuggestionOpen={setIsSuggestionsOpen}
+                />
+              );
+            })}
+          </View>
+        </Animated.View>
+      )}
       {isChatOpen && (
-        <Animated.View
-          style={{
-            position: 'absolute',
-            bottom: 50,
-            right: 20,
-            width: 450,
-            // height: 700,
-            backgroundColor: '#fff',
-            borderRadius: 10,
-            padding: 4,
-            zIndex: 1000,
-            shadowColor: '#000',
-            shadowOffset: { width: 0, height: 2 },
-            shadowOpacity: 0.25,
-            shadowRadius: 3.84,
-            elevation: 5,
-            transform: [
-              {
-                translateX: animationValue.interpolate({
-                  inputRange: [0, 1],
-                  outputRange: [225, 0], // half of your view width
-                }),
-              },
-              {
-                translateY: animationValue.interpolate({
-                  inputRange: [0, 1],
-                  outputRange: [350, 0], // half of your view height
-                }),
-              },
-              {
-                scale: animationValue,
-              },
-            ],
-            opacity: animationValue,
-          }}
-        >
-          <Button
+        <Animated.View style={{ ...styles.animatedView, width: 450 }}>
+          <RButton
             position="absolute"
             backgroundColor="$background"
+            color="$color"
             top="$2"
             right="$2"
             size="$2"
@@ -214,7 +323,24 @@ const ChatModalTrigger: React.FC<ChatModalTriggerProps> = ({ itemTypeId }) => {
             onPress={() => setIsChatOpen(false)}
             style={{ zIndex: 1001 }}
           />
-          <ChatComponent itemTypeId={itemTypeId} />
+          <ChatComponent itemTypeId={itemTypeId} type={type} />
+        </Animated.View>
+      )}
+      {isSuggestionsOpen && (
+        <Animated.View style={styles.animatedView}>
+          <RButton
+            position="absolute"
+            backgroundColor="$background"
+            color="$color"
+            top="$2"
+            right="$2"
+            size="$2"
+            circular
+            icon={X}
+            onPress={() => setIsSuggestionsOpen(false)}
+            style={{ zIndex: 1001 }}
+          />
+          <SuggestionComponent itemTypeId={itemTypeId} type={type} />
         </Animated.View>
       )}
     </View>
diff --git a/packages/app/components/pack/PackDetails.tsx b/packages/app/components/pack/PackDetails.tsx
index 3ff1f4e62..cb7025278 100644
--- a/packages/app/components/pack/PackDetails.tsx
+++ b/packages/app/components/pack/PackDetails.tsx
@@ -156,6 +156,7 @@ export function PackDetails() {
           itemTypeId={currentPackId}
           title="Chat"
           trigger="Open Chat"
+          type="pack"
         />
       </View>
     </>
diff --git a/packages/app/hooks/chat/useChat.ts b/packages/app/hooks/chat/useChat.ts
index 3ec47b0fe..43121300e 100644
--- a/packages/app/hooks/chat/useChat.ts
+++ b/packages/app/hooks/chat/useChat.ts
@@ -1,15 +1,38 @@
 import { useState } from 'react';
 import { useGetUserChats } from './useGetUserChats';
-import { useGetAIResponse } from './useGetAIResponse';
+import { useGetAIResponse, useGetAISuggestions } from './useGetAIResponse';
 import { useAuthUser } from 'app/auth/hooks';
+import { v4 as uuidv4 } from 'uuid';
+
+interface Reasoning {
+  role: string;
+  content: string;
+}
+
+interface Suggestion {
+  name: string;
+  weight: number;
+  unit: string;
+  quantity: number;
+  category: string;
+}
+
+interface Suggestions {
+  reasoning: Reasoning[];
+  suggestion: Suggestion[];
+}
 
 export const useChat = (itemTypeId = null) => {
   const user = useAuthUser();
   const [typeId, setTypeId] = useState(itemTypeId);
   const [isLoading, setIsLoading] = useState(false);
+  const [isAnalysisLoading, setIsAnalysisLoading] = useState(false);
+  const [suggestions, setSuggestions] = useState<Suggestions>({
+    reasoning: [],
+    suggestion: [],
+  });
 
   const [userInput, setUserInput] = useState('');
-  // const [parsedMessages, setParsedMessages] = useState([]);
 
   const { data: chatsData, refetch } = useGetUserChats(
     user.id,
@@ -17,6 +40,7 @@ export const useChat = (itemTypeId = null) => {
   );
 
   const { getAIResponse } = useGetAIResponse();
+  const { getAISuggestions } = useGetAISuggestions();
 
   const conversations = chatsData?.conversations?.history || '';
 
@@ -41,21 +65,6 @@ export const useChat = (itemTypeId = null) => {
       return accumulator;
     }, []);
   };
-
-  // const conversation = conversations?.find(
-  //   (chat) => chat._id === conversationId,
-  // );
-
-  // useEffect(() => {
-  //
-  //   setParsedMessages(
-  //     conversation ? parseConversationHistory(conversation.history) : [],
-  //   );
-  // }, [conversationId]);
-
-  // /
-
-  // Compute parsedMessages directly
   const parsedMessages = conversations
     ? parseConversationHistory(conversations)
     : [];
@@ -63,8 +72,6 @@ export const useChat = (itemTypeId = null) => {
   //
 
   /**
-   * Handles sending a message.
-   *
    * @return {Promise<void>} This function returns nothing.
    */
   const handleSendMessage = async (userMessage) => {
@@ -74,11 +81,47 @@ export const useChat = (itemTypeId = null) => {
       userId: user.id,
       userInput: userMessage,
       itemTypeId: typeId.itemTypeId,
+      type: typeId.type,
     });
     await refetch();
     setIsLoading(false);
   };
 
+  const handleSubmitAnalysis = async () => {
+    try {
+      setIsAnalysisLoading(true);
+      const response = await getAISuggestions({
+        userId: user.id,
+        itemTypeId: typeId.itemTypeId,
+        type: typeId.type,
+      });
+
+      setSuggestions({
+        reasoning: [{ role: 'ai', content: response.aiResponse }],
+        suggestion: {
+          ...response.refined,
+          Items: response.refined.Items.map((item) => {
+            const modifiedItem = {
+              ...item,
+              ownerId: user.id,
+              packId: itemTypeId.itemTypeId,
+              type: item.category,
+              id: uuidv4(),
+            };
+            delete modifiedItem.category;
+            return modifiedItem;
+          }),
+        },
+      });
+
+      console.log(response);
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setIsAnalysisLoading(false);
+    }
+  };
+
   return {
     conversations,
     typeId,
@@ -86,7 +129,11 @@ export const useChat = (itemTypeId = null) => {
     userInput,
     isLoading,
     handleSendMessage,
+    handleSubmitAnalysis,
     setUserInput,
     setTypeId,
+    suggestions,
+    isAnalysisLoading,
+    setSuggestions,
   };
 };
diff --git a/packages/app/hooks/chat/useGetAIResponse.ts b/packages/app/hooks/chat/useGetAIResponse.ts
index 244c72c51..b1f129f9a 100644
--- a/packages/app/hooks/chat/useGetAIResponse.ts
+++ b/packages/app/hooks/chat/useGetAIResponse.ts
@@ -3,50 +3,17 @@ import { queryTrpc } from '../../trpc';
 export function useGetAIResponse() {
   const utils = queryTrpc.useContext();
   const mutation = queryTrpc.getAIResponse.useMutation({
-    // onMutate: async ({ userId, conversationId, userInput }) => {
-    //   const previousConversation = queryTrpc.getConversationById.getData({
-    //     conversationId,
-    //   });
-    //   const newQueryData = {
-    //     ...previousConversation,
-    //     messages: [
-    //       ...previousConversation.messages,
-    //       {
-    //         message: userInput,
-    //         sender: userId,
-    //         id: Date.now().toString(),
-    //       },
-    //     ],
-    //   };
-    //   queryTrpc.getConversationById.setData(
-    //     { conversationId },
-    //     newQueryData,
-    //   );
-    //   return {
-    //     previousConversation,
-    //   };
-    // },
-    // onError: (err, { userId, conversationId, userInput }, context) => {
-    //
-    //
-    //   if (context.previousConversation) {
-    //     queryTrpc.getConversationById.setData(
-    //       { conversationId },
-    //       context.previousConversation,
-    //     );
-    //   }
-    // },
     onSuccess: () => {
-      //   queryTrpc.getUserChats.invalidate();
       utils.invalidate();
     },
   });
 
-  const getAIResponse = async ({ userId, userInput, itemTypeId }) => {
+  const getAIResponse = async ({ userId, userInput, itemTypeId, type }) => {
     return mutation.mutate({
       userId,
       userInput: userInput.message,
       itemTypeId,
+      type,
     });
   };
 
@@ -55,3 +22,34 @@ export function useGetAIResponse() {
     ...mutation,
   };
 }
+
+export function useGetAISuggestions() {
+  const utils = queryTrpc.useContext();
+  const mutation = queryTrpc.getAISuggestions.useMutation();
+
+  const getAISuggestions = ({ userId, itemTypeId, type }) => {
+    return new Promise((resolve, reject) => {
+      mutation.mutate(
+        {
+          userId,
+          itemTypeId,
+          type,
+        },
+        {
+          onSuccess: (data) => {
+            utils.invalidate();
+            resolve(data);
+          },
+          onError: (error) => {
+            reject(error);
+          },
+        },
+      );
+    });
+  };
+
+  return {
+    getAISuggestions,
+    ...mutation,
+  };
+}
diff --git a/packages/app/package.json b/packages/app/package.json
index 478c278ba..58700e456 100644
--- a/packages/app/package.json
+++ b/packages/app/package.json
@@ -100,6 +100,7 @@
     "immer": "^10.0.3",
     "jotai": "^2.6.4",
     "lodash": "^4.17.21",
+    "lucide-react-native": "^0.400.0",
     "mapbox-gl": "1.13.3",
     "moti": "^0.27.2",
     "native-base": "^3.4.28",
diff --git a/packages/ui/src/Bento/elements/list/ChatList.tsx b/packages/ui/src/Bento/elements/list/ChatList.tsx
index 7f96addae..9a2cc7b31 100644
--- a/packages/ui/src/Bento/elements/list/ChatList.tsx
+++ b/packages/ui/src/Bento/elements/list/ChatList.tsx
@@ -74,7 +74,7 @@ function ChatItem({ item, index }: { item: Message; index: number }) {
   const itsMe = role === 'user';
   const avatar = itsMe ? avatars[0] : avatars[1];
   const [showMessage, setShowMessage] = useState(false);
-  const showDelay = index * 50;
+  const showDelay = 10;
   const [start, setStart] = useState(false);
   const { isDark } = useTheme();
 
diff --git a/packages/ui/src/ThreeDotsMenu/ThreeDotsMenu.tsx b/packages/ui/src/ThreeDotsMenu/ThreeDotsMenu.tsx
index 07314982a..64b66e672 100644
--- a/packages/ui/src/ThreeDotsMenu/ThreeDotsMenu.tsx
+++ b/packages/ui/src/ThreeDotsMenu/ThreeDotsMenu.tsx
@@ -17,7 +17,6 @@ export function ThreeDotsMenu({
   onOpenChange,
   open,
 }: ThreeDotsMenuProps) {
-  console.log('ksksksks', open);
   return (
     <Popover
       size="$5"
diff --git a/server/src/controllers/openAi/getAIResponse.ts b/server/src/controllers/openAi/getAIResponse.ts
index 48126cbc0..d9355f452 100644
--- a/server/src/controllers/openAi/getAIResponse.ts
+++ b/server/src/controllers/openAi/getAIResponse.ts
@@ -1,9 +1,6 @@
 import { getAIResponseService } from '../../services/openAi/openAi.service';
 import { publicProcedure } from '../../trpc';
 import { z } from 'zod';
-// import { getAIResponseService } from './langchain';
-import { GetResponseFromAIError } from '../../helpers/errors';
-import { responseHandler } from '../../helpers/responseHandler';
 
 /**
  * Retrieves an AI response based on user input and conversation history.
@@ -11,19 +8,6 @@ import { responseHandler } from '../../helpers/responseHandler';
  * @param {Object} res - The response object.
  * @return {Object} The AI response and updated conversation object.
  */
-// export const getAIResponse = async (req, res, next) => {
-//   console.log('Helooooooooooooooooooooooooo');
-//   try {
-//     const { userId, userInput, itemTypeId } = req.body;
-
-//     const result = await getAIResponseService(userId, userInput, itemTypeId);
-
-//     res.locals.data = result;
-//     responseHandler(res);
-//   } catch (error) {
-//     next(GetResponseFromAIError);
-//   }
-// };
 
 export function getAIResponseRoute() {
   return publicProcedure
@@ -32,15 +16,17 @@ export function getAIResponseRoute() {
         userId: z.string(),
         userInput: z.string(),
         itemTypeId: z.string(),
+        type: z.string(),
       }),
     )
     .mutation(async (opts) => {
       const { env } = opts.ctx;
-      const { userId, userInput, itemTypeId } = opts.input;
+      const { userId, userInput, itemTypeId, type } = opts.input;
       return getAIResponseService(
         userId,
         itemTypeId,
         userInput,
+        type,
         env.OPENAI_API_KEY,
       );
     });
diff --git a/server/src/controllers/openAi/getAISuggestions.ts b/server/src/controllers/openAi/getAISuggestions.ts
new file mode 100644
index 000000000..8ea13f119
--- /dev/null
+++ b/server/src/controllers/openAi/getAISuggestions.ts
@@ -0,0 +1,31 @@
+import { getAISuggestionService } from '../../services/openAi/openAi.service';
+import { publicProcedure } from '../../trpc';
+import { z } from 'zod';
+
+/**
+ * Retrieves an AI response based on user input and conversation history.
+ * @param {Object} req - The request object.
+ * @param {Object} res - The response object.
+ * @return {Object} The AI response and updated conversation object.
+ */
+
+export function getAISuggestionsRoute() {
+  return publicProcedure
+    .input(
+      z.object({
+        userId: z.string(),
+        itemTypeId: z.string(),
+        type: z.string(),
+      }),
+    )
+    .mutation(async (opts) => {
+      const { env } = opts.ctx;
+      const { userId, itemTypeId, type } = opts.input;
+      return getAISuggestionService(
+        userId,
+        itemTypeId,
+        type,
+        env.OPENAI_API_KEY,
+      );
+    });
+}
diff --git a/server/src/controllers/openAi/index.ts b/server/src/controllers/openAi/index.ts
index f4a1ee401..238c5ae35 100644
--- a/server/src/controllers/openAi/index.ts
+++ b/server/src/controllers/openAi/index.ts
@@ -1,2 +1,3 @@
 export * from './getAIResponse';
 export * from './getUserChats';
+export * from './getAISuggestions';
diff --git a/server/src/routes/trpcRouter.ts b/server/src/routes/trpcRouter.ts
index a1ecf1c0c..235afe6e8 100644
--- a/server/src/routes/trpcRouter.ts
+++ b/server/src/routes/trpcRouter.ts
@@ -50,7 +50,11 @@ import {
   scorePackRoute,
 } from '../controllers/pack';
 
-import { getAIResponseRoute, getUserChatsRoute } from '../controllers/openAi';
+import {
+  getAIResponseRoute,
+  getUserChatsRoute,
+  getAISuggestionsRoute,
+} from '../controllers/openAi';
 import {
   addGlobalItemToPackRoute,
   addItemGlobalRoute,
@@ -167,6 +171,7 @@ export const appRouter = trpcRouter({
   getPhotonDetails: getPhotonDetailsRoute(),
   // open ai routes
   getAIResponse: getAIResponseRoute(),
+  getAISuggestions: getAISuggestionsRoute(),
   getUserChats: getUserChatsRoute(),
   // item routes
   getItems: getItemsRoute(),
diff --git a/server/src/services/openAi/getAIResponseService.ts b/server/src/services/openAi/getAIResponseService.ts
index 2a847a942..eccbac0b4 100644
--- a/server/src/services/openAi/getAIResponseService.ts
+++ b/server/src/services/openAi/getAIResponseService.ts
@@ -1,9 +1,8 @@
 import OpenAI from 'openai';
 import Instructor from '@instructor-ai/instructor';
-import { z } from 'zod';
 import { Conversation } from '../../drizzle/methods/Conversation';
 import { User } from '../../drizzle/methods/User';
-
+import { getPackInformation } from './referredItemInformation';
 /**
  * Retrieves AI response for a given user input in a conversation.
  * @param {PrismaClient} prisma - Prisma client.
@@ -12,10 +11,12 @@ import { User } from '../../drizzle/methods/User';
  * @param {string} userInput - The user input in the conversation.
  * @returns {Object} - The AI response and the updated conversation.
  */
+
 export const getAIResponseService = async (
   userId: string,
   itemTypeId: string,
   userInput: string,
+  type: string,
   openAIAPIKey: string,
 ): Promise<object> => {
   if (!openAIAPIKey) {
@@ -31,12 +32,32 @@ export const getAIResponseService = async (
     apiKey: openAIAPIKey,
   });
 
+  // Apply the patch to the OpenAI client
+  const client = Instructor({
+    client: openai,
+    mode: 'FUNCTIONS',
+  });
+
   const user = await userClass.findUser({ userId });
 
   if (!user) {
     throw new Error('User not found');
   }
 
+  let itemInfo;
+  switch (type) {
+    case 'trip':
+      console.log('trip');
+      // info = await getTripInformation(itemTypeId);
+      break;
+    case 'pack':
+      itemInfo = await getPackInformation(itemTypeId);
+      break;
+    default:
+      console.log('trip');
+      throw new Error(`Invalid type: ${itemTypeId}`);
+  }
+
   let conversation: any = await conversationClass.findConversation(
     userId,
     itemTypeId,
@@ -60,10 +81,7 @@ export const getAIResponseService = async (
   // a detailed system message to instruct the model about its role
   const systemMessage = {
     role: 'system',
-    content: `You are a helpful assistant that provides hiking advice. 
-    You should only provide advice related to hiking and not generate any other type of content whatsoever.
-    If a user asks for help outside of the hiking domain, respond with: "Sorry, I can not help with that 😅!"
-    Additionally, make your responses more detailed when the user asks relevant hiking-related questions.`,
+    content: itemInfo,
   };
 
   // Add the system message to the beginning of the messages array
@@ -72,11 +90,10 @@ export const getAIResponseService = async (
   // Add the user message
   messages.push({ role: 'user', content: userInput });
 
-  const response = await openai.chat.completions.create({
+  const response = await client.chat.completions.create({
     model: 'gpt-3.5-turbo',
     messages,
-    temperature: 0.5, // Lower temperature to make output more deterministic
-    // min_tokens: 100, // Limit the length of the response this doesnt exist still
+    temperature: 0.8,
   });
 
   const aiResponse = response.choices?.[0]?.message?.content?.trim() || '';
diff --git a/server/src/services/openAi/getAISuggestionService.ts b/server/src/services/openAi/getAISuggestionService.ts
new file mode 100644
index 000000000..5ec9f23c7
--- /dev/null
+++ b/server/src/services/openAi/getAISuggestionService.ts
@@ -0,0 +1,176 @@
+import OpenAI from 'openai';
+import Instructor from '@instructor-ai/instructor';
+import { User } from '../../drizzle/methods/User';
+import { getPackByIdService } from '../pack/getPackByIdService';
+import { getPackSuggestionPrompt } from './referredItemInformation';
+import { PackSchema } from './zodSchema';
+
+/**
+ * Retrieves AI response for a given user input in a conversation.
+ * @param {PrismaClient} prisma - Prisma client.
+ * @param {string} userId - The ID of the user.
+ * @param {string} itemTypeId - The ID of the conversation.
+ * @param {string} userInput - The user input in the conversation.
+ * @returns {Object} - The AI response and the updated conversation.
+ */
+
+export const getAISuggestionService = async (
+  userId: string,
+  itemTypeId: string,
+  type: string,
+  openAIAPIKey: string,
+): Promise<object> => {
+  if (!openAIAPIKey) {
+    throw new Error(
+      'Failed to get response from AI. OPENAI_API_KEY is not set.',
+    );
+  }
+  const userClass = new User();
+
+  const openai = new OpenAI({
+    apiKey: openAIAPIKey,
+  });
+
+  // Apply the patch to the OpenAI client
+  const client = Instructor({
+    client: openai,
+    mode: 'TOOLS',
+  });
+
+  const refiner = Instructor({
+    client: openai,
+    mode: 'FUNCTIONS',
+  });
+
+  const user = await userClass.findUser({ userId });
+
+  if (!user) {
+    throw new Error('User not found');
+  }
+
+  let itemInfo;
+  switch (type) {
+    case 'trip':
+      console.log('trip');
+      // info = await getTripInformation(itemTypeId);
+      break;
+    case 'pack':
+      itemInfo = await getPackSuggestionPrompt(itemTypeId);
+      break;
+    default:
+      console.log('trip');
+      throw new Error(`Invalid type: ${itemTypeId}`);
+  }
+
+  const response = await client.chat.completions.create({
+    model: 'gpt-3.5-turbo',
+    messages: [
+      {
+        role: 'system',
+        content: `Analyze and Optimize the user pack as per the following guidelines:
+            -Use the pack details to give personalized recommendations and optimizations.
+            -improve the pack items considering safety, comfort, and efficiency.
+            -Suggest a new Item that might reduce excessive weight, such as substituting heavy items with lighter alternatives (e.g., a water filter instead of carrying excessive water).
+            -add essential items that might be missing from the pack.
+
+            Here are some good guidelines to follow:
+            General:
+                Food:
+                Meals: Trail-friendly meals (freeze-dried, instant)
+                Snacks: Trail mix, energy bars, jerky, dried fruit
+                Water:
+                Hydration: Water bottles or hydration bladder
+                Purification: Water filter or purification tablets
+                Essentials:
+                Navigation: Map, compass, GPS device
+                Clothing: Weather-appropriate layers, hat, hiking boots, extra socks
+                Safety: First aid kit, personal medications, sunscreen, insect repellent
+                Gear: Comfortable backpack, headlamp with extra batteries, multi-tool
+                Documents: ID, permits, emergency contact info
+                Communication: Cell phone, portable charger or power bank
+
+            Food Guide:
+
+                Hey there, adventurers! Ready for your next hike? Here is a quick and tasty guide to fuel your journey:
+                Easy Snacks:
+                Trail Mix: Nuts, seeds, dried fruit, and chocolate bits.
+                Energy Bars: Natural ingredient bars.
+                Dried Fruits: Apricots, apple slices, raisins, dates.
+                Nuts & Seeds: Almonds, walnuts, sunflower seeds.
+                Lunch Options:
+                Sandwiches: Nut butter, cheese, or lean meat.
+                Wraps: Whole-grain tortillas with hummus, veggies, or protein.
+                Cheese & Crackers: Hard cheese and whole-grain crackers.
+                Quick Meals:
+                Instant Noodles/Couscous: Quick-cook with hot water.
+                Dehydrated Meals: Lightweight, just add water.
+
+            Essentials Guide:
+                Navigation: Map & Compass,GPS Device
+                Clothing: Quick-Dry Layers, Waterproof Jacket, Extra Socks, Hat and Sunglasses
+                Safety Gear: First Aid Kit, Multi-Tool/Knife, Whistle
+                Sun Protection: Sunscreen, Hat & Sunglasses
+                Light: Headlamp/Flashlight
+                Emergency Shelter: Bivy Sack/Space Blanket
+                Fire: Matches/Lighter
+                Backpack: Comfortable Hiking Backpack
+
+            Water Guide:
+                Water Bottles/Reservoir: Carry at least 2-3 liters.
+                Purification Straw: Lightweight and effective.
+                Portable Water Filter: Perfect for streams and lakes.
+
+            What to Pack and What's Too Heavy:
+
+                Lightweight Food Options:
+
+                  Snacks:
+
+                    Instead of whole nuts, consider packing trail mix or nut butter packets. 🥜
+                    Switch granola bars with lighter energy gels or fruit leathers. 🍇
+                  Meals:
+
+                    Replace cans of food with dehydrated meals or instant soup mixes. 🥫 ➡️🍲
+                    Use whole grain wraps instead of sandwiches with heavy bread to reduce weight. 🌯
+                  Fruits:
+
+                    Sub out whole fruits for dried fruits like apricots, raisins, or banana chips. 🍎 ➡️🍏
+                    Consider fruit strips or fruit leather instead of heavier fresh fruit. 🍑
+                  Hydration:
+
+                    Instead of carrying multiple bottles of water, use a lightweight water filter to refill from natural sources. 🚰
+                    Carry electrolyte powders instead of pre-made drinks. 💧➡️⚡
+                  Tips for Packing Light:
+
+                  Portion Control: Pack smaller portions of high-calorie, nutrient-dense foods.
+                  Resealable Bags: Use ziplock bags for organizing and reducing the weight of packaging.
+                  Multipurpose Items: Bring items that can serve multiple purposes (e.g., a pack towel that doubles as a napkin).
+              
+            * Packing lightly yet efficiently can make hike more pleasant. Make sure to suggest these lightweight food options to pack.
+            * Give a good reasoning and then Finally 'ALWAYS' Give the suggested and improved pack in the users original request format,
+              remember the items in the pack array of of strings "name (weight and unit of measurement(lb, oz, kg, g), quantity pcs, category: category name)"
+              just like the user prompt. and category is of three Either Food, Water or Essentials.`,
+      },
+      { role: 'user', content: itemInfo },
+    ],
+  });
+
+  const aiResponse = response.choices?.[0]?.message?.content?.trim() || '';
+
+  const refined = await refiner.chat.completions.create({
+    model: 'gpt-3.5-turbo',
+    messages: [
+      {
+        role: 'user',
+        content: aiResponse,
+      },
+    ],
+    response_model: { schema: PackSchema, name: 'Pack' },
+    max_retries: 2,
+  });
+
+  return {
+    aiResponse,
+    refined,
+  };
+};
diff --git a/server/src/services/openAi/langchain/index.ts b/server/src/services/openAi/langchain/index.ts
index f0b0e7dd3..bfcf71b22 100644
--- a/server/src/services/openAi/langchain/index.ts
+++ b/server/src/services/openAi/langchain/index.ts
@@ -1,8 +1,8 @@
 import { ChatOpenAI } from 'langchain/chat_models/openai';
 import { AIMessage, HumanMessage, SystemMessage } from 'langchain/schema';
 import Conversation from '../../../models/openai/conversationModel';
-import { getPackByIdService } from '../../../services/pack/pack.service';
-import { getTripByIdService } from '../../../services/trip/getTripByIdService';
+import { getPackByIdService } from '../../pack/getPackByIdService';
+import { getTripByIdService } from '../../trip/getTripByIdService';
 import mongoose from 'mongoose';
 import User from '../../../models/userModel';
 
@@ -80,7 +80,7 @@ export async function checkAPIKey() {
   }
 }
 
-async function getPackInformation(packId) {
+export async function getPackInformation(packId) {
   if (!packId) return '';
   const packData: any = await getPackByIdService(packId);
   return `Analyze the pack titled '${packData.name}', owned by ${packData.owners
diff --git a/server/src/services/openAi/openAi.service.ts b/server/src/services/openAi/openAi.service.ts
index 40381c31a..ba4fa0252 100644
--- a/server/src/services/openAi/openAi.service.ts
+++ b/server/src/services/openAi/openAi.service.ts
@@ -1,2 +1,3 @@
 export * from './getAIResponseService';
 export * from './getUserChatsService';
+export * from './getAISuggestionService';
diff --git a/server/src/services/openAi/referredItemInformation/index.ts b/server/src/services/openAi/referredItemInformation/index.ts
new file mode 100644
index 000000000..6342f570f
--- /dev/null
+++ b/server/src/services/openAi/referredItemInformation/index.ts
@@ -0,0 +1,133 @@
+import { getPackByIdService } from '../../pack/getPackByIdService';
+
+export async function getPackInformation(packId) {
+  if (!packId) return '';
+  const packData: any = await getPackByIdService(packId);
+
+  return `You are a Helpful PackRat Assistant who provides all information and assistance to users for 
+    Hiking Adventures  🏞️  Hiking is your specialty. You are to answer questions about trails, gears, safety
+    or packing trips. Note that you are only able to assist with hiking-related questions. If the user's inquiry isn't about hiking,
+    respond with "Sorry, I can not help with that 😅!. Ready to explore the great outdoors? I'm ready to help!"
+    General greetings and polite interactions are fine. Remember to always be helpful and informative. 
+
+    The user has a pack titled ${packData.name}, owned by ${packData.owner.name}. 
+
+    This pack contains items like ${packData.items
+      .map(
+        (item: any) =>
+          `${item.name} (${item.weight}${item.unit}, ${item.quantity} pcs, category: ${item.category.name})`,
+      )
+      .join(', ')}. 
+    The pack is ${packData.is_public ? 'public' : 'private'}, favorited by ${
+      packData.favorites_count
+    } users, created on ${new Date(packData.createdAt).toLocaleDateString()}. 
+    It is graded as ${packData?.grades?.weight}, ${
+      packData?.grades?.essentialItems
+    }, and ${
+      packData?.grades?.redundancyAndVersatility
+    } in weight, essential items, and redundancy/versatility respectively. 
+    The scores are: weight ${packData?.scores?.weightScore}, essential items ${
+      packData?.scores?.essentialItemsScore
+    }, and redundancy/versatility ${
+      packData?.scores?.redundancyAndVersatilityScore
+    }, 
+    totaling ${packData?.totalScore} with a total weight of ${
+      packData.total_weight
+    }g.
+    
+    When interacting with the user:
+    - Provide detailed advice on hiking-related questions.
+    - Use the pack details to give personalized recommendations and optimizations.
+    - Here are some good guidelines to follow:
+      General:
+          Food:
+          Meals: Trail-friendly meals (freeze-dried, instant)
+          Snacks: Trail mix, energy bars, jerky, dried fruit
+          Water:
+          Hydration: Water bottles or hydration bladder
+          Purification: Water filter or purification tablets
+          Essentials:
+          Navigation: Map, compass, GPS device
+          Clothing: Weather-appropriate layers, hat, hiking boots, extra socks
+          Safety: First aid kit, personal medications, sunscreen, insect repellent
+          Gear: Comfortable backpack, headlamp with extra batteries, multi-tool
+          Documents: ID, permits, emergency contact info
+          Communication: Cell phone, portable charger or power bank
+
+      Food Guide:
+
+          Hey there, adventurers! Ready for your next hike? Here is a quick and tasty guide to fuel your journey:
+          Easy Snacks:
+          Trail Mix: Nuts, seeds, dried fruit, and chocolate bits.
+          Energy Bars: Natural ingredient bars.
+          Dried Fruits: Apricots, apple slices, raisins, dates.
+          Nuts & Seeds: Almonds, walnuts, sunflower seeds.
+          Lunch Options:
+          Sandwiches: Nut butter, cheese, or lean meat.
+          Wraps: Whole-grain tortillas with hummus, veggies, or protein.
+          Cheese & Crackers: Hard cheese and whole-grain crackers.
+          Quick Meals:
+          Instant Noodles/Couscous: Quick-cook with hot water.
+          Dehydrated Meals: Lightweight, just add water.
+
+      Essentials Guide:
+          Navigation: Map & Compass,GPS Device
+          Clothing: Quick-Dry Layers, Waterproof Jacket, Extra Socks, Hat and Sunglasses
+          Safety Gear: First Aid Kit, Multi-Tool/Knife, Whistle
+          Sun Protection: Sunscreen, Hat & Sunglasses
+          Light: Headlamp/Flashlight
+          Emergency Shelter: Bivy Sack/Space Blanket
+          Fire: Matches/Lighter
+          Backpack: Comfortable Hiking Backpack
+
+      Water Guide:
+          Water Bottles/Reservoir: Carry at least 2-3 liters.
+          Purification Straw: Lightweight and effective.
+          Portable Water Filter: Perfect for streams and lakes.
+    - What to Pack and What's Too Heavy:
+
+      Lightweight Food Options:
+
+      Snacks:
+
+      Instead of whole nuts, consider packing trail mix or nut butter packets. 🥜
+      Switch granola bars with lighter energy gels or fruit leathers. 🍇
+      Meals:
+
+      Replace cans of food with dehydrated meals or instant soup mixes. 🥫 ➡️🍲
+      Use whole grain wraps instead of sandwiches with heavy bread to reduce weight. 🌯
+      Fruits:
+
+      Sub out whole fruits for dried fruits like apricots, raisins, or banana chips. 🍎 ➡️🍏
+      Consider fruit strips or fruit leather instead of heavier fresh fruit. 🍑
+      Hydration:
+
+      Instead of carrying multiple bottles of water, use a lightweight water filter to refill from natural sources. 🚰
+      Carry electrolyte powders instead of pre-made drinks. 💧➡️⚡
+      Tips for Packing Light:
+
+      Portion Control: Pack smaller portions of high-calorie, nutrient-dense foods.
+      Resealable Bags: Use ziplock bags for organizing and reducing the weight of packaging.
+      Multipurpose Items: Bring items that can serve multiple purposes (e.g., a pack towel that doubles as a napkin).
+      Packing lightly yet efficiently can make your hike more pleasant. Make sure to add these lightweight food options to your pack and enjoy a comfortable adventure! 🌞🍏🥜🍫🌲✨
+
+    - Be proactive in suggesting useful items or changes based on the pack's contents.
+    - Always keep the user's trip specifics in mind, such as destination, duration, and weather conditions.
+
+    Remember, your goal is to enhance the user's hiking experience by providing valuable and relevant advice based on the context of their pack and trip.`;
+}
+
+export const getPackSuggestionPrompt = async (packId) => {
+  if (!packId) return '';
+  const packData: any = await getPackByIdService(packId);
+
+  return `Below are the details of my pack titled ${packData.name}
+    "Items: ${packData.items
+      .map(
+        (item: any) =>
+          `${item.name} (${item.weight}${item.unit}, ${item.quantity} pcs, category: ${item.category.name})`,
+      )
+      .join(', ')},
+    Total Weight: ${packData.total_weight}g".
+`;
+};
diff --git a/server/src/services/openAi/zodSchema.ts b/server/src/services/openAi/zodSchema.ts
new file mode 100644
index 000000000..584eafc52
--- /dev/null
+++ b/server/src/services/openAi/zodSchema.ts
@@ -0,0 +1,31 @@
+import { z } from 'zod';
+
+const ItemSchema = z.object({
+  name: z.string(),
+  weight: z.number(),
+  unit: z.string(),
+  quantity: z.number(),
+  category: z.enum(['Food', 'Water', 'Essentials']),
+});
+
+const UserSchema = z.object({
+  id: z.string(),
+  name: z.string(),
+  username: z.string(),
+});
+
+const ItemPackSchema = z.object({
+  packId: z.string(),
+  item: ItemSchema,
+});
+
+const TripSchema = z.object({
+  id: z.string(),
+  name: z.string(),
+});
+
+export const PackSchema = z.object({
+  Items: z
+    .array(ItemSchema)
+    .describe('This are items that are in the users pack'),
+});
diff --git a/server/src/services/pack/getPackByIdService.ts b/server/src/services/pack/getPackByIdService.ts
index 91d76824b..a5b352c9a 100644
--- a/server/src/services/pack/getPackByIdService.ts
+++ b/server/src/services/pack/getPackByIdService.ts
@@ -23,10 +23,11 @@ export const getPackByIdService = async (packId: string) => {
     const pack = (await packClass.findPack({
       id: packId,
     })) as PackWithItemPacks;
+
     const packData = {
       ...pack,
-      scores: JSON.parse(pack.scores as string),
-      grades: JSON.parse(pack.grades as string),
+      scores: pack.scores ? JSON.parse(pack.scores as string) : {},
+      grades: pack.grades ? JSON.parse(pack.grades as string) : {},
       total_weight: packClass.computeTotalWeight(pack),
       favorites_count: packClass.computeFavouritesCount(pack),
       total_score: packClass.computeTotalScores(pack),
diff --git a/yarn.lock b/yarn.lock
index 7ff7ebb8c..3f8bdb779 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -12753,6 +12753,7 @@ __metadata:
     immer: "npm:^10.0.3"
     jotai: "npm:^2.6.4"
     lodash: "npm:^4.17.21"
+    lucide-react-native: "npm:^0.400.0"
     mapbox-gl: "npm:1.13.3"
     moti: "npm:^0.27.2"
     native-base: "npm:^3.4.28"
@@ -25605,6 +25606,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lucide-react-native@npm:^0.400.0":
+  version: 0.400.0
+  resolution: "lucide-react-native@npm:0.400.0"
+  peerDependencies:
+    react: ^16.5.1 || ^17.0.0 || ^18.0.0
+    react-native: "*"
+    react-native-svg: ^12.0.0 || ^13.0.0 || ^14.0.0 || ^15.0.0
+  checksum: 10/d09d14a875ce999510090711b0848f5e01e464305e87e09619e36c39a4c2571d23f8fed1c5c13221bc3a124deb7cc1fc4e32d04dd4076fcd2ccff089d0f7a61d
+  languageName: node
+  linkType: hard
+
 "luxon@npm:^3.2.1":
   version: 3.4.4
   resolution: "luxon@npm:3.4.4"

From 8010320579fac07a99b738f799d9bb7a3bf33fb2 Mon Sep 17 00:00:00 2001
From: Tadjaur <tadjaur@tas-groups.com>
Date: Tue, 2 Jul 2024 15:15:25 +0100
Subject: [PATCH 136/257] Fix search feature in pack not working

---
 server/src/drizzle/methods/Item.ts | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/server/src/drizzle/methods/Item.ts b/server/src/drizzle/methods/Item.ts
index 349cc45a0..b7218b38d 100644
--- a/server/src/drizzle/methods/Item.ts
+++ b/server/src/drizzle/methods/Item.ts
@@ -1,5 +1,5 @@
 import { DbClient } from '../../db/client';
-import { and, count, eq, sql } from 'drizzle-orm';
+import { and, count, eq, like, sql } from 'drizzle-orm';
 import { type InsertItem, item as ItemTable } from '../../db/schema';
 
 export class Item {
@@ -103,7 +103,10 @@ export class Item {
   async findGlobal(limit: number, offset: number, searchString: string) {
     try {
       const items = await DbClient.instance.query.item.findMany({
-        where: eq(ItemTable.global, true),
+        where: and(
+          eq(ItemTable.global, true),
+          like(ItemTable.name, `%${searchString}%`),
+        ),
         with: {
           category: {
             columns: { id: true, name: true },

From cf055fb1dd35ca4b7973b3f9515e0469050bc30b Mon Sep 17 00:00:00 2001
From: Tadjaur <tadjaur@tas-groups.com>
Date: Tue, 2 Jul 2024 15:56:08 +0100
Subject: [PATCH 137/257] Clear search after select

---
 packages/app/components/SearchInput/useSearchInput.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/app/components/SearchInput/useSearchInput.ts b/packages/app/components/SearchInput/useSearchInput.ts
index 683fffaf4..64a534546 100644
--- a/packages/app/components/SearchInput/useSearchInput.ts
+++ b/packages/app/components/SearchInput/useSearchInput.ts
@@ -8,8 +8,8 @@ const useSearchInput = ({ onSelect, onChange, searchString }) => {
 
   const handleSearchResultClick = (result) => {
     if (onSelect) {
-      const newSearchValue = onSelect(result);
-      onChange(newSearchValue);
+      onSelect(result);
+      onChange('');
       setIsVisible(false);
     }
   };

From 1467b5b8417da53be3a6fa4882c1fbafe964bdb5 Mon Sep 17 00:00:00 2001
From: pinocchio-life-like <icbr19fl@gmail.com>
Date: Tue, 2 Jul 2024 19:45:00 +0300
Subject: [PATCH 138/257] fix done

---
 packages/app/auth/hooks/useUser.ts            | 10 ++++++---
 packages/app/hooks/user/useProfileSettings.ts |  6 ++---
 packages/app/hooks/user/useUpdateUser.ts      | 22 +++++++++----------
 packages/app/screens/user/Settings.tsx        | 11 +++-------
 4 files changed, 24 insertions(+), 25 deletions(-)

diff --git a/packages/app/auth/hooks/useUser.ts b/packages/app/auth/hooks/useUser.ts
index 55e6b8498..9def9bc1a 100644
--- a/packages/app/auth/hooks/useUser.ts
+++ b/packages/app/auth/hooks/useUser.ts
@@ -11,7 +11,11 @@ export const useUserQuery = () => {
   const { token, isLoading: isTokenLoading } = useAuthUserToken();
   const isRequestEnabled = !!token && !isTokenLoading;
 
-  const { data, isLoading: isRequestLoading } = queryTrpc.getMe.useQuery(null, {
+  const {
+    refetch,
+    data,
+    isLoading: isRequestLoading,
+  } = queryTrpc.getMe.useQuery(null, {
     enabled: isRequestEnabled,
   });
 
@@ -20,11 +24,11 @@ export const useUserQuery = () => {
   // TODO fix loading state
   const isLoading = (isRequestEnabled && isRequestLoading) || isTokenLoading;
 
-  return { user: data, isLoading };
+  return { user: data, isLoading, refetch };
 };
 
 export const useAuthUser = () => {
-  const { user } = useUserQuery();
+  const { user, isLoading, refetch } = useUserQuery();
 
   return user;
 };
diff --git a/packages/app/hooks/user/useProfileSettings.ts b/packages/app/hooks/user/useProfileSettings.ts
index a0ae30776..e10f87cd3 100644
--- a/packages/app/hooks/user/useProfileSettings.ts
+++ b/packages/app/hooks/user/useProfileSettings.ts
@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { useUpdateUser } from './useUpdateUser';
-import { useAuthUser } from '../../auth/hooks';
+import { useAuthUser, useUserQuery } from '../../auth/hooks';
 import { useUpdateUserPassword } from './useUpdateUserPassword';
 
 const PROFILE_SETTINGS_DEFAULTS = {
@@ -13,7 +13,7 @@ const PROFILE_SETTINGS_DEFAULTS = {
 };
 
 export const useProfileSettings = () => {
-  const user = useAuthUser();
+  const { user, refetch } = useUserQuery();
   const updateUser = useUpdateUser();
   const updateUserPassword = useUpdateUserPassword();
   const [passwords, setPasswords] = useState<any>({
@@ -33,7 +33,7 @@ export const useProfileSettings = () => {
     updateUser({
       userId: id,
       ...data,
-    });
+    }).then(() => refetch());
   };
 
   const handleUpdatePassword = (data) => {
diff --git a/packages/app/hooks/user/useUpdateUser.ts b/packages/app/hooks/user/useUpdateUser.ts
index 31e324480..527abc6ed 100644
--- a/packages/app/hooks/user/useUpdateUser.ts
+++ b/packages/app/hooks/user/useUpdateUser.ts
@@ -5,17 +5,17 @@ export const useUpdateUser = () => {
   const { mutateAsync: mutateUserAsync } = queryTrpc.editUser.useMutation();
   const setUser = useUserSetter();
 
-  const updateUser = (user) => {
-    (async () => {
-      try {
-        const { userId, ...rest } = user;
-        const updatedUser = await mutateUserAsync({ id: userId, ...rest });
-        // @ts-ignore
-        setUser(updatedUser);
-      } catch {
-        console.error('Failed to update the user');
-      }
-    })();
+  const updateUser = async (user) => {
+    try {
+      const { userId, ...rest } = user;
+      const updatedUser = await mutateUserAsync({ id: userId, ...rest });
+      // @ts-ignore
+      setUser(updatedUser);
+      return updatedUser; // Return the updated user or a value to indicate success
+    } catch (error) {
+      console.error('Failed to update the user');
+      throw error;
+    }
   };
 
   return updateUser;
diff --git a/packages/app/screens/user/Settings.tsx b/packages/app/screens/user/Settings.tsx
index f9e39023a..3b5ceecf4 100644
--- a/packages/app/screens/user/Settings.tsx
+++ b/packages/app/screens/user/Settings.tsx
@@ -1,11 +1,9 @@
 import React from 'react';
-import { AntDesign, Ionicons } from '@expo/vector-icons';
+import { AntDesign } from '@expo/vector-icons';
 import {
-  RInput,
   RSeparator,
   RText,
   RStack,
-  RButton,
   RH5,
   RH2,
   RScrollView,
@@ -20,7 +18,6 @@ import {
 } from '@packrat/ui';
 import Avatar from 'app/components/Avatar/Avatar';
 import { useProfileSettings } from 'app/hooks/user';
-import { useRouter } from 'app/hooks/router';
 import useTheme from 'app/hooks/useTheme';
 import {
   userSettingsSchema,
@@ -42,12 +39,10 @@ const weightOptions = ['lb', 'oz', 'kg', 'g'].map((key) => ({
 }));
 
 export default function Settings() {
-  const { user, handleEditUser, handlePasswordsChange, handleUpdatePassword } =
-    useProfileSettings();
+  const { user, handleEditUser, handleUpdatePassword } = useProfileSettings();
   const { deleteProfile, isLoading } = useDeleteProfile();
 
-  const { isDark, currentTheme } = useTheme();
-  const router = useRouter();
+  const { isDark } = useTheme();
   const navigate = useNavigate();
 
   return user ? (

From c7e4099384fd6965087414ce542d9bfe939d7213 Mon Sep 17 00:00:00 2001
From: Anmol Verma <anmolverma2810@gmail.com>
Date: Tue, 2 Jul 2024 23:50:45 +0530
Subject: [PATCH 139/257] Adjust margin

---
 packages/app/components/paginationChooseLimit/index.tsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/packages/app/components/paginationChooseLimit/index.tsx b/packages/app/components/paginationChooseLimit/index.tsx
index 3f665d5e9..ce8f9b21a 100644
--- a/packages/app/components/paginationChooseLimit/index.tsx
+++ b/packages/app/components/paginationChooseLimit/index.tsx
@@ -2,7 +2,6 @@ import { View } from 'react-native';
 import React, { useState } from 'react';
 import { DropdownComponent, RLabel } from '@packrat/ui';
 import useCustomStyles from 'app/hooks/useCustomStyles';
-import useResponsive from 'app/hooks/useResponsive';
 
 interface PaginationLimitProps {
   limit: string | number;
@@ -33,13 +32,11 @@ export const PaginationLimit = ({ limit, setLimit }: PaginationLimitProps) => {
   );
 };
 const loadStyles = () => {
-  const { xxs } = useResponsive();
   return {
     selectContainer: {
-      marginTop: xxs ? 20 : 10,
       width: '15rem',
       marginLeft: 20,
-      marginBottom: xxs ? 70 : 10,
+      marginBottom: 70,
       alignSelf: 'left',
     },
   };

From 15d6c0b0982e4a81bf762099a852a153ebea1194 Mon Sep 17 00:00:00 2001
From: Anmol Verma <anmolverma2810@gmail.com>
Date: Wed, 3 Jul 2024 01:36:51 +0530
Subject: [PATCH 140/257] Add unit to table

---
 .../Bento/elements/tables/PaginatedSortedTable.tsx  | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/packages/ui/src/Bento/elements/tables/PaginatedSortedTable.tsx b/packages/ui/src/Bento/elements/tables/PaginatedSortedTable.tsx
index 0465d471f..894254825 100644
--- a/packages/ui/src/Bento/elements/tables/PaginatedSortedTable.tsx
+++ b/packages/ui/src/Bento/elements/tables/PaginatedSortedTable.tsx
@@ -77,7 +77,12 @@ export function PaginatedSortedTable({
     columnHelper.accessor('category.name', {
       header: () => 'Category',
       cell: (info) => info.getValue(),
-      footer: (info) => 'category',
+      footer: (info) => info.column.id,
+    }),
+    columnHelper.accessor('unit', {
+      header: () => 'Unit',
+      cell: (info) => info.getValue(),
+      footer: (info) => info.column.id,
     }),
   ];
 
@@ -124,8 +129,10 @@ export function PaginatedSortedTable({
                 return (
                   <View fd="row" justifyContent="space-between" key={cell.id}>
                     <Text>
-                      {cell.column.id.charAt(0).toUpperCase() +
-                        cell.column.id.slice(1)}
+                      {flexRender(
+                        cell.column.columnDef.header,
+                        cell.getContext(),
+                      )}
                     </Text>
                     <Text color="$gray10">{value}</Text>
                   </View>

From a41704f2750d72b7b4edc03dcbc38da197f55806 Mon Sep 17 00:00:00 2001
From: Andrew Bierman <94939237+andrew-bierman@users.noreply.github.com>
Date: Tue, 2 Jul 2024 23:15:12 -0400
Subject: [PATCH 141/257] =?UTF-8?q?=F0=9F=8F=B7=EF=B8=8F=20=F0=9F=90=9B=20?=
 =?UTF-8?q?fixing=20types?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/app/auth/AuthWrapper.tsx             |   4 +-
 .../{NativeMap.native.tsx => Map.native.tsx}  |  36 ++-
 .../map/{WebMap.web.tsx => Map.tsx}           |   0
 .../components/map/MapContainer.native.tsx    |   2 +-
 ...{MapContainer.web.tsx => MapContainer.tsx} |   2 +-
 packages/app/components/pack/AddPack.tsx      |   6 +-
 .../app/components/pack_table/TableItem.tsx   |   7 +-
 packages/app/components/progress/index.tsx    |   2 +-
 packages/app/hooks/useNetworkStatus.tsx       |   5 -
 packages/app/provider/ReduxProvider/index.tsx |  17 --
 packages/app/provider/dripsy.tsx              |  22 --
 packages/app/screens/items/index.tsx          |  28 ++-
 packages/app/screens/maps/index.tsx           |   7 +-
 packages/app/utils/storage/storage.ts         |  41 ++++
 packages/app/utils/storage/storage.web.ts     |   6 +-
 ...eRangePicker.web.ts => DateRangePicker.ts} |   0
 packages/ui/src/ZDropdown/index.tsx           |   6 +-
 server/src/controllers/getOsm/index.ts        |   2 +-
 .../src/controllers/passport/signUpLocal.ts   | 212 +++++++++---------
 server/src/tests/routes/trip.spec.ts          |   2 +-
 20 files changed, 221 insertions(+), 186 deletions(-)
 rename packages/app/components/map/{NativeMap.native.tsx => Map.native.tsx} (94%)
 rename packages/app/components/map/{WebMap.web.tsx => Map.tsx} (100%)
 rename packages/app/components/map/{MapContainer.web.tsx => MapContainer.tsx} (96%)
 delete mode 100644 packages/app/hooks/useNetworkStatus.tsx
 delete mode 100644 packages/app/provider/ReduxProvider/index.tsx
 delete mode 100644 packages/app/provider/dripsy.tsx
 create mode 100644 packages/app/utils/storage/storage.ts
 rename packages/ui/src/DateRangePicker/{DateRangePicker.web.ts => DateRangePicker.ts} (100%)

diff --git a/packages/app/auth/AuthWrapper.tsx b/packages/app/auth/AuthWrapper.tsx
index e2b08f4eb..dbad62011 100644
--- a/packages/app/auth/AuthWrapper.tsx
+++ b/packages/app/auth/AuthWrapper.tsx
@@ -7,12 +7,12 @@ import LandingPage from 'app/components/landing_page';
 
 interface AuthWrapperProps {
   children?: React.ReactNode;
-  unauthorizedElement: React.ReactNode;
+  unauthorizedElement?: React.ReactNode;
 }
 
 export const AuthWrapper = ({
   children,
-  unauthorizedElement,
+  unauthorizedElement = <Redirect to="/login" />,
 }: AuthWrapperProps) => {
   return (
     <AuthLoader
diff --git a/packages/app/components/map/NativeMap.native.tsx b/packages/app/components/map/Map.native.tsx
similarity index 94%
rename from packages/app/components/map/NativeMap.native.tsx
rename to packages/app/components/map/Map.native.tsx
index 9e26c0b3c..e57f953c2 100644
--- a/packages/app/components/map/NativeMap.native.tsx
+++ b/packages/app/components/map/Map.native.tsx
@@ -37,13 +37,36 @@ import * as DocumentPicker from 'expo-document-picker';
 import * as FileSystem from 'expo-file-system';
 import { DOMParser } from 'xmldom';
 
+interface GeoJsonProperties {
+  name?: string;
+}
+
+interface Geometry {
+  type: string;
+  coordinates: any;
+}
+
+interface Feature {
+  type: 'Feature';
+  properties?: GeoJsonProperties;
+  geometry: Geometry;
+}
+
+interface Shape {
+  features: Feature[];
+}
+
+interface NativeMapProps {
+  shape: Shape;
+}
+
 const RButton: any = OriginalRButton;
 const RInput: any = OriginalRInput;
 
 Mapbox.setWellKnownTileServer(Platform.OS === 'android' ? 'Mapbox' : 'mapbox');
 Mapbox.setAccessToken(MAPBOX_ACCESS_TOKEN);
 
-function NativeMap({ shape: shapeProp }) {
+const NativeMap: React.FC<NativeMapProps> = ({ shape: shapeProp }) => {
   const styles = useCustomStyles(loadStyles);
   const {
     camera,
@@ -81,7 +104,7 @@ function NativeMap({ shape: shapeProp }) {
         const parsedGpx = new DOMParser().parseFromString(gpxString);
         const geojson = toGeoJSON(parsedGpx);
         validateShape(geojson);
-        setShape(geojson);
+        setShape(geojson as Shape);
       }
     } catch (error) {
       Alert.alert('Error', error.message);
@@ -202,7 +225,7 @@ function NativeMap({ shape: shapeProp }) {
             <Mapbox.ShapeSource
               id="source1"
               lineMetrics={true}
-              shape={shape.features[0]}
+              shape={shape.features[0] as GeoJSON.Feature<GeoJSON.Geometry>}
               cluster
               clusterRadius={80}
               clusterMaxZoomLevel={14}
@@ -232,7 +255,10 @@ function NativeMap({ shape: shapeProp }) {
             )}
           </>
         ) : (
-          <Mapbox.ShapeSource id={'some-feature'} shape={shape.features[0]}>
+          <Mapbox.ShapeSource
+            id={'some-feature'}
+            shape={shape.features[0] as GeoJSON.Feature<GeoJSON.Geometry>}
+          >
             <Mapbox.LineLayer
               sourceID="some-feature"
               id="some-feature-line"
@@ -356,7 +382,7 @@ function NativeMap({ shape: shapeProp }) {
       )}
     </SafeAreaView>
   );
-}
+};
 
 const loadStyles = () => ({
   page: {
diff --git a/packages/app/components/map/WebMap.web.tsx b/packages/app/components/map/Map.tsx
similarity index 100%
rename from packages/app/components/map/WebMap.web.tsx
rename to packages/app/components/map/Map.tsx
diff --git a/packages/app/components/map/MapContainer.native.tsx b/packages/app/components/map/MapContainer.native.tsx
index cdc434642..a739fb64e 100644
--- a/packages/app/components/map/MapContainer.native.tsx
+++ b/packages/app/components/map/MapContainer.native.tsx
@@ -4,7 +4,7 @@ import { View, Platform } from 'react-native';
 import { isObjectEmpty } from '../../utils/isObjectEmpty';
 import { defaultShape } from '../../utils/mapFunctions';
 import useTheme from '../../hooks/useTheme';
-import NativeMap from './NativeMap';
+import NativeMap from './Map';
 import useCustomStyles from 'app/hooks/useCustomStyles';
 
 export function MapContainer({ shape }) {
diff --git a/packages/app/components/map/MapContainer.web.tsx b/packages/app/components/map/MapContainer.tsx
similarity index 96%
rename from packages/app/components/map/MapContainer.web.tsx
rename to packages/app/components/map/MapContainer.tsx
index 0e3efda8f..58f15f0dc 100644
--- a/packages/app/components/map/MapContainer.web.tsx
+++ b/packages/app/components/map/MapContainer.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 import { View, Platform } from 'react-native';
 
-import WebMap from './WebMap';
+import WebMap from './Map';
 import { isObjectEmpty } from '../../utils/isObjectEmpty';
 import { defaultShape } from '../../utils/mapFunctions';
 import useCustomStyles from 'app/hooks/useCustomStyles';
diff --git a/packages/app/components/pack/AddPack.tsx b/packages/app/components/pack/AddPack.tsx
index b7ffba622..6b520dbe3 100644
--- a/packages/app/components/pack/AddPack.tsx
+++ b/packages/app/components/pack/AddPack.tsx
@@ -21,10 +21,10 @@ const FormSelect: any = OriginalFormSelect;
 
 export const AddPack = ({
   isCreatingTrip = false,
-  onSuccess,
+  onSuccess = () => {},
 }: {
-  isCreatingTrip: boolean;
-  onSuccess: any;
+  isCreatingTrip?: boolean;
+  onSuccess?: any;
 }) => {
   // Hooks
   const { enableDarkMode, enableLightMode, isDark, isLight, currentTheme } =
diff --git a/packages/app/components/pack_table/TableItem.tsx b/packages/app/components/pack_table/TableItem.tsx
index 3830fa85c..53a16949b 100644
--- a/packages/app/components/pack_table/TableItem.tsx
+++ b/packages/app/components/pack_table/TableItem.tsx
@@ -11,7 +11,6 @@ import loadStyles from './packtable.style';
 import { RText, ZDropdown } from '@packrat/ui';
 import { useAuthUser } from 'app/auth/hooks';
 
-
 type ModalName = 'edit' | 'delete';
 
 interface TableItemProps {
@@ -70,7 +69,7 @@ const TableItem = ({
 
   let rowData = [
     <RText px={8}>{name}</RText>,
-    <RText px={0}>{${formatNumber(weight)} ${unit}}</RText>,
+    <RText px={0}>{`${formatNumber(weight)} ${unit}`}</RText>,
     <RText px={0}>{quantity}</RText>,
   ];
   if (hasPermissions) {
@@ -84,7 +83,7 @@ const TableItem = ({
       rowData.push(<ZDropdown.Web dropdownItems={rowActionItems} />);
     }
   }
-  
+
   /*
   * this id is passed as pack id but it is a item id which is confusing
   Todo need to change the name for this passing argument and remaining functions which are getting it
@@ -111,4 +110,4 @@ const TableItem = ({
   );
 };
 
-export default TableItem;
\ No newline at end of file
+export default TableItem;
diff --git a/packages/app/components/progress/index.tsx b/packages/app/components/progress/index.tsx
index f373deaf4..e4990eb08 100644
--- a/packages/app/components/progress/index.tsx
+++ b/packages/app/components/progress/index.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { Progress } from 'native-base';
 import useTheme from 'app/hooks/useTheme';
-import { useProgressStore } from 'app/global-state/progressStore';
+import { useProgressStore } from 'app/atoms/progressStore';
 
 const ProgressBarComponent = () => {
   const { currentTheme } = useTheme();
diff --git a/packages/app/hooks/useNetworkStatus.tsx b/packages/app/hooks/useNetworkStatus.tsx
deleted file mode 100644
index 1356ba70e..000000000
--- a/packages/app/hooks/useNetworkStatus.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { useContext } from 'react';
-
-export function useNetworkStatusProvider() {
-  return useContext(NetworkStatusContext);
-}
diff --git a/packages/app/provider/ReduxProvider/index.tsx b/packages/app/provider/ReduxProvider/index.tsx
deleted file mode 100644
index 7a15c1069..000000000
--- a/packages/app/provider/ReduxProvider/index.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-'use client';
-import React from 'react';
-import { Provider as ReduxStoreProvider } from 'react-redux';
-import { PersistGate } from 'redux-persist/integration/react';
-import { store, persistor } from '../../store/store';
-
-export default function ReduxProvider({ children }) {
-  return (
-    <ReduxStoreProvider store={store}>
-      <PersistGate loading={null} persistor={persistor}>
-        {children}
-      </PersistGate>
-    </ReduxStoreProvider>
-  );
-}
-
-// TODO: add back once next js is working properly
diff --git a/packages/app/provider/dripsy.tsx b/packages/app/provider/dripsy.tsx
deleted file mode 100644
index 467368556..000000000
--- a/packages/app/provider/dripsy.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { DripsyProvider, makeTheme } from 'dripsy';
-
-const theme = makeTheme({
-  // https://www.dripsy.xyz/usage/theming/create
-  text: {
-    p: {
-      fontSize: 16,
-    },
-  },
-});
-
-export function Dripsy({ children }: { children: React.ReactNode }) {
-  return (
-    <DripsyProvider
-      theme={theme}
-      // this disables SSR, since react-native-web doesn't have support for it (yet)
-      ssr
-    >
-      {children}
-    </DripsyProvider>
-  );
-}
diff --git a/packages/app/screens/items/index.tsx b/packages/app/screens/items/index.tsx
index 7651bb930..6e8bcabd8 100644
--- a/packages/app/screens/items/index.tsx
+++ b/packages/app/screens/items/index.tsx
@@ -7,10 +7,17 @@ import { ItemsTable } from 'app/components/itemtable/itemTable';
 import useCustomStyles from 'app/hooks/useCustomStyles';
 import { useItems } from 'app/hooks/items/useItems';
 import { usePagination } from 'app/hooks/common';
-import { BaseModal, DropdownComponent, RScrollView, RStack, RText } from '@packrat/ui';
+import {
+  BaseModal,
+  DropdownComponent,
+  RScrollView,
+  RStack,
+  RText,
+} from '@packrat/ui';
 
 export default function Items() {
-  const { enableDarkMode, enableLightMode, isDark, isLight, currentTheme } = useTheme();
+  const { enableDarkMode, enableLightMode, isDark, isLight, currentTheme } =
+    useTheme();
   const { limit, handleLimitChange, page, handlePageChange } = usePagination();
   const { data, isFetching, isError } = useItems({ limit, page });
   const styles = useCustomStyles(loadStyles);
@@ -18,9 +25,9 @@ export default function Items() {
 
   // for zeego = {false} options will be:
   // const optionValues = ['Food', 'Water', 'Essentials'];
-  
+
   // for zeego ={true} options will be:
-  const optionValues=[
+  const optionValues = [
     { label: 'Food', value: 'Food' },
     { label: 'Water', value: 'Water' },
     { label: 'Essentials', value: 'Essentials' },
@@ -43,7 +50,9 @@ export default function Items() {
     return [...selectedCategoryItems, ...otherItems];
   };
 
-  const [sortedItems, setSortedItems] = useState(sortItemsByCategory(data?.items, value));
+  const [sortedItems, setSortedItems] = useState(
+    sortItemsByCategory(data?.items, value),
+  );
 
   const handleSort = (category) => {
     setValue(category);
@@ -73,10 +82,7 @@ export default function Items() {
             />
           </RStack>
           <View style={{ marginBottom: 10 }}>
-            <BaseModal
-              title="Add a global Item"
-              trigger="Add Item"
-            >
+            <BaseModal title="Add a global Item" trigger="Add Item">
               <AddItemGlobal />
             </BaseModal>
           </View>
@@ -123,8 +129,8 @@ const loadStyles = (theme) => {
       borderRadius: 10,
     },
     sortContainer: {
-      width:150,
-      justifyContent:'space-between',
+      width: 150,
+      justifyContent: 'space-between',
       flexDirection: 'row',
       alignItems: 'center',
     },
diff --git a/packages/app/screens/maps/index.tsx b/packages/app/screens/maps/index.tsx
index 30c42ae15..f502e6853 100644
--- a/packages/app/screens/maps/index.tsx
+++ b/packages/app/screens/maps/index.tsx
@@ -1,5 +1,8 @@
 import { Modal, Text, View, Image, Dimensions } from 'react-native';
-import Mapbox, { offlineManager } from '@rnmapbox/maps';
+import Mapbox, {
+  offlineManager,
+  OfflineCreatePackOptions,
+} from '@rnmapbox/maps';
 import { useEffect, useState } from 'react';
 import { TouchableOpacity } from 'react-native-gesture-handler';
 import MapButtonsOverlay from 'app/components/map/MapButtonsOverlay';
@@ -39,7 +42,7 @@ export default function DownloadedMaps() {
     useTheme();
   const [offlinePacks, setOfflinePacks] = useState(null);
   const [showMap, setShowMap] = useState(false);
-  const [pack, setPack] = useState(null);
+  const [pack, setPack] = useState<OfflineCreatePackOptions | null>(null);
 
   let shape, zoomLevel;
   if (pack != null) {
diff --git a/packages/app/utils/storage/storage.ts b/packages/app/utils/storage/storage.ts
new file mode 100644
index 000000000..8c841cfea
--- /dev/null
+++ b/packages/app/utils/storage/storage.ts
@@ -0,0 +1,41 @@
+import EventEmitter from 'events';
+
+class StorageEventEmitter extends EventEmitter {}
+export const storageEvents = new StorageEventEmitter();
+
+export const Storage = {
+  getItem: async (key) => {
+    try {
+      const item = window.localStorage.getItem(key);
+      if (item === null) {
+        return null; // Handle case where item is null
+      }
+      return JSON.parse(item);
+    } catch {
+      console.error('Failed to load data from storage');
+    }
+    return null;
+  },
+  setItem: async (key, value) => {
+    try {
+      window.localStorage.setItem(key, JSON.stringify(value));
+      storageEvents.emit('change', { key, value });
+
+      return true;
+    } catch {
+      console.error('Failed to change data from storage');
+    }
+    return false;
+  },
+  removeItem: async (key) => {
+    try {
+      window.localStorage.removeItem(key);
+      storageEvents.emit('remove', { key });
+
+      return true;
+    } catch {
+      console.error('Failed to remove data from storage');
+    }
+    return false;
+  },
+};
diff --git a/packages/app/utils/storage/storage.web.ts b/packages/app/utils/storage/storage.web.ts
index af19974c0..8c841cfea 100644
--- a/packages/app/utils/storage/storage.web.ts
+++ b/packages/app/utils/storage/storage.web.ts
@@ -6,7 +6,11 @@ export const storageEvents = new StorageEventEmitter();
 export const Storage = {
   getItem: async (key) => {
     try {
-      return JSON.parse(window.localStorage.getItem(key));
+      const item = window.localStorage.getItem(key);
+      if (item === null) {
+        return null; // Handle case where item is null
+      }
+      return JSON.parse(item);
     } catch {
       console.error('Failed to load data from storage');
     }
diff --git a/packages/ui/src/DateRangePicker/DateRangePicker.web.ts b/packages/ui/src/DateRangePicker/DateRangePicker.ts
similarity index 100%
rename from packages/ui/src/DateRangePicker/DateRangePicker.web.ts
rename to packages/ui/src/DateRangePicker/DateRangePicker.ts
diff --git a/packages/ui/src/ZDropdown/index.tsx b/packages/ui/src/ZDropdown/index.tsx
index 8e37f804d..232a0ee13 100644
--- a/packages/ui/src/ZDropdown/index.tsx
+++ b/packages/ui/src/ZDropdown/index.tsx
@@ -17,11 +17,11 @@ const DropdownMenu = {
           padding: 10,
           borderRadius: 8,
           gap: 10,
-          boxShadow: '0px 0px 16px -8px #484848',
+          // boxShadow: '0px 0px 16px -8px #484848',
         }}
       />
     ),
-    'Content'
+    'Content',
   ),
   Item: ZeegoDropdownMenu.create(
     (props: ItemProps) => (
@@ -38,7 +38,7 @@ const DropdownMenu = {
         }}
       />
     ),
-    'Item'
+    'Item',
   ),
 };
 
diff --git a/server/src/controllers/getOsm/index.ts b/server/src/controllers/getOsm/index.ts
index 6c5d79449..2130c35b8 100644
--- a/server/src/controllers/getOsm/index.ts
+++ b/server/src/controllers/getOsm/index.ts
@@ -4,7 +4,7 @@ export * from './postSingleGeoJSON';
 export * from './postCollectionGeoJSON';
 export * from './updateDatabaseWithGeoJSONDataFromOverpass';
 export * from './getPhotonResults';
-export * from './getEnhancedPhotonDetails';
+// export * from './getEnhancedPhotonDetails';
 export * from './getParksOSM';
 export * from './getPhotonDetails';
 export * from './getNominatimDetails';
diff --git a/server/src/controllers/passport/signUpLocal.ts b/server/src/controllers/passport/signUpLocal.ts
index b5802176b..61598a389 100644
--- a/server/src/controllers/passport/signUpLocal.ts
+++ b/server/src/controllers/passport/signUpLocal.ts
@@ -1,106 +1,106 @@
-import passport from 'passport';
-import { Strategy as LocalStrategy } from 'passport-local';
-
-import bcrypt from 'bcryptjs';
-
-import { prisma } from '../../prisma';
-
-// Passport Configuration
-// Local Strategy
-passport.use(
-  new LocalStrategy(
-    {
-      usernameField: 'email',
-      passwordField: 'password',
-    },
-    async (email, password, done) => {
-      try {
-        const user = await prisma.user.findUnique({ where: { email } });
-
-        if (!user) {
-          return done(null, false, { message: 'Incorrect email.' });
-        }
-
-        const validPassword = await bcrypt.compare(password, user.password);
-
-        if (!validPassword) {
-          return done(null, false, { message: 'Incorrect password.' });
-        }
-
-        return done(null, user);
-      } catch (err) {
-        return done(err);
-      }
-    },
-  ),
-);
-
-/**
- * Sign up a user locally.
- * @param {Object} req - The request object.
- * @param {Object} res - The response object.
- * @param {function} next - The next function.
- * @return {Promise} A promise that resolves to nothing.
- */
-export const signUpLocal = async (req, res, next) => {
-  const { email, password, name } = req.body;
-
-  try {
-    const existingUser = await prisma.user.findUnique({
-      where: { email },
-    });
-
-    if (existingUser) {
-      return res.status(400).json({ error: 'Email already in use' });
-    }
-
-    // Hash the password
-    const hashedPassword = await bcrypt.hash(password, 10);
-
-    // Create a new user
-    const newUser = await prisma.user.create({
-      data: {
-        email,
-        password: hashedPassword,
-        name,
-      },
-    });
-
-    // Authenticate the user
-    passport.authenticate('local', (err, user, info) => {
-      if (err) {
-        return next(err);
-      }
-
-      if (!user) {
-        return res.status(400).json({ error: info.message });
-      }
-
-      // Log the user in
-      req.logIn(user, (err) => {
-        if (err) {
-          return next(err);
-        }
-
-        return res
-          .status(201)
-          .json({ message: 'User created successfully', user: newUser });
-      });
-    })(req, res, next);
-  } catch (error) {
-    return res.status(400).json({ error: error.message });
-  }
-};
-
-passport.serializeUser((user, done) => {
-  done(null, user.id);
-});
-
-passport.deserializeUser(async (id, done) => {
-  try {
-    const user = await prisma.user.findUnique({ where: { id } });
-    done(null, user);
-  } catch (error) {
-    done(error, null);
-  }
-});
+// import passport from 'passport';
+// import { Strategy as LocalStrategy } from 'passport-local';
+
+// import bcrypt from 'bcryptjs';
+
+// import { prisma } from '../../prisma';
+
+// // Passport Configuration
+// // Local Strategy
+// passport.use(
+//   new LocalStrategy(
+//     {
+//       usernameField: 'email',
+//       passwordField: 'password',
+//     },
+//     async (email, password, done) => {
+//       try {
+//         const user = await prisma.user.findUnique({ where: { email } });
+
+//         if (!user) {
+//           return done(null, false, { message: 'Incorrect email.' });
+//         }
+
+//         const validPassword = await bcrypt.compare(password, user.password);
+
+//         if (!validPassword) {
+//           return done(null, false, { message: 'Incorrect password.' });
+//         }
+
+//         return done(null, user);
+//       } catch (err) {
+//         return done(err);
+//       }
+//     },
+//   ),
+// );
+
+// /**
+//  * Sign up a user locally.
+//  * @param {Object} req - The request object.
+//  * @param {Object} res - The response object.
+//  * @param {function} next - The next function.
+//  * @return {Promise} A promise that resolves to nothing.
+//  */
+// export const signUpLocal = async (req, res, next) => {
+//   const { email, password, name } = req.body;
+
+//   try {
+//     const existingUser = await prisma.user.findUnique({
+//       where: { email },
+//     });
+
+//     if (existingUser) {
+//       return res.status(400).json({ error: 'Email already in use' });
+//     }
+
+//     // Hash the password
+//     const hashedPassword = await bcrypt.hash(password, 10);
+
+//     // Create a new user
+//     const newUser = await prisma.user.create({
+//       data: {
+//         email,
+//         password: hashedPassword,
+//         name,
+//       },
+//     });
+
+//     // Authenticate the user
+//     passport.authenticate('local', (err, user, info) => {
+//       if (err) {
+//         return next(err);
+//       }
+
+//       if (!user) {
+//         return res.status(400).json({ error: info.message });
+//       }
+
+//       // Log the user in
+//       req.logIn(user, (err) => {
+//         if (err) {
+//           return next(err);
+//         }
+
+//         return res
+//           .status(201)
+//           .json({ message: 'User created successfully', user: newUser });
+//       });
+//     })(req, res, next);
+//   } catch (error) {
+//     return res.status(400).json({ error: error.message });
+//   }
+// };
+
+// passport.serializeUser((user, done) => {
+//   done(null, user.id);
+// });
+
+// passport.deserializeUser(async (id, done) => {
+//   try {
+//     const user = await prisma.user.findUnique({ where: { id } });
+//     done(null, user);
+//   } catch (error) {
+//     done(error, null);
+//   }
+// });
diff --git a/server/src/tests/routes/trip.spec.ts b/server/src/tests/routes/trip.spec.ts
index 062b0de01..0e14423b9 100644
--- a/server/src/tests/routes/trip.spec.ts
+++ b/server/src/tests/routes/trip.spec.ts
@@ -93,7 +93,7 @@ describe('Trip Routes', () => {
         pack_id: partialTrip.pack_id ?? '',
       };
 
-      const createdTrip = await caller.addTrip(input);
+      const createdTrip = await caller.addTrip(input as any);
       expect(createdTrip).toBeDefined();
     });
   });

From 4263d10bb7243dcf872948abb198629ffea1e944 Mon Sep 17 00:00:00 2001
From: Andrew Bierman <94939237+andrew-bierman@users.noreply.github.com>
Date: Tue, 2 Jul 2024 23:39:17 -0400
Subject: [PATCH 142/257] =?UTF-8?q?=F0=9F=8E=A8=20lint?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/app/components/ScoreContainer.tsx    |  15 ++-
 packages/app/components/card/CustomCard.tsx   |   2 +-
 .../card/PackCardHeader/PackCardHeader.tsx    |  53 +++++----
 packages/app/components/carousel/index.tsx    |   2 +-
 .../app/components/dashboard/HeroBanner.tsx   |   1 -
 .../dashboard/QuickActionButton.tsx           |   1 -
 .../dashboard/QuickActionSection.tsx          |   3 +-
 packages/app/components/dashboard/Section.tsx |   6 +-
 .../dashboard/feedpreview.style.tsx           |   2 +-
 packages/app/components/destination/index.tsx |   2 +-
 packages/app/components/details/index.tsx     |   2 +-
 .../app/components/feed/FeedSearchFilter.tsx  |  14 +--
 packages/app/components/item/ItemForm.tsx     |  47 ++++----
 packages/app/components/layout/Layout.tsx     |   5 +-
 packages/app/components/pack_table/Table.tsx  |   2 +-
 .../components/pack_table/packtable.style.tsx |   2 +-
 .../trip/TripCards/TripSearchCard.tsx         |   7 +-
 .../app/components/user/UserDataContainer.tsx |   4 +-
 .../app/components/user/UserDetailList.tsx    |  14 +--
 packages/app/constants/api.ts                 |   2 +-
 packages/app/hooks/packs/useAddNewPack.ts     |   1 -
 .../AppearanceMobileMenu.tsx                  |  84 +++++++-------
 .../NavigationList/NavigationList.tsx         |  50 +++++---
 .../kitchen-sink/elements/button/index.ts     |   2 +-
 .../kitchen-sink/elements/icon/index.ts       |   2 +-
 .../kitchen-sink/form/input/index.ts          |   2 +-
 packages/app/screens/trip/TripDetails.tsx     |   2 -
 .../screens/trip/TripDetailsComponents.tsx    |   4 +-
 packages/playwright/tests/About.spec.js       |   2 +-
 packages/playwright/tests/Search.spec.js      |   2 +-
 packages/playwright/tests/add-item.spec.js    |   2 +-
 packages/playwright/tests/add-items.spec.js   |   2 +-
 packages/playwright/tests/create-trip.spec.js |   7 +-
 packages/playwright/tests/example.spec.ts     |   4 +-
 packages/playwright/tests/pack-create.spec.js |   3 +-
 packages/playwright/tests/pack.spec.js        |   2 +-
 packages/playwright/tests/packs.spec.js       |   2 +-
 packages/playwright/tests/profile.spec.js     |   2 +-
 packages/playwright/tests/sign-in.spec.js     |   2 +-
 .../elements/datepickers/RangePicker.tsx      |  50 ++++----
 .../elements/datepickers/common/dateParts.tsx |   2 +-
 .../ui/src/Bento/elements/tables/Basic.tsx    |  25 ++--
 .../DateRangePicker.native.tsx                | 108 ++++++++++--------
 packages/ui/src/DateRangePicker/index.ts      |   2 +-
 packages/ui/src/ErrorBoundary/index.tsx       |  13 ++-
 packages/ui/src/RContextMenu/index.tsx        |   9 +-
 packages/ui/src/RSelect/index.tsx             |  26 ++++-
 packages/ui/src/form/lib/LmSelect.tsx         |   2 +-
 packages/ui/src/index.tsx                     |   2 +-
 server/package.json                           |   3 +-
 50 files changed, 323 insertions(+), 282 deletions(-)

diff --git a/packages/app/components/ScoreContainer.tsx b/packages/app/components/ScoreContainer.tsx
index 6a4b1f074..d03dee028 100644
--- a/packages/app/components/ScoreContainer.tsx
+++ b/packages/app/components/ScoreContainer.tsx
@@ -193,12 +193,15 @@ export const ScoreContainer: React.FC<ScoreContainerProps> = ({
   } = useScoreData(type, data);
 
   const handleScoreClick = useCalculateStore(id, type);
-  const media = useMedia()
+  const media = useMedia();
 
   return (
     <RStack style={styles.box}>
       <XStack
-        style={[styles.hStack, !media.gtXs && { flexDirection: 'column', gap: 32 }]}
+        style={[
+          styles.hStack,
+          !media.gtXs && { flexDirection: 'column', gap: 32 },
+        ]}
       >
         <YStack style={media.gtXs ? styles.vStack : styles.vStackXS}>
           <RText style={styles.scoreText}>
@@ -213,7 +216,13 @@ export const ScoreContainer: React.FC<ScoreContainerProps> = ({
           )}
         </YStack>
         {isAlreadyScored && (
-          <View style={{ flex: 1, flexDirection: media.gtXs? 'column':'row', gap: 8 }}>
+          <View
+            style={{
+              flex: 1,
+              flexDirection: media.gtXs ? 'column' : 'row',
+              gap: 8,
+            }}
+          >
             <ScoreProgressChart score={totalScore} />
             <GradingPieChart scores={scores} />
           </View>
diff --git a/packages/app/components/card/CustomCard.tsx b/packages/app/components/card/CustomCard.tsx
index 1bb060e87..7db2e16c6 100644
--- a/packages/app/components/card/CustomCard.tsx
+++ b/packages/app/components/card/CustomCard.tsx
@@ -49,7 +49,7 @@ export const CustomCard = ({
         isWeb && {
           borderRadius: 10,
           padding: isWeb ? '15 25' : 0,
-          width:'80%'
+          width: '80%',
         },
       ]}
     >
diff --git a/packages/app/components/card/PackCardHeader/PackCardHeader.tsx b/packages/app/components/card/PackCardHeader/PackCardHeader.tsx
index 99dc858cb..8e3400c8d 100644
--- a/packages/app/components/card/PackCardHeader/PackCardHeader.tsx
+++ b/packages/app/components/card/PackCardHeader/PackCardHeader.tsx
@@ -8,7 +8,6 @@ import {
   RIconButton,
   EditableText,
   DropdownComponent,
-  
 } from '@packrat/ui';
 import { useFetchSinglePack, useDeletePack } from 'app/hooks/packs';
 import { usePackTitleInput } from './usePackTitleInput';
@@ -77,32 +76,40 @@ export const PackCardHeader = ({ data, title }: PackCardHeaderProps) => {
             )}
 
             <EditableText
-              isLoading={isLoading} 
-              defaultValue={title} 
-              isFocused={isEditMode} 
-              onSave={handleSaveTitle} 
+              isLoading={isLoading}
+              defaultValue={title}
+              isFocused={isEditMode}
+              onSave={handleSaveTitle}
             />
           </RStack>
         }
         actionsComponent={
-          user?.id === data.owner_id &&
-          <View style={{ alignSelf: 'flex-end', flexDirection: 'row', width: '15%', justifyContent: 'flex-end' }}>
-            <DropdownComponent
-              value={null}
-              data={optionValues}
-              onValueChange={(value) => handleActionsOpenChange(value)}
-              placeholder={
-                <RIconButton
-                  backgroundColor="transparent"
-                  icon={<MaterialIcons name="more-horiz" size={18} />}
-                  style={{ padding: 0 }}
-                />
-              }
-              width="100%"
-              native={true}
-              zeego={true}
-            />
-          </View>
+          user?.id === data.owner_id && (
+            <View
+              style={{
+                alignSelf: 'flex-end',
+                flexDirection: 'row',
+                width: '15%',
+                justifyContent: 'flex-end',
+              }}
+            >
+              <DropdownComponent
+                value={null}
+                data={optionValues}
+                onValueChange={(value) => handleActionsOpenChange(value)}
+                placeholder={
+                  <RIconButton
+                    backgroundColor="transparent"
+                    icon={<MaterialIcons name="more-horiz" size={18} />}
+                    style={{ padding: 0 }}
+                  />
+                }
+                width="100%"
+                native={true}
+                zeego={true}
+              />
+            </View>
+          )
         }
       />
     </>
diff --git a/packages/app/components/carousel/index.tsx b/packages/app/components/carousel/index.tsx
index 94eab8c9e..ff2044de1 100644
--- a/packages/app/components/carousel/index.tsx
+++ b/packages/app/components/carousel/index.tsx
@@ -51,7 +51,7 @@ const Carousel: React.FC<CarouselProps> = ({
         justifyContent: 'center',
         alignItems: 'center',
         flexDirection: 'row',
-        flex: 1
+        flex: 1,
       }}
     >
       <ScrollButton
diff --git a/packages/app/components/dashboard/HeroBanner.tsx b/packages/app/components/dashboard/HeroBanner.tsx
index 5bed4f596..efdefa412 100644
--- a/packages/app/components/dashboard/HeroBanner.tsx
+++ b/packages/app/components/dashboard/HeroBanner.tsx
@@ -73,7 +73,6 @@ const HeroSection: React.FC<HeroSectionProps> = ({ onSelect }) => {
       ? `Let's find a new trail, ${firstNameOrUser}`
       : "Let's find a new trail";
 
-
   return (
     <View style={styles.banner}>
       <Hero
diff --git a/packages/app/components/dashboard/QuickActionButton.tsx b/packages/app/components/dashboard/QuickActionButton.tsx
index 92139fea1..daf3c9194 100644
--- a/packages/app/components/dashboard/QuickActionButton.tsx
+++ b/packages/app/components/dashboard/QuickActionButton.tsx
@@ -5,7 +5,6 @@ import React from 'react';
 import { theme } from '../../theme';
 import useCustomStyles from 'app/hooks/useCustomStyles';
 
-
 const RCard: any = OriginalRCard;
 
 interface QuickActionButtonProps {
diff --git a/packages/app/components/dashboard/QuickActionSection.tsx b/packages/app/components/dashboard/QuickActionSection.tsx
index 40bfe4a16..d3cee4b49 100644
--- a/packages/app/components/dashboard/QuickActionSection.tsx
+++ b/packages/app/components/dashboard/QuickActionSection.tsx
@@ -3,13 +3,12 @@ import QuickActionButton from './QuickActionButton';
 import useCustomStyles from 'app/hooks/useCustomStyles';
 import { useQuickActions } from 'app/hooks/dashboard';
 
-
 const QuickActionsSection = () => {
   const styles = useCustomStyles(loadStyles);
   const { handleActionSelect, quickActionData } = useQuickActions();
 
   return (
-    <RStack style={{ flexDirection: 'row', ...styles.section, }}>
+    <RStack style={{ flexDirection: 'row', ...styles.section }}>
       {quickActionData.map((action) => (
         <QuickActionButton
           key={action.action}
diff --git a/packages/app/components/dashboard/Section.tsx b/packages/app/components/dashboard/Section.tsx
index f87122946..228a4eaff 100644
--- a/packages/app/components/dashboard/Section.tsx
+++ b/packages/app/components/dashboard/Section.tsx
@@ -4,7 +4,6 @@ import React from 'react';
 import useCustomStyles from 'app/hooks/useCustomStyles';
 import { TouchableOpacity } from 'react-native';
 
-
 interface SectionProps {
   children: React.ReactNode;
   onPress?: (event: GestureResponderEvent) => void;
@@ -12,11 +11,11 @@ interface SectionProps {
 const Section: React.FC<SectionProps> = ({ children, onPress }) => {
   const styles = useCustomStyles(loadStyles);
   return (
-      <View style={styles.section} >
+    <View style={styles.section}>
       <RCard style={{ borderRadius: 8 }}>
         <RCard.Header style={styles.card}>{children}</RCard.Header>
       </RCard>
-      </View>
+    </View>
   );
 };
 
@@ -32,7 +31,6 @@ const loadStyles = (theme: any) => {
       width: '100%',
       borderRadius: 8,
       backgroundColor: currentTheme.colors.secondaryBlue,
-
     },
   };
 };
diff --git a/packages/app/components/dashboard/feedpreview.style.tsx b/packages/app/components/dashboard/feedpreview.style.tsx
index 7278adf92..404985156 100644
--- a/packages/app/components/dashboard/feedpreview.style.tsx
+++ b/packages/app/components/dashboard/feedpreview.style.tsx
@@ -8,7 +8,7 @@ const loadStyles = (theme: any, appTheme: any) => {
     },
     cardStyles: {
       height: 100,
-      width:'100%',
+      width: '100%',
       backgroundColor: appTheme.colors.primary,
       borderRadius: 5,
       padding: 20,
diff --git a/packages/app/components/destination/index.tsx b/packages/app/components/destination/index.tsx
index e3ca9f8ac..382146541 100644
--- a/packages/app/components/destination/index.tsx
+++ b/packages/app/components/destination/index.tsx
@@ -215,7 +215,7 @@ const loadStyles = (theme) => {
       paddingBottom: 12,
       paddingLeft: 16,
       width: '100%',
-      marginBottom:40,
+      marginBottom: 40,
       backgroundColor: currentTheme.colors.background,
     },
     headerContainer: {
diff --git a/packages/app/components/details/index.tsx b/packages/app/components/details/index.tsx
index a0523b606..bad865112 100644
--- a/packages/app/components/details/index.tsx
+++ b/packages/app/components/details/index.tsx
@@ -80,5 +80,5 @@ export const DetailsComponent = ({
     }
   };
 
-  return <RStack style={{width: '100%'}}>{renderDetails()}</RStack>;
+  return <RStack style={{ width: '100%' }}>{renderDetails()}</RStack>;
 };
diff --git a/packages/app/components/feed/FeedSearchFilter.tsx b/packages/app/components/feed/FeedSearchFilter.tsx
index b45b76632..cb254f131 100644
--- a/packages/app/components/feed/FeedSearchFilter.tsx
+++ b/packages/app/components/feed/FeedSearchFilter.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import useTheme from '../../hooks/useTheme';
 import useCustomStyles from 'app/hooks/useCustomStyles';
-import { Switch} from 'tamagui';
+import { Switch } from 'tamagui';
 import { View } from 'react-native';
 import {
   RIconButton,
@@ -66,11 +66,9 @@ const FeedSearchFilter = ({
       <View style={styles.filterContainer}>
         <View style={styles.searchContainer}>
           <Form>
-            <RStack
-              style={{ flexDirection: 'row',marginLeft:40, }}
-            >
+            <RStack style={{ flexDirection: 'row', marginLeft: 40 }}>
               <FormInput
-                width='100%'
+                width="100%"
                 placeholder={`Search ${feedType || 'Feed'}`}
                 name="search"
                 value={searchValue}
@@ -142,7 +140,7 @@ const FeedSearchFilter = ({
               style={{
                 flexDirection: 'row',
                 alignItems: 'center',
-                justifyContent:'space-between'
+                justifyContent: 'space-between',
               }}
             >
               <RText
@@ -158,7 +156,7 @@ const FeedSearchFilter = ({
                 onValueChange={handleSortChange}
                 placeholder={queryString}
                 style={styles.dropdown}
-                width='55%'
+                width="55%"
               />
             </RStack>
             {(feedType === 'userPacks' || feedType === 'userTrips') && (
@@ -194,7 +192,7 @@ const loadStyles = (theme: any) => {
       fontSize: 18,
       width: '100%',
       borderRadius: 10,
-      marginTop:  20,
+      marginTop: 20,
     },
     searchContainer: {
       flexDirection: 'row',
diff --git a/packages/app/components/item/ItemForm.tsx b/packages/app/components/item/ItemForm.tsx
index 83621ad9d..0fefd3e31 100644
--- a/packages/app/components/item/ItemForm.tsx
+++ b/packages/app/components/item/ItemForm.tsx
@@ -21,7 +21,6 @@ const FormRadioGroup: any = OriginalFormRadioGroup;
 
 const data = ['lb', 'oz', 'kg', 'g'].map((key) => ({ label: key, value: key }));
 
-
 interface ItemFormProps {
   handleSubmit: (data: Item) => void;
   showSubmitButton?: boolean;
@@ -59,18 +58,16 @@ export const ItemForm = ({
   }
   const { enableDarkMode, enableLightMode, isDark, isLight, currentTheme } =
     useTheme();
-    const [selectedUnit, setSelectedUnit] = useState('lb')
-
+  const [selectedUnit, setSelectedUnit] = useState('lb');
 
   const radioOptions = Object.values(ItemCategoryEnum)
     .filter((value) => !(hasWaterAdded && value === ItemCategoryEnum.WATER))
     .map((radioOption) => ({ label: radioOption, value: radioOption }));
 
-  const  handleUnitChange = (i) => {
-    console.log(i)
-    setSelectedUnit(i)
-  }
-
+  const handleUnitChange = (i) => {
+    console.log(i);
+    setSelectedUnit(i);
+  };
 
   return (
     <View>
@@ -96,25 +93,25 @@ export const ItemForm = ({
             <View>
               <FormInput name="weight" placeholder="Weight" isDecimal={true} />
             </View>
-            {data && (
-              Platform.OS === 'web' ? (
+            {data &&
+              (Platform.OS === 'web' ? (
                 <FormSelect
-                options={data}
-                name="unit"
-                placeholder={'Unit'}
-                width="100"
-              />
+                  options={data}
+                  name="unit"
+                  placeholder={'Unit'}
+                  width="100"
+                />
               ) : (
-             <DropdownComponent
-             value={selectedUnit}
-             data={data}
-             onValueChange={handleUnitChange}
-             placeholder={selectedUnit}
-             width="50%"
-             native={true}
-             zeego={true}
-           />)
-            )}
+                <DropdownComponent
+                  value={selectedUnit}
+                  data={data}
+                  onValueChange={handleUnitChange}
+                  placeholder={selectedUnit}
+                  width="50%"
+                  native={true}
+                  zeego={true}
+                />
+              ))}
           </View>
           <FormInput
             name="quantity"
diff --git a/packages/app/components/layout/Layout.tsx b/packages/app/components/layout/Layout.tsx
index 455c77f25..cc5c3401b 100644
--- a/packages/app/components/layout/Layout.tsx
+++ b/packages/app/components/layout/Layout.tsx
@@ -1,6 +1,5 @@
 import { View } from 'react-native';
 
-
 const Layout = ({ children }) => {
   return (
     <View
@@ -8,9 +7,9 @@ const Layout = ({ children }) => {
         display: 'flex',
         justifyContent: 'center',
         marginTop: 20,
-        alignItems:'center',
+        alignItems: 'center',
         backgroundColor: 'transparent',
-        width:'100%',
+        width: '100%',
       }}
     >
       {children}
diff --git a/packages/app/components/pack_table/Table.tsx b/packages/app/components/pack_table/Table.tsx
index f383874fb..e24bc6370 100644
--- a/packages/app/components/pack_table/Table.tsx
+++ b/packages/app/components/pack_table/Table.tsx
@@ -62,7 +62,7 @@ export const TableContainer = ({
   if (error) return <ErrorMessage message={String(error)} />;
 
   return (
-    <View style={[styles.container ]}>
+    <View style={[styles.container]}>
       {data?.length ? (
         <>
           <BasicTable
diff --git a/packages/app/components/pack_table/packtable.style.tsx b/packages/app/components/pack_table/packtable.style.tsx
index b33981dd6..2b33990e7 100644
--- a/packages/app/components/pack_table/packtable.style.tsx
+++ b/packages/app/components/pack_table/packtable.style.tsx
@@ -5,7 +5,7 @@ const loadStyles = (theme) => {
 
   return {
     container: {
-      flex: isWeb? 1: 0,
+      flex: isWeb ? 1 : 0,
       padding: 10,
       width: '100%',
     },
diff --git a/packages/app/components/trip/TripCards/TripSearchCard.tsx b/packages/app/components/trip/TripCards/TripSearchCard.tsx
index 424364b70..3ea1b0814 100644
--- a/packages/app/components/trip/TripCards/TripSearchCard.tsx
+++ b/packages/app/components/trip/TripCards/TripSearchCard.tsx
@@ -3,11 +3,10 @@ import { TripCardBase } from './TripCardBase';
 import { useGEOLocationSearch } from 'app/hooks/geojson';
 
 import { FontAwesome } from '@expo/vector-icons';
-import {  View } from 'react-native';
+import { View } from 'react-native';
 import { PlacesAutocomplete } from 'app/components/PlacesAutocomplete';
 import useResponsive from 'app/hooks/useResponsive';
 
-
 type TripSearchCardProps = {
   searchRef: any;
 };
@@ -19,7 +18,7 @@ export const TripSearchCard = ({ searchRef }: TripSearchCardProps) => {
   const handleSelectLocation = (geoJSON) => {
     setGEOLocation(geoJSON);
   };
-  const {xs} =  useResponsive();
+  const { xs } = useResponsive();
 
   return (
     <TripCardBase
@@ -41,7 +40,7 @@ export const TripSearchCard = ({ searchRef }: TripSearchCardProps) => {
 };
 
 const loadStyles = (theme) => {
-  const {xxs} =  useResponsive();
+  const { xxs } = useResponsive();
 
   const { currentTheme } = theme;
 
diff --git a/packages/app/components/user/UserDataContainer.tsx b/packages/app/components/user/UserDataContainer.tsx
index 91306d7cf..51055a879 100644
--- a/packages/app/components/user/UserDataContainer.tsx
+++ b/packages/app/components/user/UserDataContainer.tsx
@@ -96,7 +96,7 @@ export default function UserDataContainer({
       <LargeCard
         customStyle={{
           backgroundColor: hexToRGBA(currentTheme.colors.card, 0.2),
-          padding:10
+          padding: 10,
         }}
       >
         <RStack
@@ -139,7 +139,7 @@ export default function UserDataContainer({
                   horizontal={true}
                   nestedScrollEnabled={true}
                   contentContainerStyle={{
-                    padding:10
+                    padding: 10,
                     // paddingHorizontal: 1,
                     // paddingVertical: 3,
                     // justifyContent: 'center',
diff --git a/packages/app/components/user/UserDetailList.tsx b/packages/app/components/user/UserDetailList.tsx
index 584707cdd..ad802bacc 100644
--- a/packages/app/components/user/UserDetailList.tsx
+++ b/packages/app/components/user/UserDetailList.tsx
@@ -59,12 +59,11 @@ const DataList = ({ data }: DataListProps) => {
               isSortHidden={true}
               queryString={searchQuery}
               setSearchQuery={setSearchQuery}
-
             />
             <FlatList
               data={filteredData.slice(0, 2)}
               horizontal={false}
-              keyExtractor={(item) =>  item?.id}
+              keyExtractor={(item) => item?.id}
               renderItem={({ item }) => (
                 <Card key={item?._id} type={item?.type} {...item} />
               )}
@@ -74,7 +73,7 @@ const DataList = ({ data }: DataListProps) => {
           </View>
         </BaseModal>
       ) : (
-        <View style={{ width:'30%' ,alignSelf:'center'}}>
+        <View style={{ width: '30%', alignSelf: 'center' }}>
           <BaseDialog
             title="See all"
             trigger="See all"
@@ -88,14 +87,15 @@ const DataList = ({ data }: DataListProps) => {
             footerComponent={undefined}
           >
             <SearchFilter
-             isSortHidden={true}
-             queryString={searchQuery}
-             setSearchQuery={setSearchQuery}/>
+              isSortHidden={true}
+              queryString={searchQuery}
+              setSearchQuery={setSearchQuery}
+            />
 
             <FlatList
               data={filteredData}
               horizontal={false}
-              keyExtractor={(item) => item?._id }
+              keyExtractor={(item) => item?._id}
               renderItem={({ item }) => (
                 <Card key={item?._id} type={item?.type} {...item} />
               )}
diff --git a/packages/app/constants/api.ts b/packages/app/constants/api.ts
index 6009103f5..e7cc9ced6 100644
--- a/packages/app/constants/api.ts
+++ b/packages/app/constants/api.ts
@@ -6,4 +6,4 @@ import { API_URL } from '@packrat/config';
  * format: "{scheme}://{serverhost}:{port}/api"
  * e.g: "http://localhost:4200/api"
  */
-export const api = API_URL;
\ No newline at end of file
+export const api = API_URL;
diff --git a/packages/app/hooks/packs/useAddNewPack.ts b/packages/app/hooks/packs/useAddNewPack.ts
index 1d27298ba..76cfba559 100644
--- a/packages/app/hooks/packs/useAddNewPack.ts
+++ b/packages/app/hooks/packs/useAddNewPack.ts
@@ -13,7 +13,6 @@ export const useAddNewPack = () => {
     { value: 'No', label: 'No' },
   ];
 
-
   const isPublicOption = packSelectOptions[0];
   if (!isPublicOption) {
     throw new Error('No select options available.');
diff --git a/packages/app/screens/appearance/components/AppearanceMobileMenu/AppearanceMobileMenu.tsx b/packages/app/screens/appearance/components/AppearanceMobileMenu/AppearanceMobileMenu.tsx
index 3674d9e31..f34e8ae15 100644
--- a/packages/app/screens/appearance/components/AppearanceMobileMenu/AppearanceMobileMenu.tsx
+++ b/packages/app/screens/appearance/components/AppearanceMobileMenu/AppearanceMobileMenu.tsx
@@ -1,13 +1,6 @@
 import React, { cloneElement } from 'react';
-import {
-  ChevronDown,
-} from '@tamagui/lucide-icons';
-import {
-  Adapt,
-  Button,
-  Popover,
-  Text,
-} from 'tamagui';
+import { ChevronDown } from '@tamagui/lucide-icons';
+import { Adapt, Button, Popover, Text } from 'tamagui';
 
 export function AppearanceMobileMenu({
   navigationList,
@@ -18,43 +11,46 @@ export function AppearanceMobileMenu({
   return (
     <>
       <Button onPress={() => setIsOpen(true)} icon={ChevronDown}>
-          <Text>Components</Text>
-        </Button>
-    <Popover size="$5" allowFlip onOpenChange={setIsOpen} open={isOpen}>
+        <Text>Components</Text>
+      </Button>
+      <Popover size="$5" allowFlip onOpenChange={setIsOpen} open={isOpen}>
+        <Adapt when="sm" platform="touch">
+          <Popover.Sheet modal dismissOnSnapToBottom>
+            <Popover.Sheet.Frame padding="$4">
+              <Adapt.Contents />
+            </Popover.Sheet.Frame>
+            <Popover.Sheet.Overlay
+              animation="lazy"
+              enterStyle={{ opacity: 0 }}
+              exitStyle={{ opacity: 0 }}
+            />
+          </Popover.Sheet>
+        </Adapt>
 
-      <Adapt when="sm" platform="touch">
-        <Popover.Sheet modal dismissOnSnapToBottom>
-          <Popover.Sheet.Frame padding="$4">
-            <Adapt.Contents />
-          </Popover.Sheet.Frame>
-          <Popover.Sheet.Overlay
-            animation="lazy"
-            enterStyle={{ opacity: 0 }}
-            exitStyle={{ opacity: 0 }}
-          />
-        </Popover.Sheet>
-      </Adapt>
-
-      <Popover.Content
-        borderWidth={1}
-        borderColor="$borderColor"
-        enterStyle={{ y: -10, opacity: 0 }}
-        exitStyle={{ y: -10, opacity: 0 }}
-        elevate
-        style={{ padding: 0, width: 250 }}
-        animation={[
-          'quick',
-          {
-            opacity: {
-              overshootClamping: true,
+        <Popover.Content
+          borderWidth={1}
+          borderColor="$borderColor"
+          enterStyle={{ y: -10, opacity: 0 }}
+          exitStyle={{ y: -10, opacity: 0 }}
+          elevate
+          style={{ padding: 0, width: 250 }}
+          animation={[
+            'quick',
+            {
+              opacity: {
+                overshootClamping: true,
+              },
+            },
+          ]}
+        >
+          <Popover.Arrow borderWidth={1} borderColor="$borderColor" />
+          {cloneElement(navigationList, {
+            onPressItem: () => {
+              setIsOpen(false);
             },
-          },
-        ]}
-      >
-        <Popover.Arrow borderWidth={1} borderColor="$borderColor" />
-        {cloneElement(navigationList, {onPressItem: () => {setIsOpen(false)}})}
-      </Popover.Content>
-    </Popover>
+          })}
+        </Popover.Content>
+      </Popover>
     </>
   );
 }
diff --git a/packages/app/screens/appearance/components/NavigationList/NavigationList.tsx b/packages/app/screens/appearance/components/NavigationList/NavigationList.tsx
index c2f82dbcb..b1bf3e02a 100644
--- a/packages/app/screens/appearance/components/NavigationList/NavigationList.tsx
+++ b/packages/app/screens/appearance/components/NavigationList/NavigationList.tsx
@@ -1,7 +1,14 @@
 import React from 'react';
 import { ChevronDown } from '@tamagui/lucide-icons';
 
-import { Accordion, YGroup, ListItem, Square, Separator, Paragraph } from 'tamagui';
+import {
+  Accordion,
+  YGroup,
+  ListItem,
+  Square,
+  Separator,
+  Paragraph,
+} from 'tamagui';
 import { KitchenSinkRoutes } from 'app/screens/appearance/kitchen-sink';
 import { Pressable } from 'react-native';
 export function NavigationList({
@@ -12,33 +19,38 @@ export function NavigationList({
   onPressItem: (route: string) => void;
 }) {
   return (
-    <Accordion style={{ width: '100%', overflowY: 'auto' }} type='multiple'>
+    <Accordion style={{ width: '100%', overflowY: 'auto' }} type="multiple">
       {Object.entries(KitchenSinkRoutes).map(([key, value]) => {
         return (
           <Accordion.Item key={key} value={key}>
-            <Accordion.Trigger flexDirection="row" justifyContent="space-between">
-          {({
-            open,
-          }: {
-            open: boolean
-          }) => (
-            <>
-              <Paragraph>{key}</Paragraph>
-              <Square animation="quick" rotate={open ? '180deg' : '0deg'}>
-                <ChevronDown size="$1" />
-              </Square>
-            </>
-          )}
-        </Accordion.Trigger>
+            <Accordion.Trigger
+              flexDirection="row"
+              justifyContent="space-between"
+            >
+              {({ open }: { open: boolean }) => (
+                <>
+                  <Paragraph>{key}</Paragraph>
+                  <Square animation="quick" rotate={open ? '180deg' : '0deg'}>
+                    <ChevronDown size="$1" />
+                  </Square>
+                </>
+              )}
+            </Accordion.Trigger>
             <Accordion.Content>
-              <YGroup alignSelf="center" bordered width="100%" size="$4" overflow='auto'>
+              <YGroup
+                alignSelf="center"
+                bordered
+                width="100%"
+                size="$4"
+                overflow="auto"
+              >
                 {value.map(({ route }) => {
                   return (
                     <>
                       <Pressable
                         onPress={() => {
-                          onPressItem?.(route)
-                          onRouteChange(route)
+                          onPressItem?.(route);
+                          onRouteChange(route);
                         }}
                         key={route}
                       >
diff --git a/packages/app/screens/appearance/kitchen-sink/elements/button/index.ts b/packages/app/screens/appearance/kitchen-sink/elements/button/index.ts
index bae8e192f..0a188c941 100644
--- a/packages/app/screens/appearance/kitchen-sink/elements/button/index.ts
+++ b/packages/app/screens/appearance/kitchen-sink/elements/button/index.ts
@@ -1,4 +1,4 @@
-import Button from './Button'
+import Button from './Button';
 export const ButtonRoute = {
   component: Button,
   route: 'button',
diff --git a/packages/app/screens/appearance/kitchen-sink/elements/icon/index.ts b/packages/app/screens/appearance/kitchen-sink/elements/icon/index.ts
index 4c295d2e2..8a56ee1d5 100644
--- a/packages/app/screens/appearance/kitchen-sink/elements/icon/index.ts
+++ b/packages/app/screens/appearance/kitchen-sink/elements/icon/index.ts
@@ -1,4 +1,4 @@
-import Icon from './Icon'
+import Icon from './Icon';
 export const IconRoute = {
   component: Icon,
   route: 'icon',
diff --git a/packages/app/screens/appearance/kitchen-sink/form/input/index.ts b/packages/app/screens/appearance/kitchen-sink/form/input/index.ts
index bb05ed040..d030108f2 100644
--- a/packages/app/screens/appearance/kitchen-sink/form/input/index.ts
+++ b/packages/app/screens/appearance/kitchen-sink/form/input/index.ts
@@ -1,4 +1,4 @@
-import Input from './Input'
+import Input from './Input';
 export const InputRoute = {
   component: Input,
   route: 'input',
diff --git a/packages/app/screens/trip/TripDetails.tsx b/packages/app/screens/trip/TripDetails.tsx
index f55684b3a..b0469d720 100644
--- a/packages/app/screens/trip/TripDetails.tsx
+++ b/packages/app/screens/trip/TripDetails.tsx
@@ -129,7 +129,6 @@ export function TripDetails() {
                               <RStack>
                                 <Text style={styles.descriptionText}>
                                   Start Date:{data.start_date}
-                                  
                                 </Text>
                               </RStack>
                             )}
@@ -137,7 +136,6 @@ export function TripDetails() {
                               <RStack>
                                 <Text style={styles.descriptionText}>
                                   End Date:{data.end_date}
-                                  
                                 </Text>
                               </RStack>
                             )}
diff --git a/packages/app/screens/trip/TripDetailsComponents.tsx b/packages/app/screens/trip/TripDetailsComponents.tsx
index 36628cf68..98283a404 100644
--- a/packages/app/screens/trip/TripDetailsComponents.tsx
+++ b/packages/app/screens/trip/TripDetailsComponents.tsx
@@ -35,7 +35,7 @@ const WeatherCardComponent = ({ weatherObject, weatherWeek, data }) => (
 );
 
 const TripCardComponent = ({ data, weatherObject, currentTheme }) =>
-  data?.geojson?.features?.length && (
+  (data?.geojson?.features?.length && (
     // data?.geojson && (
     <TripMapCard
       shape={data.geojson}
@@ -43,7 +43,7 @@ const TripCardComponent = ({ data, weatherObject, currentTheme }) =>
       //   data?.weather ? JSON?.parse(data?.weather)?.coord : weatherObject?.coord
       // }
     />
-  ) || <RText></RText>;
+  )) || <RText></RText>;
 
 const ScoreContainerComponent = ({ data, isOwner }) => (
   <View style={{ marginTop: '5%' }}>
diff --git a/packages/playwright/tests/About.spec.js b/packages/playwright/tests/About.spec.js
index 6cfb8e251..76159d83e 100644
--- a/packages/playwright/tests/About.spec.js
+++ b/packages/playwright/tests/About.spec.js
@@ -12,4 +12,4 @@ test('test', async ({ page }) => {
   await page.getByRole('button', { name: ' About' }).click();
   await page.goto('https://github.com/andrew-bierman/PackRat');
   await page.getByText('main254 Branches 0 Tags Go to').click();
-});
\ No newline at end of file
+});
diff --git a/packages/playwright/tests/Search.spec.js b/packages/playwright/tests/Search.spec.js
index 0164233da..cbed28165 100644
--- a/packages/playwright/tests/Search.spec.js
+++ b/packages/playwright/tests/Search.spec.js
@@ -13,4 +13,4 @@ test('test', async ({ page }) => {
   await page.getByText('city', { exact: true }).click();
   await page.getByText('').click();
   await page.getByText('').click();
-});
\ No newline at end of file
+});
diff --git a/packages/playwright/tests/add-item.spec.js b/packages/playwright/tests/add-item.spec.js
index 2491f6dbf..a9945c36b 100644
--- a/packages/playwright/tests/add-item.spec.js
+++ b/packages/playwright/tests/add-item.spec.js
@@ -10,4 +10,4 @@ test('test', async ({ page }) => {
   await page.getByPlaceholder('Quantity').fill('3');
   await page.getByLabel('Add Item').getByText('Essentials').click();
   await page.getByRole('button', { name: 'Add Item' }).click();
-});
\ No newline at end of file
+});
diff --git a/packages/playwright/tests/add-items.spec.js b/packages/playwright/tests/add-items.spec.js
index a6d0e2307..f16cd647d 100644
--- a/packages/playwright/tests/add-items.spec.js
+++ b/packages/playwright/tests/add-items.spec.js
@@ -19,4 +19,4 @@ test('test', async ({ page }) => {
   await page.getByPlaceholder('Quantity').click();
   await page.getByLabel('Add Item').getByText('Essentials').click();
   await page.getByRole('button', { name: 'Add Item' }).click();
-});
\ No newline at end of file
+});
diff --git a/packages/playwright/tests/create-trip.spec.js b/packages/playwright/tests/create-trip.spec.js
index 9ec9e15da..453bb3beb 100644
--- a/packages/playwright/tests/create-trip.spec.js
+++ b/packages/playwright/tests/create-trip.spec.js
@@ -15,6 +15,7 @@ test('test', async ({ page }) => {
   await page.getByPlaceholder('Start date - End date').click();
   await page.getByRole('button', { name: '17' }).nth(1).click();
   await page.getByRole('button', { name: '20' }).nth(1).click();
-  await page.goto('https://packrat.pages.dev/trip/create?id=lxupicy18yl1woljm4ll24l4');
-
-});
\ No newline at end of file
+  await page.goto(
+    'https://packrat.pages.dev/trip/create?id=lxupicy18yl1woljm4ll24l4',
+  );
+});
diff --git a/packages/playwright/tests/example.spec.ts b/packages/playwright/tests/example.spec.ts
index 54a906a4e..f71a67594 100644
--- a/packages/playwright/tests/example.spec.ts
+++ b/packages/playwright/tests/example.spec.ts
@@ -14,5 +14,7 @@ test('get started link', async ({ page }) => {
   await page.getByRole('link', { name: 'Get started' }).click();
 
   // Expects page to have a heading with the name of Installation.
-  await expect(page.getByRole('heading', { name: 'Installation' })).toBeVisible();
+  await expect(
+    page.getByRole('heading', { name: 'Installation' }),
+  ).toBeVisible();
 });
diff --git a/packages/playwright/tests/pack-create.spec.js b/packages/playwright/tests/pack-create.spec.js
index a81b17cc0..d5e5daf30 100644
--- a/packages/playwright/tests/pack-create.spec.js
+++ b/packages/playwright/tests/pack-create.spec.js
@@ -16,5 +16,4 @@ test('test', async ({ page }) => {
   await page.getByLabel('Is Public').click();
   await page.getByLabel('Yes').click();
   await page.getByRole('button', { name: 'Add Pack' }).click();
- 
-});
\ No newline at end of file
+});
diff --git a/packages/playwright/tests/pack.spec.js b/packages/playwright/tests/pack.spec.js
index 49933341e..324d6969a 100644
--- a/packages/playwright/tests/pack.spec.js
+++ b/packages/playwright/tests/pack.spec.js
@@ -20,4 +20,4 @@ test('test', async ({ page }) => {
   await page.getByPlaceholder('Quantity').fill('2');
   await page.getByText('Essentials').click();
   await page.getByRole('button', { name: 'Add Item' }).click();
-});
\ No newline at end of file
+});
diff --git a/packages/playwright/tests/packs.spec.js b/packages/playwright/tests/packs.spec.js
index 8e563595f..79d5eb58b 100644
--- a/packages/playwright/tests/packs.spec.js
+++ b/packages/playwright/tests/packs.spec.js
@@ -13,4 +13,4 @@ test('test', async ({ page }) => {
   await page.getByPlaceholder('Quantity').fill('2');
   await page.getByText('Food').click();
   await page.getByRole('button', { name: 'Add Item' }).click();
-});
\ No newline at end of file
+});
diff --git a/packages/playwright/tests/profile.spec.js b/packages/playwright/tests/profile.spec.js
index 4efcc3fd8..b84c0c239 100644
--- a/packages/playwright/tests/profile.spec.js
+++ b/packages/playwright/tests/profile.spec.js
@@ -16,4 +16,4 @@ test('test', async ({ page }) => {
   await page.getByRole('combobox').nth(1).click();
   await page.getByLabel('kg').click();
   await page.getByRole('button', { name: 'Update profile' }).click();
-});
\ No newline at end of file
+});
diff --git a/packages/playwright/tests/sign-in.spec.js b/packages/playwright/tests/sign-in.spec.js
index dc46eec24..580abb877 100644
--- a/packages/playwright/tests/sign-in.spec.js
+++ b/packages/playwright/tests/sign-in.spec.js
@@ -8,4 +8,4 @@ test('test', async ({ page }) => {
   await page.locator('input[type="password"]').click();
   await page.locator('input[type="password"]').fill('12345678');
   await page.getByRole('button', { name: 'Sign in', exact: true }).click();
-});
\ No newline at end of file
+});
diff --git a/packages/ui/src/Bento/elements/datepickers/RangePicker.tsx b/packages/ui/src/Bento/elements/datepickers/RangePicker.tsx
index d6d4f6eb3..fe159a998 100644
--- a/packages/ui/src/Bento/elements/datepickers/RangePicker.tsx
+++ b/packages/ui/src/Bento/elements/datepickers/RangePicker.tsx
@@ -212,10 +212,10 @@ function Calendar({
                         disabled={!d.inCurrentMonth}
                         {...(d.range === 'in-range' || d.selected
                           ? {
-                            hoverStyle: {
-                              backgroundColor: 'transparent',
-                            },
-                          }
+                              hoverStyle: {
+                                backgroundColor: 'transparent',
+                              },
+                            }
                           : {})}
                       >
                         <Button.Text
@@ -311,14 +311,12 @@ export function RangePicker({
   //   const Y = now.getFullYear()
   //   const D = now.getDate()
   return (
-    <DatePicker
-      open={open}
-      onOpenChange={setOpen}
-    >
+    <DatePicker open={open} onOpenChange={setOpen}>
       <DatePicker.Trigger asChild>
         <DatePickerInput
-          value={`${selectedDates[0]?.toDateString() || ''}${selectedDates[0] && selectedDates[1] ? ' - ' : ''
-            }${selectedDates[1]?.toDateString() || ''}`}
+          value={`${selectedDates[0]?.toDateString() || ''}${
+            selectedDates[0] && selectedDates[1] ? ' - ' : ''
+          }${selectedDates[1]?.toDateString() || ''}`}
           placeholder="Start date - End date"
           onReset={() => {
             onDatesChange([]);
@@ -330,21 +328,23 @@ export function RangePicker({
 
       <DatePicker.Content>
         <DatePicker.Content.Arrow />
-        <DatePickerProvider config={{
-          selectedDates,
-          onDatesChange,
-          offsetDate,
-          onOffsetChange,
-          dates: {
-            mode: 'range',
-            // limit years to 2 years before and after current year
-            //   minDate: new Date(Y, M - 2, 1),
-            //   maxDate: new Date(Y, M + 2, 0),
-          },
-          calendar: {
-            offsets: [-1, 1],
-          },
-        }}>
+        <DatePickerProvider
+          config={{
+            selectedDates,
+            onDatesChange,
+            offsetDate,
+            onOffsetChange,
+            dates: {
+              mode: 'range',
+              // limit years to 2 years before and after current year
+              //   minDate: new Date(Y, M - 2, 1),
+              //   maxDate: new Date(Y, M + 2, 0),
+            },
+            calendar: {
+              offsets: [-1, 1],
+            },
+          }}
+        >
           <DatePickerBody />
         </DatePickerProvider>
       </DatePicker.Content>
diff --git a/packages/ui/src/Bento/elements/datepickers/common/dateParts.tsx b/packages/ui/src/Bento/elements/datepickers/common/dateParts.tsx
index 56317476e..7dda725a7 100644
--- a/packages/ui/src/Bento/elements/datepickers/common/dateParts.tsx
+++ b/packages/ui/src/Bento/elements/datepickers/common/dateParts.tsx
@@ -108,7 +108,7 @@ export const DatePickerInput = Input.Area.styleable<DatePickerInputProps>(
     const { value, onButtonPress, size = '$3', onReset, ...rest } = props;
     return (
       <View $platform-native={{ minWidth: '100%' }}>
-        <Input size={size} style={{overflow: 'hidden'}}>
+        <Input size={size} style={{ overflow: 'hidden' }}>
           <Input.Box>
             <Input.Section>
               <Input.Area value={value} ref={ref} {...rest} />
diff --git a/packages/ui/src/Bento/elements/tables/Basic.tsx b/packages/ui/src/Bento/elements/tables/Basic.tsx
index 1de7acbbf..84143be5f 100644
--- a/packages/ui/src/Bento/elements/tables/Basic.tsx
+++ b/packages/ui/src/Bento/elements/tables/Basic.tsx
@@ -14,7 +14,7 @@ import { AddItem } from 'app/components/item/AddItem';
 import { ThreeDotsMenu, YStack, RButton } from '@packrat/ui';
 
 import { Platform } from 'react-native';
-import  { RDropdownMenu }  from '../../../ZDropdown';
+import { RDropdownMenu } from '../../../ZDropdown';
 import RIconButton from '../../../RIconButton';
 import { ChevronDown } from '@tamagui/lucide-icons';
 
@@ -114,17 +114,18 @@ export function BasicTable({
           window.innerWidth < 900 ? (
             <View>
               <RDropdownMenu
-                menuItems={[{label:'Edit', onSelect:handleEditClick},
-                  {label:'Delete', onSelect:handleDeleteClick}]}
-                 menuName={ <RIconButton
-                  backgroundColor="transparent"
-                  icon={ChevronDown}
-                  style={{ padding: 0 }}
-                />
-              }
-             />
-              
-            
+                menuItems={[
+                  { label: 'Edit', onSelect: handleEditClick },
+                  { label: 'Delete', onSelect: handleDeleteClick },
+                ]}
+                menuName={
+                  <RIconButton
+                    backgroundColor="transparent"
+                    icon={ChevronDown}
+                    style={{ padding: 0 }}
+                  />
+                }
+              />
             </View>
           ) : (
             <View>
diff --git a/packages/ui/src/DateRangePicker/DateRangePicker.native.tsx b/packages/ui/src/DateRangePicker/DateRangePicker.native.tsx
index 1619fc515..76570ae17 100644
--- a/packages/ui/src/DateRangePicker/DateRangePicker.native.tsx
+++ b/packages/ui/src/DateRangePicker/DateRangePicker.native.tsx
@@ -27,69 +27,74 @@ const DateRangePicker = ({
 }: RangePickerProps) => {
   const [range, setRange] = useState<[RangeDate?, RangeDate?]>(() => {
     if (!Array.isArray(selectedDates)) {
-      return []
+      return [];
     }
 
-    return selectedDates.map((date) => moment(date)) as [RangeDate, RangeDate]
-  })
+    return selectedDates.map((date) => moment(date)) as [RangeDate, RangeDate];
+  });
 
   const onDayPress = (day) => {
-    const selectedDay = moment(day.dateString, 'YYYY-MM-DD')
-    if(range.length < 1 || selectedDay.isSame(range[0], 'day')) {
-      return setRange([selectedDay])
+    const selectedDay = moment(day.dateString, 'YYYY-MM-DD');
+    if (range.length < 1 || selectedDay.isSame(range[0], 'day')) {
+      return setRange([selectedDay]);
     }
-    const newRange = moment.range(range[0], selectedDay)
-    let rangeResult = [moment(newRange.start), moment(newRange.end)]
-    if(rangeResult[0].isAfter(rangeResult[1])) {
-      rangeResult = [rangeResult[1], rangeResult[0]]
+    const newRange = moment.range(range[0], selectedDay);
+    let rangeResult = [moment(newRange.start), moment(newRange.end)];
+    if (rangeResult[0].isAfter(rangeResult[1])) {
+      rangeResult = [rangeResult[1], rangeResult[0]];
     }
 
-    setRange(rangeResult)
-    onDatesChange([range[0]?.toDate(), range[1]?.toDate()])
-    setOpen(false)
+    setRange(rangeResult);
+    onDatesChange([range[0]?.toDate(), range[1]?.toDate()]);
+    setOpen(false);
   };
 
   const markedDates = useMemo(() => {
-    const result = {}
+    const result = {};
     const period = {
       color: '#000000',
       textColor: '#ffffff',
       startingDay: false,
       endingDay: false,
-    }
+    };
     const [start, end] = range;
 
-    if(start) {
-      const dateString = moment(start).format('YYYY-MM-DD')
-      result[dateString] =  {...period, startingDay: true}
+    if (start) {
+      const dateString = moment(start).format('YYYY-MM-DD');
+      result[dateString] = { ...period, startingDay: true };
     }
 
-    if(end) {
-      const dateString = moment(end).format('YYYY-MM-DD')
+    if (end) {
+      const dateString = moment(end).format('YYYY-MM-DD');
       result[dateString] = {
-        ...period, 
+        ...period,
         endingDay: true,
-      }
+      };
 
-        // Mark all dates between start and end
-        const dates = Array.from(moment.range(start, end).by('day'));
-        dates.forEach((date) => {
-          const dateString = date.format('YYYY-MM-DD');
-          if (dateString !== moment(start).format('YYYY-MM-DD') && dateString !== moment(end).format('YYYY-MM-DD')) {
-            result[dateString] = period;
-          }
-        });
+      // Mark all dates between start and end
+      const dates = Array.from(moment.range(start, end).by('day'));
+      dates.forEach((date) => {
+        const dateString = date.format('YYYY-MM-DD');
+        if (
+          dateString !== moment(start).format('YYYY-MM-DD') &&
+          dateString !== moment(end).format('YYYY-MM-DD')
+        ) {
+          result[dateString] = period;
+        }
+      });
     }
 
-    return result
-  }, [range])
-
+    return result;
+  }, [range]);
 
   return (
-    <>    
-      <Modal visible={open} onRequestClose={() => {
-        setOpen(false)
-      }}>
+    <>
+      <Modal
+        visible={open}
+        onRequestClose={() => {
+          setOpen(false);
+        }}
+      >
         <View>
           <Calendar
             markingType={'period'}
@@ -97,21 +102,26 @@ const DateRangePicker = ({
             markedDates={markedDates}
             onDayPress={onDayPress}
           />
-          <RButton onPress={() => setOpen(false)} style={{marginHorizontal: 12, marginTop: 12}} >Close</RButton>
+          <RButton
+            onPress={() => setOpen(false)}
+            style={{ marginHorizontal: 12, marginTop: 12 }}
+          >
+            Close
+          </RButton>
         </View>
       </Modal>
       <DatePickerInput
-          value={`${range[0]?.format('YYYY-MM-DD') || ''}${
-            range[0] && range[1] ? ' - ' : ''
-          }${range[1]?.format('YYYY-MM-DD') || ''}`}
-          placeholder="Start date - End date"
-          onReset={() => {
-            setRange([]);
-          }}
-          onPressIn={() => setOpen(true)}
-          onButtonPress={() => setOpen(true)}
-          size='$3'
-        />
+        value={`${range[0]?.format('YYYY-MM-DD') || ''}${
+          range[0] && range[1] ? ' - ' : ''
+        }${range[1]?.format('YYYY-MM-DD') || ''}`}
+        placeholder="Start date - End date"
+        onReset={() => {
+          setRange([]);
+        }}
+        onPressIn={() => setOpen(true)}
+        onButtonPress={() => setOpen(true)}
+        size="$3"
+      />
     </>
   );
 };
diff --git a/packages/ui/src/DateRangePicker/index.ts b/packages/ui/src/DateRangePicker/index.ts
index 06456fb67..c073c9fa9 100644
--- a/packages/ui/src/DateRangePicker/index.ts
+++ b/packages/ui/src/DateRangePicker/index.ts
@@ -1 +1 @@
-export {default as DateRangePicker} from './DateRangePicker'
\ No newline at end of file
+export { default as DateRangePicker } from './DateRangePicker';
diff --git a/packages/ui/src/ErrorBoundary/index.tsx b/packages/ui/src/ErrorBoundary/index.tsx
index dbaaa423b..09219ca7e 100644
--- a/packages/ui/src/ErrorBoundary/index.tsx
+++ b/packages/ui/src/ErrorBoundary/index.tsx
@@ -4,7 +4,10 @@ import { Text } from 'tamagui';
 
 interface Props {
   children?: ReactNode;
-  FallbackComponent?: React.ComponentType<{ error: Error, resetErrorBoundary: () => void }>;
+  FallbackComponent?: React.ComponentType<{
+    error: Error;
+    resetErrorBoundary: () => void;
+  }>;
   onError?: (error: Error, errorInfo: React.ErrorInfo) => void;
 }
 
@@ -15,13 +18,11 @@ const DefaultFallbackComponent = ({ error }: { error: Error }) => (
 const ErrorBoundary: React.FC<Props> = ({
   children,
   FallbackComponent = DefaultFallbackComponent,
-  onError = (error, errorInfo) => console.error('Uncaught error:', error, errorInfo),
+  onError = (error, errorInfo) =>
+    console.error('Uncaught error:', error, errorInfo),
 }) => {
   return (
-    <ReactErrorBoundary
-      FallbackComponent={FallbackComponent}
-      onError={onError}
-    >
+    <ReactErrorBoundary FallbackComponent={FallbackComponent} onError={onError}>
       {children}
     </ReactErrorBoundary>
   );
diff --git a/packages/ui/src/RContextMenu/index.tsx b/packages/ui/src/RContextMenu/index.tsx
index c41d14abf..91291d2dd 100644
--- a/packages/ui/src/RContextMenu/index.tsx
+++ b/packages/ui/src/RContextMenu/index.tsx
@@ -46,17 +46,16 @@ const ContextMenu = {
   ),
 };
 
-const RContextMenu = ({menuItems = [], menuName}) => {
+const RContextMenu = ({ menuItems = [], menuName }) => {
   return (
     <ContextMenu.Root>
       <ContextMenu.Trigger>
         <RButton>{menuName}</RButton>
       </ContextMenu.Trigger>
       <ContextMenu.Content>
-        {menuItems.map(({label, onSelect=()=> {}}) => (
-          <ContextMenu.Item key={label} onSelect={onSelect} >
-        <ContextMenu.ItemTitle>{label}</ContextMenu.ItemTitle>
-
+        {menuItems.map(({ label, onSelect = () => {} }) => (
+          <ContextMenu.Item key={label} onSelect={onSelect}>
+            <ContextMenu.ItemTitle>{label}</ContextMenu.ItemTitle>
           </ContextMenu.Item>
         ))}
       </ContextMenu.Content>
diff --git a/packages/ui/src/RSelect/index.tsx b/packages/ui/src/RSelect/index.tsx
index 4426801e6..4fb496a96 100644
--- a/packages/ui/src/RSelect/index.tsx
+++ b/packages/ui/src/RSelect/index.tsx
@@ -14,15 +14,31 @@ const YStack: any = OriginalYStack;
 const Select: any = OriginalSelect;
 
 export default function RSelect(props) {
-  const { textKey = 'label', valueKey = 'value', zeego = false, native = false, ...otherProps } = props;
+  const {
+    textKey = 'label',
+    valueKey = 'value',
+    zeego = false,
+    native = false,
+    ...otherProps
+  } = props;
 
   return (
-    <SelectItem zeego={zeego} native={native} textKey={textKey} valueKey={valueKey} {...otherProps} />
+    <SelectItem
+      zeego={zeego}
+      native={native}
+      textKey={textKey}
+      valueKey={valueKey}
+      {...otherProps}
+    />
   );
 }
 
 const extractOptionAttributes = (item, index, textKey, valueKey) => {
-  if (typeof item === 'string' || typeof item === 'number' || typeof item === 'boolean') {
+  if (
+    typeof item === 'string' ||
+    typeof item === 'number' ||
+    typeof item === 'boolean'
+  ) {
     return { text: item.toString(), value: item.toString(), index };
   }
 
@@ -59,7 +75,9 @@ export function SelectItem(props) {
   const options = useMemo(() => {
     if (!Array.isArray(data)) return [];
     return data
-      .map((item, index) => extractOptionAttributes(item, index, textKey, valueKey))
+      .map((item, index) =>
+        extractOptionAttributes(item, index, textKey, valueKey),
+      )
       .map(({ text, value, index }) => (
         <Select.Item key={`${text} + ${value}`} index={index} value={value}>
           <Select.ItemText>
diff --git a/packages/ui/src/form/lib/LmSelect.tsx b/packages/ui/src/form/lib/LmSelect.tsx
index a926eba49..f81eb91a5 100644
--- a/packages/ui/src/form/lib/LmSelect.tsx
+++ b/packages/ui/src/form/lib/LmSelect.tsx
@@ -80,7 +80,7 @@ export function LmSelect({
           </Select.ItemIndicator>
         </Select.Item>
       )),
-    [options]
+    [options],
   );
 
   return (
diff --git a/packages/ui/src/index.tsx b/packages/ui/src/index.tsx
index aba3c6c8e..f7d319802 100644
--- a/packages/ui/src/index.tsx
+++ b/packages/ui/src/index.tsx
@@ -32,7 +32,7 @@ export { DropdownMenu, RDropdownMenu } from './ZDropdown';
 export { Container } from './Container';
 export { MainContentWeb } from './MainContentWeb';
 export { ContextMenu, RContextMenu } from './RContextMenu';
-export {DropdownComponent} from './Dropdown'
+export { DropdownComponent } from './Dropdown';
 // export { DropdownMenu, ExampleDropdown } from './RDropdown/DropdownBase';
 export { RSkeleton } from './RSkeleton';
 
diff --git a/server/package.json b/server/package.json
index 6ff3386fc..1fdd98b6d 100644
--- a/server/package.json
+++ b/server/package.json
@@ -29,7 +29,8 @@
     "seed:local": "wrangler d1 execute production --local --file=./seed/seed.sql",
     "studio": "drizzle-kit studio",
     "setup:local": "yarn generate && yarn migrate:local && yarn seed:local",
-    "deploy": "wrangler deploy --minify src/index.ts",
+    "deploy": "wrangler deploy src/index.ts",
+    "deploy:minify": "wrangler deploy --minify src/index.ts",
     "postinstall": "yarn generate",
     "clean": "rm -rf node_modules"
   },

From 6012b124c1aa096ecbb06b62aab9f594e100b3e3 Mon Sep 17 00:00:00 2001
From: Andrew Bierman <94939237+andrew-bierman@users.noreply.github.com>
Date: Tue, 2 Jul 2024 23:41:01 -0400
Subject: [PATCH 143/257] =?UTF-8?q?=F0=9F=8E=A8=20cleanup?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/app/utils/storage/storage.web.ts | 41 -----------------------
 1 file changed, 41 deletions(-)
 delete mode 100644 packages/app/utils/storage/storage.web.ts

diff --git a/packages/app/utils/storage/storage.web.ts b/packages/app/utils/storage/storage.web.ts
deleted file mode 100644
index 8c841cfea..000000000
--- a/packages/app/utils/storage/storage.web.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import EventEmitter from 'events';
-
-class StorageEventEmitter extends EventEmitter {}
-export const storageEvents = new StorageEventEmitter();
-
-export const Storage = {
-  getItem: async (key) => {
-    try {
-      const item = window.localStorage.getItem(key);
-      if (item === null) {
-        return null; // Handle case where item is null
-      }
-      return JSON.parse(item);
-    } catch {
-      console.error('Failed to load data from storage');
-    }
-    return null;
-  },
-  setItem: async (key, value) => {
-    try {
-      window.localStorage.setItem(key, JSON.stringify(value));
-      storageEvents.emit('change', { key, value });
-
-      return true;
-    } catch {
-      console.error('Failed to change data from storage');
-    }
-    return false;
-  },
-  removeItem: async (key) => {
-    try {
-      window.localStorage.removeItem(key);
-      storageEvents.emit('remove', { key });
-
-      return true;
-    } catch {
-      console.error('Failed to remove data from storage');
-    }
-    return false;
-  },
-};

From 9233056c209d02b1c38caef50ec005294eb2b7b2 Mon Sep 17 00:00:00 2001
From: Taron <taron.aleksanyan.20@gmail.com>
Date: Wed, 3 Jul 2024 09:23:28 +0400
Subject: [PATCH 144/257] add privacy page to vite app

---
 apps/vite/src/routeTree.gen.ts                | 11 ++++
 apps/vite/src/routes/privacy/index.lazy.tsx   | 27 +++++++++
 .../app/screens/privacy/PrivacyContent.tsx    | 56 ++++++++++++++++++
 packages/app/screens/privacy/index.tsx        | 32 ++++++++++
 .../app/screens/privacy/privacy.style.tsx     | 58 +++++++++++++++++++
 5 files changed, 184 insertions(+)
 create mode 100644 apps/vite/src/routes/privacy/index.lazy.tsx
 create mode 100644 packages/app/screens/privacy/PrivacyContent.tsx
 create mode 100644 packages/app/screens/privacy/index.tsx
 create mode 100644 packages/app/screens/privacy/privacy.style.tsx

diff --git a/apps/vite/src/routeTree.gen.ts b/apps/vite/src/routeTree.gen.ts
index ef5c834bf..6c0df6bd9 100644
--- a/apps/vite/src/routeTree.gen.ts
+++ b/apps/vite/src/routeTree.gen.ts
@@ -21,6 +21,7 @@ const TripsIndexLazyImport = createFileRoute('/trips/')()
 const SignInIndexLazyImport = createFileRoute('/sign-in/')()
 const RegisterIndexLazyImport = createFileRoute('/register/')()
 const ProfileIndexLazyImport = createFileRoute('/profile/')()
+const PrivacyIndexLazyImport = createFileRoute('/privacy/')()
 const PasswordResetIndexLazyImport = createFileRoute('/password-reset/')()
 const PacksIndexLazyImport = createFileRoute('/packs/')()
 const MapsIndexLazyImport = createFileRoute('/maps/')()
@@ -67,6 +68,11 @@ const ProfileIndexLazyRoute = ProfileIndexLazyImport.update({
   getParentRoute: () => rootRoute,
 } as any).lazy(() => import('./routes/profile/index.lazy').then((d) => d.Route))
 
+const PrivacyIndexLazyRoute = PrivacyIndexLazyImport.update({
+  path: '/privacy/',
+  getParentRoute: () => rootRoute,
+} as any).lazy(() => import('./routes/privacy/index.lazy').then((d) => d.Route))
+
 const PasswordResetIndexLazyRoute = PasswordResetIndexLazyImport.update({
   path: '/password-reset/',
   getParentRoute: () => rootRoute,
@@ -225,6 +231,10 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof PasswordResetIndexLazyImport
       parentRoute: typeof rootRoute
     }
+    '/privacy/': {
+      preLoaderRoute: typeof PrivacyIndexLazyImport
+      parentRoute: typeof rootRoute
+    }
     '/profile/': {
       preLoaderRoute: typeof ProfileIndexLazyImport
       parentRoute: typeof rootRoute
@@ -267,6 +277,7 @@ export const routeTree = rootRoute.addChildren([
   MapsIndexLazyRoute,
   PacksIndexLazyRoute,
   PasswordResetIndexLazyRoute,
+  PrivacyIndexLazyRoute,
   ProfileIndexLazyRoute,
   RegisterIndexLazyRoute,
   SignInIndexLazyRoute,
diff --git a/apps/vite/src/routes/privacy/index.lazy.tsx b/apps/vite/src/routes/privacy/index.lazy.tsx
new file mode 100644
index 000000000..74ca1bfbb
--- /dev/null
+++ b/apps/vite/src/routes/privacy/index.lazy.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import Privacy from 'app/screens/privacy';
+import { Platform, ScrollView, StyleSheet } from 'react-native';
+import { createLazyFileRoute } from '@tanstack/react-router';
+
+export const Route = createLazyFileRoute('/privacy/')({
+  component: PrivacyRoute,
+});
+
+/**
+ * Renders the AboutRoute component.
+ *
+ * @return {JSX.Element} The rendered component.
+ */
+export default function PrivacyRoute() {
+  return (
+    <>
+      <Privacy />
+    </>
+  );
+}
+
+const styles = StyleSheet.create({
+  menuBar: {
+    paddingBottom: 120,
+  },
+});
diff --git a/packages/app/screens/privacy/PrivacyContent.tsx b/packages/app/screens/privacy/PrivacyContent.tsx
new file mode 100644
index 000000000..510ba1e81
--- /dev/null
+++ b/packages/app/screens/privacy/PrivacyContent.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import { View, Text, ScrollView } from 'react-native';
+import { FontAwesome, MaterialCommunityIcons } from '@expo/vector-icons';
+import { RButton, RStack } from '@packrat/ui';
+import useTheme from '../../hooks/useTheme';
+import useCustomStyles from 'app/hooks/useCustomStyles';
+import useAbout from 'app/hooks/about/useAbout';
+import loadStyles from './privacy.style';
+import Layout from 'app/components/layout/Layout';
+
+const PrivacyContent = () => {
+  const { enableDarkMode, enableLightMode, isDark, isLight, currentTheme } =
+    useTheme();
+
+  const styles = useCustomStyles(loadStyles);
+
+  return (
+    <Layout>
+      <ScrollView>
+        <View style={styles.textContainer}>
+          <View style={styles.headerContainer}>
+            <Text style={[isDark ? styles.headerDark : styles.header]}>
+              Privacy Policy
+            </Text>
+          </View>
+
+          {privacySections.map((section, index) => (
+            <Text key={index} style={[isDark ? styles.textDark : styles.text]}>
+              {section}
+            </Text>
+          ))}
+        </View>
+      </ScrollView>
+    </Layout>
+  );
+};
+
+const privacySections = [
+  `Welcome to PackRat, the ultimate adventure planner designed specifically for outdoor enthusiasts who have a passion for exploring the wonders of the natural world. With our comprehensive app, we aim to revolutionize the way you plan and organize your outdoor excursions, be it a thrilling weekend camping trip, an invigorating day hike, or an epic cross-country road trip. Let us be your trusted companion in creating unforgettable adventures and seamless experiences in the great outdoors.`,
+
+  `At PackRat, we understand that planning a trip can sometimes be overwhelming. That's why our app is built to simplify the process, providing you with a user-friendly interface that makes trip planning a breeze. Whether you're a seasoned adventurer or a novice explorer, our intuitive features ensure that every aspect of your trip is carefully considered and effortlessly managed.`,
+
+  `One of the key features of PackRat is its ability to help you create and manage trips effortlessly. You can start by creating a personalized profile that reflects your interests, preferences, and outdoor expertise. By understanding your individual needs, we can provide tailored recommendations and suggestions that align with your unique adventure style. You can easily create multiple trips, keeping all your outdoor escapades neatly organized in one place. From the initial concept to the final itinerary, PackRat empowers you to take control of your outdoor journeys.`,
+
+  `Discovering new destinations is a thrilling aspect of outdoor exploration, and PackRat is your gateway to a world of endless possibilities. Our app is equipped with an extensive database of breathtaking locations, ranging from serene national parks to hidden gems off the beaten path. Explore the rich diversity of landscapes and discover new horizons waiting to be explored. Each destination is accompanied by detailed information, including descriptions, photos, and user reviews, to help you make informed decisions about your next adventure.`,
+
+  `But planning a trip isn't just about the destination—it's also about being prepared for whatever Mother Nature throws your way. PackRat keeps you informed with up-to-date weather forecasts, ensuring that you're equipped with the knowledge needed to make well-informed decisions about your outdoor activities. From sunny skies to sudden rain showers, you'll have the information you need to pack the right gear and make the most of your time outdoors.`,
+
+  `To provide you with accurate and reliable navigation, PackRat integrates seamlessly with Mapbox, a leading mapping and navigation platform. With our app, you'll have access to detailed maps and directions to your chosen destinations. We understand that the journey is as important as the destination itself, and our navigation features are designed to optimize your routes, taking into account factors such as traffic, road conditions, and scenic routes. Let PackRat guide you on the path to adventure.`,
+
+  `As outdoor enthusiasts ourselves, we know that each season brings a unique set of opportunities and challenges. That's why PackRat goes beyond just providing directions and weather forecasts. Our app also suggests popular outdoor activities based on the location and season of your trip. Whether you're looking for the best hiking trails in the summer, the most picturesque spots for fall foliage, or the perfect skiing destinations in winter, PackRat has got you covered. Let us inspire you to try new activities and make the most of each season's offerings.`,
+
+  `So, whether you're a solo adventurer seeking solitude in the wilderness or a group of friends looking to embark on a shared escapade, PackRat is here to help you turn your dreams into reality. Pack your bags, grab your friends, and let the thrill of the outdoors ignite your spirit of adventure. With PackRat by your side, you can confidently navigate the vast landscapes, discover hidden treasures, and create lasting memories. Get ready for your next expedition, and let PackRat be your trusted companion on the journey of a lifetime.`,
+];
+
+export default PrivacyContent;
diff --git a/packages/app/screens/privacy/index.tsx b/packages/app/screens/privacy/index.tsx
new file mode 100644
index 000000000..f927cbddd
--- /dev/null
+++ b/packages/app/screens/privacy/index.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import { View, ScrollView } from 'react-native';
+import { Desktop, Mobile, Tablet } from '../../media';
+import useTheme from '../../hooks/useTheme';
+import useCustomStyles from 'app/hooks/useCustomStyles';
+import loadStyles from './privacy.style';
+import AboutContent from './PrivacyContent';
+
+export default function Privacy() {
+  const { enableDarkMode, enableLightMode, isDark, isLight, currentTheme } =
+    useTheme();
+  const styles = useCustomStyles(loadStyles);
+
+  return (
+    <ScrollView
+      showsHorizontalScrollIndicator={false}
+      contentContainerStyle={styles.menuBar}
+    >
+      <View style={[isDark ? styles.containerDark : styles.container]}>
+        <Desktop>
+          <AboutContent />
+        </Desktop>
+        <Tablet>
+          <AboutContent />
+        </Tablet>
+        <Mobile>
+          <AboutContent />
+        </Mobile>
+      </View>
+    </ScrollView>
+  );
+}
diff --git a/packages/app/screens/privacy/privacy.style.tsx b/packages/app/screens/privacy/privacy.style.tsx
new file mode 100644
index 000000000..54abd19ca
--- /dev/null
+++ b/packages/app/screens/privacy/privacy.style.tsx
@@ -0,0 +1,58 @@
+const loadStyles = (theme: any) => {
+  const { currentTheme } = theme;
+  return {
+    container: {
+      flex: 1,
+      backgroundColor: currentTheme.colors.background,
+      padding: 20,
+      alignItems: 'center',
+    },
+    containerDark: {
+      flex: 1,
+      backgroundColor: currentTheme.colors.background,
+      padding: 20,
+      alignItems: 'center',
+    },
+    headerContainer: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      marginBottom: 20,
+      justifyContent: 'center',
+    },
+    header: {
+      fontSize: 24,
+      fontWeight: 'bold',
+      color: currentTheme.colors.text,
+      marginRight: 10,
+    },
+    headerDark: {
+      fontSize: 24,
+      fontWeight: 'bold',
+      color: currentTheme.colors.text,
+      marginRight: 10,
+    },
+    textContainer: {
+      marginBottom: 20,
+    },
+    text: {
+      fontSize: 18,
+      lineHeight: 28,
+      letterSpacing: 1,
+      // fontFamily: "sans-serif",
+      color: currentTheme.colors.text,
+      textAlign: 'center',
+      marginBottom: 20,
+    },
+    textDark: {
+      fontSize: 18,
+      lineHeight: 28,
+      letterSpacing: 1,
+      // fontFamily: "sans-serif",
+      color: currentTheme.colors.text,
+      textAlign: 'center',
+      marginBottom: 20,
+    },
+  };
+};
+
+export default loadStyles;

From e1c331237f85c5293c1b4f1229d2a46fd3c5878c Mon Sep 17 00:00:00 2001
From: pinocchio-life-like <icbr19fl@gmail.com>
Date: Wed, 3 Jul 2024 10:27:10 +0300
Subject: [PATCH 145/257] init

---
 .../validations/tripRoutesValidator/tripRoutesValidator.ts    | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/validations/src/validations/tripRoutesValidator/tripRoutesValidator.ts b/packages/validations/src/validations/tripRoutesValidator/tripRoutesValidator.ts
index 119bb259d..9e09ccff4 100644
--- a/packages/validations/src/validations/tripRoutesValidator/tripRoutesValidator.ts
+++ b/packages/validations/src/validations/tripRoutesValidator/tripRoutesValidator.ts
@@ -1,6 +1,8 @@
 import { z } from 'zod';
 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(),
@@ -49,7 +51,7 @@ export const addTripDetails = z.object({
   start_date: z.string(),
   end_date: z.string(),
   destination: z.string(),
-  type: z.nativeEnum(TripActivity),
+  type: z.enum(tripActivityValues),
   park: z.string().optional(),
   trail: z.string().optional(),
   geoJSON: z.object({

From 38e64eb89e7629870f5fdc14edbfb84ec493a893 Mon Sep 17 00:00:00 2001
From: Anmol Verma <anmolverma2810@gmail.com>
Date: Wed, 3 Jul 2024 15:22:44 +0530
Subject: [PATCH 146/257] Add link to privacy policy on about page

---
 packages/app/hooks/about/useAbout.js          |   6 +
 packages/app/screens/about/AboutContent.tsx   |  12 +-
 packages/app/screens/about/about.style.tsx    |   1 -
 .../app/screens/privacy/PrivacyContent.tsx    | 171 +++++++++++++++++-
 .../app/screens/privacy/privacy.style.tsx     |   6 +-
 5 files changed, 182 insertions(+), 14 deletions(-)

diff --git a/packages/app/hooks/about/useAbout.js b/packages/app/hooks/about/useAbout.js
index 69b05f3c1..dfcdd0a79 100644
--- a/packages/app/hooks/about/useAbout.js
+++ b/packages/app/hooks/about/useAbout.js
@@ -18,6 +18,11 @@ const useAbout = () => {
     Linking.openURL(discordUrl);
   };
 
+  const handlePrivacyLink = () => {
+    const privacyUrl = 'https://packrat.world/privacy';
+    Linking.openURL(privacyUrl);
+  };
+
   const aboutSections = [
     `Welcome to PackRat, the ultimate adventure planner designed specifically for outdoor enthusiasts who have a passion for exploring the wonders of the natural world. With our comprehensive app, we aim to revolutionize the way you plan and organize your outdoor excursions, be it a thrilling weekend camping trip, an invigorating day hike, or an epic cross-country road trip. Let us be your trusted companion in creating unforgettable adventures and seamless experiences in the great outdoors.`,
 
@@ -39,6 +44,7 @@ const useAbout = () => {
   return {
     handleGithubLink,
     handleDiscordLink,
+    handlePrivacyLink,
     aboutSections,
   };
 };
diff --git a/packages/app/screens/about/AboutContent.tsx b/packages/app/screens/about/AboutContent.tsx
index 02d59fbfe..27e2767f4 100644
--- a/packages/app/screens/about/AboutContent.tsx
+++ b/packages/app/screens/about/AboutContent.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { View, Text, ScrollView } from 'react-native';
 import { FontAwesome, MaterialCommunityIcons } from '@expo/vector-icons';
-import { RButton, RStack } from '@packrat/ui';
+import { RButton, RStack, RText } from '@packrat/ui';
 import useTheme from '../../hooks/useTheme';
 import useCustomStyles from 'app/hooks/useCustomStyles';
 import useAbout from 'app/hooks/about/useAbout';
@@ -19,7 +19,12 @@ const AboutContent = ({ desktopContainer, isMobile }: AboutContentProps) => {
 
   const styles = useCustomStyles(loadStyles);
 
-  const { handleGithubLink, handleDiscordLink, aboutSections } = useAbout();
+  const {
+    handleGithubLink,
+    handleDiscordLink,
+    handlePrivacyLink,
+    aboutSections,
+  } = useAbout();
 
   return (
     <Layout>
@@ -51,6 +56,9 @@ const AboutContent = ({ desktopContainer, isMobile }: AboutContentProps) => {
               </Text>
             </RStack>
           </RButton>
+          <RText onPress={handlePrivacyLink}>
+            <Text>Privacy Policy</Text>
+          </RText>
           {/* <Button
               style={styles.discordButton}
               // onPress={handleDiscordLink}
diff --git a/packages/app/screens/about/about.style.tsx b/packages/app/screens/about/about.style.tsx
index 56f570c17..222a6270d 100644
--- a/packages/app/screens/about/about.style.tsx
+++ b/packages/app/screens/about/about.style.tsx
@@ -33,7 +33,6 @@ const loadStyles = (theme: any) => {
     },
 
     buttonContainer: {
-      flexDirection: 'row',
       alignItems: 'center',
       justifyContent: 'center',
       width: '100%',
diff --git a/packages/app/screens/privacy/PrivacyContent.tsx b/packages/app/screens/privacy/PrivacyContent.tsx
index 510ba1e81..932b66518 100644
--- a/packages/app/screens/privacy/PrivacyContent.tsx
+++ b/packages/app/screens/privacy/PrivacyContent.tsx
@@ -36,21 +36,176 @@ const PrivacyContent = () => {
 };
 
 const privacySections = [
-  `Welcome to PackRat, the ultimate adventure planner designed specifically for outdoor enthusiasts who have a passion for exploring the wonders of the natural world. With our comprehensive app, we aim to revolutionize the way you plan and organize your outdoor excursions, be it a thrilling weekend camping trip, an invigorating day hike, or an epic cross-country road trip. Let us be your trusted companion in creating unforgettable adventures and seamless experiences in the great outdoors.`,
+  `
+Privacy Policy
 
-  `At PackRat, we understand that planning a trip can sometimes be overwhelming. That's why our app is built to simplify the process, providing you with a user-friendly interface that makes trip planning a breeze. Whether you're a seasoned adventurer or a novice explorer, our intuitive features ensure that every aspect of your trip is carefully considered and effortlessly managed.`,
+Last updated: July 03, 2024
 
-  `One of the key features of PackRat is its ability to help you create and manage trips effortlessly. You can start by creating a personalized profile that reflects your interests, preferences, and outdoor expertise. By understanding your individual needs, we can provide tailored recommendations and suggestions that align with your unique adventure style. You can easily create multiple trips, keeping all your outdoor escapades neatly organized in one place. From the initial concept to the final itinerary, PackRat empowers you to take control of your outdoor journeys.`,
+This Privacy Policy describes Our policies and procedures on the collection, use and disclosure of Your information when You use the Service and tells You about Your privacy rights and how the law protects You.
 
-  `Discovering new destinations is a thrilling aspect of outdoor exploration, and PackRat is your gateway to a world of endless possibilities. Our app is equipped with an extensive database of breathtaking locations, ranging from serene national parks to hidden gems off the beaten path. Explore the rich diversity of landscapes and discover new horizons waiting to be explored. Each destination is accompanied by detailed information, including descriptions, photos, and user reviews, to help you make informed decisions about your next adventure.`,
+We use Your Personal data to provide and improve the Service. By using the Service, You agree to the collection and use of information in accordance with this Privacy Policy. This Privacy Policy has been created with the help of the Privacy Policy Generator.
+Interpretation and Definitions
+Interpretation
 
-  `But planning a trip isn't just about the destination—it's also about being prepared for whatever Mother Nature throws your way. PackRat keeps you informed with up-to-date weather forecasts, ensuring that you're equipped with the knowledge needed to make well-informed decisions about your outdoor activities. From sunny skies to sudden rain showers, you'll have the information you need to pack the right gear and make the most of your time outdoors.`,
+The words of which the initial letter is capitalized have meanings defined under the following conditions. The following definitions shall have the same meaning regardless of whether they appear in singular or in plural.
+Definitions
 
-  `To provide you with accurate and reliable navigation, PackRat integrates seamlessly with Mapbox, a leading mapping and navigation platform. With our app, you'll have access to detailed maps and directions to your chosen destinations. We understand that the journey is as important as the destination itself, and our navigation features are designed to optimize your routes, taking into account factors such as traffic, road conditions, and scenic routes. Let PackRat guide you on the path to adventure.`,
+For the purposes of this Privacy Policy:
 
-  `As outdoor enthusiasts ourselves, we know that each season brings a unique set of opportunities and challenges. That's why PackRat goes beyond just providing directions and weather forecasts. Our app also suggests popular outdoor activities based on the location and season of your trip. Whether you're looking for the best hiking trails in the summer, the most picturesque spots for fall foliage, or the perfect skiing destinations in winter, PackRat has got you covered. Let us inspire you to try new activities and make the most of each season's offerings.`,
+    Account means a unique account created for You to access our Service or parts of our Service.
 
-  `So, whether you're a solo adventurer seeking solitude in the wilderness or a group of friends looking to embark on a shared escapade, PackRat is here to help you turn your dreams into reality. Pack your bags, grab your friends, and let the thrill of the outdoors ignite your spirit of adventure. With PackRat by your side, you can confidently navigate the vast landscapes, discover hidden treasures, and create lasting memories. Get ready for your next expedition, and let PackRat be your trusted companion on the journey of a lifetime.`,
+    Affiliate means an entity that controls, is controlled by or is under common control with a party, where "control" means ownership of 50% or more of the shares, equity interest or other securities entitled to vote for election of directors or other managing authority.
+
+    Application refers to PackRat, the software program provided by the Company.
+
+    Company (referred to as either "the Company", "We", "Us" or "Our" in this Agreement) refers to PackRat.
+
+    Cookies are small files that are placed on Your computer, mobile device or any other device by a website, containing the details of Your browsing history on that website among its many uses.
+
+    Country refers to: Washington, United States
+
+    Device means any device that can access the Service such as a computer, a cellphone or a digital tablet.
+
+    Personal Data is any information that relates to an identified or identifiable individual.
+
+    Service refers to the Application or the Website or both.
+
+    Service Provider means any natural or legal person who processes the data on behalf of the Company. It refers to third-party companies or individuals employed by the Company to facilitate the Service, to provide the Service on behalf of the Company, to perform services related to the Service or to assist the Company in analyzing how the Service is used.
+
+    Third-party Social Media Service refers to any website or any social network website through which a User can log in or create an account to use the Service.
+
+    Usage Data refers to data collected automatically, either generated by the use of the Service or from the Service infrastructure itself (for example, the duration of a page visit).
+
+    Website refers to PackRat, accessible from https://packrat.world/
+
+    You means the individual accessing or using the Service, or the company, or other legal entity on behalf of which such individual is accessing or using the Service, as applicable.
+
+Collecting and Using Your Personal Data
+Types of Data Collected
+Personal Data
+
+While using Our Service, We may ask You to provide Us with certain personally identifiable information that can be used to contact or identify You. Personally identifiable information may include, but is not limited to:
+
+    Email address
+
+    Name
+
+    Usage Data
+
+Usage Data
+
+Usage Data is collected automatically when using the Service.
+
+Usage Data may include information such as Your Device's Internet Protocol address (e.g. IP address), browser type, browser version, the pages of our Service that You visit, the time and date of Your visit, the time spent on those pages, unique device identifiers and other diagnostic data.
+
+When You access the Service by or through a mobile device, We may collect certain information automatically, including, but not limited to, the type of mobile device You use, Your mobile device unique ID, the IP address of Your mobile device, Your mobile operating system, the type of mobile Internet browser You use, unique device identifiers and other diagnostic data.
+
+We may also collect information that Your browser sends whenever You visit our Service or when You access the Service by or through a mobile device.
+Information from Third-Party Social Media Services
+
+The Company allows You to create an account and log in to use the Service through the following Third-party Social Media Service:
+
+    Google
+   
+
+If You decide to register through or otherwise grant us access to a Third-Party Social Media Service, We may collect Personal data that is already associated with Your Third-Party Social Media Service's account, such as Your name, Your email address, Your activities or Your contact list associated with that account.
+
+You may also have the option of sharing additional information with the Company through Your Third-Party Social Media Service's account. If You choose to provide such information and Personal Data, during registration or otherwise, You are giving the Company permission to use, share, and store it in a manner consistent with this Privacy Policy.
+
+Use of Your Personal Data
+
+The Company may use Personal Data for the following purposes:
+
+    To provide and maintain our Service, including to monitor the usage of our Service.
+
+    To manage Your Account: to manage Your registration as a user of the Service. The Personal Data You provide can give You access to different functionalities of the Service that are available to You as a registered user.
+
+    For the performance of a contract: the development, compliance and undertaking of the purchase contract for the products, items or services You have purchased or of any other contract with Us through the Service.
+
+    To contact You: To contact You by email, telephone calls, SMS, or other equivalent forms of electronic communication, such as a mobile application's push notifications regarding updates or informative communications related to the functionalities, products or contracted services, including the security updates, when necessary or reasonable for their implementation.
+
+    To provide You with news, special offers and general information about other goods, services and events which we offer that are similar to those that you have already purchased or enquired about unless You have opted not to receive such information.
+
+    To manage Your requests: To attend and manage Your requests to Us.
+
+    For business transfers: We may use Your information to evaluate or conduct a merger, divestiture, restructuring, reorganization, dissolution, or other sale or transfer of some or all of Our assets, whether as a going concern or as part of bankruptcy, liquidation, or similar proceeding, in which Personal Data held by Us about our Service users is among the assets transferred.
+
+    For other purposes: We may use Your information for other purposes, such as data analysis, identifying usage trends, determining the effectiveness of our promotional campaigns and to evaluate and improve our Service, products, services, marketing and your experience.
+
+We may share Your personal information in the following situations:
+
+    With Service Providers: We may share Your personal information with Service Providers to monitor and analyze the use of our Service, to contact You.
+    For business transfers: We may share or transfer Your personal information in connection with, or during negotiations of, any merger, sale of Company assets, financing, or acquisition of all or a portion of Our business to another company.
+    With Affiliates: We may share Your information with Our affiliates, in which case we will require those affiliates to honor this Privacy Policy. Affiliates include Our parent company and any other subsidiaries, joint venture partners or other companies that We control or that are under common control with Us.
+    With business partners: We may share Your information with Our business partners to offer You certain products, services or promotions.
+    With other users: when You share personal information or otherwise interact in the public areas with other users, such information may be viewed by all users and may be publicly distributed outside. If You interact with other users or register through a Third-Party Social Media Service, Your contacts on the Third-Party Social Media Service may see Your name, profile, pictures and description of Your activity. Similarly, other users will be able to view descriptions of Your activity, communicate with You and view Your profile.
+    With Your consent: We may disclose Your personal information for any other purpose with Your consent.
+
+Retention of Your Personal Data
+
+The Company will retain Your Personal Data only for as long as is necessary for the purposes set out in this Privacy Policy. We will retain and use Your Personal Data to the extent necessary to comply with our legal obligations (for example, if we are required to retain your data to comply with applicable laws), resolve disputes, and enforce our legal agreements and policies.
+
+The Company will also retain Usage Data for internal analysis purposes. Usage Data is generally retained for a shorter period of time, except when this data is used to strengthen the security or to improve the functionality of Our Service, or We are legally obligated to retain this data for longer time periods.
+Transfer of Your Personal Data
+
+Your information, including Personal Data, is processed at the Company's operating offices and in any other places where the parties involved in the processing are located. It means that this information may be transferred to — and maintained on — computers located outside of Your state, province, country or other governmental jurisdiction where the data protection laws may differ than those from Your jurisdiction.
+
+Your consent to this Privacy Policy followed by Your submission of such information represents Your agreement to that transfer.
+
+The Company will take all steps reasonably necessary to ensure that Your data is treated securely and in accordance with this Privacy Policy and no transfer of Your Personal Data will take place to an organization or a country unless there are adequate controls in place including the security of Your data and other personal information.
+Delete Your Personal Data
+
+You have the right to delete or request that We assist in deleting the Personal Data that We have collected about You.
+
+Our Service may give You the ability to delete certain information about You from within the Service.
+
+You may update, amend, or delete Your information at any time by signing in to Your Account, if you have one, and visiting the account settings section that allows you to manage Your personal information. You may also contact Us to request access to, correct, or delete any personal information that You have provided to Us.
+
+Please note, however, that We may need to retain certain information when we have a legal obligation or lawful basis to do so.
+Disclosure of Your Personal Data
+Business Transactions
+
+If the Company is involved in a merger, acquisition or asset sale, Your Personal Data may be transferred. We will provide notice before Your Personal Data is transferred and becomes subject to a different Privacy Policy.
+Law enforcement
+
+Under certain circumstances, the Company may be required to disclose Your Personal Data if required to do so by law or in response to valid requests by public authorities (e.g. a court or a government agency).
+Other legal requirements
+
+The Company may disclose Your Personal Data in the good faith belief that such action is necessary to:
+
+    Comply with a legal obligation
+    Protect and defend the rights or property of the Company
+    Prevent or investigate possible wrongdoing in connection with the Service
+    Protect the personal safety of Users of the Service or the public
+    Protect against legal liability
+
+Security of Your Personal Data
+
+The security of Your Personal Data is important to Us, but remember that no method of transmission over the Internet, or method of electronic storage is 100% secure. While We strive to use commercially acceptable means to protect Your Personal Data, We cannot guarantee its absolute security.
+Children's Privacy
+
+Our Service does not address anyone under the age of 13. We do not knowingly collect personally identifiable information from anyone under the age of 13. If You are a parent or guardian and You are aware that Your child has provided Us with Personal Data, please contact Us. If We become aware that We have collected Personal Data from anyone under the age of 13 without verification of parental consent, We take steps to remove that information from Our servers.
+
+If We need to rely on consent as a legal basis for processing Your information and Your country requires consent from a parent, We may require Your parent's consent before We collect and use that information.
+Links to Other Websites
+
+Our Service may contain links to other websites that are not operated by Us. If You click on a third party link, You will be directed to that third party's site. We strongly advise You to review the Privacy Policy of every site You visit.
+
+We have no control over and assume no responsibility for the content, privacy policies or practices of any third party sites or services.
+Changes to this Privacy Policy
+
+We may update Our Privacy Policy from time to time. We will notify You of any changes by posting the new Privacy Policy on this page.
+
+We will let You know via email and/or a prominent notice on Our Service, prior to the change becoming effective and update the "Last updated" date at the top of this Privacy Policy.
+
+You are advised to review this Privacy Policy periodically for any changes. Changes to this Privacy Policy are effective when they are posted on this page.
+Contact Us
+
+If you have any questions about this Privacy Policy, You can contact us:
+
+    By visiting this page on our website: https://packrat.world/about
+
+`,
 ];
 
 export default PrivacyContent;
diff --git a/packages/app/screens/privacy/privacy.style.tsx b/packages/app/screens/privacy/privacy.style.tsx
index 54abd19ca..b6d9cb68b 100644
--- a/packages/app/screens/privacy/privacy.style.tsx
+++ b/packages/app/screens/privacy/privacy.style.tsx
@@ -38,9 +38,9 @@ const loadStyles = (theme: any) => {
       fontSize: 18,
       lineHeight: 28,
       letterSpacing: 1,
-      // fontFamily: "sans-serif",
+      // fontFamily: 'sans-serif',
       color: currentTheme.colors.text,
-      textAlign: 'center',
+      textAlign: 'left',
       marginBottom: 20,
     },
     textDark: {
@@ -49,7 +49,7 @@ const loadStyles = (theme: any) => {
       letterSpacing: 1,
       // fontFamily: "sans-serif",
       color: currentTheme.colors.text,
-      textAlign: 'center',
+      textAlign: 'left',
       marginBottom: 20,
     },
   };

From 993e42c284a7559ad7e2df4fe7a70cedf70d406b Mon Sep 17 00:00:00 2001
From: Muhammad Hassan <mh7722178@gmail.com>
Date: Wed, 3 Jul 2024 15:15:32 +0500
Subject: [PATCH 147/257] Fixed Encountered Errors

---
 packages/app/components/pack/AddPack.tsx |  2 +-
 packages/app/hooks/storage/useStorage.ts | 29 +++++-------
 packages/ui/src/RButton/index.tsx        | 58 ++++++++++++------------
 3 files changed, 42 insertions(+), 47 deletions(-)

diff --git a/packages/app/components/pack/AddPack.tsx b/packages/app/components/pack/AddPack.tsx
index d41c4ab4e..a33b4b64d 100644
--- a/packages/app/components/pack/AddPack.tsx
+++ b/packages/app/components/pack/AddPack.tsx
@@ -92,7 +92,7 @@ export const AddPack = ({
             data={packSelectOptions}
             onValueChange={handleonValueChange}
             placeholder={`Is Public: ${selectedValue}`}
-            width={xxs ? '50%' : xs ? '50%' : xxl ? '15%' : '50%'}
+            width={xxs ? '50%' : xs ? '50%' : xxl ? '15%' : '8%'}
             native={true}
             zeego={true}
           />
diff --git a/packages/app/hooks/storage/useStorage.ts b/packages/app/hooks/storage/useStorage.ts
index 2eac4d739..b7c0f288c 100644
--- a/packages/app/hooks/storage/useStorage.ts
+++ b/packages/app/hooks/storage/useStorage.ts
@@ -1,17 +1,12 @@
 import { useCallback, useEffect, useReducer } from 'react';
 import { Storage, storageEvents } from 'app/utils/storage';
 
+storageEvents.setMaxListeners(20);
+
 type UseStateHook<T> = [[boolean, T | null], (value?: T | null) => void];
 
-const useAsyncState = <T>(
-  initialValue: T | null,
-): [[boolean, T | null], (value?: T | null) => void] => {
-  return useReducer(
-    (state: [boolean, T | null], action: T | null): [boolean, T | null] => {
-      return [false, action];
-    },
-    [true, initialValue],
-  );
+const useAsyncState = (initialValue) => {
+  return useReducer((state = null, action) => [false, action], initialValue);
 };
 
 export function useStorage<T>(key: string, initialValue?: T): UseStateHook<T> {
@@ -27,26 +22,26 @@ export function useStorage<T>(key: string, initialValue?: T): UseStateHook<T> {
       }
     })();
 
-    const handleChange = (evt: { key: string; value: string | null }) => {
+    const handleChange = (evt) => {
       if (evt.key !== key) return;
       setState(evt.value);
     };
 
-    const handleRemove = (evt: { key: string }) => {
+    const handleRemove = (evt) => {
       if (evt.key !== key) return;
       setState(null);
     };
 
-    storageEvents.once('change', handleChange);
-    storageEvents.once('remove', handleRemove);
+    storageEvents.on('change', handleChange);
+    storageEvents.on('remove', handleRemove);
 
     return () => {
-      storageEvents.removeListener('change', handleChange);
-      storageEvents.removeListener('remove', handleRemove);
+      storageEvents.off('change', handleChange);
+      storageEvents.off('remove', handleRemove);
     };
   }, [key]);
 
-  // Set value in storage
+  // Set
   const setValue = useCallback(
     (value: string | null) => {
       Storage.setItem(key, value);
@@ -55,4 +50,4 @@ export function useStorage<T>(key: string, initialValue?: T): UseStateHook<T> {
   );
 
   return [state, setValue];
-}
+}
\ No newline at end of file
diff --git a/packages/ui/src/RButton/index.tsx b/packages/ui/src/RButton/index.tsx
index a8910d4e1..5471a04e7 100644
--- a/packages/ui/src/RButton/index.tsx
+++ b/packages/ui/src/RButton/index.tsx
@@ -1,6 +1,6 @@
+import React, { useCallback } from 'react';
 import { Button, ButtonProps, styled } from 'tamagui';
 import { useHaptic } from 'app/hooks/common';
-import { useCallback } from 'react';
 
 interface HapticRButtonProps extends ButtonProps {
   hapticStrength?: 'light' | 'medium' | 'heavy';
@@ -11,33 +11,33 @@ const StyledButton = styled(Button, {
   color: 'white',
 } as any);
 
-const RButton: React.FC<HapticRButtonProps> = ({
-  hapticStrength,
-  onPress,
-  ...props
-}) => {
-  const haptic = useHaptic();
-
-  const triggerHapticFeedback = useCallback(() => {
-    switch (hapticStrength) {
-      case 'light':
-        haptic.light();
-        break;
-      case 'medium':
-        haptic.medium();
-        break;
-      case 'heavy':
-        haptic.heavy();
-        break;
-    }
-  }, [hapticStrength]);
-
-  const handlePress = (e) => {
-    onPress?.(e);
-    triggerHapticFeedback();
-  };
-
-  return <StyledButton {...props} onPress={handlePress} />;
-};
+const RButton = React.forwardRef<HTMLElement, HapticRButtonProps>(
+  ({ hapticStrength, onPress, ...props }, ref) => {
+    const haptic = useHaptic();
+
+    const triggerHapticFeedback = useCallback(() => {
+      switch (hapticStrength) {
+        case 'light':
+          haptic.light();
+          break;
+        case 'medium':
+          haptic.medium();
+          break;
+        case 'heavy':
+          haptic.heavy();
+          break;
+      }
+    }, [hapticStrength]);
+
+    const handlePress = (e: any) => {
+      onPress?.(e);
+      triggerHapticFeedback();
+    };
+
+    return <StyledButton {...props} ref={ref} onPress={handlePress} />;
+  },
+);
+
+RButton.displayName = 'RButton';
 
 export default RButton;

From dd0a82e425805699127393ac4aa6de64bca92215 Mon Sep 17 00:00:00 2001
From: pinocchio-life-like <icbr19fl@gmail.com>
Date: Wed, 3 Jul 2024 15:08:15 +0300
Subject: [PATCH 148/257] test validation failure on andrew_testing

---
 .../src/validations/tripRoutesValidator/tripRoutesValidator.ts  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/validations/src/validations/tripRoutesValidator/tripRoutesValidator.ts b/packages/validations/src/validations/tripRoutesValidator/tripRoutesValidator.ts
index 9e09ccff4..d502a0326 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({
   start_date: z.string(),
   end_date: z.string(),
   destination: z.string(),
-  type: z.enum(tripActivityValues),
+  type: z.nativeEnum(TripActivity),
   park: z.string().optional(),
   trail: z.string().optional(),
   geoJSON: z.object({

From 4829cd48994f7cb9a8c80a6a5f5850975c99649a Mon Sep 17 00:00:00 2001
From: pinocchio-life-like <icbr19fl@gmail.com>
Date: Wed, 3 Jul 2024 15:20:39 +0300
Subject: [PATCH 149/257] test validation failure on andrew_testing

---
 .../src/validations/tripRoutesValidator/tripRoutesValidator.ts  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/validations/src/validations/tripRoutesValidator/tripRoutesValidator.ts b/packages/validations/src/validations/tripRoutesValidator/tripRoutesValidator.ts
index d502a0326..9e09ccff4 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({
   start_date: z.string(),
   end_date: z.string(),
   destination: z.string(),
-  type: z.nativeEnum(TripActivity),
+  type: z.enum(tripActivityValues),
   park: z.string().optional(),
   trail: z.string().optional(),
   geoJSON: z.object({

From 17566d5b4da68b2d21f8753999f8b03cc92bc8e7 Mon Sep 17 00:00:00 2001
From: Muhammad Hassan <mh7722178@gmail.com>
Date: Thu, 4 Jul 2024 16:31:16 +0500
Subject: [PATCH 150/257] Fixed Required Changes

---
 .../card/PackCardHeader/PackCardHeader.tsx    |  2 +-
 packages/app/hooks/packs/useUserPacks.ts      |  6 +--
 packages/app/screens/feed/Feed.tsx            |  2 +-
 .../app/screens/user/ProfileContainer.tsx     | 39 ++++++++++++-------
 4 files changed, 28 insertions(+), 21 deletions(-)

diff --git a/packages/app/components/card/PackCardHeader/PackCardHeader.tsx b/packages/app/components/card/PackCardHeader/PackCardHeader.tsx
index bd94a210b..423e470f3 100644
--- a/packages/app/components/card/PackCardHeader/PackCardHeader.tsx
+++ b/packages/app/components/card/PackCardHeader/PackCardHeader.tsx
@@ -115,7 +115,7 @@ export const PackCardHeader = ({ data, title }: PackCardHeaderProps) => {
             >
               <DropdownComponent
                 value={null}
-                data={optionValues}
+                data={menuItems}
                 onValueChange={(value) => handleActionsOpenChange(value)}
                 placeholder={
                   <RIconButton
diff --git a/packages/app/hooks/packs/useUserPacks.ts b/packages/app/hooks/packs/useUserPacks.ts
index 5eb654154..1fd5659d1 100644
--- a/packages/app/hooks/packs/useUserPacks.ts
+++ b/packages/app/hooks/packs/useUserPacks.ts
@@ -20,11 +20,7 @@ export const useUserPacks = (ownerId: string | undefined, queryString = '') => {
     {
       ownerId: ownerId || '',
       queryBy: queryString,
-    },
-    (oldData) => {
-      // This was added to fix typescript error and passing oldData to determine new data
-      return data;
-    },
+    }
   );
 
   // Extract packs or set an empty array if data is undefined.
diff --git a/packages/app/screens/feed/Feed.tsx b/packages/app/screens/feed/Feed.tsx
index b3fc80aa2..a29677f20 100644
--- a/packages/app/screens/feed/Feed.tsx
+++ b/packages/app/screens/feed/Feed.tsx
@@ -212,4 +212,4 @@ const loadStyles = (theme) => {
   };
 };
 
-export default Feed;
+export default Feed;
\ No newline at end of file
diff --git a/packages/app/screens/user/ProfileContainer.tsx b/packages/app/screens/user/ProfileContainer.tsx
index bcdcc8b78..50009c63d 100644
--- a/packages/app/screens/user/ProfileContainer.tsx
+++ b/packages/app/screens/user/ProfileContainer.tsx
@@ -198,6 +198,17 @@ export default function ProfileContainer({ id = null }) {
     error,
   } = useProfile(id);
 
+  useEffect(() => {
+    console.log('ProfileContainer rendered');
+    console.log({
+      isLoading,
+      error,
+      user,
+      favoritesList,
+      packsList,
+      tripsList,
+    });
+  }, [isLoading, error, user, favoritesList, packsList, tripsList]);
   return (
     <View>
       <ScrollView>
@@ -250,22 +261,22 @@ export default function ProfileContainer({ id = null }) {
               )}
             </View>
             {packsList.length > 0 && (
-              // <View style={styles.userDataContainer}>
-              <UserDataContainer
-                data={packsList}
-                type="packs"
-                userId={user?.id}
-              />
-              // </View>
+              <View style={styles.userDataContainer}>
+                <UserDataContainer
+                  data={packsList}
+                  type="packs"
+                  userId={user?.id}
+                />
+              </View>
             )}
             {tripsList.length > 0 && (
-              // <View style={styles.userDataContainer}>
-              <UserDataContainer
-                data={tripsList}
-                type="trips"
-                userId={user?.id}
-              />
-              // </View>
+              <View style={styles.userDataContainer}>
+                <UserDataContainer
+                  data={tripsList}
+                  type="trips"
+                  userId={user?.id}
+                />
+              </View>
             )}
           </View>
         </RStack>

From d152d12d4839f470b8c60d83d07b73f36557d6c2 Mon Sep 17 00:00:00 2001
From: Muhammad Hassan <mh7722178@gmail.com>
Date: Thu, 4 Jul 2024 19:13:48 +0500
Subject: [PATCH 151/257] Fixed Remaining Types

---
 packages/app/auth/hooks/useUser.ts            |  2 +-
 packages/app/auth/hooks/useUserSetter.ts      |  2 +-
 .../app/components/card/CustomCardHeader.tsx  | 15 ++++---
 .../card/PackCardHeader/PackCardHeader.tsx    | 40 ++++++-------------
 packages/app/components/chat/index.tsx        |  2 +-
 .../app/components/itemtable/itemTable.tsx    |  1 +
 packages/app/hooks/common/useCopyClipboard.ts |  6 ++-
 .../elements/tables/PaginatedSortedTable.tsx  |  4 +-
 8 files changed, 31 insertions(+), 41 deletions(-)

diff --git a/packages/app/auth/hooks/useUser.ts b/packages/app/auth/hooks/useUser.ts
index 9def9bc1a..49bc26de6 100644
--- a/packages/app/auth/hooks/useUser.ts
+++ b/packages/app/auth/hooks/useUser.ts
@@ -15,7 +15,7 @@ export const useUserQuery = () => {
     refetch,
     data,
     isLoading: isRequestLoading,
-  } = queryTrpc.getMe.useQuery(null, {
+  } = queryTrpc.getMe.useQuery(undefined, {
     enabled: isRequestEnabled,
   });
 
diff --git a/packages/app/auth/hooks/useUserSetter.ts b/packages/app/auth/hooks/useUserSetter.ts
index 415f69299..f4d959c71 100644
--- a/packages/app/auth/hooks/useUserSetter.ts
+++ b/packages/app/auth/hooks/useUserSetter.ts
@@ -6,7 +6,7 @@ export const useUserSetter = () => {
   const utils = queryTrpc.useUtils();
 
   const setUser = useCallback(
-    (data: User | null) => utils.getMe.setData(null, data),
+    (data: User | null) => utils.getMe.setData(undefined, data),
     [utils],
   );
 
diff --git a/packages/app/components/card/CustomCardHeader.tsx b/packages/app/components/card/CustomCardHeader.tsx
index 8836eceb1..ff32ecd34 100644
--- a/packages/app/components/card/CustomCardHeader.tsx
+++ b/packages/app/components/card/CustomCardHeader.tsx
@@ -10,12 +10,13 @@ import { CopyPackModal } from 'app/components/pack/CopyPackModal';
 
 interface CustomCardHeaderProps {
   data: {
-    owner_id: string | { id: string };
+    owner_id: string;
     owners?: Array<{ name: string }>;
+    type: string;
   };
   title: string | JSX.Element;
   link?: string;
-  actionsComponent: JSX.Element;
+  actionsComponent: boolean | JSX.Element | undefined;
 }
 
 const RText: any = OriginalRText;
@@ -25,11 +26,13 @@ export const CustomCardHeader = ({
   link,
   actionsComponent,
 }: CustomCardHeaderProps) => {
-  const { isCopied, handleCopyLink } = useCopyClipboard(link);
+  const { isCopied, handleCopyLink } = useCopyClipboard({ link });
   const user = useAuthUser();
   const { isDark } = useTheme();
   const [isCopyPackModalOpen, setIsCopyPackModalOpen] = useState(false);
 
+  console.log("dataaaaaaaaaaaaa", data.owners)
+
   return (
     <>
       <RStack style={{ flex: 1 }}>
@@ -37,15 +40,15 @@ export const CustomCardHeader = ({
       </RStack>
       <View>
         <RLink
-          href={`/profile/${data?.owner_id?.id || data?.owner_id}`}
+          href={`/profile/${data?.owner_id}`}
           style={{ textDecoration: 'none' }}
         >
           <RText>
             {user?.id === data.owner_id
               ? 'Your Profile'
               : `View ${
-                  data.owners && data.owners.length
-                    ? data.owners[0].name
+                  data.owners && data.owners?.length
+                    ? data.owners[0]?.name
                     : 'Profile'
                 }`}
           </RText>
diff --git a/packages/app/components/card/PackCardHeader/PackCardHeader.tsx b/packages/app/components/card/PackCardHeader/PackCardHeader.tsx
index 423e470f3..b793b5f2a 100644
--- a/packages/app/components/card/PackCardHeader/PackCardHeader.tsx
+++ b/packages/app/components/card/PackCardHeader/PackCardHeader.tsx
@@ -12,20 +12,17 @@ import {
 import { useFetchSinglePack, useDeletePack } from 'app/hooks/packs';
 import { usePackTitleInput } from './usePackTitleInput';
 import { useRouter } from 'app/hooks/router';
-import { useEditPack } from 'app/hooks/packs/useEditPack';
-import { Dimensions, Platform } from 'react-native';
-import { CopyPackModal } from '../../pack/CopyPackModal';
-import { View } from 'react-native';
+import { Platform, View } from 'react-native';
 
-interface MenuItems {
-  label: string;
-  onSelect: () => void;
-}
 interface PackCardHeaderProps {
   data: any;
   title: string;
   link?: string;
 }
+interface optionValues{
+  label: string;
+  value: string
+}
 
 export const PackCardHeader = ({ data, title }: PackCardHeaderProps) => {
   const { isLoading, refetch } = useFetchSinglePack(data?.id);
@@ -43,29 +40,16 @@ export const PackCardHeader = ({ data, title }: PackCardHeaderProps) => {
   const { isDark } = useTheme();
   const router = useRouter();
 
-  const handleDelete = () => {
-    handleDeletePack();
-    setIsOpen(false);
-  };
-  const handleSavePack = () => {
-    const packDetails = {
-      id: data.id,
-      name: data.name,
-      is_public: data.is_public,
-    };
-    setIsOpen(false);
-    editPack(packDetails);
-  };
-
-  const menuItems: MenuItems[] = [
-    { label: 'Edit', onSelect: handleEdit },
-    { label: 'Save', onSelect: handleSavePack },
-    { label: 'Delete', onSelect: handleDelete },
+  const optionValues: optionValues[] = [
+    { label: 'Edit', value: 'Edit' },
+    { label: 'Save', value: 'Save' },
+    { label: 'Delete', value: 'Delete' },
   ];
 
   return (
     <>
       <CustomCardHeader
+        link={''}
         data={data}
         title={
           <RStack
@@ -115,7 +99,7 @@ export const PackCardHeader = ({ data, title }: PackCardHeaderProps) => {
             >
               <DropdownComponent
                 value={null}
-                data={menuItems}
+                data={optionValues}
                 onValueChange={(value) => handleActionsOpenChange(value)}
                 placeholder={
                   <RIconButton
@@ -134,4 +118,4 @@ export const PackCardHeader = ({ data, title }: PackCardHeaderProps) => {
       />
     </>
   );
-};
+};
\ No newline at end of file
diff --git a/packages/app/components/chat/index.tsx b/packages/app/components/chat/index.tsx
index 022d6ba80..0fc79bf78 100644
--- a/packages/app/components/chat/index.tsx
+++ b/packages/app/components/chat/index.tsx
@@ -347,4 +347,4 @@ const ChatModalTrigger: React.FC<ChatModalTriggerProps> = ({
   );
 };
 
-export default ChatModalTrigger;
+export default ChatModalTrigger;
\ No newline at end of file
diff --git a/packages/app/components/itemtable/itemTable.tsx b/packages/app/components/itemtable/itemTable.tsx
index 141c3dc73..53d456137 100644
--- a/packages/app/components/itemtable/itemTable.tsx
+++ b/packages/app/components/itemtable/itemTable.tsx
@@ -68,6 +68,7 @@ export const ItemsTable = ({
     return filteredItem;
   });
 
+
   return (
     <Layout>
       <ScrollView>
diff --git a/packages/app/hooks/common/useCopyClipboard.ts b/packages/app/hooks/common/useCopyClipboard.ts
index 5173d7a54..46f8e2afa 100644
--- a/packages/app/hooks/common/useCopyClipboard.ts
+++ b/packages/app/hooks/common/useCopyClipboard.ts
@@ -2,7 +2,11 @@ import { useState } from 'react';
 import * as Clipboard from 'expo-clipboard';
 import { Platform } from 'react-native';
 
-export const useCopyClipboard = (link: string) => {
+interface useCopyClipboardProps {
+  link: string | undefined;
+}
+
+export const useCopyClipboard = ({ link }: useCopyClipboardProps) => {
   const [isCopied, setIsCopied] = useState(false);
 
   const handleCopyLink = (overideLink = '') => {
diff --git a/packages/ui/src/Bento/elements/tables/PaginatedSortedTable.tsx b/packages/ui/src/Bento/elements/tables/PaginatedSortedTable.tsx
index 894254825..7b089630f 100644
--- a/packages/ui/src/Bento/elements/tables/PaginatedSortedTable.tsx
+++ b/packages/ui/src/Bento/elements/tables/PaginatedSortedTable.tsx
@@ -28,9 +28,7 @@ interface Item {
   category: Category;
 }
 
-interface GroupedData {
-  [key: string]: Item[];
-}
+type GroupedData = Record<string, Item[]>;
 
 interface PaginatedSortedTableProps {
   groupedData: GroupedData;

From dae17698f6d846b388be253166bce65bf285bb18 Mon Sep 17 00:00:00 2001
From: pinocchio-life-like <icbr19fl@gmail.com>
Date: Fri, 5 Jul 2024 16:27:08 +0300
Subject: [PATCH 152/257] init

---
 server/src/controllers/auth/updatePassword.ts |  4 +-
 .../src/controllers/favorite/addToFavorite.ts |  4 +-
 .../favorite/getFavoritePacksByUser.ts        |  4 +-
 .../controllers/favorite/getUserFavorites.ts  |  4 +-
 server/src/controllers/geoCode/getGeoCode.ts  |  4 +-
 .../src/controllers/getOsm/getDestination.ts  |  4 +-
 server/src/controllers/getOsm/getOsm.ts       |  4 +-
 server/src/controllers/getOsm/getParksOSM.ts  |  4 +-
 .../controllers/getOsm/getPhotonDetails.ts    |  4 +-
 .../controllers/getOsm/getPhotonResults.ts    |  4 +-
 server/src/controllers/getOsm/getTrailsOSM.ts | 14 ++---
 .../controllers/getOsm/postSingleGeoJSON.ts   |  4 +-
 server/src/controllers/getParks/getParks.ts   |  4 +-
 server/src/controllers/getTrail/getTrails.ts  |  4 +-
 .../controllers/item/addGlobalItemToPack.ts   |  4 +-
 server/src/controllers/item/addItem.ts        |  4 +-
 server/src/controllers/item/addItemGlobal.ts  |  4 +-
 .../src/controllers/item/deleteGlobalItem.ts  |  4 +-
 server/src/controllers/item/deleteItem.ts     | 12 +++--
 .../item/editGlobalItemAsDuplicate.ts         |  4 +-
 server/src/controllers/item/editItem.ts       |  4 +-
 server/src/controllers/item/getItemById.ts    |  4 +-
 server/src/controllers/item/getItems.ts       |  4 +-
 .../src/controllers/item/getItemsGlobally.ts  |  4 +-
 .../src/controllers/item/searchItemsByName.ts |  8 +--
 .../src/controllers/openAi/getAIResponse.ts   |  4 +-
 .../controllers/openAi/getAISuggestions.ts    |  4 +-
 server/src/controllers/openAi/getUserChats.ts |  4 +-
 server/src/controllers/pack/addPack.ts        |  4 +-
 server/src/controllers/pack/deletePack.ts     | 14 ++---
 .../controllers/pack/duplicatePublicPack.ts   |  4 +-
 server/src/controllers/pack/editPack.ts       |  4 +-
 server/src/controllers/pack/getPackById.ts    |  4 +-
 server/src/controllers/pack/getPacks.ts       |  4 +-
 server/src/controllers/pack/getPublicPacks.ts |  4 +-
 server/src/controllers/pack/scorePack.ts      | 14 ++---
 .../src/controllers/template/addTemplate.ts   |  4 +-
 .../controllers/template/deleteTemplate.ts    |  4 +-
 .../src/controllers/template/editTemplate.ts  |  4 +-
 .../controllers/template/getTemplateById.ts   |  4 +-
 .../src/controllers/template/getTemplates.ts  |  4 +-
 server/src/controllers/trip/addTrip.ts        |  4 +-
 server/src/controllers/trip/deleteTrip.ts     | 16 +++---
 server/src/controllers/trip/editTrip.ts       |  4 +-
 server/src/controllers/trip/getPublicTrips.ts |  4 +-
 server/src/controllers/trip/getTrip.ts        |  4 +-
 server/src/controllers/trip/getTripById.ts    |  4 +-
 server/src/controllers/user/deleteUser.ts     | 16 +++---
 server/src/controllers/user/editUser.ts       |  4 +-
 server/src/controllers/user/getUserById.ts    |  4 +-
 server/src/controllers/user/getUsers.ts       |  4 +-
 server/src/index.ts                           |  2 +-
 server/src/routes/trpcRouter.ts               | 52 +++++++++----------
 .../src/services/pack/getPackByIdService.ts   | 23 ++++++--
 54 files changed, 188 insertions(+), 159 deletions(-)

diff --git a/server/src/controllers/auth/updatePassword.ts b/server/src/controllers/auth/updatePassword.ts
index 5e7e150f6..4ede1d868 100644
--- a/server/src/controllers/auth/updatePassword.ts
+++ b/server/src/controllers/auth/updatePassword.ts
@@ -1,4 +1,4 @@
-import { publicProcedure } from '../../trpc';
+import { publicProcedure, protectedProcedure } from '../../trpc';
 import { findUserAndUpdate } from '../../services/user/user.service';
 import * as validator from '@packrat/validations';
 import { hashPassword } from '../../utils/user';
@@ -43,7 +43,7 @@ import { hashPassword } from '../../utils/user';
 // };
 
 export function updatePasswordRoute() {
-  return publicProcedure
+  return protectedProcedure
     .input(validator.updatePassword)
     .mutation(async (opts) => {
       const { email, password } = opts.input;
diff --git a/server/src/controllers/favorite/addToFavorite.ts b/server/src/controllers/favorite/addToFavorite.ts
index 8b4723d04..6bada1314 100644
--- a/server/src/controllers/favorite/addToFavorite.ts
+++ b/server/src/controllers/favorite/addToFavorite.ts
@@ -1,5 +1,5 @@
 import { addToFavoriteService } from '../../services/favorite/favorite.service';
-import { publicProcedure } from '../../trpc';
+import { publicProcedure, protectedProcedure } from '../../trpc';
 import * as validator from '@packrat/validations';
 
 // import { prisma } from '../../prisma';
@@ -29,7 +29,7 @@ import * as validator from '@packrat/validations';
 // };
 
 export function addToFavoriteRoute() {
-  return publicProcedure
+  return protectedProcedure
     .input(validator.addToFavorite)
     .mutation(async (opts) => {
       const { packId, userId } = opts.input;
diff --git a/server/src/controllers/favorite/getFavoritePacksByUser.ts b/server/src/controllers/favorite/getFavoritePacksByUser.ts
index f50ce1848..d35b53ec8 100644
--- a/server/src/controllers/favorite/getFavoritePacksByUser.ts
+++ b/server/src/controllers/favorite/getFavoritePacksByUser.ts
@@ -1,6 +1,6 @@
 import { z } from 'zod';
 import { getFavoritePacksByUserService } from '../../services/favorite/favorite.service';
-import { publicProcedure } from '../../trpc';
+import { publicProcedure, protectedProcedure } from '../../trpc';
 
 // /**
 //  * Retrieves favorite packs for a user.
@@ -17,7 +17,7 @@ import { publicProcedure } from '../../trpc';
 // };
 
 export function getFavoritePacksByUserRoute() {
-  return publicProcedure
+  return protectedProcedure
     .input(z.object({ userId: z.string() }))
     .query(async (opts) => {
       const { userId } = opts.input;
diff --git a/server/src/controllers/favorite/getUserFavorites.ts b/server/src/controllers/favorite/getUserFavorites.ts
index eb12d8112..b5addfc5e 100644
--- a/server/src/controllers/favorite/getUserFavorites.ts
+++ b/server/src/controllers/favorite/getUserFavorites.ts
@@ -1,5 +1,5 @@
 import { z } from 'zod';
-import { publicProcedure } from '../../trpc';
+import { publicProcedure, protectedProcedure } from '../../trpc';
 import { getUserFavoritesService } from '../../services/favorite/favorite.service';
 
 // import { prisma } from '../../prisma';
@@ -18,7 +18,7 @@ import { getUserFavoritesService } from '../../services/favorite/favorite.servic
 // };
 
 export function getUserFavoritesRoute() {
-  return publicProcedure
+  return protectedProcedure
     .input(z.object({ userId: z.string() }))
     .query(async (opts) => {
       const { userId } = opts.input;
diff --git a/server/src/controllers/geoCode/getGeoCode.ts b/server/src/controllers/geoCode/getGeoCode.ts
index d17960292..896fbe67a 100644
--- a/server/src/controllers/geoCode/getGeoCode.ts
+++ b/server/src/controllers/geoCode/getGeoCode.ts
@@ -1,4 +1,4 @@
-import { publicProcedure } from '../../trpc';
+import { publicProcedure, protectedProcedure } from '../../trpc';
 import { ErrorFetchingGeoCodeError } from '../../helpers/errors';
 import { responseHandler } from '../../helpers/responseHandler';
 import { oneEntity } from '../../utils/oneEntity';
@@ -24,7 +24,7 @@ import { geoCodeService } from '../../services/geocode/geoCodeService';
 // };
 
 export function getGeoCodeRoute() {
-  return publicProcedure.query(async (opts) => {
+  return protectedProcedure.query(async (opts) => {
     if (!opts.input) {
       throw new Error('Input is missing');
     }
diff --git a/server/src/controllers/getOsm/getDestination.ts b/server/src/controllers/getOsm/getDestination.ts
index d0c113691..5b7e744b0 100644
--- a/server/src/controllers/getOsm/getDestination.ts
+++ b/server/src/controllers/getOsm/getDestination.ts
@@ -1,4 +1,4 @@
-import { publicProcedure } from '../../trpc';
+import { publicProcedure, protectedProcedure } from '../../trpc';
 import { NoDestinationFoundWithThatIDError } from '../../helpers/errors';
 import { responseHandler } from '../../helpers/responseHandler';
 import { getDestinationService } from '../../services/osm/osm.service';
@@ -24,7 +24,7 @@ import { z } from 'zod';
 // };
 
 export function getDestinationRoute() {
-  return publicProcedure
+  return protectedProcedure
     .input(z.object({ id: z.string() }))
     .query(async (opts) => {
       const { id } = opts.input;
diff --git a/server/src/controllers/getOsm/getOsm.ts b/server/src/controllers/getOsm/getOsm.ts
index f0221d2d4..9c3f2252d 100644
--- a/server/src/controllers/getOsm/getOsm.ts
+++ b/server/src/controllers/getOsm/getOsm.ts
@@ -5,7 +5,7 @@ import {
   InvalidRequestParamsError,
 } from '../../helpers/errors';
 import { responseHandler } from '../../helpers/responseHandler';
-import { publicProcedure } from '../../trpc';
+import { publicProcedure, protectedProcedure } from '../../trpc';
 import * as validators from '@packrat/validations';
 import { getOsmService } from '../../services/osm/getOsmService';
 import { z } from 'zod';
@@ -29,7 +29,7 @@ import { z } from 'zod';
 // };
 
 export function getOsmRoute() {
-  return publicProcedure
+  return protectedProcedure
     .input(
       z.object({
         activityType: z.string(),
diff --git a/server/src/controllers/getOsm/getParksOSM.ts b/server/src/controllers/getOsm/getParksOSM.ts
index 2cdb19b3b..f5f692913 100644
--- a/server/src/controllers/getOsm/getParksOSM.ts
+++ b/server/src/controllers/getOsm/getParksOSM.ts
@@ -4,7 +4,7 @@ import {
   InvalidRequestParamsError,
 } from '../../helpers/errors';
 import { responseHandler } from '../../helpers/responseHandler';
-import { publicProcedure } from '../../trpc';
+import { publicProcedure, protectedProcedure } from '../../trpc';
 import { z } from 'zod';
 // import * as validators from '@packrat/validations';
 import * as validator from '@packrat/validations';
@@ -32,7 +32,7 @@ import * as validator from '@packrat/validations';
 // };
 
 export function getParksOSMRoute() {
-  return publicProcedure.input(validator.getParksOSM).query(async (opts) => {
+  return protectedProcedure.input(validator.getParksOSM).query(async (opts) => {
     const { lat = 45.5231, lon = -122.6765, radius = 50000 } = opts.input;
     const { env }: any = opts.ctx;
     return await getParksOSMService(lat, lon, radius, env.OSM_URI);
diff --git a/server/src/controllers/getOsm/getPhotonDetails.ts b/server/src/controllers/getOsm/getPhotonDetails.ts
index 8105437a1..409cb5d44 100644
--- a/server/src/controllers/getOsm/getPhotonDetails.ts
+++ b/server/src/controllers/getOsm/getPhotonDetails.ts
@@ -4,7 +4,7 @@ import {
 } from '../../helpers/errors';
 import { responseHandler } from '../../helpers/responseHandler';
 import { z } from 'zod';
-import { publicProcedure } from '../../trpc';
+import { publicProcedure, protectedProcedure } from '../../trpc';
 import { getPhotonDetailsService } from '../../services/osm/getPhotonDetailsService';
 
 /**
@@ -28,7 +28,7 @@ import { getPhotonDetailsService } from '../../services/osm/getPhotonDetailsServ
 // };
 
 export function getPhotonDetailsRoute() {
-  return publicProcedure
+  return protectedProcedure
     .input(
       z.object({ id: z.union([z.string(), z.number()]), type: z.string() }),
     )
diff --git a/server/src/controllers/getOsm/getPhotonResults.ts b/server/src/controllers/getOsm/getPhotonResults.ts
index 812d7e72a..a4baece7b 100644
--- a/server/src/controllers/getOsm/getPhotonResults.ts
+++ b/server/src/controllers/getOsm/getPhotonResults.ts
@@ -4,7 +4,7 @@ import {
   RetrievingPhotonDetailsError,
 } from '../../helpers/errors';
 import { responseHandler } from '../../helpers/responseHandler';
-import { publicProcedure } from '../../trpc';
+import { publicProcedure, protectedProcedure } from '../../trpc';
 import { z } from 'zod';
 // import * as validators from '@packrat/validations';
 import * as validator from '@packrat/validations';
@@ -30,7 +30,7 @@ import * as validator from '@packrat/validations';
 // };
 
 export function getPhotonResultsRoute() {
-  return publicProcedure
+  return protectedProcedure
     .input(validator.getPhotonResults)
     .query(async (opts) => {
       const response = await getPhotonResultsService(opts.input.searchString);
diff --git a/server/src/controllers/getOsm/getTrailsOSM.ts b/server/src/controllers/getOsm/getTrailsOSM.ts
index 3a7e44b2a..df4f1ec0a 100644
--- a/server/src/controllers/getOsm/getTrailsOSM.ts
+++ b/server/src/controllers/getOsm/getTrailsOSM.ts
@@ -4,7 +4,7 @@ import {
   RetrievingTrailsOSMError,
 } from '../../helpers/errors';
 import { responseHandler } from '../../helpers/responseHandler';
-import { publicProcedure } from '../../trpc';
+import { publicProcedure, protectedProcedure } from '../../trpc';
 import * as z from 'zod';
 // import * as validators from '@packrat/validations';
 import * as validator from '@packrat/validations';
@@ -31,9 +31,11 @@ import * as validator from '@packrat/validations';
 // };
 
 export function getTrailsOSMRoute() {
-  return publicProcedure.input(validator.getTrailsOSM).query(async (opts) => {
-    const { lat = 45.5231, lon = -122.6765, radius = 50000 } = opts.input;
-    const { env }: any = opts.ctx;
-    return await getTrailsOsmService(env.OSM_URI, lat, lon, radius);
-  });
+  return protectedProcedure
+    .input(validator.getTrailsOSM)
+    .query(async (opts) => {
+      const { lat = 45.5231, lon = -122.6765, radius = 50000 } = opts.input;
+      const { env }: any = opts.ctx;
+      return await getTrailsOsmService(env.OSM_URI, lat, lon, radius);
+    });
 }
diff --git a/server/src/controllers/getOsm/postSingleGeoJSON.ts b/server/src/controllers/getOsm/postSingleGeoJSON.ts
index 9f986dfbb..0104bbe77 100644
--- a/server/src/controllers/getOsm/postSingleGeoJSON.ts
+++ b/server/src/controllers/getOsm/postSingleGeoJSON.ts
@@ -1,4 +1,4 @@
-import { publicProcedure } from '../../trpc';
+import { publicProcedure, protectedProcedure } from '../../trpc';
 import { responseHandler } from '../../helpers/responseHandler';
 import { postSingleGeoJSONService } from '../../services/osm/osm.service';
 import { z } from 'zod';
@@ -19,7 +19,7 @@ import { z } from 'zod';
 // };
 
 export function postSingleGeoJSONRoute() {
-  return publicProcedure
+  return protectedProcedure
     .input(z.object({ geojson: z.any() }))
     .mutation(async (opts) => {
       const { geojson } = opts.input;
diff --git a/server/src/controllers/getParks/getParks.ts b/server/src/controllers/getParks/getParks.ts
index ff8909479..f71ca7258 100644
--- a/server/src/controllers/getParks/getParks.ts
+++ b/server/src/controllers/getParks/getParks.ts
@@ -1,4 +1,4 @@
-import { publicProcedure } from '../../trpc';
+import { publicProcedure, protectedProcedure } from '../../trpc';
 import { responseHandler } from '../../helpers/responseHandler';
 import * as validators from '@packrat/validations';
 import { getParksService } from '../../services/parks/getParksService';
@@ -16,7 +16,7 @@ import { getParksService } from '../../services/parks/getParksService';
 // };
 
 export function getParksRoute() {
-  return publicProcedure.input(validators.getParks).query(async (opts) => {
+  return protectedProcedure.input(validators.getParks).query(async (opts) => {
     const { abbrState } = opts.input;
     const { env }: any = opts.ctx;
     return await getParksService({
diff --git a/server/src/controllers/getTrail/getTrails.ts b/server/src/controllers/getTrail/getTrails.ts
index 563e9e977..c1a68da61 100644
--- a/server/src/controllers/getTrail/getTrails.ts
+++ b/server/src/controllers/getTrail/getTrails.ts
@@ -1,4 +1,4 @@
-import { publicProcedure } from '../../trpc';
+import { publicProcedure, protectedProcedure } from '../../trpc';
 import { responseHandler } from '../../helpers/responseHandler';
 import * as validators from '@packrat/validations';
 import { getTrailsService } from '../../services/trails/getTrailsService';
@@ -34,7 +34,7 @@ import { z } from 'zod';
 // };
 
 export function getTrailsRoute() {
-  return publicProcedure
+  return protectedProcedure
     .input(
       z.object({
         administrative_area_level_1: z.string(),
diff --git a/server/src/controllers/item/addGlobalItemToPack.ts b/server/src/controllers/item/addGlobalItemToPack.ts
index 6a6a8b0ec..dc338a764 100644
--- a/server/src/controllers/item/addGlobalItemToPack.ts
+++ b/server/src/controllers/item/addGlobalItemToPack.ts
@@ -1,4 +1,4 @@
-import { publicProcedure } from '../../trpc';
+import { publicProcedure, protectedProcedure } from '../../trpc';
 import { addGlobalItemToPackService } from '../../services/item/item.service';
 import { z } from 'zod';
 
@@ -23,7 +23,7 @@ import { z } from 'zod';
 // };
 
 export function addGlobalItemToPackRoute() {
-  return publicProcedure
+  return protectedProcedure
     .input(
       z.object({
         packId: z.string(),
diff --git a/server/src/controllers/item/addItem.ts b/server/src/controllers/item/addItem.ts
index edaea5533..966c114b3 100644
--- a/server/src/controllers/item/addItem.ts
+++ b/server/src/controllers/item/addItem.ts
@@ -1,4 +1,4 @@
-import { publicProcedure } from '../../trpc';
+import { publicProcedure, protectedProcedure } from '../../trpc';
 import { addItemService } from '../../services/item/item.service';
 import * as validator from '@packrat/validations';
 
@@ -30,7 +30,7 @@ import * as validator from '@packrat/validations';
 // };
 
 export function addItemRoute() {
-  return publicProcedure.input(validator.addItem).mutation(async (opts) => {
+  return protectedProcedure.input(validator.addItem).mutation(async (opts) => {
     const { name, weight, quantity, unit, packId, type, ownerId } = opts.input;
 
     if (type !== 'Food' && type !== 'Water' && type !== 'Essentials') {
diff --git a/server/src/controllers/item/addItemGlobal.ts b/server/src/controllers/item/addItemGlobal.ts
index fc6a994de..04ebbb569 100644
--- a/server/src/controllers/item/addItemGlobal.ts
+++ b/server/src/controllers/item/addItemGlobal.ts
@@ -1,5 +1,5 @@
 import { addItemGlobalService } from '../../services/item/item.service';
-import { publicProcedure } from '../../trpc';
+import { publicProcedure, protectedProcedure } from '../../trpc';
 import * as validator from '@packrat/validations';
 
 /**
@@ -29,7 +29,7 @@ import * as validator from '@packrat/validations';
 // };
 
 export function addItemGlobalRoute() {
-  return publicProcedure
+  return protectedProcedure
     .input(validator.addItemGlobal)
     .mutation(async (opts) => {
       const { name, weight, quantity, unit, type, ownerId } = opts.input;
diff --git a/server/src/controllers/item/deleteGlobalItem.ts b/server/src/controllers/item/deleteGlobalItem.ts
index 8b7754246..929d9ae00 100644
--- a/server/src/controllers/item/deleteGlobalItem.ts
+++ b/server/src/controllers/item/deleteGlobalItem.ts
@@ -1,4 +1,4 @@
-import { publicProcedure } from '../../trpc';
+import { publicProcedure, protectedProcedure } from '../../trpc';
 import { deleteGlobalItemService } from '../../services/item/item.service';
 import { z } from 'zod';
 
@@ -22,7 +22,7 @@ import { z } from 'zod';
 // };
 
 export function deleteGlobalItemRoute() {
-  return publicProcedure
+  return protectedProcedure
     .input(
       z.object({
         itemId: z.string(),
diff --git a/server/src/controllers/item/deleteItem.ts b/server/src/controllers/item/deleteItem.ts
index 6f627679d..fac345058 100644
--- a/server/src/controllers/item/deleteItem.ts
+++ b/server/src/controllers/item/deleteItem.ts
@@ -1,6 +1,6 @@
 import { deleteItemService } from '../../services/item/item.service';
 import * as validator from '@packrat/validations';
-import { publicProcedure } from '../../trpc';
+import { publicProcedure, protectedProcedure } from '../../trpc';
 
 /**
  * Deletes an item from the database.
@@ -24,8 +24,10 @@ import { publicProcedure } from '../../trpc';
 // };
 
 export function deleteItemRoute() {
-  return publicProcedure.input(validator.deleteItem).mutation(async (opts) => {
-    const { itemId, packId } = opts.input;
-    return await deleteItemService(itemId, packId);
-  });
+  return protectedProcedure
+    .input(validator.deleteItem)
+    .mutation(async (opts) => {
+      const { itemId, packId } = opts.input;
+      return await deleteItemService(itemId, packId);
+    });
 }
diff --git a/server/src/controllers/item/editGlobalItemAsDuplicate.ts b/server/src/controllers/item/editGlobalItemAsDuplicate.ts
index c17ed632a..20185a6a6 100644
--- a/server/src/controllers/item/editGlobalItemAsDuplicate.ts
+++ b/server/src/controllers/item/editGlobalItemAsDuplicate.ts
@@ -1,6 +1,6 @@
 import { editGlobalItemAsDuplicateService } from '../../services/item/item.service';
 import { z } from 'zod';
-import { publicProcedure } from '../../trpc';
+import { publicProcedure, protectedProcedure } from '../../trpc';
 
 /**
  * Edit a global item by duplicating it with new changes.
@@ -40,7 +40,7 @@ import { publicProcedure } from '../../trpc';
 // };
 
 export function editGlobalItemAsDuplicateRoute() {
-  return publicProcedure
+  return protectedProcedure
     .input(
       z.object({
         itemId: z.string(),
diff --git a/server/src/controllers/item/editItem.ts b/server/src/controllers/item/editItem.ts
index 684d2d8cc..29d954d23 100644
--- a/server/src/controllers/item/editItem.ts
+++ b/server/src/controllers/item/editItem.ts
@@ -1,4 +1,4 @@
-import { publicProcedure } from '../../trpc';
+import { publicProcedure, protectedProcedure } from '../../trpc';
 import { editItemService } from '../../services/item/item.service';
 import * as validator from '@packrat/validations';
 
@@ -23,7 +23,7 @@ import * as validator from '@packrat/validations';
 // };
 
 export function editItemRoute() {
-  return publicProcedure.input(validator.editItem).mutation(async (opts) => {
+  return protectedProcedure.input(validator.editItem).mutation(async (opts) => {
     const { id, name, weight, unit, quantity, type } = opts.input;
 
     if (type !== 'Food' && type !== 'Water' && type !== 'Essentials') {
diff --git a/server/src/controllers/item/getItemById.ts b/server/src/controllers/item/getItemById.ts
index aa691d261..572959546 100644
--- a/server/src/controllers/item/getItemById.ts
+++ b/server/src/controllers/item/getItemById.ts
@@ -1,4 +1,4 @@
-import { publicProcedure } from '../../trpc';
+import { publicProcedure, protectedProcedure } from '../../trpc';
 import { getItemByIdService } from '../../services/item/item.service';
 import * as validator from '@packrat/validations';
 
@@ -23,7 +23,7 @@ import * as validator from '@packrat/validations';
 // };
 
 export function getItemByIdRoute() {
-  return publicProcedure.input(validator.getItemById).query(async (opts) => {
+  return protectedProcedure.input(validator.getItemById).query(async (opts) => {
     const { id } = opts.input;
     const item = await getItemByIdService(id);
     return item;
diff --git a/server/src/controllers/item/getItems.ts b/server/src/controllers/item/getItems.ts
index 55f88b76d..1dfbd1eab 100644
--- a/server/src/controllers/item/getItems.ts
+++ b/server/src/controllers/item/getItems.ts
@@ -1,4 +1,4 @@
-import { publicProcedure } from '../../trpc';
+import { publicProcedure, protectedProcedure } from '../../trpc';
 import { getItemsService } from '../../services/item/item.service';
 import * as validator from '@packrat/validations';
 
@@ -23,7 +23,7 @@ import * as validator from '@packrat/validations';
 // };
 
 export function getItemsRoute() {
-  return publicProcedure.input(validator.getItems).query(async (opts) => {
+  return protectedProcedure.input(validator.getItems).query(async (opts) => {
     const { packId } = opts.input;
     const items = await getItemsService(packId);
     return items;
diff --git a/server/src/controllers/item/getItemsGlobally.ts b/server/src/controllers/item/getItemsGlobally.ts
index ac8f02deb..259851e11 100644
--- a/server/src/controllers/item/getItemsGlobally.ts
+++ b/server/src/controllers/item/getItemsGlobally.ts
@@ -1,4 +1,4 @@
-import { publicProcedure } from '../../trpc';
+import { publicProcedure, protectedProcedure } from '../../trpc';
 import { getItemsGloballyService } from '../../services/item/item.service';
 import { z } from 'zod';
 
@@ -10,7 +10,7 @@ import { z } from 'zod';
  */
 
 export function getItemsGloballyRoute() {
-  return publicProcedure
+  return protectedProcedure
     .input(
       z.object({
         limit: z.number(),
diff --git a/server/src/controllers/item/searchItemsByName.ts b/server/src/controllers/item/searchItemsByName.ts
index 706b6ed45..2aa5beeed 100644
--- a/server/src/controllers/item/searchItemsByName.ts
+++ b/server/src/controllers/item/searchItemsByName.ts
@@ -1,4 +1,4 @@
-import { publicProcedure } from '../../trpc';
+import { publicProcedure, protectedProcedure } from '../../trpc';
 import { searchItemsByNameService } from '../../services/item/item.service';
 import { z } from 'zod';
 
@@ -10,8 +10,8 @@ import { z } from 'zod';
  * @param {Object} res - The response object.
  * @return {Array} An array of items matching the search criteria.
  */
-const JoiObjectId = (message: any = 'valid id'): z.ZodString =>
-  z.string().regex(/^[0-9a-fA-F]{24}$/, { message });
+// const JoiObjectId = (message: any = 'valid id'): z.ZodString =>
+//   z.string().regex(/^[0-9a-fA-F]{24}$/, { message });
 
 // export const searchItemsByName = async (req, res, next) => {
 //   try {
@@ -26,7 +26,7 @@ const JoiObjectId = (message: any = 'valid id'): z.ZodString =>
 // };
 
 export function searchItemsByNameRoute() {
-  return publicProcedure
+  return protectedProcedure
     .input(z.object({ name: z.string() }))
     .query(async (opts) => {
       const { name } = opts.input;
diff --git a/server/src/controllers/openAi/getAIResponse.ts b/server/src/controllers/openAi/getAIResponse.ts
index d9355f452..c0c565c8e 100644
--- a/server/src/controllers/openAi/getAIResponse.ts
+++ b/server/src/controllers/openAi/getAIResponse.ts
@@ -1,5 +1,5 @@
 import { getAIResponseService } from '../../services/openAi/openAi.service';
-import { publicProcedure } from '../../trpc';
+import { publicProcedure, protectedProcedure } from '../../trpc';
 import { z } from 'zod';
 
 /**
@@ -10,7 +10,7 @@ import { z } from 'zod';
  */
 
 export function getAIResponseRoute() {
-  return publicProcedure
+  return protectedProcedure
     .input(
       z.object({
         userId: z.string(),
diff --git a/server/src/controllers/openAi/getAISuggestions.ts b/server/src/controllers/openAi/getAISuggestions.ts
index 8ea13f119..e7566753c 100644
--- a/server/src/controllers/openAi/getAISuggestions.ts
+++ b/server/src/controllers/openAi/getAISuggestions.ts
@@ -1,5 +1,5 @@
 import { getAISuggestionService } from '../../services/openAi/openAi.service';
-import { publicProcedure } from '../../trpc';
+import { publicProcedure, protectedProcedure } from '../../trpc';
 import { z } from 'zod';
 
 /**
@@ -10,7 +10,7 @@ import { z } from 'zod';
  */
 
 export function getAISuggestionsRoute() {
-  return publicProcedure
+  return protectedProcedure
     .input(
       z.object({
         userId: z.string(),
diff --git a/server/src/controllers/openAi/getUserChats.ts b/server/src/controllers/openAi/getUserChats.ts
index dff583645..ae25769b7 100644
--- a/server/src/controllers/openAi/getUserChats.ts
+++ b/server/src/controllers/openAi/getUserChats.ts
@@ -1,4 +1,4 @@
-import { publicProcedure } from '../../trpc';
+import { publicProcedure, protectedProcedure } from '../../trpc';
 import { FailedToRetrieveUserChats } from '../../helpers/errors';
 import { responseHandler } from '../../helpers/responseHandler';
 import { getUserChatsService } from '../../services/openAi/openAi.service';
@@ -24,7 +24,7 @@ import { z } from 'zod';
 // };
 
 export function getUserChatsRoute() {
-  return publicProcedure
+  return protectedProcedure
     .input(z.object({ userId: z.string(), itemTypeId: z.string() }))
     .query(async (opts) => {
       const { userId, itemTypeId } = opts.input;
diff --git a/server/src/controllers/pack/addPack.ts b/server/src/controllers/pack/addPack.ts
index b427ef51a..51f6cd877 100644
--- a/server/src/controllers/pack/addPack.ts
+++ b/server/src/controllers/pack/addPack.ts
@@ -1,6 +1,6 @@
 import { addPackService } from '../../services/pack/pack.service';
 import * as validator from '@packrat/validations';
-import { publicProcedure } from '../../trpc';
+import { publicProcedure, protectedProcedure } from '../../trpc';
 
 /**
  * Adds a new pack to the database.
@@ -16,7 +16,7 @@ import { publicProcedure } from '../../trpc';
 // };
 
 export function addPackRoute() {
-  return publicProcedure.input(validator.addPack).mutation(async (opts) => {
+  return protectedProcedure.input(validator.addPack).mutation(async (opts) => {
     const { name, owner_id, is_public } = opts.input;
     const pack = await addPackService(name, owner_id, is_public);
     return pack;
diff --git a/server/src/controllers/pack/deletePack.ts b/server/src/controllers/pack/deletePack.ts
index aabe40bcc..b99dea8ba 100644
--- a/server/src/controllers/pack/deletePack.ts
+++ b/server/src/controllers/pack/deletePack.ts
@@ -1,6 +1,6 @@
 import { deletePackService } from '../../services/pack/pack.service';
 import * as validator from '@packrat/validations';
-import { publicProcedure } from '../../trpc';
+import { publicProcedure, protectedProcedure } from '../../trpc';
 /**
  * Deletes a pack.
  * @param {Object} req - The request object.
@@ -20,9 +20,11 @@ import { publicProcedure } from '../../trpc';
 // };
 
 export function deletePackRoute() {
-  return publicProcedure.input(validator.deletePack).mutation(async (opts) => {
-    const { packId } = opts.input;
-    await deletePackService(packId);
-    return { msg: 'pack was deleted successfully' };
-  });
+  return protectedProcedure
+    .input(validator.deletePack)
+    .mutation(async (opts) => {
+      const { packId } = opts.input;
+      await deletePackService(packId);
+      return { msg: 'pack was deleted successfully' };
+    });
 }
diff --git a/server/src/controllers/pack/duplicatePublicPack.ts b/server/src/controllers/pack/duplicatePublicPack.ts
index 975884c45..81049b6b0 100644
--- a/server/src/controllers/pack/duplicatePublicPack.ts
+++ b/server/src/controllers/pack/duplicatePublicPack.ts
@@ -1,6 +1,6 @@
 import { duplicatePublicPackService } from '../../services/pack/pack.service';
 import * as validator from '@packrat/validations';
-import { publicProcedure } from '../../trpc';
+import { publicProcedure, protectedProcedure } from '../../trpc';
 
 /**
  * Duplicates a public pack.
@@ -24,7 +24,7 @@ import { publicProcedure } from '../../trpc';
 // };
 
 export function duplicatePublicPackRoute() {
-  return publicProcedure
+  return protectedProcedure
     .input(validator.duplicatePublicPack)
     .mutation(async (opts) => {
       const { packId, ownerId, items } = opts.input;
diff --git a/server/src/controllers/pack/editPack.ts b/server/src/controllers/pack/editPack.ts
index d3278ab8c..7fbece236 100644
--- a/server/src/controllers/pack/editPack.ts
+++ b/server/src/controllers/pack/editPack.ts
@@ -1,4 +1,4 @@
-import { publicProcedure } from '../../trpc';
+import { publicProcedure, protectedProcedure } from '../../trpc';
 import { UnableToEditPackError } from '../../helpers/errors';
 import { responseHandler } from '../../helpers/responseHandler';
 import { editPackService } from '../../services/pack/pack.service';
@@ -25,7 +25,7 @@ import * as validator from '@packrat/validations';
 // };
 
 export function editPackRoute() {
-  return publicProcedure.input(validator.editPack).mutation(async (opts) => {
+  return protectedProcedure.input(validator.editPack).mutation(async (opts) => {
     const packData = opts.input;
     const pack = await editPackService(packData);
     return pack;
diff --git a/server/src/controllers/pack/getPackById.ts b/server/src/controllers/pack/getPackById.ts
index 9c05af110..a2b725863 100644
--- a/server/src/controllers/pack/getPackById.ts
+++ b/server/src/controllers/pack/getPackById.ts
@@ -1,4 +1,4 @@
-import { publicProcedure } from '../../trpc';
+import { publicProcedure, protectedProcedure } from '../../trpc';
 import { getPackByIdService } from '../../services/pack/pack.service';
 import * as validator from '@packrat/validations';
 
@@ -22,7 +22,7 @@ import * as validator from '@packrat/validations';
 // };
 
 export function getPackByIdRoute() {
-  return publicProcedure.input(validator.getPackById).query(async (opts) => {
+  return protectedProcedure.input(validator.getPackById).query(async (opts) => {
     const { packId } = opts.input;
     const pack = await getPackByIdService(packId);
     return pack;
diff --git a/server/src/controllers/pack/getPacks.ts b/server/src/controllers/pack/getPacks.ts
index f2f81120f..f9a81757f 100644
--- a/server/src/controllers/pack/getPacks.ts
+++ b/server/src/controllers/pack/getPacks.ts
@@ -1,5 +1,5 @@
 import { getPacksService } from '../../services/pack/pack.service';
-import { publicProcedure } from '../../trpc';
+import { publicProcedure, protectedProcedure } from '../../trpc';
 import * as validator from '@packrat/validations';
 
 /**
@@ -25,7 +25,7 @@ import * as validator from '@packrat/validations';
 // };
 
 export function getPacksRoute() {
-  return publicProcedure.input(validator.getPacks).query(async (opts) => {
+  return protectedProcedure.input(validator.getPacks).query(async (opts) => {
     const { ownerId, queryBy } = opts.input;
     const packs = await getPacksService(ownerId, queryBy);
     return {
diff --git a/server/src/controllers/pack/getPublicPacks.ts b/server/src/controllers/pack/getPublicPacks.ts
index df304ef44..9d935ef59 100644
--- a/server/src/controllers/pack/getPublicPacks.ts
+++ b/server/src/controllers/pack/getPublicPacks.ts
@@ -1,4 +1,4 @@
-import { publicProcedure } from '../../trpc';
+import { publicProcedure, protectedProcedure } from '../../trpc';
 import { getPublicPacksService } from '../../services/pack/pack.service';
 import { z } from 'zod';
 
@@ -22,7 +22,7 @@ import { z } from 'zod';
 // };
 
 export function getPublicPacksRoute() {
-  return publicProcedure
+  return protectedProcedure
     .input(z.object({ queryBy: z.string() }))
     .query(async (opts) => {
       const { queryBy } = opts.input;
diff --git a/server/src/controllers/pack/scorePack.ts b/server/src/controllers/pack/scorePack.ts
index daa700c77..2f2da42e3 100644
--- a/server/src/controllers/pack/scorePack.ts
+++ b/server/src/controllers/pack/scorePack.ts
@@ -1,4 +1,4 @@
-import { publicProcedure } from '../../trpc';
+import { publicProcedure, protectedProcedure } from '../../trpc';
 import { scorePackService } from '../../services/pack/pack.service';
 import * as validator from '@packrat/validations';
 
@@ -23,9 +23,11 @@ import * as validator from '@packrat/validations';
 // };
 
 export function scorePackRoute() {
-  return publicProcedure.input(validator.getPackById).mutation(async (opts) => {
-    const { packId } = opts.input;
-    const pack = await scorePackService(packId);
-    return pack;
-  });
+  return protectedProcedure
+    .input(validator.getPackById)
+    .mutation(async (opts) => {
+      const { packId } = opts.input;
+      const pack = await scorePackService(packId);
+      return pack;
+    });
 }
diff --git a/server/src/controllers/template/addTemplate.ts b/server/src/controllers/template/addTemplate.ts
index c338d37a9..aeeffab3d 100644
--- a/server/src/controllers/template/addTemplate.ts
+++ b/server/src/controllers/template/addTemplate.ts
@@ -1,4 +1,4 @@
-import { publicProcedure } from '../../trpc';
+import { publicProcedure, protectedProcedure } from '../../trpc';
 import { UserNotFoundError } from '../../helpers/errors';
 import { addTemplateService } from '../../services/template/template.service';
 import { z } from 'zod';
@@ -31,7 +31,7 @@ import { User } from '../../drizzle/methods/User';
 // };
 
 export function addTemplateRoute() {
-  return publicProcedure
+  return protectedProcedure
     .input(
       z.object({
         type: z.any(),
diff --git a/server/src/controllers/template/deleteTemplate.ts b/server/src/controllers/template/deleteTemplate.ts
index 6873c0a45..b2193155c 100644
--- a/server/src/controllers/template/deleteTemplate.ts
+++ b/server/src/controllers/template/deleteTemplate.ts
@@ -1,4 +1,4 @@
-import { publicProcedure } from '../../trpc';
+import { publicProcedure, protectedProcedure } from '../../trpc';
 import { TemplateNotFoundError } from '../../helpers/errors';
 import { z } from 'zod';
 import { Template } from '../../drizzle/methods/template';
@@ -33,7 +33,7 @@ import { Template } from '../../drizzle/methods/template';
 
 export function deleteTemplateRoute() {
   const templateClass = new Template();
-  return publicProcedure
+  return protectedProcedure
     .input(z.object({ templateId: z.string() }))
     .mutation(async (opts) => {
       const { templateId } = opts.input;
diff --git a/server/src/controllers/template/editTemplate.ts b/server/src/controllers/template/editTemplate.ts
index 4e74d58a8..2f904145a 100644
--- a/server/src/controllers/template/editTemplate.ts
+++ b/server/src/controllers/template/editTemplate.ts
@@ -1,4 +1,4 @@
-import { publicProcedure } from '../../trpc';
+import { publicProcedure, protectedProcedure } from '../../trpc';
 import { editTemplateService } from '../../services/template/template.service';
 import { z } from 'zod';
 
@@ -21,7 +21,7 @@ import { z } from 'zod';
 // };
 
 export function editTemplateRoute() {
-  return publicProcedure
+  return protectedProcedure
     .input(
       z.object({
         templateId: z.string(),
diff --git a/server/src/controllers/template/getTemplateById.ts b/server/src/controllers/template/getTemplateById.ts
index b5bccf34b..0af9506a1 100644
--- a/server/src/controllers/template/getTemplateById.ts
+++ b/server/src/controllers/template/getTemplateById.ts
@@ -1,4 +1,4 @@
-import { publicProcedure } from '../../trpc';
+import { publicProcedure, protectedProcedure } from '../../trpc';
 import { TemplateNotFoundError } from '../../helpers/errors';
 // import { responseHandler } from '../../helpers/responseHandler';
 import { z } from 'zod';
@@ -36,7 +36,7 @@ import { Template } from '../../drizzle/methods/template';
 
 export function getTemplateByIdRoute() {
   const templateClass = new Template();
-  return publicProcedure
+  return protectedProcedure
     .input(z.object({ templateId: z.string() }))
     .query(async (opts) => {
       const { templateId } = opts.input;
diff --git a/server/src/controllers/template/getTemplates.ts b/server/src/controllers/template/getTemplates.ts
index d3d4790fa..f5f89230f 100644
--- a/server/src/controllers/template/getTemplates.ts
+++ b/server/src/controllers/template/getTemplates.ts
@@ -1,5 +1,5 @@
 import { Template } from '../../drizzle/methods/template';
-import { publicProcedure } from '../../trpc';
+import { publicProcedure, protectedProcedure } from '../../trpc';
 
 // import { prisma } from '../../prisma';
 /**
@@ -23,7 +23,7 @@ import { publicProcedure } from '../../trpc';
 
 export function getTemplatesRoute() {
   const templateClass = new Template();
-  return publicProcedure.query(async (opts) => {
+  return protectedProcedure.query(async (opts) => {
     const templates = await templateClass.findMany();
     return templates;
   });
diff --git a/server/src/controllers/trip/addTrip.ts b/server/src/controllers/trip/addTrip.ts
index 851630f0e..b21a705f8 100644
--- a/server/src/controllers/trip/addTrip.ts
+++ b/server/src/controllers/trip/addTrip.ts
@@ -1,4 +1,4 @@
-import { publicProcedure } from '../../trpc';
+import { publicProcedure, protectedProcedure } from '../../trpc';
 import { addTripService } from '../../services/trip/addTripService';
 import * as validator from '@packrat/validations';
 /**
@@ -47,7 +47,7 @@ import * as validator from '@packrat/validations';
 // };
 
 export function addTripRoute() {
-  return publicProcedure.input(validator.addTrip).mutation(async (opts) => {
+  return protectedProcedure.input(validator.addTrip).mutation(async (opts) => {
     const tripData = opts.input;
     return await addTripService(tripData);
   });
diff --git a/server/src/controllers/trip/deleteTrip.ts b/server/src/controllers/trip/deleteTrip.ts
index 0301cbfac..af736d240 100644
--- a/server/src/controllers/trip/deleteTrip.ts
+++ b/server/src/controllers/trip/deleteTrip.ts
@@ -1,4 +1,4 @@
-import { publicProcedure } from '../../trpc';
+import { publicProcedure, protectedProcedure } from '../../trpc';
 import * as validator from '@packrat/validations';
 import { Trip } from '../../drizzle/methods/trip';
 
@@ -23,10 +23,12 @@ import { Trip } from '../../drizzle/methods/trip';
 // };
 
 export function deleteTripRoute() {
-  return publicProcedure.input(validator.deleteTrip).mutation(async (opts) => {
-    const { tripId } = opts.input;
-    const tripClass = new Trip();
-    await tripClass.delete(tripId);
-    return 'trip was deleted successfully';
-  });
+  return protectedProcedure
+    .input(validator.deleteTrip)
+    .mutation(async (opts) => {
+      const { tripId } = opts.input;
+      const tripClass = new Trip();
+      await tripClass.delete(tripId);
+      return 'trip was deleted successfully';
+    });
 }
diff --git a/server/src/controllers/trip/editTrip.ts b/server/src/controllers/trip/editTrip.ts
index 4ad222154..d4ba51a6d 100644
--- a/server/src/controllers/trip/editTrip.ts
+++ b/server/src/controllers/trip/editTrip.ts
@@ -1,4 +1,4 @@
-import { publicProcedure } from '../../trpc';
+import { publicProcedure, protectedProcedure } from '../../trpc';
 import { UnableToEditTripError } from '../../helpers/errors';
 import { responseHandler } from '../../helpers/responseHandler';
 
@@ -31,7 +31,7 @@ import { Trip } from '../../drizzle/methods/trip';
 // };
 
 export function editTripRoute() {
-  return publicProcedure.input(validator.editTrip).mutation(async (opts) => {
+  return protectedProcedure.input(validator.editTrip).mutation(async (opts) => {
     const tripData = { ...opts.input };
     const tripClass = new Trip();
     const trip = await tripClass.update(tripData);
diff --git a/server/src/controllers/trip/getPublicTrips.ts b/server/src/controllers/trip/getPublicTrips.ts
index 4573ed2af..bd75c95a8 100644
--- a/server/src/controllers/trip/getPublicTrips.ts
+++ b/server/src/controllers/trip/getPublicTrips.ts
@@ -1,4 +1,4 @@
-import { publicProcedure } from '../../trpc';
+import { publicProcedure, protectedProcedure } from '../../trpc';
 import { getPublicTripsService } from '../../services/trip/getPublicTripService';
 import * as validator from '@packrat/validations';
 import { z } from 'zod';
@@ -23,7 +23,7 @@ import { z } from 'zod';
 // };
 
 export function getPublicTripsRoute() {
-  return publicProcedure
+  return protectedProcedure
     .input(z.object({ queryBy: z.string() }))
     .query(async (opts) => {
       const { queryBy } = opts.input;
diff --git a/server/src/controllers/trip/getTrip.ts b/server/src/controllers/trip/getTrip.ts
index 95802ce41..acb0ee75e 100644
--- a/server/src/controllers/trip/getTrip.ts
+++ b/server/src/controllers/trip/getTrip.ts
@@ -1,4 +1,4 @@
-import { publicProcedure } from '../../trpc';
+import { publicProcedure, protectedProcedure } from '../../trpc';
 import { getTripsService } from '../../services/trip/getTripsService';
 import * as validator from '@packrat/validations';
 
@@ -22,7 +22,7 @@ import * as validator from '@packrat/validations';
 // };
 
 export function getTripsRoute() {
-  return publicProcedure.input(validator.getTrips).query(async (opts) => {
+  return protectedProcedure.input(validator.getTrips).query(async (opts) => {
     const { owner_id } = opts.input;
     if (!owner_id) {
       throw new Error('Owner id is required');
diff --git a/server/src/controllers/trip/getTripById.ts b/server/src/controllers/trip/getTripById.ts
index d74dc5947..1aa7e2c21 100644
--- a/server/src/controllers/trip/getTripById.ts
+++ b/server/src/controllers/trip/getTripById.ts
@@ -1,4 +1,4 @@
-import { publicProcedure } from '../../trpc';
+import { publicProcedure, protectedProcedure } from '../../trpc';
 import { getTripByIdService } from '../../services/trip/getTripByIdService';
 import * as validator from '@packrat/validations';
 /**
@@ -21,7 +21,7 @@ import * as validator from '@packrat/validations';
 // };
 
 export function getTripByIdRoute() {
-  return publicProcedure.input(validator.getTripById).query(async (opts) => {
+  return protectedProcedure.input(validator.getTripById).query(async (opts) => {
     const { tripId } = opts.input;
     return await getTripByIdService(tripId);
   });
diff --git a/server/src/controllers/user/deleteUser.ts b/server/src/controllers/user/deleteUser.ts
index c2967fcc4..f76b58d7e 100644
--- a/server/src/controllers/user/deleteUser.ts
+++ b/server/src/controllers/user/deleteUser.ts
@@ -1,4 +1,4 @@
-import { publicProcedure } from '../../trpc';
+import { publicProcedure, protectedProcedure } from '../../trpc';
 import * as validator from '@packrat/validations';
 import { User } from '../../drizzle/methods/User';
 
@@ -26,10 +26,12 @@ import { User } from '../../drizzle/methods/User';
 // };
 
 export function deleteUserRoute() {
-  return publicProcedure.input(validator.deleteUser).mutation(async (opts) => {
-    const { userId } = opts.input;
-    const user = new User();
-    await user.delete(userId);
-    return 'User deleted successfully';
-  });
+  return protectedProcedure
+    .input(validator.deleteUser)
+    .mutation(async (opts) => {
+      const { userId } = opts.input;
+      const user = new User();
+      await user.delete(userId);
+      return 'User deleted successfully';
+    });
 }
diff --git a/server/src/controllers/user/editUser.ts b/server/src/controllers/user/editUser.ts
index 58ea138c1..29a6d7f40 100644
--- a/server/src/controllers/user/editUser.ts
+++ b/server/src/controllers/user/editUser.ts
@@ -1,4 +1,4 @@
-import { publicProcedure } from '../../trpc';
+import { publicProcedure, protectedProcedure } from '../../trpc';
 import * as validator from '@packrat/validations';
 import { User } from '../../drizzle/methods/User';
 import { hashPassword } from '../../utils/user';
@@ -34,7 +34,7 @@ import bcrypt from 'bcryptjs';
 // };
 
 export function editUserRoute() {
-  return publicProcedure.input(validator.editUser).mutation(async (opts) => {
+  return protectedProcedure.input(validator.editUser).mutation(async (opts) => {
     const {
       id,
       name,
diff --git a/server/src/controllers/user/getUserById.ts b/server/src/controllers/user/getUserById.ts
index 3c440877c..d151b14d4 100644
--- a/server/src/controllers/user/getUserById.ts
+++ b/server/src/controllers/user/getUserById.ts
@@ -1,4 +1,4 @@
-import { publicProcedure } from '../../trpc';
+import { publicProcedure, protectedProcedure } from '../../trpc';
 import { getUserByIdService } from '../../services/user/getUserByIdService';
 import * as validator from '@packrat/validations';
 /**
@@ -21,7 +21,7 @@ import * as validator from '@packrat/validations';
 // };
 
 export function getUserByIdRoute() {
-  return publicProcedure.input(validator.getUserById).query(async (opts) => {
+  return protectedProcedure.input(validator.getUserById).query(async (opts) => {
     const { userId } = opts.input;
     return await getUserByIdService(userId);
   });
diff --git a/server/src/controllers/user/getUsers.ts b/server/src/controllers/user/getUsers.ts
index 310c30c4a..b8a25d180 100644
--- a/server/src/controllers/user/getUsers.ts
+++ b/server/src/controllers/user/getUsers.ts
@@ -1,4 +1,4 @@
-import { publicProcedure } from '../../trpc';
+import { publicProcedure, protectedProcedure } from '../../trpc';
 import { UserNotFoundError } from '../../helpers/errors';
 import { responseHandler } from '../../helpers/responseHandler';
 import { User } from '../../drizzle/methods/User';
@@ -37,7 +37,7 @@ import { User } from '../../drizzle/methods/User';
 // };
 
 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/index.ts b/server/src/index.ts
index c159ba3b9..ddcd8a2fd 100644
--- a/server/src/index.ts
+++ b/server/src/index.ts
@@ -4,7 +4,7 @@ import { appRouter } from './routes/trpcRouter';
 import { honoTRPCServer } from './trpc/server';
 import { cors } from 'hono/cors';
 // import { logger } from 'hono/logger';
-import { compress } from 'hono/compress';
+// import { compress } from 'hono/compress';
 import router from './routes';
 
 interface Bindings {
diff --git a/server/src/routes/trpcRouter.ts b/server/src/routes/trpcRouter.ts
index 235afe6e8..4ef56089b 100644
--- a/server/src/routes/trpcRouter.ts
+++ b/server/src/routes/trpcRouter.ts
@@ -87,37 +87,37 @@ import {
 
 import {
   router as trpcRouter,
-  publicProcedure,
-  protectedProcedure,
+  // publicProcedure,
+  // protectedProcedure,
 } from '../trpc';
-import { z } from 'zod';
+// import { z } from 'zod';
 
-export const helloRouter = trpcRouter({
-  world: publicProcedure.input(z.string()).query(async ({ input }) => {
-    console.log('input', input);
-    return `Hello ${input}!`;
-  }),
-});
+// export const helloRouter = trpcRouter({
+//   world: publicProcedure.input(z.string()).query(async ({ input }) => {
+//     console.log('input', input);
+//     return `Hello ${input}!`;
+//   }),
+// });
 
-export const helloRouter2 = () => {
-  return publicProcedure.query(async ({ input }) => {
-    console.log('input', input);
-    return `Hello ${input}!`;
-  });
-};
+// export const helloRouter2 = () => {
+//   return publicProcedure.query(async ({ input }) => {
+//     console.log('input', input);
+//     return `Hello ${input}!`;
+//   });
+// };
 
 export const appRouter = trpcRouter({
-  hello1: trpcRouter({
-    world: publicProcedure.query(() => {
-      return 'Hello World';
-    }),
-  }),
-  hello2: helloRouter,
-  hello3: publicProcedure.query(async (opts) => {
-    return 'Hello World';
-  }),
-  helloRouter2: helloRouter2(),
-  protectedHello: protectedProcedure.query(async (opts) => 'Hello World'),
+  // hello1: trpcRouter({
+  //   world: publicProcedure.query(() => {
+  //     return 'Hello World';
+  //   }),
+  // }),
+  // hello2: helloRouter,
+  // hello3: publicProcedure.query(async (opts) => {
+  //   return 'Hello World';
+  // }),
+  // helloRouter2: helloRouter2(),
+  // protectedHello: protectedProcedure.query(async (opts) => 'Hello World'),
   // user routes
   getUserById: getUserByIdRoute(),
   signIn: userSignInRoute(),
diff --git a/server/src/services/pack/getPackByIdService.ts b/server/src/services/pack/getPackByIdService.ts
index a5b352c9a..5e3a00598 100644
--- a/server/src/services/pack/getPackByIdService.ts
+++ b/server/src/services/pack/getPackByIdService.ts
@@ -14,17 +14,34 @@ interface PackWithItemPacks {
   is_public: boolean | null;
   grades: Object | null;
   scores: Object | null;
-  itemPacks: ItemPack[];
+  itemPacks?: ItemPack[];
 }
 
-export const getPackByIdService = async (packId: string) => {
+// Define a specific return type for getPackByIdService
+export interface PackData {
+  type: string | null;
+  id: string;
+  name: string;
+  createdAt: string | null;
+  updatedAt: string | null;
+  owner_id: string | null;
+  is_public: boolean | null;
+  grades: any;
+  scores: any;
+  total_weight: number;
+  favorites_count: number;
+  total_score: number;
+  items: any[];
+}
+
+export const getPackByIdService = async (packId: string): Promise<PackData> => {
   try {
     const packClass = new Pack();
     const pack = (await packClass.findPack({
       id: packId,
     })) as PackWithItemPacks;
 
-    const packData = {
+    const packData: PackData = {
       ...pack,
       scores: pack.scores ? JSON.parse(pack.scores as string) : {},
       grades: pack.grades ? JSON.parse(pack.grades as string) : {},

From 1978002391ff568bbc73cf09dcf1092de850d1ce Mon Sep 17 00:00:00 2001
From: pinocchio-life-like <icbr19fl@gmail.com>
Date: Fri, 5 Jul 2024 17:16:07 +0300
Subject: [PATCH 153/257] add middlewares

---
 server/src/index.ts                      |  8 ++++++++
 server/src/middleware/enforceHttps.ts    | 17 +++++++++++++++++
 server/src/middleware/securityHeaders.ts | 21 +++++++++++++++++++++
 3 files changed, 46 insertions(+)
 create mode 100644 server/src/middleware/enforceHttps.ts
 create mode 100644 server/src/middleware/securityHeaders.ts

diff --git a/server/src/index.ts b/server/src/index.ts
index ddcd8a2fd..74b783f0e 100644
--- a/server/src/index.ts
+++ b/server/src/index.ts
@@ -3,6 +3,8 @@ import { fetchHandler } from 'trpc-playground/handlers/fetch';
 import { appRouter } from './routes/trpcRouter';
 import { honoTRPCServer } from './trpc/server';
 import { cors } from 'hono/cors';
+import { securityHeaders } from './middleware/securityHeaders';
+import { enforceHttps } from './middleware/enforceHttps';
 // import { logger } from 'hono/logger';
 // import { compress } from 'hono/compress';
 import router from './routes';
@@ -27,6 +29,12 @@ const app = new Hono<{ Bindings: Bindings }>();
 //  Bun: This middleware uses CompressionStream which is not yet supported in bun.
 //  ref: https://hono.dev/middleware/builtin/compress
 
+// SETUP HTTPS Enforcement Middleware
+app.use('*', enforceHttps());
+
+// SETUP SECURITY HEADERS
+app.use('*', securityHeaders()); // Apply to all routes
+
 // SETUP CORS
 app.use('*', async (c, next) => {
   const CORS_ORIGIN = String(c.env.CORS_ORIGIN);
diff --git a/server/src/middleware/enforceHttps.ts b/server/src/middleware/enforceHttps.ts
new file mode 100644
index 000000000..9ce101a33
--- /dev/null
+++ b/server/src/middleware/enforceHttps.ts
@@ -0,0 +1,17 @@
+export const enforceHttps = () => {
+  return async (c, next) => {
+    // Check if the request is already HTTPS or if it's a local development environment
+    if (
+      c.req.protocol !== 'https' &&
+      c.req.headers.get('x-forwarded-proto') !== 'https' &&
+      process.env.NODE_ENV !== 'development'
+    ) {
+      // Construct the HTTPS URL
+      const httpsUrl = `https://${c.req.headers.get('host')}${c.req.url}`;
+      // Redirect to HTTPS
+      return c.redirect(httpsUrl, 301);
+    }
+    // Proceed with the next middleware if the request is over HTTPS
+    return next();
+  };
+};
diff --git a/server/src/middleware/securityHeaders.ts b/server/src/middleware/securityHeaders.ts
new file mode 100644
index 000000000..1ec549018
--- /dev/null
+++ b/server/src/middleware/securityHeaders.ts
@@ -0,0 +1,21 @@
+export const securityHeaders = () => {
+  return async (c, next) => {
+    // Set various security headers
+    c.header(
+      'Content-Security-Policy',
+      "default-src 'self'; script-src 'self'; object-src 'none';",
+    );
+    c.header('X-Frame-Options', 'DENY');
+    c.header('X-Content-Type-Options', 'nosniff');
+    c.header('Referrer-Policy', 'no-referrer');
+    c.header('Permissions-Policy', 'geolocation=(), microphone=()');
+    c.header(
+      'Strict-Transport-Security',
+      'max-age=63072000; includeSubDomains; preload',
+    );
+    c.header('X-XSS-Protection', '1; mode=block');
+
+    // Proceed to the next middleware
+    return next();
+  };
+};

From 1bba3c6d249fe93b852080ec509ee26a6b005188 Mon Sep 17 00:00:00 2001
From: pinocchio-life-like <icbr19fl@gmail.com>
Date: Fri, 5 Jul 2024 18:01:41 +0300
Subject: [PATCH 154/257] update enforeceHttp

---
 server/src/middleware/enforceHttps.ts | 23 +++++++++++++++++++----
 1 file changed, 19 insertions(+), 4 deletions(-)

diff --git a/server/src/middleware/enforceHttps.ts b/server/src/middleware/enforceHttps.ts
index 9ce101a33..604f91f49 100644
--- a/server/src/middleware/enforceHttps.ts
+++ b/server/src/middleware/enforceHttps.ts
@@ -1,17 +1,32 @@
 export const enforceHttps = () => {
   return async (c, next) => {
+    // Determine protocol and x-forwarded-proto header values
+    const protocol = c.req.protocol;
+    let xForwardedProto;
+    if (c.req.headers instanceof Headers) {
+      // If c.req.headers is a Headers object
+      xForwardedProto = c.req.headers.get('x-forwarded-proto');
+    } else if (typeof c.req.headers === 'object') {
+      // If c.req.headers is a plain object
+      xForwardedProto = c.req.headers['x-forwarded-proto'];
+    }
+
     // Check if the request is already HTTPS or if it's a local development environment
     if (
-      c.req.protocol !== 'https' &&
-      c.req.headers.get('x-forwarded-proto') !== 'https' &&
+      protocol !== 'https' &&
+      xForwardedProto !== 'https' &&
       process.env.NODE_ENV !== 'development'
     ) {
       // Construct the HTTPS URL
-      const httpsUrl = `https://${c.req.headers.get('host')}${c.req.url}`;
+      const host =
+        c.req.headers instanceof Headers
+          ? c.req.headers.get('host')
+          : c.req.headers.host;
+      const httpsUrl = `https://${host}${c.req.url}`;
       // Redirect to HTTPS
       return c.redirect(httpsUrl, 301);
     }
-    // Proceed with the next middleware if the request is over HTTPS
+
     return next();
   };
 };

From 4c4bcd81ff7af5f94d9ccefe2e1a656453dcdec5 Mon Sep 17 00:00:00 2001
From: pinocchio-life-like <icbr19fl@gmail.com>
Date: Sat, 6 Jul 2024 08:45:31 +0300
Subject: [PATCH 155/257] routes middleware

---
 packages/app/auth/AuthWrapper.tsx   |   2 +-
 server/src/routes/favoriteRoutes.ts |   1 +
 server/src/routes/helloRoute.ts     |   0
 server/src/routes/index.ts          | 106 ----------------------------
 server/src/routes/itemRoutes.ts     |   6 ++
 server/src/routes/packRoutes.ts     |   6 ++
 server/src/routes/tripRoutes.ts     |   5 ++
 server/src/routes/trpcRouter.ts     |  33 +--------
 server/src/routes/userRoutes.ts     |   6 +-
 server/src/routes/weatherRoutes.ts  |   9 ++-
 10 files changed, 32 insertions(+), 142 deletions(-)
 delete mode 100644 server/src/routes/helloRoute.ts

diff --git a/packages/app/auth/AuthWrapper.tsx b/packages/app/auth/AuthWrapper.tsx
index dbad62011..34445d661 100644
--- a/packages/app/auth/AuthWrapper.tsx
+++ b/packages/app/auth/AuthWrapper.tsx
@@ -12,7 +12,7 @@ interface AuthWrapperProps {
 
 export const AuthWrapper = ({
   children,
-  unauthorizedElement = <Redirect to="/login" />,
+  unauthorizedElement = <Redirect to="/sign-in" />,
 }: AuthWrapperProps) => {
   return (
     <AuthLoader
diff --git a/server/src/routes/favoriteRoutes.ts b/server/src/routes/favoriteRoutes.ts
index 068746a28..5f28fec29 100644
--- a/server/src/routes/favoriteRoutes.ts
+++ b/server/src/routes/favoriteRoutes.ts
@@ -39,6 +39,7 @@ const router = new Hono();
  */
 router.post(
   '/',
+  authTokenMiddleware as any,
   ((req, res, next) =>
     zodParser(validator.addToFavorite, req.body, next)) as any,
   tryCatchWrapper(addToFavorite),
diff --git a/server/src/routes/helloRoute.ts b/server/src/routes/helloRoute.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/server/src/routes/index.ts b/server/src/routes/index.ts
index 4551e237b..9abdf88aa 100644
--- a/server/src/routes/index.ts
+++ b/server/src/routes/index.ts
@@ -1,63 +1,8 @@
-// import express, { type Request, type Response } from 'express';
-// import path from 'path';
-// import csrf from 'csurf';
-// import packRoutes from './packRoutes';
-// import itemRoutes from './itemRoutes';
-// import tripRoutes from './tripRoutes';
-// import weatherRoutes from './weatherRoutes';
-// import geoCodeRoutes from './geoCodeRoutes';
-// import getParkRoutes from './getParkRoutes';
-// import getTrailRoutes from './getTrailRoutes';
-// import osmRoutes from './osmRoutes';
-// import passwordResetRoutes from './passwordResetRoutes';
-// import openAiRoutes from './openAiRoutes';
-// // import templateRoutes from './templateRoutes';
-// import favoriteRouters from './favoriteRoutes';
-// import userRoutes from './userRoutes';
 import mapPreviewRouter from './mapPreviewRouter';
 import { type Context, Hono, type Next } from 'hono';
 
 const router = new Hono();
 
-// Create a CSRF middleware
-// const csrfProtection = csrf({ cookie: true });
-
-// /**
-//  * Logs the incoming request method and path, and logs the finished request method, path, status code, and request body.
-//  *
-//  * @param {Request} req - The incoming request object.
-//  * @param {Response} res - The response object.
-//  * @param {NextFunction} next - The next function to call in the middleware chain.
-//  */
-// const logger = (req: Request, res: Response, next: express.NextFunction) => {
-//   console.log(`Incoming ${req.method} ${req.path}`);
-//   res.on('finish', () => {
-//     console.log(`Finished ${req.method} ${req.path} ${res.statusCode}`);
-//     console.log(`Body ${req.body}`);
-//   });
-//   next();
-// };
-
-// // use logger middleware in development
-// if (process.env.NODE_ENV !== 'production') {
-//   router.use(logger);
-// }
-
-// use routes
-// router.use('/user', userRoutes);
-// router.use('/pack', packRoutes);
-// router.use('/item', itemRoutes);
-// router.use('/trip', tripRoutes);
-// router.use('/weather', weatherRoutes);
-// router.use('/geocode', geoCodeRoutes);
-// router.use('/getparks', getParkRoutes);
-// router.use('/gettrails', getTrailRoutes);
-// router.use('/osm', osmRoutes);
-// router.use('/password-reset', passwordResetRoutes);
-// router.use('/openai', openAiRoutes);
-// router.use('/template', templateRoutes);
-// router.use('/favorite', favoriteRouters);
-// router.use('/openai', openAiRoutes);
 router.route('/mapPreview', mapPreviewRouter);
 
 const helloRouter = new Hono();
@@ -66,55 +11,4 @@ helloRouter.get('/', (c: Context, next: Next) => {
 });
 router.route('/hello', helloRouter);
 
-// Also listen to /api for backwards compatibility
-// router.use('/api/user', userRoutes);
-// router.use('/api/pack', packRoutes);
-// router.use('/api/item', itemRoutes);
-// router.use('/api/trip', tripRoutes);
-// router.use('/api/weather', weatherRoutes);
-// router.use('/api/geocode', geoCodeRoutes);
-// router.use('/api/getparks', getParkRoutes);
-// router.use('/api/gettrails', getTrailRoutes);
-// router.use('/api/osm', osmRoutes);
-// router.use('/api/password-reset', passwordResetRoutes);
-// router.use('/api/openai', openAiRoutes);
-// router.use('/api/template', templateRoutes);
-// router.use('/api/favorite', favoriteRouters);
-// router.use('/api/openai', openAiRoutes);
-// router.use('/api/mapPreview', mapPreviewRouter);
-
-// // Static routes for serving the React Native Web app
-// if (process.env.NODE_ENV === 'production') {
-//   const __dirname = path.resolve();
-//   const serverType = process.env.REACT_APP_SERVER_TYPE || 'vite';
-
-//   // Serve the client's index.html file at the root route
-//   router.get('/', (req, res) => {
-// // Attach the CSRF token cookie to the response
-//     // res.cookie("XSRF-TOKEN", req.csrfToken());
-
-//     const basePath = serverType === 'next' ? '../apps/next/out' : '../apps/vite/dist';
-//     res.sendFile(path.resolve(__dirname, basePath, 'index.html'));
-//   });
-
-//   // Serve the static assets
-//   const staticPath = serverType === 'next' ? '../apps/next/out' : '../apps/vite/dist';
-//   router.use(express.static(path.join(__dirname, staticPath)));
-
-//   // Serve the client's index.html file at all other routes NOT starting with /api
-//   router.get(/^(?!\/?api).*/, (req, res) => {
-//     // res.cookie("XSRF-TOKEN", req.csrfToken());
-//     const basePath = serverType === 'next' ? '../apps/next/out' : '../apps/vite/dist';
-//     res.sendFile(path.resolve(__dirname, basePath, 'index.html'));
-//   });
-// }
-
-// // Attach the CSRF token to a specific route in development
-// if (process.env.NODE_ENV !== 'production') {
-//   router.get('/api/csrf/restore', (req, res) => {
-//     // res.cookie("XSRF-TOKEN", req.csrfToken());
-//     res.status(201).json({});
-//   });
-// }
-
 export default router;
diff --git a/server/src/routes/itemRoutes.ts b/server/src/routes/itemRoutes.ts
index 7948c3ea4..3c48ab4db 100644
--- a/server/src/routes/itemRoutes.ts
+++ b/server/src/routes/itemRoutes.ts
@@ -46,6 +46,7 @@ const router = new Hono();
  */
 router.get(
   '/packItems/:packId',
+  authTokenMiddleware as any,
   ((req, res, next) => zodParser(validator.getItems, req.body, next)) as any,
   tryCatchWrapper(getItems),
 );
@@ -69,6 +70,7 @@ router.get(
  */
 router.get(
   '/i/:packId',
+  authTokenMiddleware as any,
   ((req, res, next) => zodParser(validator.getItemById, req.body, next)) as any,
   tryCatchWrapper(getItemById),
 );
@@ -127,6 +129,7 @@ router.get(
  */
 router.post(
   '/',
+  authTokenMiddleware as any,
   ((req, res, next) => zodParser(validator.addItem, req.body, next)) as any,
   tryCatchWrapper(addItem),
 );
@@ -161,6 +164,7 @@ router.post(
  */
 router.put(
   '/',
+  authTokenMiddleware as any,
   ((req, res, next) => zodParser(validator.editItem, req.body, next)) as any,
   tryCatchWrapper(editItem),
 );
@@ -187,6 +191,7 @@ router.put(
  */
 router.delete(
   '/',
+  authTokenMiddleware as any,
   ((req, res, next) => zodParser(validator.deleteItem, req.body, next)) as any,
   tryCatchWrapper(deleteItem),
 );
@@ -221,6 +226,7 @@ router.delete(
  */
 router.post(
   '/global',
+  authTokenMiddleware as any,
   ((req, res, next) =>
     zodParser(validator.addItemGlobal, req.body, next)) as any,
   tryCatchWrapper(addItemGlobal),
diff --git a/server/src/routes/packRoutes.ts b/server/src/routes/packRoutes.ts
index 72391d152..a2e1eeaea 100644
--- a/server/src/routes/packRoutes.ts
+++ b/server/src/routes/packRoutes.ts
@@ -95,6 +95,7 @@ router.get(
  */
 router.get(
   '/p/:packId',
+  authTokenMiddleware as any,
   ((req, res, next) =>
     zodParser(validator.getPackById, req.params, next)) as any,
   tryCatchWrapper(getPackById),
@@ -123,6 +124,7 @@ router.get(
  */
 router.put(
   '/score/:packId',
+  authTokenMiddleware as any,
   ((req, res, next) =>
     zodParser(validator.getPackById, req.params, next)) as any,
   tryCatchWrapper(scorePack),
@@ -157,6 +159,7 @@ router.put(
  */
 router.post(
   '/',
+  authTokenMiddleware as any,
   ((req, res, next) => zodParser(validator.addPack, req.body, next)) as any,
   tryCatchWrapper(addPack),
 );
@@ -190,6 +193,7 @@ router.post(
  */
 router.put(
   '/',
+  authTokenMiddleware as any,
   ((req, res, next) => zodParser(validator.editPack, req.body, next)) as any,
   tryCatchWrapper(editPack),
 );
@@ -219,6 +223,7 @@ router.put(
  */
 router.delete(
   '/',
+  authTokenMiddleware as any,
   ((req, res, next) => zodParser(validator.deletePack, req.body, next)) as any,
   tryCatchWrapper(deletePack),
 );
@@ -248,6 +253,7 @@ router.delete(
  */
 router.post(
   '/duplicate',
+  authTokenMiddleware as any,
   ((req, res, next) =>
     zodParser(validator.duplicatePublicPack, req.body, next)) as any,
   tryCatchWrapper(duplicatePublicPack),
diff --git a/server/src/routes/tripRoutes.ts b/server/src/routes/tripRoutes.ts
index 487949ae3..804ae707f 100644
--- a/server/src/routes/tripRoutes.ts
+++ b/server/src/routes/tripRoutes.ts
@@ -59,6 +59,7 @@ router.get(
  */
 router.get(
   '/:ownerId',
+  authTokenMiddleware as any,
   ((req, res, next) => zodParser(validator.getTrips, req.params, next)) as any,
   tryCatchWrapper(getTrips),
 );
@@ -82,6 +83,7 @@ router.get(
  */
 router.get(
   '/t/:tripId',
+  authTokenMiddleware as any,
   ((req, res, next) =>
     zodParser(validator.getTripById, req.params, next)) as any,
   tryCatchWrapper(getTripById),
@@ -131,6 +133,7 @@ router.get(
  */
 router.post(
   '/',
+  authTokenMiddleware as any,
   ((req, res, next) => zodParser(validator.addTrip, req.body, next)) as any,
   tryCatchWrapper(addTrip),
 );
@@ -181,6 +184,7 @@ router.post(
  */
 router.put(
   '/',
+  authTokenMiddleware as any,
   ((req, res, next) => zodParser(validator.editTrip, req.body, next)) as any,
   tryCatchWrapper(editTrip),
 );
@@ -207,6 +211,7 @@ router.put(
  */
 router.delete(
   '/',
+  authTokenMiddleware as any,
   ((req, res, next) => zodParser(validator.deleteTrip, req.body, next)) as any,
   tryCatchWrapper(deleteTrip),
 );
diff --git a/server/src/routes/trpcRouter.ts b/server/src/routes/trpcRouter.ts
index 4ef56089b..98329f308 100644
--- a/server/src/routes/trpcRouter.ts
+++ b/server/src/routes/trpcRouter.ts
@@ -85,40 +85,9 @@ import {
   postSingleGeoJSONRoute,
 } from '../controllers/getOsm';
 
-import {
-  router as trpcRouter,
-  // publicProcedure,
-  // protectedProcedure,
-} from '../trpc';
-// import { z } from 'zod';
-
-// export const helloRouter = trpcRouter({
-//   world: publicProcedure.input(z.string()).query(async ({ input }) => {
-//     console.log('input', input);
-//     return `Hello ${input}!`;
-//   }),
-// });
-
-// export const helloRouter2 = () => {
-//   return publicProcedure.query(async ({ input }) => {
-//     console.log('input', input);
-//     return `Hello ${input}!`;
-//   });
-// };
+import { router as trpcRouter } from '../trpc';
 
 export const appRouter = trpcRouter({
-  // hello1: trpcRouter({
-  //   world: publicProcedure.query(() => {
-  //     return 'Hello World';
-  //   }),
-  // }),
-  // hello2: helloRouter,
-  // hello3: publicProcedure.query(async (opts) => {
-  //   return 'Hello World';
-  // }),
-  // helloRouter2: helloRouter2(),
-  // protectedHello: protectedProcedure.query(async (opts) => 'Hello World'),
-  // user routes
   getUserById: getUserByIdRoute(),
   signIn: userSignInRoute(),
   signUp: signUpRoute(),
diff --git a/server/src/routes/userRoutes.ts b/server/src/routes/userRoutes.ts
index 121a51de7..7c6700801 100644
--- a/server/src/routes/userRoutes.ts
+++ b/server/src/routes/userRoutes.ts
@@ -17,7 +17,6 @@ import {
 import * as validator from '@packrat/validations';
 
 import { googleSigninRoute as signInGoogle } from '../controllers/passport/index';
-import { REDIRECT_URL } from '../config';
 import {
   emailExistsRoute as emailExists,
   updatePasswordRoute as updatePassword,
@@ -79,6 +78,7 @@ router.get(
  */
 router.get(
   '/:userId',
+  authTokenMiddleware as any,
   ((req, res, next) => {
     zodParser(validator.getUserById, req.params, next);
     next();
@@ -302,6 +302,7 @@ router.post('/google', tryCatchWrapper(signInGoogle));
  */
 router.put(
   '/',
+  authTokenMiddleware as any,
   ((req, res, next) => zodParser(validator.editUser, req.body, next)) as any,
   tryCatchWrapper(editUser),
 );
@@ -331,17 +332,20 @@ router.put(
  */
 router.delete(
   '/',
+  authTokenMiddleware as any,
   ((req, res, next) => zodParser(validator.deleteUser, req.body, next)) as any,
   tryCatchWrapper(deleteUser),
 );
 
 router.post(
   '/checkcode',
+  authTokenMiddleware as any,
   ((req, res, next) => zodParser(validator.checkCode, req.body, next)) as any,
   tryCatchWrapper(checkCode),
 );
 router.post(
   '/updatepassword',
+  authTokenMiddleware as any,
   ((req, res, next) =>
     zodParser(validator.updatePassword, req.body, next)) as any,
   tryCatchWrapper(updatePassword),
diff --git a/server/src/routes/weatherRoutes.ts b/server/src/routes/weatherRoutes.ts
index d2df31c4e..e71c7f2cc 100644
--- a/server/src/routes/weatherRoutes.ts
+++ b/server/src/routes/weatherRoutes.ts
@@ -3,6 +3,7 @@ import {
   getWeatherWeekRoute as getWeatherWeek,
   getWeatherRoute as getWeather,
 } from '../controllers/weather/index';
+import authTokenMiddleware from '../middleware/auth';
 import { tryCatchWrapper } from '../helpers/tryCatchWrapper';
 
 const router = new Hono();
@@ -26,7 +27,7 @@ const router = new Hono();
  *       '500':
  *         description: Error retrieving current weather
  */
-router.get('/', tryCatchWrapper(getWeather));
+router.get('/', authTokenMiddleware as any, tryCatchWrapper(getWeather));
 
 /**
  * @swagger
@@ -40,6 +41,10 @@ router.get('/', tryCatchWrapper(getWeather));
  *       '500':
  *         description: Error retrieving weekly weather forecast
  */
-router.get('/week', tryCatchWrapper(getWeatherWeek));
+router.get(
+  '/week',
+  authTokenMiddleware as any,
+  tryCatchWrapper(getWeatherWeek),
+);
 
 export default router;

From 7fb23067c7a80d667bb73b6ba319a2230e4cb4a7 Mon Sep 17 00:00:00 2001
From: pinocchio-life-like <icbr19fl@gmail.com>
Date: Sat, 6 Jul 2024 15:53:10 +0300
Subject: [PATCH 156/257] update

---
 server/src/index.ts                   | 9 ++++-----
 server/src/routes/mapPreviewRouter.ts | 5 +++--
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/server/src/index.ts b/server/src/index.ts
index 74b783f0e..8cf313258 100644
--- a/server/src/index.ts
+++ b/server/src/index.ts
@@ -5,9 +5,8 @@ import { honoTRPCServer } from './trpc/server';
 import { cors } from 'hono/cors';
 import { securityHeaders } from './middleware/securityHeaders';
 import { enforceHttps } from './middleware/enforceHttps';
-// import { logger } from 'hono/logger';
-// import { compress } from 'hono/compress';
 import router from './routes';
+import { CORS_METHODS } from './config';
 
 interface Bindings {
   [key: string]: any;
@@ -30,7 +29,7 @@ const app = new Hono<{ Bindings: Bindings }>();
 //  ref: https://hono.dev/middleware/builtin/compress
 
 // SETUP HTTPS Enforcement Middleware
-app.use('*', enforceHttps());
+app.use('*', enforceHttps()); // Apply to all routes
 
 // SETUP SECURITY HEADERS
 app.use('*', securityHeaders()); // Apply to all routes
@@ -39,11 +38,11 @@ app.use('*', securityHeaders()); // Apply to all routes
 app.use('*', async (c, next) => {
   const CORS_ORIGIN = String(c.env.CORS_ORIGIN);
   const corsMiddleware = cors({
-    // origin: CORS_ORIGIN,
+    // origin: CORS_ORIGIN, // uncomment this line to enable CORS
     origin: '*', // temporary
     credentials: true,
     allowHeaders: ['Content-Type', 'Authorization'],
-    allowMethods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
+    allowMethods: CORS_METHODS,
   });
   return corsMiddleware(c, next);
 });
diff --git a/server/src/routes/mapPreviewRouter.ts b/server/src/routes/mapPreviewRouter.ts
index 48c7ba869..f37a52de1 100644
--- a/server/src/routes/mapPreviewRouter.ts
+++ b/server/src/routes/mapPreviewRouter.ts
@@ -32,8 +32,9 @@ const router = new Hono();
  */
 router.get(
   '/*',
-  // tryCatchWrapper(getMapPreview)
-  getMapPreview,
+  authTokenMiddleware as any,
+  tryCatchWrapper(getMapPreview),
+  // getMapPreview,
 );
 
 export default router;

From 7f59f0539af7977543370889e613c800d3aa0caa Mon Sep 17 00:00:00 2001
From: pinocchio-life-like <icbr19fl@gmail.com>
Date: Sat, 6 Jul 2024 16:06:26 +0300
Subject: [PATCH 157/257] fix chat opener not visible on native

---
 packages/app/components/chat/chat.style.tsx  |   7 +-
 packages/app/components/layout/Layout.tsx    |   1 +
 packages/app/components/pack/PackDetails.tsx | 156 +++++++++----------
 3 files changed, 79 insertions(+), 85 deletions(-)

diff --git a/packages/app/components/chat/chat.style.tsx b/packages/app/components/chat/chat.style.tsx
index e3d56af2e..da84818dc 100644
--- a/packages/app/components/chat/chat.style.tsx
+++ b/packages/app/components/chat/chat.style.tsx
@@ -1,4 +1,4 @@
-import { Dimensions } from 'react-native';
+import { Dimensions, Platform } from 'react-native';
 
 const { width, height } = Dimensions.get('window');
 
@@ -6,14 +6,15 @@ export const SCREEN_WIDTH = width;
 export const SCREEN_HEIGHT = height;
 
 export const loadStyles = (theme: any) => {
+  const isWeb = Platform.OS === 'web';
   const { currentTheme } = theme;
 
   return {
     container: {
       flex: 1,
       padding: 16,
-      position: 'fixed',
-      right: 250,
+      position: isWeb ? 'fixed' : 'absolute',
+      right: 50,
       bottom: 30,
       width: 60,
       height: 60,
diff --git a/packages/app/components/layout/Layout.tsx b/packages/app/components/layout/Layout.tsx
index cc5c3401b..e5ac9c968 100644
--- a/packages/app/components/layout/Layout.tsx
+++ b/packages/app/components/layout/Layout.tsx
@@ -5,6 +5,7 @@ const Layout = ({ children }) => {
     <View
       style={{
         display: 'flex',
+        flex: 1,
         justifyContent: 'center',
         marginTop: 20,
         alignItems: 'center',
diff --git a/packages/app/components/pack/PackDetails.tsx b/packages/app/components/pack/PackDetails.tsx
index cb7025278..101fef8c3 100644
--- a/packages/app/components/pack/PackDetails.tsx
+++ b/packages/app/components/pack/PackDetails.tsx
@@ -57,88 +57,80 @@ export function PackDetails() {
   if (isLoading) return <RText>Loading...</RText>;
 
   return (
-    <>
-      <Layout>
-        {!isError && (
-          <View
-            style={{
-              minHeight: '100%',
-            }}
-          >
-            <DetailsComponent
-              type="pack"
-              data={currentPack}
-              isLoading={isLoading}
-              error={error as any}
-              additionalComps={
-                <>
-                  <FlatList
-                    data={Object.entries(SECTION)}
-                    contentContainerStyle={{ paddingBottom: 50 }}
-                    keyExtractor={([key, val]) => val}
-                    renderItem={({ item }) => {
-                      switch (item[1]) {
-                        case SECTION.TABLE:
-                          return (
-                            <TableContainer
-                              currentPack={currentPack}
-                              copy={canCopy}
-                              hasPermissions={isAuthUserPack}
+    <Layout>
+      {!isError && (
+        <View
+          style={{
+            minHeight: '100%',
+          }}
+        >
+          <DetailsComponent
+            type="pack"
+            data={currentPack}
+            isLoading={isLoading}
+            error={error as any}
+            additionalComps={
+              <>
+                <FlatList
+                  data={Object.entries(SECTION)}
+                  contentContainerStyle={{ paddingBottom: 50 }}
+                  keyExtractor={([key, val]) => val}
+                  renderItem={({ item }) => {
+                    switch (item[1]) {
+                      case SECTION.TABLE:
+                        return (
+                          <TableContainer
+                            currentPack={currentPack}
+                            copy={canCopy}
+                            hasPermissions={isAuthUserPack}
+                          />
+                        );
+                      case SECTION.CTA:
+                        return isAuthUserPack ? (
+                          <AddItemModal
+                            currentPackId={currentPackId || ''}
+                            currentPack={currentPack}
+                            isAddItemModalOpen={isAddItemModalOpen}
+                            setIsAddItemModalOpen={setIsAddItemModalOpen}
+                            // refetch={refetch}
+                            setRefetch={() => setRefetch((prev) => !prev)}
+                          />
+                        ) : null;
+                      case SECTION.SCORECARD:
+                        return (
+                          <View
+                            style={{
+                              minHeight: xxs ? 800 : xs ? 800 : xxl ? 100 : 800,
+                            }}
+                          >
+                            <ScoreContainer
+                              type="pack"
+                              data={currentPack}
+                              isOwner={isOwner}
                             />
-                          );
-                        case SECTION.CTA:
-                          return isAuthUserPack ? (
-                            <AddItemModal
-                              currentPackId={currentPackId || ''}
-                              currentPack={currentPack}
-                              isAddItemModalOpen={isAddItemModalOpen}
-                              setIsAddItemModalOpen={setIsAddItemModalOpen}
-                              // refetch={refetch}
-                              setRefetch={() => setRefetch((prev) => !prev)}
-                            />
-                          ) : null;
-                        case SECTION.SCORECARD:
-                          return (
-                            <View
-                              style={{
-                                minHeight: xxs
-                                  ? 800
-                                  : xs
-                                    ? 800
-                                    : xxl
-                                      ? 100
-                                      : 800,
-                              }}
-                            >
-                              <ScoreContainer
-                                type="pack"
-                                data={currentPack}
-                                isOwner={isOwner}
-                              />
-                            </View>
-                          );
-                        // case SECTION.CHAT:
-                        //   return (
-                        //     <View style={styles.boxStyle}>
-                        //       <ChatContainer
-                        //         itemTypeId={currentPackId}
-                        //         title="Chat"
-                        //         trigger="Open Chat"
-                        //       />
-                        //     </View>
-                        //   );
-                        default:
-                          return null;
-                      }
-                    }}
-                  />
-                </>
-              }
-              link={link}
-            />
-          </View>
-        )}
-      </Layout>
+                          </View>
+                        );
+                      // case SECTION.CHAT:
+                      //   return (
+                      //     <View style={styles.boxStyle}>
+                      //       <ChatContainer
+                      //         itemTypeId={currentPackId}
+                      //         title="Chat"
+                      //         trigger="Open Chat"
+                      //       />
+                      //     </View>
+                      //   );
+                      default:
+                        return null;
+                    }
+                  }}
+                />
+              </>
+            }
+            link={link}
+          />
+        </View>
+      )}
       <View
         style={{
           position: 'absolute',
@@ -159,7 +151,7 @@ export function PackDetails() {
           type="pack"
         />
       </View>
-    </>
+    </Layout>
   );
 }
 

From 869ae4a65e80ea305fc3cb9d7d6b8c10c44c6eb8 Mon Sep 17 00:00:00 2001
From: pinocchio-life-like <icbr19fl@gmail.com>
Date: Sat, 6 Jul 2024 17:02:42 +0300
Subject: [PATCH 158/257] add some validations and abandon routes directory

---
 .../src/validations/openAIRoutesValidator.ts          |  3 ++-
 .../src/validations/templateRouteValidator.ts         |  2 +-
 server/src/controllers/template/addTemplate.ts        | 11 ++---------
 server/src/controllers/template/deleteTemplate.ts     |  4 ++--
 server/src/controllers/template/editTemplate.ts       |  9 ++-------
 server/src/controllers/template/getTemplateById.ts    |  4 ++--
 server/src/routes/getParkRoutes.ts                    |  3 +++
 server/src/routes/getTrailRoutes.ts                   |  3 +++
 server/src/routes/itemRoutes.ts                       |  8 ++++++++
 server/src/routes/openAiRoutes.ts                     |  6 ++++++
 10 files changed, 31 insertions(+), 22 deletions(-)

diff --git a/packages/validations/src/validations/openAIRoutesValidator.ts b/packages/validations/src/validations/openAIRoutesValidator.ts
index 415f6189a..d19daa4fb 100644
--- a/packages/validations/src/validations/openAIRoutesValidator.ts
+++ b/packages/validations/src/validations/openAIRoutesValidator.ts
@@ -2,10 +2,11 @@ import { z } from 'zod';
 
 export const getAIResponse = z.object({
   userId: z.string(),
-  conversationId: z.string(),
+  itemTypeId: z.string(),
   userInput: z.string(),
 });
 
 export const getUserChats = z.object({
   userId: z.string(),
+  itemTypeId: z.string(),
 });
diff --git a/packages/validations/src/validations/templateRouteValidator.ts b/packages/validations/src/validations/templateRouteValidator.ts
index 663e94068..69f5f9be7 100644
--- a/packages/validations/src/validations/templateRouteValidator.ts
+++ b/packages/validations/src/validations/templateRouteValidator.ts
@@ -1,7 +1,7 @@
 import { z } from 'zod';
 
 export const addTemplate = z.object({
-  type: z.string(),
+  type: z.any(),
   templateId: z.string(),
   isGlobalTemplate: z.boolean(),
   createdBy: z.string(),
diff --git a/server/src/controllers/template/addTemplate.ts b/server/src/controllers/template/addTemplate.ts
index aeeffab3d..c3280bbe9 100644
--- a/server/src/controllers/template/addTemplate.ts
+++ b/server/src/controllers/template/addTemplate.ts
@@ -1,8 +1,8 @@
 import { publicProcedure, protectedProcedure } from '../../trpc';
 import { UserNotFoundError } from '../../helpers/errors';
 import { addTemplateService } from '../../services/template/template.service';
-import { z } from 'zod';
 import { User } from '../../drizzle/methods/User';
+import * as validator from '@packrat/validations';
 
 // import { prisma } from '../../prisma';
 /**
@@ -32,14 +32,7 @@ import { User } from '../../drizzle/methods/User';
 
 export function addTemplateRoute() {
   return protectedProcedure
-    .input(
-      z.object({
-        type: z.any(),
-        templateId: z.string(),
-        isGlobalTemplate: z.boolean(),
-        createdBy: z.string(),
-      }),
-    )
+    .input(validator.addTemplate)
     .mutation(async (opts) => {
       const { type, templateId, isGlobalTemplate, createdBy } = opts.input;
       const userClass = new User();
diff --git a/server/src/controllers/template/deleteTemplate.ts b/server/src/controllers/template/deleteTemplate.ts
index b2193155c..6425ae341 100644
--- a/server/src/controllers/template/deleteTemplate.ts
+++ b/server/src/controllers/template/deleteTemplate.ts
@@ -1,6 +1,6 @@
 import { publicProcedure, protectedProcedure } from '../../trpc';
 import { TemplateNotFoundError } from '../../helpers/errors';
-import { z } from 'zod';
+import * as validator from '@packrat/validations';
 import { Template } from '../../drizzle/methods/template';
 
 // import { prisma } from '../../prisma';
@@ -34,7 +34,7 @@ import { Template } from '../../drizzle/methods/template';
 export function deleteTemplateRoute() {
   const templateClass = new Template();
   return protectedProcedure
-    .input(z.object({ templateId: z.string() }))
+    .input(validator.deleteTemplate)
     .mutation(async (opts) => {
       const { templateId } = opts.input;
       const template = await templateClass.findTemplate(templateId);
diff --git a/server/src/controllers/template/editTemplate.ts b/server/src/controllers/template/editTemplate.ts
index 2f904145a..c9f73a7c4 100644
--- a/server/src/controllers/template/editTemplate.ts
+++ b/server/src/controllers/template/editTemplate.ts
@@ -1,6 +1,7 @@
 import { publicProcedure, protectedProcedure } from '../../trpc';
 import { editTemplateService } from '../../services/template/template.service';
 import { z } from 'zod';
+import * as validator from '@packrat/validations';
 
 /**
  * Edits a template.
@@ -22,13 +23,7 @@ import { z } from 'zod';
 
 export function editTemplateRoute() {
   return protectedProcedure
-    .input(
-      z.object({
-        templateId: z.string(),
-        type: z.any(),
-        isGlobalTemplate: z.boolean(),
-      }),
-    )
+    .input(validator.editTemplate)
     .mutation(async (opts) => {
       const { templateId, type, isGlobalTemplate } = opts.input;
       const updatedTemplate = await editTemplateService(
diff --git a/server/src/controllers/template/getTemplateById.ts b/server/src/controllers/template/getTemplateById.ts
index 0af9506a1..efc9b52e7 100644
--- a/server/src/controllers/template/getTemplateById.ts
+++ b/server/src/controllers/template/getTemplateById.ts
@@ -1,7 +1,7 @@
 import { publicProcedure, protectedProcedure } from '../../trpc';
 import { TemplateNotFoundError } from '../../helpers/errors';
 // import { responseHandler } from '../../helpers/responseHandler';
-import { z } from 'zod';
+import * as validator from '@packrat/validations';
 import { Template } from '../../drizzle/methods/template';
 
 // import { prisma } from '../../prisma';
@@ -37,7 +37,7 @@ import { Template } from '../../drizzle/methods/template';
 export function getTemplateByIdRoute() {
   const templateClass = new Template();
   return protectedProcedure
-    .input(z.object({ templateId: z.string() }))
+    .input(validator.getTemplateById)
     .query(async (opts) => {
       const { templateId } = opts.input;
       const template = await templateClass.findTemplate(templateId, true);
diff --git a/server/src/routes/getParkRoutes.ts b/server/src/routes/getParkRoutes.ts
index 736b714aa..ab292ee9d 100644
--- a/server/src/routes/getParkRoutes.ts
+++ b/server/src/routes/getParkRoutes.ts
@@ -1,8 +1,10 @@
 import { Hono } from 'hono';
+import * as validator from '@packrat/validations';
 import { getParksRoute as getParks } from '../controllers/getParks/index';
 import { tryCatchWrapper } from '../helpers/tryCatchWrapper';
 import authTokenMiddleware from '../middleware/auth';
 import checkRole from '../middleware/checkRole';
+import { zodParser } from '../middleware/validators/zodParser';
 
 const router = new Hono();
 
@@ -10,6 +12,7 @@ router.get(
   '/',
   authTokenMiddleware as any,
   checkRole(['user', 'admin']) as any,
+  ((req, res, next) => zodParser(validator.getParks, req.body, next)) as any,
   tryCatchWrapper(getParks),
 );
 
diff --git a/server/src/routes/getTrailRoutes.ts b/server/src/routes/getTrailRoutes.ts
index e5e434202..a765117d6 100644
--- a/server/src/routes/getTrailRoutes.ts
+++ b/server/src/routes/getTrailRoutes.ts
@@ -1,8 +1,10 @@
 import { Hono } from 'hono';
+import * as validator from '@packrat/validations';
 import { getTrailsRoute as getTrails } from '../controllers/getTrail/index';
 import { tryCatchWrapper } from '../helpers/tryCatchWrapper';
 import authTokenMiddleware from '../middleware/auth';
 import checkRole from '../middleware/checkRole';
+import { zodParser } from '../middleware/validators/zodParser';
 
 const router = new Hono();
 
@@ -10,6 +12,7 @@ router.post(
   '/',
   authTokenMiddleware as any,
   checkRole(['user', 'admin']) as any,
+  ((req, res, next) => zodParser(validator.getTrails, req.body, next)) as any,
   tryCatchWrapper(getTrails),
 );
 
diff --git a/server/src/routes/itemRoutes.ts b/server/src/routes/itemRoutes.ts
index 3c48ab4db..1e7e86116 100644
--- a/server/src/routes/itemRoutes.ts
+++ b/server/src/routes/itemRoutes.ts
@@ -249,6 +249,8 @@ router.get(
   '/global',
   authTokenMiddleware as any,
   checkRole(['user', 'admin']) as any,
+  ((req, res, next) =>
+    zodParser(validator.getItemsGlobally, req.body, next)) as any,
   tryCatchWrapper(getItemsGlobally),
 );
 
@@ -269,6 +271,8 @@ router.post(
   '/global/select/:packId',
   authTokenMiddleware as any,
   checkRole(['user', 'admin']) as any,
+  ((req, res, next) =>
+    zodParser(validator.addGlobalItemToPack, req.body, next)) as any,
   tryCatchWrapper(addGlobalItemToPack),
 );
 /**
@@ -288,6 +292,8 @@ router.put(
   '/global/:itemId',
   authTokenMiddleware as any,
   checkRole(['user', 'admin']) as any,
+  ((req, res, next) =>
+    zodParser(validator.editGlobalItemAsDuplicate, req.body, next)) as any,
   tryCatchWrapper(editGlobalItemAsDuplicate),
 );
 
@@ -315,6 +321,8 @@ router.delete(
   '/global/:itemId',
   authTokenMiddleware as any,
   checkRole(['user', 'admin']) as any,
+  ((req, res, next) =>
+    zodParser(validator.deleteGlobalItem, req.body, next)) as any,
   tryCatchWrapper(deleteGlobalItem),
 );
 
diff --git a/server/src/routes/openAiRoutes.ts b/server/src/routes/openAiRoutes.ts
index b7002a172..aa633c6c6 100644
--- a/server/src/routes/openAiRoutes.ts
+++ b/server/src/routes/openAiRoutes.ts
@@ -1,4 +1,5 @@
 import { Hono } from 'hono';
+import * as validator from '@packrat/validations';
 import {
   getAIResponseRoute as getAIResponse,
   getUserChatsRoute as getUserChats,
@@ -6,6 +7,7 @@ import {
 import { tryCatchWrapper } from '../helpers/tryCatchWrapper';
 import authTokenMiddleware from '../middleware/auth';
 import checkRole from '../middleware/checkRole';
+import { zodParser } from '../middleware/validators/zodParser';
 
 const router = new Hono();
 
@@ -57,6 +59,8 @@ router.post(
   '/ai-response',
   authTokenMiddleware as any,
   checkRole(['user', 'admin']) as any,
+  ((req, res, next) =>
+    zodParser(validator.getAIResponse, req.body, next)) as any,
   tryCatchWrapper(getAIResponse),
 );
 
@@ -64,6 +68,8 @@ router.get(
   '/user-chats/:userId',
   authTokenMiddleware as any,
   checkRole(['user', 'admin']) as any,
+  ((req, res, next) =>
+    zodParser(validator.getUserChats, req.body, next)) as any,
   tryCatchWrapper(getUserChats),
 );
 

From 1222d7870e3b9c1206e4a7921ae4682676f33178 Mon Sep 17 00:00:00 2001
From: pinocchio-life-like <icbr19fl@gmail.com>
Date: Sat, 6 Jul 2024 17:10:16 +0300
Subject: [PATCH 159/257] update dependencies

---
 server/package.json |   2 -
 yarn.lock           | 130 +-------------------------------------------
 2 files changed, 2 insertions(+), 130 deletions(-)

diff --git a/server/package.json b/server/package.json
index 1fdd98b6d..4b470d08a 100644
--- a/server/package.json
+++ b/server/package.json
@@ -52,7 +52,6 @@
     "@types/bcrypt": "^5.0.0",
     "@types/cors": "^2.8.13",
     "@types/csurf": "^1.11.2",
-    "@types/mongoose": "^5.11.97",
     "@types/node": "^20.14.2",
     "@types/swagger-jsdoc": "^6.0.1",
     "@types/swagger-ui-express": "^4.1.3",
@@ -79,7 +78,6 @@
     "googleapis": "^118.0.0",
     "helmet": "^7.0.0",
     "hono": "^4.2.7",
-    "http2": "^3.3.7",
     "i": "^0.3.7",
     "joi": "^17.9.2",
     "jsonwebtoken": "^9.0.1",
diff --git a/yarn.lock b/yarn.lock
index 3f8bdb779..41c44d7b3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5069,7 +5069,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@mongodb-js/saslprep@npm:^1.1.0, @mongodb-js/saslprep@npm:^1.1.5":
+"@mongodb-js/saslprep@npm:^1.1.0":
   version: 1.1.7
   resolution: "@mongodb-js/saslprep@npm:1.1.7"
   dependencies:
@@ -11130,15 +11130,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/mongoose@npm:^5.11.97":
-  version: 5.11.97
-  resolution: "@types/mongoose@npm:5.11.97"
-  dependencies:
-    mongoose: "npm:*"
-  checksum: 10/54c896814a92898535eb8965f90308f2661b75f4a53e28405802fbe9f90ba7d37140f151b1e291e08555a1700d3486911104c108ed02a94c6feddeab6bd3bfea
-  languageName: node
-  linkType: hard
-
 "@types/node-fetch@npm:^2.6.11, @types/node-fetch@npm:^2.6.4":
   version: 2.6.11
   resolution: "@types/node-fetch@npm:2.6.11"
@@ -11442,15 +11433,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/whatwg-url@npm:^11.0.2":
-  version: 11.0.4
-  resolution: "@types/whatwg-url@npm:11.0.4"
-  dependencies:
-    "@types/webidl-conversions": "npm:*"
-  checksum: 10/5acd60dbd49df34b9131ea75dc5e24b03e084cc4ed5a273ddd801fdaf21c896abbbb846bb3ba71ffd5c715120bac0454debe569f39b9177887fb7636d65cdae4
-  languageName: node
-  linkType: hard
-
 "@types/whatwg-url@npm:^8.2.1":
   version: 8.2.2
   resolution: "@types/whatwg-url@npm:8.2.2"
@@ -14524,13 +14506,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"bson@npm:^6.4.0, bson@npm:^6.5.0":
-  version: 6.7.0
-  resolution: "bson@npm:6.7.0"
-  checksum: 10/d4bc1d9514c67dbcb8451b7be95704e6e7cb262f0d11c938715c21297ab5550b0e2f3badf5480d53c4b3f899a84f2ed8708f3f46cad83ec52059f076aad8e1cd
-  languageName: node
-  linkType: hard
-
 "buffer-alloc-unsafe@npm:^1.1.0":
   version: 1.1.0
   resolution: "buffer-alloc-unsafe@npm:1.1.0"
@@ -22372,13 +22347,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"http2@npm:^3.3.7":
-  version: 3.3.7
-  resolution: "http2@npm:3.3.7"
-  checksum: 10/414cacb8ad90314a3a3e152c94697df709e4d810492c010f44630585d8c4d96cd74fe350b3dca4ccb10bb2b33d6381d61330c7d67d7a682f4368425e3f178c09
-  languageName: node
-  linkType: hard
-
 "httpntlm@npm:1.6.1":
   version: 1.6.1
   resolution: "httpntlm@npm:1.6.1"
@@ -24493,13 +24461,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"kareem@npm:2.6.3":
-  version: 2.6.3
-  resolution: "kareem@npm:2.6.3"
-  checksum: 10/8c2a2795b9b8537ad592d30e6a607e7db737c7401d4c178fa4f2984e7bb7444d0f185570ae0132633aeef8b3eb27d1b5fded07921661738a5723681eb6d246b4
-  languageName: node
-  linkType: hard
-
 "kdbush@npm:^3.0.0":
   version: 3.0.0
   resolution: "kdbush@npm:3.0.0"
@@ -26872,16 +26833,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"mongodb-connection-string-url@npm:^3.0.0":
-  version: 3.0.1
-  resolution: "mongodb-connection-string-url@npm:3.0.1"
-  dependencies:
-    "@types/whatwg-url": "npm:^11.0.2"
-    whatwg-url: "npm:^13.0.0"
-  checksum: 10/f58918305637995c69a9a765ce3b442695195bb387d4deabfd9f1700bddc9d74e66136ff78e1d4aa24eb6877ae9b0f80c2699ebac8cadb0475b272da44a2623a
-  languageName: node
-  linkType: hard
-
 "mongodb@npm:5.9.1":
   version: 5.9.1
   resolution: "mongodb@npm:5.9.1"
@@ -26914,40 +26865,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"mongodb@npm:6.5.0":
-  version: 6.5.0
-  resolution: "mongodb@npm:6.5.0"
-  dependencies:
-    "@mongodb-js/saslprep": "npm:^1.1.5"
-    bson: "npm:^6.4.0"
-    mongodb-connection-string-url: "npm:^3.0.0"
-  peerDependencies:
-    "@aws-sdk/credential-providers": ^3.188.0
-    "@mongodb-js/zstd": ^1.1.0
-    gcp-metadata: ^5.2.0
-    kerberos: ^2.0.1
-    mongodb-client-encryption: ">=6.0.0 <7"
-    snappy: ^7.2.2
-    socks: ^2.7.1
-  peerDependenciesMeta:
-    "@aws-sdk/credential-providers":
-      optional: true
-    "@mongodb-js/zstd":
-      optional: true
-    gcp-metadata:
-      optional: true
-    kerberos:
-      optional: true
-    mongodb-client-encryption:
-      optional: true
-    snappy:
-      optional: true
-    socks:
-      optional: true
-  checksum: 10/537fcb59035c907b5e0a85f806893c4a0936e8d04a0cf788f0720b539195160036d6c43e40bdc0c48432d24c42e969c296adcb1eabbf70a2c5a7aafe5459e800
-  languageName: node
-  linkType: hard
-
 "mongoose-autopopulate@npm:^1.0.1":
   version: 1.1.0
   resolution: "mongoose-autopopulate@npm:1.1.0"
@@ -26964,21 +26881,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"mongoose@npm:*":
-  version: 8.3.4
-  resolution: "mongoose@npm:8.3.4"
-  dependencies:
-    bson: "npm:^6.5.0"
-    kareem: "npm:2.6.3"
-    mongodb: "npm:6.5.0"
-    mpath: "npm:0.9.0"
-    mquery: "npm:5.0.0"
-    ms: "npm:2.1.3"
-    sift: "npm:17.1.3"
-  checksum: 10/eadaec67c8ab13989dc515b0d63eefb7344ccbc7cea1bab7f57ce7e7285f6ba9cfb0f8c19ddf4ce1dcef632d9fc4f3eff9c23fcc4bd72152e1bba53173caad5b
-  languageName: node
-  linkType: hard
-
 "mongoose@npm:^7.4.0":
   version: 7.6.11
   resolution: "mongoose@npm:7.6.11"
@@ -30175,7 +30077,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"punycode@npm:^2.1.0, punycode@npm:^2.1.1, punycode@npm:^2.3.0":
+"punycode@npm:^2.1.0, punycode@npm:^2.1.1":
   version: 2.3.1
   resolution: "punycode@npm:2.3.1"
   checksum: 10/febdc4362bead22f9e2608ff0171713230b57aff9dddc1c273aa2a651fbd366f94b7d6a71d78342a7c0819906750351ca7f2edd26ea41b626d87d6a13d1bd059
@@ -32437,7 +32339,6 @@ __metadata:
     "@types/cors": "npm:^2.8.13"
     "@types/csurf": "npm:^1.11.2"
     "@types/jest": "npm:^29.5.11"
-    "@types/mongoose": "npm:^5.11.97"
     "@types/node": "npm:^20.14.2"
     "@types/swagger-jsdoc": "npm:^6.0.1"
     "@types/swagger-ui-express": "npm:^4.1.3"
@@ -32477,7 +32378,6 @@ __metadata:
     googleapis: "npm:^118.0.0"
     helmet: "npm:^7.0.0"
     hono: "npm:^4.2.7"
-    http2: "npm:^3.3.7"
     i: "npm:^0.3.7"
     jest: "npm:^29.7.0"
     joi: "npm:^17.9.2"
@@ -32778,13 +32678,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"sift@npm:17.1.3":
-  version: 17.1.3
-  resolution: "sift@npm:17.1.3"
-  checksum: 10/278a0308cb4c7a48620caeb25339072fcef50d9a1296bc78c9710b1bb974ef5b3e375acf6646fe0a698e0f3ea19af81c11a348980dc28ff80c979e050f7f8585
-  languageName: node
-  linkType: hard
-
 "siginfo@npm:^2.0.0":
   version: 2.0.0
   resolution: "siginfo@npm:2.0.0"
@@ -34568,15 +34461,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tr46@npm:^4.1.1":
-  version: 4.1.1
-  resolution: "tr46@npm:4.1.1"
-  dependencies:
-    punycode: "npm:^2.3.0"
-  checksum: 10/ca811409c46de84618e4e7f90469184b50d16618b2f027a5ebeccb0d83ee7f51eca229e71f5b15cdec008ca247ad2ccabfdd3daf861604fcc7e341d0c35c30ca
-  languageName: node
-  linkType: hard
-
 "tr46@npm:~0.0.3":
   version: 0.0.3
   resolution: "tr46@npm:0.0.3"
@@ -36346,16 +36230,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"whatwg-url@npm:^13.0.0":
-  version: 13.0.0
-  resolution: "whatwg-url@npm:13.0.0"
-  dependencies:
-    tr46: "npm:^4.1.1"
-    webidl-conversions: "npm:^7.0.0"
-  checksum: 10/1675f5b786bbc2809de8bde5e0c99790cd50c36227942c851b1c2445cc1860a26fd15a4d6eca2cd996882bfde93b66fbc88864cd9b84f2c725427afd81e0f024
-  languageName: node
-  linkType: hard
-
 "whatwg-url@npm:^5.0.0":
   version: 5.0.0
   resolution: "whatwg-url@npm:5.0.0"

From ef57880fbc877b4609349649a71cee000fc60851 Mon Sep 17 00:00:00 2001
From: Taron <taron.aleksanyan.20@gmail.com>
Date: Sat, 6 Jul 2024 20:28:44 +0400
Subject: [PATCH 160/257] FIx mobile app crash

---
 packages/app/auth/AuthWrapper.tsx | 28 +++++++++++++++-------------
 1 file changed, 15 insertions(+), 13 deletions(-)

diff --git a/packages/app/auth/AuthWrapper.tsx b/packages/app/auth/AuthWrapper.tsx
index dbad62011..2d3a58ec0 100644
--- a/packages/app/auth/AuthWrapper.tsx
+++ b/packages/app/auth/AuthWrapper.tsx
@@ -12,22 +12,24 @@ interface AuthWrapperProps {
 
 export const AuthWrapper = ({
   children,
-  unauthorizedElement = <Redirect to="/login" />,
+  unauthorizedElement,
 }: AuthWrapperProps) => {
+  const loadingElement =
+    Platform.OS === 'web' ? (
+      <RText>Loading...</RText>
+    ) : (
+      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+        <RSpinner color="#0284c7" />
+      </View>
+    );
+
+  const defaultUnauthorizedElement =
+    Platform.OS === 'web' ? <Redirect to="/login" /> : <LandingPage />;
+
   return (
     <AuthLoader
-      loadingElement={
-        Platform.OS === 'web' ? (
-          <RText>Loading...</RText>
-        ) : (
-          <View
-            style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}
-          >
-            <RSpinner color="#0284c7" />
-          </View>
-        )
-      }
-      unauthorizedElement={unauthorizedElement || <LandingPage />}
+      loadingElement={loadingElement}
+      unauthorizedElement={unauthorizedElement || defaultUnauthorizedElement}
     >
       {children}
     </AuthLoader>

From f68bd8352341c759a3c4f4e2107586b9fce161e7 Mon Sep 17 00:00:00 2001
From: Muhammad Hassan <mh7722178@gmail.com>
Date: Sat, 6 Jul 2024 22:23:21 +0500
Subject: [PATCH 161/257] Fixed More Remaining Types

---
 packages/app/auth/hooks/useUserSetter.ts      |  2 +-
 packages/app/components/ScoreContainer.tsx    |  2 +-
 .../components/Suggestion/SuggestionList.tsx  | 28 +++++++++++++++++--
 packages/app/components/card/CustomCard.tsx   |  8 ++----
 packages/app/components/chat/index.tsx        |  2 +-
 .../app/components/itemtable/itemTable.tsx    | 28 +++++++++++++++++--
 .../app/components/pack/CopyPackModal.tsx     |  2 +-
 packages/app/components/pack/PackDetails.tsx  |  2 +-
 .../app/components/pack_table/TableItem.tsx   |  7 ++++-
 packages/app/components/user/UserDataCard.tsx | 16 +++++++++--
 packages/app/hooks/chat/useChat.ts            | 11 ++++++--
 packages/app/hooks/packs/useAddNewPack.ts     |  5 +++-
 .../app/screens/user/ProfileContainer.tsx     | 11 --------
 .../ui/src/Bento/elements/tables/Basic.tsx    |  2 +-
 14 files changed, 92 insertions(+), 34 deletions(-)

diff --git a/packages/app/auth/hooks/useUserSetter.ts b/packages/app/auth/hooks/useUserSetter.ts
index f4d959c71..c2724684d 100644
--- a/packages/app/auth/hooks/useUserSetter.ts
+++ b/packages/app/auth/hooks/useUserSetter.ts
@@ -6,7 +6,7 @@ export const useUserSetter = () => {
   const utils = queryTrpc.useUtils();
 
   const setUser = useCallback(
-    (data: User | null) => utils.getMe.setData(undefined, data),
+    (data: User | null) => utils.getMe.setData(undefined, data as any),
     [utils],
   );
 
diff --git a/packages/app/components/ScoreContainer.tsx b/packages/app/components/ScoreContainer.tsx
index d03dee028..cb890671b 100644
--- a/packages/app/components/ScoreContainer.tsx
+++ b/packages/app/components/ScoreContainer.tsx
@@ -171,7 +171,7 @@ const GradingPieChart: React.FC<GradingPieChartProps> = ({
 interface ScoreContainerProps {
   type: 'pack' | 'trip';
   data: any;
-  isOwner: boolean;
+  isOwner: boolean | undefined | null;
 }
 export const ScoreContainer: React.FC<ScoreContainerProps> = ({
   type,
diff --git a/packages/app/components/Suggestion/SuggestionList.tsx b/packages/app/components/Suggestion/SuggestionList.tsx
index e2a88e418..b4efd7c6e 100644
--- a/packages/app/components/Suggestion/SuggestionList.tsx
+++ b/packages/app/components/Suggestion/SuggestionList.tsx
@@ -4,12 +4,36 @@ import { RButton } from '@packrat/ui';
 import useTheme from 'app/hooks/useTheme';
 import { useAddPackItem } from 'app/hooks/packs/useAddPackItem';
 
-export function SuggestionList({ suggestion, onAddItem }) {
+interface Category {
+  id: string;
+  name: string;
+}
+
+interface Item {
+  id: string;
+  name: string;
+  ownerId: string;
+  weight: number;
+  quantity: number;
+  unit: string;
+  category: Category;
+}
+
+interface SuggestionListProps {
+  suggestion: { Items: Item[] } | null;
+  onAddItem: (itemId: string) => void;
+}
+
+export function SuggestionList({ suggestion, onAddItem }: SuggestionListProps) {
   const [itemsList, setItemsList] = useState([]);
   const { isDark } = useTheme();
 
   useEffect(() => {
-    setItemsList(suggestion?.Items || []);
+    if (suggestion?.Items) {
+      setItemsList(suggestion.Items);
+    } else {
+      setItemsList([]);
+    }
   }, [suggestion]);
 
   return (
diff --git a/packages/app/components/card/CustomCard.tsx b/packages/app/components/card/CustomCard.tsx
index 23659cba2..fa507d482 100644
--- a/packages/app/components/card/CustomCard.tsx
+++ b/packages/app/components/card/CustomCard.tsx
@@ -15,10 +15,7 @@ interface CustomCardProps {
   type: 'pack' | 'trip';
   destination?: string;
   data: {
-    owner_id: {
-      id: string;
-      username?: string;
-    };
+    owner_id: string
     owners?: Array<{ name: string }> | null;
   };
 }
@@ -38,6 +35,7 @@ export const CustomCard = ({
   if (!data) return null;
 
   const isWeb = Platform.OS === 'web';
+  console.log('CustomCardProps ', data  )
 
   return (
     <View
@@ -73,7 +71,7 @@ export const CustomCard = ({
           )}
         </View>
         <RSeparator />
-        {type === 'pack' && authUser?.id === data.owner_id.id ? (
+        {type === 'pack' && authUser?.id === data.owner_id ? (
           <>
             <View
               style={
diff --git a/packages/app/components/chat/index.tsx b/packages/app/components/chat/index.tsx
index 0fc79bf78..13be5d95e 100644
--- a/packages/app/components/chat/index.tsx
+++ b/packages/app/components/chat/index.tsx
@@ -29,7 +29,7 @@ interface ChatComponentProps {
 interface ChatModalTriggerProps {
   title: string;
   trigger: string;
-  itemTypeId: string | null;
+  itemTypeId: string | undefined | null;
   type: string;
 }
 
diff --git a/packages/app/components/itemtable/itemTable.tsx b/packages/app/components/itemtable/itemTable.tsx
index 53d456137..6854939e2 100644
--- a/packages/app/components/itemtable/itemTable.tsx
+++ b/packages/app/components/itemtable/itemTable.tsx
@@ -6,11 +6,17 @@ import useTheme from '../../hooks/useTheme';
 import Layout from 'app/components/layout/Layout';
 import { PaginatedSortedTable } from '@packrat/ui/src/Bento/elements/tables';
 import { PaginationLimit } from '../paginationChooseLimit';
+
+interface Category {
+  id: string;
+  name: string;
+}
+
 interface ItemType {
   global: string;
   name: string;
   weight: number;
-  category?: { name: string };
+  category?: Category;
   quantity: number;
   unit: string;
   id: string;
@@ -21,6 +27,10 @@ interface ItemType {
   createdAt: any;
 }
 
+interface GroupedData {
+  [type: string]: ItemType[];
+}
+
 interface ItemsTableProps {
   limit: number;
   setLimit: (limit: number) => void;
@@ -55,6 +65,17 @@ export const ItemsTable = ({
   const { xs, xxxs } = useResponsive();
   const { isDark } = useTheme();
 
+  const groupByType = (items: ItemType[]): Record<string, ItemType[]> => {
+    return items.reduce((acc, item) => {
+      const { type } = item;
+      if (!acc[type]) {
+        acc[type] = [];
+      }
+      acc[type].push(item);
+      return acc;
+    }, {} as GroupedData);
+  };
+
   const filteredData = data.map((item) => {
     const {
       id,
@@ -68,6 +89,7 @@ export const ItemsTable = ({
     return filteredItem;
   });
 
+  const groupedData = groupByType(filteredData);
 
   return (
     <Layout>
@@ -85,10 +107,10 @@ export const ItemsTable = ({
             <Loader />
           ) : (
             <PaginatedSortedTable
-              groupedData={filteredData}
+              groupedData={groupedData}
               handleCheckboxChange={handleCheckboxChange}
               onDelete={onDelete}
-              hasPermissions={false}
+              hasPermissions={hasPermissions}
               currentPack={currentPack}
               refetch={refetch}
               setRefetch={setRefetch}
diff --git a/packages/app/components/pack/CopyPackModal.tsx b/packages/app/components/pack/CopyPackModal.tsx
index 06963902d..bb17b00b7 100644
--- a/packages/app/components/pack/CopyPackModal.tsx
+++ b/packages/app/components/pack/CopyPackModal.tsx
@@ -30,7 +30,7 @@ export const CopyPackModal = ({ isOpen, onClose, currentPack }) => {
     try {
       const response = await addNewPackAsync({
         name: packName,
-        is_public: currentPack.is_public,
+        isPublic: currentPack.is_public,
       });
       for (const item of currentPack.items) {
         await addPackItem({
diff --git a/packages/app/components/pack/PackDetails.tsx b/packages/app/components/pack/PackDetails.tsx
index 7ed356b73..64d4cb592 100644
--- a/packages/app/components/pack/PackDetails.tsx
+++ b/packages/app/components/pack/PackDetails.tsx
@@ -93,7 +93,7 @@ export function PackDetails() {
                               currentPack={currentPack}
                               isAddItemModalOpen={isAddItemModalOpen}
                               setIsAddItemModalOpen={setIsAddItemModalOpen}
-                              refetch={refetch}
+                              // refetch={refetch}
                               setRefetch={() => setRefetch((prev) => !prev)}
                             />
                           ) : null;
diff --git a/packages/app/components/pack_table/TableItem.tsx b/packages/app/components/pack_table/TableItem.tsx
index 9ebff8560..a07b7bd42 100644
--- a/packages/app/components/pack_table/TableItem.tsx
+++ b/packages/app/components/pack_table/TableItem.tsx
@@ -11,7 +11,7 @@ import loadStyles from './packtable.style';
 import { RText, ZDropdown } from '@packrat/ui';
 import { useAuthUser } from 'app/auth/hooks';
 
-type ModalName = 'edit' | 'delete';
+type ModalName = 'edit' | 'delete' | null;
 
 interface TableItemProps {
   itemData: any;
@@ -25,6 +25,11 @@ interface TableItemProps {
   setRefetch: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
+interface DropDownItems{
+  label: string,
+  onSelect: () => void,
+}
+
 const TableItem = ({
   itemData,
   onDelete,
diff --git a/packages/app/components/user/UserDataCard.tsx b/packages/app/components/user/UserDataCard.tsx
index 1f6633588..8de5e880d 100644
--- a/packages/app/components/user/UserDataCard.tsx
+++ b/packages/app/components/user/UserDataCard.tsx
@@ -46,7 +46,19 @@ const UserDataCard = ({
   differentUser,
 }: UserDataCardProps) => {
   const { editPack: changePackStatus } = useEditPack();
-
+  console.log("Data Data Data ",type,
+    destination,
+    id,
+    name,
+    total_weight,
+    is_public,
+    favorited_by,
+    favorites_count,
+    createdAt,
+    state,
+    setState,
+    index,
+    differentUser,)
   /**
    * Updates the state at the specified index with the given boolean value.
    *
@@ -147,7 +159,7 @@ const UserDataCard = ({
                   // marginTop: '-3px',
                 }}
               >
-                Total Weight: {total_weight?.toFixed(2)}
+                Total Weight: {total_weight?.toFixed(2)}g
               </RText>
             ) : (
               <RText
diff --git a/packages/app/hooks/chat/useChat.ts b/packages/app/hooks/chat/useChat.ts
index 95d3603b1..a63291434 100644
--- a/packages/app/hooks/chat/useChat.ts
+++ b/packages/app/hooks/chat/useChat.ts
@@ -24,6 +24,8 @@ interface Suggestions {
 
 export const useChat = (itemTypeId = null) => {
   const user = useAuthUser();
+
+  console.log('user', user)
   const [typeId, setTypeId] = useState(itemTypeId);
   const [isLoading, setIsLoading] = useState(false);
   const [isAnalysisLoading, setIsAnalysisLoading] = useState(false);
@@ -34,7 +36,10 @@ export const useChat = (itemTypeId = null) => {
 
   const [userInput, setUserInput] = useState('');
 
-  const { data: chatsData, refetch } = useGetUserChats(user.id, typeId);
+  const { data: chatsData, refetch } = useGetUserChats(
+    user.id,
+    typeId.itemTypeId,
+  );
 
   const { getAIResponse } = useGetAIResponse();
   const { getAISuggestions } = useGetAISuggestions();
@@ -75,7 +80,7 @@ export const useChat = (itemTypeId = null) => {
     setIsLoading(true);
     setUserInput('');
     await getAIResponse({
-      userId: user?.id,
+      userId: user.id,
       userInput: userMessage,
       itemTypeId: typeId.itemTypeId,
       type: typeId.type,
@@ -133,4 +138,4 @@ export const useChat = (itemTypeId = null) => {
     isAnalysisLoading,
     setSuggestions,
   };
-};
+};
\ No newline at end of file
diff --git a/packages/app/hooks/packs/useAddNewPack.ts b/packages/app/hooks/packs/useAddNewPack.ts
index 78100007b..ac16b8c04 100644
--- a/packages/app/hooks/packs/useAddNewPack.ts
+++ b/packages/app/hooks/packs/useAddNewPack.ts
@@ -120,7 +120,10 @@ export const useAddNewPack = (): UseAddNewPackResult  => {
           ownerId: packData.owner_id,
           queryBy: '',
         },
-        () => newQueryData,
+        () => ({
+          ...newQueryData,
+          message: oldQueryData?.message,
+        }),
       );
 
       setName('');
diff --git a/packages/app/screens/user/ProfileContainer.tsx b/packages/app/screens/user/ProfileContainer.tsx
index 50009c63d..ba4c24ed2 100644
--- a/packages/app/screens/user/ProfileContainer.tsx
+++ b/packages/app/screens/user/ProfileContainer.tsx
@@ -198,17 +198,6 @@ export default function ProfileContainer({ id = null }) {
     error,
   } = useProfile(id);
 
-  useEffect(() => {
-    console.log('ProfileContainer rendered');
-    console.log({
-      isLoading,
-      error,
-      user,
-      favoritesList,
-      packsList,
-      tripsList,
-    });
-  }, [isLoading, error, user, favoritesList, packsList, tripsList]);
   return (
     <View>
       <ScrollView>
diff --git a/packages/ui/src/Bento/elements/tables/Basic.tsx b/packages/ui/src/Bento/elements/tables/Basic.tsx
index b6b286843..7c564d099 100644
--- a/packages/ui/src/Bento/elements/tables/Basic.tsx
+++ b/packages/ui/src/Bento/elements/tables/Basic.tsx
@@ -45,7 +45,7 @@ interface BasicTableProps {
   onDelete: (params: { itemId: string; packId: string }) => void;
   hasPermissions: boolean;
   currentPack: any;
-  refetch: () => void;
+  refetch: boolean;
   setRefetch: React.Dispatch<React.SetStateAction<boolean>>;
 }
 

From 4332578c1b537cf7785217d62004c5743bf2e6df Mon Sep 17 00:00:00 2001
From: Muhammad Hassan <mh7722178@gmail.com>
Date: Sun, 7 Jul 2024 16:10:13 +0500
Subject: [PATCH 162/257] Fixed More Types

---
 .../Suggestion/SuggestionDescription.tsx      | 32 +++++++++-------
 .../components/Suggestion/SuggestionList.tsx  | 18 +++++----
 .../app/components/itemtable/itemTable.tsx    | 12 +++---
 .../components/navigation/Navbar/Navbar.tsx   | 38 +++++++++----------
 packages/app/hooks/chat/useChat.ts            |  9 ++++-
 .../hooks/destination/useGetPhotonDetails.ts  |  2 +-
 packages/app/hooks/water/useWater.ts          |  3 +-
 .../NavigationList/NavigationList.tsx         | 10 +++--
 packages/app/screens/user/Settings.tsx        | 19 ++++++----
 9 files changed, 82 insertions(+), 61 deletions(-)

diff --git a/packages/app/components/Suggestion/SuggestionDescription.tsx b/packages/app/components/Suggestion/SuggestionDescription.tsx
index 1c76f4d23..7e4315281 100644
--- a/packages/app/components/Suggestion/SuggestionDescription.tsx
+++ b/packages/app/components/Suggestion/SuggestionDescription.tsx
@@ -5,7 +5,7 @@ import { AnimatePresence, Text, Theme, View, styled } from 'tamagui';
 import useTheme from 'app/hooks/useTheme';
 
 const List = styled(FlatList<Message>, {
-  backgroundColor: '$background',
+  // backgroundColor: '$background',
   gap: '$3',
 });
 
@@ -34,9 +34,7 @@ export function SuggestionDescription({ data }: { data: Message[] }) {
 
   return (
     <View
-      flexDirection="column"
-      height={'100%'}
-      minWidth="100%"
+      style={{ flexDirection: 'column', height: '100%', minWidth: '100%' }}
       $group-window-gtXs={{ height: 700 }}
     >
       <List
@@ -46,6 +44,7 @@ export function SuggestionDescription({ data }: { data: Message[] }) {
         data={messages}
         renderItem={renderItem}
         windowSize={2}
+        style={{ backgroundColor: '$background' }}
       />
     </View>
   );
@@ -78,21 +77,26 @@ function ChatItem({ item, index }: { item: Message; index: number }) {
     <AnimatePresence>
       {showMessage && (
         <View
-          flexDirection={'row'}
-          alignItems="flex-start"
+          style={{
+            padding: '5px 5px',
+            background: isDark ? '#333' : 'white',
+            flexDirection: 'row',
+            alignItems: 'flex-start',
+            alignSelf: 'self-start',
+            maxWidth: '100%',
+            minWidth: '100%'
+          }}
           gap="$4"
-          alignSelf={'flex-start'}
-          maxWidth="100%"
-          minWidth="100%"
-          style={{ padding: '5px 5px', background: isDark ? '#333' : 'white' }}
         >
           <View
-            flexDirection="column"
-            alignItems={'flex-start'}
+            style={{
+              flexDirection: 'column',
+              alignItems: 'flex-start',
+              justifyContent: 'center',
+              flexShrink: '1'
+            }}
             gap="$2"
             // maxWidth={400}
-            justifyContent="center"
-            flexShrink={1}
           >
             <Theme name={'blue'}>
               <View
diff --git a/packages/app/components/Suggestion/SuggestionList.tsx b/packages/app/components/Suggestion/SuggestionList.tsx
index b4efd7c6e..26b92b860 100644
--- a/packages/app/components/Suggestion/SuggestionList.tsx
+++ b/packages/app/components/Suggestion/SuggestionList.tsx
@@ -25,7 +25,7 @@ interface SuggestionListProps {
 }
 
 export function SuggestionList({ suggestion, onAddItem }: SuggestionListProps) {
-  const [itemsList, setItemsList] = useState([]);
+  const [itemsList, setItemsList] = useState<Item[]>([]);
   const { isDark } = useTheme();
 
   useEffect(() => {
@@ -48,12 +48,14 @@ export function SuggestionList({ suggestion, onAddItem }: SuggestionListProps) {
       alignItems="center"
     >
       <View
+        style={{
+          minWidth: '100%',
+        }}
         $group-window-gtXs={{
           padding: '$3',
           width: 600,
         }}
         gap="$1.5"
-        minWidth="100%"
       >
         {itemsList.map((item, i) => (
           <React.Fragment key={item.id}>
@@ -79,7 +81,6 @@ function Item({ item, onAddItem }) {
   return (
     <YGroup.Item>
       <View
-        flexDirection="row"
         paddingVertical="$1"
         paddingHorizontal="$1.5"
         gap="$2"
@@ -88,10 +89,12 @@ function Item({ item, onAddItem }) {
           gap: '$4',
         }}
         backgroundColor="$color1"
-        alignItems="center"
-        style={{ borderRadius: 5 }}
+        style={{ borderRadius: 5, flexDirection: 'row', aligItems: 'center' }}
       >
-        <View flexDirection="column" flexShrink={1} justifyContent="center">
+        <View
+          style={{ flexDirection: 'column', justifyContent: 'center' }}
+          flexShrink={1}
+        >
           <Text selectable>{item.name}</Text>
           <Text
             selectable
@@ -108,8 +111,7 @@ function Item({ item, onAddItem }) {
           onPress={() => {
             handleAddItem(item);
           }}
-          style={{ borderRadius: 5 }}
-          marginLeft="auto"
+          style={{ borderRadius: 5, marginLeft: 'auto' }}
           disabled={isLoading}
         >
           Add
diff --git a/packages/app/components/itemtable/itemTable.tsx b/packages/app/components/itemtable/itemTable.tsx
index 6854939e2..9f5cfe531 100644
--- a/packages/app/components/itemtable/itemTable.tsx
+++ b/packages/app/components/itemtable/itemTable.tsx
@@ -39,12 +39,12 @@ interface ItemsTableProps {
   data: ItemType[];
   isLoading: boolean;
   totalPages: number;
-  handleCheckboxChange: (itemId: string) => void;
-  onDelete: (params: { itemId: string; packId: string }) => void;
-  hasPermissions: boolean;
-  currentPack: any;
-  refetch: () => void;
-  setRefetch: () => void;
+  handleCheckboxChange?: (itemId: string) => void;
+  onDelete?: (params: { itemId: string; packId: string }) => void;
+  hasPermissions?: boolean;
+  currentPack?: any;
+  refetch?: () => void;
+  setRefetch?: () => void;
 }
 
 export const ItemsTable = ({
diff --git a/packages/app/components/navigation/Navbar/Navbar.tsx b/packages/app/components/navigation/Navbar/Navbar.tsx
index 0fd60159c..74f1812df 100644
--- a/packages/app/components/navigation/Navbar/Navbar.tsx
+++ b/packages/app/components/navigation/Navbar/Navbar.tsx
@@ -42,7 +42,7 @@ export const Navbar = () => {
             />
             <Text
               style={styles.logoText}
-              onClick={() => {
+              onPress={() => {
                 navigate('/');
               }}
             >
@@ -71,7 +71,7 @@ const loadStyles = (currentTheme, isScrolled, screenWidth) => {
     ? NavbarStyles.floatingBg
     : currentTheme.colors.background;
 
-  return {
+  return StyleSheet.create({
     drawerStyles: {
       backgroundColor: currentTheme.colors.background,
     },
@@ -80,22 +80,22 @@ const loadStyles = (currentTheme, isScrolled, screenWidth) => {
       width: '100%',
       margin: 0,
       transition: NavbarStyles.transition,
-      ...(isFloating
-        ? {
-            backdropFilter: NavbarStyles.floatingBlur,
-            marginTop: NavbarStyles.floatingSpacing,
-            padding: NavbarStyles.floatingSpacing,
-            borderRadius: NavbarStyles.floatingRadius,
-          }
-        : {}),
-      ...(isWeb
-        ? {
-            position: "fixed",
-            top: 0,
-            zIndex: 100,
-            width: Platform.OS === 'web' ? '100vw' : '100%',
-          }
-        : {}),
+      ...Platform.select({
+        web: {
+          ...(isFloating
+            ? {
+                backdropFilter: NavbarStyles.floatingBlur,
+                marginTop: NavbarStyles.floatingSpacing,
+                padding: NavbarStyles.floatingSpacing,
+                borderRadius: NavbarStyles.floatingRadius,
+              }
+            : {}),
+          position: 'fixed' as 'fixed' | 'relative',
+          top: 0,
+          zIndex: 100,
+          width: Platform.OS === 'web' ? '100vw' : "100%",
+        },
+      }),
     },
     container: {
       width: '100vw',
@@ -156,5 +156,5 @@ const loadStyles = (currentTheme, isScrolled, screenWidth) => {
       // Apply styles for the selected item's text
       // ...
     },
-  };
+  });
 };
diff --git a/packages/app/hooks/chat/useChat.ts b/packages/app/hooks/chat/useChat.ts
index a63291434..823973bf8 100644
--- a/packages/app/hooks/chat/useChat.ts
+++ b/packages/app/hooks/chat/useChat.ts
@@ -22,11 +22,16 @@ interface Suggestions {
   suggestion: Suggestion[];
 }
 
-export const useChat = (itemTypeId = null) => {
+interface TypeId {
+  itemTypeId: string;
+  type: string;
+}
+
+export const useChat = (itemTypeId: TypeId | null = null) => {
   const user = useAuthUser();
 
   console.log('user', user)
-  const [typeId, setTypeId] = useState(itemTypeId);
+  const [typeId, setTypeId] = useState<TypeId | null>(itemTypeId);
   const [isLoading, setIsLoading] = useState(false);
   const [isAnalysisLoading, setIsAnalysisLoading] = useState(false);
   const [suggestions, setSuggestions] = useState<Suggestions>({
diff --git a/packages/app/hooks/destination/useGetPhotonDetails.ts b/packages/app/hooks/destination/useGetPhotonDetails.ts
index c14d25742..01547fc5d 100644
--- a/packages/app/hooks/destination/useGetPhotonDetails.ts
+++ b/packages/app/hooks/destination/useGetPhotonDetails.ts
@@ -3,7 +3,7 @@ import { queryTrpc } from '../../trpc';
 export const useGetPhotonDetails = ({
   properties,
 }: {
-  properties: { osm_id: string; osm_type: string };
+  properties: { osm_id: string | number; osm_type: string };
 }) => {
   const { osm_id = null, osm_type = null } = properties || {};
   const enabled = Boolean(osm_id && osm_type);
diff --git a/packages/app/hooks/water/useWater.ts b/packages/app/hooks/water/useWater.ts
index 7a9f2fcbc..fef0b22f1 100644
--- a/packages/app/hooks/water/useWater.ts
+++ b/packages/app/hooks/water/useWater.ts
@@ -25,10 +25,11 @@ export const useWater = ({ currentPack, setWaterItem }) => {
     const data = {
       name: 'Water',
       weight: waterWeight,
-      quantity: '1',
+      quantity: 1,
       unit: 'oz',
       packId: currentPack.id,
       type: ItemCategoryEnum.WATER,
+      ownerId: currentPack?.ownerId,
     };
 
     addPackItem(data);
diff --git a/packages/app/screens/appearance/components/NavigationList/NavigationList.tsx b/packages/app/screens/appearance/components/NavigationList/NavigationList.tsx
index b1bf3e02a..64c1614fc 100644
--- a/packages/app/screens/appearance/components/NavigationList/NavigationList.tsx
+++ b/packages/app/screens/appearance/components/NavigationList/NavigationList.tsx
@@ -24,8 +24,10 @@ export function NavigationList({
         return (
           <Accordion.Item key={key} value={key}>
             <Accordion.Trigger
-              flexDirection="row"
-              justifyContent="space-between"
+              style={{
+                flexDirection: 'row',
+                justifyContent: 'space-between'
+              }}
             >
               {({ open }: { open: boolean }) => (
                 <>
@@ -42,7 +44,9 @@ export function NavigationList({
                 bordered
                 width="100%"
                 size="$4"
-                overflow="auto"
+                style={{
+                  overflow: 'auto'
+                }}
               >
                 {value.map(({ route }) => {
                   return (
diff --git a/packages/app/screens/user/Settings.tsx b/packages/app/screens/user/Settings.tsx
index 797f8e872..9a298859b 100644
--- a/packages/app/screens/user/Settings.tsx
+++ b/packages/app/screens/user/Settings.tsx
@@ -89,8 +89,10 @@ export default function Settings() {
           <RStack
             space="$3"
             maw="100%"
-            width="fit-content"
-            marginHorizontal="auto"
+            style={{
+              width: Platform.OS === 'web' ? null : 'fit-content',
+              marginHorizontal: 'auto',
+            }}
           >
             <ImageUpload
               label="Profile Picture"
@@ -144,11 +146,14 @@ export default function Settings() {
 
         <RStack style={{ marginTop: 20, marginBottom: 10 }}>
           <RH2>Change Password</RH2>
-          <RSeparator marginVertical={8}/>
+          <RSeparator marginVertical={8} />
           <RText size={16}>We will email you to verify the change.</RText>
         </RStack>
         <Form validationSchema={passwordChangeSchema}>
-          <RStack space="$3" width="100%" marginHorizontal="auto">
+          <RStack
+            space="$3"
+            style={{ width: '100%', marginHorizontal: 'auto' }}
+          >
             <RStack space="$2">
               <RLabel htmlFor="oldPassword">Old password</RLabel>
               <FormInput
@@ -186,17 +191,17 @@ export default function Settings() {
         <RStack marginTop={20} marginBottom={10}>
           <RH2>Delete account</RH2>
           <RSeparator marginVertical={8} />
-          <RText fontSize={16}>
+          <RText size={16}>
             Deleting your account will remove all your information from our
             database. This cannot be undone
           </RText>
         </RStack>
         <Form validationSchema={deleteUserForm}>
-          <RStack width="100%" marginHorizontal="auto">
+          <RStack style={{ width: '100%', marginHorizontal: 'auto' }}>
             <RLabel htmlFor="confirmText">
               To confirm this, type "delete"
             </RLabel>
-            <RStack space="$2" flexDirection="row">
+            <RStack space="$2" style={{ flexDirection: 'row' }}>
               <FormInput
                 id="confirmText"
                 style={{ minWidth: 268 }}

From 2ccf508c04ce8729db9e8f50015c61d305ddab25 Mon Sep 17 00:00:00 2001
From: Taron <taron.aleksanyan.20@gmail.com>
Date: Sun, 7 Jul 2024 23:43:29 +0400
Subject: [PATCH 163/257] remove weather week from backend

---
 .../tripRoutesValidator.ts                    |  2 --
 .../src/controllers/weather/getWeatherWeek.ts | 36 -------------------
 server/src/controllers/weather/index.ts       |  1 -
 server/src/routes/trpcRouter.ts               |  3 +-
 .../services/weather/getWeatherWeekService.ts | 28 ---------------
 5 files changed, 1 insertion(+), 69 deletions(-)
 delete mode 100644 server/src/controllers/weather/getWeatherWeek.ts
 delete mode 100644 server/src/services/weather/getWeatherWeekService.ts

diff --git a/packages/validations/src/validations/tripRoutesValidator/tripRoutesValidator.ts b/packages/validations/src/validations/tripRoutesValidator/tripRoutesValidator.ts
index 9e09ccff4..71daee2c7 100644
--- a/packages/validations/src/validations/tripRoutesValidator/tripRoutesValidator.ts
+++ b/packages/validations/src/validations/tripRoutesValidator/tripRoutesValidator.ts
@@ -47,7 +47,6 @@ export const getTripById = z.object({
 
 export const addTripDetails = z.object({
   duration: z.string(),
-  weather: z.string(),
   start_date: z.string(),
   end_date: z.string(),
   destination: z.string(),
@@ -68,7 +67,6 @@ export const editTrip = z.object({
   id: z.string(),
   name: z.string(),
   duration: z.string(),
-  weather: z.string(),
   start_date: z.string(),
   end_date: z.string(),
   destination: z.string(),
diff --git a/server/src/controllers/weather/getWeatherWeek.ts b/server/src/controllers/weather/getWeatherWeek.ts
deleted file mode 100644
index 5d37e98e1..000000000
--- a/server/src/controllers/weather/getWeatherWeek.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import { getWeatherWeekService } from '../../services/weather/getWeatherWeekService';
-import { RetrievingWeatherFromOpenWeatherError } from '../../helpers/errors';
-import { responseHandler } from '../../helpers/responseHandler';
-import { publicProcedure } from '../../trpc';
-import { z } from 'zod';
-
-// /**
-//  * Retrieves the weather forecast for the week based on latitude and longitude parameters.
-//  * @param {Object} req - the request object
-//  * @param {Object} res - the response object
-//  * @return {Promise<Object>} the weather data for the week
-//  */
-// export const getWeatherWeek = async (req, res, next) => {
-//   try {
-//     const response = await getWeatherWeekService(req.query.lat, req.query.lon);
-//     res.locals.data = response.data;
-//     responseHandler(res);
-//   } catch (error) {
-//     next(RetrievingWeatherFromOpenWeatherError);
-//   }
-// };
-
-export function getWeatherWeekRoute() {
-  return publicProcedure
-    .input(z.object({ lat: z.number(), lon: z.number() }))
-    .query(async (opts) => {
-      const { lat, lon } = opts.input;
-      const { env }: any = opts.ctx;
-      return await getWeatherWeekService(
-        env.WEATHER_URL,
-        env.OPENWEATHER_KEY,
-        lat,
-        lon,
-      );
-    });
-}
diff --git a/server/src/controllers/weather/index.ts b/server/src/controllers/weather/index.ts
index b2c5a7555..46591f90e 100644
--- a/server/src/controllers/weather/index.ts
+++ b/server/src/controllers/weather/index.ts
@@ -1,2 +1 @@
 export * from './getWeather';
-export * from './getWeatherWeek';
diff --git a/server/src/routes/trpcRouter.ts b/server/src/routes/trpcRouter.ts
index 235afe6e8..755aae38b 100644
--- a/server/src/routes/trpcRouter.ts
+++ b/server/src/routes/trpcRouter.ts
@@ -19,7 +19,7 @@ import {
   emailExistsRoute,
   updatePasswordRoute,
 } from '../controllers/auth';
-import { getWeatherRoute, getWeatherWeekRoute } from '../controllers/weather';
+import { getWeatherRoute } from '../controllers/weather';
 import {
   addTripRoute,
   deleteTripRoute,
@@ -135,7 +135,6 @@ export const appRouter = trpcRouter({
   updatePassword: updatePasswordRoute(),
   // weather routes
   getWeather: getWeatherRoute(),
-  getWeatherWeek: getWeatherWeekRoute(),
   // trips routes
   getPublicTripsRoute: getPublicTripsRoute(),
   getTrips: getTripsRoute(),
diff --git a/server/src/services/weather/getWeatherWeekService.ts b/server/src/services/weather/getWeatherWeekService.ts
deleted file mode 100644
index 65d50a5f3..000000000
--- a/server/src/services/weather/getWeatherWeekService.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-export async function getWeatherWeekService(
-  weatherWeekUrl,
-  openWeatherKey,
-  lat,
-  lon,
-) {
-  const root = weatherWeekUrl;
-  const OPENWEATHER_KEY = openWeatherKey;
-  const latParams = lat;
-  const lonParams = lon;
-  const unitParams = 'imperial';
-  const apiParams = true;
-  let params = '?';
-  if (latParams) params += `lat=${latParams}`;
-  if (lonParams) params += `&lon=${lonParams}`;
-  if (unitParams) params += `&units=${unitParams}`;
-  if (apiParams) params += `&appid=${OPENWEATHER_KEY}`;
-
-  const url = root + params;
-  const response = await fetch(url);
-
-  if (!response.ok) {
-    throw new Error(`HTTP error! status: ${response.status}`);
-  }
-
-  const data = await response.json();
-  return data;
-}

From bc0630c4caafb33144ffa06228e225ef759ac52a Mon Sep 17 00:00:00 2001
From: Taron <taron.aleksanyan.20@gmail.com>
Date: Mon, 8 Jul 2024 07:05:20 +0400
Subject: [PATCH 164/257] refactor weather data component, remove weather week
 request

---
 packages/app/components/destination/index.tsx |  11 +-
 .../app/components/weather/WeatherCard.tsx    |  20 +++-
 .../app/components/weather/WeatherData.tsx    |  34 +++---
 .../destination/useCurrentDestination.ts      |   2 +-
 packages/app/hooks/parks/index.ts             |   2 +-
 .../app/hooks/singletrips/useTripWeather.ts   |  28 +----
 packages/app/hooks/trails/index.ts            |   2 +-
 packages/app/hooks/trips/useCreateTripForm.ts |   9 +-
 packages/app/hooks/weather/index.ts           |   1 -
 packages/app/hooks/weather/useFetchWeather.ts |  10 +-
 .../app/hooks/weather/useFetchWeatherWeek.ts  |  18 ---
 packages/app/screens/trip/TripDetails.tsx     |  10 +-
 packages/app/screens/trip/createTrip.tsx      |  23 +---
 packages/app/screens/trip/steps.tsx           | 107 ------------------
 packages/app/screens/trip/useTripsData.ts     |  19 ----
 server/src/services/trip/addTripService.ts    |   2 +-
 16 files changed, 55 insertions(+), 243 deletions(-)
 delete mode 100644 packages/app/hooks/weather/useFetchWeatherWeek.ts
 delete mode 100644 packages/app/screens/trip/steps.tsx

diff --git a/packages/app/components/destination/index.tsx b/packages/app/components/destination/index.tsx
index 382146541..330f3c901 100644
--- a/packages/app/components/destination/index.tsx
+++ b/packages/app/components/destination/index.tsx
@@ -13,9 +13,9 @@ import {
   useGetPhotonDetails,
 } from 'app/hooks/destination';
 import { useGEOLocationSearch } from 'app/hooks/geojson';
-import { useFetchWeather, useFetchWeatherWeak } from '../../hooks/weather';
 import { PlacesAutocomplete } from '../PlacesAutocomplete/PlacesAutocomplete';
 import { useRouter } from 'app/hooks/router';
+import { WeatherData } from 'components/weather/WeatherData';
 
 const RText: any = OriginalRText;
 
@@ -79,10 +79,6 @@ export const DestinationPage = () => {
 
   const { currentDestination, latLng } = useCurrentDestination();
 
-  const { data: weatherData } = useFetchWeather(latLng);
-
-  const { data: weatherWeekData } = useFetchWeatherWeak(latLng);
-
   const [osm] = useGEOLocationSearch();
   const {
     data: geoJSON,
@@ -195,10 +191,7 @@ export const DestinationPage = () => {
             contentProps={{ shape }}
             type="map"
           />
-          <WeatherCard
-            weatherObject={weatherData}
-            weatherWeek={weatherWeekData}
-          />
+          <WeatherData latLng={latLng} />
         </View>
       )}
     </ScrollView>
diff --git a/packages/app/components/weather/WeatherCard.tsx b/packages/app/components/weather/WeatherCard.tsx
index 28c66ba6f..560aa4e37 100644
--- a/packages/app/components/weather/WeatherCard.tsx
+++ b/packages/app/components/weather/WeatherCard.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import useTheme from '../../hooks/useTheme';
 import { convertToCelsius } from '../../utils/convertToCelsius';
 import { convertToKmh } from '../../utils/convertToKmh';
@@ -11,8 +12,6 @@ import {
 import { RImage, RStack as OriginalRStack, RText } from '@packrat/ui';
 import useCustomStyles from 'app/hooks/useCustomStyles';
 import { useDate } from 'app/hooks/weather/useDate';
-import { defaultWeatherObject } from '../../constants/defaultWeatherObj';
-import { defaultWeekObj } from '../../constants/defaultWeekObj';
 
 const RStack: any = OriginalRStack;
 
@@ -43,14 +42,21 @@ interface WeatherDay {
   };
 }
 
+interface Location {
+  name: string;
+  country: string;
+}
+
 interface WeatherCardProps {
   weatherObject?: WeatherObject;
   weatherWeek?: WeatherDay[];
+  location?: Location;
 }
 
 export default function WeatherCard({
-  weatherObject = defaultWeatherObject,
-  weatherWeek = defaultWeekObj,
+  weatherObject,
+  weatherWeek,
+  location,
 }: WeatherCardProps) {
   // Hooks
   const { currentTheme } = useTheme();
@@ -131,7 +137,9 @@ export default function WeatherCard({
           }}
         >
           <FontAwesome name="map-marker" size={16} color="black" />
-          <RText>{`${weatherObject.name}, ${weatherObject.sys.country}`}</RText>
+          {location ? (
+            <RText>{`${location?.name}, ${location?.country}`}</RText>
+          ) : null}
         </RStack>
 
         <RStack>
@@ -260,7 +268,7 @@ export default function WeatherCard({
                   }}
                   alt="waetherIcon"
                 />
-                <RText>{formatDay(restOfWeek[i])}</RText>
+                <RText>{restOfWeek[i]}</RText>
                 <RText style={{ fontWeight: 700 }}>
                   {convertToCelsius(day.main.temp)}
                 </RText>
diff --git a/packages/app/components/weather/WeatherData.tsx b/packages/app/components/weather/WeatherData.tsx
index 17d947bd6..e0e6eca23 100644
--- a/packages/app/components/weather/WeatherData.tsx
+++ b/packages/app/components/weather/WeatherData.tsx
@@ -1,29 +1,25 @@
 import React, { useMemo } from 'react';
 import WeatherCard from './WeatherCard';
-import { useFetchWeather, useFetchWeatherWeak } from 'app/hooks/weather';
-import { RText } from '@packrat/ui';
-import { parseCoordinates } from 'app/utils/coordinatesParser';
+import { useFetchWeather } from 'app/hooks/weather';
 
-/**
- * Generates a function comment for the given function body.
- *
- * @param {Object} geoJSON - The GeoJSON data.
- * @return {JSX.Element|null} The WeatherCard component if weatherObject and weatherWeek are truthy, otherwise null.
- */
-export const WeatherData = (geoJSON: any): JSX.Element => {
-  const latLng = useMemo(() => {
-    return parseCoordinates(geoJSON);
-  }, [geoJSON]);
+interface WeatherDataProps {
+  latLng?: { lat: number; lon: number };
+  fallback?: JSX.Element;
+}
 
-  const { data: weatherObjectData } = useFetchWeather(latLng);
-  const { data: weatherWeekData } = useFetchWeatherWeak(latLng);
+export const WeatherData = ({
+  latLng,
+  fallback,
+}: WeatherDataProps): JSX.Element => {
+  const { weatherToday, weatherWeek, location } = useFetchWeather(latLng);
 
-  return weatherObjectData && weatherWeekData ? (
+  return weatherToday && weatherWeek ? (
     <WeatherCard
-      weatherObject={weatherObjectData}
-      weatherWeek={weatherWeekData}
+      weatherObject={weatherToday}
+      weatherWeek={weatherWeek}
+      location={location}
     />
   ) : (
-    <RText>No Weather Data</RText>
+    fallback
   );
 };
diff --git a/packages/app/hooks/destination/useCurrentDestination.ts b/packages/app/hooks/destination/useCurrentDestination.ts
index 991cb9990..3fc90cb55 100644
--- a/packages/app/hooks/destination/useCurrentDestination.ts
+++ b/packages/app/hooks/destination/useCurrentDestination.ts
@@ -17,7 +17,7 @@ export const useCurrentDestination = () => {
   }, [osm.osmId, osm.osmType, data]);
 
   const latLng = useMemo(() => {
-    if (!currentDestination) return {};
+    if (!currentDestination) return null;
 
     return parseCoordinates(currentDestination);
   }, [currentDestination]);
diff --git a/packages/app/hooks/parks/index.ts b/packages/app/hooks/parks/index.ts
index e705c8dd3..fb772b5d9 100644
--- a/packages/app/hooks/parks/index.ts
+++ b/packages/app/hooks/parks/index.ts
@@ -11,7 +11,7 @@ function useParks({ latLng, radius = 5000 }) {
   //   lon,
   //   selectedSearch,
   // })
-  const { lat, lon } = latLng;
+  const { lat, lon } = latLng || {};
   const isEnabled = Boolean(lat && lon);
   const { data, error, isLoading } = queryTrpc.getParksOSM.useQuery(
     {
diff --git a/packages/app/hooks/singletrips/useTripWeather.ts b/packages/app/hooks/singletrips/useTripWeather.ts
index 048482179..dba06d121 100644
--- a/packages/app/hooks/singletrips/useTripWeather.ts
+++ b/packages/app/hooks/singletrips/useTripWeather.ts
@@ -1,30 +1,6 @@
 import { useMemo } from 'react';
-import { parseCoordinates } from 'app/utils/coordinatesParser';
-import { useFetchWeather, useFetchWeatherWeak } from 'app/hooks/weather';
 
 export const useTripWeather = (tripData) => {
-  const tripWeather = useMemo(() => {
-    try {
-      return tripData?.weather ? JSON?.parse(tripData?.weather) : undefined;
-    } catch {
-      return;
-    }
-  }, [tripData]);
-
-  const latLng = useMemo(() => {
-    try {
-      const geoJSON = tripData.geojson;
-
-      if (geoJSON) {
-        return parseCoordinates(geoJSON);
-      }
-    } catch {
-      return {};
-    }
-  }, [tripData, tripWeather]);
-
-  const { data: weatherObjectData } = useFetchWeather(latLng, !!tripWeather);
-  const { data: weatherWeek } = useFetchWeatherWeak(latLng);
-
-  return { weatherObject: tripWeather || weatherObjectData, weatherWeek };
+  // TODO handle saved trip weather
+  return { weatherObject: {} };
 };
diff --git a/packages/app/hooks/trails/index.ts b/packages/app/hooks/trails/index.ts
index d01169b7b..22c501686 100644
--- a/packages/app/hooks/trails/index.ts
+++ b/packages/app/hooks/trails/index.ts
@@ -12,7 +12,7 @@ function useTrails({ latLng, selectedSearch, radius = 1000 }) {
   //   radius,
   //   selectedSearch,
   // }); // Assumed to be a valid hook from tRPC.
-  const { lat, lon } = latLng;
+  const { lat, lon } = latLng || {};
   const isEnabled = Boolean(lat && lon);
   // SWAP FOR TRPC react query
   const { data, isLoading, error } = queryTrpc.getTrailsOSM.useQuery(
diff --git a/packages/app/hooks/trips/useCreateTripForm.ts b/packages/app/hooks/trips/useCreateTripForm.ts
index e51c69a85..066a7aa70 100644
--- a/packages/app/hooks/trips/useCreateTripForm.ts
+++ b/packages/app/hooks/trips/useCreateTripForm.ts
@@ -7,11 +7,7 @@ import { useAuthUser } from 'app/auth/hooks';
 import { usePackId } from 'app/hooks/packs';
 import { formatCreateTripValuesForAPI } from 'app/utils/tripUtils';
 
-export const useCreateTripForm = (
-  weather,
-  currentDestination,
-  photonDetails,
-) => {
+export const useCreateTripForm = (currentDestination, photonDetails) => {
   const { store, setTripValue, setDateRange } = useCreateTripStore();
   const authUser = useAuthUser();
   const [packId] = usePackId();
@@ -28,13 +24,12 @@ export const useCreateTripForm = (
   const createTripFormValues = useMemo<Partial<Record<addTripKey, any>>>(
     () => ({
       ...store,
-      weather,
       destination: currentDestination?.properties?.name,
       owner_id: authUser?.id,
       pack_id: packId,
       geoJSON: photonDetails,
     }),
-    [store, weather, packId, photonDetails, authUser?.id],
+    [store, packId, photonDetails, authUser?.id],
   );
 
   useEffect(() => {
diff --git a/packages/app/hooks/weather/index.ts b/packages/app/hooks/weather/index.ts
index 2dfff0f86..80c9e5cc3 100644
--- a/packages/app/hooks/weather/index.ts
+++ b/packages/app/hooks/weather/index.ts
@@ -1,2 +1 @@
 export * from './useFetchWeather';
-export * from './useFetchWeatherWeek';
diff --git a/packages/app/hooks/weather/useFetchWeather.ts b/packages/app/hooks/weather/useFetchWeather.ts
index fb31640db..7d15d8ac2 100644
--- a/packages/app/hooks/weather/useFetchWeather.ts
+++ b/packages/app/hooks/weather/useFetchWeather.ts
@@ -12,5 +12,13 @@ export const useFetchWeather = (latLng, isDisabled = false) => {
         keepPreviousData: true,
       },
     );
-  return { refetch, data, error, isLoading, isError };
+  return {
+    refetch,
+    weatherToday: data?.list?.[0],
+    weatherWeek: data?.list?.slice(0, 4),
+    location: data?.city || {},
+    error,
+    isLoading,
+    isError,
+  };
 };
diff --git a/packages/app/hooks/weather/useFetchWeatherWeek.ts b/packages/app/hooks/weather/useFetchWeatherWeek.ts
deleted file mode 100644
index 379df11f5..000000000
--- a/packages/app/hooks/weather/useFetchWeatherWeek.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { queryTrpc } from '../../trpc';
-
-export const useFetchWeatherWeak = (latLng, isDisabled = false) => {
-  const { lat, lon } = latLng || {};
-  const isEnabled = !isDisabled && Boolean(lat && lon);
-
-  const { refetch, data, error, isLoading, isError } =
-    queryTrpc.getWeatherWeek.useQuery(
-      { lat, lon },
-      {
-        enabled: isEnabled,
-        refetchOnWindowFocus: false,
-        keepPreviousData: true,
-      },
-    );
-
-  return { refetch, data: data?.list?.slice(0, 4), error, isLoading, isError };
-};
diff --git a/packages/app/screens/trip/TripDetails.tsx b/packages/app/screens/trip/TripDetails.tsx
index b0469d720..14cb29abb 100644
--- a/packages/app/screens/trip/TripDetails.tsx
+++ b/packages/app/screens/trip/TripDetails.tsx
@@ -59,7 +59,7 @@ export function TripDetails() {
 
   const data = rawData as TripData;
 
-  const { weatherObject, weatherWeek } = useTripWeather(data);
+  const { weatherObject } = useTripWeather(data);
 
   const link = `${CLIENT_URL}/trip/${tripId}`;
 
@@ -146,13 +146,7 @@ export function TripDetails() {
                           <TableContainerComponent currentPack={data?.packs} />
                         );
                       case SECTION.WEATHER:
-                        return (
-                          <WeatherCardComponent
-                            weatherObject={weatherObject}
-                            weatherWeek={weatherWeek}
-                            data={data}
-                          />
-                        );
+                        return null; // TODO handle saved trip weather
                       case SECTION.TRIP:
                         return (
                           <TripCardComponent
diff --git a/packages/app/screens/trip/createTrip.tsx b/packages/app/screens/trip/createTrip.tsx
index 26f1bbe8c..216399d48 100644
--- a/packages/app/screens/trip/createTrip.tsx
+++ b/packages/app/screens/trip/createTrip.tsx
@@ -2,8 +2,7 @@ import React from 'react';
 import { RStack } from '@packrat/ui';
 import { ScrollView } from 'react-native';
 import { theme } from '../../theme';
-import WeatherCard from '../../components/weather/WeatherCard';
-import { useState, useRef } from 'react';
+import { useRef } from 'react';
 import { GearList } from '../../components/GearList/GearList';
 import { SaveTripContainer } from 'app/components/trip/createTripModal';
 import useTheme from '../../hooks/useTheme';
@@ -18,6 +17,7 @@ import {
   TripActivityCard,
   TripDateRangeCard,
 } from 'app/components/trip/TripCards';
+import { WeatherData } from 'app/components/weather/WeatherData';
 
 export default function Trips() {
   const styles = useCustomStyles(loadStyles);
@@ -28,18 +28,13 @@ export default function Trips() {
     photonDetails,
     isPhotonLoading,
     hasPhotonError,
-    weatherData,
-    weatherLoading,
-    weatherError,
-    weatherWeekData,
-    weekWeatherLoading,
-    weekWeatherError,
     parksData,
     filteredTrails,
+    latLng,
   } = useTripsData();
 
   const { isValid, setDateRange, togglePlace, tripStore, setTripValue } =
-    useCreateTripForm(weatherData, currentDestination, photonDetails);
+    useCreateTripForm(currentDestination, photonDetails);
 
   const dateRange = {
     start_date: tripStore.start_date,
@@ -52,15 +47,7 @@ export default function Trips() {
         {/* <MultiStepForm steps={steps} /> */}
         <RStack style={styles.container}>
           <TripSearchCard searchRef={placesAutoCompleteRef} />
-          {!weekWeatherError &&
-            !weatherError &&
-            !weatherLoading &&
-            !weekWeatherLoading && (
-              <WeatherCard
-                weatherObject={weatherData}
-                weatherWeek={weatherWeekData}
-              />
-            )}
+          {latLng ? <WeatherData latLng={latLng} /> : null}
           <TripTrailCard
             data={filteredTrails || []}
             onToggle={(trail) => togglePlace('trail', trail)}
diff --git a/packages/app/screens/trip/steps.tsx b/packages/app/screens/trip/steps.tsx
deleted file mode 100644
index ae836651b..000000000
--- a/packages/app/screens/trip/steps.tsx
+++ /dev/null
@@ -1,107 +0,0 @@
-import React from 'react';
-import { FontAwesome5, FontAwesome } from '@expo/vector-icons';
-import { TripCard } from 'app/components/trip/TripCard';
-import WeatherCard from 'app/components/weather/WeatherCard';
-import { GearList } from 'app/components/GearList/GearList';
-import { SaveTripContainer } from 'app/components/trip/createTripModal';
-import TripDateRange from 'app/components/trip/TripDateRange';
-import useTheme from 'app/hooks/useTheme';
-import useCustomStyles from 'app/hooks/useCustomStyles';
-import { useFetchWeather, useFetchWeatherWeak } from 'app/hooks/weather';
-import { useParks } from 'app/hooks/parks';
-
-const steps = [
-  {
-    name: 'Step 1',
-    component: () => (
-      <TripCard
-        title="Where are you heading?"
-        isSearch={true}
-        Icon={() => (
-          <FontAwesome
-            name="map"
-            size={20}
-            color={theme.colors.cardIconColor}
-          />
-        )}
-      />
-    ),
-    sidebarData: {
-      title: 'Where are you heading?',
-      Icon: () => (
-        <FontAwesome name="map" size={20} color={theme.colors.cardIconColor} />
-      ),
-    },
-  },
-  {
-    name: 'Step 2',
-    component: () => (
-      <WeatherCard weatherObject={weatherData} weatherWeek={weatherWeekData} />
-    ),
-  },
-  {
-    name: 'Step 3',
-    component: () => (
-      <TripCard
-        title="Nearby Trails"
-        value="Trail List"
-        isTrail={true}
-        data={trails || []}
-        Icon={() => (
-          <FontAwesome5
-            name="hiking"
-            size={20}
-            color={theme.colors.cardIconColor}
-          />
-        )}
-      />
-    ),
-  },
-  {
-    name: 'Step 4',
-    component: () => (
-      <TripCard
-        title="Nearby Parks"
-        value="Parks List"
-        data={parksData}
-        Icon={() => (
-          <FontAwesome5
-            name="mountain"
-            size={20}
-            color={theme.colors.cardIconColor}
-          />
-        )}
-      />
-    ),
-  },
-  {
-    name: 'Step 5',
-    component: GearList,
-  },
-  {
-    name: 'Step 6',
-    component: () => (
-      <TripDateRange dateRange={dateRange} setDateRange={setDateRange} />
-    ),
-  },
-  {
-    name: 'Step 7',
-    component: () => (
-      <TripCard
-        Icon={() => (
-          <FontAwesome5
-            name="route"
-            size={24}
-            color={theme.colors.cardIconColor}
-          />
-        )}
-        title="Map"
-        isMap={true}
-      />
-    ),
-  },
-  {
-    name: 'Step 8',
-    component: () => <SaveTripContainer dateRange={dateRange} />,
-  },
-];
diff --git a/packages/app/screens/trip/useTripsData.ts b/packages/app/screens/trip/useTripsData.ts
index 4e9892b61..fe826dd01 100644
--- a/packages/app/screens/trip/useTripsData.ts
+++ b/packages/app/screens/trip/useTripsData.ts
@@ -1,5 +1,4 @@
 // useTripsData.js
-import { useFetchWeather, useFetchWeatherWeak } from 'app/hooks/weather';
 import useParks from 'app/hooks/parks';
 import useTrails from 'app/hooks/trails';
 import {
@@ -22,18 +21,6 @@ export const useTripsData = () => {
     },
   });
 
-  const {
-    data: weatherData,
-    isLoading: weatherLoading,
-    isError: weatherError,
-  } = useFetchWeather(latLng);
-
-  const {
-    data: weatherWeekData,
-    isLoading: weekWeatherLoading,
-    isError: weekWeatherError,
-  } = useFetchWeatherWeak(latLng);
-
   const {
     error: parksError,
     isLoading: parksLoading,
@@ -54,12 +41,6 @@ export const useTripsData = () => {
     photonDetails,
     hasPhotonError,
     isPhotonLoading,
-    weatherData,
-    weatherLoading,
-    weatherError,
-    weatherWeekData,
-    weekWeatherLoading,
-    weekWeatherError,
     parksData,
     parksError,
     parksLoading,
diff --git a/server/src/services/trip/addTripService.ts b/server/src/services/trip/addTripService.ts
index 07939c1a6..b9e198ed1 100644
--- a/server/src/services/trip/addTripService.ts
+++ b/server/src/services/trip/addTripService.ts
@@ -8,7 +8,7 @@ export const addTripService = async (tripData: any) => {
     const { geoJSON, ...otherTripData } = tripData;
     const tripClass = new Trip();
     // Create Trip
-    const newTrip = await tripClass.create(otherTripData);
+    const newTrip = await tripClass.create({ ...otherTripData, weather: 'w' }); // TODO remove not null from db
     const geojsonClass = new GeoJson();
     const tripGeoJsonClass = new TripGeoJson();
     if (!geoJSON) {

From 19f10448cd026f232f0a201ddf0d0f85e7293213 Mon Sep 17 00:00:00 2001
From: pinocchio-life-like <icbr19fl@gmail.com>
Date: Mon, 8 Jul 2024 15:20:12 +0300
Subject: [PATCH 165/257] revert comment delete in routes index.js

---
 server/src/routes/index.ts | 106 +++++++++++++++++++++++++++++++++++++
 1 file changed, 106 insertions(+)

diff --git a/server/src/routes/index.ts b/server/src/routes/index.ts
index 9abdf88aa..4551e237b 100644
--- a/server/src/routes/index.ts
+++ b/server/src/routes/index.ts
@@ -1,8 +1,63 @@
+// import express, { type Request, type Response } from 'express';
+// import path from 'path';
+// import csrf from 'csurf';
+// import packRoutes from './packRoutes';
+// import itemRoutes from './itemRoutes';
+// import tripRoutes from './tripRoutes';
+// import weatherRoutes from './weatherRoutes';
+// import geoCodeRoutes from './geoCodeRoutes';
+// import getParkRoutes from './getParkRoutes';
+// import getTrailRoutes from './getTrailRoutes';
+// import osmRoutes from './osmRoutes';
+// import passwordResetRoutes from './passwordResetRoutes';
+// import openAiRoutes from './openAiRoutes';
+// // import templateRoutes from './templateRoutes';
+// import favoriteRouters from './favoriteRoutes';
+// import userRoutes from './userRoutes';
 import mapPreviewRouter from './mapPreviewRouter';
 import { type Context, Hono, type Next } from 'hono';
 
 const router = new Hono();
 
+// Create a CSRF middleware
+// const csrfProtection = csrf({ cookie: true });
+
+// /**
+//  * Logs the incoming request method and path, and logs the finished request method, path, status code, and request body.
+//  *
+//  * @param {Request} req - The incoming request object.
+//  * @param {Response} res - The response object.
+//  * @param {NextFunction} next - The next function to call in the middleware chain.
+//  */
+// const logger = (req: Request, res: Response, next: express.NextFunction) => {
+//   console.log(`Incoming ${req.method} ${req.path}`);
+//   res.on('finish', () => {
+//     console.log(`Finished ${req.method} ${req.path} ${res.statusCode}`);
+//     console.log(`Body ${req.body}`);
+//   });
+//   next();
+// };
+
+// // use logger middleware in development
+// if (process.env.NODE_ENV !== 'production') {
+//   router.use(logger);
+// }
+
+// use routes
+// router.use('/user', userRoutes);
+// router.use('/pack', packRoutes);
+// router.use('/item', itemRoutes);
+// router.use('/trip', tripRoutes);
+// router.use('/weather', weatherRoutes);
+// router.use('/geocode', geoCodeRoutes);
+// router.use('/getparks', getParkRoutes);
+// router.use('/gettrails', getTrailRoutes);
+// router.use('/osm', osmRoutes);
+// router.use('/password-reset', passwordResetRoutes);
+// router.use('/openai', openAiRoutes);
+// router.use('/template', templateRoutes);
+// router.use('/favorite', favoriteRouters);
+// router.use('/openai', openAiRoutes);
 router.route('/mapPreview', mapPreviewRouter);
 
 const helloRouter = new Hono();
@@ -11,4 +66,55 @@ helloRouter.get('/', (c: Context, next: Next) => {
 });
 router.route('/hello', helloRouter);
 
+// Also listen to /api for backwards compatibility
+// router.use('/api/user', userRoutes);
+// router.use('/api/pack', packRoutes);
+// router.use('/api/item', itemRoutes);
+// router.use('/api/trip', tripRoutes);
+// router.use('/api/weather', weatherRoutes);
+// router.use('/api/geocode', geoCodeRoutes);
+// router.use('/api/getparks', getParkRoutes);
+// router.use('/api/gettrails', getTrailRoutes);
+// router.use('/api/osm', osmRoutes);
+// router.use('/api/password-reset', passwordResetRoutes);
+// router.use('/api/openai', openAiRoutes);
+// router.use('/api/template', templateRoutes);
+// router.use('/api/favorite', favoriteRouters);
+// router.use('/api/openai', openAiRoutes);
+// router.use('/api/mapPreview', mapPreviewRouter);
+
+// // Static routes for serving the React Native Web app
+// if (process.env.NODE_ENV === 'production') {
+//   const __dirname = path.resolve();
+//   const serverType = process.env.REACT_APP_SERVER_TYPE || 'vite';
+
+//   // Serve the client's index.html file at the root route
+//   router.get('/', (req, res) => {
+// // Attach the CSRF token cookie to the response
+//     // res.cookie("XSRF-TOKEN", req.csrfToken());
+
+//     const basePath = serverType === 'next' ? '../apps/next/out' : '../apps/vite/dist';
+//     res.sendFile(path.resolve(__dirname, basePath, 'index.html'));
+//   });
+
+//   // Serve the static assets
+//   const staticPath = serverType === 'next' ? '../apps/next/out' : '../apps/vite/dist';
+//   router.use(express.static(path.join(__dirname, staticPath)));
+
+//   // Serve the client's index.html file at all other routes NOT starting with /api
+//   router.get(/^(?!\/?api).*/, (req, res) => {
+//     // res.cookie("XSRF-TOKEN", req.csrfToken());
+//     const basePath = serverType === 'next' ? '../apps/next/out' : '../apps/vite/dist';
+//     res.sendFile(path.resolve(__dirname, basePath, 'index.html'));
+//   });
+// }
+
+// // Attach the CSRF token to a specific route in development
+// if (process.env.NODE_ENV !== 'production') {
+//   router.get('/api/csrf/restore', (req, res) => {
+//     // res.cookie("XSRF-TOKEN", req.csrfToken());
+//     res.status(201).json({});
+//   });
+// }
+
 export default router;

From 70d274e519ca76382aeadada3aec2eb2e3dd0971 Mon Sep 17 00:00:00 2001
From: Anmol Verma <anmolverma2810@gmail.com>
Date: Mon, 8 Jul 2024 20:57:14 +0530
Subject: [PATCH 166/257] changes in size

---
 packages/app/components/landing_page/index.tsx             | 5 +++--
 packages/app/components/landing_page/landingpage.style.tsx | 5 +++--
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/app/components/landing_page/index.tsx b/packages/app/components/landing_page/index.tsx
index fe7917d51..e99680042 100644
--- a/packages/app/components/landing_page/index.tsx
+++ b/packages/app/components/landing_page/index.tsx
@@ -55,10 +55,11 @@ const LandingPage = () => {
           ) : (
             <RText
               style={{
+                height: 40,
                 color: 'white',
-                fontSize: 25,
+                fontSize: 30,
                 fontWeight: 'bold',
-                marginBottom: 10,
+                paddingTop: 8,
               }}
             >
               PackRat
diff --git a/packages/app/components/landing_page/landingpage.style.tsx b/packages/app/components/landing_page/landingpage.style.tsx
index 1bfcca64c..b29b9910a 100644
--- a/packages/app/components/landing_page/landingpage.style.tsx
+++ b/packages/app/components/landing_page/landingpage.style.tsx
@@ -87,14 +87,15 @@ const loadStyles = (theme) => {
     },
     transparentButton: {
       backgroundColor: 'transparent',
+      height: 80,
     },
     icon: {
-      fontSize: 28,
+      fontSize: 40,
       color: '#34a89a',
       marginRight: 10,
     },
     featureText: {
-      fontSize: 18,
+      fontSize: 22,
       color: currentTheme.colors.text,
     },
     cardContent: {

From 39f5cec05b8ff0a0af686453fb0924303d509a1d Mon Sep 17 00:00:00 2001
From: Taron <taron.aleksanyan.20@gmail.com>
Date: Tue, 9 Jul 2024 11:09:10 +0400
Subject: [PATCH 167/257] fix import in destination

---
 packages/app/components/destination/index.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/app/components/destination/index.tsx b/packages/app/components/destination/index.tsx
index 6c66bd931..8d4d33190 100644
--- a/packages/app/components/destination/index.tsx
+++ b/packages/app/components/destination/index.tsx
@@ -15,8 +15,7 @@ import {
 import { useGEOLocationSearch } from 'app/hooks/geojson';
 import { PlacesAutocomplete } from '../PlacesAutocomplete/PlacesAutocomplete';
 import { useRouter } from 'app/hooks/router';
-import { WeatherData } from 'components/weather/WeatherData';
-
+import { WeatherData } from 'app/components/weather/WeatherData';
 
 const RText: any = OriginalRText;
 

From 5959ee4703362106fe0fc6fea3a979916eb0f767 Mon Sep 17 00:00:00 2001
From: Taron <taron.aleksanyan.20@gmail.com>
Date: Tue, 9 Jul 2024 13:24:42 +0400
Subject: [PATCH 168/257] replace default unauthorized route path

---
 packages/app/auth/AuthWrapper.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/app/auth/AuthWrapper.tsx b/packages/app/auth/AuthWrapper.tsx
index 2d3a58ec0..ad2ee75a2 100644
--- a/packages/app/auth/AuthWrapper.tsx
+++ b/packages/app/auth/AuthWrapper.tsx
@@ -24,7 +24,7 @@ export const AuthWrapper = ({
     );
 
   const defaultUnauthorizedElement =
-    Platform.OS === 'web' ? <Redirect to="/login" /> : <LandingPage />;
+    Platform.OS === 'web' ? <Redirect to="/sign-in" /> : <LandingPage />;
 
   return (
     <AuthLoader

From 571613b2fdbfb52e4fdc3ccfb13155959ce42252 Mon Sep 17 00:00:00 2001
From: Taron <taron.aleksanyan.20@gmail.com>
Date: Tue, 9 Jul 2024 21:48:53 +0400
Subject: [PATCH 169/257] remove name attribute from stack component to fix
 native app crash

---
 apps/expo/app/(app)/(drawer)/(tabs)/(stack)/about/index.tsx    | 1 -
 .../app/(app)/(drawer)/(tabs)/(stack)/appearance/index.tsx     | 3 +--
 .../(drawer)/(tabs)/(stack)/destination/[destinationId].tsx    | 3 +--
 apps/expo/app/(app)/(drawer)/(tabs)/(stack)/pack/[id].tsx      | 3 +--
 apps/expo/app/(app)/(drawer)/(tabs)/(stack)/pack/create.tsx    | 1 -
 apps/expo/app/(app)/(drawer)/(tabs)/(stack)/packs/index.tsx    | 3 +--
 apps/expo/app/(app)/(drawer)/(tabs)/(stack)/profile/[id].tsx   | 1 -
 .../(app)/(drawer)/(tabs)/(stack)/profile/settings/index.tsx   | 1 -
 apps/expo/app/(app)/(drawer)/(tabs)/(stack)/trip/[tripId].tsx  | 3 +--
 apps/expo/app/(app)/(drawer)/(tabs)/(stack)/trip/create.tsx    | 1 -
 apps/expo/app/(app)/(drawer)/(tabs)/(stack)/trips/index.tsx    | 1 -
 apps/expo/app/(app)/(drawer)/(tabs)/search.tsx                 | 1 -
 apps/expo/app/(auth)/password-reset.tsx                        | 3 +--
 13 files changed, 6 insertions(+), 19 deletions(-)

diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/about/index.tsx b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/about/index.tsx
index 373202fb6..d9d1067c1 100644
--- a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/about/index.tsx
+++ b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/about/index.tsx
@@ -18,7 +18,6 @@ export default function AboutRoute() {
         </Head>
       )}
       <Stack.Screen
-        name="About"
         options={{
           // https://reactnavigation.org/docs/headers#setting-the-header-title
           title: 'About',
diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/appearance/index.tsx b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/appearance/index.tsx
index d1a473f1f..83e64021a 100644
--- a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/appearance/index.tsx
+++ b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/appearance/index.tsx
@@ -12,10 +12,9 @@ export default function Appearance() {
         </Head>
       )}
       <Stack.Screen
-        name="Appearance"
         options={{
           // https://reactnavigation.org/docs/headers#setting-the-header-title
-          title: 'Appearance'
+          title: 'Appearance',
           // https://reactnavigation.org/docs/headers#adjusting-header-styles
 
           // https://reactnavigation.org/docs/headers#replacing-the-title-with-a-custom-component
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 e0b220f69..123d43c4f 100644
--- a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/destination/[destinationId].tsx
+++ b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/destination/[destinationId].tsx
@@ -13,10 +13,9 @@ export default function Destination() {
         </Head>
       )}
       <Stack.Screen
-        name="Destination"
         options={{
           // https://reactnavigation.org/docs/headers#setting-the-header-title
-          title: 'Destination'
+          title: 'Destination',
           // https://reactnavigation.org/docs/headers#adjusting-header-styles
 
           // https://reactnavigation.org/docs/headers#replacing-the-title-with-a-custom-component
diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/pack/[id].tsx b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/pack/[id].tsx
index fca59af50..396cc5145 100644
--- a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/pack/[id].tsx
+++ b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/pack/[id].tsx
@@ -15,10 +15,9 @@ export default function Pack() {
         </Head>
       )}
       <Stack.Screen
-        name="Pack"
         options={{
           // https://reactnavigation.org/docs/headers#setting-the-header-title
-          title: 'Pack'
+          title: 'Pack',
           // https://reactnavigation.org/docs/headers#adjusting-header-styles
 
           // https://reactnavigation.org/docs/headers#replacing-the-title-with-a-custom-component
diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/pack/create.tsx b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/pack/create.tsx
index 5a78bd6c0..d63c6dae0 100644
--- a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/pack/create.tsx
+++ b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/pack/create.tsx
@@ -13,7 +13,6 @@ export default function Pack() {
         </Head>
       )}
       <Stack.Screen
-        name="Create Pack"
         options={{
           // https://reactnavigation.org/docs/headers#setting-the-header-title
           title: 'Create Pack',
diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/packs/index.tsx b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/packs/index.tsx
index 308e12453..21cd6520b 100644
--- a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/packs/index.tsx
+++ b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/packs/index.tsx
@@ -12,10 +12,9 @@ export default function Packs() {
         </Head>
       )}
       <Stack.Screen
-        name="Packs"
         options={{
           // https://reactnavigation.org/docs/headers#setting-the-header-title
-          title: 'Packs'
+          title: 'Packs',
           // https://reactnavigation.org/docs/headers#adjusting-header-styles
 
           // https://reactnavigation.org/docs/headers#replacing-the-title-with-a-custom-component
diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/profile/[id].tsx b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/profile/[id].tsx
index a34f721cb..6c4f133b6 100644
--- a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/profile/[id].tsx
+++ b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/profile/[id].tsx
@@ -19,7 +19,6 @@ const Profile = () => {
         </Head>
       )}
       <Stack.Screen
-        name={`${userRealName}'s Profile`}
         options={{
           title: `${userRealName}'s Profile`,
         }}
diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/profile/settings/index.tsx b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/profile/settings/index.tsx
index 53af1e9f6..a054eb4f4 100644
--- a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/profile/settings/index.tsx
+++ b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/profile/settings/index.tsx
@@ -12,7 +12,6 @@ export default function SettingsPage() {
         </Head>
       )}
       <Stack.Screen
-        name="Settings"
         options={{
           // https://reactnavigation.org/docs/headers#setting-the-header-title
           title: 'Settings',
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 68a93f27c..2920b7631 100644
--- a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/trip/[tripId].tsx
+++ b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/trip/[tripId].tsx
@@ -15,10 +15,9 @@ export default function Trip() {
         </Head>
       )}
       <Stack.Screen
-        name="Trip"
         options={{
           // https://reactnavigation.org/docs/headers#setting-the-header-title
-          title: 'Trip'
+          title: 'Trip',
           // https://reactnavigation.org/docs/headers#adjusting-header-styles
 
           // https://reactnavigation.org/docs/headers#replacing-the-title-with-a-custom-component
diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/trip/create.tsx b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/trip/create.tsx
index d4dbc7590..cc6d628da 100644
--- a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/trip/create.tsx
+++ b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/trip/create.tsx
@@ -14,7 +14,6 @@ export default function Trip() {
         </Head>
       )}
       <Stack.Screen
-        name="Create Trip"
         options={{
           // https://reactnavigation.org/docs/headers#setting-the-header-title
           title: 'Create Trip',
diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/trips/index.tsx b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/trips/index.tsx
index 4286dae8b..3b91eb051 100644
--- a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/trips/index.tsx
+++ b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/trips/index.tsx
@@ -12,7 +12,6 @@ export default function FeedNav() {
         </Head>
       )}
       <Stack.Screen
-        name="Trips"
         options={{
           // https://reactnavigation.org/docs/headers#setting-the-header-title
           title: 'Trips',
diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/search.tsx b/apps/expo/app/(app)/(drawer)/(tabs)/search.tsx
index 0b8203baa..716f6bd7c 100644
--- a/apps/expo/app/(app)/(drawer)/(tabs)/search.tsx
+++ b/apps/expo/app/(app)/(drawer)/(tabs)/search.tsx
@@ -68,7 +68,6 @@ export default function Search() {
         </Head>
       )}
       <Stack.Screen
-        name="Search"
         options={{
           // https://reactnavigation.org/docs/headers#setting-the-header-title
           title: 'Search',
diff --git a/apps/expo/app/(auth)/password-reset.tsx b/apps/expo/app/(auth)/password-reset.tsx
index caa3bf52d..ddc9e954c 100644
--- a/apps/expo/app/(auth)/password-reset.tsx
+++ b/apps/expo/app/(auth)/password-reset.tsx
@@ -13,10 +13,9 @@ export default function ResetPasswordRoute() {
         </Head>
       )}
       <Stack.Screen
-        name="Reset Password"
         options={{
           // https://reactnavigation.org/docs/headers#setting-the-header-title
-          title: 'Reset Password'
+          title: 'Reset Password',
           // https://reactnavigation.org/docs/headers#adjusting-header-styles
 
           // https://reactnavigation.org/docs/headers#replacing-the-title-with-a-custom-component

From 280dbc71ce9d523607dbe96bd50b9570896c17bf Mon Sep 17 00:00:00 2001
From: Ibrahim Isa Jajere <ibrahimisajajere274@gmail.com>
Date: Wed, 10 Jul 2024 09:58:05 +0100
Subject: [PATCH 170/257] add namespace to segment vectors, so that e.g packs
 search doesn't return items

---
 server/src/vector/client.ts | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/server/src/vector/client.ts b/server/src/vector/client.ts
index d9983000d..f280c4b3d 100644
--- a/server/src/vector/client.ts
+++ b/server/src/vector/client.ts
@@ -39,9 +39,9 @@ class VectorClient {
   // }
 
   // New API-based insert method
-  public async insert(id: string, values: number[]) {
+  public async insert(id: string, values: number[], namespace: string) {
     const url = `https://api.cloudflare.com/client/v4/accounts/${this.accountId}/vectorize/indexes/${this.indexName}/insert`;
-    const ndjsonBody = `${JSON.stringify({ id, values })}\n`;
+    const ndjsonBody = `${JSON.stringify({ id, values, namespace })}\n`;
 
     const response = await fetch(url, {
       method: 'PUT',
@@ -69,7 +69,7 @@ class VectorClient {
   // }
 
   // New API-based search method
-  public async search(queryEmbedding: number[]) {
+  public async search(queryEmbedding: number[], namespace: string) {
     const url = `https://api.cloudflare.com/client/v4/accounts/${this.accountId}/vectorize/indexes/${this.indexName}/vectors/query`;
     const response = await fetch(url, {
       method: 'POST',
@@ -78,7 +78,7 @@ class VectorClient {
         Authorization: `Bearer ${this.apiKey}`,
       },
       body: JSON.stringify({
-        queries: [{ values: queryEmbedding, topK: 5 }],
+        queries: [{ values: queryEmbedding, topK: 5, namespace }],
       }),
     });
 
@@ -92,9 +92,9 @@ class VectorClient {
     return await response.json();
   }
 
-  public async syncRecord({ id, content }: { id: string; content: string }) {
+  public async syncRecord({ id, content, namespace }: { id: string; content: string, namespace: string }) {
     const values = await AiClient.getEmbedding(content);
-    await this.insert(id, values);
+    await this.insert(id, values, namespace);
   }
 }
 

From 95768974a7e0d581efc662110d72af569604efc7 Mon Sep 17 00:00:00 2001
From: Taron <taron.aleksanyan.20@gmail.com>
Date: Thu, 11 Jul 2024 09:06:49 +0400
Subject: [PATCH 171/257] Fix pack / trip visibility toggle

---
 packages/app/components/user/UserDataCard.tsx | 77 ++++++++-----------
 .../app/components/user/UserDataContainer.tsx | 10 ---
 packages/app/hooks/packs/useEditPack.ts       |  6 +-
 packages/app/hooks/trips/useEditTrips.ts      |  6 +-
 .../tripRoutesValidator.ts                    | 12 +--
 5 files changed, 50 insertions(+), 61 deletions(-)

diff --git a/packages/app/components/user/UserDataCard.tsx b/packages/app/components/user/UserDataCard.tsx
index 8de5e880d..9e2be4a57 100644
--- a/packages/app/components/user/UserDataCard.tsx
+++ b/packages/app/components/user/UserDataCard.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import { AntDesign } from '@expo/vector-icons';
 import { formatDistanceToNow } from 'date-fns';
 import { View } from 'react-native';
@@ -7,10 +8,12 @@ import {
   RStack,
   RSwitch,
   RLink,
+  RSkeleton,
 } from '@packrat/ui';
 import { truncateString } from '../../utils/truncateString';
 import { useEditPack } from 'app/hooks/packs';
 import { Platform } from 'react-native';
+import { useEditTrips } from 'app/hooks/trips';
 
 const RText: any = OriginalRText;
 
@@ -24,8 +27,6 @@ interface UserDataCardProps {
   favorited_by?: string[];
   favorites_count: number;
   createdAt: string;
-  state: boolean[];
-  setState: React.Dispatch<React.SetStateAction<boolean[]>>;
   index: number;
   differentUser: boolean;
 }
@@ -40,51 +41,35 @@ const UserDataCard = ({
   favorited_by,
   favorites_count,
   createdAt,
-  state,
-  setState,
   index,
   differentUser,
 }: UserDataCardProps) => {
-  const { editPack: changePackStatus } = useEditPack();
-  console.log("Data Data Data ",type,
-    destination,
-    id,
-    name,
-    total_weight,
-    is_public,
-    favorited_by,
-    favorites_count,
-    createdAt,
-    state,
-    setState,
-    index,
-    differentUser,)
-  /**
-   * Updates the state at the specified index with the given boolean value.
-   *
-   * @param {number} index - The index of the state to be updated.
-   * @param {boolean} boolState - The boolean value to update the state with.
-   * @return {void} This function does not return a value.
-   */
-  const updateState = (index, boolState) => {
-    let states = state;
-    states = states.map((state, iterator) => {
-      return iterator === index ? boolState : state;
-    });
-    setState(states);
-  };
+  const { editPack: changePackStatus, isLoading: isPackLoading } =
+    useEditPack();
+  const { editTrips: changeTripStatus, isLoading: isTripLoading } =
+    useEditTrips();
 
-  /**
-   * Updates the status of an item at the specified index.
-   *
-   * @param {number} index - The index of the item to update.
-   * @return {void} This function does not return a value.
-   */
   const handleChangeStatus = (index) => {
-    updateState(index, true);
     if (type === 'pack') {
-      changePackStatus({ id, is_public: !is_public, name });
-    } else if (type === 'trip') {
+      return changePackStatus(
+        { id, is_public: !is_public, name },
+        {
+          onSuccess: (utils) => {
+            utils.getUserFavorites.invalidate();
+          },
+        },
+      );
+    }
+
+    if (type === 'trip') {
+      changeTripStatus(
+        { id, is_public: !is_public },
+        {
+          onSuccess: (utils) => {
+            utils.getUserFavorites.invalidate();
+          },
+        },
+      );
     }
   };
 
@@ -133,8 +118,14 @@ const UserDataCard = ({
                 <RText style={{ fontSize: 16, color: 'black' }}>
                   {truncatedName}
                 </RText>
-                {state[index] ? (
-                  <RText style={{ fontSize: 16 }}>Loading....</RText>
+                {(isPackLoading && type === 'pack') ||
+                (isTripLoading && type === 'trip') ? (
+                  <RSkeleton
+                    style={{
+                      height: 20,
+                      width: 36,
+                    }}
+                  />
                 ) : (
                   <>
                     {!differentUser && (
diff --git a/packages/app/components/user/UserDataContainer.tsx b/packages/app/components/user/UserDataContainer.tsx
index 51055a879..73cefb53c 100644
--- a/packages/app/components/user/UserDataContainer.tsx
+++ b/packages/app/components/user/UserDataContainer.tsx
@@ -42,28 +42,18 @@ export default function UserDataContainer({
 }: UserDataContainerProps) {
   const { enableDarkMode, enableLightMode, isDark, isLight, currentTheme } =
     useTheme();
-  const [dataState, setDataState] = useState(
-    data.length > 0 ? Array(data.length).fill(false) : [],
-  );
-  useEffect(() => {
-    setDataState(Array(data.length).fill(false));
-  }, [data]);
   const currentUser = useAuthUser();
 
   const typeUppercase = type.charAt(0).toUpperCase() + type.slice(1);
 
   const typeUppercaseSingular = typeUppercase.slice(0, -1);
 
-  const cardType = type === 'packs' || type === 'favorites' ? 'pack' : 'trip';
-
   const differentUser = userId && currentUser && userId !== currentUser.id;
   const Card = ({ item, index }) => {
     return (
       <UserDataCard
         key={item.id}
         {...item}
-        state={dataState}
-        setState={setDataState}
         index={index}
         differentUser={differentUser}
       />
diff --git a/packages/app/hooks/packs/useEditPack.ts b/packages/app/hooks/packs/useEditPack.ts
index 499f0b493..3f8eb63eb 100644
--- a/packages/app/hooks/packs/useEditPack.ts
+++ b/packages/app/hooks/packs/useEditPack.ts
@@ -5,10 +5,14 @@ export const useEditPack = () => {
 
   const mutation = queryTrpc.editPack.useMutation();
 
-  const editPack = (updatedPack) => {
+  const editPack = (
+    updatedPack,
+    options?: { onSuccess?: (queryUtils: typeof utils) => void },
+  ) => {
     mutation.mutate(updatedPack, {
       onSuccess: () => {
         utils.getPacks.invalidate();
+        options?.onSuccess?.(utils);
       },
     });
   };
diff --git a/packages/app/hooks/trips/useEditTrips.ts b/packages/app/hooks/trips/useEditTrips.ts
index de5d66909..2bb7bc5ed 100644
--- a/packages/app/hooks/trips/useEditTrips.ts
+++ b/packages/app/hooks/trips/useEditTrips.ts
@@ -4,10 +4,14 @@ export const useEditTrips = () => {
   const utils = queryTrpc.useUtils();
   const mutation = queryTrpc.editTrip.useMutation();
 
-  const editTrips = (updatedTrip) => {
+  const editTrips = (
+    updatedTrip,
+    options?: { onSuccess?: (queryUtils: typeof utils) => void },
+  ) => {
     mutation.mutate(updatedTrip, {
       onSuccess: () => {
         utils.getTrips.invalidate();
+        options?.onSuccess?.(utils);
       },
     });
   };
diff --git a/packages/validations/src/validations/tripRoutesValidator/tripRoutesValidator.ts b/packages/validations/src/validations/tripRoutesValidator/tripRoutesValidator.ts
index 71daee2c7..5b9d895c6 100644
--- a/packages/validations/src/validations/tripRoutesValidator/tripRoutesValidator.ts
+++ b/packages/validations/src/validations/tripRoutesValidator/tripRoutesValidator.ts
@@ -65,12 +65,12 @@ export const addTrip = addTripDetails.merge(addTripForm);
 
 export const editTrip = z.object({
   id: z.string(),
-  name: z.string(),
-  duration: z.string(),
-  start_date: z.string(),
-  end_date: z.string(),
-  destination: z.string(),
-  is_public: z.boolean(),
+  name: z.string().optional(),
+  duration: z.string().optional(),
+  start_date: z.string().optional(),
+  end_date: z.string().optional(),
+  destination: z.string().optional(),
+  is_public: z.boolean().optional(),
 });
 
 export const deleteTrip = z.object({

From e787b18ee49e33353eae0b74f9967a87744ed6f0 Mon Sep 17 00:00:00 2001
From: Ibrahim Isa Jajere <ibrahimisajajere274@gmail.com>
Date: Fri, 12 Jul 2024 07:43:12 +0100
Subject: [PATCH 172/257] =?UTF-8?q?=F0=9F=9A=A7=20WIP:=20retrieving=20simi?=
 =?UTF-8?q?lar=20packs?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/controllers/pack/getSimilarPacks.ts   | 19 +++++++
 server/src/controllers/pack/index.ts          |  1 +
 server/src/routes/trpcRouter.ts               |  2 +
 server/src/services/pack/addPackService.ts    |  1 +
 .../services/pack/getSimilarPacksService.ts   | 49 +++++++++++++++++++
 server/src/services/pack/pack.service.ts      |  1 +
 server/src/vector/client.ts                   |  5 +-
 7 files changed, 76 insertions(+), 2 deletions(-)
 create mode 100644 server/src/controllers/pack/getSimilarPacks.ts
 create mode 100644 server/src/services/pack/getSimilarPacksService.ts

diff --git a/server/src/controllers/pack/getSimilarPacks.ts b/server/src/controllers/pack/getSimilarPacks.ts
new file mode 100644
index 000000000..6bc6db9d1
--- /dev/null
+++ b/server/src/controllers/pack/getSimilarPacks.ts
@@ -0,0 +1,19 @@
+import { publicProcedure } from '../../trpc';
+import { getSimilarPacksService } from '../../services/pack/pack.service';
+import { z } from 'zod';
+
+/**
+ * Retrieves packs that are similar to provided pack.
+ * @param {Object} req - the request object
+ * @param {Object} res - the response object
+ * @return {Promise} - a promise that resolves with an array of similar packs
+ */
+export function getSimilarPacksRoute() {
+  return publicProcedure
+    .input(z.object({ id: z.string(), limit: z.number() }))
+    .query(async (opts) => {
+      const { id, limit } = opts.input;
+      const packs = await getSimilarPacksService(id, limit);
+      return packs;
+    });
+}
diff --git a/server/src/controllers/pack/index.ts b/server/src/controllers/pack/index.ts
index cc0dc82e4..2d2839dde 100644
--- a/server/src/controllers/pack/index.ts
+++ b/server/src/controllers/pack/index.ts
@@ -6,3 +6,4 @@ export * from './duplicatePublicPack';
 export * from './getPackById';
 export * from './getPublicPacks';
 export * from './scorePack';
+export * from './getSimilarPacks';
\ No newline at end of file
diff --git a/server/src/routes/trpcRouter.ts b/server/src/routes/trpcRouter.ts
index a1ecf1c0c..bf55cf6e5 100644
--- a/server/src/routes/trpcRouter.ts
+++ b/server/src/routes/trpcRouter.ts
@@ -47,6 +47,7 @@ import {
   getPackByIdRoute,
   getPacksRoute,
   getPublicPacksRoute,
+  getSimilarPacksRoute,
   scorePackRoute,
 } from '../controllers/pack';
 
@@ -157,6 +158,7 @@ export const appRouter = trpcRouter({
   deletePack: deletePackRoute(), // Done
   scorePack: scorePackRoute(), // Done
   duplicatePublicPack: duplicatePublicPackRoute(), // Not Implemented
+  getSimilarPacks: getSimilarPacksRoute(),
   // osm routes - currently breaking tests, see patch file
   getPhotonResults: getPhotonResultsRoute(),
   getTrailsOSM: getTrailsOSMRoute(),
diff --git a/server/src/services/pack/addPackService.ts b/server/src/services/pack/addPackService.ts
index b621b5fd9..97f0fa781 100644
--- a/server/src/services/pack/addPackService.ts
+++ b/server/src/services/pack/addPackService.ts
@@ -33,6 +33,7 @@ export const addPackService = async (
     await VectorClient.instance.syncRecord({
       id: createdPack.id,
       content: name,
+      namespace: 'packs',
     });
   });
 
diff --git a/server/src/services/pack/getSimilarPacksService.ts b/server/src/services/pack/getSimilarPacksService.ts
new file mode 100644
index 000000000..11d3888a3
--- /dev/null
+++ b/server/src/services/pack/getSimilarPacksService.ts
@@ -0,0 +1,49 @@
+import { DbClient } from '../../db/client';
+import { Pack } from '../../drizzle/methods/pack';
+import { VectorClient } from '../../vector/client';
+import { pack as PacksTable } from '../../db/schema';
+import { inArray } from 'drizzle-orm';
+
+/**
+ * Retrieves packs that are similar to the provided pack.
+ *
+ * @param {string} id - ID of the pack for which to retrive similar packs for.
+ * @param {string} limit - Max number of similar packs to return.
+ * @return {Promise<any[]>} An array of similar packs.
+ */
+export async function getSimilarPacksService(id: string, limit: number = 5) {
+  const packClass = new Pack();
+  let pack = await packClass.findPack({
+    id,
+  });
+
+  if (!pack) {
+    throw new Error(`Pack with id: ${id} not found`);
+  }
+
+  const { matches } = await VectorClient.instance.search(
+    pack.name,
+    'packs',
+    limit,
+  );
+
+  const similarPacksResult = await DbClient.instance
+    .select()
+    .from(PacksTable)
+    .where(
+      inArray(
+        PacksTable.id,
+        matches.matches.map((m) => m.id),
+      ),
+    );
+
+  // add similarity score to packs result
+  const similarPacks = matches.matches.map((match) => {
+    return {
+      ...similarPacksResult.find((p) => p.id == match.id),
+      similarityScore: match.score,
+    };
+  });
+
+  return similarPacks;
+}
diff --git a/server/src/services/pack/pack.service.ts b/server/src/services/pack/pack.service.ts
index ce8539717..a1a4c2866 100644
--- a/server/src/services/pack/pack.service.ts
+++ b/server/src/services/pack/pack.service.ts
@@ -6,3 +6,4 @@ export * from './getPackByIdService';
 export * from './getPackService';
 export * from './scorePackService';
 export * from './getPublicPacksService';
+export * from './getSimilarPacksService';
diff --git a/server/src/vector/client.ts b/server/src/vector/client.ts
index f280c4b3d..e3928d276 100644
--- a/server/src/vector/client.ts
+++ b/server/src/vector/client.ts
@@ -69,7 +69,8 @@ class VectorClient {
   // }
 
   // New API-based search method
-  public async search(queryEmbedding: number[], namespace: string) {
+  public async search(content: string, namespace: string, topK: number) {
+    const values = await AiClient.getEmbedding(content);
     const url = `https://api.cloudflare.com/client/v4/accounts/${this.accountId}/vectorize/indexes/${this.indexName}/vectors/query`;
     const response = await fetch(url, {
       method: 'POST',
@@ -78,7 +79,7 @@ class VectorClient {
         Authorization: `Bearer ${this.apiKey}`,
       },
       body: JSON.stringify({
-        queries: [{ values: queryEmbedding, topK: 5, namespace }],
+        queries: [{ values, topK, namespace }],
       }),
     });
 

From e0222846095962e780ca97320fa58b9149739bdd Mon Sep 17 00:00:00 2001
From: Ibrahim Isa Jajere <ibrahimisajajere274@gmail.com>
Date: Fri, 12 Jul 2024 08:36:37 +0100
Subject: [PATCH 173/257] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20feat:=20vectors=20?=
 =?UTF-8?q?visibility=20filtering?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 server/src/services/pack/addPackService.ts |  3 ++
 server/src/vector/client.ts                | 50 ++++++++++++++++++----
 2 files changed, 45 insertions(+), 8 deletions(-)

diff --git a/server/src/services/pack/addPackService.ts b/server/src/services/pack/addPackService.ts
index 97f0fa781..1d7993709 100644
--- a/server/src/services/pack/addPackService.ts
+++ b/server/src/services/pack/addPackService.ts
@@ -33,6 +33,9 @@ export const addPackService = async (
     await VectorClient.instance.syncRecord({
       id: createdPack.id,
       content: name,
+      metadata: {
+        isPublic: createdPack.is_public,
+      },
       namespace: 'packs',
     });
   });
diff --git a/server/src/vector/client.ts b/server/src/vector/client.ts
index e3928d276..fa5232b6e 100644
--- a/server/src/vector/client.ts
+++ b/server/src/vector/client.ts
@@ -39,15 +39,20 @@ class VectorClient {
   // }
 
   // New API-based insert method
-  public async insert(id: string, values: number[], namespace: string) {
+  public async insert(
+    id: string,
+    values: number[],
+    namespace: string,
+    metadata: { isPublic: boolean },
+  ) {
     const url = `https://api.cloudflare.com/client/v4/accounts/${this.accountId}/vectorize/indexes/${this.indexName}/insert`;
-    const ndjsonBody = `${JSON.stringify({ id, values, namespace })}\n`;
+    const ndjsonBody = `${JSON.stringify({ id, values, namespace, metadata })}\n`;
 
     const response = await fetch(url, {
       method: 'PUT',
       headers: {
         'Content-Type': 'application/x-ndjson',
-        'Authorization': `Bearer ${this.apiKey}`,
+        Authorization: `Bearer ${this.apiKey}`,
       },
       body: ndjsonBody,
     });
@@ -62,14 +67,26 @@ class VectorClient {
     return await response.json();
   }
 
-
   // Commented out the original logic
   // public async search(queryEmbedding: number[]) {
   //   return await this.instance.query(queryEmbedding, { topK: 5 });
   // }
 
   // New API-based search method
-  public async search(content: string, namespace: string, topK: number) {
+  /**
+   *
+   * @param {string} content - Search query content.
+   * @param {string} namespace - Segment vectors; only vectors within the provided namespace are used for search.
+   * @param {string} topK - Return the top K similar vectors (default = 3).
+   * @param {boolean|null} isPublic - Filter vectors based on visibility. Pass `null` to not apply the filter.
+   * @returns {Promise<Object>} A promise that resolves with object that contains matches.
+   */
+  public async search(
+    content: string,
+    namespace: string,
+    topK: number = 3,
+    isPublic?: boolean,
+  ) {
     const values = await AiClient.getEmbedding(content);
     const url = `https://api.cloudflare.com/client/v4/accounts/${this.accountId}/vectorize/indexes/${this.indexName}/vectors/query`;
     const response = await fetch(url, {
@@ -79,7 +96,14 @@ class VectorClient {
         Authorization: `Bearer ${this.apiKey}`,
       },
       body: JSON.stringify({
-        queries: [{ values, topK, namespace }],
+        queries: [
+          {
+            values,
+            topK,
+            namespace,
+            filter: isPublic != null ? { isPublic } : {},
+          },
+        ],
       }),
     });
 
@@ -93,9 +117,19 @@ class VectorClient {
     return await response.json();
   }
 
-  public async syncRecord({ id, content, namespace }: { id: string; content: string, namespace: string }) {
+  public async syncRecord({
+    id,
+    content,
+    namespace,
+    metadata,
+  }: {
+    id: string;
+    content: string;
+    namespace: string;
+    metadata: { isPublic: boolean };
+  }) {
     const values = await AiClient.getEmbedding(content);
-    await this.insert(id, values, namespace);
+    await this.insert(id, values, namespace, metadata);
   }
 }
 

From 4e5eb4f61f2ec5085905ea5bf77093b153122fd0 Mon Sep 17 00:00:00 2001
From: Ibrahim Isa Jajere <ibrahimisajajere274@gmail.com>
Date: Fri, 12 Jul 2024 09:50:50 +0100
Subject: [PATCH 174/257] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20sync=20vector=20in?=
 =?UTF-8?q?dex=20on=20rest=20of=20the=20crud=20ops?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 server/src/services/pack/deletePackService.ts |  7 ++
 server/src/services/pack/editPackService.ts   | 17 ++++
 server/src/vector/client.ts                   | 84 ++++++++++++++++---
 3 files changed, 95 insertions(+), 13 deletions(-)

diff --git a/server/src/services/pack/deletePackService.ts b/server/src/services/pack/deletePackService.ts
index fd153459e..9c850c3d2 100644
--- a/server/src/services/pack/deletePackService.ts
+++ b/server/src/services/pack/deletePackService.ts
@@ -1,4 +1,6 @@
 import { Pack } from '../../drizzle/methods/pack';
+import { Queue } from '../../queue/client';
+import { VectorClient } from '../../vector/client';
 
 /**
  * Deletes a pack by its ID.
@@ -9,5 +11,10 @@ import { Pack } from '../../drizzle/methods/pack';
 export const deletePackService = async (packId: string): Promise<object> => {
   const packClass = new Pack();
   await packClass.delete(packId);
+
+  Queue.getInstance().addTask(async () => {
+    await VectorClient.instance.delete(packId);
+  });
+
   return { message: 'Pack was deleted successfully' };
 };
diff --git a/server/src/services/pack/editPackService.ts b/server/src/services/pack/editPackService.ts
index 2b1ed6c27..46ac5e020 100644
--- a/server/src/services/pack/editPackService.ts
+++ b/server/src/services/pack/editPackService.ts
@@ -1,4 +1,6 @@
 import { Pack } from '../../drizzle/methods/pack';
+import { Queue } from '../../queue/client';
+import { VectorClient } from '../../vector/client';
 
 /**
  * Edits a pack in the service.
@@ -20,5 +22,20 @@ export const editPackService = async (packData: any) => {
     name: name || pack.name,
   };
   const updatedPack = await packClass.update(updatedData);
+
+  Queue.getInstance().addTask(async () => {
+    await VectorClient.instance.syncRecord(
+      {
+        id: updatedData.id,
+        content: name,
+        metadata: {
+          isPublic: updatedData.is_public,
+        },
+        namespace: 'packs',
+      },
+      true,
+    );
+  });
+
   return updatedPack;
 };
diff --git a/server/src/vector/client.ts b/server/src/vector/client.ts
index fa5232b6e..9c0dd0766 100644
--- a/server/src/vector/client.ts
+++ b/server/src/vector/client.ts
@@ -1,15 +1,26 @@
 import { AiClient } from '../integrations/ai/client';
+import axios, { type AxiosInstance } from 'axios';
 
 class VectorClient {
   private static _instance: VectorClient | null = null;
   private apiKey: string;
   private indexName: string;
   private accountId: string;
+  private readonly VECTORIZE_INDEX_URL: string;
+  private axiosInstance: AxiosInstance;
 
   private constructor(apiKey: string, indexName: string, accountId: string) {
     this.apiKey = apiKey;
     this.indexName = indexName;
     this.accountId = accountId;
+    this.VECTORIZE_INDEX_URL = `https://api.cloudflare.com/client/v4/accounts/${this.accountId}/vectorize/indexes/${this.indexName}`;
+    this.axiosInstance = axios.create({
+      baseURL: this.VECTORIZE_INDEX_URL,
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${this.apiKey}`,
+      },
+    });
   }
 
   public static get instance(): VectorClient {
@@ -45,7 +56,7 @@ class VectorClient {
     namespace: string,
     metadata: { isPublic: boolean },
   ) {
-    const url = `https://api.cloudflare.com/client/v4/accounts/${this.accountId}/vectorize/indexes/${this.indexName}/insert`;
+    const url = `${this.VECTORIZE_INDEX_URL}/insert`;
     const ndjsonBody = `${JSON.stringify({ id, values, namespace, metadata })}\n`;
 
     const response = await fetch(url, {
@@ -67,6 +78,49 @@ class VectorClient {
     return await response.json();
   }
 
+  public async upsert(
+    id: string,
+    values: number[],
+    namespace: string,
+    metadata: { isPublic: boolean },
+  ) {
+    const ndjsonBody = `${JSON.stringify({ id, values, namespace, metadata })}\n`;
+
+    try {
+      const response = await this.axiosInstance.post('/upsert', ndjsonBody);
+      return response.data;
+    } catch (error) {
+      // The request was made and the server responded with a status code
+      // that falls out of the range of 2xx
+      if (error.response) {
+        console.error(error.response.data);
+        console.error(error.response.status);
+        throw new Error(`Failed to upsert vector: ${error.response.status}`);
+      } else if (error.request) {
+        // The request was made but no response was received
+        throw new Error('No response was received from vector index');
+      } else {
+        throw new Error('Unknown error');
+      }
+    }
+  }
+
+  public async delete(id: string) {
+    const response = await this.axiosInstance.post(
+      '/delete-by-ids',
+      {
+        ids: [id],
+      },
+      {
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      },
+    );
+
+    return await response.data;
+  }
+
   // Commented out the original logic
   // public async search(queryEmbedding: number[]) {
   //   return await this.instance.query(queryEmbedding, { topK: 5 });
@@ -117,19 +171,23 @@ class VectorClient {
     return await response.json();
   }
 
-  public async syncRecord({
-    id,
-    content,
-    namespace,
-    metadata,
-  }: {
-    id: string;
-    content: string;
-    namespace: string;
-    metadata: { isPublic: boolean };
-  }) {
+  public async syncRecord(
+    {
+      id,
+      content,
+      namespace,
+      metadata,
+    }: {
+      id: string;
+      content: string;
+      namespace: string;
+      metadata: { isPublic: boolean };
+    },
+    upsert: boolean = false,
+  ) {
     const values = await AiClient.getEmbedding(content);
-    await this.insert(id, values, namespace, metadata);
+    if (!upsert) await this.insert(id, values, namespace, metadata);
+    else await this.upsert(id, values, namespace, metadata);
   }
 }
 

From f0dba72ceba492311920e3dff9ceab258ba47614 Mon Sep 17 00:00:00 2001
From: Ibrahim Isa Jajere <ibrahimisajajere274@gmail.com>
Date: Fri, 12 Jul 2024 12:53:07 +0100
Subject: [PATCH 175/257] =?UTF-8?q?=F0=9F=93=9D=20remove=20wrong=20JSDoc?=
 =?UTF-8?q?=20from=20getSimilarPacksRoute=20function?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 server/src/controllers/pack/getSimilarPacks.ts | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/server/src/controllers/pack/getSimilarPacks.ts b/server/src/controllers/pack/getSimilarPacks.ts
index 6bc6db9d1..afda02959 100644
--- a/server/src/controllers/pack/getSimilarPacks.ts
+++ b/server/src/controllers/pack/getSimilarPacks.ts
@@ -2,12 +2,6 @@ import { publicProcedure } from '../../trpc';
 import { getSimilarPacksService } from '../../services/pack/pack.service';
 import { z } from 'zod';
 
-/**
- * Retrieves packs that are similar to provided pack.
- * @param {Object} req - the request object
- * @param {Object} res - the response object
- * @return {Promise} - a promise that resolves with an array of similar packs
- */
 export function getSimilarPacksRoute() {
   return publicProcedure
     .input(z.object({ id: z.string(), limit: z.number() }))

From 573bb08993ff2c67daa006cec2b07d9561190493 Mon Sep 17 00:00:00 2001
From: Ibrahim Isa Jajere <ibrahimisajajere274@gmail.com>
Date: Fri, 12 Jul 2024 15:12:16 +0100
Subject: [PATCH 176/257] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20sync=20items=20wit?=
 =?UTF-8?q?h=20vector=20index?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/validations/itemRoutesValidator.ts       |  2 ++
 server/src/controllers/item/index.ts             |  1 +
 server/src/routes/trpcRouter.ts                  |  2 ++
 server/src/services/item/addItemGlobalService.ts | 14 ++++++++++++++
 server/src/services/item/addItemService.ts       | 14 ++++++++++++++
 .../src/services/item/deleteGlobalItemService.ts |  7 +++++++
 server/src/services/item/deleteItemService.ts    |  6 ++++++
 .../item/editGlobalItemAsDuplicateService.ts     | 13 +++++++++++++
 server/src/services/item/editItemService.ts      | 16 ++++++++++++++++
 9 files changed, 75 insertions(+)

diff --git a/packages/validations/src/validations/itemRoutesValidator.ts b/packages/validations/src/validations/itemRoutesValidator.ts
index 607d13bba..e2bf46d51 100644
--- a/packages/validations/src/validations/itemRoutesValidator.ts
+++ b/packages/validations/src/validations/itemRoutesValidator.ts
@@ -67,3 +67,5 @@ export const getItemsGlobally = z.object({
   limit: z.number(),
   page: z.number(),
 });
+
+export const getSimilarItems = z.object({ id: z.string(), limit: z.number() });
\ No newline at end of file
diff --git a/server/src/controllers/item/index.ts b/server/src/controllers/item/index.ts
index 0dd9cf654..47c41f984 100644
--- a/server/src/controllers/item/index.ts
+++ b/server/src/controllers/item/index.ts
@@ -9,3 +9,4 @@ export * from './getItemById';
 export * from './editGlobalItemAsDuplicate';
 export * from './getItemsGlobally';
 export * from './searchItemsByName';
+export * from './getSimilarItems';
diff --git a/server/src/routes/trpcRouter.ts b/server/src/routes/trpcRouter.ts
index bf55cf6e5..3e52faed5 100644
--- a/server/src/routes/trpcRouter.ts
+++ b/server/src/routes/trpcRouter.ts
@@ -64,6 +64,7 @@ import {
   getItemsGloballyRoute,
   getItemsRoute,
   searchItemsByNameRoute,
+  getSimilarItemsRoute,
 } from '../controllers/item';
 import { getTrailsRoute } from '../controllers/getTrail';
 import { getParksRoute } from '../controllers/getParks';
@@ -182,6 +183,7 @@ export const appRouter = trpcRouter({
   addGlobalItemToPack: addGlobalItemToPackRoute(), // Done
   editGlobalItemAsDuplicate: editGlobalItemAsDuplicateRoute(), // Not Implemented
   deleteGlobalItem: deleteGlobalItemRoute(), // Done,
+  getSimilarItems: getSimilarItemsRoute(),
   // trails routes
   getTrails: getTrailsRoute(),
   // // parks route
diff --git a/server/src/services/item/addItemGlobalService.ts b/server/src/services/item/addItemGlobalService.ts
index c02aeaac4..2a1bfd2ed 100644
--- a/server/src/services/item/addItemGlobalService.ts
+++ b/server/src/services/item/addItemGlobalService.ts
@@ -1,7 +1,9 @@
 import { type InsertItemCategory } from '../../db/schema';
 import { Item } from '../../drizzle/methods/Item';
 import { ItemCategory } from '../../drizzle/methods/itemcategory';
+import { Queue } from '../../queue/client';
 import { ItemCategory as categories } from '../../utils/itemCategory';
+import { VectorClient } from '../../vector/client';
 // import { prisma } from '../../prisma';
 
 /**
@@ -41,5 +43,17 @@ export const addItemGlobalService = async (
     global: true,
     ownerId,
   });
+
+  Queue.getInstance().addTask(async () => {
+    await VectorClient.instance.syncRecord({
+      id: newItem.id,
+      content: name,
+      namespace: 'items',
+      metadata: {
+        isPublic: newItem.global,
+      },
+    });
+  });
+
   return newItem;
 };
diff --git a/server/src/services/item/addItemService.ts b/server/src/services/item/addItemService.ts
index e297de7e5..beffe4c55 100644
--- a/server/src/services/item/addItemService.ts
+++ b/server/src/services/item/addItemService.ts
@@ -5,6 +5,8 @@ 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 { Queue } from '../../queue/client';
+import { VectorClient } from '../../vector/client';
 
 /**
  * Generates a new item and adds it to a pack based on the given parameters.
@@ -69,5 +71,17 @@ export const addItemService = async (
   // );
 
   // return { newItem: updatedItem, packId };
+
+  Queue.getInstance().addTask(async () => {
+    await VectorClient.instance.syncRecord({
+      id: item.id,
+      content: name,
+      namespace: 'items',
+      metadata: {
+        isPublic: item.global,
+      },
+    });
+  });
+
   return item;
 };
diff --git a/server/src/services/item/deleteGlobalItemService.ts b/server/src/services/item/deleteGlobalItemService.ts
index 51560f4a8..1b496e8dc 100644
--- a/server/src/services/item/deleteGlobalItemService.ts
+++ b/server/src/services/item/deleteGlobalItemService.ts
@@ -1,6 +1,8 @@
 // import { prisma } from '../../prisma';
 
 import { Item } from '../../drizzle/methods/Item';
+import { Queue } from '../../queue/client';
+import { VectorClient } from '../../vector/client';
 
 /**
  * Deletes a global item by its ID.
@@ -13,5 +15,10 @@ export const deleteGlobalItemService = async (
 ): Promise<object> => {
   const itemClass = new Item();
   await itemClass.delete(itemId);
+
+  Queue.getInstance().addTask(async () => {
+    VectorClient.instance.delete(itemId);
+  });
+
   return { message: 'Item deleted successfully' };
 };
diff --git a/server/src/services/item/deleteItemService.ts b/server/src/services/item/deleteItemService.ts
index e54cc75ca..2979f05e2 100644
--- a/server/src/services/item/deleteItemService.ts
+++ b/server/src/services/item/deleteItemService.ts
@@ -2,6 +2,8 @@
 
 import { Item } from '../../drizzle/methods/Item';
 import { ItemPacks } from '../../drizzle/methods/ItemPacks';
+import { Queue } from '../../queue/client';
+import { VectorClient } from '../../vector/client';
 
 /**
  * Deletes an item from the database.
@@ -19,5 +21,9 @@ export const deleteItemService = async (itemId: string, packId?: string) => {
     await ItemPacksClass.delete(itemId, packId);
   }
 
+  Queue.getInstance().addTask(async () => {
+    VectorClient.instance.delete(itemId);
+  });
+
   return { message: 'Item deleted successfully' };
 };
diff --git a/server/src/services/item/editGlobalItemAsDuplicateService.ts b/server/src/services/item/editGlobalItemAsDuplicateService.ts
index ece4d9aed..49bcf99eb 100644
--- a/server/src/services/item/editGlobalItemAsDuplicateService.ts
+++ b/server/src/services/item/editGlobalItemAsDuplicateService.ts
@@ -3,6 +3,8 @@ import { ItemPacks } from '../../drizzle/methods/ItemPacks';
 import { ItemCategory } from '../../drizzle/methods/itemcategory';
 import { ItemCategory as categories } from '../../utils/itemCategory';
 import { type InsertItemCategory } from '../../db/schema';
+import { Queue } from '../../queue/client';
+import { VectorClient } from '../../vector/client';
 
 /**
  * Edits a global item by creating a duplicate item in a specific pack.
@@ -66,5 +68,16 @@ export const editGlobalItemAsDuplicateService = async (
     packId,
   });
 
+  Queue.getInstance().addTask(async () => {
+    await VectorClient.instance.syncRecord({
+      id: newItem.id,
+      content: name,
+      metadata: {
+        isPublic: newItem.global,
+      },
+      namespace: 'items',
+    });
+  });
+
   return newItem;
 };
diff --git a/server/src/services/item/editItemService.ts b/server/src/services/item/editItemService.ts
index cf6336a2d..82f7dcaef 100644
--- a/server/src/services/item/editItemService.ts
+++ b/server/src/services/item/editItemService.ts
@@ -3,7 +3,9 @@
 import { type InsertItemCategory } from '../../db/schema';
 import { Item } from '../../drizzle/methods/Item';
 import { ItemCategory } from '../../drizzle/methods/itemcategory';
+import { Queue } from '../../queue/client';
 import { ItemCategory as categories } from '../../utils/itemCategory';
+import { VectorClient } from '../../vector/client';
 
 /**
  * Edit an item in the service.
@@ -62,5 +64,19 @@ export const editItemService = async (
     categoryId: category.id || item.categoryId,
   });
 
+  Queue.getInstance().addTask(async () => {
+    await VectorClient.instance.syncRecord(
+      {
+        id: newItem.id,
+        content: name,
+        metadata: {
+          isPublic: newItem.global,
+        },
+        namespace: 'packs',
+      },
+      true,
+    );
+  });
+
   return newItem;
 };

From bc55f05d7da078997a0530b33bf2188f7ce14b06 Mon Sep 17 00:00:00 2001
From: Anmol Verma <anmolverma2810@gmail.com>
Date: Sat, 13 Jul 2024 02:08:33 +0530
Subject: [PATCH 177/257] changes in color

---
 packages/app/components/landing_page/landingpage.style.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/app/components/landing_page/landingpage.style.tsx b/packages/app/components/landing_page/landingpage.style.tsx
index b29b9910a..7fbba8a1a 100644
--- a/packages/app/components/landing_page/landingpage.style.tsx
+++ b/packages/app/components/landing_page/landingpage.style.tsx
@@ -59,7 +59,7 @@ const loadStyles = (theme) => {
       justifyContent: 'center', // Center buttons horizontally
     },
     getStartedButton: {
-      backgroundColor: '#34a89a',
+      backgroundColor: currentTheme.colors.secondaryBlue,
       height: 50,
       paddingVertical: 12, // Increase padding for better touch area
       paddingHorizontal: 30,
@@ -91,7 +91,7 @@ const loadStyles = (theme) => {
     },
     icon: {
       fontSize: 40,
-      color: '#34a89a',
+      color: currentTheme.colors.text,
       marginRight: 10,
     },
     featureText: {

From 1e8c97d0e540802c0f8c81de6473c08d66d8d173 Mon Sep 17 00:00:00 2001
From: Ibrahim Isa Jajere <ibrahimisajajere274@gmail.com>
Date: Fri, 12 Jul 2024 22:05:52 +0100
Subject: [PATCH 178/257] =?UTF-8?q?=F0=9F=90=9B=20fix=20vector=20search?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 server/src/vector/client.ts | 20 ++++++++------------
 1 file changed, 8 insertions(+), 12 deletions(-)

diff --git a/server/src/vector/client.ts b/server/src/vector/client.ts
index 9c0dd0766..290579e63 100644
--- a/server/src/vector/client.ts
+++ b/server/src/vector/client.ts
@@ -133,16 +133,16 @@ class VectorClient {
    * @param {string} namespace - Segment vectors; only vectors within the provided namespace are used for search.
    * @param {string} topK - Return the top K similar vectors (default = 3).
    * @param {boolean|null} isPublic - Filter vectors based on visibility. Pass `null` to not apply the filter.
-   * @returns {Promise<Object>} A promise that resolves with object that contains matches.
+   * @returns {Promise<Object>} A promise that resolves with Query Vectors Response which contains matches.
    */
   public async search(
     content: string,
     namespace: string,
     topK: number = 3,
-    isPublic?: boolean,
+    isPublic: boolean | null,
   ) {
-    const values = await AiClient.getEmbedding(content);
-    const url = `https://api.cloudflare.com/client/v4/accounts/${this.accountId}/vectorize/indexes/${this.indexName}/vectors/query`;
+    const vector = await AiClient.getEmbedding(content);
+    const url = `${this.VECTORIZE_INDEX_URL}/query`;
     const response = await fetch(url, {
       method: 'POST',
       headers: {
@@ -150,14 +150,10 @@ class VectorClient {
         Authorization: `Bearer ${this.apiKey}`,
       },
       body: JSON.stringify({
-        queries: [
-          {
-            values,
-            topK,
-            namespace,
-            filter: isPublic != null ? { isPublic } : {},
-          },
-        ],
+        vector,
+        topK,
+        namespace,
+        ...(isPublic != null ? { filter: { isPublic } } : {}),
       }),
     });
 

From fc13c0ba8739ca292b6af113f61d77fed0ff898a Mon Sep 17 00:00:00 2001
From: Taron <taron.aleksanyan.20@gmail.com>
Date: Sat, 13 Jul 2024 12:09:33 +0400
Subject: [PATCH 179/257] Fix offline map crash, bounds structure change

---
 packages/app/screens/maps/index.tsx | 38 ++++++++++++++++++++---------
 1 file changed, 26 insertions(+), 12 deletions(-)

diff --git a/packages/app/screens/maps/index.tsx b/packages/app/screens/maps/index.tsx
index d47b7781b..bfffedbb9 100644
--- a/packages/app/screens/maps/index.tsx
+++ b/packages/app/screens/maps/index.tsx
@@ -3,7 +3,8 @@ import Mapbox, {
   offlineManager,
   OfflineCreatePackOptions,
 } from '@rnmapbox/maps';
-import { useEffect, useState } from 'react';
+import { useState, useCallback } from 'react';
+import { useFocusEffect } from 'expo-router';
 import { TouchableOpacity } from 'react-native-gesture-handler';
 import MapButtonsOverlay from 'app/components/map/MapButtonsOverlay';
 import { theme } from 'app/theme';
@@ -59,11 +60,13 @@ export default function DownloadedMaps() {
     });
   }
 
-  useEffect(() => {
-    offlineManager.getPacks().then((packs) => {
-      setOfflinePacks(packs);
-    });
-  }, []);
+  useFocusEffect(
+    useCallback(() => {
+      offlineManager.getPacks().then((packs) => {
+        setOfflinePacks(packs);
+      });
+    }, []),
+  );
 
   return (
     <View
@@ -147,10 +150,7 @@ export default function DownloadedMaps() {
           >
             <Mapbox.Camera
               zoomLevel={zoomLevel}
-              centerCoordinate={[
-                (pack?.bounds[0]?.[0] + pack?.bounds[1]?.[0]) / 2 ?? 0,
-                (pack?.bounds[0]?.[1] + pack?.bounds[1]?.[1]) / 2 ?? 0,
-              ]}
+              centerCoordinate={getCenterCoordinates(pack?.bounds)}
               animationMode={'flyTo'}
               animationDuration={2000}
             />
@@ -167,7 +167,8 @@ export default function DownloadedMaps() {
               <Mapbox.LineLayer id="layer1" style={styles.lineLayer} />
             </Mapbox.ShapeSource>
             {/* // top location */}
-            {shape?.features[0]?.geometry?.coordinates?.length > 0 && (
+            {/* TODO implement notations */}
+            {/* {shape?.features[0]?.geometry?.coordinates?.length > 0 && (
               <Mapbox.PointAnnotation
                 id={'cicleCap'}
                 coordinate={
@@ -180,7 +181,7 @@ export default function DownloadedMaps() {
                   <CircleCapComp />
                 </View>
               </Mapbox.PointAnnotation>
-            )}
+            )} */}
           </Mapbox.MapView>
 
           <MapButtonsOverlay
@@ -196,6 +197,19 @@ export default function DownloadedMaps() {
   );
 }
 
+const getCenterCoordinates = (bounds: [number, number, number, number]) => {
+  const [
+    southWestLongitude,
+    southWestLatitude,
+    northEastLongitude,
+    northEastLatitude,
+  ] = bounds;
+  const centerLatitude = (northEastLatitude + southWestLatitude) / 2;
+  const centerLongitude = (northEastLongitude + southWestLongitude) / 2;
+
+  return [centerLongitude, centerLatitude];
+};
+
 const loadStyles = ({ currentTheme }) => {
   return {
     lineLayer: {

From 2dbce4d074e08d92feba9aabcc24d173de8df701 Mon Sep 17 00:00:00 2001
From: Ibrahim Isa Jajere <ibrahimisajajere274@gmail.com>
Date: Sat, 13 Jul 2024 09:38:09 +0100
Subject: [PATCH 180/257] =?UTF-8?q?=F0=9F=90=9B=20fix=20insert=20vector=20?=
 =?UTF-8?q?request=20method?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 server/src/vector/client.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/server/src/vector/client.ts b/server/src/vector/client.ts
index 290579e63..0c7f18acd 100644
--- a/server/src/vector/client.ts
+++ b/server/src/vector/client.ts
@@ -60,7 +60,7 @@ class VectorClient {
     const ndjsonBody = `${JSON.stringify({ id, values, namespace, metadata })}\n`;
 
     const response = await fetch(url, {
-      method: 'PUT',
+      method: 'POST',
       headers: {
         'Content-Type': 'application/x-ndjson',
         Authorization: `Bearer ${this.apiKey}`,

From 1566a25e700e399b01d66c315b81280bda2713bc Mon Sep 17 00:00:00 2001
From: Ibrahim Isa Jajere <ibrahimisajajere274@gmail.com>
Date: Sat, 13 Jul 2024 11:24:12 +0100
Subject: [PATCH 181/257] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20use=20workers=20AI?=
 =?UTF-8?q?=20rest=20api=20instead=20of=20AI=20binding=20to=20evade=20havi?=
 =?UTF-8?q?ng=20to=20login=20on=20local=20dev?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 server/src/integrations/ai/client.ts | 61 +++++++++++++++++++++++++---
 server/src/trpc/context.ts           |  6 ++-
 server/wrangler.toml.example         |  1 +
 3 files changed, 61 insertions(+), 7 deletions(-)

diff --git a/server/src/integrations/ai/client.ts b/server/src/integrations/ai/client.ts
index 2daf9b61a..36a19bb8e 100644
--- a/server/src/integrations/ai/client.ts
+++ b/server/src/integrations/ai/client.ts
@@ -1,26 +1,75 @@
 import { Ai } from "@cloudflare/ai";
 
 class AiClient {
-  private static _instance: Ai | null = null;
-  private constructor() {}
+  private static _instance: AiClient | null = null;
+  private apiKey: string;
+  private accountId: string;
+  private readonly MODEL_NAME: string = '@cf/baai/bge-base-en-v1.5';
+  private readonly EXECUTE_AI_MODEL_URL: string;
 
-  public static get instance(): Ai {
+  private constructor(apiKey: string, accountId: string) {
+    this.apiKey = apiKey;
+    this.accountId = accountId;
+    this.EXECUTE_AI_MODEL_URL = `https://api.cloudflare.com/client/v4/accounts/${this.accountId}/ai/run/${this.MODEL_NAME}`;
+  }
+
+  public static get instance(): AiClient {
     if (!AiClient._instance) {
       throw new Error('AiClient instance not initialized.');
     }
     return AiClient._instance;
   }
 
-  public static async init(cfAi): Promise<void> {
+  public static async init({
+    apiKey,
+    accountId,
+  }: {
+    apiKey: string;
+    accountId: string;
+  }): Promise<void> {
     if (!AiClient._instance) {
-      AiClient._instance = new Ai(cfAi);
+      AiClient._instance = new AiClient(apiKey, accountId);
     }
   }
 
+  public async run(text: string) {
+    const response = await fetch(this.EXECUTE_AI_MODEL_URL, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${this.apiKey}`,
+      },
+      body: JSON.stringify({ text }),
+    });
+
+    if (!response.ok) {
+      const errorText = await response.text();
+      throw new Error(
+        `Failed to get embedding: ${response.statusText} - ${errorText}`,
+      );
+    }
+
+    return await response.json();
+  }
+
   public static async getEmbedding(content: string): Promise<number[]> {
-    const { data } = await AiClient.instance.run('@cf/baai/bge-base-en-v1.5', { text: [content] });
+    const {
+      result: { data },
+    } = await AiClient.instance.run(content);
     return data[0];
   }
+
+  // Commented out using AI client and temporalily use REST API instead
+  // public static async init(cfAi): Promise<void> {
+  //   if (!AiClient._instance) {
+  //     AiClient._instance = new Ai(cfAi);
+  //   }
+  // }
+
+  // public static async getEmbedding(content: string): Promise<number[]> {
+  //   const { data } = await AiClient.instance.run('@cf/baai/bge-base-en-v1.5', { text: [content] });
+  //   return data[0];
+  // }
 }
 
 export { AiClient };
diff --git a/server/src/trpc/context.ts b/server/src/trpc/context.ts
index fe0cdb374..3c875ee9e 100644
--- a/server/src/trpc/context.ts
+++ b/server/src/trpc/context.ts
@@ -23,7 +23,11 @@ export const createContext = (honoContext: Context) => async () => {
     indexName: 'vector-index', // TODO: Change to 'VECTOR_INDEX
     accountId: honoContext.env.CLOUDFLARE_ACCOUNT_ID,
   });
-  await AiClient.init(honoContext.env.AI);
+  await AiClient.init({
+    apiKey: honoContext.env.AI_API_KEY,
+    accountId: honoContext.env.CLOUDFLARE_ACCOUNT_ID,
+    // honoContext.env.AI
+  });
 
   const user = await extractTokenAndGetUser(req.raw, env.JWT_SECRET);
 
diff --git a/server/wrangler.toml.example b/server/wrangler.toml.example
index cdec98215..87dc3997a 100644
--- a/server/wrangler.toml.example
+++ b/server/wrangler.toml.example
@@ -30,4 +30,5 @@ index_name = "vector-index"
 # WEATHER_WEEK_URL=""
 # OPENWEATHER_KEY=""
 # VECTORIZE_API_KEY=""
+# AI_API_KEY=""
 # CLOUDFLARE_ACCOUNT_ID=""
\ No newline at end of file

From 916871f1fe58b13820ee09e06f74727e66ffd615 Mon Sep 17 00:00:00 2001
From: Anmol Verma <anmolverma2810@gmail.com>
Date: Sat, 13 Jul 2024 16:12:56 +0530
Subject: [PATCH 182/257] Change web dropdown

---
 packages/app/components/pack/AddPack.tsx | 24 +++++++++++++++---------
 packages/ui/src/RSelect/index.tsx        |  2 +-
 packages/ui/src/ZDropdown/index.tsx      |  2 +-
 3 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/packages/app/components/pack/AddPack.tsx b/packages/app/components/pack/AddPack.tsx
index 10ba84b27..94c772709 100644
--- a/packages/app/components/pack/AddPack.tsx
+++ b/packages/app/components/pack/AddPack.tsx
@@ -14,7 +14,7 @@ import { useRouter } from 'app/hooks/router';
 import useCustomStyles from 'app/hooks/useCustomStyles';
 import useResponsive from 'app/hooks/useResponsive';
 import React, { useState } from 'react';
-import { View } from 'react-native';
+import { Platform, View } from 'react-native';
 import useTheme from '../../hooks/useTheme';
 
 const FormSelect: any = OriginalFormSelect;
@@ -31,7 +31,7 @@ export const AddPack = ({
     useTheme();
   const styles = useCustomStyles(loadStyles);
   const router = useRouter();
-  const [selectedValue, SetSelectedValue] = useState('No')
+  const [selectedValue, SetSelectedValue] = useState('No');
   // const [_, setPackIdParam] = usePackId();
 
   const {
@@ -65,14 +65,15 @@ export const AddPack = ({
 
   const handleonValueChange = (itemValue) => {
     if (itemValue === 'Yes') {
-      SetSelectedValue('Yes')
+      SetSelectedValue('Yes');
       setIsPublic(true);
     } else {
-      SetSelectedValue('No')
+      SetSelectedValue('No');
       setIsPublic(false);
     }
   };
   const { xxs, xxl, xs } = useResponsive();
+  console.log(selectedValue);
 
   return (
     <View style={styles.container}>
@@ -85,16 +86,21 @@ export const AddPack = ({
             placeholder="Name"
             name="name"
             label="Name"
-            style={{ textAlign: 'left', width: 200 }}
+            style={{
+              textAlign: 'left',
+              width: 200,
+              alignItems: 'inherit',
+              justifyContent: 'center',
+            }}
           />
           <DropdownComponent
-            value={null}
+            value={selectedValue}
             data={packSelectOptions}
             onValueChange={handleonValueChange}
-            placeholder={`Is Public: ${selectedValue}`}
-            width={xxs ? '50%' : xs ? '50%' : xxl ? '15%' : '8%'}
+            placeholder="Is Public"
+            width={xxs ? '50%' : xs ? '50%' : xxl ? '80%' : '8%'}
             native={true}
-            zeego={true}
+            zeego={Platform.OS !== 'web'}
           />
 
           <SubmitButton style={styles.btn} onSubmit={handleAddPack}>
diff --git a/packages/ui/src/RSelect/index.tsx b/packages/ui/src/RSelect/index.tsx
index 4fb496a96..ef7480189 100644
--- a/packages/ui/src/RSelect/index.tsx
+++ b/packages/ui/src/RSelect/index.tsx
@@ -113,7 +113,7 @@ export function SelectItem(props) {
       onValueChange={handleChange}
       {...forwardedProps}
     >
-      <Select.Trigger width={220} iconAfter={ChevronDown}>
+      <Select.Trigger alignSelf="center" width={220} iconAfter={ChevronDown}>
         <Select.Value>{placeholder}</Select.Value>
       </Select.Trigger>
       <Select.Content zIndex={200000}>
diff --git a/packages/ui/src/ZDropdown/index.tsx b/packages/ui/src/ZDropdown/index.tsx
index 7972122f6..232a0ee13 100644
--- a/packages/ui/src/ZDropdown/index.tsx
+++ b/packages/ui/src/ZDropdown/index.tsx
@@ -59,4 +59,4 @@ const RDropdownMenu = ({ menuItems = [], menuName }) => {
   );
 };
 
-export { DropdownMenu, RDropdownMenu };
\ No newline at end of file
+export { DropdownMenu, RDropdownMenu };

From 422e26b93d7db571a4904999637f01bbc98d3c23 Mon Sep 17 00:00:00 2001
From: Anmol Verma <anmolverma2810@gmail.com>
Date: Sat, 13 Jul 2024 17:02:01 +0530
Subject: [PATCH 183/257] Remove chevrondown from dropdown

---
 packages/ui/src/RSelect/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/src/RSelect/index.tsx b/packages/ui/src/RSelect/index.tsx
index ef7480189..68f1bdaf0 100644
--- a/packages/ui/src/RSelect/index.tsx
+++ b/packages/ui/src/RSelect/index.tsx
@@ -130,7 +130,7 @@ export function SelectItem(props) {
               width={'$4'}
               pointerEvents="none"
             >
-              <ChevronDown size={getFontSize((props.size ?? '$true') as any)} />
+              {/* <ChevronDown size={getFontSize((props.size ?? '$true') as any)} /> */}
             </YStack>
           )}
         </Select.Viewport>

From b5f5a12b632f8e2cbcbba921697ed9701b9238b9 Mon Sep 17 00:00:00 2001
From: Ibrahim Isa Jajere <ibrahimisajajere274@gmail.com>
Date: Sat, 13 Jul 2024 14:10:22 +0100
Subject: [PATCH 184/257] =?UTF-8?q?=F0=9F=90=9B=20use=20workers=20waitUnti?=
 =?UTF-8?q?l=20for=20background=20tasks=20to=20prevent=20them=20from=20bei?=
 =?UTF-8?q?ng=20terminated=20prematually?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 server/src/controllers/item/addItem.ts            |  1 +
 server/src/controllers/item/addItemGlobal.ts      |  1 +
 server/src/controllers/item/deleteGlobalItem.ts   |  2 +-
 server/src/controllers/item/deleteItem.ts         |  2 +-
 .../controllers/item/editGlobalItemAsDuplicate.ts |  1 +
 server/src/controllers/item/editItem.ts           | 10 +++++++++-
 server/src/controllers/pack/addPack.ts            |  7 ++++++-
 server/src/controllers/pack/deletePack.ts         |  2 +-
 server/src/controllers/pack/editPack.ts           |  2 +-
 server/src/services/item/addItemGlobalService.ts  | 11 ++++++-----
 server/src/services/item/addItemService.ts        |  9 +++++----
 .../src/services/item/deleteGlobalItemService.ts  |  7 +++----
 server/src/services/item/deleteItemService.ts     | 12 +++++++-----
 .../item/editGlobalItemAsDuplicateService.ts      | 11 ++++++-----
 server/src/services/item/editItemService.ts       | 11 ++++++-----
 server/src/services/pack/addPackService.ts        | 15 ++++++---------
 server/src/services/pack/deletePackService.ts     | 11 ++++++-----
 server/src/services/pack/editPackService.ts       | 14 +++++++++-----
 server/src/trpc/context.ts                        |  1 +
 19 files changed, 77 insertions(+), 53 deletions(-)

diff --git a/server/src/controllers/item/addItem.ts b/server/src/controllers/item/addItem.ts
index edaea5533..073b34821 100644
--- a/server/src/controllers/item/addItem.ts
+++ b/server/src/controllers/item/addItem.ts
@@ -45,6 +45,7 @@ export function addItemRoute() {
       packId,
       type,
       ownerId,
+      opts.ctx.executionCtx,
     );
     return result;
   });
diff --git a/server/src/controllers/item/addItemGlobal.ts b/server/src/controllers/item/addItemGlobal.ts
index fc6a994de..c50f4c234 100644
--- a/server/src/controllers/item/addItemGlobal.ts
+++ b/server/src/controllers/item/addItemGlobal.ts
@@ -45,6 +45,7 @@ export function addItemGlobalRoute() {
         unit,
         type,
         ownerId,
+        opts.ctx.executionCtx,
       );
       return item;
     });
diff --git a/server/src/controllers/item/deleteGlobalItem.ts b/server/src/controllers/item/deleteGlobalItem.ts
index 8b7754246..a20523b79 100644
--- a/server/src/controllers/item/deleteGlobalItem.ts
+++ b/server/src/controllers/item/deleteGlobalItem.ts
@@ -30,6 +30,6 @@ export function deleteGlobalItemRoute() {
     )
     .mutation(async (opts) => {
       const { itemId } = opts.input;
-      return await deleteGlobalItemService(itemId);
+      return await deleteGlobalItemService(itemId, opts.ctx.executionCtx);
     });
 }
diff --git a/server/src/controllers/item/deleteItem.ts b/server/src/controllers/item/deleteItem.ts
index 6f627679d..aa832a2a2 100644
--- a/server/src/controllers/item/deleteItem.ts
+++ b/server/src/controllers/item/deleteItem.ts
@@ -26,6 +26,6 @@ import { publicProcedure } from '../../trpc';
 export function deleteItemRoute() {
   return publicProcedure.input(validator.deleteItem).mutation(async (opts) => {
     const { itemId, packId } = opts.input;
-    return await deleteItemService(itemId, packId);
+    return await deleteItemService(itemId, opts.ctx.executionCtx, packId);
   });
 }
diff --git a/server/src/controllers/item/editGlobalItemAsDuplicate.ts b/server/src/controllers/item/editGlobalItemAsDuplicate.ts
index c17ed632a..0e6d7b1f9 100644
--- a/server/src/controllers/item/editGlobalItemAsDuplicate.ts
+++ b/server/src/controllers/item/editGlobalItemAsDuplicate.ts
@@ -62,6 +62,7 @@ export function editGlobalItemAsDuplicateRoute() {
         quantity,
         unit,
         type,
+        opts.ctx.executionCtx,
       );
       return item;
     });
diff --git a/server/src/controllers/item/editItem.ts b/server/src/controllers/item/editItem.ts
index 684d2d8cc..c0f6028e2 100644
--- a/server/src/controllers/item/editItem.ts
+++ b/server/src/controllers/item/editItem.ts
@@ -30,7 +30,15 @@ export function editItemRoute() {
       throw new Error('Invalid item type');
     }
 
-    const item = await editItemService(id, name, weight, unit, quantity, type);
+    const item = await editItemService(
+      opts.ctx.executionCtx,
+      id,
+      name,
+      weight,
+      unit,
+      quantity,
+      type,
+    );
     return item;
   });
 }
diff --git a/server/src/controllers/pack/addPack.ts b/server/src/controllers/pack/addPack.ts
index b427ef51a..dac03f94e 100644
--- a/server/src/controllers/pack/addPack.ts
+++ b/server/src/controllers/pack/addPack.ts
@@ -18,7 +18,12 @@ import { publicProcedure } from '../../trpc';
 export function addPackRoute() {
   return publicProcedure.input(validator.addPack).mutation(async (opts) => {
     const { name, owner_id, is_public } = opts.input;
-    const pack = await addPackService(name, owner_id, is_public);
+    const pack = await addPackService(
+      name,
+      owner_id,
+      is_public,
+      opts.ctx.executionCtx,
+    );
     return pack;
   });
 }
diff --git a/server/src/controllers/pack/deletePack.ts b/server/src/controllers/pack/deletePack.ts
index aabe40bcc..a93971004 100644
--- a/server/src/controllers/pack/deletePack.ts
+++ b/server/src/controllers/pack/deletePack.ts
@@ -22,7 +22,7 @@ import { publicProcedure } from '../../trpc';
 export function deletePackRoute() {
   return publicProcedure.input(validator.deletePack).mutation(async (opts) => {
     const { packId } = opts.input;
-    await deletePackService(packId);
+    await deletePackService(packId, opts.ctx.executionCtx);
     return { msg: 'pack was deleted successfully' };
   });
 }
diff --git a/server/src/controllers/pack/editPack.ts b/server/src/controllers/pack/editPack.ts
index d3278ab8c..615363977 100644
--- a/server/src/controllers/pack/editPack.ts
+++ b/server/src/controllers/pack/editPack.ts
@@ -27,7 +27,7 @@ import * as validator from '@packrat/validations';
 export function editPackRoute() {
   return publicProcedure.input(validator.editPack).mutation(async (opts) => {
     const packData = opts.input;
-    const pack = await editPackService(packData);
+    const pack = await editPackService(packData, opts.ctx.executionCtx);
     return pack;
   });
 }
diff --git a/server/src/services/item/addItemGlobalService.ts b/server/src/services/item/addItemGlobalService.ts
index 2a1bfd2ed..a023b2007 100644
--- a/server/src/services/item/addItemGlobalService.ts
+++ b/server/src/services/item/addItemGlobalService.ts
@@ -1,7 +1,7 @@
+import { type ExecutionContext } from 'hono';
 import { type InsertItemCategory } from '../../db/schema';
 import { Item } from '../../drizzle/methods/Item';
 import { ItemCategory } from '../../drizzle/methods/itemcategory';
-import { Queue } from '../../queue/client';
 import { ItemCategory as categories } from '../../utils/itemCategory';
 import { VectorClient } from '../../vector/client';
 // import { prisma } from '../../prisma';
@@ -23,6 +23,7 @@ export const addItemGlobalService = async (
   unit: string,
   type: 'Food' | 'Water' | 'Essentials',
   ownerId: string,
+  executionCtx: ExecutionContext,
 ) => {
   let category: InsertItemCategory | null;
   if (!categories.includes(type)) {
@@ -44,16 +45,16 @@ export const addItemGlobalService = async (
     ownerId,
   });
 
-  Queue.getInstance().addTask(async () => {
-    await VectorClient.instance.syncRecord({
+  executionCtx.waitUntil(
+    VectorClient.instance.syncRecord({
       id: newItem.id,
       content: name,
       namespace: 'items',
       metadata: {
         isPublic: newItem.global,
       },
-    });
-  });
+    }),
+  );
 
   return newItem;
 };
diff --git a/server/src/services/item/addItemService.ts b/server/src/services/item/addItemService.ts
index beffe4c55..06598fb37 100644
--- a/server/src/services/item/addItemService.ts
+++ b/server/src/services/item/addItemService.ts
@@ -5,8 +5,8 @@ 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 { Queue } from '../../queue/client';
 import { VectorClient } from '../../vector/client';
+import { type ExecutionContext } from 'hono';
 
 /**
  * Generates a new item and adds it to a pack based on the given parameters.
@@ -27,6 +27,7 @@ export const addItemService = async (
   packId: string,
   type: 'Food' | 'Water' | 'Essentials',
   ownerId: string,
+  executionCtx: ExecutionContext
 ) => {
   let category: InsertItemCategory | null;
   if (!categories.includes(type)) {
@@ -72,7 +73,7 @@ export const addItemService = async (
 
   // return { newItem: updatedItem, packId };
 
-  Queue.getInstance().addTask(async () => {
+  executionCtx.waitUntil
     await VectorClient.instance.syncRecord({
       id: item.id,
       content: name,
@@ -80,8 +81,8 @@ export const addItemService = async (
       metadata: {
         isPublic: item.global,
       },
-    });
-  });
+    })
+  );
 
   return item;
 };
diff --git a/server/src/services/item/deleteGlobalItemService.ts b/server/src/services/item/deleteGlobalItemService.ts
index 1b496e8dc..f3c06de93 100644
--- a/server/src/services/item/deleteGlobalItemService.ts
+++ b/server/src/services/item/deleteGlobalItemService.ts
@@ -1,7 +1,7 @@
 // import { prisma } from '../../prisma';
 
+import { type ExecutionContext } from 'hono';
 import { Item } from '../../drizzle/methods/Item';
-import { Queue } from '../../queue/client';
 import { VectorClient } from '../../vector/client';
 
 /**
@@ -12,13 +12,12 @@ import { VectorClient } from '../../vector/client';
  */
 export const deleteGlobalItemService = async (
   itemId: string,
+  executionCtx: ExecutionContext,
 ): Promise<object> => {
   const itemClass = new Item();
   await itemClass.delete(itemId);
 
-  Queue.getInstance().addTask(async () => {
-    VectorClient.instance.delete(itemId);
-  });
+  executionCtx.waitUntil(VectorClient.instance.delete(itemId));
 
   return { message: 'Item deleted successfully' };
 };
diff --git a/server/src/services/item/deleteItemService.ts b/server/src/services/item/deleteItemService.ts
index 2979f05e2..86526bca3 100644
--- a/server/src/services/item/deleteItemService.ts
+++ b/server/src/services/item/deleteItemService.ts
@@ -1,8 +1,8 @@
 // import { prisma } from '../../prisma';
 
+import { type ExecutionContext } from 'hono';
 import { Item } from '../../drizzle/methods/Item';
 import { ItemPacks } from '../../drizzle/methods/ItemPacks';
-import { Queue } from '../../queue/client';
 import { VectorClient } from '../../vector/client';
 
 /**
@@ -12,7 +12,11 @@ import { VectorClient } from '../../vector/client';
  * @param {string} packId - The ID of the pack that the item belongs to.
  * @return {Promise<object>} - The deleted item object.
  */
-export const deleteItemService = async (itemId: string, packId?: string) => {
+export const deleteItemService = async (
+  itemId: string,
+  executionCtx: ExecutionContext,
+  packId?: string,
+) => {
   const itemClass = new Item();
   const ItemPacksClass = new ItemPacks();
 
@@ -21,9 +25,7 @@ export const deleteItemService = async (itemId: string, packId?: string) => {
     await ItemPacksClass.delete(itemId, packId);
   }
 
-  Queue.getInstance().addTask(async () => {
-    VectorClient.instance.delete(itemId);
-  });
+  executionCtx.waitUntil(VectorClient.instance.delete(itemId));
 
   return { message: 'Item deleted successfully' };
 };
diff --git a/server/src/services/item/editGlobalItemAsDuplicateService.ts b/server/src/services/item/editGlobalItemAsDuplicateService.ts
index 49bcf99eb..e45f6b92e 100644
--- a/server/src/services/item/editGlobalItemAsDuplicateService.ts
+++ b/server/src/services/item/editGlobalItemAsDuplicateService.ts
@@ -3,8 +3,8 @@ import { ItemPacks } from '../../drizzle/methods/ItemPacks';
 import { ItemCategory } from '../../drizzle/methods/itemcategory';
 import { ItemCategory as categories } from '../../utils/itemCategory';
 import { type InsertItemCategory } from '../../db/schema';
-import { Queue } from '../../queue/client';
 import { VectorClient } from '../../vector/client';
+import { type ExecutionContext } from 'hono';
 
 /**
  * Edits a global item by creating a duplicate item in a specific pack.
@@ -26,6 +26,7 @@ export const editGlobalItemAsDuplicateService = async (
   quantity: number,
   unit: string,
   type: string,
+  executionCtx: ExecutionContext,
 ) => {
   let category: InsertItemCategory | null;
   if (!categories.includes(type)) {
@@ -68,16 +69,16 @@ export const editGlobalItemAsDuplicateService = async (
     packId,
   });
 
-  Queue.getInstance().addTask(async () => {
-    await VectorClient.instance.syncRecord({
+  executionCtx.waitUntil(
+    VectorClient.instance.syncRecord({
       id: newItem.id,
       content: name,
       metadata: {
         isPublic: newItem.global,
       },
       namespace: 'items',
-    });
-  });
+    }),
+  );
 
   return newItem;
 };
diff --git a/server/src/services/item/editItemService.ts b/server/src/services/item/editItemService.ts
index 82f7dcaef..7b17c3fec 100644
--- a/server/src/services/item/editItemService.ts
+++ b/server/src/services/item/editItemService.ts
@@ -1,9 +1,9 @@
 // import { prisma } from '../../prisma';
 
+import { type ExecutionContext } from 'hono';
 import { type InsertItemCategory } from '../../db/schema';
 import { Item } from '../../drizzle/methods/Item';
 import { ItemCategory } from '../../drizzle/methods/itemcategory';
-import { Queue } from '../../queue/client';
 import { ItemCategory as categories } from '../../utils/itemCategory';
 import { VectorClient } from '../../vector/client';
 
@@ -19,6 +19,7 @@ import { VectorClient } from '../../vector/client';
  * @return {Promise<object>} - the edited item
  */
 export const editItemService = async (
+  executionCtx: ExecutionContext,
   id: string,
   name?: string,
   weight?: number,
@@ -64,8 +65,8 @@ export const editItemService = async (
     categoryId: category.id || item.categoryId,
   });
 
-  Queue.getInstance().addTask(async () => {
-    await VectorClient.instance.syncRecord(
+  executionCtx.waitUntil(
+    VectorClient.instance.syncRecord(
       {
         id: newItem.id,
         content: name,
@@ -75,8 +76,8 @@ export const editItemService = async (
         namespace: 'packs',
       },
       true,
-    );
-  });
+    ),
+  );
 
   return newItem;
 };
diff --git a/server/src/services/pack/addPackService.ts b/server/src/services/pack/addPackService.ts
index 1d7993709..d8cb914ae 100644
--- a/server/src/services/pack/addPackService.ts
+++ b/server/src/services/pack/addPackService.ts
@@ -1,5 +1,5 @@
+import { type ExecutionContext } from 'hono';
 import { Pack } from '../../drizzle/methods/pack';
-import { Queue } from '../../queue/client';
 import { VectorClient } from '../../vector/client';
 
 /**
@@ -13,6 +13,7 @@ export const addPackService = async (
   name: string,
   owner_id: string,
   is_public: boolean,
+  executionCtx: ExecutionContext,
 ) => {
   const packClass = new Pack();
   // Check if a pack with the same name already exists
@@ -25,20 +26,16 @@ export const addPackService = async (
   // Create the new pack
   const createdPack = await packClass.create({ name, owner_id, is_public });
 
-  // Get the queue instance
-  const queue = Queue.getInstance();
-
-  // Add the vector sync task to the queue
-  queue.addTask(async () => {
-    await VectorClient.instance.syncRecord({
+  executionCtx.waitUntil(
+    VectorClient.instance.syncRecord({
       id: createdPack.id,
       content: name,
       metadata: {
         isPublic: createdPack.is_public,
       },
       namespace: 'packs',
-    });
-  });
+    }),
+  );
 
   return createdPack;
 };
diff --git a/server/src/services/pack/deletePackService.ts b/server/src/services/pack/deletePackService.ts
index 9c850c3d2..d73c10b10 100644
--- a/server/src/services/pack/deletePackService.ts
+++ b/server/src/services/pack/deletePackService.ts
@@ -1,5 +1,5 @@
+import { type ExecutionContext } from 'hono';
 import { Pack } from '../../drizzle/methods/pack';
-import { Queue } from '../../queue/client';
 import { VectorClient } from '../../vector/client';
 
 /**
@@ -8,13 +8,14 @@ import { VectorClient } from '../../vector/client';
  * @param {string} packId - The ID of the pack to be deleted.
  * @return {Object} - An object containing a message indicating the success of the deletion.
  */
-export const deletePackService = async (packId: string): Promise<object> => {
+export const deletePackService = async (
+  packId: string,
+  executionCtx: ExecutionContext,
+): Promise<object> => {
   const packClass = new Pack();
   await packClass.delete(packId);
 
-  Queue.getInstance().addTask(async () => {
-    await VectorClient.instance.delete(packId);
-  });
+  executionCtx.waitUntil(VectorClient.instance.delete(packId));
 
   return { message: 'Pack was deleted successfully' };
 };
diff --git a/server/src/services/pack/editPackService.ts b/server/src/services/pack/editPackService.ts
index 46ac5e020..5b1043d63 100644
--- a/server/src/services/pack/editPackService.ts
+++ b/server/src/services/pack/editPackService.ts
@@ -1,3 +1,4 @@
+import { type ExecutionContext } from 'hono';
 import { Pack } from '../../drizzle/methods/pack';
 import { Queue } from '../../queue/client';
 import { VectorClient } from '../../vector/client';
@@ -9,7 +10,10 @@ import { VectorClient } from '../../vector/client';
  * @param {object} packData
  * @return {object}
  */
-export const editPackService = async (packData: any) => {
+export const editPackService = async (
+  packData: any,
+  executionCtx: ExecutionContext,
+) => {
   const packClass = new Pack();
   const { id, name, is_public } = packData;
   const pack = await packClass.findPack({ id });
@@ -23,8 +27,8 @@ export const editPackService = async (packData: any) => {
   };
   const updatedPack = await packClass.update(updatedData);
 
-  Queue.getInstance().addTask(async () => {
-    await VectorClient.instance.syncRecord(
+  executionCtx.waitUntil(
+    VectorClient.instance.syncRecord(
       {
         id: updatedData.id,
         content: name,
@@ -34,8 +38,8 @@ export const editPackService = async (packData: any) => {
         namespace: 'packs',
       },
       true,
-    );
-  });
+    ),
+  );
 
   return updatedPack;
 };
diff --git a/server/src/trpc/context.ts b/server/src/trpc/context.ts
index 3c875ee9e..095276290 100644
--- a/server/src/trpc/context.ts
+++ b/server/src/trpc/context.ts
@@ -34,6 +34,7 @@ export const createContext = (honoContext: Context) => async () => {
   return {
     env: restEnv as ContextEnv,
     user,
+    executionCtx: honoContext.executionCtx,
   };
 };
 

From eff74b783a54b257ae37232bbfdb48d42775f6f9 Mon Sep 17 00:00:00 2001
From: Ibrahim Isa Jajere <ibrahimisajajere274@gmail.com>
Date: Sat, 13 Jul 2024 14:15:48 +0100
Subject: [PATCH 185/257] =?UTF-8?q?=E2=9C=A8=20sync=20packs=20from=20dupli?=
 =?UTF-8?q?catePublicPack=20with=20vectorize?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 server/src/controllers/pack/duplicatePublicPack.ts |  7 ++++++-
 .../services/pack/duplicatePublicPackService.ts    | 14 ++++++++++++++
 2 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/server/src/controllers/pack/duplicatePublicPack.ts b/server/src/controllers/pack/duplicatePublicPack.ts
index 975884c45..cc9418c65 100644
--- a/server/src/controllers/pack/duplicatePublicPack.ts
+++ b/server/src/controllers/pack/duplicatePublicPack.ts
@@ -28,7 +28,12 @@ export function duplicatePublicPackRoute() {
     .input(validator.duplicatePublicPack)
     .mutation(async (opts) => {
       const { packId, ownerId, items } = opts.input;
-      const result = await duplicatePublicPackService(packId, ownerId, items);
+      const result = await duplicatePublicPackService(
+        packId,
+        ownerId,
+        items,
+        opts.ctx.executionCtx,
+      );
       return result;
     });
 }
diff --git a/server/src/services/pack/duplicatePublicPackService.ts b/server/src/services/pack/duplicatePublicPackService.ts
index 5bc383a0f..63716fe22 100644
--- a/server/src/services/pack/duplicatePublicPackService.ts
+++ b/server/src/services/pack/duplicatePublicPackService.ts
@@ -1,5 +1,7 @@
 import { Pack } from '../../drizzle/methods/pack';
 import { ItemPacks } from '../../drizzle/methods/ItemPacks';
+import { type ExecutionContext } from 'hono';
+import { VectorClient } from '../../vector/client';
 
 /**
  * Duplicates a public pack service.
@@ -13,6 +15,7 @@ export const duplicatePublicPackService = async (
   packId: string,
   ownerId: string,
   items: any[],
+  executionCtx: ExecutionContext,
 ): Promise<object> => {
   const packClass = new Pack();
   const itemPacksClass = new ItemPacks();
@@ -32,5 +35,16 @@ export const duplicatePublicPackService = async (
       await itemPacksClass.create({ itemId, packId: newPack.id }),
   );
 
+  executionCtx.waitUntil(
+    VectorClient.instance.syncRecord({
+      id: newPack.id,
+      content: newPack.name,
+      metadata: {
+        isPublic: newPack.is_public,
+      },
+      namespace: 'packs',
+    }),
+  );
+
   return { pack: newPack };
 };

From b839eff5086d48e47284a8972a5cfa3d5da54f6b Mon Sep 17 00:00:00 2001
From: Ibrahim Isa Jajere <ibrahimisajajere274@gmail.com>
Date: Sat, 13 Jul 2024 14:29:06 +0100
Subject: [PATCH 186/257] =?UTF-8?q?=F0=9F=90=9B=20update=20getSimilarPacks?=
 =?UTF-8?q?Service=20to=20consume=20response=20correctly=20and=20prevent?=
 =?UTF-8?q?=20passing=20empty=20array=20to=20`inArray`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/services/pack/getSimilarPacksService.ts | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/server/src/services/pack/getSimilarPacksService.ts b/server/src/services/pack/getSimilarPacksService.ts
index 11d3888a3..c575f16b1 100644
--- a/server/src/services/pack/getSimilarPacksService.ts
+++ b/server/src/services/pack/getSimilarPacksService.ts
@@ -21,11 +21,14 @@ export async function getSimilarPacksService(id: string, limit: number = 5) {
     throw new Error(`Pack with id: ${id} not found`);
   }
 
-  const { matches } = await VectorClient.instance.search(
-    pack.name,
-    'packs',
-    limit,
-  );
+  const {
+    result: { matches },
+  } = await VectorClient.instance.search(pack.name, 'packs', limit, null);
+
+  // passing empty array to the db query below throws
+  if (!matches.length) {
+    return [];
+  }
 
   const similarPacksResult = await DbClient.instance
     .select()
@@ -33,12 +36,12 @@ export async function getSimilarPacksService(id: string, limit: number = 5) {
     .where(
       inArray(
         PacksTable.id,
-        matches.matches.map((m) => m.id),
+        matches.map((m) => m.id),
       ),
     );
 
   // add similarity score to packs result
-  const similarPacks = matches.matches.map((match) => {
+  const similarPacks = matches.map((match) => {
     return {
       ...similarPacksResult.find((p) => p.id == match.id),
       similarityScore: match.score,

From b58076dd7e45c354a7fcd9f34c2990c84493613f Mon Sep 17 00:00:00 2001
From: Ibrahim Isa Jajere <ibrahimisajajere274@gmail.com>
Date: Sat, 13 Jul 2024 14:31:52 +0100
Subject: [PATCH 187/257] =?UTF-8?q?=E2=9C=A8=20add=20get=20similar=20items?=
 =?UTF-8?q?=20service=20&=20controller?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/controllers/item/getSimilarItems.ts   | 13 +++++
 .../services/item/getSimilarItemsService.ts   | 52 +++++++++++++++++++
 2 files changed, 65 insertions(+)
 create mode 100644 server/src/controllers/item/getSimilarItems.ts
 create mode 100644 server/src/services/item/getSimilarItemsService.ts

diff --git a/server/src/controllers/item/getSimilarItems.ts b/server/src/controllers/item/getSimilarItems.ts
new file mode 100644
index 000000000..4524e8b84
--- /dev/null
+++ b/server/src/controllers/item/getSimilarItems.ts
@@ -0,0 +1,13 @@
+import { getSimilarItemsService } from '../../services/item/getSimilarItemsService';
+import { publicProcedure } from '../../trpc';
+import * as validator from '@packrat/validations';
+
+export function getSimilarItemsRoute() {
+  return publicProcedure
+    .input(validator.getSimilarItems)
+    .query(async (opts) => {
+      const { id } = opts.input;
+      const items = await getSimilarItemsService(id);
+      return items;
+    });
+}
diff --git a/server/src/services/item/getSimilarItemsService.ts b/server/src/services/item/getSimilarItemsService.ts
new file mode 100644
index 000000000..07142e9ea
--- /dev/null
+++ b/server/src/services/item/getSimilarItemsService.ts
@@ -0,0 +1,52 @@
+import { DbClient } from '../../db/client';
+import { Item } from '../../drizzle/methods/Item';
+import { VectorClient } from '../../vector/client';
+import { item as ItemsTable } from '../../db/schema';
+import { inArray } from 'drizzle-orm';
+
+/**
+ * Retrieves items that are similar to the provided item.
+ *
+ * @param {string} id - ID of the item for which to retrive similar items for.
+ * @param {string} limit - Max number of similar items to return (default = 5).
+ * @return {Promise<any[]>} A promise that resolves with an array of items.
+ */
+export async function getSimilarItemsService(id: string, limit: number = 5) {
+  const itemObj = new Item();
+  let item = await itemObj.findItem({
+    id,
+  });
+
+  if (!item) {
+    throw new Error(`Item with id: ${id} not found`);
+  }
+
+  const {
+    result: { matches },
+  } = await VectorClient.instance.search(item.name, 'items', limit, null);
+
+  // passing empty array to the db query below throws
+  if (!matches.length) {
+    return [];
+  }
+
+  const similarItemsResult = await DbClient.instance
+    .select()
+    .from(ItemsTable)
+    .where(
+      inArray(
+        ItemsTable.id,
+        matches.map((m) => m.id),
+      ),
+    );
+
+  // add similarity score to items result
+  const similarItems = matches.map((match) => {
+    return {
+      ...similarItemsResult.find((item) => item.id == match.id),
+      similarityScore: match.score,
+    };
+  });
+
+  return similarItems;
+}

From a1192f6263fc2b49d0d3baf03ff62fe1db53201f Mon Sep 17 00:00:00 2001
From: Ibrahim Isa Jajere <ibrahimisajajere274@gmail.com>
Date: Sat, 13 Jul 2024 15:13:01 +0100
Subject: [PATCH 188/257] =?UTF-8?q?=F0=9F=90=9B=20use=20fetch,=20axios=20i?=
 =?UTF-8?q?s=20not=20supported=20in=20workers?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 server/src/vector/client.ts | 71 ++++++++++++++++++-------------------
 1 file changed, 35 insertions(+), 36 deletions(-)

diff --git a/server/src/vector/client.ts b/server/src/vector/client.ts
index 0c7f18acd..3bd76d20a 100644
--- a/server/src/vector/client.ts
+++ b/server/src/vector/client.ts
@@ -1,5 +1,4 @@
 import { AiClient } from '../integrations/ai/client';
-import axios, { type AxiosInstance } from 'axios';
 
 class VectorClient {
   private static _instance: VectorClient | null = null;
@@ -7,20 +6,12 @@ class VectorClient {
   private indexName: string;
   private accountId: string;
   private readonly VECTORIZE_INDEX_URL: string;
-  private axiosInstance: AxiosInstance;
 
   private constructor(apiKey: string, indexName: string, accountId: string) {
     this.apiKey = apiKey;
     this.indexName = indexName;
     this.accountId = accountId;
     this.VECTORIZE_INDEX_URL = `https://api.cloudflare.com/client/v4/accounts/${this.accountId}/vectorize/indexes/${this.indexName}`;
-    this.axiosInstance = axios.create({
-      baseURL: this.VECTORIZE_INDEX_URL,
-      headers: {
-        'Content-Type': 'application/json',
-        Authorization: `Bearer ${this.apiKey}`,
-      },
-    });
   }
 
   public static get instance(): VectorClient {
@@ -86,39 +77,47 @@ class VectorClient {
   ) {
     const ndjsonBody = `${JSON.stringify({ id, values, namespace, metadata })}\n`;
 
-    try {
-      const response = await this.axiosInstance.post('/upsert', ndjsonBody);
-      return response.data;
-    } catch (error) {
-      // The request was made and the server responded with a status code
-      // that falls out of the range of 2xx
-      if (error.response) {
-        console.error(error.response.data);
-        console.error(error.response.status);
-        throw new Error(`Failed to upsert vector: ${error.response.status}`);
-      } else if (error.request) {
-        // The request was made but no response was received
-        throw new Error('No response was received from vector index');
-      } else {
-        throw new Error('Unknown error');
-      }
+    const url = `${this.VECTORIZE_INDEX_URL}/upsert`;
+
+    const response = await fetch(url, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/x-ndjson',
+        Authorization: `Bearer ${this.apiKey}`,
+      },
+      body: ndjsonBody,
+    });
+
+    if (!response.ok) {
+      const errorText = await response.text();
+      throw new Error(
+        `Failed to upsert vector: ${response.statusText} - ${errorText}`,
+      );
     }
+
+    return await response.json();
   }
 
   public async delete(id: string) {
-    const response = await this.axiosInstance.post(
-      '/delete-by-ids',
-      {
-        ids: [id],
-      },
-      {
-        headers: {
-          'Content-Type': 'application/json',
-        },
+    const url = `${this.VECTORIZE_INDEX_URL}/delete-by-ids`;
+
+    const response = await fetch(url, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${this.apiKey}`,
       },
-    );
+      body: JSON.stringify({ ids: [id] }),
+    });
 
-    return await response.data;
+    if (!response.ok) {
+      const errorText = await response.text();
+      throw new Error(
+        `Failed to delete vector: ${response.statusText} - ${errorText}`,
+      );
+    }
+
+    return await response.json();
   }
 
   // Commented out the original logic

From aa208fdb7924b20d00556f76578f45c7db513237 Mon Sep 17 00:00:00 2001
From: Ibrahim Isa Jajere <ibrahimisajajere274@gmail.com>
Date: Sat, 13 Jul 2024 15:13:37 +0100
Subject: [PATCH 189/257] =?UTF-8?q?=F0=9F=90=9B=20syntax?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 server/src/services/item/addItemService.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/server/src/services/item/addItemService.ts b/server/src/services/item/addItemService.ts
index 06598fb37..a4ca1a4e4 100644
--- a/server/src/services/item/addItemService.ts
+++ b/server/src/services/item/addItemService.ts
@@ -81,8 +81,7 @@ export const addItemService = async (
       metadata: {
         isPublic: item.global,
       },
-    })
-  );
+    });
 
   return item;
 };

From beec4788110a7dd8a96b75a26939508b8908575f Mon Sep 17 00:00:00 2001
From: Anmol Verma <anmolverma2810@gmail.com>
Date: Sat, 13 Jul 2024 22:01:46 +0530
Subject: [PATCH 190/257] Changes in style of dropdown

---
 packages/app/components/pack/AddPack.tsx | 1 -
 packages/ui/src/ZDropdown/index.tsx      | 8 +++++++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/app/components/pack/AddPack.tsx b/packages/app/components/pack/AddPack.tsx
index 94c772709..5d2da1846 100644
--- a/packages/app/components/pack/AddPack.tsx
+++ b/packages/app/components/pack/AddPack.tsx
@@ -73,7 +73,6 @@ export const AddPack = ({
     }
   };
   const { xxs, xxl, xs } = useResponsive();
-  console.log(selectedValue);
 
   return (
     <View style={styles.container}>
diff --git a/packages/ui/src/ZDropdown/index.tsx b/packages/ui/src/ZDropdown/index.tsx
index 232a0ee13..b7c4bb11f 100644
--- a/packages/ui/src/ZDropdown/index.tsx
+++ b/packages/ui/src/ZDropdown/index.tsx
@@ -1,6 +1,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';
 
 type ContentProps = ComponentProps<typeof ZeegoDropdownMenu.Content>;
@@ -46,7 +47,12 @@ const RDropdownMenu = ({ menuItems = [], menuName }) => {
   return (
     <DropdownMenu.Root>
       <DropdownMenu.Trigger>
-        <RButton>{menuName}</RButton>
+        <RButton
+          style={{ backgroundColor: '#deddda', color: 'black' }}
+          iconAfter={ChevronDown}
+        >
+          {menuName}
+        </RButton>
       </DropdownMenu.Trigger>
       <DropdownMenu.Content>
         {menuItems.map(({ label, onSelect = () => {} }) => (

From f00337450f538b08166eac2cecbd5888f45367b5 Mon Sep 17 00:00:00 2001
From: Ibrahim Isa Jajere <ibrahimisajajere274@gmail.com>
Date: Sun, 14 Jul 2024 09:12:03 +0100
Subject: [PATCH 191/257] =?UTF-8?q?=E2=9C=A8=20add=20visibility=20filter?=
 =?UTF-8?q?=20for=20similarity=20query?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/shared-types/README.md               |  1 +
 packages/shared-types/package.json            | 20 +++++++++++++
 packages/shared-types/src/index.ts            |  1 +
 .../src/packAndItemVisibilityFilter.ts        |  5 ++++
 packages/shared-types/tsconfig.json           | 22 ++++++++++++++
 packages/validations/package.json             |  1 +
 .../src/validations/itemRoutesValidator.ts    |  9 +++++-
 .../src/validations/packRoutesValidator.ts    |  9 ++++++
 server/package.json                           |  1 +
 .../src/controllers/item/getSimilarItems.ts   |  4 +--
 .../src/controllers/pack/getSimilarPacks.ts   | 14 ++++-----
 .../services/item/getSimilarItemsService.ts   | 19 ++++++++++--
 .../services/pack/getSimilarPacksService.ts   | 19 ++++++++++--
 server/src/vector/client.ts                   |  6 ++--
 yarn.lock                                     | 30 +++++++++++++++++++
 15 files changed, 143 insertions(+), 18 deletions(-)
 create mode 100644 packages/shared-types/README.md
 create mode 100644 packages/shared-types/package.json
 create mode 100644 packages/shared-types/src/index.ts
 create mode 100644 packages/shared-types/src/packAndItemVisibilityFilter.ts
 create mode 100644 packages/shared-types/tsconfig.json

diff --git a/packages/shared-types/README.md b/packages/shared-types/README.md
new file mode 100644
index 000000000..170dcbc0f
--- /dev/null
+++ b/packages/shared-types/README.md
@@ -0,0 +1 @@
+# shared-types
diff --git a/packages/shared-types/package.json b/packages/shared-types/package.json
new file mode 100644
index 000000000..886a49a0c
--- /dev/null
+++ b/packages/shared-types/package.json
@@ -0,0 +1,20 @@
+{
+  "name": "@packrat/shared-types",
+  "version": "0.0.1",
+  "source": "src/index.ts",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "private": true,
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "NODE_OPTIONS=--max_old_space_size=4096 tsc",
+    "build:and:install": "yarn build && yarn",
+    "postinstall": "yarn build",
+    "clean": "rm -rf dist && rm -rf node_modules"
+  },
+  "keywords": [],
+  "license": "ISC",
+  "devDependencies": {
+    "typescript": "^5.5.3"
+  }
+}
diff --git a/packages/shared-types/src/index.ts b/packages/shared-types/src/index.ts
new file mode 100644
index 000000000..39f4fde4b
--- /dev/null
+++ b/packages/shared-types/src/index.ts
@@ -0,0 +1 @@
+export * from './packAndItemVisibilityFilter';
diff --git a/packages/shared-types/src/packAndItemVisibilityFilter.ts b/packages/shared-types/src/packAndItemVisibilityFilter.ts
new file mode 100644
index 000000000..ae5cb6688
--- /dev/null
+++ b/packages/shared-types/src/packAndItemVisibilityFilter.ts
@@ -0,0 +1,5 @@
+export enum PackAndItemVisibilityFilter {
+  PUBLIC = 'PUBLIC',
+  PRIVATE = 'PRIVATE',
+  ALL = 'ALL',
+}
diff --git a/packages/shared-types/tsconfig.json b/packages/shared-types/tsconfig.json
new file mode 100644
index 000000000..7ae3e4157
--- /dev/null
+++ b/packages/shared-types/tsconfig.json
@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "lib": ["es6", "DOM"],
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "isolatedModules": true,
+    "moduleResolution": "node",
+    "preserveWatchOutput": true,
+    "skipLibCheck": true,
+    "allowJs": true,
+    "strict": true,
+    "outDir": "dist",
+    "rootDir": "src",
+    "declaration": true,
+    "sourceMap": true,
+    "declarationMap": true
+  },
+  "exclude": ["node_modules"],
+  "include": ["src"]
+}
diff --git a/packages/validations/package.json b/packages/validations/package.json
index ef88435d2..88a005f07 100644
--- a/packages/validations/package.json
+++ b/packages/validations/package.json
@@ -16,6 +16,7 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "@packrat/shared-types": "*",
     "@types/express": "^4.17.17",
     "@types/node": "^20.8.3",
     "express": "^4.19.2",
diff --git a/packages/validations/src/validations/itemRoutesValidator.ts b/packages/validations/src/validations/itemRoutesValidator.ts
index e2bf46d51..fbe267299 100644
--- a/packages/validations/src/validations/itemRoutesValidator.ts
+++ b/packages/validations/src/validations/itemRoutesValidator.ts
@@ -1,3 +1,4 @@
+import { PackAndItemVisibilityFilter } from '@packrat/shared-types';
 import { z } from 'zod';
 
 export const getItemByName = z.object({
@@ -68,4 +69,10 @@ export const getItemsGlobally = z.object({
   page: z.number(),
 });
 
-export const getSimilarItems = z.object({ id: z.string(), limit: z.number() });
\ No newline at end of file
+export const getSimilarItems = z.object({
+  id: z.string(),
+  limit: z.number(),
+  visibility: z
+    .nativeEnum(PackAndItemVisibilityFilter)
+    .default(PackAndItemVisibilityFilter.ALL),
+});
diff --git a/packages/validations/src/validations/packRoutesValidator.ts b/packages/validations/src/validations/packRoutesValidator.ts
index 5f1ca996a..cb7b2edf2 100644
--- a/packages/validations/src/validations/packRoutesValidator.ts
+++ b/packages/validations/src/validations/packRoutesValidator.ts
@@ -1,4 +1,5 @@
 import { z } from 'zod';
+import { PackAndItemVisibilityFilter } from '@packrat/shared-types';
 
 export const getPacks = z.object({
   ownerId: z.string(),
@@ -43,3 +44,11 @@ export const duplicatePublicPack = z.object({
   ownerId: z.string(),
   items: z.array(z.string()),
 });
+
+export const getSimilarPacks = z.object({
+  id: z.string(),
+  limit: z.number(),
+  visibility: z
+    .nativeEnum(PackAndItemVisibilityFilter)
+    .default(PackAndItemVisibilityFilter.ALL),
+});
\ No newline at end of file
diff --git a/server/package.json b/server/package.json
index cc41a832b..d04f06940 100644
--- a/server/package.json
+++ b/server/package.json
@@ -42,6 +42,7 @@
     "@hono/trpc-server": "^0.1.1",
     "@instructor-ai/instructor": "^1.3.0",
     "@libsql/client": "^0.4.0-pre.5",
+    "@packrat/shared-types": "*",
     "@packrat/validations": "*",
     "@paralleldrive/cuid2": "^2.2.2",
     "@prisma/client": "^5.7.0",
diff --git a/server/src/controllers/item/getSimilarItems.ts b/server/src/controllers/item/getSimilarItems.ts
index 4524e8b84..773a4e4e2 100644
--- a/server/src/controllers/item/getSimilarItems.ts
+++ b/server/src/controllers/item/getSimilarItems.ts
@@ -6,8 +6,8 @@ export function getSimilarItemsRoute() {
   return publicProcedure
     .input(validator.getSimilarItems)
     .query(async (opts) => {
-      const { id } = opts.input;
-      const items = await getSimilarItemsService(id);
+      const { id, limit, visibility } = opts.input;
+      const items = await getSimilarItemsService(id, limit, visibility);
       return items;
     });
 }
diff --git a/server/src/controllers/pack/getSimilarPacks.ts b/server/src/controllers/pack/getSimilarPacks.ts
index afda02959..09b980271 100644
--- a/server/src/controllers/pack/getSimilarPacks.ts
+++ b/server/src/controllers/pack/getSimilarPacks.ts
@@ -1,13 +1,11 @@
 import { publicProcedure } from '../../trpc';
 import { getSimilarPacksService } from '../../services/pack/pack.service';
-import { z } from 'zod';
+import { getSimilarPacks } from '@packrat/validations';
 
 export function getSimilarPacksRoute() {
-  return publicProcedure
-    .input(z.object({ id: z.string(), limit: z.number() }))
-    .query(async (opts) => {
-      const { id, limit } = opts.input;
-      const packs = await getSimilarPacksService(id, limit);
-      return packs;
-    });
+  return publicProcedure.input(getSimilarPacks).query(async (opts) => {
+    const { id, limit, visibility } = opts.input;
+    const packs = await getSimilarPacksService(id, limit, visibility);
+    return packs;
+  });
 }
diff --git a/server/src/services/item/getSimilarItemsService.ts b/server/src/services/item/getSimilarItemsService.ts
index 07142e9ea..b469a0365 100644
--- a/server/src/services/item/getSimilarItemsService.ts
+++ b/server/src/services/item/getSimilarItemsService.ts
@@ -3,6 +3,7 @@ import { Item } from '../../drizzle/methods/Item';
 import { VectorClient } from '../../vector/client';
 import { item as ItemsTable } from '../../db/schema';
 import { inArray } from 'drizzle-orm';
+import { PackAndItemVisibilityFilter } from '@packrat/shared-types';
 
 /**
  * Retrieves items that are similar to the provided item.
@@ -11,7 +12,11 @@ import { inArray } from 'drizzle-orm';
  * @param {string} limit - Max number of similar items to return (default = 5).
  * @return {Promise<any[]>} A promise that resolves with an array of items.
  */
-export async function getSimilarItemsService(id: string, limit: number = 5) {
+export async function getSimilarItemsService(
+  id: string,
+  limit: number = 5,
+  visibility: PackAndItemVisibilityFilter,
+) {
   const itemObj = new Item();
   let item = await itemObj.findItem({
     id,
@@ -23,7 +28,17 @@ export async function getSimilarItemsService(id: string, limit: number = 5) {
 
   const {
     result: { matches },
-  } = await VectorClient.instance.search(item.name, 'items', limit, null);
+  } = await VectorClient.instance.search(
+    item.name,
+    'items',
+    limit,
+    visibility == PackAndItemVisibilityFilter.ALL
+      ? undefined
+      : {
+          isPublic:
+            visibility == PackAndItemVisibilityFilter.PUBLIC ? true : false,
+        },
+  );
 
   // passing empty array to the db query below throws
   if (!matches.length) {
diff --git a/server/src/services/pack/getSimilarPacksService.ts b/server/src/services/pack/getSimilarPacksService.ts
index c575f16b1..d48cb7785 100644
--- a/server/src/services/pack/getSimilarPacksService.ts
+++ b/server/src/services/pack/getSimilarPacksService.ts
@@ -3,6 +3,7 @@ import { Pack } from '../../drizzle/methods/pack';
 import { VectorClient } from '../../vector/client';
 import { pack as PacksTable } from '../../db/schema';
 import { inArray } from 'drizzle-orm';
+import { PackAndItemVisibilityFilter } from '@packrat/shared-types';
 
 /**
  * Retrieves packs that are similar to the provided pack.
@@ -11,7 +12,11 @@ import { inArray } from 'drizzle-orm';
  * @param {string} limit - Max number of similar packs to return.
  * @return {Promise<any[]>} An array of similar packs.
  */
-export async function getSimilarPacksService(id: string, limit: number = 5) {
+export async function getSimilarPacksService(
+  id: string,
+  limit: number = 5,
+  visibility: PackAndItemVisibilityFilter,
+) {
   const packClass = new Pack();
   let pack = await packClass.findPack({
     id,
@@ -23,7 +28,17 @@ export async function getSimilarPacksService(id: string, limit: number = 5) {
 
   const {
     result: { matches },
-  } = await VectorClient.instance.search(pack.name, 'packs', limit, null);
+  } = await VectorClient.instance.search(
+    pack.name,
+    'packs',
+    limit,
+    visibility == PackAndItemVisibilityFilter.ALL
+      ? undefined
+      : {
+          isPublic:
+            visibility == PackAndItemVisibilityFilter.PUBLIC ? true : false,
+        },
+  );
 
   // passing empty array to the db query below throws
   if (!matches.length) {
diff --git a/server/src/vector/client.ts b/server/src/vector/client.ts
index 3bd76d20a..7d045fbc3 100644
--- a/server/src/vector/client.ts
+++ b/server/src/vector/client.ts
@@ -131,14 +131,14 @@ class VectorClient {
    * @param {string} content - Search query content.
    * @param {string} namespace - Segment vectors; only vectors within the provided namespace are used for search.
    * @param {string} topK - Return the top K similar vectors (default = 3).
-   * @param {boolean|null} isPublic - Filter vectors based on visibility. Pass `null` to not apply the filter.
+   * @param {Object} filter - Optional [metadata filter](https://developers.cloudflare.com/vectorize/reference/metadata-filtering)
    * @returns {Promise<Object>} A promise that resolves with Query Vectors Response which contains matches.
    */
   public async search(
     content: string,
     namespace: string,
     topK: number = 3,
-    isPublic: boolean | null,
+    filter?: { [key: string]: any },
   ) {
     const vector = await AiClient.getEmbedding(content);
     const url = `${this.VECTORIZE_INDEX_URL}/query`;
@@ -152,7 +152,7 @@ class VectorClient {
         vector,
         topK,
         namespace,
-        ...(isPublic != null ? { filter: { isPublic } } : {}),
+        ...(filter ? { filter } : {}),
       }),
     });
 
diff --git a/yarn.lock b/yarn.lock
index 6d003791c..9854bb582 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5474,6 +5474,14 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@packrat/shared-types@npm:^0.0.1, @packrat/shared-types@workspace:^, @packrat/shared-types@workspace:packages/shared-types":
+  version: 0.0.0-use.local
+  resolution: "@packrat/shared-types@workspace:packages/shared-types"
+  dependencies:
+    typescript: "npm:^5.5.3"
+  languageName: unknown
+  linkType: soft
+
 "@packrat/ui@npm:*, @packrat/ui@workspace:packages/ui":
   version: 0.0.0-use.local
   resolution: "@packrat/ui@workspace:packages/ui"
@@ -5529,6 +5537,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@packrat/validations@workspace:packages/validations"
   dependencies:
+    "@packrat/shared-types": "npm:^0.0.1"
     "@types/express": "npm:^4.17.17"
     "@types/node": "npm:^20.8.3"
     express: "npm:^4.19.2"
@@ -32285,6 +32294,7 @@ __metadata:
     "@instructor-ai/instructor": "npm:^1.3.0"
     "@libsql/client": "npm:^0.4.0-pre.5"
     "@openapitools/openapi-generator-cli": "npm:^2.7.0"
+    "@packrat/shared-types": "workspace:^"
     "@packrat/validations": "npm:*"
     "@paralleldrive/cuid2": "npm:^2.2.2"
     "@prisma/client": "npm:^5.7.0"
@@ -34979,6 +34989,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"typescript@npm:^5.5.3":
+  version: 5.5.3
+  resolution: "typescript@npm:5.5.3"
+  bin:
+    tsc: bin/tsc
+    tsserver: bin/tsserver
+  checksum: 10/11a867312419ed497929aafd2f1d28b2cd41810a5eb6c6e9e169559112e9ea073d681c121a29102e67cd4478d0a4ae37a306a5800f3717f59c4337e6a9bd5e8d
+  languageName: node
+  linkType: hard
+
 "typescript@patch:typescript@npm%3A4.9.5#optional!builtin<compat/typescript>":
   version: 4.9.5
   resolution: "typescript@patch:typescript@npm%3A4.9.5#optional!builtin<compat/typescript>::version=4.9.5&hash=289587"
@@ -34999,6 +35019,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"typescript@patch:typescript@npm%3A^5.5.3#optional!builtin<compat/typescript>":
+  version: 5.5.3
+  resolution: "typescript@patch:typescript@npm%3A5.5.3#optional!builtin<compat/typescript>::version=5.5.3&hash=5adc0c"
+  bin:
+    tsc: bin/tsc
+    tsserver: bin/tsserver
+  checksum: 10/b61b8bb4b4d6a8a00f9d5f931f8c67070eed6ad11feabf4c41744a326987080bfc806a621596c70fbf2e5974eca3ed65bafeeeb22a078071bdfb51d8abd7c013
+  languageName: node
+  linkType: hard
+
 "ua-parser-js@npm:^1.0.35":
   version: 1.0.37
   resolution: "ua-parser-js@npm:1.0.37"

From 66f745dd87e5c7d0fc0841523882e61f3bd2ac27 Mon Sep 17 00:00:00 2001
From: Anmol Verma <anmolverma2810@gmail.com>
Date: Sun, 14 Jul 2024 16:06:27 +0530
Subject: [PATCH 192/257] Change ispublic from dropdown to RSwitch

---
 packages/app/components/pack/AddPack.tsx      | 50 ++++++++++---------
 .../pack_table/TableHelperComponents.tsx      |  6 +--
 packages/app/hooks/packs/useAddNewPack.ts     |  2 +-
 packages/ui/src/RSelect/index.tsx             |  7 ++-
 packages/ui/src/ZDropdown/index.tsx           |  5 +-
 5 files changed, 38 insertions(+), 32 deletions(-)

diff --git a/packages/app/components/pack/AddPack.tsx b/packages/app/components/pack/AddPack.tsx
index 5d2da1846..78d61160b 100644
--- a/packages/app/components/pack/AddPack.tsx
+++ b/packages/app/components/pack/AddPack.tsx
@@ -4,6 +4,8 @@ import {
   Form,
   FormInput,
   FormSelect as OriginalFormSelect,
+  RStack,
+  RSwitch,
   RText,
   SubmitButton,
   useModal,
@@ -15,6 +17,7 @@ import useCustomStyles from 'app/hooks/useCustomStyles';
 import useResponsive from 'app/hooks/useResponsive';
 import React, { useState } from 'react';
 import { Platform, View } from 'react-native';
+import { Switch } from 'tamagui';
 import useTheme from '../../hooks/useTheme';
 
 const FormSelect: any = OriginalFormSelect;
@@ -31,13 +34,13 @@ export const AddPack = ({
     useTheme();
   const styles = useCustomStyles(loadStyles);
   const router = useRouter();
-  const [selectedValue, SetSelectedValue] = useState('No');
-  // const [_, setPackIdParam] = usePackId();
+  const { xxs, xxl, xs } = useResponsive();
 
   const {
     addNewPackAsync,
     isError,
     isLoading,
+    isPublic,
     setIsPublic,
     packSelectOptions,
   } = useAddNewPack();
@@ -58,21 +61,16 @@ export const AddPack = ({
       if (!isCreatingTrip) {
         router.push(`/pack/${response.id}`);
       }
-
-      // setPackIdParam(response.id);
     } catch {}
   };
 
-  const handleonValueChange = (itemValue) => {
-    if (itemValue === 'Yes') {
-      SetSelectedValue('Yes');
-      setIsPublic(true);
-    } else {
-      SetSelectedValue('No');
-      setIsPublic(false);
-    }
+  const handleOnValueChange = () => {
+    setIsPublic((prevIsPublic) => {
+      const newIsPublic = !prevIsPublic;
+      console.log('isPublic:', newIsPublic);
+      return newIsPublic;
+    });
   };
-  const { xxs, xxl, xs } = useResponsive();
 
   return (
     <View style={styles.container}>
@@ -92,16 +90,22 @@ export const AddPack = ({
               justifyContent: 'center',
             }}
           />
-          <DropdownComponent
-            value={selectedValue}
-            data={packSelectOptions}
-            onValueChange={handleonValueChange}
-            placeholder="Is Public"
-            width={xxs ? '50%' : xs ? '50%' : xxl ? '80%' : '8%'}
-            native={true}
-            zeego={Platform.OS !== 'web'}
-          />
-
+          <RStack
+            style={{
+              flexDirection: 'row',
+              alignItems: 'center',
+              justifyContent: 'space-between',
+            }}
+          >
+            <RText>Public </RText>
+            <RSwitch
+              checked={isPublic}
+              onCheckedChange={handleOnValueChange}
+              size="$1.5"
+            >
+              <Switch.Thumb />
+            </RSwitch>
+          </RStack>
           <SubmitButton style={styles.btn} onSubmit={handleAddPack}>
             <RText style={{ color: currentTheme.colors.text }}>
               {isLoading ? 'Loading...' : 'Add Pack'}
diff --git a/packages/app/components/pack_table/TableHelperComponents.tsx b/packages/app/components/pack_table/TableHelperComponents.tsx
index e11146a45..0158a96e2 100644
--- a/packages/app/components/pack_table/TableHelperComponents.tsx
+++ b/packages/app/components/pack_table/TableHelperComponents.tsx
@@ -11,7 +11,7 @@ import useResponsive from 'app/hooks/useResponsive';
 import useTheme from 'app/hooks/useTheme';
 import { formatNumber } from 'app/utils/formatNumber';
 import React from 'react';
-import { View } from 'react-native';
+import { Platform, View } from 'react-native';
 import { Row } from 'react-native-table-component';
 import loadStyles from './packtable.style';
 
@@ -132,7 +132,7 @@ const WeightUnitDropdown = ({ value, onChange }: WeightUnitDropdownProps) => {
         placeholder="Select weight unit"
         width="100%"
         native={true}
-        zeego={true}
+        zeego={Platform.OS !== 'web'}
       />
     </View>
   );
@@ -161,4 +161,4 @@ export {
   TitleRow,
   TotalWeightBox,
   WeightUnitDropdown,
-};
\ No newline at end of file
+};
diff --git a/packages/app/hooks/packs/useAddNewPack.ts b/packages/app/hooks/packs/useAddNewPack.ts
index ac16b8c04..b5add1ba1 100644
--- a/packages/app/hooks/packs/useAddNewPack.ts
+++ b/packages/app/hooks/packs/useAddNewPack.ts
@@ -50,7 +50,7 @@ interface UseAddNewPackResult {
   packSelectOptions: { value: string; label: string }[];
 }
 
-export const useAddNewPack = (): UseAddNewPackResult  => {
+export const useAddNewPack = (): UseAddNewPackResult => {
   const user = useAuthUser();
   const [name, setName] = useState('');
   const [isPublic, setIsPublic] = useState(false);
diff --git a/packages/ui/src/RSelect/index.tsx b/packages/ui/src/RSelect/index.tsx
index 68f1bdaf0..de5209c45 100644
--- a/packages/ui/src/RSelect/index.tsx
+++ b/packages/ui/src/RSelect/index.tsx
@@ -113,7 +113,12 @@ export function SelectItem(props) {
       onValueChange={handleChange}
       {...forwardedProps}
     >
-      <Select.Trigger alignSelf="center" width={220} iconAfter={ChevronDown}>
+      <Select.Trigger
+        alignSelf="center"
+        alignItems="center"
+        justifyContent="center"
+        width={220}
+      >
         <Select.Value>{placeholder}</Select.Value>
       </Select.Trigger>
       <Select.Content zIndex={200000}>
diff --git a/packages/ui/src/ZDropdown/index.tsx b/packages/ui/src/ZDropdown/index.tsx
index b7c4bb11f..e96a025ff 100644
--- a/packages/ui/src/ZDropdown/index.tsx
+++ b/packages/ui/src/ZDropdown/index.tsx
@@ -47,10 +47,7 @@ const RDropdownMenu = ({ menuItems = [], menuName }) => {
   return (
     <DropdownMenu.Root>
       <DropdownMenu.Trigger>
-        <RButton
-          style={{ backgroundColor: '#deddda', color: 'black' }}
-          iconAfter={ChevronDown}
-        >
+        <RButton style={{ backgroundColor: '#deddda', color: 'black' }}>
           {menuName}
         </RButton>
       </DropdownMenu.Trigger>

From a498f635fe690650ebc6b9bc08caaf80786fa51e Mon Sep 17 00:00:00 2001
From: Ibrahim Isa Jajere <ibrahimisajajere274@gmail.com>
Date: Sun, 14 Jul 2024 12:03:45 +0100
Subject: [PATCH 193/257] =?UTF-8?q?=F0=9F=90=9B=20fix=20waitUntil=20call?=
 =?UTF-8?q?=20for=20syncing=20item=20to=20vectorize=20in=20background?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 server/src/services/item/addItemService.ts | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/server/src/services/item/addItemService.ts b/server/src/services/item/addItemService.ts
index a4ca1a4e4..036b4fe82 100644
--- a/server/src/services/item/addItemService.ts
+++ b/server/src/services/item/addItemService.ts
@@ -73,15 +73,16 @@ export const addItemService = async (
 
   // return { newItem: updatedItem, packId };
 
-  executionCtx.waitUntil
-    await VectorClient.instance.syncRecord({
+  executionCtx.waitUntil(
+    VectorClient.instance.syncRecord({
       id: item.id,
       content: name,
       namespace: 'items',
       metadata: {
         isPublic: item.global,
       },
-    });
+    }),
+  );
 
   return item;
 };

From 9d7224d1d92177df1a5b8a1baea58e8f2cf6d60e Mon Sep 17 00:00:00 2001
From: Ibrahim Isa Jajere <ibrahimisajajere274@gmail.com>
Date: Sun, 14 Jul 2024 12:17:27 +0100
Subject: [PATCH 194/257] =?UTF-8?q?=E2=9C=A8=20add=20limit=20check=20for?=
 =?UTF-8?q?=20similarity=20query?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 server/src/controllers/item/getSimilarItems.ts | 5 +++++
 server/src/controllers/pack/getSimilarPacks.ts | 5 +++++
 2 files changed, 10 insertions(+)

diff --git a/server/src/controllers/item/getSimilarItems.ts b/server/src/controllers/item/getSimilarItems.ts
index 773a4e4e2..4a2a01f8f 100644
--- a/server/src/controllers/item/getSimilarItems.ts
+++ b/server/src/controllers/item/getSimilarItems.ts
@@ -7,6 +7,11 @@ export function getSimilarItemsRoute() {
     .input(validator.getSimilarItems)
     .query(async (opts) => {
       const { id, limit, visibility } = opts.input;
+
+      if (limit < 1) {
+        throw new Error('limit must be greater than 0');
+      }
+
       const items = await getSimilarItemsService(id, limit, visibility);
       return items;
     });
diff --git a/server/src/controllers/pack/getSimilarPacks.ts b/server/src/controllers/pack/getSimilarPacks.ts
index 09b980271..19a776560 100644
--- a/server/src/controllers/pack/getSimilarPacks.ts
+++ b/server/src/controllers/pack/getSimilarPacks.ts
@@ -5,6 +5,11 @@ import { getSimilarPacks } from '@packrat/validations';
 export function getSimilarPacksRoute() {
   return publicProcedure.input(getSimilarPacks).query(async (opts) => {
     const { id, limit, visibility } = opts.input;
+
+    if (limit < 1) {
+      throw new Error('limit must be greater than 0');
+    }
+
     const packs = await getSimilarPacksService(id, limit, visibility);
     return packs;
   });

From 3018874555a3b5499c58c29170155d49e2417df3 Mon Sep 17 00:00:00 2001
From: Taron <taron.aleksanyan.20@gmail.com>
Date: Sun, 14 Jul 2024 17:39:52 +0400
Subject: [PATCH 195/257] fix login redirect issue

---
 packages/app/auth/hooks/useUser.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/app/auth/hooks/useUser.ts b/packages/app/auth/hooks/useUser.ts
index 49bc26de6..4a98c9c3c 100644
--- a/packages/app/auth/hooks/useUser.ts
+++ b/packages/app/auth/hooks/useUser.ts
@@ -22,7 +22,10 @@ export const useUserQuery = () => {
   // Sometimes the isLoading state don't work as expected so we have this solution here
   // isLoading stays true when request is not enabled
   // TODO fix loading state
-  const isLoading = (isRequestEnabled && isRequestLoading) || isTokenLoading;
+  const isLoading =
+    (isRequestEnabled && isRequestLoading) ||
+    isTokenLoading === undefined ||
+    isTokenLoading;
 
   return { user: data, isLoading, refetch };
 };

From 95af910ed3a63227c48bd451edb46d4ae9190fe1 Mon Sep 17 00:00:00 2001
From: Taron <taron.aleksanyan.20@gmail.com>
Date: Sun, 14 Jul 2024 22:27:07 +0400
Subject: [PATCH 196/257] show weather with 3 hours interval as we get from the
 API

---
 .../app/components/weather/WeatherCard.tsx    | 110 +++++++++--------
 .../app/components/weather/WeatherData.tsx    |   2 +-
 packages/app/hooks/weather/useDate.ts         |  13 +-
 packages/app/hooks/weather/useFetchWeather.ts | 114 +++++++++++++++++-
 packages/app/utils/dates.ts                   |  30 +++++
 5 files changed, 205 insertions(+), 64 deletions(-)
 create mode 100644 packages/app/utils/dates.ts

diff --git a/packages/app/components/weather/WeatherCard.tsx b/packages/app/components/weather/WeatherCard.tsx
index 5e3a30a03..df46b7e4d 100644
--- a/packages/app/components/weather/WeatherCard.tsx
+++ b/packages/app/components/weather/WeatherCard.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import useTheme from '../../hooks/useTheme';
 import { convertToCelsius } from '../../utils/convertToCelsius';
 import { convertToKmh } from '../../utils/convertToKmh';
@@ -12,58 +12,33 @@ import {
 import { RImage, RStack as OriginalRStack, RText } from '@packrat/ui';
 import useCustomStyles from 'app/hooks/useCustomStyles';
 import { useDate } from 'app/hooks/weather/useDate';
+import { WeatherResult } from 'hooks/weather';
+import { getCurrentUTCDate, getUTCDateFromStr } from 'app/utils/dates';
+import { format, isAfter, isEqual } from 'date-fns';
 
 const RStack: any = OriginalRStack;
 
-interface WeatherObject {
-  name: string;
-  sys: {
-    country: string;
-  };
-  weather: {
-    description: any;
-    icon: string;
-  }[];
-  main: {
-    temp: number;
-    humidity: number;
-  };
-  wind: {
-    speed: number;
-  };
-}
-
-interface WeatherDay {
-  weather: {
-    icon: string;
-  }[];
-  main: {
-    temp: number;
-  };
-}
-
 interface Location {
   name: string;
   country: string;
 }
 
-interface WeatherCardProps {
-  weatherObject?: WeatherObject;
-  weatherWeek?: WeatherDay[];
+interface WeatherCardProps extends WeatherResult {
   location?: Location;
 }
 
 export default function WeatherCard({
-  weatherObject,
+  weatherToday,
   weatherWeek,
   location,
 }: WeatherCardProps) {
   // Hooks
   const { currentTheme } = useTheme();
   const styles = useCustomStyles(loadStyles);
-  const { dateFormatted, day, restOfWeek } = useDate();
-
-  const weatherIconUrl = `https://openweathermap.org/img/wn/${weatherObject!.weather[0]!.icon}@2x.png`;
+  const { dateFormatted, day } = useDate();
+  const { currentWeather, restSegments } = useMemo(() => {
+    return separateCurrentSegment(weatherToday);
+  }, [weatherToday]);
 
   return (
     <RStack
@@ -128,7 +103,7 @@ export default function WeatherCard({
         >
           {dayNumToString(day)}
         </RText>
-        <RText>{dateFormatted}</RText>
+        <RText>{dateFormatted} ( UTC )</RText>
         <RStack
           style={{
             flexDirection: 'row',
@@ -145,7 +120,7 @@ export default function WeatherCard({
         <RStack>
           <RImage
             source={{
-              uri: weatherIconUrl,
+              uri: getWeatherIconURI(currentWeather.icon),
               width: 62,
               height: 62,
             }}
@@ -161,10 +136,10 @@ export default function WeatherCard({
               fontWeight: 600,
             }}
           >
-            {convertToCelsius(weatherObject.main.temp)}
+            {convertToCelsius(currentWeather.temp)}
           </RText>
           <RText style={{ fontWeight: 700 }}>
-            {weatherObject!.weather[0]!.description}
+            {currentWeather.description}
           </RText>
         </RStack>
       </RStack>
@@ -193,7 +168,7 @@ export default function WeatherCard({
                 PRECIPITATION
               </RText>
             </RStack>
-            <RText>0%</RText>
+            <RText>{currentWeather.precipitation}mm</RText>
           </RStack>
           <RStack style={styles.weatherInfo}>
             <RStack style={styles.iconsSection}>
@@ -211,7 +186,7 @@ export default function WeatherCard({
                 HUMIDITY
               </RText>
             </RStack>
-            <RText>{weatherObject.main.humidity}%</RText>
+            <RText>{currentWeather.humidity}%</RText>
           </RStack>
           <RStack style={styles.weatherInfo}>
             <RStack style={styles.iconsSection}>
@@ -229,7 +204,7 @@ export default function WeatherCard({
                 WIND
               </RText>
             </RStack>
-            <RText>{convertToKmh(weatherObject.wind.speed)}</RText>
+            <RText>{convertToKmh(currentWeather.wind)}</RText>
           </RStack>
         </RStack>
 
@@ -247,8 +222,8 @@ export default function WeatherCard({
           flex={0.5}
           style={styles.cardContainer}
         >
-          {weatherWeek.map((day, i) => {
-            const weatherIconUrl = `https://openweathermap.org/img/wn/${day!.weather[0]!.icon}@2x.png`;
+          {restSegments.map((segment, i) => {
+            const weatherIconUrl = getWeatherIconURI(segment.icon);
 
             return (
               <RStack
@@ -268,9 +243,11 @@ export default function WeatherCard({
                   }}
                   alt="waetherIcon"
                 />
-                <RText>{restOfWeek[i]}</RText>
+                <RText>
+                  {format(getUTCDateFromStr(segment.date), 'HH:mm')} ( UTC )
+                </RText>
                 <RText style={{ fontWeight: 700 }}>
-                  {convertToCelsius(day.main.temp)}
+                  {convertToCelsius(segment.temp)}
                 </RText>
               </RStack>
             );
@@ -287,12 +264,12 @@ export default function WeatherCard({
         backgroundColor={styles.tempColor.backgroundColor}
         style={styles.card}
       >
-        {restOfWeek.map((day, index) => {
+        {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(weatherWeek[index]!.main!.temp)}
+                {convertToCelsius(avgTemp)}
               </RText>
             </RStack>
           );
@@ -302,10 +279,6 @@ export default function WeatherCard({
   );
 }
 
-const formatDay = (day) => {
-  return dayNumToString(day)?.slice?.(0, 3) || '';
-};
-
 const loadStyles = (theme) => {
   const { currentTheme } = theme;
   return {
@@ -365,3 +338,36 @@ const loadStyles = (theme) => {
     },
   };
 };
+
+const getWeatherIconURI = (icon: string) => {
+  return `https://openweathermap.org/img/wn/${icon}@2x.png`;
+};
+
+const separateCurrentSegment = (
+  weatherToday: WeatherResult['weatherToday'],
+) => {
+  return weatherToday.reduce(
+    (result, current, index, arr) => {
+      const now = getCurrentUTCDate();
+      const date = getUTCDateFromStr(current.date);
+
+      if (
+        (isAfter(date, now) || isEqual(date, now)) &&
+        !result.currentWeather
+      ) {
+        result.currentWeather = current;
+        return result;
+      }
+
+      if (index === arr.length - 1 && !result.currentWeather) {
+        result.currentWeather = current;
+        return result;
+      }
+
+      result.restSegments.push(current);
+
+      return result;
+    },
+    { currentWeather: null, restSegments: [] },
+  );
+};
diff --git a/packages/app/components/weather/WeatherData.tsx b/packages/app/components/weather/WeatherData.tsx
index e0e6eca23..9c325762d 100644
--- a/packages/app/components/weather/WeatherData.tsx
+++ b/packages/app/components/weather/WeatherData.tsx
@@ -15,7 +15,7 @@ export const WeatherData = ({
 
   return weatherToday && weatherWeek ? (
     <WeatherCard
-      weatherObject={weatherToday}
+      weatherToday={weatherToday}
       weatherWeek={weatherWeek}
       location={location}
     />
diff --git a/packages/app/hooks/weather/useDate.ts b/packages/app/hooks/weather/useDate.ts
index ab7843162..5825cd90c 100644
--- a/packages/app/hooks/weather/useDate.ts
+++ b/packages/app/hooks/weather/useDate.ts
@@ -1,15 +1,10 @@
-import { format, addDays } from 'date-fns';
+import { format } from 'date-fns';
+import { getCurrentUTCDate } from 'app/utils/dates';
 
 export const useDate = () => {
-  const date = new Date();
+  const date = getCurrentUTCDate();
   const dateFormatted = format(date, 'MMMM d, yyyy');
-  const getNext4Days = (currentDate) => {
-    return Array.from({ length: 4 }, (_, i) =>
-      format(addDays(currentDate, i + 1), 'EEEE'),
-    );
-  };
   const day = date.getDay();
-  const restOfWeek = getNext4Days(date);
 
-  return { dateFormatted, day, restOfWeek };
+  return { dateFormatted, day };
 };
diff --git a/packages/app/hooks/weather/useFetchWeather.ts b/packages/app/hooks/weather/useFetchWeather.ts
index 7d15d8ac2..aff1fec5e 100644
--- a/packages/app/hooks/weather/useFetchWeather.ts
+++ b/packages/app/hooks/weather/useFetchWeather.ts
@@ -1,4 +1,38 @@
+import { useMemo } from 'react';
 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;
+interface WeatherToday {
+  date: string;
+  temp: number;
+  icon: string;
+  description: string;
+  precipitation: number;
+  humidity: number;
+  wind: number;
+}
+
+interface WeatherWeekData {
+  day: (typeof weekdays)[number];
+  avgTemp: number;
+}
+
+type WeatherWeek = Record<(typeof weekdays)[number], number>;
+
+export interface WeatherResult {
+  weatherToday: WeatherToday[];
+  weatherWeek: WeatherWeekData[];
+}
 
 export const useFetchWeather = (latLng, isDisabled = false) => {
   const { lat, lon } = latLng || {};
@@ -12,10 +46,86 @@ export const useFetchWeather = (latLng, isDisabled = false) => {
         keepPreviousData: true,
       },
     );
+
+  const { weatherToday, weatherWeek } = useMemo<WeatherResult>(() => {
+    if (!Array.isArray(data?.list)) {
+      return { weatherToday: null, weatherWeek: null };
+    }
+
+    const result = data.list.reduce(
+      (result, current, index, arr) => {
+        const date = getUTCDateFromStr(current.dt_txt);
+
+        const currentTemp = current?.main?.temp ?? 0;
+
+        if (isToday(date)) {
+          result.weatherToday.push({
+            date: current.dt_txt,
+            icon: current?.weather?.[0]?.icon,
+            description: current?.weather?.[0]?.description,
+            temp: currentTemp,
+            humidity: current?.main?.humidity,
+            wind: current?.wind?.speed,
+            precipitation: current?.rain?.['3h'],
+          });
+
+          return result;
+        }
+
+        const weekDay = getDay(date);
+
+        if (!result.currentWeekDay) {
+          result.currentWeekDay = weekDay;
+          result.weatherWeek[weekDay] = { temp: currentTemp, count: 1 };
+
+          return result;
+        }
+
+        const currentWeekDayResult = result.weatherWeek[result.currentWeekDay];
+
+        if (result.currentWeekDay === weekDay) {
+          result.weatherWeek[weekDay].temp += currentTemp;
+          result.weatherWeek[weekDay].count++;
+          if (index === arr.length - 1) {
+            result.weatherWeek[result.currentWeekDay] = Math.ceil(
+              currentWeekDayResult.temp / currentWeekDayResult.count,
+            );
+          }
+          return result;
+        }
+
+        result.weatherWeek[result.currentWeekDay] = Math.ceil(
+          currentWeekDayResult.temp / currentWeekDayResult.count,
+        );
+        result.currentWeekDay = weekDay;
+        result.weatherWeek[weekDay] = { temp: currentTemp, count: 1 };
+
+        return result;
+      },
+      { weatherToday: [], weatherWeek: {}, currentWeekDay: null },
+    );
+
+    const weekDayListData = [];
+
+    const nextWeekDay = getDay(getCurrentUTCDate()) + 1;
+    for (let i = nextWeekDay; i < weekdays.length; i++) {
+      if (result.weatherWeek[i] === undefined) {
+        break;
+      }
+      weekDayListData.push({
+        day: weekdays[i],
+        avgTemp: result.weatherWeek[i],
+      });
+    }
+
+    result.weatherWeek = weekDayListData;
+
+    return result;
+  }, [data?.list]);
   return {
     refetch,
-    weatherToday: data?.list?.[0],
-    weatherWeek: data?.list?.slice(0, 4),
+    weatherToday,
+    weatherWeek,
     location: data?.city || {},
     error,
     isLoading,
diff --git a/packages/app/utils/dates.ts b/packages/app/utils/dates.ts
new file mode 100644
index 000000000..4b3e721d9
--- /dev/null
+++ b/packages/app/utils/dates.ts
@@ -0,0 +1,30 @@
+export const getCurrentUTCDate = () => {
+  const now = new Date();
+
+  const year = now.getUTCFullYear();
+  const month = now.getUTCMonth();
+  const day = now.getUTCDate();
+  const hours = now.getUTCHours();
+  const minutes = now.getUTCMinutes();
+  const seconds = now.getUTCSeconds();
+  const milliseconds = now.getUTCMilliseconds();
+
+  return new Date(
+    Date.UTC(year, month, day, hours, minutes, seconds, milliseconds),
+  );
+};
+
+export const getUTCDateFromStr = (dateStr: string) => {
+  const localDate = new Date(new Date(dateStr));
+
+  return new Date(
+    Date.UTC(
+      localDate.getUTCFullYear(),
+      localDate.getUTCMonth(),
+      localDate.getUTCDate(),
+      localDate.getUTCHours(),
+      localDate.getUTCMinutes(),
+      localDate.getUTCSeconds(),
+    ),
+  );
+};

From fe581432b0b47b52c8e385bf675590cf9a2209d8 Mon Sep 17 00:00:00 2001
From: Taron <taron.aleksanyan.20@gmail.com>
Date: Mon, 15 Jul 2024 00:49:41 +0400
Subject: [PATCH 197/257] Fix  pack favorites

---
 packages/app/components/feed/FeedCard.tsx     |  2 +-
 packages/app/components/user/UserDataCard.tsx | 46 ++++++++++++++-----
 .../app/components/user/UserDataContainer.tsx |  3 +-
 .../app/hooks/favorites/useAddFavorite.ts     |  2 +-
 4 files changed, 38 insertions(+), 15 deletions(-)

diff --git a/packages/app/components/feed/FeedCard.tsx b/packages/app/components/feed/FeedCard.tsx
index b75171baf..69e9d0fba 100644
--- a/packages/app/components/feed/FeedCard.tsx
+++ b/packages/app/components/feed/FeedCard.tsx
@@ -284,7 +284,7 @@ export default function Card({
                             gap: 8,
                           }}
                         >
-                          {user?.id === owner_id ? (
+                          {user?.id !== owner_id ? (
                             <TouchableOpacity onPress={handleAddToFavorite}>
                               <AntDesign
                                 name="heart"
diff --git a/packages/app/components/user/UserDataCard.tsx b/packages/app/components/user/UserDataCard.tsx
index 9e2be4a57..95bd4831c 100644
--- a/packages/app/components/user/UserDataCard.tsx
+++ b/packages/app/components/user/UserDataCard.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { AntDesign } from '@expo/vector-icons';
 import { formatDistanceToNow } from 'date-fns';
-import { View } from 'react-native';
+import { View, TouchableOpacity } from 'react-native';
 import {
   RH2,
   RText as OriginalRText,
@@ -14,6 +14,7 @@ import { truncateString } from '../../utils/truncateString';
 import { useEditPack } from 'app/hooks/packs';
 import { Platform } from 'react-native';
 import { useEditTrips } from 'app/hooks/trips';
+import { useAddFavorite } from 'app/hooks/favorites';
 
 const RText: any = OriginalRText;
 
@@ -24,7 +25,7 @@ interface UserDataCardProps {
   name: string;
   total_weight?: number;
   is_public: boolean;
-  favorited_by?: string[];
+  currentUserId?: number;
   favorites_count: number;
   createdAt: string;
   index: number;
@@ -38,7 +39,7 @@ const UserDataCard = ({
   name,
   total_weight,
   is_public,
-  favorited_by,
+  currentUserId,
   favorites_count,
   createdAt,
   index,
@@ -48,6 +49,7 @@ const UserDataCard = ({
     useEditPack();
   const { editTrips: changeTripStatus, isLoading: isTripLoading } =
     useEditTrips();
+  const { addFavorite } = useAddFavorite();
 
   const handleChangeStatus = (index) => {
     if (type === 'pack') {
@@ -73,6 +75,15 @@ const UserDataCard = ({
     }
   };
 
+  const handleAddToFavorite = () => {
+    const data = {
+      packId: id,
+      userId: currentUserId,
+    };
+
+    addFavorite(data);
+  };
+
   const truncatedName = truncateString(name, 25);
   const truncatedDestination = truncateString(destination, 25);
 
@@ -197,15 +208,26 @@ const UserDataCard = ({
                 gap: 10,
               }}
             >
-              <RText color="gray" fontWeight={400}>
-                {favorites_count}
-              </RText>
-              <AntDesign
-                name="heart"
-                size={16}
-                color="red"
-                style={{ display: 'flex', position: 'absolute', right: 0 }}
-              />
+              {differentUser ? (
+                <TouchableOpacity onPress={handleAddToFavorite}>
+                  <AntDesign
+                    name="heart"
+                    size={16}
+                    color="red"
+                    style={{ display: 'flex', position: 'absolute', right: 0 }}
+                  />
+                </TouchableOpacity>
+              ) : (
+                <RStack
+                  color="gray"
+                  gap="$2"
+                  flexDirection="row"
+                  fontWeight={400}
+                >
+                  <AntDesign name="heart" size={16} color="red" />
+                  <View>{favorites_count}</View>
+                </RStack>
+              )}
             </View>
           </RStack>
         </RStack>
diff --git a/packages/app/components/user/UserDataContainer.tsx b/packages/app/components/user/UserDataContainer.tsx
index 73cefb53c..8f11de695 100644
--- a/packages/app/components/user/UserDataContainer.tsx
+++ b/packages/app/components/user/UserDataContainer.tsx
@@ -55,7 +55,8 @@ export default function UserDataContainer({
         key={item.id}
         {...item}
         index={index}
-        differentUser={differentUser}
+        differentUser={currentUser?.id !== item.owner_id}
+        currentUserId={currentUser?.id}
       />
     );
   };
diff --git a/packages/app/hooks/favorites/useAddFavorite.ts b/packages/app/hooks/favorites/useAddFavorite.ts
index e81bba72d..2a50614dc 100644
--- a/packages/app/hooks/favorites/useAddFavorite.ts
+++ b/packages/app/hooks/favorites/useAddFavorite.ts
@@ -10,7 +10,7 @@ export function useAddFavorite() {
     mutation.mutate(newFavorite, {
       onSuccess: () => {
         // Invalidate and refetch. Update to be more specific
-        utils.getFavoritePacksByUser.invalidate();
+        utils.getUserFavorites.invalidate();
         utils.getPublicPacks.invalidate();
       },
     });

From 55616f56ac3f1f750849c17c7f135075937c0c39 Mon Sep 17 00:00:00 2001
From: Taron <taron.aleksanyan.20@gmail.com>
Date: Mon, 15 Jul 2024 13:48:45 +0400
Subject: [PATCH 198/257] Fix weather segment detection

---
 packages/app/components/weather/WeatherCard.tsx | 8 ++++++--
 packages/app/hooks/weather/useDate.ts           | 2 +-
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/app/components/weather/WeatherCard.tsx b/packages/app/components/weather/WeatherCard.tsx
index df46b7e4d..3c690083a 100644
--- a/packages/app/components/weather/WeatherCard.tsx
+++ b/packages/app/components/weather/WeatherCard.tsx
@@ -168,7 +168,11 @@ export default function WeatherCard({
                 PRECIPITATION
               </RText>
             </RStack>
-            <RText>{currentWeather.precipitation}mm</RText>
+            <RText>
+              {currentWeather.precipitation
+                ? `${currentWeather.precipitation}mm`
+                : 'Not available'}
+            </RText>
           </RStack>
           <RStack style={styles.weatherInfo}>
             <RStack style={styles.iconsSection}>
@@ -352,7 +356,7 @@ const separateCurrentSegment = (
       const date = getUTCDateFromStr(current.date);
 
       if (
-        (isAfter(date, now) || isEqual(date, now)) &&
+        (isAfter(now, date) || isEqual(date, now)) &&
         !result.currentWeather
       ) {
         result.currentWeather = current;
diff --git a/packages/app/hooks/weather/useDate.ts b/packages/app/hooks/weather/useDate.ts
index 5825cd90c..0b022703e 100644
--- a/packages/app/hooks/weather/useDate.ts
+++ b/packages/app/hooks/weather/useDate.ts
@@ -3,7 +3,7 @@ import { getCurrentUTCDate } from 'app/utils/dates';
 
 export const useDate = () => {
   const date = getCurrentUTCDate();
-  const dateFormatted = format(date, 'MMMM d, yyyy');
+  const dateFormatted = format(date, 'MMMM d, yyyy, HH:MM');
   const day = date.getDay();
 
   return { dateFormatted, day };

From 2ab74565910db1ca5ed7fc1b57695b8b163614e0 Mon Sep 17 00:00:00 2001
From: Anmol Verma <anmolverma2810@gmail.com>
Date: Mon, 15 Jul 2024 21:13:09 +0530
Subject: [PATCH 199/257] Change dropdown to sheet

---
 .../pack_table/TableHelperComponents.tsx      |  4 ++--
 packages/ui/src/Dropdown.tsx                  |  6 ++---
 packages/ui/src/RSelect/index.tsx             | 23 ++-----------------
 3 files changed, 7 insertions(+), 26 deletions(-)

diff --git a/packages/app/components/pack_table/TableHelperComponents.tsx b/packages/app/components/pack_table/TableHelperComponents.tsx
index 0158a96e2..6352e9866 100644
--- a/packages/app/components/pack_table/TableHelperComponents.tsx
+++ b/packages/app/components/pack_table/TableHelperComponents.tsx
@@ -11,7 +11,7 @@ import useResponsive from 'app/hooks/useResponsive';
 import useTheme from 'app/hooks/useTheme';
 import { formatNumber } from 'app/utils/formatNumber';
 import React from 'react';
-import { Platform, View } from 'react-native';
+import { View } from 'react-native';
 import { Row } from 'react-native-table-component';
 import loadStyles from './packtable.style';
 
@@ -132,7 +132,7 @@ const WeightUnitDropdown = ({ value, onChange }: WeightUnitDropdownProps) => {
         placeholder="Select weight unit"
         width="100%"
         native={true}
-        zeego={Platform.OS !== 'web'}
+        // zeego={true}
       />
     </View>
   );
diff --git a/packages/ui/src/Dropdown.tsx b/packages/ui/src/Dropdown.tsx
index d700ca445..71a7082d1 100644
--- a/packages/ui/src/Dropdown.tsx
+++ b/packages/ui/src/Dropdown.tsx
@@ -125,7 +125,7 @@ interface DropdownComponentProps {
   style?: any;
   placeholder?: any;
   native?: boolean;
-  zeego?: boolean;
+  // zeego?: boolean;
   [x: string]: any; // for the rest of the props
 }
 
@@ -133,7 +133,7 @@ export const DropdownComponent: React.FC<DropdownComponentProps> = ({
   width,
   style = {},
   placeholder,
-  zeego = false,
+  // zeego = false,
   ...props
 }) => {
   const isWeb = Platform.OS === 'web';
@@ -148,7 +148,7 @@ export const DropdownComponent: React.FC<DropdownComponentProps> = ({
       <RSelect
         placeholder={placeholder || 'Select'}
         native={!isWeb}
-        zeego={zeego}
+        // zeego={zeego}
         {...props}
       />
     </View>
diff --git a/packages/ui/src/RSelect/index.tsx b/packages/ui/src/RSelect/index.tsx
index de5209c45..9b6b118c9 100644
--- a/packages/ui/src/RSelect/index.tsx
+++ b/packages/ui/src/RSelect/index.tsx
@@ -17,14 +17,12 @@ export default function RSelect(props) {
   const {
     textKey = 'label',
     valueKey = 'value',
-    zeego = false,
     native = false,
     ...otherProps
   } = props;
 
   return (
     <SelectItem
-      zeego={zeego}
       native={native}
       textKey={textKey}
       valueKey={valueKey}
@@ -62,7 +60,6 @@ export function SelectItem(props) {
     textKey = 'label',
     valueKey = 'value',
     native = false,
-    zeego = false,
     ...forwardedProps
   } = props;
 
@@ -94,18 +91,6 @@ export function SelectItem(props) {
     return <Text>No options available</Text>;
   }
 
-  if (zeego) {
-    return (
-      <RDropdownMenu
-        menuItems={data.map((item) => ({
-          label: item[textKey],
-          onSelect: () => handleChange(item[valueKey]),
-        }))}
-        menuName={placeholder}
-      />
-    );
-  }
-
   return (
     <Select
       value={value}
@@ -113,12 +98,7 @@ export function SelectItem(props) {
       onValueChange={handleChange}
       {...forwardedProps}
     >
-      <Select.Trigger
-        alignSelf="center"
-        alignItems="center"
-        justifyContent="center"
-        width={220}
-      >
+      <Select.Trigger width={220}>
         <Select.Value>{placeholder}</Select.Value>
       </Select.Trigger>
       <Select.Content zIndex={200000}>
@@ -145,6 +125,7 @@ export function SelectItem(props) {
           <Sheet
             native
             modal
+            snapPointsMode="fit"
             dismissOnSnapToBottom
             animationConfig={{
               type: 'spring',

From c1c160287ba2cca9191841f41b6601b2f2176fd3 Mon Sep 17 00:00:00 2001
From: Taron <taron.aleksanyan.20@gmail.com>
Date: Mon, 15 Jul 2024 23:48:08 +0400
Subject: [PATCH 200/257] fix downloaded map, used native map component

---
 packages/app/components/map/Map.native.tsx | 28 ++++++----
 packages/app/components/map/Map.tsx        |  5 +-
 packages/app/components/map/index.tsx      |  3 +-
 packages/app/components/map/models.ts      |  6 +++
 packages/app/screens/maps/index.tsx        | 60 ++++------------------
 5 files changed, 39 insertions(+), 63 deletions(-)
 create mode 100644 packages/app/components/map/models.ts

diff --git a/packages/app/components/map/Map.native.tsx b/packages/app/components/map/Map.native.tsx
index e57f953c2..5af0e88dd 100644
--- a/packages/app/components/map/Map.native.tsx
+++ b/packages/app/components/map/Map.native.tsx
@@ -36,6 +36,7 @@ import useCustomStyles from 'app/hooks/useCustomStyles';
 import * as DocumentPicker from 'expo-document-picker';
 import * as FileSystem from 'expo-file-system';
 import { DOMParser } from 'xmldom';
+import { MapProps } from './models';
 
 interface GeoJsonProperties {
   name?: string;
@@ -56,17 +57,18 @@ interface Shape {
   features: Feature[];
 }
 
-interface NativeMapProps {
-  shape: Shape;
-}
-
 const RButton: any = OriginalRButton;
 const RInput: any = OriginalRInput;
 
 Mapbox.setWellKnownTileServer(Platform.OS === 'android' ? 'Mapbox' : 'mapbox');
 Mapbox.setAccessToken(MAPBOX_ACCESS_TOKEN);
 
-const NativeMap: React.FC<NativeMapProps> = ({ shape: shapeProp }) => {
+const NativeMap: React.FC<MapProps> = ({
+  shape: shapeProp,
+  onExitFullScreen,
+  forceFullScreen = false,
+  downloadable = true,
+}) => {
   const styles = useCustomStyles(loadStyles);
   const {
     camera,
@@ -94,6 +96,9 @@ const NativeMap: React.FC<NativeMapProps> = ({ shape: shapeProp }) => {
     previewMapStyle,
   } = useNativeMap({ shape: shapeProp });
 
+  // For some reason not setting default state value not working from hook
+  const isFullScreenMode = forceFullScreen || mapFullscreen;
+
   const handleShapeUpload = async () => {
     try {
       const result: any = await DocumentPicker.getDocumentAsync({
@@ -168,15 +173,17 @@ const NativeMap: React.FC<NativeMapProps> = ({ shape: shapeProp }) => {
   }
 
   const element = (
-    <View style={mapFullscreen ? (fullMapDimension as any) : previewMapStyle}>
+    <View
+      style={isFullScreenMode ? (fullMapDimension as any) : previewMapStyle}
+    >
       <Mapbox.MapView
         ref={mapViewRef}
         style={{ flex: 1 }}
         styleURL={mapStyle}
         compassEnabled={false}
         logoEnabled={false}
-        scrollEnabled={mapFullscreen}
-        zoomEnabled={mapFullscreen}
+        scrollEnabled={isFullScreenMode}
+        zoomEnabled={isFullScreenMode}
       >
         <Mapbox.Camera
           ref={camera}
@@ -276,11 +283,12 @@ const NativeMap: React.FC<NativeMapProps> = ({ shape: shapeProp }) => {
       </Mapbox.MapView>
 
       <MapButtonsOverlay
-        mapFullscreen={mapFullscreen}
+        mapFullscreen={isFullScreenMode}
         enableFullScreen={() => {
           setMapFullscreen(true);
         }}
         disableFullScreen={() => {
+          onExitFullScreen?.();
           setMapFullscreen(false);
         }}
         handleChangeMapStyle={setMapStyle}
@@ -290,7 +298,7 @@ const NativeMap: React.FC<NativeMapProps> = ({ shape: shapeProp }) => {
           });
         }}
         styles={styles}
-        downloadable={isShapeDownloadable(shape)}
+        downloadable={downloadable || isShapeDownloadable(shape)}
         downloading={downloading}
         shape={shape}
         onDownload={() => {
diff --git a/packages/app/components/map/Map.tsx b/packages/app/components/map/Map.tsx
index b5e3152a8..e80bbe1ce 100644
--- a/packages/app/components/map/Map.tsx
+++ b/packages/app/components/map/Map.tsx
@@ -2,18 +2,19 @@ import { MAPBOX_ACCESS_TOKEN } from '@packrat/config';
 import { useWebMap } from 'app/hooks/map/useWebMap';
 import useCustomStyles from 'app/hooks/useCustomStyles';
 import mapboxgl from 'mapbox-gl';
-import React, { useState } from 'react';
+import React, { FC, useState } from 'react';
 import { Modal, View } from 'react-native';
 import { isPolygonOrMultiPolygon } from '../../utils/mapFunctions';
 import MapButtonsOverlay from './MapButtonsOverlay';
 import MapPreview from './MapPreview';
 import useGpxUpload from './useGpxUpload';
+import { MapProps } from './models';
 
 mapboxgl.accessToken = MAPBOX_ACCESS_TOKEN;
 
 const DESTINATION = 'destination';
 const TRIP = 'trip';
-const WebMap = ({ shape: shapeProp }) => {
+const WebMap: FC<MapProps> = ({ shape: shapeProp }) => {
   const [downloadable, setDownloadable] = useState(false);
   const styles = useCustomStyles(loadStyles);
   const {
diff --git a/packages/app/components/map/index.tsx b/packages/app/components/map/index.tsx
index 9a8ac062c..b8f49b1eb 100644
--- a/packages/app/components/map/index.tsx
+++ b/packages/app/components/map/index.tsx
@@ -1 +1,2 @@
-export * from './MapContainer'
\ No newline at end of file
+export * from './MapContainer';
+export { default as Map } from './Map';
diff --git a/packages/app/components/map/models.ts b/packages/app/components/map/models.ts
new file mode 100644
index 000000000..793c1d935
--- /dev/null
+++ b/packages/app/components/map/models.ts
@@ -0,0 +1,6 @@
+export interface MapProps {
+  shape: any;
+  onExitFullScreen?: () => void;
+  forceFullScreen?: boolean;
+  downloadable?: boolean;
+}
diff --git a/packages/app/screens/maps/index.tsx b/packages/app/screens/maps/index.tsx
index bfffedbb9..4bc5f24e8 100644
--- a/packages/app/screens/maps/index.tsx
+++ b/packages/app/screens/maps/index.tsx
@@ -17,6 +17,7 @@ import {
 import { api } from 'app/constants/api';
 import { RScrollView, RStack } from '@packrat/ui';
 import useCustomStyles from 'app/hooks/useCustomStyles';
+import { Map } from 'app/components/map';
 
 interface Pack {
   bounds: number[][];
@@ -43,7 +44,6 @@ function CircleCapComp() {
 
 export default function DownloadedMaps() {
   const styles = useCustomStyles(loadStyles);
-
   const { enableDarkMode, enableLightMode, isDark, isLight, currentTheme } =
     useTheme();
   const [offlinePacks, setOfflinePacks] = useState<any[]>([]);
@@ -68,6 +68,11 @@ export default function DownloadedMaps() {
     }, []),
   );
 
+  const handleExitMapFullScreen = () => {
+    setShowMap(false);
+    setPack(null);
+  };
+
   return (
     <View
       style={{
@@ -140,56 +145,11 @@ export default function DownloadedMaps() {
       </RScrollView>
       {showMap ? (
         <Modal visible={true}>
-          <Mapbox.MapView
-            style={{ flex: 1 }}
-            styleURL="mapbox://styles/mapbox/outdoors-v11"
-            compassEnabled={false}
-            logoEnabled={false}
-            scrollEnabled={true}
-            zoomEnabled={true}
-          >
-            <Mapbox.Camera
-              zoomLevel={zoomLevel}
-              centerCoordinate={getCenterCoordinates(pack?.bounds)}
-              animationMode={'flyTo'}
-              animationDuration={2000}
-            />
-            {/* trail */}
-            <Mapbox.ShapeSource
-              id="source1"
-              lineMetrics={true}
-              shape={shape.features[0]}
-              cluster
-              clusterRadius={80}
-              clusterMaxZoomLevel={14}
-              style={{ zIndex: 1 }}
-            >
-              <Mapbox.LineLayer id="layer1" style={styles.lineLayer} />
-            </Mapbox.ShapeSource>
-            {/* // top location */}
-            {/* TODO implement notations */}
-            {/* {shape?.features[0]?.geometry?.coordinates?.length > 0 && (
-              <Mapbox.PointAnnotation
-                id={'cicleCap'}
-                coordinate={
-                  shape?.features[0]?.geometry?.coordinates[
-                    shape?.features[0]?.geometry?.coordinates?.length - 1
-                  ][0]
-                }
-              >
-                <View>
-                  <CircleCapComp />
-                </View>
-              </Mapbox.PointAnnotation>
-            )} */}
-          </Mapbox.MapView>
-
-          <MapButtonsOverlay
-            mapFullscreen={true}
-            disableFullScreen={() => {
-              setShowMap(false);
-            }}
+          <Map
+            shape={shape}
             downloadable={false}
+            forceFullScreen={true}
+            onExitFullScreen={handleExitMapFullScreen}
           />
         </Modal>
       ) : null}

From a9e23bb7e46b906cf15981192ba9182a22074f51 Mon Sep 17 00:00:00 2001
From: Andrew Bierman <94939237+andrew-bierman@users.noreply.github.com>
Date: Mon, 15 Jul 2024 23:08:20 -0400
Subject: [PATCH 201/257] =?UTF-8?q?=F0=9F=93=9D=20update=20example?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 server/wrangler.toml.example | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/server/wrangler.toml.example b/server/wrangler.toml.example
index 90f5ed2e8..9b73ab290 100644
--- a/server/wrangler.toml.example
+++ b/server/wrangler.toml.example
@@ -1,8 +1,8 @@
-name = "packrat_api"
+name = "packrat-api"
 main = "src/index.ts"
 compatibility_date = "2024-03-14"
 compatibility_flags = ["nodejs_compat"]
-# node_compat = true # Sometimes this is needed for tests 
+# node_compat = true # Sometimes this is needed for tests
 
 [[ d1_databases ]]
 binding = "DB"

From 54b83f7a91a8cf57ec663f69b7887cd31c1c30d7 Mon Sep 17 00:00:00 2001
From: Andrew Bierman <94939237+andrew-bierman@users.noreply.github.com>
Date: Mon, 15 Jul 2024 23:11:51 -0400
Subject: [PATCH 202/257] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20update=20start=20s?=
 =?UTF-8?q?cript?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json              |  1 +
 packages/cli/src/start.js | 53 ++++++++++++++++++---------------------
 2 files changed, 26 insertions(+), 28 deletions(-)

diff --git a/package.json b/package.json
index ef1785a85..56338be5d 100644
--- a/package.json
+++ b/package.json
@@ -39,6 +39,7 @@
     "copy:env:packages": "cp .env packages/.env",
     "copy:env:server": "cp .env server/.env",
     "dev:expo": "cd apps/expo && yarn start",
+    "dev:vite": "cd apps/vite && yarn dev",
     "dev:next": "cd apps/next && yarn dev",
     "dev:server": "cd server && yarn start",
     "expo:export": "cd apps/expo && cp app.example.json app.json && npx expo export --platform web",
diff --git a/packages/cli/src/start.js b/packages/cli/src/start.js
index d8f1fde16..bfd6950b0 100644
--- a/packages/cli/src/start.js
+++ b/packages/cli/src/start.js
@@ -1,44 +1,41 @@
 const { Select } = require('enquirer');
 const { spawn } = require('child_process');
 
-function runApp(command, args) {
+const runApp = (command, args) => {
   const process = spawn(command, args, { stdio: 'inherit' });
 
-  process.on('error', (error) => {
-    console.error(`Error: ${error.message}`);
-  });
-
-  process.on('close', (code) => {
-    console.log(`Process exited with code ${code}`);
-  });
-}
+  process.on('error', (error) => console.error(`Error: ${error.message}`));
+  process.on('close', (code) =>
+    console.log(`Process exited with code ${code}`),
+  );
+};
 
-async function startApp() {
+const startApp = async () => {
   const prompt = new Select({
     name: 'app',
     message: 'Choose an app to start',
-    choices: ['Expo', 'Next', 'Server'],
+    choices: ['Expo', 'Vite', 'Next', 'Server'],
   });
 
-  const app = await prompt.run();
+  try {
+    const app = await prompt.run();
+
+    const commands = {
+      Expo: ['yarn', ['dev:expo']],
+      Vite: ['yarn', ['dev:vite']],
+      Next: ['yarn', ['dev:next']],
+      Server: ['yarn', ['dev:server']],
+    };
 
-  switch (app) {
-    case 'Expo':
-      console.log('Starting Expo...');
-      runApp('yarn', ['dev:expo']);
-      break;
-    case 'Next':
-      console.log('Starting Next...');
-      runApp('yarn', ['dev:next']);
-      break;
-    case 'Server':
-      console.log('Starting Server...');
-      runApp('yarn', ['dev:server']);
-      break;
-    default:
+    if (commands[app]) {
+      console.log(`Starting ${app}...`);
+      runApp(...commands[app]);
+    } else {
       console.log('No app selected');
-      break;
+    }
+  } catch (error) {
+    console.error(`Prompt error: ${error.message}`);
   }
-}
+};
 
 startApp().catch(console.error);

From 62923ee06ded593b4c50b00db224d3ba614dc437 Mon Sep 17 00:00:00 2001
From: Andrew Bierman <94939237+andrew-bierman@users.noreply.github.com>
Date: Mon, 15 Jul 2024 23:14:17 -0400
Subject: [PATCH 203/257] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20add=20logger=20and?=
 =?UTF-8?q?=20health=20routes=20for=20better=20monitoring?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 server/src/index.ts               |  4 ++--
 server/src/routes/healthRoutes.ts | 31 +++++++++++++++++++++++++++++++
 server/src/routes/index.ts        |  2 ++
 3 files changed, 35 insertions(+), 2 deletions(-)
 create mode 100644 server/src/routes/healthRoutes.ts

diff --git a/server/src/index.ts b/server/src/index.ts
index 8cf313258..927babea4 100644
--- a/server/src/index.ts
+++ b/server/src/index.ts
@@ -1,4 +1,5 @@
 import { Hono } from 'hono';
+import { logger } from 'hono/logger';
 import { fetchHandler } from 'trpc-playground/handlers/fetch';
 import { appRouter } from './routes/trpcRouter';
 import { honoTRPCServer } from './trpc/server';
@@ -48,8 +49,7 @@ app.use('*', async (c, next) => {
 });
 
 // SETUP LOGGING
-//  tRPC is already logging requests, but you can add your own middleware
-//  app.use('*', logger());
+app.use('*', logger());
 
 // SETUP TRPC SERVER
 app.use(`${TRPC_API_ENDPOINT}/*`, honoTRPCServer({ router: appRouter }));
diff --git a/server/src/routes/healthRoutes.ts b/server/src/routes/healthRoutes.ts
new file mode 100644
index 000000000..b48bea5d0
--- /dev/null
+++ b/server/src/routes/healthRoutes.ts
@@ -0,0 +1,31 @@
+import { Hono } from 'hono';
+
+const router = new Hono();
+
+/**
+ * @swagger
+ * tags:
+ *   name: Health
+ *   description: Health routes
+ */
+
+/**
+ * @swagger
+ * /health:
+ * get:
+ *  tags:
+ *   - Health
+ * summary: Get health status
+ * responses:
+ *  200:
+ *   description: Successful response
+ *  content:
+ *  application/json:
+ *  schema:
+ *  type: object
+ */
+router.get('/', (c) => {
+  return c.json({ status: 'ok' });
+});
+
+export default router;
diff --git a/server/src/routes/index.ts b/server/src/routes/index.ts
index 4551e237b..a14675011 100644
--- a/server/src/routes/index.ts
+++ b/server/src/routes/index.ts
@@ -15,6 +15,7 @@
 // import favoriteRouters from './favoriteRoutes';
 // import userRoutes from './userRoutes';
 import mapPreviewRouter from './mapPreviewRouter';
+import healthRoutes from './healthRoutes';
 import { type Context, Hono, type Next } from 'hono';
 
 const router = new Hono();
@@ -59,6 +60,7 @@ const router = new Hono();
 // router.use('/favorite', favoriteRouters);
 // router.use('/openai', openAiRoutes);
 router.route('/mapPreview', mapPreviewRouter);
+router.route('/health', healthRoutes);
 
 const helloRouter = new Hono();
 helloRouter.get('/', (c: Context, next: Next) => {

From fbcb747c6a71620ac50036d6ee557f932569dad5 Mon Sep 17 00:00:00 2001
From: Andrew Bierman <94939237+andrew-bierman@users.noreply.github.com>
Date: Mon, 15 Jul 2024 23:17:25 -0400
Subject: [PATCH 204/257] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20bun=20server=20sta?=
 =?UTF-8?q?rt=20command?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/bun-server/package.json | 1 +
 package.json                 | 1 +
 2 files changed, 2 insertions(+)

diff --git a/apps/bun-server/package.json b/apps/bun-server/package.json
index df9731154..21707b13d 100644
--- a/apps/bun-server/package.json
+++ b/apps/bun-server/package.json
@@ -2,6 +2,7 @@
   "name": "bun-server",
   "scripts": {
     "start": "bun ./dist/index.js",
+    "start:prod": "bun start",
     "dev": "bun --watch ./src/index.ts",
     "build": "tsc"
   },
diff --git a/package.json b/package.json
index 56338be5d..08594f0e3 100644
--- a/package.json
+++ b/package.json
@@ -66,6 +66,7 @@
     "setup": "yarn && yarn setup:expo && yarn setup:server",
     "start:prod:ts-node": "cd server && yarn start:ts-node",
     "start:prod": "cd server && yarn start:prod",
+    "start:prod:bun": "cd apps/bun-server && yarn start:prod",
     "start": "node packages/cli/src/start.js",
     "test:all": "yarn test:expo && yarn test:server",
     "test:expo": "cd apps/expo && yarn test",

From d7912f20851205dcadcbf781565e987db59095d0 Mon Sep 17 00:00:00 2001
From: Andrew Bierman <94939237+andrew-bierman@users.noreply.github.com>
Date: Mon, 15 Jul 2024 23:59:08 -0400
Subject: [PATCH 205/257] =?UTF-8?q?=F0=9F=90=9B=20don't=20run=20from=20dis?=
 =?UTF-8?q?t?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/bun-server/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/bun-server/package.json b/apps/bun-server/package.json
index 21707b13d..c807205fe 100644
--- a/apps/bun-server/package.json
+++ b/apps/bun-server/package.json
@@ -1,7 +1,7 @@
 {
   "name": "bun-server",
   "scripts": {
-    "start": "bun ./dist/index.js",
+    "start": "bun src/index.ts",
     "start:prod": "bun start",
     "dev": "bun --watch ./src/index.ts",
     "build": "tsc"

From b20fb7cf3c591e6abf853767776391f39e7407a4 Mon Sep 17 00:00:00 2001
From: Ibrahim Isa Jajere <ibrahimisajajere274@gmail.com>
Date: Tue, 16 Jul 2024 09:04:37 +0100
Subject: [PATCH 206/257] =?UTF-8?q?=F0=9F=8E=A8=20type=20vectors=20query?=
 =?UTF-8?q?=20response?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 server/src/vector/client.ts | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/server/src/vector/client.ts b/server/src/vector/client.ts
index 7d045fbc3..b64e8e393 100644
--- a/server/src/vector/client.ts
+++ b/server/src/vector/client.ts
@@ -1,5 +1,16 @@
 import { AiClient } from '../integrations/ai/client';
 
+interface VectorsQueryResponse {
+  result: {
+    count: number;
+    matches: { id: string; namespace: string; score: number }[];
+  };
+  result_info: string | null;
+  success: boolean;
+  errors: { code: number; message: string }[];
+  messages: { code: number; message: string }[];
+}
+
 class VectorClient {
   private static _instance: VectorClient | null = null;
   private apiKey: string;
@@ -132,14 +143,14 @@ class VectorClient {
    * @param {string} namespace - Segment vectors; only vectors within the provided namespace are used for search.
    * @param {string} topK - Return the top K similar vectors (default = 3).
    * @param {Object} filter - Optional [metadata filter](https://developers.cloudflare.com/vectorize/reference/metadata-filtering)
-   * @returns {Promise<Object>} A promise that resolves with Query Vectors Response which contains matches.
+   * @returns {Promise<VectorsQueryResponse>} A promise that resolves with the vectors query response which contains the matches.
    */
   public async search(
     content: string,
     namespace: string,
     topK: number = 3,
     filter?: { [key: string]: any },
-  ) {
+  ): Promise<VectorsQueryResponse> {
     const vector = await AiClient.getEmbedding(content);
     const url = `${this.VECTORIZE_INDEX_URL}/query`;
     const response = await fetch(url, {

From 36e13b78b161ea8b63a14c2122b581e953feec4e Mon Sep 17 00:00:00 2001
From: Ibrahim Isa Jajere <ibrahimisajajere274@gmail.com>
Date: Tue, 16 Jul 2024 10:08:17 +0100
Subject: [PATCH 207/257] =?UTF-8?q?=F0=9F=90=9B=20search=20items=20under?=
 =?UTF-8?q?=20their=20=20namespace?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 server/src/services/item/editItemService.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/server/src/services/item/editItemService.ts b/server/src/services/item/editItemService.ts
index 7b17c3fec..411d297a3 100644
--- a/server/src/services/item/editItemService.ts
+++ b/server/src/services/item/editItemService.ts
@@ -73,7 +73,7 @@ export const editItemService = async (
         metadata: {
           isPublic: newItem.global,
         },
-        namespace: 'packs',
+        namespace: 'items',
       },
       true,
     ),

From f209898d9cb4bd8335d801c5cc5e0432315bbced Mon Sep 17 00:00:00 2001
From: Ibrahim Isa Jajere <ibrahimisajajere274@gmail.com>
Date: Tue, 16 Jul 2024 10:18:28 +0100
Subject: [PATCH 208/257] =?UTF-8?q?=F0=9F=8E=A8=20add=20tests=20for=20gett?=
 =?UTF-8?q?ing=20similar=20packs/items=20&=20syncing=20them=20with=20vecto?=
 =?UTF-8?q?rize?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 server/src/tests/routes/item.spec.ts | 136 ++++++++++++++++++++++++++-
 server/src/tests/routes/pack.spec.ts | 112 ++++++++++++++++++++--
 server/src/tests/testHelpers.ts      |   6 +-
 3 files changed, 243 insertions(+), 11 deletions(-)

diff --git a/server/src/tests/routes/item.spec.ts b/server/src/tests/routes/item.spec.ts
index 75760f7af..7b9249bce 100644
--- a/server/src/tests/routes/item.spec.ts
+++ b/server/src/tests/routes/item.spec.ts
@@ -1,14 +1,42 @@
-import { describe, it, expect, beforeAll, beforeEach } from 'vitest';
+import { describe, it, expect, beforeAll, beforeEach, vi } from 'vitest';
 import { setupTest } from '../testHelpers';
 import type { trpcCaller } from '../testHelpers';
-import { env } from 'cloudflare:test';
+import {
+  createExecutionContext,
+  env,
+  waitOnExecutionContext,
+} from 'cloudflare:test';
 import { Pack as PackClass } from '../../drizzle/methods/pack';
 import { User as UserClass } from '../../drizzle/methods/User';
 import type { Item, Pack, User } from '../../db/schema';
 import { Item as ItemClass } from '../../drizzle/methods/Item';
 
+const { mockSyncRecord, mockDeleteVector, mockSearchVector } = vi.hoisted(
+  () => {
+    return {
+      mockSyncRecord: vi.fn(),
+      mockDeleteVector: vi.fn(),
+      mockSearchVector: vi.fn(),
+    };
+  },
+);
+vi.mock('../../vector/client', async (importOriginal) => {
+  const mod = await importOriginal<typeof import('../../vector/client')>();
+  return {
+    ...mod,
+    VectorClient: {
+      instance: {
+        syncRecord: mockSyncRecord,
+        delete: mockDeleteVector,
+        search: mockSearchVector,
+      },
+    },
+  };
+});
+
 describe('Item routes', () => {
   let caller: trpcCaller;
+  let executionCtx: ExecutionContext;
   const itemClass = new ItemClass();
   const packClass = new PackClass();
   const userClass = new UserClass();
@@ -18,7 +46,8 @@ describe('Item routes', () => {
   let owner: User;
 
   beforeAll(async () => {
-    caller = await setupTest(env);
+    executionCtx = createExecutionContext();
+    caller = await setupTest(env, executionCtx);
     pack = await packClass.create({
       name: 'test',
       type: 'test',
@@ -29,6 +58,10 @@ describe('Item routes', () => {
       username: 'test',
       password: 'test123',
     });
+
+    // clear modules cache to ensure that dependents use the latest mock modules
+    // this prevents unusual assertion failures during reruns in watch mode
+    vi.resetModules();
   });
 
   beforeEach(async () => {
@@ -69,6 +102,8 @@ describe('Item routes', () => {
   });
 
   describe('addItem', () => {
+    let itemId: string;
+    let isPublic: boolean;
     it('should create a new item', async () => {
       const { id, ...partialItem } = item;
       const input = {
@@ -78,34 +113,69 @@ describe('Item routes', () => {
         type: 'Food',
       };
       const createdItem = await caller.addItem(input);
+      itemId = createdItem.id;
+      isPublic = createdItem.global;
       expect(createdItem).toBeDefined();
     });
+
+    it('should sync created item with vectorize', async () => {
+      await waitOnExecutionContext(executionCtx);
+      expect(mockSyncRecord).toHaveBeenCalledWith({
+        id: itemId,
+        content: 'test',
+        metadata: { isPublic },
+        namespace: 'items',
+      });
+    });
   });
 
   describe('editItem', () => {
+    const nameToBeUpdated = 'test 123';
+    let itemId: string;
     it('should update an item', async () => {
-      const nameToBeUpdated = 'test 123';
       const input = {
         ...item,
         name: nameToBeUpdated,
         type: 'Food',
       };
       const createdItem = await caller.editItem(input);
+      itemId = createdItem.id;
       expect(createdItem.name).toEqual(nameToBeUpdated);
     });
+
+    it('should sync edited item with vectorize', async () => {
+      await waitOnExecutionContext(executionCtx);
+      expect(mockSyncRecord).toHaveBeenCalledWith(
+        {
+          id: itemId,
+          content: nameToBeUpdated,
+          metadata: { isPublic: true },
+          namespace: 'items',
+        },
+        true,
+      );
+    });
   });
 
   describe('deleteItem', () => {
+    let itemId: string;
     it('should delete the item', async () => {
+      itemId = item.id;
       const { message } = await caller.deleteItem({
         itemId: item.id,
         packId: pack.id,
       });
       expect(message).toEqual('Item deleted successfully');
     });
+
+    it('should delete the pack from vectorize', async () => {
+      await waitOnExecutionContext(executionCtx);
+      expect(mockDeleteVector).toHaveBeenCalledWith(itemId);
+    });
   });
 
   describe('addItemGlobal', () => {
+    let itemId: string;
     it('should create a new global item', async () => {
       const { id, ...partialItem } = item;
       const input = {
@@ -116,8 +186,19 @@ describe('Item routes', () => {
         type: 'Food',
       };
       const createdItem = await caller.addItemGlobal(input);
+      itemId = createdItem.id;
       expect(createdItem).toBeDefined();
     });
+
+    it('should sync new global item with vectorize', async () => {
+      await waitOnExecutionContext(executionCtx);
+      expect(mockSyncRecord).toHaveBeenCalledWith({
+        id: itemId,
+        content: 'test 123',
+        metadata: { isPublic: true },
+        namespace: 'items',
+      });
+    });
   });
 
   describe('getItemsGlobally', () => {
@@ -143,6 +224,9 @@ describe('Item routes', () => {
   });
 
   describe('editGlobalItemAsDuplicate', () => {
+    let itemId: string;
+    let itemName: string;
+    let isPublic: boolean;
     it('should duplicate a global item', async () => {
       const {
         // following de-structured properties never match with the original item
@@ -158,6 +242,10 @@ describe('Item routes', () => {
         type: 'Food',
       });
 
+      itemId = duplicateItemId;
+      itemName = partialDuplicatedItem.name;
+      isPublic = dupGlobal;
+
       const {
         id: originalItemId,
         categoryId,
@@ -168,5 +256,45 @@ describe('Item routes', () => {
 
       expect(partialDuplicatedItem).toMatchObject(partialOriginalItem);
     });
+
+    it('should sync duplicate item with vectorize', async () => {
+      await waitOnExecutionContext(executionCtx);
+      expect(mockSyncRecord).toHaveBeenCalledWith({
+        id: itemId,
+        content: itemName,
+        metadata: {
+          isPublic,
+        },
+        namespace: 'items',
+      });
+    });
+  });
+
+  describe('getSimilarItems', () => {
+    let similarItems = null;
+    let itemId: string;
+    it('should invoke vector search', async () => {
+      itemId = item.id;
+      mockSearchVector.mockResolvedValue({
+        result: { matches: [{ id: itemId, score: 0.89519173 }] },
+      });
+
+      similarItems = await caller.getSimilarItems({
+        id: itemId,
+        limit: 3,
+      });
+      expect(mockSearchVector).toHaveBeenCalledWith(
+        item.name,
+        'items',
+        3,
+        undefined,
+      );
+    });
+
+    it('should return similar items', async () => {
+      expect(similarItems).toEqual([
+        { ...item, id: itemId, similarityScore: 0.89519173 },
+      ]);
+    });
   });
 });
diff --git a/server/src/tests/routes/pack.spec.ts b/server/src/tests/routes/pack.spec.ts
index 3b8b6a30c..b4863f750 100644
--- a/server/src/tests/routes/pack.spec.ts
+++ b/server/src/tests/routes/pack.spec.ts
@@ -1,13 +1,42 @@
-import { describe, it, expect, beforeAll, beforeEach } from 'vitest';
+import { describe, it, vi, expect, beforeAll, beforeEach } from 'vitest';
 import { setupTest } from '../testHelpers';
 import type { trpcCaller } from '../testHelpers';
-import { env } from 'cloudflare:test';
+import {
+  createExecutionContext,
+  env,
+  waitOnExecutionContext,
+} from 'cloudflare:test';
 import { Pack as PackClass } from '../../drizzle/methods/pack';
 import { User as UserClass } from '../../drizzle/methods/User';
 import type { Pack, User } from '../../db/schema';
+import { ExecutionContext } from 'hono';
+
+const { mockSyncRecord, mockDeleteVector, mockSearchVector } = vi.hoisted(
+  () => {
+    return {
+      mockSyncRecord: vi.fn(),
+      mockDeleteVector: vi.fn(),
+      mockSearchVector: vi.fn(),
+    };
+  },
+);
+vi.mock('../../vector/client', async (importOriginal) => {
+  const mod = await importOriginal<typeof import('../../vector/client')>();
+  return {
+    ...mod,
+    VectorClient: {
+      instance: {
+        syncRecord: mockSyncRecord,
+        delete: mockDeleteVector,
+        search: mockSearchVector,
+      },
+    },
+  };
+});
 
 describe('Pack routes', () => {
   let caller: trpcCaller;
+  let executionCtx: ExecutionContext;
   const packClass = new PackClass();
   const userClass = new UserClass();
 
@@ -15,13 +44,18 @@ describe('Pack routes', () => {
   let owner: User;
 
   beforeAll(async () => {
-    caller = await setupTest(env);
+    executionCtx = createExecutionContext();
+    caller = await setupTest(env, executionCtx);
     owner = await userClass.create({
       email: 'test@abc.com',
       name: 'test',
       username: 'test',
       password: 'test123',
     });
+
+    // clear modules cache to ensure that dependents use the latest mock modules
+    // this prevents unusual assertion failures during reruns in watch mode
+    vi.resetModules();
   });
 
   beforeEach(async () => {
@@ -57,19 +91,39 @@ describe('Pack routes', () => {
   });
 
   describe('editPack', () => {
+    const nameToBeUpdated = 'updated pack';
+    let packId: string;
+    let isPublic: boolean;
+
     it('should update pack name', async () => {
-      const nameToBeUpdated = 'updated pack';
+      isPublic = pack?.is_public === null ? false : pack?.is_public;
       const updatedPack = await caller.editPack({
         ...pack,
         id: pack?.id?.toString(),
-        is_public: pack?.is_public === null ? false : pack?.is_public,
+        is_public: isPublic,
         name: nameToBeUpdated,
       });
+      packId = updatedPack.id;
       expect(updatedPack.name).toEqual(nameToBeUpdated);
     });
+
+    it('should sync edited pack with vectorize', async () => {
+      await waitOnExecutionContext(executionCtx);
+      expect(mockSyncRecord).toHaveBeenCalledWith(
+        {
+          id: packId,
+          content: nameToBeUpdated,
+          metadata: { isPublic },
+          namespace: 'packs',
+        },
+        true,
+      );
+    });
   });
 
   describe('addPack', () => {
+    let createdPackId = null;
+
     it('should create a pack', async () => {
       const { id, ...partialPack } = pack;
       const input = {
@@ -83,16 +137,62 @@ describe('Pack routes', () => {
             : partialPack.owner_id,
       };
       const createdPack = await caller.addPack(input);
+      createdPackId = createdPack.id;
       expect(createdPack).toBeDefined();
     });
+
+    it('should sync created pack with vectorize', async () => {
+      await waitOnExecutionContext(executionCtx);
+      expect(mockSyncRecord).toHaveBeenCalledWith({
+        id: createdPackId,
+        content: 'test 123',
+        metadata: { isPublic: true },
+        namespace: 'packs',
+      });
+    });
   });
 
   describe('deletePack', () => {
+    let packId: string;
     it('should delete the pack', async () => {
+      packId = pack.id;
       const { msg } = await caller.deletePack({
-        packId: pack.id,
+        packId,
       });
       expect(msg).toEqual('pack was deleted successfully');
     });
+
+    it('should delete the pack from vectorize as well', async () => {
+      await waitOnExecutionContext(executionCtx);
+      expect(mockDeleteVector).toHaveBeenCalledWith(packId);
+    });
+  });
+
+  describe('getSimilarPacks', () => {
+    let similarPacks = null;
+    let packId: string;
+    it('should invoke vector search', async () => {
+      packId = pack.id;
+      mockSearchVector.mockResolvedValue({
+        result: { matches: [{ id: packId, score: 0.89519173 }] },
+      });
+
+      similarPacks = await caller.getSimilarPacks({
+        id: packId,
+        limit: 3,
+      });
+      expect(mockSearchVector).toHaveBeenCalledWith(
+        pack.name,
+        'packs',
+        3,
+        undefined,
+      );
+    });
+
+    it('should return similar packs', async () => {
+      expect(similarPacks).toEqual([
+        { ...pack, id: packId, similarityScore: 0.89519173 },
+      ]);
+    });
   });
 });
diff --git a/server/src/tests/testHelpers.ts b/server/src/tests/testHelpers.ts
index 64cb9a626..1242f5147 100644
--- a/server/src/tests/testHelpers.ts
+++ b/server/src/tests/testHelpers.ts
@@ -26,7 +26,10 @@ const TEST_USER = {
 
 const createCaller = createCallerFactory(appRouter);
 
-export async function setupTest(env: Record<string, any>) {
+export async function setupTest(
+  env: Record<string, any>,
+  executionCtx: ExecutionContext,
+) {
   const { DB, ...rest } = env;
   // const db = await createDb(env.DB)
   await DbClient.init(env.DB);
@@ -54,6 +57,7 @@ export async function setupTest(env: Record<string, any>) {
   const ctx: any = {
     user: TEST_USER,
     env: rest,
+    executionCtx,
     // db
   };
 

From 9e89ef83828fe46a0a91ae4fc7b47eb5e4a35a93 Mon Sep 17 00:00:00 2001
From: pinocchio-life-like <icbr19fl@gmail.com>
Date: Tue, 16 Jul 2024 17:22:09 +0300
Subject: [PATCH 209/257] middleware and setup done and tested

---
 server/src/controllers/user/getMe.ts          |  18 +-
 server/src/controllers/user/getUserById.ts    |  23 +-
 server/src/controllers/user/getUsers.ts       |  27 ++-
 server/src/controllers/user/resetPassword.ts  |  32 +--
 server/src/controllers/user/sentEmail.ts      |  47 +++--
 server/src/controllers/user/userSignIn.ts     |  20 +-
 server/src/controllers/user/userSignUp.ts     |  46 ++--
 server/src/drizzle/methods/User.ts            |   8 +-
 server/src/helpers/responseHandler.ts         |  21 +-
 server/src/helpers/tryCatchWrapper.ts         |   4 +-
 server/src/index.ts                           |   6 +-
 server/src/middleware/auth.ts                 | 104 ++++-----
 server/src/middleware/checkRole.ts            |  27 ++-
 server/src/middleware/validators/zodParser.ts |  35 +++-
 server/src/routes/index.ts                    |  16 +-
 server/src/routes/userRoutes.ts               | 198 ++----------------
 server/src/trpc/httpDBContext.ts              |  10 +
 17 files changed, 255 insertions(+), 387 deletions(-)
 create mode 100644 server/src/trpc/httpDBContext.ts

diff --git a/server/src/controllers/user/getMe.ts b/server/src/controllers/user/getMe.ts
index 6843434f0..4ca545723 100644
--- a/server/src/controllers/user/getMe.ts
+++ b/server/src/controllers/user/getMe.ts
@@ -7,16 +7,14 @@ import { protectedProcedure } from '../../trpc';
  * @param {object} res - The response object.
  * @return {object} The user information.
  */
-// export const getMe = async (req, res) => {
-//   try {
-//     const authHeader = req.headers.authorization;
-//     const token = authHeader.split(' ')[1];
-//     const user = await getUserByTokenService(token);
-//     res.status(200).send(user);
-//   } catch (err) {
-//     res.status(401).send({ message: err.message });
-//   }
-// };
+export const getMe = async (c) => {
+  try {
+    const { user } = c;
+    return c.json({ user }, 200);
+  } catch (error) {
+    return c.json({ error: `Failed to get user: ${error.message}` }, 500);
+  }
+};
 
 export function getMeRoute() {
   return protectedProcedure.query(async (opts) => {
diff --git a/server/src/controllers/user/getUserById.ts b/server/src/controllers/user/getUserById.ts
index d151b14d4..a3c3c11a6 100644
--- a/server/src/controllers/user/getUserById.ts
+++ b/server/src/controllers/user/getUserById.ts
@@ -1,24 +1,27 @@
 import { publicProcedure, protectedProcedure } from '../../trpc';
 import { getUserByIdService } from '../../services/user/getUserByIdService';
 import * as validator from '@packrat/validations';
+import { responseHandler } from '../../helpers/responseHandler';
 /**
  * Retrieves a user by their ID from the database and returns the user object as a JSON response.
  * @param {Object} req - The request object.
  * @param {Object} res - The response object.
  * @return {Object} The user object as a JSON response.
  */
-// export const getUserById = async (req, res, next) => {
-//   try {
-//     const { userId } = req.params;
+export const getUserById = async (c) => {
+  try {
+    // Correctly accessing route parameters in Hono
+    const userId = c.req.param('userId');
 
-//     const user = await getUserByIdService(userId);
+    const user = await getUserByIdService(userId);
 
-//     res.locals.data = user;
-//     responseHandler(res);
-//   } catch (error) {
-//     next(UserNotFoundError);
-//   }
-// };
+    if (!c.locals) c.locals = {};
+    c.locals.data = user;
+    return responseHandler(c);
+  } catch (error) {
+    return c.json({ error: `Failed to get user: ${error.message}` }, 500);
+  }
+};
 
 export function getUserByIdRoute() {
   return protectedProcedure.input(validator.getUserById).query(async (opts) => {
diff --git a/server/src/controllers/user/getUsers.ts b/server/src/controllers/user/getUsers.ts
index b8a25d180..a0925f9ca 100644
--- a/server/src/controllers/user/getUsers.ts
+++ b/server/src/controllers/user/getUsers.ts
@@ -2,6 +2,7 @@ import { publicProcedure, protectedProcedure } from '../../trpc';
 import { UserNotFoundError } from '../../helpers/errors';
 import { responseHandler } from '../../helpers/responseHandler';
 import { User } from '../../drizzle/methods/User';
+import { Context, Next } from 'hono';
 
 // Middleware to check if user is authenticated
 // export const isAuthenticated = async (req, res, next) => {
@@ -21,20 +22,18 @@ import { User } from '../../drizzle/methods/User';
  * @param {Object} res - The response object.
  * @return {Promise} The JSON response containing the users.
  */
-// export const getUsers = async (req, res, next) => {
-//   try {
-//     const users = await prisma.user.findMany({
-//       include: {
-//         favorites: true,
-//       },
-//     });
-
-//     res.locals.data = users;
-//     responseHandler(res);
-//   } catch (error) {
-//     next(UserNotFoundError);
-//   }
-// };
+// Adjust the getUsers function to be compatible with Hono
+export const getUsers = async (c) => {
+  try {
+    const userClass = new User();
+    const users = await userClass.findMany();
+    if (!c.locals) c.locals = {};
+    c.locals.data = users;
+    return responseHandler(c);
+  } catch (error) {
+    return c.json({ error: `Failed to get users: ${error.message}` }, 500);
+  }
+};
 
 export function getUsersRoute() {
   return protectedProcedure.query(async (opts) => {
diff --git a/server/src/controllers/user/resetPassword.ts b/server/src/controllers/user/resetPassword.ts
index a99c1808c..6f37f48ec 100644
--- a/server/src/controllers/user/resetPassword.ts
+++ b/server/src/controllers/user/resetPassword.ts
@@ -8,23 +8,23 @@ import { hashPassword } from '../../utils/user';
  * @param {Object} res - The response object.
  * @return {Promise<void>} A promise that resolves when the password is successfully reset.
  */
-// export const resetPassword = async (req, res) => {
-//   const { resetToken, password } = req.body;
 
-//   const user = await prisma.user.validateResetToken(resetToken);
-
-//   await prisma.user.update({
-//     where: { id: user.id },
-//     data: {
-//       password: password,
-//     },
-//   });
-//   res.status(200).send({
-//     message: 'Successfully reset password',
-//     status: 'success',
-//     statusCode: 200,
-//   });
-// };
+export const resetPassword = async (c) => {
+  try {
+    const { resetToken, password } = await c.req.parseBody();
+    const JWT_SECRET = c.env.JWT_SECRET;
+    const userClass = new User();
+    const user = await userClass.validateResetToken(resetToken, JWT_SECRET);
+    if (!user) {
+      throw new Error('Invalid reset token');
+    }
+    const hashedPassword = await hashPassword(JWT_SECRET, password);
+    await userClass.update({ id: user.id, password: hashedPassword });
+    return c.json({ message: 'Successfully reset password' }, 200);
+  } catch (error) {
+    return c.json({ error: `Failed to reset password: ${error.message}` }, 500);
+  }
+};
 
 export function resetPasswordRoute() {
   return publicProcedure
diff --git a/server/src/controllers/user/sentEmail.ts b/server/src/controllers/user/sentEmail.ts
index 49aa51513..c7d60b593 100644
--- a/server/src/controllers/user/sentEmail.ts
+++ b/server/src/controllers/user/sentEmail.ts
@@ -9,26 +9,35 @@ import { User } from '../../drizzle/methods/User';
  * @param {Object} res - The response object.
  * @return {Promise<void>} - A promise that resolves when the email is sent.
  */
-// export const sentEmail = async (req, res) => {
-//   try {
-//     const { email } = req.body;
+export const sentEmail = async (c) => {
+  try {
+    const { email } = await c.req.parseBody();
 
-//     const user = await prisma.user.findUnique({ where: { email } });
-//     const userWithMethods = User(user);
-//     if (!user) {
-//       throw new Error('User not found');
-//     }
-//     const resetUrl = await userWithMethods.generateResetToken();
-//     resetEmail(userWithMethods.email, resetUrl);
-//     res.status(200).send({
-//       message: 'Reset Token has been sent successfully',
-//       status: 'success',
-//       statusCode: 200,
-//     });
-//   } catch (err) {
-//     res.status(400).send({ message: err.message });
-//   }
-// };
+    const STMP_EMAIL = c.env.STMP_EMAIL;
+    const SEND_GRID_API_KEY = c.env.SEND_GRID_API_KEY;
+    const JWT_SECRET = c.env.JWT_SECRET;
+    const CLIENT_URL = c.env.CLIENT_URL;
+
+    const userClass = new User();
+    const user = await userClass.findUser({ email });
+    if (!user) {
+      throw new Error('User not found');
+    }
+
+    const resetUrl = await userClass.generateResetToken(
+      JWT_SECRET,
+      CLIENT_URL,
+      user.id,
+    );
+    await resetEmail(user.email, resetUrl, STMP_EMAIL, SEND_GRID_API_KEY);
+    return c.json({ message: 'Reset Token has been sent successfully' }, 200);
+  } catch (error) {
+    return c.json(
+      { error: `Failed to send reset token: ${error.message}` },
+      500,
+    );
+  }
+};
 
 export function sentEmailRoute() {
   return publicProcedure.input(validator.sentEmail).mutation(async (opts) => {
diff --git a/server/src/controllers/user/userSignIn.ts b/server/src/controllers/user/userSignIn.ts
index b73f93e63..c72863ce1 100644
--- a/server/src/controllers/user/userSignIn.ts
+++ b/server/src/controllers/user/userSignIn.ts
@@ -8,15 +8,17 @@ import { User } from '../../drizzle/methods/User';
 //  * @param {Object} res - The response object.
 //  * @return {Object} The user object.
 //  */
-// export const userSignIn = async (req, res) => {
-//   const { email, password } = req.body;
-//   const user = await prisma.user.findByCredentials({
-//     email,
-//     password,
-//   });
-//   await User(user).generateAuthToken();
-//   res.status(200).send({ user });
-// };
+export const userSignIn = async (c) => {
+  try {
+    const { email, password } = await c.req.parseBody();
+    const userClass = new User();
+    const user = await userClass.findByCredentials(email, password);
+    await userClass.generateAuthToken(c.env.JWT_SECRET, user.id);
+    return c.json({ user }, 200);
+  } catch (error) {
+    return c.json({ error: `Failed to sign in: ${error.message}` }, 500);
+  }
+};
 
 export function userSignInRoute() {
   return publicProcedure.input(validator.userSignIn).mutation(async (opts) => {
diff --git a/server/src/controllers/user/userSignUp.ts b/server/src/controllers/user/userSignUp.ts
index fa166c5c3..cfc6a6bee 100644
--- a/server/src/controllers/user/userSignUp.ts
+++ b/server/src/controllers/user/userSignUp.ts
@@ -4,21 +4,39 @@ import { publicProcedure } from '../../trpc';
 import * as validator from '@packrat/validations';
 import { User } from '../../drizzle/methods/User';
 import { hashPassword } from '../../utils/user';
-// export const userSignup = async (req: Request, res: Response) => {
-//   const { email } = req.body;
-//   console.log(`the request body received is ${JSON.stringify(req.body)}`);
-//   await userClass.alreadyLogin(email);
-//   const salt = await bcrypt.genSalt(parseInt(JWT_SECRET));
-//   req.body.password = await bcrypt.hash(req.body.password, salt);
 
-//   const newUser = await userClass.create({
-//     data: req.body,
-//   });
-//   const userWithMethods = User(newUser);
-//   await userWithMethods.generateAuthToken();
-//   sendWelcomeEmail(newUser.email, newUser.name);
-//   res.status(201).send({ user: newUser });
-// };
+export const userSignup = async (c) => {
+  try {
+    let { email, password, name, username } = await c.req.parseBody();
+    const userClass = new User();
+    const userExists = await userClass.findUser({ email });
+    if (userExists) {
+      throw new Error('Email already registered');
+    }
+
+    const STMP_EMAIL = c.env.STMP_EMAIL;
+    const SEND_GRID_API_KEY = c.env.SEND_GRID_API_KEY;
+    const JWT_SECRET = c.env.JWT_SECRET;
+    password = await hashPassword(JWT_SECRET, password);
+    const user = await userClass.create({
+      email,
+      username,
+      password,
+      name,
+    });
+
+    await userClass.generateAuthToken(JWT_SECRET, user.id);
+    await sendWelcomeEmail(
+      user.email,
+      user.name,
+      STMP_EMAIL,
+      SEND_GRID_API_KEY,
+    );
+    return c.json({ user }, 201);
+  } catch (error) {
+    return c.json({ error: `Failed to sign up: ${error.message}` }, 500);
+  }
+};
 
 export function signUpRoute() {
   return publicProcedure.input(validator.userSignUp).mutation(async (opts) => {
diff --git a/server/src/drizzle/methods/User.ts b/server/src/drizzle/methods/User.ts
index dadd38b7b..8b389ab12 100644
--- a/server/src/drizzle/methods/User.ts
+++ b/server/src/drizzle/methods/User.ts
@@ -256,7 +256,7 @@ export class User {
   }
 
   async findUnique(query: {
-    where: { email?: string; googleId?: string };
+    where: { email?: string; googleId?: string; id?: string; token?: string };
     with?: { favoriteDocuments?: boolean; id?: boolean; username?: boolean };
   }) {
     try {
@@ -267,6 +267,12 @@ export class User {
       if (query.where.googleId) {
         conditions.push(eq(UserTable.googleId, query.where.googleId));
       }
+      if (query.where.id && query.where.token) {
+        conditions.push(
+          eq(UserTable.id, query.where.id),
+          eq(UserTable.token, query.where.token),
+        );
+      }
       const user = await DbClient.instance
         .select()
         .from(UserTable)
diff --git a/server/src/helpers/responseHandler.ts b/server/src/helpers/responseHandler.ts
index 7be20bc46..47033ee40 100644
--- a/server/src/helpers/responseHandler.ts
+++ b/server/src/helpers/responseHandler.ts
@@ -1,17 +1,10 @@
-import type express from 'express';
+// Assuming responseHandler is a function intended to set headers and send a response in Hono
+export function responseHandler(c, message: string = 'Success') {
+  const data = c.locals?.data ?? { message: 'Success' };
 
-export function responseHandler(
-  res: express.Response,
-  message: string = 'Success',
-) {
-  const data = res.locals?.data ?? { message: 'Success' };
+  // Set headers using Hono's method
+  c.header('X-Response-Message', message);
+  c.header('Access-Control-Expose-Headers', 'X-Response-Message');
 
-  // Set the custom header
-  res.setHeader('X-Response-Message', message);
-
-  res.setHeader('Access-Control-Expose-Headers', 'X-Response-Message');
-
-  console.log('message', message);
-
-  return res.status(200).json(data);
+  return c.json(data, 200);
 }
diff --git a/server/src/helpers/tryCatchWrapper.ts b/server/src/helpers/tryCatchWrapper.ts
index 4e5a32d98..7b2c8d7ce 100644
--- a/server/src/helpers/tryCatchWrapper.ts
+++ b/server/src/helpers/tryCatchWrapper.ts
@@ -3,9 +3,9 @@ import { type Context, type Next } from 'hono';
 export function tryCatchWrapper(fn) {
   return async (ctx: Context, next: Next) => {
     try {
-      await fn(ctx, next);
+      return await fn(ctx, next);
     } catch (error: any) {
-      next();
+      return ctx.json({ error: 'Internal Server Error' }, 500);
     }
   };
 }
diff --git a/server/src/index.ts b/server/src/index.ts
index 8cf313258..31492c067 100644
--- a/server/src/index.ts
+++ b/server/src/index.ts
@@ -7,6 +7,7 @@ import { securityHeaders } from './middleware/securityHeaders';
 import { enforceHttps } from './middleware/enforceHttps';
 import router from './routes';
 import { CORS_METHODS } from './config';
+import { httpDBContext } from './trpc/httpDBContext';
 
 interface Bindings {
   [key: string]: any;
@@ -64,7 +65,8 @@ app.use(TRPC_PLAYGROUND_ENDPOINT, async (c, next) => {
   return handler(c.req.raw);
 });
 
-// SET UP HTTP ROUTES
-app.route(`${HTTP_ENDPOINT}`, router);
+// A middleware to initiate db connection and add it to the context
+app.use(`${HTTP_ENDPOINT}/*`, httpDBContext);
+app.route(`${HTTP_ENDPOINT}/`, router);
 
 export default app;
diff --git a/server/src/middleware/auth.ts b/server/src/middleware/auth.ts
index f198076bb..bd34f8eb5 100644
--- a/server/src/middleware/auth.ts
+++ b/server/src/middleware/auth.ts
@@ -1,47 +1,18 @@
-import jwt, { type JwtPayload } from 'jsonwebtoken';
-import { JWT_SECRET } from '../config';
-import { type Request, type Response, type NextFunction } from 'express';
-import { middleware } from '../trpc';
-import { TRPCError } from '@trpc/server';
-import { z, ZodError } from 'zod';
+import * as jwt from 'hono/jwt';
+import { ZodError } from 'zod';
 import { TokenSchema } from './validators/authTokenValidator';
-
-declare global {
-  namespace Express {
-    interface Request {
-      user: any;
-      token: string;
-    }
-  }
-}
-
-// export const authMiddleware = middleware(async (opts) => {
-//   const ctx = opts.ctx;
-//   try {
-//     const token: any = ctx.input.header('Authorization')?.replace('Bearer ', '');
-//     const decoded: any = jwt.verify(token, JWT_SECRET ?? '');
-//     const user: any = await User.findOne({
-//       id: decoded.id,
-//       token,
-//     });
-//     if (!user) throw new Error();
-//     ctx.set('token', token);
-//     ctx.set('user', user);
-//     return opts.next() // Call the next middleware or procedure
-//   } catch (err) {
-//     console.error(err);
-//     throw new TRPCError({ code: 'UNAUTHORIZED' });
-//   }
-// });
+import { type Context, type Next } from 'hono';
+import { User } from '../drizzle/methods/User';
 
 /**
  * Extracts the token from the request header.
- * @param {Request} req - The express request object.
+ * @param {Context} c - The Hono context object.
  * @returns {string} - The extracted token.
  * @throws {Error} If token is not found.
  */
-const extractToken = (req: Request): string => {
-  const token = req.header('Authorization')?.replace('Bearer ', '');
+const extractTokenHTTP = async (c: Context): Promise<string> => {
+  const { authorization } = c.req.header();
+  const token = authorization?.replace('Bearer ', '');
   if (!token) throw new Error('Token missing from Authorization header.');
   return token;
 };
@@ -52,9 +23,9 @@ const extractToken = (req: Request): string => {
  * @returns {JwtPayload} - The decoded JWT payload.
  * @throws {ZodError} If token structure is invalid.
  */
-const verifyToken = (token: string): JwtPayload => {
-  const decoded: JwtPayload = jwt.verify(token, JWT_SECRET ?? '') as JwtPayload;
-  const parsedToken = TokenSchema.parse(decoded); // Will throw if invalid
+const verifyTokenHTTP = async (secret: string, token: string) => {
+  const decoded = await jwt.verify(token, secret ?? '');
+  const parsedToken = TokenSchema.parse(decoded);
   return parsedToken;
 };
 
@@ -65,53 +36,50 @@ const verifyToken = (token: string): JwtPayload => {
  * @returns {Promise<User>} - The user associated with the token.
  * @throws {Error} If user is not found.
  */
-// const findUser = async (decoded: JwtPayload, token: string): Promise<User> => {
-const findUser = async (decoded: JwtPayload, token: string): Promise<any> => {
-  // const user: any = await prisma.user.findUnique({
-  //   where: {
-  //     id: decoded.id,
-  //     token,
-  //   },
-  // });
-  const user = null;
+const findUserHTTP = async (decoded, token: string): Promise<any> => {
+  const userClass = new User();
+  const user: any = await userClass.findUnique({
+    where: {
+      id: decoded.id,
+      token,
+    },
+  });
   if (!user) throw new Error('User associated with this token not found.');
   return user;
 };
 
 /**
- * Authenticates the user based on the provided token and adds the user information to the request object.
- * @param {Request} req - The express request object.
- * @param {Response} res - The express response object.
- * @param {NextFunction} next - The express next function.
+ * Authenticates the user based on the provided token and adds the user information to the context.
+ * @param {Context} c - The Hono context object.
+ * @param {Next} next - The Hono next function.
  */
-const auth = async (req: Request, res: Response, next: NextFunction) => {
+const authMiddlewareHTTP = async (c: Context, next: Next) => {
   try {
-    const token = extractToken(req);
-    const decoded = verifyToken(token);
-    const user = await findUser(decoded, token);
-
-    req.token = token;
-    req.user = user;
+    const token = await extractTokenHTTP(c);
+    const decoded = verifyTokenHTTP(c.env.JWT_SECRET, token);
+    const user = await findUserHTTP(decoded, token);
+    c.set('token', token);
+    c.set('user', user);
 
-    next();
+    await next();
   } catch (err) {
-    handleError(err, res);
+    handleErrorHTTP(err, c);
   }
 };
 
 /**
  * Handles authentication errors.
  * @param {Error} err - The error object.
- * @param {Response} res - The express response object.
+ * @param {Context} c - The Hono context object.
  */
-const handleError = (err: Error, res: Response) => {
+const handleErrorHTTP = (err: Error, c: Context) => {
   if (err instanceof ZodError) {
-    console.error('Invalid token structure:', err.errors);
-    res.status(400).send({ error: 'Invalid token structure.' });
+    console.error('Invalid token structure:', err.message);
+    c.json({ error: 'Invalid token structure.' }, 400);
   } else {
     console.error(err.message);
-    res.status(401).send({ error: 'Not authorized to access this resource.' });
+    c.json({ error: 'Not authorized to access this resource.' }, 401);
   }
 };
 
-export default auth;
+export default authMiddlewareHTTP;
diff --git a/server/src/middleware/checkRole.ts b/server/src/middleware/checkRole.ts
index b3609c0e5..13b2a0cac 100644
--- a/server/src/middleware/checkRole.ts
+++ b/server/src/middleware/checkRole.ts
@@ -1,34 +1,41 @@
-import { type Request, type Response, type NextFunction } from 'express';
+import type { Context } from 'hono';
 import { RoleSchema } from './validators/roleValidator';
 import { ZodError } from 'zod';
-// import { type User } from '@prisma/client/edge';
+
+// Extend the Context type to include the user property in the request and the next method.
+interface ExtendedContext extends Context {
+  req: Context['req'] & { user?: { role: string } };
+  next: () => Promise<void>;
+}
 
 /**
  * Middleware to check if the user has a certain role.
  * @param {string[]} roles - The roles to check against.
- * @returns {Function} - Express middleware function.
+ * @returns {Function} - Hono middleware function.
  */
 const checkRole = (roles: string[]) => {
-  return (req: Request, res: Response, env: Env, next: NextFunction) => {
-    const user: any = req.user;
+  return async (c: ExtendedContext) => {
+    const user = c.req.user;
 
     try {
       // Make sure all roles are valid.
       roles.forEach((role) => RoleSchema.parse(role));
 
       // Check if user's role is in the allowed roles list.
-      if (!roles.includes(user.role)) {
-        return res.status(403).send({ error: 'Insufficient permissions' });
+      if (!user || !roles.includes(user.role)) {
+        // Use the appropriate method to send a JSON response.
+        return c.json({ error: 'Insufficient permissions' }, 403);
       }
 
-      next();
+      // Proceed to the next middleware or route handler.
+      await c.next();
     } catch (err) {
       if (err instanceof ZodError) {
         console.error('Invalid role provided:', err.errors);
-        res.status(400).send({ error: 'Invalid role provided.' });
+        return c.json({ error: 'Invalid role provided.' }, 400);
       } else {
         console.error(err.message);
-        res.status(500).send({ error: 'Internal server error' });
+        return c.json({ error: 'Internal server error' }, 500);
       }
     }
   };
diff --git a/server/src/middleware/validators/zodParser.ts b/server/src/middleware/validators/zodParser.ts
index 86883df69..ebb4565ae 100644
--- a/server/src/middleware/validators/zodParser.ts
+++ b/server/src/middleware/validators/zodParser.ts
@@ -1,12 +1,27 @@
-import { type NextFunction } from 'express';
-import { type z } from 'zod';
+import type { Context, Hono, Next } from 'hono';
+import type { z, ZodSchema } from 'zod';
 
-type ZodParserFunction = (
-  schema: z.ZodSchema<any>,
-  input: any,
-  next: NextFunction,
-) => any;
-export const zodParser: ZodParserFunction = (schema, input, next) => {
-  schema.parse(input);
-  next();
+// Define the Zod parser function as middleware
+export const zodParser = (
+  schema: ZodSchema<any>,
+  location: 'body' | 'query' | 'params',
+) => {
+  return async (c: Context, next: Next) => {
+    try {
+      let input: any;
+      if (location === 'body') {
+        input = await c.req.parseBody();
+      } else if (location === 'query') {
+        input = c.req.query();
+      } else if (location === 'params') {
+        input = c.req.param();
+      }
+
+      schema.parse(input);
+      await next();
+    } catch (error) {
+      c.status(400);
+      c.json({ error: error.errors });
+    }
+  };
 };
diff --git a/server/src/routes/index.ts b/server/src/routes/index.ts
index 4551e237b..39eb4da42 100644
--- a/server/src/routes/index.ts
+++ b/server/src/routes/index.ts
@@ -13,9 +13,9 @@
 // import openAiRoutes from './openAiRoutes';
 // // import templateRoutes from './templateRoutes';
 // import favoriteRouters from './favoriteRoutes';
-// import userRoutes from './userRoutes';
+import userRoutes from './userRoutes';
 import mapPreviewRouter from './mapPreviewRouter';
-import { type Context, Hono, type Next } from 'hono';
+import { Hono } from 'hono';
 
 const router = new Hono();
 
@@ -44,7 +44,7 @@ const router = new Hono();
 // }
 
 // use routes
-// router.use('/user', userRoutes);
+router.route('/user', userRoutes);
 // router.use('/pack', packRoutes);
 // router.use('/item', itemRoutes);
 // router.use('/trip', tripRoutes);
@@ -60,11 +60,11 @@ const router = new Hono();
 // router.use('/openai', openAiRoutes);
 router.route('/mapPreview', mapPreviewRouter);
 
-const helloRouter = new Hono();
-helloRouter.get('/', (c: Context, next: Next) => {
-  return c.text('Hello, world!');
-});
-router.route('/hello', helloRouter);
+// const helloRouter = new Hono();
+// helloRouter.get('/', (c: Context, next: Next) => {
+//   return c.text('Hello, world!');
+// });
+// router.route('/hello', helloRouter);
 
 // Also listen to /api for backwards compatibility
 // router.use('/api/user', userRoutes);
diff --git a/server/src/routes/userRoutes.ts b/server/src/routes/userRoutes.ts
index 7c6700801..2c0e69c2e 100644
--- a/server/src/routes/userRoutes.ts
+++ b/server/src/routes/userRoutes.ts
@@ -1,18 +1,18 @@
 import { Hono } from 'hono';
 import {
-  getUsersRoute as getUsers,
-  getUserByIdRoute as getUserById,
+  getUsers,
+  getUserById,
   // addUserRoute as ,
   editUserRoute as editUser,
   deleteUserRoute as deleteUser,
   // addToFavoriteRoute as addToFavorite,
-  userSignInRoute as userSignIn,
-  signUpRoute as userSignup,
-  sentEmailRoute as sentEmail,
-  resetPasswordRoute as resetPassword,
+  userSignIn,
+  userSignup,
+  sentEmail,
+  resetPassword,
   getGoogleAuthURLRoute as getGoogleAuthURL,
   // googleSignin,
-  getMeRoute as getMe,
+  getMe,
 } from '../controllers/user/index';
 import * as validator from '@packrat/validations';
 
@@ -29,25 +29,6 @@ import { zodParser } from '../middleware/validators/zodParser';
 
 const router = new Hono();
 
-/**
- * @swagger
- * tags:
- *   name: User
- *   description: User routes
- */
-
-/**
- * @swagger
- * /user:
- *   get:
- *     summary: Get all users
- *     tags: [User]
- *     responses:
- *       '200':
- *         description: Successful response with all users
- *       '500':
- *         description: Error retrieving users
- */
 router.get(
   '/',
   authTokenMiddleware as any,
@@ -55,180 +36,37 @@ router.get(
   tryCatchWrapper(getUsers),
 );
 
-/**
- * @swagger
- * /user/{userId}:
- *   get:
- *     summary: Get user by ID
- *     tags: [User]
- *     parameters:
- *       - in: path
- *         name: userId
- *         schema:
- *           type: string
- *         required: true
- *         description: ID of the user
- *     responses:
- *       '200':
- *         description: Successful response with the user
- *       '400':
- *         description: Invalid request parameters
- *       '500':
- *         description: Error retrieving the user
- */
 router.get(
   '/:userId',
   authTokenMiddleware as any,
-  ((req, res, next) => {
-    zodParser(validator.getUserById, req.params, next);
-    next();
-  }) as any,
+  zodParser(validator.getUserById, 'params'),
   tryCatchWrapper(getUserById),
 );
 
-// router.post("/", addUser);
-
-/**
- * @swagger
- * /user/signin:
- *   post:
- *     summary: User sign-in
- *     tags: [User]
- *     requestBody:
- *       required: true
- *       content:
- *         application/json:
- *           schema:
- *             type: object
- *             properties:
- *               email:
- *                 type: string
- *               password:
- *                 type: string
- *     responses:
- *       '200':
- *         description: Successful sign-in
- *       '400':
- *         description: Invalid request parameters
- *       '500':
- *         description: Error signing in
- */
 router.post(
   '/signin',
-  ((req, res, next) => zodParser(validator.userSignIn, req.body, next)) as any,
+  zodParser(validator.userSignIn, 'body'),
   tryCatchWrapper(userSignIn),
 );
 
-/**
- * @swagger
- * /user/signup:
- *   post:
- *     summary: User sign-up
- *     tags: [User]
- *     requestBody:
- *       required: true
- *       content:
- *         application/json:
- *           schema:
- *             type: object
- *             properties:
- *               name:
- *                 type: string
- *               email:
- *                 type: string
- *               password:
- *                 type: string
- *     responses:
- *       '200':
- *         description: Successful sign-up
- *       '400':
- *         description: Invalid request parameters
- *       '500':
- *         description: Error signing up
- */
-
 router.post(
   '/signup',
-  ((req, res, next) => zodParser(validator.userSignUp, req.body, next)) as any,
+  zodParser(validator.userSignUp, 'body'),
   tryCatchWrapper(userSignup),
 );
 
-/**
- * @swagger
- * /user/reset-password-email:
- *   post:
- *     summary: Send reset password email
- *     tags: [User]
- *     requestBody:
- *       required: true
- *       content:
- *         application/json:
- *           schema:
- *             type: object
- *             properties:
- *               email:
- *                 type: string
- *     responses:
- *       '200':
- *         description: Successful email sent
- *       '400':
- *         description: Invalid request parameters
- *       '500':
- *         description: Error sending the email
- */
 router.post(
   '/reset-password-email',
-  ((req, res, next) => zodParser(validator.sentEmail, req.body, next)) as any,
+  zodParser(validator.sentEmail, 'body'),
   tryCatchWrapper(sentEmail),
 );
 
-/**
- * @swagger
- * /user/reset-password:
- *   post:
- *     summary: Reset password
- *     tags: [User]
- *     requestBody:
- *       required: true
- *       content:
- *         application/json:
- *           schema:
- *             type: object
- *             properties:
- *               resetToken:
- *                 type: string
- *               password:
- *                 type: string
- *     responses:
- *       '200':
- *         description: Successful password reset
- *       '400':
- *         description: Invalid request parameters
- *       '500':
- *         description: Error resetting the password
- */
 router.post(
   '/reset-password',
-  ((req, res, next) => zodParser(validator.checkCode, req.body, next)) as any,
+  zodParser(validator.checkCode, 'body'),
   tryCatchWrapper(resetPassword),
 );
 
-/**
- * @swagger
- * /user/me/info:
- *   get:
- *     summary: Get user information
- *     tags: [User]
- *     security:
- *       - bearerAuth: []
- *     responses:
- *       '200':
- *         description: Successful response with user information
- *       '401':
- *         description: Unauthorized - Invalid or missing authentication token
- *       '500':
- *         description: Error retrieving user information
- */
 router.get(
   '/me/info',
   authTokenMiddleware as any,
@@ -303,7 +141,7 @@ router.post('/google', tryCatchWrapper(signInGoogle));
 router.put(
   '/',
   authTokenMiddleware as any,
-  ((req, res, next) => zodParser(validator.editUser, req.body, next)) as any,
+  // ((req, res, next) => zodParser(validator.editUser, req.body, next)) as any,
   tryCatchWrapper(editUser),
 );
 
@@ -333,26 +171,26 @@ router.put(
 router.delete(
   '/',
   authTokenMiddleware as any,
-  ((req, res, next) => zodParser(validator.deleteUser, req.body, next)) as any,
+  // ((req, res, next) => zodParser(validator.deleteUser, req.body, next)) as any,
   tryCatchWrapper(deleteUser),
 );
 
 router.post(
   '/checkcode',
   authTokenMiddleware as any,
-  ((req, res, next) => zodParser(validator.checkCode, req.body, next)) as any,
+  // ((req, res, next) => zodParser(validator.checkCode, req.body, next)) as any,
   tryCatchWrapper(checkCode),
 );
 router.post(
   '/updatepassword',
   authTokenMiddleware as any,
-  ((req, res, next) =>
-    zodParser(validator.updatePassword, req.body, next)) as any,
+  // ((req, res, next) =>
+  //   zodParser(validator.updatePassword, req.body, next)) as any,
   tryCatchWrapper(updatePassword),
 );
 router.post(
   '/emailexists',
-  ((req, res, next) => zodParser(validator.emailExists, req.body, next)) as any,
+  // ((req, res, next) => zodParser(validator.emailExists, req.body, next)) as any,
   tryCatchWrapper(emailExists),
 );
 
diff --git a/server/src/trpc/httpDBContext.ts b/server/src/trpc/httpDBContext.ts
new file mode 100644
index 000000000..96c4bba57
--- /dev/null
+++ b/server/src/trpc/httpDBContext.ts
@@ -0,0 +1,10 @@
+import { type Context } from 'hono';
+import { createContext } from './context';
+
+// A middleware to initiate db connection and add it to the context
+const httpDBContext = async (c: Context, next: () => Promise<void>) => {
+  await createContext(c)();
+  await next();
+};
+
+export { httpDBContext };

From b5b3be39da4d155858a115a93ee2cd0c6d6751be Mon Sep 17 00:00:00 2001
From: pinocchio-life-like <icbr19fl@gmail.com>
Date: Tue, 16 Jul 2024 18:33:12 +0300
Subject: [PATCH 210/257] user route done

---
 server/src/controllers/auth/checkCode.ts      |  19 +-
 server/src/controllers/auth/emailExists.ts    |  15 ++
 server/src/controllers/auth/updatePassword.ts |  42 +--
 .../src/controllers/passport/signInGoogle.ts  | 244 ++++++------------
 server/src/controllers/user/deleteUser.ts     |  26 +-
 server/src/controllers/user/editUser.ts       |  58 +++--
 .../src/controllers/user/getGoogleAuthUrl.ts  |  52 ++--
 server/src/routes/userRoutes.ts               | 126 ++-------
 8 files changed, 212 insertions(+), 370 deletions(-)

diff --git a/server/src/controllers/auth/checkCode.ts b/server/src/controllers/auth/checkCode.ts
index 529926121..58cc9e85c 100644
--- a/server/src/controllers/auth/checkCode.ts
+++ b/server/src/controllers/auth/checkCode.ts
@@ -1,6 +1,4 @@
 import { publicProcedure } from '../../trpc';
-import { InvalidCodeError } from '../../helpers/errors';
-import { responseHandler } from '../../helpers/responseHandler';
 import * as validator from '@packrat/validations';
 import { checkCodeService } from '../../services/user/checkCodeService';
 // /**
@@ -9,14 +7,15 @@ import { checkCodeService } from '../../services/user/checkCodeService';
 //  * @param {Object} res - the response object
 //  * @return {Promise<void>} - a promise that resolves to void
 //  */
-// export const checkCode = async (req: any, res: any, next) => {
-//   const user: any = await checkCodeService(req.body);
-//   if (user.length) {
-//     responseHandler(res);
-//   } else {
-//     next(InvalidCodeError);
-//   }
-// };
+export const checkCode = async (c) => {
+  const { email, code } = await c.req.parseBody();
+  try {
+    const response = await checkCodeService(email, code);
+    return c.json({ response }, 200);
+  } catch (error) {
+    return c.json({ error: error.message }, 500);
+  }
+};
 
 export function checkCodeRoute() {
   return publicProcedure.input(validator.checkCode).mutation(async (opts) => {
diff --git a/server/src/controllers/auth/emailExists.ts b/server/src/controllers/auth/emailExists.ts
index dc1912132..abe45b5c2 100644
--- a/server/src/controllers/auth/emailExists.ts
+++ b/server/src/controllers/auth/emailExists.ts
@@ -8,6 +8,21 @@ import { emailExistsService } from '../../services/user/emailExistsService';
  * @return {Promise<void>} - A promise that resolves to nothing.
  */
 
+export const emailExists = async (c) => {
+  try {
+    const { email } = await c.req.parseBody();
+
+    const emailExists = await emailExistsService({
+      sendGridApiKey: c.env.SEND_GRID_API_KEY,
+      smtpEmail: c.env.STMP_EMAIL,
+      email,
+    });
+    return c.json({ emailExists }, 200);
+  } catch (error) {
+    return c.json({ error: `Failed to delete user: ${error.message}` }, 404);
+  }
+};
+
 export function emailExistsRoute() {
   return publicProcedure.input(validator.emailExists).mutation(async (opts) => {
     const { email } = opts.input;
diff --git a/server/src/controllers/auth/updatePassword.ts b/server/src/controllers/auth/updatePassword.ts
index 4ede1d868..5cc6d2bb7 100644
--- a/server/src/controllers/auth/updatePassword.ts
+++ b/server/src/controllers/auth/updatePassword.ts
@@ -10,37 +10,17 @@ import { hashPassword } from '../../utils/user';
  * @param {object} res - The response object.
  * @return {Promise<void>} - A promise that resolves to nothing.
  */
-// export const updatePassword = async (req, res, next) => {
-//   try {
-//     let { email, oldPassword, newPassword } = req.body;
-
-//     const user = await prisma.user.findFirst({
-//       where: {
-//         email,
-//       },
-//     });
-
-//     if (!user) throw new Error('Unable to verify');
-
-//     const isMatch = await bcrypt.compare(oldPassword, user.password);
-
-//     if (!isMatch) throw new Error('Incorrect password');
-
-//     const salt = await bcrypt.genSalt(parseInt(JWT_SECRET));
-
-//     newPassword = await bcrypt.hash(newPassword, salt);
-
-//     const val = await findUserAndUpdate(email, newPassword, 'password');
-
-//     if (val) {
-//       responseHandler(res);
-//     } else {
-//       next(UnableTouUpdatePasswordError);
-//     }
-//   } catch (error) {
-//     next(UnableTouUpdatePasswordError);
-//   }
-// };
+export const updatePassword = async (c) => {
+  try {
+    const { email, password } = await c.req.parseBody();
+    const JWT_SECRET = c.env.JWT_SECRET;
+    const hashedPassword = await hashPassword(JWT_SECRET, password);
+    const user = await findUserAndUpdate(email, hashedPassword, 'password');
+    return c.json({ user }, 200);
+  } catch (error) {
+    return c.json({ error: `Email Doesnt Exist: ${error.message}` }, 404);
+  }
+};
 
 export function updatePasswordRoute() {
   return protectedProcedure
diff --git a/server/src/controllers/passport/signInGoogle.ts b/server/src/controllers/passport/signInGoogle.ts
index 352095a55..9400b3334 100644
--- a/server/src/controllers/passport/signInGoogle.ts
+++ b/server/src/controllers/passport/signInGoogle.ts
@@ -1,168 +1,96 @@
-// integrate passport js for email/passport sign in and google sign in
-
-// import passport from 'passport';
-// import { Strategy as LocalStrategy } from 'passport-local';
-
-import bcrypt from 'bcryptjs';
 import * as jwt from 'hono/jwt';
-import { sendWelcomeEmail, resetEmail } from '../../utils/accountEmail';
-// import { prisma } from '../../prisma';
-// import { User } from '../../prisma/methods';
-
-// import {
-//   GOOGLE_CLIENT_ID,
-//   GOOGLE_CLIENT_SECRET,
-//   REDIRECT_URL,
-//   SERVER_ROOT_URI,
-// } from '../../config';
-
-// import { OAuth2Client } from 'google-auth-library';
+import { sendWelcomeEmail } from '../../utils/accountEmail';
+
 import utilsService from '../../utils/utils.service';
-import { responseHandler } from '../../helpers/responseHandler';
 import { publicProcedure } from '../../trpc';
 import z from 'zod';
 import { User } from '../../drizzle/methods/User';
 import { and, eq } from 'drizzle-orm';
 import { user as UserTable } from '../../db/schema';
-// const client = new OAuth2Client(
-//   GOOGLE_CLIENT_ID,
-//   GOOGLE_CLIENT_SECRET,
-//   `${SERVER_ROOT_URI}/user/${REDIRECT_URL}`,
-// );
-
-// Passport Configuration
-// Local Strategy
-// passport.use(
-//   new LocalStrategy(
-//     {
-//       usernameField: 'email',
-//       passwordField: 'password',
-//     },
-//     async (email, password, done) => {
-//       try {
-//         const user = await prisma.user.findUnique({
-//           where: {
-//             email: email,
-//           },
-//         });
-//         if (!user) {
-//           return done(null, false, { message: 'Incorrect email.' });
-//         }
-
-//         const validPassword = await bcrypt.compare(password, user.password);
-
-//         if (!validPassword) {
-//           return done(null, false, { message: 'Incorrect passwordsss.' });
-//         }
-
-//         return done(null, user);
-//       } catch (err) {
-//         return done(err);
-//       }
-//     },
-//   ),
-// );
-
-// /**
-//  * Sign in with Google.
-//  * @param {Object} req - The request object.
-//  * @param {Object} req.body - The request body.
-//  * @param {string} req.body.idToken - The Google ID token.
-//  * @param {Object} res - The response object.
-//  * @return {Promise<void>} The function does not return anything.
-//  */
-// export const signInGoogle = async (req, res) => {
-//   try {
-//     const { idToken } = req.body;
-
-//     const decodedToken: any = jwt.decode(idToken);
-
-//     if (!decodedToken) {
-//       throw new Error('Invalid ID token');
-//     }
-
-//     const { email, name, sub: googleId } = decodedToken;
-
-//     const alreadyGoogleSignin = await prisma.user.findUnique({
-//       where: {
-//         email: email,
-//         googleId: googleId,
-//       },
-//     });
-//     if (!alreadyGoogleSignin) {
-//       const isLocalLogin = await prisma.user.findUnique({
-//         where: {
-//           email: email,
-//         },
-//       });
-
-//       if (isLocalLogin) {
-//         throw new Error('Already user registered on that email address');
-//       }
-
-//       const randomPassword = utilsService.randomPasswordGenerator(8);
-//       const username = utilsService.randomUserNameCode(email, 4);
-//       const user = await prisma.user.create({
-//         data: {
-//           email,
-//           name,
-//           password: randomPassword,
-//           googleId,
-//           username,
-//         },
-//       });
-
-//       const userWithMethods = User(user);
-//       await userWithMethods.generateAuthToken();
-
-//       sendWelcomeEmail(user.email, user.name);
-
-//       res.locals.data = { user };
-//       responseHandler(res);
-//     } else {
-//       if (!alreadyGoogleSignin.password) {
-//         alreadyGoogleSignin.password = utilsService.randomPasswordGenerator(8);
-//       }
-
-//       alreadyGoogleSignin.googleId = googleId;
-//       await prisma.user.update({
-//         where: {
-//           email: alreadyGoogleSignin.email,
-//         },
-//         data: {
-//           googleId: googleId,
-//         },
-//       });
-
-//       const userWithMethods = User(alreadyGoogleSignin);
-//       await userWithMethods.generateAuthToken();
-
-//       res.locals.data = { user: alreadyGoogleSignin };
-//       responseHandler(res);
-//     }
-//   } catch (err) {
-//     res.status(400).send({ message: err.message });
-//   }
-// };
-
-// passport.serializeUser((user, done) => {
-//   done(null, user.id);
-// });
-
-// passport.deserializeUser((id, done) => {
-//   prisma.user
-//     .findUnique({
-//       where: {
-//         id: id,
-//       },
-//     })
-//     .then((user) => {
-//       done(null, user);
-//     })
-//     .catch((err) => {
-//       done(err, null);
-//     });
-// });
+
+export const signInGoogle = async (c) => {
+  try {
+    const { idToken } = await c.req.parseBody();
+
+    const decodedToken: any = jwt.decode(idToken);
+    if (!decodedToken) {
+      throw new Error('Invalid ID token');
+    }
+
+    const {
+      payload: { email, name, sub: googleId },
+    } = decodedToken;
+
+    const userClass = new User();
+    const alreadyGoogleSignin = await userClass.findUnique({
+      where: {
+        email,
+        googleId,
+      },
+    });
+
+    if (!alreadyGoogleSignin) {
+      const isLocalLogin = await userClass.findUnique({
+        where: {
+          email,
+        },
+      });
+
+      if (isLocalLogin) {
+        throw new Error('Already user registered on that email address');
+      }
+
+      const randomPassword = utilsService.randomPasswordGenerator(8);
+      const username = utilsService.randomUserNameCode(email, 4);
+
+      const user = await userClass.create({
+        email,
+        name,
+        password: randomPassword,
+        googleId,
+        username,
+      });
+
+      await userClass.generateAuthToken(c.env.JWT_SECRET, user.id);
+
+      sendWelcomeEmail(
+        user.email,
+        user.name,
+        c.env.STMP_EMAIL,
+        c.env.SEND_GRID_API_KEY,
+      );
+      return user;
+    } else {
+      if (!alreadyGoogleSignin.password) {
+        alreadyGoogleSignin.password = utilsService.randomPasswordGenerator(8);
+      }
+
+      await userClass.generateAuthToken(
+        c.env.JWT_SECRET,
+        alreadyGoogleSignin.id,
+      );
+
+      if (!alreadyGoogleSignin.googleId) {
+        throw new Error('Google ID is missing');
+      }
+
+      const updatedUser = await userClass.update(
+        {
+          googleId,
+        },
+        and(
+          eq(UserTable.id, alreadyGoogleSignin.id),
+          eq(UserTable.googleId, alreadyGoogleSignin.googleId),
+          eq(UserTable.email, alreadyGoogleSignin.email),
+        ),
+      );
+      return c.json(updatedUser?.[0], 200);
+    }
+  } catch (err) {
+    c.json({ message: err.message });
+    throw new Error(`Google Signin failed: ${err.message}`);
+  }
+};
 
 export function googleSigninRoute() {
   return publicProcedure
diff --git a/server/src/controllers/user/deleteUser.ts b/server/src/controllers/user/deleteUser.ts
index f76b58d7e..4524bc215 100644
--- a/server/src/controllers/user/deleteUser.ts
+++ b/server/src/controllers/user/deleteUser.ts
@@ -8,22 +8,16 @@ import { User } from '../../drizzle/methods/User';
  * @param {Object} res - The response object.
  * @return {Promise} A promise that resolves to the message "user was deleted successfully" if the user is deleted, or rejects with an error message if there is an error.
  */
-// export const deleteUser = async (req, res, next) => {
-//   try {
-//     const { userId } = req.body;
-
-//     await prisma.user.delete({
-//       where: {
-//         id: userId,
-//       },
-//     });
-
-//     res.locals.data = { message: 'User deleted successfully' };
-//     responseHandler(res);
-//   } catch (error) {
-//     next(UnableToEditUserError);
-//   }
-// };
+export const deleteUser = async (c) => {
+  try {
+    const { userId } = await c.req.parseBody();
+    const user = new User();
+    await user.delete(userId);
+    return c.json({ message: 'User deleted successfully' }, 200);
+  } catch (error) {
+    return c.json({ error: `Failed to delete user: ${error.message}` }, 500);
+  }
+};
 
 export function deleteUserRoute() {
   return protectedProcedure
diff --git a/server/src/controllers/user/editUser.ts b/server/src/controllers/user/editUser.ts
index 29a6d7f40..ab68146bb 100644
--- a/server/src/controllers/user/editUser.ts
+++ b/server/src/controllers/user/editUser.ts
@@ -2,7 +2,6 @@ import { publicProcedure, protectedProcedure } from '../../trpc';
 import * as validator from '@packrat/validations';
 import { User } from '../../drizzle/methods/User';
 import { hashPassword } from '../../utils/user';
-import bcrypt from 'bcryptjs';
 
 /**
  * Edits a user.
@@ -12,26 +11,45 @@ import bcrypt from 'bcryptjs';
  * @param {Object} res - The response object.
  * @return {Promise} A promise that resolves to the edited user.
  */
-// export const editUser = async (req, res, next) => {
-//   try {
-//     const { userId } = req.body;
-
-//     const editedUser = await prisma.user.update({
-//       where: {
-//         id: userId,
-//       },
-//       data: req.body,
-//       select: {
-//         favorites: true,
-//       },
-//     });
+export const editUser = async (c) => {
+  try {
+    let {
+      id,
+      name,
+      email,
+      code,
+      role,
+      username,
+      profileImage,
+      preferredWeather,
+      preferredWeight,
+      password,
+    } = await c.req.parseBody();
 
-//     res.locals.data = editedUser;
-//     responseHandler(res);
-//   } catch (error) {
-//     next(UnableToEditUserError);
-//   }
-// };
+    const JWT_SECRET = c.env.JWT_SECRET;
+    const userClass = new User();
+    if (password) {
+      password = await hashPassword(JWT_SECRET, password);
+    }
+    const data = {
+      id,
+      ...(name && { name }),
+      ...(password && { password }),
+      ...(email && { email }),
+      ...(code && { code }),
+      ...(role && { role }),
+      ...(username && { username }),
+      ...(profileImage && { profileImage }),
+      ...(preferredWeather && { preferredWeather }),
+      ...(preferredWeight && { preferredWeight }),
+    };
+    const editedUser = await userClass.update(data);
+    return c.json({ editedUser }, 200);
+  } catch (error) {
+    console.error('Error editing user:', error);
+    return c.json({ error: 'Internal Server Error' }, 500);
+  }
+};
 
 export function editUserRoute() {
   return protectedProcedure.input(validator.editUser).mutation(async (opts) => {
diff --git a/server/src/controllers/user/getGoogleAuthUrl.ts b/server/src/controllers/user/getGoogleAuthUrl.ts
index 4cbd879c4..b5a44d86d 100644
--- a/server/src/controllers/user/getGoogleAuthUrl.ts
+++ b/server/src/controllers/user/getGoogleAuthUrl.ts
@@ -1,41 +1,33 @@
-import { google } from 'googleapis';
-// import {
-//   GOOGLE_CLIENT_ID,
-//   GOOGLE_CLIENT_SECRET,
-//   SERVER_ROOT_URI,
-//   REDIRECT_URL,
-//   UI_ROOT_URI,
-//   JWT_SECRET,
-// } from '../../config';
 import { publicProcedure } from '../../trpc';
 
-// const oauth2Client = new google.auth.OAuth2(
-//   GOOGLE_CLIENT_ID,
-//   GOOGLE_CLIENT_SECRET,
-//   `${SERVER_ROOT_URI}/user/${REDIRECT_URL}`,
-// );
-
 /**
  * Retrieves the Google authentication URL.
  * @param {object} req - The request object.
  * @param {object} res - The response object.
  * @return {object} The Google authentication URL and status.
  */
-// export const getGoogleAuthURL = async (req, res) => {
-//   const scopes = [
-//     'https://www.googleapis.com/auth/userinfo.profile',
-//     'https://www.googleapis.com/auth/userinfo.email',
-//   ];
-//   return res.status(200).send({
-//     googleUrl: oauth2Client.generateAuthUrl({
-//       access_type: 'offline',
-//       prompt: 'consent',
-//       scope: scopes,
-//     }),
-//     status: 'success',
-//     statusCode: 200,
-//   });
-// };
+export const getGoogleAuthURL = async (c) => {
+  try {
+    const scopes = [
+      'https://www.googleapis.com/auth/userinfo.profile',
+      'https://www.googleapis.com/auth/userinfo.email',
+    ];
+
+    const scope = scopes.join(' ');
+    const clientId = c.env.GOOGLE_CLIENT_ID;
+    const clientSecret = c.env.GOOGLE_CLIENT_SECRET;
+    const redirectUri = `${c.env.SERVER_ROOT_URI}/user/${c.env.REDIRECT_URL}`;
+
+    const googleUrl = `https://accounts.google.com/o/oauth2/v2/auth?client_id=${clientId}&redirect_uri=${redirectUri}&response_type=code&scope=${scope}&access_type=offline&prompt=consent&client_secret=${clientSecret}`;
+
+    return c.json({ googleUrl, status: 'success', statusCode: 200 }, 200);
+  } catch (error) {
+    return c.json(
+      { error: `Failed to get Google Auth URL: ${error.message}` },
+      500,
+    );
+  }
+};
 
 export function getGoogleAuthURLRoute() {
   const scopes = [
diff --git a/server/src/routes/userRoutes.ts b/server/src/routes/userRoutes.ts
index 2c0e69c2e..dd3843716 100644
--- a/server/src/routes/userRoutes.ts
+++ b/server/src/routes/userRoutes.ts
@@ -2,25 +2,23 @@ import { Hono } from 'hono';
 import {
   getUsers,
   getUserById,
-  // addUserRoute as ,
-  editUserRoute as editUser,
-  deleteUserRoute as deleteUser,
+  editUser,
+  deleteUser,
   // addToFavoriteRoute as addToFavorite,
   userSignIn,
   userSignup,
   sentEmail,
   resetPassword,
-  getGoogleAuthURLRoute as getGoogleAuthURL,
-  // googleSignin,
+  getGoogleAuthURL,
   getMe,
 } from '../controllers/user/index';
 import * as validator from '@packrat/validations';
 
-import { googleSigninRoute as signInGoogle } from '../controllers/passport/index';
+import { signInGoogle } from '../controllers/passport/index';
 import {
-  emailExistsRoute as emailExists,
-  updatePasswordRoute as updatePassword,
-  checkCodeRoute as checkCode,
+  emailExists,
+  updatePassword,
+  checkCode,
 } from '../controllers/auth/index';
 import { tryCatchWrapper } from '../helpers/tryCatchWrapper';
 import authTokenMiddleware from '../middleware/auth';
@@ -31,14 +29,14 @@ const router = new Hono();
 
 router.get(
   '/',
-  authTokenMiddleware as any,
-  checkRole(['admin']) as any,
+  authTokenMiddleware,
+  checkRole(['admin']),
   tryCatchWrapper(getUsers),
 );
 
 router.get(
   '/:userId',
-  authTokenMiddleware as any,
+  authTokenMiddleware,
   zodParser(validator.getUserById, 'params'),
   tryCatchWrapper(getUserById),
 );
@@ -69,128 +67,46 @@ router.post(
 
 router.get(
   '/me/info',
-  authTokenMiddleware as any,
-  checkRole(['user', 'admin']) as any,
+  authTokenMiddleware,
+  checkRole(['user', 'admin']),
   tryCatchWrapper(getMe),
 );
 
-/**
- * @swagger
- * /user/google/url:
- *   get:
- *     summary: Get Google authentication URL
- *     tags: [User]
- *     responses:
- *       '200':
- *         description: Successful response with Google authentication URL
- *       '500':
- *         description: Error retrieving Google authentication URL
- */
 router.get('/google/url', tryCatchWrapper(getGoogleAuthURL));
 
 // router.get(`/${REDIRECT_URL}`, tryCatchWrapper(googleSignin));
 
-/**
- * @swagger
- * /user/google:
- *   post:
- *     summary: Sign in with Google
- *     tags: [User]
- *     requestBody:
- *       required: true
- *       content:
- *         application/json:
- *           schema:
- *             type: object
- *             properties:
- *               id_token:
- *                 type: string
- *     responses:
- *       '200':
- *         description: Successful sign-in with Google
- *       '400':
- *         description: Invalid request parameters
- *       '500':
- *         description: Error signing in with Google
- */
 router.post('/google', tryCatchWrapper(signInGoogle));
 
-/**
- * @swagger
- * /user:
- *   put:
- *     summary: Edit user
- *     tags: [User]
- *     requestBody:
- *       required: true
- *       content:
- *         application/json:
- *           schema:
- *             type: object
- *             properties:
- *               userId:
- *                 type: string
- *     responses:
- *       '200':
- *         description: Successful response editing the user
- *       '400':
- *         description: Invalid request parameters
- *       '500':
- *         description: Error editing the user
- */
 router.put(
   '/',
-  authTokenMiddleware as any,
-  // ((req, res, next) => zodParser(validator.editUser, req.body, next)) as any,
+  authTokenMiddleware,
+  zodParser(validator.editUser, 'body'),
   tryCatchWrapper(editUser),
 );
 
-/**
- * @swagger
- * /user:
- *   delete:
- *     summary: Delete user
- *     tags: [User]
- *     requestBody:
- *       required: true
- *       content:
- *         application/json:
- *           schema:
- *             type: object
- *             properties:
- *               userId:
- *                 type: string
- *     responses:
- *       '200':
- *         description: Successful response deleting the user
- *       '400':
- *         description: Invalid request parameters
- *       '500':
- *         description: Error deleting the user
- */
 router.delete(
   '/',
-  authTokenMiddleware as any,
-  // ((req, res, next) => zodParser(validator.deleteUser, req.body, next)) as any,
+  authTokenMiddleware,
+  zodParser(validator.deleteUser, 'body'),
   tryCatchWrapper(deleteUser),
 );
 
 router.post(
   '/checkcode',
-  authTokenMiddleware as any,
-  // ((req, res, next) => zodParser(validator.checkCode, req.body, next)) as any,
+  authTokenMiddleware,
+  zodParser(validator.checkCode, 'body'),
   tryCatchWrapper(checkCode),
 );
 router.post(
   '/updatepassword',
-  authTokenMiddleware as any,
-  // ((req, res, next) =>
-  //   zodParser(validator.updatePassword, req.body, next)) as any,
+  authTokenMiddleware,
+  zodParser(validator.updatePassword, 'body'),
   tryCatchWrapper(updatePassword),
 );
 router.post(
   '/emailexists',
-  // ((req, res, next) => zodParser(validator.emailExists, req.body, next)) as any,
+  zodParser(validator.emailExists, 'body'),
   tryCatchWrapper(emailExists),
 );
 

From a9f6a774937a69ce05dd39e839a696f649c75258 Mon Sep 17 00:00:00 2001
From: Anmol Verma <anmolverma2810@gmail.com>
Date: Tue, 16 Jul 2024 22:27:43 +0530
Subject: [PATCH 211/257] Placeholder changes and alignment fixes

---
 .../card/PackCardHeader/PackCardHeader.tsx    | 21 +++++++++----------
 .../pack_table/TableHelperComponents.tsx      |  8 +++----
 packages/ui/src/Dropdown.tsx                  |  7 +------
 packages/ui/src/RSelect/index.tsx             |  2 +-
 4 files changed, 16 insertions(+), 22 deletions(-)

diff --git a/packages/app/components/card/PackCardHeader/PackCardHeader.tsx b/packages/app/components/card/PackCardHeader/PackCardHeader.tsx
index b793b5f2a..b49bcbda9 100644
--- a/packages/app/components/card/PackCardHeader/PackCardHeader.tsx
+++ b/packages/app/components/card/PackCardHeader/PackCardHeader.tsx
@@ -13,15 +13,16 @@ import { useFetchSinglePack, useDeletePack } from 'app/hooks/packs';
 import { usePackTitleInput } from './usePackTitleInput';
 import { useRouter } from 'app/hooks/router';
 import { Platform, View } from 'react-native';
+import useResponsive from 'app/hooks/useResponsive';
 
 interface PackCardHeaderProps {
   data: any;
   title: string;
   link?: string;
 }
-interface optionValues{
+interface optionValues {
   label: string;
-  value: string
+  value: string;
 }
 
 export const PackCardHeader = ({ data, title }: PackCardHeaderProps) => {
@@ -46,6 +47,8 @@ export const PackCardHeader = ({ data, title }: PackCardHeaderProps) => {
     { label: 'Delete', value: 'Delete' },
   ];
 
+  const { xxs, xs, xxl } = useResponsive();
+
   return (
     <>
       <CustomCardHeader
@@ -91,10 +94,8 @@ export const PackCardHeader = ({ data, title }: PackCardHeaderProps) => {
           user?.id === data.owner_id && (
             <View
               style={{
-                alignSelf: 'flex-end',
-                flexDirection: 'row',
-                width: '15%',
-                justifyContent: 'flex-end',
+                minWidth: 50,
+                maxWidth: 100,
               }}
             >
               <DropdownComponent
@@ -104,13 +105,11 @@ export const PackCardHeader = ({ data, title }: PackCardHeaderProps) => {
                 placeholder={
                   <RIconButton
                     backgroundColor="transparent"
-                    icon={<MaterialIcons name="more-horiz" size={18} />}
-                    style={{ padding: 0 }}
+                    icon={<MaterialIcons name="more-horiz" size={20} />}
+                    style={{ paddingTop: 20 }}
                   />
                 }
-                width="100%"
                 native={true}
-                zeego={true}
               />
             </View>
           )
@@ -118,4 +117,4 @@ export const PackCardHeader = ({ data, title }: PackCardHeaderProps) => {
       />
     </>
   );
-};
\ No newline at end of file
+};
diff --git a/packages/app/components/pack_table/TableHelperComponents.tsx b/packages/app/components/pack_table/TableHelperComponents.tsx
index 6352e9866..3a948ad1c 100644
--- a/packages/app/components/pack_table/TableHelperComponents.tsx
+++ b/packages/app/components/pack_table/TableHelperComponents.tsx
@@ -122,17 +122,17 @@ const WeightUnitDropdown = ({ value, onChange }: WeightUnitDropdownProps) => {
     <View
       style={{
         alignSelf: 'center',
-        width: xxs ? '50%' : xs ? '50%' : xxl ? '15%' : '50%',
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: '15%',
       }}
     >
       <DropdownComponent
         value={value}
         data={optionValues}
         onValueChange={(itemValue) => onChange(itemValue)}
-        placeholder="Select weight unit"
-        width="100%"
+        placeholder={value}
         native={true}
-        // zeego={true}
       />
     </View>
   );
diff --git a/packages/ui/src/Dropdown.tsx b/packages/ui/src/Dropdown.tsx
index 71a7082d1..b414f48a2 100644
--- a/packages/ui/src/Dropdown.tsx
+++ b/packages/ui/src/Dropdown.tsx
@@ -139,12 +139,7 @@ export const DropdownComponent: React.FC<DropdownComponentProps> = ({
   const isWeb = Platform.OS === 'web';
 
   return (
-    <View
-      style={[
-        { ...style, width: width || '100%' },
-        !isWeb && { flexDirection: 'row', justifyContent: 'center' },
-      ]}
-    >
+    <View style={{ flexDirection: 'row', justifyContent: 'center' }}>
       <RSelect
         placeholder={placeholder || 'Select'}
         native={!isWeb}
diff --git a/packages/ui/src/RSelect/index.tsx b/packages/ui/src/RSelect/index.tsx
index 9b6b118c9..d44a2721f 100644
--- a/packages/ui/src/RSelect/index.tsx
+++ b/packages/ui/src/RSelect/index.tsx
@@ -98,7 +98,7 @@ export function SelectItem(props) {
       onValueChange={handleChange}
       {...forwardedProps}
     >
-      <Select.Trigger width={220}>
+      <Select.Trigger>
         <Select.Value>{placeholder}</Select.Value>
       </Select.Trigger>
       <Select.Content zIndex={200000}>

From ddd41742153084a1fc71f31c5ebe41228463546e Mon Sep 17 00:00:00 2001
From: Ibrahim Isa Jajere <ibrahimisajajere274@gmail.com>
Date: Tue, 16 Jul 2024 18:03:33 +0100
Subject: [PATCH 212/257] =?UTF-8?q?=E2=9C=A8=20switch=20to=20protectedProc?=
 =?UTF-8?q?edure=20for=20pack/item=20similarity=20query?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 server/src/controllers/item/getSimilarItems.ts | 4 ++--
 server/src/controllers/pack/getSimilarPacks.ts | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/server/src/controllers/item/getSimilarItems.ts b/server/src/controllers/item/getSimilarItems.ts
index 4a2a01f8f..70f554d3b 100644
--- a/server/src/controllers/item/getSimilarItems.ts
+++ b/server/src/controllers/item/getSimilarItems.ts
@@ -1,9 +1,9 @@
 import { getSimilarItemsService } from '../../services/item/getSimilarItemsService';
-import { publicProcedure } from '../../trpc';
+import { protectedProcedure } from '../../trpc';
 import * as validator from '@packrat/validations';
 
 export function getSimilarItemsRoute() {
-  return publicProcedure
+  return protectedProcedure
     .input(validator.getSimilarItems)
     .query(async (opts) => {
       const { id, limit, visibility } = opts.input;
diff --git a/server/src/controllers/pack/getSimilarPacks.ts b/server/src/controllers/pack/getSimilarPacks.ts
index 19a776560..aa6735b95 100644
--- a/server/src/controllers/pack/getSimilarPacks.ts
+++ b/server/src/controllers/pack/getSimilarPacks.ts
@@ -1,9 +1,9 @@
-import { publicProcedure } from '../../trpc';
+import { protectedProcedure } from '../../trpc';
 import { getSimilarPacksService } from '../../services/pack/pack.service';
 import { getSimilarPacks } from '@packrat/validations';
 
 export function getSimilarPacksRoute() {
-  return publicProcedure.input(getSimilarPacks).query(async (opts) => {
+  return protectedProcedure.input(getSimilarPacks).query(async (opts) => {
     const { id, limit, visibility } = opts.input;
 
     if (limit < 1) {

From e32c99207dba292f9cdfaa0cae251d292d157123 Mon Sep 17 00:00:00 2001
From: Andrew Bierman <andrew@safetyamp.com>
Date: Tue, 16 Jul 2024 16:58:47 -0400
Subject: [PATCH 213/257] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20boilerplate=20to?=
 =?UTF-8?q?=20add=20cloudflare=20queues?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 server/src/index.ts          | 19 ++++++++++++-----
 server/src/queue/index.ts    | 41 ++++++++++++++++++++++++++++++++++++
 server/wrangler.toml.example | 17 +++++++++++++--
 3 files changed, 70 insertions(+), 7 deletions(-)
 create mode 100644 server/src/queue/index.ts

diff --git a/server/src/index.ts b/server/src/index.ts
index 8cf313258..60bd0f589 100644
--- a/server/src/index.ts
+++ b/server/src/index.ts
@@ -1,14 +1,16 @@
 import { Hono } from 'hono';
+import { cors } from 'hono/cors';
+import { logger } from 'hono/logger';
 import { fetchHandler } from 'trpc-playground/handlers/fetch';
 import { appRouter } from './routes/trpcRouter';
 import { honoTRPCServer } from './trpc/server';
-import { cors } from 'hono/cors';
 import { securityHeaders } from './middleware/securityHeaders';
 import { enforceHttps } from './middleware/enforceHttps';
 import router from './routes';
 import { CORS_METHODS } from './config';
+import { queue } from './queue';
 
-interface Bindings {
+export interface Bindings {
   [key: string]: any;
   DB: IDBDatabase;
   JWT_VERIFICATION_KEY: string;
@@ -48,8 +50,7 @@ app.use('*', async (c, next) => {
 });
 
 // SETUP LOGGING
-//  tRPC is already logging requests, but you can add your own middleware
-//  app.use('*', logger());
+app.use('*', logger());
 
 // SETUP TRPC SERVER
 app.use(`${TRPC_API_ENDPOINT}/*`, honoTRPCServer({ router: appRouter }));
@@ -67,4 +68,12 @@ app.use(TRPC_PLAYGROUND_ENDPOINT, async (c, next) => {
 // SET UP HTTP ROUTES
 app.route(`${HTTP_ENDPOINT}`, router);
 
-export default app;
+// SETUP CLOUDFLARE WORKER WITH EVENT HANDLERS
+const worker = {
+  ...app,
+  fetch: app.fetch,
+  queue,
+};
+
+// EXPORT WORKER
+export default worker;
diff --git a/server/src/queue/index.ts b/server/src/queue/index.ts
new file mode 100644
index 000000000..2feb5411e
--- /dev/null
+++ b/server/src/queue/index.ts
@@ -0,0 +1,41 @@
+import { MessageBatch } from '@cloudflare/workers-types';
+import { Bindings } from '..';
+
+async function handleLogQueue(batch: MessageBatch<Error>, env: Bindings) {
+  for (const message of batch.messages) {
+    console.log('Processing log message:', message.body);
+    // Add your log processing logic here
+  }
+}
+
+const handleQueueDefault = async (
+  batch: MessageBatch<Error>,
+  env: Bindings,
+) => {
+  console.error(`No handler found for queue: ${batch.queue}`);
+  // Optionally, implement a default behavior or error handling
+};
+
+// Add more handler functions as needed
+
+// Create a Map for handlers
+const queueHandlersMap = new Map<
+  string,
+  (batch: MessageBatch<Error>, env: Bindings) => Promise<void>
+>([
+  ['log-queue', handleLogQueue],
+  // Add more handlers here
+]);
+
+export async function queue(
+  batch: MessageBatch<Error>,
+  env: Bindings,
+): Promise<void> {
+  try {
+    const handler = queueHandlersMap.get(batch.queue) || handleQueueDefault;
+    await handler(batch, env);
+  } catch (error) {
+    console.error(`Error processing queue: ${batch.queue}`, error);
+    // Optionally, add more error handling logic here
+  }
+}
diff --git a/server/wrangler.toml.example b/server/wrangler.toml.example
index 90f5ed2e8..5c29c5904 100644
--- a/server/wrangler.toml.example
+++ b/server/wrangler.toml.example
@@ -1,14 +1,27 @@
 name = "packrat_api"
 main = "src/index.ts"
 compatibility_date = "2024-03-14"
-compatibility_flags = ["nodejs_compat"]
-# node_compat = true # Sometimes this is needed for tests 
+compatibility_flags = ["nodejs_compat"] # Sometimes this is needed for tests
+# node_compat = true
 
 [[ d1_databases ]]
 binding = "DB"
 database_name = "production"
 database_id = "3f9677cd-7dd9-4a2c-92c6-be5dbbf47baa"
 
+[[queues.producers]]
+  queue = "packrat-error-queue"
+  binding = "ERROR_QUEUE"
+
+[[queues.consumers]]
+  queue = "packrat-error-queue"
+  max_batch_size = 100
+  max_batch_timeout = 30
+
+[[r2_buckets]]
+  bucket_name = "packrat-error-bucket"
+  binding = "ERROR_BUCKET"
+
 # Add vars below
 # [vars]
 # GOOGLE_CLIENT_ID=""

From 11561d82ae68f3d864c0eda5ce4b8cf21feddbc1 Mon Sep 17 00:00:00 2001
From: Andrew Bierman <abbierman101@gmail.com>
Date: Tue, 16 Jul 2024 20:09:30 -0400
Subject: [PATCH 214/257] =?UTF-8?q?=F0=9F=97=91=EF=B8=8F=20moving=20old=20?=
 =?UTF-8?q?node=20js=20specific=20code=20into=20bun=20server=20for=20now?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../bun-server}/src/models/dbConnection.ts    |  0
 .../bun-server}/src/models/geojsonModel.ts    |  0
 .../bun-server}/src/models/itemCategory.ts    |  0
 .../bun-server}/src/models/itemModel.ts       |  0
 .../src/models/openai/conversationModel.ts    |  0
 .../bun-server}/src/models/osm/nodeModel.ts   |  0
 .../src/models/osm/relationModel.ts           |  0
 .../bun-server}/src/models/osm/wayModel.ts    |  0
 .../bun-server}/src/models/packModel.ts       |  0
 .../bun-server}/src/models/templateModel.ts   |  0
 .../bun-server}/src/models/tripModel.ts       |  0
 .../bun-server}/src/models/userModel.ts       |  0
 .../bun-server}/src/workers/createPiscina.ts  |  0
 .../bun-server}/src/workers/mockWorker.ts     |  0
 .../bun-server}/src/workers/osmWorker.ts      |  0
 .../bun-server}/src/workers/worker.ts         |  0
 ...230731042113-addUsernameToExistingUsers.js | 58 -------------------
 17 files changed, 58 deletions(-)
 rename {server => apps/bun-server}/src/models/dbConnection.ts (100%)
 rename {server => apps/bun-server}/src/models/geojsonModel.ts (100%)
 rename {server => apps/bun-server}/src/models/itemCategory.ts (100%)
 rename {server => apps/bun-server}/src/models/itemModel.ts (100%)
 rename {server => apps/bun-server}/src/models/openai/conversationModel.ts (100%)
 rename {server => apps/bun-server}/src/models/osm/nodeModel.ts (100%)
 rename {server => apps/bun-server}/src/models/osm/relationModel.ts (100%)
 rename {server => apps/bun-server}/src/models/osm/wayModel.ts (100%)
 rename {server => apps/bun-server}/src/models/packModel.ts (100%)
 rename {server => apps/bun-server}/src/models/templateModel.ts (100%)
 rename {server => apps/bun-server}/src/models/tripModel.ts (100%)
 rename {server => apps/bun-server}/src/models/userModel.ts (100%)
 rename {server => apps/bun-server}/src/workers/createPiscina.ts (100%)
 rename {server => apps/bun-server}/src/workers/mockWorker.ts (100%)
 rename {server => apps/bun-server}/src/workers/osmWorker.ts (100%)
 rename {server => apps/bun-server}/src/workers/worker.ts (100%)
 delete mode 100644 server/src/migrations/20230731042113-addUsernameToExistingUsers.js

diff --git a/server/src/models/dbConnection.ts b/apps/bun-server/src/models/dbConnection.ts
similarity index 100%
rename from server/src/models/dbConnection.ts
rename to apps/bun-server/src/models/dbConnection.ts
diff --git a/server/src/models/geojsonModel.ts b/apps/bun-server/src/models/geojsonModel.ts
similarity index 100%
rename from server/src/models/geojsonModel.ts
rename to apps/bun-server/src/models/geojsonModel.ts
diff --git a/server/src/models/itemCategory.ts b/apps/bun-server/src/models/itemCategory.ts
similarity index 100%
rename from server/src/models/itemCategory.ts
rename to apps/bun-server/src/models/itemCategory.ts
diff --git a/server/src/models/itemModel.ts b/apps/bun-server/src/models/itemModel.ts
similarity index 100%
rename from server/src/models/itemModel.ts
rename to apps/bun-server/src/models/itemModel.ts
diff --git a/server/src/models/openai/conversationModel.ts b/apps/bun-server/src/models/openai/conversationModel.ts
similarity index 100%
rename from server/src/models/openai/conversationModel.ts
rename to apps/bun-server/src/models/openai/conversationModel.ts
diff --git a/server/src/models/osm/nodeModel.ts b/apps/bun-server/src/models/osm/nodeModel.ts
similarity index 100%
rename from server/src/models/osm/nodeModel.ts
rename to apps/bun-server/src/models/osm/nodeModel.ts
diff --git a/server/src/models/osm/relationModel.ts b/apps/bun-server/src/models/osm/relationModel.ts
similarity index 100%
rename from server/src/models/osm/relationModel.ts
rename to apps/bun-server/src/models/osm/relationModel.ts
diff --git a/server/src/models/osm/wayModel.ts b/apps/bun-server/src/models/osm/wayModel.ts
similarity index 100%
rename from server/src/models/osm/wayModel.ts
rename to apps/bun-server/src/models/osm/wayModel.ts
diff --git a/server/src/models/packModel.ts b/apps/bun-server/src/models/packModel.ts
similarity index 100%
rename from server/src/models/packModel.ts
rename to apps/bun-server/src/models/packModel.ts
diff --git a/server/src/models/templateModel.ts b/apps/bun-server/src/models/templateModel.ts
similarity index 100%
rename from server/src/models/templateModel.ts
rename to apps/bun-server/src/models/templateModel.ts
diff --git a/server/src/models/tripModel.ts b/apps/bun-server/src/models/tripModel.ts
similarity index 100%
rename from server/src/models/tripModel.ts
rename to apps/bun-server/src/models/tripModel.ts
diff --git a/server/src/models/userModel.ts b/apps/bun-server/src/models/userModel.ts
similarity index 100%
rename from server/src/models/userModel.ts
rename to apps/bun-server/src/models/userModel.ts
diff --git a/server/src/workers/createPiscina.ts b/apps/bun-server/src/workers/createPiscina.ts
similarity index 100%
rename from server/src/workers/createPiscina.ts
rename to apps/bun-server/src/workers/createPiscina.ts
diff --git a/server/src/workers/mockWorker.ts b/apps/bun-server/src/workers/mockWorker.ts
similarity index 100%
rename from server/src/workers/mockWorker.ts
rename to apps/bun-server/src/workers/mockWorker.ts
diff --git a/server/src/workers/osmWorker.ts b/apps/bun-server/src/workers/osmWorker.ts
similarity index 100%
rename from server/src/workers/osmWorker.ts
rename to apps/bun-server/src/workers/osmWorker.ts
diff --git a/server/src/workers/worker.ts b/apps/bun-server/src/workers/worker.ts
similarity index 100%
rename from server/src/workers/worker.ts
rename to apps/bun-server/src/workers/worker.ts
diff --git a/server/src/migrations/20230731042113-addUsernameToExistingUsers.js b/server/src/migrations/20230731042113-addUsernameToExistingUsers.js
deleted file mode 100644
index e60c17451..000000000
--- a/server/src/migrations/20230731042113-addUsernameToExistingUsers.js
+++ /dev/null
@@ -1,58 +0,0 @@
-// module.exports = {
-//   async up(db, client) {
-//     // TODO write your migration here.
-//     // See https://github.com/seppevs/migrate-mongo/#creating-a-new-migration-script
-//     // Example:
-//     // await db.collection('albums').updateOne({artist: 'The Beatles'}, {$set: {blacklisted: true}});
-
-//   },
-
-//   async down(db, client) {
-//     // TODO write the statements to rollback your migration (if possible)
-//     // Example:
-//     // await db.collection('albums').updateOne({artist: 'The Beatles'}, {$set: {blacklisted: false}});
-//   }
-// };
-
-export const up = async (db) => {
-  console.log('Adding usernames to existing users...');
-
-  const cursor = db.collection('users').find({ username: { $exists: false } });
-
-  while (await cursor.hasNext()) {
-    const user = await cursor.next();
-
-    if (!user.username) {
-      let generatedUsername = user.email
-        ? user.email.split('@')[0]
-        : 'packratuser';
-
-      // Check for existing username
-      let exists = await db
-        .collection('users')
-        .findOne({ username: generatedUsername });
-
-      let counter = 1;
-      while (exists) {
-        generatedUsername = `${generatedUsername}${counter}`;
-        counter++;
-        // Check again with the new generated username
-        exists = await db
-          .collection('users')
-          .findOne({ username: generatedUsername });
-      }
-
-      // Update the user
-      await db
-        .collection('users')
-        .updateOne(
-          { _id: user._id },
-          { $set: { username: generatedUsername } },
-        );
-    }
-  }
-};
-
-export const down = async (db) => {
-  // Here you can write steps to undo the changes in up() if necessary.
-};

From 41506ba71284b8613987b05a565d1b1cc3f67ce6 Mon Sep 17 00:00:00 2001
From: Andrew Bierman <abbierman101@gmail.com>
Date: Tue, 16 Jul 2024 20:10:12 -0400
Subject: [PATCH 215/257] =?UTF-8?q?=F0=9F=97=91=EF=B8=8F=20move=20old=20qu?=
 =?UTF-8?q?eue=20logic?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 {server => apps/bun-server}/src/queue/processJob.ts   | 0
 {server => apps/bun-server}/src/queue/queueManager.ts | 0
 {server => apps/bun-server}/src/queue/queueTest.ts    | 0
 3 files changed, 0 insertions(+), 0 deletions(-)
 rename {server => apps/bun-server}/src/queue/processJob.ts (100%)
 rename {server => apps/bun-server}/src/queue/queueManager.ts (100%)
 rename {server => apps/bun-server}/src/queue/queueTest.ts (100%)

diff --git a/server/src/queue/processJob.ts b/apps/bun-server/src/queue/processJob.ts
similarity index 100%
rename from server/src/queue/processJob.ts
rename to apps/bun-server/src/queue/processJob.ts
diff --git a/server/src/queue/queueManager.ts b/apps/bun-server/src/queue/queueManager.ts
similarity index 100%
rename from server/src/queue/queueManager.ts
rename to apps/bun-server/src/queue/queueManager.ts
diff --git a/server/src/queue/queueTest.ts b/apps/bun-server/src/queue/queueTest.ts
similarity index 100%
rename from server/src/queue/queueTest.ts
rename to apps/bun-server/src/queue/queueTest.ts

From 8947913fa4ad3bb34c9b90d379a1f5afa53bb9d9 Mon Sep 17 00:00:00 2001
From: Andrew Bierman <94939237+andrew-bierman@users.noreply.github.com>
Date: Tue, 16 Jul 2024 20:59:27 -0400
Subject: [PATCH 216/257] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20add=20cf=20etl=20q?=
 =?UTF-8?q?ueue?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 server/package.json          |  1 +
 server/src/index.ts          | 12 +++++++-----
 server/src/queue/index.ts    |  4 ++--
 server/wrangler.toml.example | 14 +++++++-------
 yarn.lock                    |  8 ++++++++
 5 files changed, 25 insertions(+), 14 deletions(-)

diff --git a/server/package.json b/server/package.json
index 4b470d08a..e5cae6922 100644
--- a/server/package.json
+++ b/server/package.json
@@ -98,6 +98,7 @@
     "passport-local": "^1.0.0",
     "piscina": "^4.0.0",
     "prisma": "^5.7.0",
+    "radash": "^12.1.0",
     "superjson": "^2.0.0",
     "swagger-jsdoc": "^6.2.8",
     "swagger-ui-express": "^4.6.3",
diff --git a/server/src/index.ts b/server/src/index.ts
index 60bd0f589..4c5089ac7 100644
--- a/server/src/index.ts
+++ b/server/src/index.ts
@@ -2,13 +2,13 @@ import { Hono } from 'hono';
 import { cors } from 'hono/cors';
 import { logger } from 'hono/logger';
 import { fetchHandler } from 'trpc-playground/handlers/fetch';
-import { appRouter } from './routes/trpcRouter';
-import { honoTRPCServer } from './trpc/server';
-import { securityHeaders } from './middleware/securityHeaders';
-import { enforceHttps } from './middleware/enforceHttps';
-import router from './routes';
 import { CORS_METHODS } from './config';
+import { enforceHttps } from './middleware/enforceHttps';
+import { securityHeaders } from './middleware/securityHeaders';
 import { queue } from './queue';
+import router from './routes';
+import { appRouter } from './routes/trpcRouter';
+import { honoTRPCServer } from './trpc/server';
 
 export interface Bindings {
   [key: string]: any;
@@ -17,6 +17,8 @@ export interface Bindings {
   APP_URL: string;
   CORS_ORIGIN: string;
   MAPBOX_ACCESS_TOKEN: string;
+  readonly ETL_QUEUE: Queue<Error>;
+  readonly ETL_BUCKET: R2Bucket;
 }
 
 const TRPC_API_ENDPOINT = '/api/trpc';
diff --git a/server/src/queue/index.ts b/server/src/queue/index.ts
index 2feb5411e..79f7925d4 100644
--- a/server/src/queue/index.ts
+++ b/server/src/queue/index.ts
@@ -1,7 +1,7 @@
 import { MessageBatch } from '@cloudflare/workers-types';
 import { Bindings } from '..';
 
-async function handleLogQueue(batch: MessageBatch<Error>, env: Bindings) {
+async function handleEtlQueue(batch: MessageBatch<Error>, env: Bindings) {
   for (const message of batch.messages) {
     console.log('Processing log message:', message.body);
     // Add your log processing logic here
@@ -23,7 +23,7 @@ const queueHandlersMap = new Map<
   string,
   (batch: MessageBatch<Error>, env: Bindings) => Promise<void>
 >([
-  ['log-queue', handleLogQueue],
+  ['etl-queue', handleEtlQueue],
   // Add more handlers here
 ]);
 
diff --git a/server/wrangler.toml.example b/server/wrangler.toml.example
index 8a386daf0..0edf2e1ac 100644
--- a/server/wrangler.toml.example
+++ b/server/wrangler.toml.example
@@ -10,17 +10,17 @@ database_name = "production"
 database_id = "3f9677cd-7dd9-4a2c-92c6-be5dbbf47baa"
 
 [[queues.producers]]
-  queue = "packrat-error-queue"
-  binding = "ERROR_QUEUE"
+  queue = "etl-queue"
+  binding = "ETL_QUEUE"
 
 [[queues.consumers]]
-  queue = "packrat-error-queue"
-  max_batch_size = 100
-  max_batch_timeout = 30
+  queue = "etl-queue"
+  max_batch_size = 10
+  max_batch_timeout = 5
 
 [[r2_buckets]]
-  bucket_name = "packrat-error-bucket"
-  binding = "ERROR_BUCKET"
+  bucket_name = "etl-bucket"
+  binding = "ETL_BUCKET"
 
 # Add vars below
 # [vars]
diff --git a/yarn.lock b/yarn.lock
index 41c44d7b3..5c67ca138 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -30208,6 +30208,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"radash@npm:^12.1.0":
+  version: 12.1.0
+  resolution: "radash@npm:12.1.0"
+  checksum: 10/4add14a04b5a82811f2d18d3d3b9244c1f08bfc0ee4cec8093040077ad5bc82884f63c29952a3b29f424ef1f2188475b2d5c6005d9620c9f200378e6cfdcb2f6
+  languageName: node
+  linkType: hard
+
 "raf@npm:^3.4.1":
   version: 3.4.1
   resolution: "raf@npm:3.4.1"
@@ -32403,6 +32410,7 @@ __metadata:
     piscina: "npm:^4.0.0"
     prettier: "npm:^3.2.5"
     prisma: "npm:^5.7.0"
+    radash: "npm:^12.1.0"
     superjson: "npm:^2.0.0"
     swagger-jsdoc: "npm:^6.2.8"
     swagger-ui-express: "npm:^4.6.3"

From 2c0d40e3eada9253d23fc5d3d99d3f2a4a15c975 Mon Sep 17 00:00:00 2001
From: Andrew Bierman <94939237+andrew-bierman@users.noreply.github.com>
Date: Tue, 16 Jul 2024 22:40:07 -0400
Subject: [PATCH 217/257] =?UTF-8?q?=E2=AC=86=EF=B8=8F=20regen=20lock?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 yarn.lock | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index f9af5eb75..57f860703 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5492,7 +5492,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@packrat/shared-types@npm:^0.0.1, @packrat/shared-types@workspace:^, @packrat/shared-types@workspace:packages/shared-types":
+"@packrat/shared-types@npm:*, @packrat/shared-types@workspace:packages/shared-types":
   version: 0.0.0-use.local
   resolution: "@packrat/shared-types@workspace:packages/shared-types"
   dependencies:
@@ -5558,7 +5558,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@packrat/validations@workspace:packages/validations"
   dependencies:
-    "@packrat/shared-types": "npm:^0.0.1"
+    "@packrat/shared-types": "npm:*"
     "@types/express": "npm:^4.17.17"
     "@types/node": "npm:^20.14.2"
     express: "npm:^4.19.2"
@@ -32362,7 +32362,7 @@ __metadata:
     "@instructor-ai/instructor": "npm:^1.3.0"
     "@libsql/client": "npm:^0.4.0-pre.5"
     "@openapitools/openapi-generator-cli": "npm:^2.7.0"
-    "@packrat/shared-types": "workspace:^"
+    "@packrat/shared-types": "npm:*"
     "@packrat/validations": "npm:*"
     "@paralleldrive/cuid2": "npm:^2.2.2"
     "@prisma/client": "npm:^5.7.0"

From 8bd0992e3936ccf8fa58ea1080fd1576b942afc0 Mon Sep 17 00:00:00 2001
From: Andrew Bierman <94939237+andrew-bierman@users.noreply.github.com>
Date: Tue, 16 Jul 2024 23:17:18 -0400
Subject: [PATCH 218/257] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20enable=20logpush?=
 =?UTF-8?q?=20for=20better=20monitoring?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 server/wrangler.toml.example | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/server/wrangler.toml.example b/server/wrangler.toml.example
index 9b73ab290..b1467182c 100644
--- a/server/wrangler.toml.example
+++ b/server/wrangler.toml.example
@@ -4,6 +4,8 @@ compatibility_date = "2024-03-14"
 compatibility_flags = ["nodejs_compat"]
 # node_compat = true # Sometimes this is needed for tests
 
+logpush = true
+
 [[ d1_databases ]]
 binding = "DB"
 database_name = "production"

From 898965c71b4dac935b3b6eb53e3848ce67e12b18 Mon Sep 17 00:00:00 2001
From: Anmol Verma <anmolverma2810@gmail.com>
Date: Wed, 17 Jul 2024 10:52:19 +0530
Subject: [PATCH 219/257] Add select weight unit text

---
 packages/app/components/pack_table/TableHelperComponents.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/app/components/pack_table/TableHelperComponents.tsx b/packages/app/components/pack_table/TableHelperComponents.tsx
index 3a948ad1c..d3236faa2 100644
--- a/packages/app/components/pack_table/TableHelperComponents.tsx
+++ b/packages/app/components/pack_table/TableHelperComponents.tsx
@@ -131,7 +131,7 @@ const WeightUnitDropdown = ({ value, onChange }: WeightUnitDropdownProps) => {
         value={value}
         data={optionValues}
         onValueChange={(itemValue) => onChange(itemValue)}
-        placeholder={value}
+        placeholder={`Select Weight unit :  ${value}`}
         native={true}
       />
     </View>

From 7b3525c3aecbb3bf45c727603d5789a6e9fbca99 Mon Sep 17 00:00:00 2001
From: Anmol Verma <anmolverma2810@gmail.com>
Date: Wed, 17 Jul 2024 11:01:17 +0530
Subject: [PATCH 220/257] Adjust size on native

---
 packages/app/components/pack_table/TableHelperComponents.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/app/components/pack_table/TableHelperComponents.tsx b/packages/app/components/pack_table/TableHelperComponents.tsx
index d3236faa2..45999cb2e 100644
--- a/packages/app/components/pack_table/TableHelperComponents.tsx
+++ b/packages/app/components/pack_table/TableHelperComponents.tsx
@@ -124,7 +124,7 @@ const WeightUnitDropdown = ({ value, onChange }: WeightUnitDropdownProps) => {
         alignSelf: 'center',
         alignItems: 'center',
         justifyContent: 'center',
-        width: '15%',
+        width: '55%',
       }}
     >
       <DropdownComponent

From 7a9d4f2d3e356b64214e1373e8bf8d87d04e761b Mon Sep 17 00:00:00 2001
From: pinocchio-life-like <icbr19fl@gmail.com>
Date: Wed, 17 Jul 2024 09:28:08 +0300
Subject: [PATCH 221/257] items controller done

---
 .../controllers/item/addGlobalItemToPack.ts   |  25 +-
 server/src/controllers/item/addItem.ts        |  37 ++-
 server/src/controllers/item/addItemGlobal.ts  |  34 +-
 .../src/controllers/item/deleteGlobalItem.ts  |  24 +-
 server/src/controllers/item/deleteItem.ts     |  22 +-
 .../item/editGlobalItemAsDuplicate.ts         |  42 +--
 server/src/controllers/item/editItem.ts       |  27 +-
 server/src/controllers/item/getItemById.ts    |  21 +-
 server/src/controllers/item/getItems.ts       |  21 +-
 .../src/controllers/item/getItemsGlobally.ts  |   9 +
 .../src/controllers/item/searchItemsByName.ts |  23 +-
 server/src/routes/index.ts                    |   4 +-
 server/src/routes/itemRoutes.ts               | 300 +++---------------
 13 files changed, 174 insertions(+), 415 deletions(-)

diff --git a/server/src/controllers/item/addGlobalItemToPack.ts b/server/src/controllers/item/addGlobalItemToPack.ts
index dc338a764..43a8607cf 100644
--- a/server/src/controllers/item/addGlobalItemToPack.ts
+++ b/server/src/controllers/item/addGlobalItemToPack.ts
@@ -8,19 +8,18 @@ import { z } from 'zod';
  * @param {Object} res - The response object.
  * @return {Object} The updated item.
  */
-// export const addGlobalItemToPack = async (req, res, next) => {
-//   try {
-//     const { packId } = req.params;
-//     const { itemId, ownerId } = req.body;
-
-//     const result = await addGlobalItemToPackService(packId, itemId, ownerId);
-
-//     res.locals.data = result;
-//     responseHandler(res);
-//   } catch (error) {
-//     next(ItemNotFoundError);
-//   }
-// };
+export const addGlobalItemToPack = async (c) => {
+  try {
+    const { packId, itemId, ownerId } = await c.req.parseBody();
+    const item = await addGlobalItemToPackService(packId, itemId, ownerId);
+    return c.json({ item }, 200);
+  } catch (error) {
+    return c.json(
+      { error: `Failed to add item to pack: ${error.message}` },
+      500,
+    );
+  }
+};
 
 export function addGlobalItemToPackRoute() {
   return protectedProcedure
diff --git a/server/src/controllers/item/addItem.ts b/server/src/controllers/item/addItem.ts
index 966c114b3..f2953f06d 100644
--- a/server/src/controllers/item/addItem.ts
+++ b/server/src/controllers/item/addItem.ts
@@ -8,26 +8,25 @@ import * as validator from '@packrat/validations';
  * @param {Object} res - The response object.
  * @return {Object} The updated item and pack ID.
  */
-// export const addItem = async (req, res, next) => {
-//   try {
-//     const { name, weight, quantity, unit, packId, type, ownerId } = req.body;
+export const addItem = async (c) => {
+  try {
+    const { name, weight, quantity, unit, packId, type, ownerId } =
+      await c.req.parseBody();
 
-//     const result = await addItemService(
-//       name,
-//       weight,
-//       quantity,
-//       unit,
-//       packId,
-//       type,
-//       ownerId,
-//     );
-
-//     res.locals.data = { newItem: result.newItem, packId: result.packId };
-//     responseHandler(res);
-//   } catch (error) {
-//     next(UnableToAddItemError);
-//   }
-// };
+    const result = await addItemService(
+      name,
+      weight,
+      quantity,
+      unit,
+      packId,
+      type,
+      ownerId,
+    );
+    return c.json({ result }, 200);
+  } catch (error) {
+    return c.json({ error: `Failed to add item: ${error.message}` }, 500);
+  }
+};
 
 export function addItemRoute() {
   return protectedProcedure.input(validator.addItem).mutation(async (opts) => {
diff --git a/server/src/controllers/item/addItemGlobal.ts b/server/src/controllers/item/addItemGlobal.ts
index 04ebbb569..37511e8f5 100644
--- a/server/src/controllers/item/addItemGlobal.ts
+++ b/server/src/controllers/item/addItemGlobal.ts
@@ -9,24 +9,24 @@ import * as validator from '@packrat/validations';
  * @return {object} The added item.
  */
 
-// export const addItemGlobal = async (req, res, next) => {
-//   try {
-//     const { name, weight, quantity, unit, type } = req.body;
+export const addItemGlobal = async (c) => {
+  try {
+    const { name, weight, quantity, unit, type, ownerId } =
+      await c.req.parseBody();
 
-//     const newItem = await addItemGlobalService(
-//       name,
-//       weight,
-//       quantity,
-//       unit,
-//       type,
-//     );
-
-//     res.locals.data = newItem;
-//     responseHandler(res);
-//   } catch (error) {
-//     next(UnableToAddItemError);
-//   }
-// };
+    const item = await addItemGlobalService(
+      name,
+      weight,
+      quantity,
+      unit,
+      type,
+      ownerId,
+    );
+    return c.json({ item }, 200);
+  } catch (error) {
+    return c.json({ error: `Failed to add item: ${error.message}` }, 500);
+  }
+};
 
 export function addItemGlobalRoute() {
   return protectedProcedure
diff --git a/server/src/controllers/item/deleteGlobalItem.ts b/server/src/controllers/item/deleteGlobalItem.ts
index 929d9ae00..00686843d 100644
--- a/server/src/controllers/item/deleteGlobalItem.ts
+++ b/server/src/controllers/item/deleteGlobalItem.ts
@@ -8,18 +8,18 @@ import { z } from 'zod';
  * @param {Object} res - The response object.
  * @return {Promise<void>} - Returns a promise that resolves to void.
  */
-// export const deleteGlobalItem = async (req, res, next) => {
-//   try {
-//     const { itemId } = req.params;
-
-//     const itemDeleted = await deleteGlobalItemService(itemId);
-
-//     res.locals.data = itemDeleted;
-//     responseHandler(res);
-//   } catch (error) {
-//     next(UnableToDeleteItemError);
-//   }
-// };
+export const deleteGlobalItem = async (c) => {
+  try {
+    const { itemId } = await c.req.parseBody();
+    const itemDeleted = await deleteGlobalItemService(itemId);
+    return c.json({ itemDeleted }, 200);
+  } catch (error) {
+    return c.json(
+      { error: `Failed to delete global item: ${error.message}` },
+      500,
+    );
+  }
+};
 
 export function deleteGlobalItemRoute() {
   return protectedProcedure
diff --git a/server/src/controllers/item/deleteItem.ts b/server/src/controllers/item/deleteItem.ts
index fac345058..a9d9b5140 100644
--- a/server/src/controllers/item/deleteItem.ts
+++ b/server/src/controllers/item/deleteItem.ts
@@ -9,19 +9,15 @@ import { publicProcedure, protectedProcedure } from '../../trpc';
  * @return {Object} The deleted item.
  */
 
-// export const deleteItem = async (req, res, next) => {
-//   try {
-//     const { itemId, packId } = req.body;
-
-//     const itemDeleted = await deleteItemService(itemId, packId);
-
-//     res.locals.data = itemDeleted;
-//     responseHandler(res);
-//   } catch (error) {
-//     console.error(error);
-//     next(UnableToDeleteItemError);
-//   }
-// };
+export const deleteItem = async (c) => {
+  try {
+    const { itemId, packId } = await c.req.parseBody();
+    const itemDeleted = await deleteItemService(itemId, packId);
+    return c.json({ itemDeleted }, 200);
+  } catch (error) {
+    return c.json({ error: `Failed to delete item: ${error.message}` }, 500);
+  }
+};
 
 export function deleteItemRoute() {
   return protectedProcedure
diff --git a/server/src/controllers/item/editGlobalItemAsDuplicate.ts b/server/src/controllers/item/editGlobalItemAsDuplicate.ts
index 20185a6a6..bbf6f0941 100644
--- a/server/src/controllers/item/editGlobalItemAsDuplicate.ts
+++ b/server/src/controllers/item/editGlobalItemAsDuplicate.ts
@@ -17,27 +17,29 @@ import { publicProcedure, protectedProcedure } from '../../trpc';
  * @param {Object} res - The response object.
  * @return {Object} The updated item.
  */
-// export const editGlobalItemAsDuplicate = async (req, res, next) => {
-//   try {
-//     const { itemId } = req.params;
-//     const { packId, name, weight, quantity, unit, type } = req.body;
+export const editGlobalItemAsDuplicate = async (c) => {
+  try {
+    const { itemId } = await c.req.parseParams();
+    const { packId, name, weight, quantity, unit, type } =
+      await c.req.parseBody();
 
-//     const newItem = await editGlobalItemAsDuplicateService(
-//       itemId,
-//       packId,
-//       name,
-//       weight,
-//       quantity,
-//       unit,
-//       type,
-//     );
-
-//     res.locals.data = newItem;
-//     responseHandler(res);
-//   } catch (error) {
-//     next(UnableToDeleteItemError);
-//   }
-// };
+    const item = await editGlobalItemAsDuplicateService(
+      itemId,
+      packId,
+      name,
+      weight,
+      quantity,
+      unit,
+      type,
+    );
+    return c.json({ item }, 200);
+  } catch (error) {
+    return c.json(
+      { error: `Failed to edit item as duplicate: ${error.message}` },
+      500,
+    );
+  }
+};
 
 export function editGlobalItemAsDuplicateRoute() {
   return protectedProcedure
diff --git a/server/src/controllers/item/editItem.ts b/server/src/controllers/item/editItem.ts
index 29d954d23..59f28615b 100644
--- a/server/src/controllers/item/editItem.ts
+++ b/server/src/controllers/item/editItem.ts
@@ -2,25 +2,16 @@ import { publicProcedure, protectedProcedure } from '../../trpc';
 import { editItemService } from '../../services/item/item.service';
 import * as validator from '@packrat/validations';
 
-// export const editItem = async (req, res, next) => {
-//   try {
-//     const { id, name, weight, unit, quantity, type } = req.body;
+export const editItem = async (c) => {
+  try {
+    const { id, name, weight, unit, quantity, type } = await c.req.parseBody();
 
-//     const newItem = await editItemService(
-//       id,
-//       name,
-//       weight,
-//       unit,
-//       quantity,
-//       type,
-//     );
-
-//     res.locals.data = newItem;
-//     responseHandler(res);
-//   } catch (error) {
-//     next(UnableToEditItemError);
-//   }
-// };
+    const item = await editItemService(id, name, weight, unit, quantity, type);
+    return c.json({ item }, 200);
+  } catch (error) {
+    return c.json({ error: `Failed to edit item: ${error.message}` }, 500);
+  }
+};
 
 export function editItemRoute() {
   return protectedProcedure.input(validator.editItem).mutation(async (opts) => {
diff --git a/server/src/controllers/item/getItemById.ts b/server/src/controllers/item/getItemById.ts
index 572959546..f89c20eca 100644
--- a/server/src/controllers/item/getItemById.ts
+++ b/server/src/controllers/item/getItemById.ts
@@ -9,18 +9,15 @@ import * as validator from '@packrat/validations';
  * @param {string} req.body.id - The ID of the item to retrieve.
  * @return {Object} The retrieved item.
  */
-// export const getItemById = async (req, res, next) => {
-//   try {
-//     const { id } = req.body;
-
-//     const item = await getItemByIdService(id);
-
-//     res.locals.data = item;
-//     responseHandler(res);
-//   } catch (error) {
-//     next(ItemNotFoundError);
-//   }
-// };
+export const getItemById = async (c) => {
+  try {
+    const { id } = await c.req.parseBody();
+    const item = await getItemByIdService(id);
+    return c.json({ item }, 200);
+  } catch (error) {
+    return c.json({ error: `Failed to get item: ${error.message}` }, 500);
+  }
+};
 
 export function getItemByIdRoute() {
   return protectedProcedure.input(validator.getItemById).query(async (opts) => {
diff --git a/server/src/controllers/item/getItems.ts b/server/src/controllers/item/getItems.ts
index 1dfbd1eab..b72876c02 100644
--- a/server/src/controllers/item/getItems.ts
+++ b/server/src/controllers/item/getItems.ts
@@ -9,18 +9,15 @@ import * as validator from '@packrat/validations';
  * @param {string} req.params.packId - The ID of the pack to retrieve items for.
  * @return {Object} An array of items associated with the pack.
  */
-// export const getItems = async (req, res, next) => {
-//   try {
-//     const { packId } = req.params;
-
-//     const items = await getItemsService(packId);
-
-//     res.locals.data = items;
-//     responseHandler(res);
-//   } catch (error) {
-//     next(ItemNotFoundError);
-//   }
-// };
+export const getItems = async (c) => {
+  try {
+    const packId = c.req.param('packId');
+    const items = await getItemsService(packId);
+    return c.json({ items }, 200);
+  } catch (error) {
+    return c.json({ error: `Failed to get items: ${error.message}` }, 500);
+  }
+};
 
 export function getItemsRoute() {
   return protectedProcedure.input(validator.getItems).query(async (opts) => {
diff --git a/server/src/controllers/item/getItemsGlobally.ts b/server/src/controllers/item/getItemsGlobally.ts
index 259851e11..24fbfdf77 100644
--- a/server/src/controllers/item/getItemsGlobally.ts
+++ b/server/src/controllers/item/getItemsGlobally.ts
@@ -8,6 +8,15 @@ import { z } from 'zod';
  * @param {Object} res - The response object.
  * @return {Object} The items, page, and total pages.
  */
+export const getItemsGlobally = async (c) => {
+  try {
+    const { limit, page, searchString } = await c.req.parseBody();
+    const result = await getItemsGloballyService(limit, page, searchString);
+    return c.json({ ...result, items: result.items }, 200);
+  } catch (error) {
+    return c.json({ error: `Failed to get items: ${error.message}` }, 500);
+  }
+};
 
 export function getItemsGloballyRoute() {
   return protectedProcedure
diff --git a/server/src/controllers/item/searchItemsByName.ts b/server/src/controllers/item/searchItemsByName.ts
index 2aa5beeed..b9d9ee35c 100644
--- a/server/src/controllers/item/searchItemsByName.ts
+++ b/server/src/controllers/item/searchItemsByName.ts
@@ -10,20 +10,15 @@ import { z } from 'zod';
  * @param {Object} res - The response object.
  * @return {Array} An array of items matching the search criteria.
  */
-// const JoiObjectId = (message: any = 'valid id'): z.ZodString =>
-//   z.string().regex(/^[0-9a-fA-F]{24}$/, { message });
-
-// export const searchItemsByName = async (req, res, next) => {
-//   try {
-//     const { name, packId } = req.query;
-
-//     const items = await searchItemsByNameService(name, packId);
-
-//     res.status(200).json(items);
-//   } catch (error) {
-//     next(ItemNotFoundError);
-//   }
-// };
+export const searchItemsByName = async (c) => {
+  try {
+    const { name } = c.req.query();
+    const items = await searchItemsByNameService(name);
+    return c.json({ items }, 200);
+  } catch (error) {
+    return c.json({ error: `Failed to get items: ${error.message}` }, 500);
+  }
+};
 
 export function searchItemsByNameRoute() {
   return protectedProcedure
diff --git a/server/src/routes/index.ts b/server/src/routes/index.ts
index 39eb4da42..f74563ea2 100644
--- a/server/src/routes/index.ts
+++ b/server/src/routes/index.ts
@@ -2,7 +2,7 @@
 // import path from 'path';
 // import csrf from 'csurf';
 // import packRoutes from './packRoutes';
-// import itemRoutes from './itemRoutes';
+import itemRoutes from './itemRoutes';
 // import tripRoutes from './tripRoutes';
 // import weatherRoutes from './weatherRoutes';
 // import geoCodeRoutes from './geoCodeRoutes';
@@ -46,7 +46,7 @@ const router = new Hono();
 // use routes
 router.route('/user', userRoutes);
 // router.use('/pack', packRoutes);
-// router.use('/item', itemRoutes);
+router.route('/item', itemRoutes);
 // router.use('/trip', tripRoutes);
 // router.use('/weather', weatherRoutes);
 // router.use('/geocode', geoCodeRoutes);
diff --git a/server/src/routes/itemRoutes.ts b/server/src/routes/itemRoutes.ts
index 1e7e86116..c8b8bdde8 100644
--- a/server/src/routes/itemRoutes.ts
+++ b/server/src/routes/itemRoutes.ts
@@ -1,16 +1,16 @@
 import { Hono } from 'hono';
 import {
-  getItemsRoute as getItems,
-  getItemByIdRoute as getItemById,
-  addItemRoute as addItem,
-  addItemGlobalRoute as addItemGlobal,
-  editItemRoute as editItem,
-  deleteItemRoute as deleteItem,
-  searchItemsByNameRoute as searchItemsByName,
-  getItemsGloballyRoute as getItemsGlobally,
-  addGlobalItemToPackRoute as addGlobalItemToPack,
-  editGlobalItemAsDuplicateRoute as editGlobalItemAsDuplicate,
-  deleteGlobalItemRoute as deleteGlobalItem,
+  getItems,
+  getItemById,
+  addItem,
+  addItemGlobal,
+  editItem,
+  deleteItem,
+  searchItemsByName,
+  getItemsGlobally,
+  addGlobalItemToPack,
+  editGlobalItemAsDuplicate,
+  deleteGlobalItem,
 } from '../controllers/item/index';
 import * as validator from '@packrat/validations';
 import { tryCatchWrapper } from '../helpers/tryCatchWrapper';
@@ -20,309 +20,83 @@ import { zodParser } from '../middleware/validators/zodParser';
 
 const router = new Hono();
 
-/**
- * @swagger
- * tags:
- *   name: Items
- *   description: item routes
- */
-
-/**
- * @swagger
- * /item/packItems/{packId}:
- *  get:
- *    tags:
- *      - Items
- *    summary: Get items by pack ID
- *    parameters:
- *      - in: path
- *        name: packId
- *        required: true
- *        schema:
- *          type: string
- *    responses:
- *      200:
- *        description: Successful response
- */
 router.get(
   '/packItems/:packId',
-  authTokenMiddleware as any,
-  ((req, res, next) => zodParser(validator.getItems, req.body, next)) as any,
+  zodParser(validator.getItems, 'body'),
   tryCatchWrapper(getItems),
 );
 
-/**
- * @swagger
- * /item/i/{packId}:
- *  get:
- *    tags:
- *      - Items
- *    summary: Get item by item ID
- *    parameters:
- *      - in: path
- *        name: packId
- *        required: true
- *        schema:
- *          type: string
- *    responses:
- *      200:
- *        description: Successful response
- */
 router.get(
   '/i/:packId',
-  authTokenMiddleware as any,
-  ((req, res, next) => zodParser(validator.getItemById, req.body, next)) as any,
+  authTokenMiddleware,
+  zodParser(validator.getItemById, 'body'),
   tryCatchWrapper(getItemById),
 );
 
-/**
- * @swagger
- * /item/search:
- *   get:
- *     tags:
- *       - Items
- *     summary: Search items by name
- *     parameters:
- *       - in: query
- *         name: name
- *         schema:
- *           type: string
- *         description: Text to search for items by name
- *     responses:
- *       200:
- *         description: Successful response
- */
 router.get(
   '/search',
-  authTokenMiddleware as any,
-  checkRole(['user', 'admin']) as any,
+  authTokenMiddleware,
+  checkRole(['user', 'admin']),
   tryCatchWrapper(searchItemsByName),
 );
 
-/**
- * @swagger
- * /item/:
- *  post:
- *    tags:
- *      - Items
- *    summary: Add a new item
- *    requestBody:
- *      required: true
- *      content:
- *        application/json:
- *          schema:
- *            type: object
- *            properties:
- *              name:
- *                type: string
- *              weight:
- *                type: number
- *              quantity:
- *                type: number
- *              unit:
- *                type: string
- *              packId:
- *                type: string
- *    responses:
- *      200:
- *        description: Successful response
- */
 router.post(
   '/',
-  authTokenMiddleware as any,
-  ((req, res, next) => zodParser(validator.addItem, req.body, next)) as any,
+  authTokenMiddleware,
+  zodParser(validator.addItem, 'body'),
   tryCatchWrapper(addItem),
 );
 
-/**
- * @swagger
- * /item/:
- *  put:
- *    tags:
- *      - Items
- *    summary: Edit an existing item
- *    requestBody:
- *      required: true
- *      content:
- *        application/json:
- *          schema:
- *            type: object
- *            properties:
- *              id:
- *                type: string
- *              name:
- *                type: string
- *              weight:
- *                type: number
- *              quantity:
- *                type: number
- *              unit:
- *                type: string
- *    responses:
- *      200:
- *        description: Successful response
- */
 router.put(
   '/',
-  authTokenMiddleware as any,
-  ((req, res, next) => zodParser(validator.editItem, req.body, next)) as any,
+  authTokenMiddleware,
+  zodParser(validator.editItem, 'body'),
   tryCatchWrapper(editItem),
 );
 
-/**
- * @swagger
- * /item/:
- *  delete:
- *    tags:
- *      - Items
- *    summary: Delete an item by ID
- *    requestBody:
- *      required: true
- *      content:
- *        application/json:
- *          schema:
- *            type: object
- *            properties:
- *              id:
- *                type: string
- *    responses:
- *      200:
- *        description: Successful response
- */
 router.delete(
   '/',
-  authTokenMiddleware as any,
-  ((req, res, next) => zodParser(validator.deleteItem, req.body, next)) as any,
+  authTokenMiddleware,
+  zodParser(validator.deleteItem, 'body'),
   tryCatchWrapper(deleteItem),
 );
 
-/**
- * @swagger
- * /item/:
- *  post:
- *    tags:
- *      - Items
- *    summary: Add a item to Global items list
- *    requestBody:
- *      required: true
- *      content:
- *        application/json:
- *          schema:
- *            type: object
- *            properties:
- *              name:
- *                type: string
- *              weight:
- *                type: number
- *              quantity:
- *                type: number
- *              unit:
- *                type: string
- *              type:
- *                type: string
- *    responses:
- *      200:
- *        description: Successful response
- */
 router.post(
   '/global',
-  authTokenMiddleware as any,
-  ((req, res, next) =>
-    zodParser(validator.addItemGlobal, req.body, next)) as any,
+  authTokenMiddleware,
+  zodParser(validator.addItemGlobal, 'body'),
   tryCatchWrapper(addItemGlobal),
 );
 
-/**
- * @swagger
- * /item/:
- *  get:
- *    tags:
- *      - Items
- *    summary: get a item to Global items list
- *    requestBody:
- *      required: false
- *    responses:
- *      200:
- *        description: Successful response
- */
 router.get(
   '/global',
-  authTokenMiddleware as any,
-  checkRole(['user', 'admin']) as any,
-  ((req, res, next) =>
-    zodParser(validator.getItemsGlobally, req.body, next)) as any,
+  authTokenMiddleware,
+  checkRole(['user', 'admin']),
+  zodParser(validator.getItemsGlobally, 'body'),
   tryCatchWrapper(getItemsGlobally),
 );
 
-/**
- * @swagger
- * /item/:
- *  post:
- *    tags:
- *      - Items
- *    summary: add a item to Pack
- *    requestBody:
- *      required: false
- *    responses:
- *      200:
- *        description: Successful response
- */
 router.post(
   '/global/select/:packId',
-  authTokenMiddleware as any,
-  checkRole(['user', 'admin']) as any,
-  ((req, res, next) =>
-    zodParser(validator.addGlobalItemToPack, req.body, next)) as any,
+  authTokenMiddleware,
+  checkRole(['user', 'admin']),
+  zodParser(validator.addGlobalItemToPack, 'body'),
   tryCatchWrapper(addGlobalItemToPack),
 );
-/**
- * @swagger
- * /item/:
- *  post:
- *    tags:
- *      - Items
- *    summary: edit a item in Pack
- *    requestBody:
- *      required: false
- *    responses:
- *      200:
- *        description: Successful response
- */
+
 router.put(
   '/global/:itemId',
-  authTokenMiddleware as any,
-  checkRole(['user', 'admin']) as any,
-  ((req, res, next) =>
-    zodParser(validator.editGlobalItemAsDuplicate, req.body, next)) as any,
+  authTokenMiddleware,
+  checkRole(['user', 'admin']),
+  zodParser(validator.editGlobalItemAsDuplicate, 'body'),
   tryCatchWrapper(editGlobalItemAsDuplicate),
 );
 
-/**
- * @swagger
- * /item/:
- *  delete:
- *    tags:
- *      - Items
- *    summary: Delete an item by ID
- *    requestBody:
- *      required: true
- *      content:
- *        application/json:
- *          schema:
- *            type: object
- *            properties:
- *              id:
- *                type: string
- *    responses:
- *      200:
- *        description: Successful response
- */
 router.delete(
   '/global/:itemId',
-  authTokenMiddleware as any,
-  checkRole(['user', 'admin']) as any,
-  ((req, res, next) =>
-    zodParser(validator.deleteGlobalItem, req.body, next)) as any,
+  authTokenMiddleware,
+  checkRole(['user', 'admin']),
+  zodParser(validator.deleteGlobalItem, 'body'),
   tryCatchWrapper(deleteGlobalItem),
 );
 

From bbed325dbc862aa909848004ef9d2d82a73572da Mon Sep 17 00:00:00 2001
From: pinocchio-life-like <icbr19fl@gmail.com>
Date: Wed, 17 Jul 2024 09:43:40 +0300
Subject: [PATCH 222/257] pack controller done

---
 server/src/controllers/pack/addPack.ts        |  15 +-
 server/src/controllers/pack/deletePack.ts     |  20 +-
 .../controllers/pack/duplicatePublicPack.ts   |  26 +-
 server/src/controllers/pack/editPack.ts       |  32 +--
 server/src/controllers/pack/getPackById.ts    |  21 +-
 server/src/controllers/pack/getPacks.ts       |  24 +-
 server/src/controllers/pack/getPublicPacks.ts |  27 +-
 server/src/controllers/pack/scorePack.ts      |  22 +-
 server/src/routes/index.ts                    |   4 +-
 server/src/routes/packRoutes.ts               | 235 ++----------------
 10 files changed, 109 insertions(+), 317 deletions(-)

diff --git a/server/src/controllers/pack/addPack.ts b/server/src/controllers/pack/addPack.ts
index 51f6cd877..54bb62204 100644
--- a/server/src/controllers/pack/addPack.ts
+++ b/server/src/controllers/pack/addPack.ts
@@ -8,12 +8,15 @@ import { publicProcedure, protectedProcedure } from '../../trpc';
  * @param {Object} res - The HTTP response object.
  * @return {Promise} A promise that resolves to the created pack.
  */
-
-// export const addPack = async (req, res) => {
-//  const { name, owner_id, is_public } = req.body;
-//  const result = await addPackService(name, owner_id, is_public);
-//  res.status(200).json({ msg: 'success', ...result });
-// };
+export const addPack = async (c) => {
+  try {
+    const { name, owner_id, is_public } = await c.req.parseBody();
+    const pack = await addPackService(name, owner_id, is_public);
+    return c.json({ pack }, 200);
+  } catch (error) {
+    return c.json({ error: `Failed to add pack: ${error.message}` }, 500);
+  }
+};
 
 export function addPackRoute() {
   return protectedProcedure.input(validator.addPack).mutation(async (opts) => {
diff --git a/server/src/controllers/pack/deletePack.ts b/server/src/controllers/pack/deletePack.ts
index b99dea8ba..c8fa868bf 100644
--- a/server/src/controllers/pack/deletePack.ts
+++ b/server/src/controllers/pack/deletePack.ts
@@ -7,17 +7,15 @@ import { publicProcedure, protectedProcedure } from '../../trpc';
  * @param {Object} res - The response object.
  * @return {Promise} A promise that resolves with the deletion result.
  */
-// export const deletePack = async (req, res, next) => {
-//   try {
-//     const { packId } = req.body;
-
-//     await deletePackService(packId);
-
-//     res.status(200).json({ msg: 'pack was deleted successfully' });
-//   } catch (error) {
-//     next(UnableToDeletePackError);
-//   }
-// };
+export const deletePack = async (c) => {
+  try {
+    const { packId } = await c.req.parseBody();
+    await deletePackService(packId);
+    return c.json({ msg: 'pack was deleted successfully' }, 200);
+  } catch (error) {
+    return c.json({ error: `Failed to delete pack: ${error.message}` }, 500);
+  }
+};
 
 export function deletePackRoute() {
   return protectedProcedure
diff --git a/server/src/controllers/pack/duplicatePublicPack.ts b/server/src/controllers/pack/duplicatePublicPack.ts
index 81049b6b0..93b77d4a0 100644
--- a/server/src/controllers/pack/duplicatePublicPack.ts
+++ b/server/src/controllers/pack/duplicatePublicPack.ts
@@ -8,20 +8,18 @@ import { publicProcedure, protectedProcedure } from '../../trpc';
  * @param {Object} res - the response object
  * @return {Promise} - a promise that resolves with the duplicated pack
  */
-// export const duplicatePublicPack = async (req, res, next) => {
-//   try {
-//     const { packId, ownerId, items } = req.body;
-
-//     const result = await duplicatePublicPackService(packId, ownerId, items);
-
-//     res.status(200).json({
-//       msg: 'pack was duplicated successfully',
-//       data: result.pack,
-//     });
-//   } catch (error) {
-//     next(UnableToDuplicatePackError);
-//   }
-// };
+export const duplicatePublicPack = async (c) => {
+  try {
+    const { packId, ownerId, items } = await c.req.parseBody();
+    const result = await duplicatePublicPackService(packId, ownerId, items);
+    return c.json({ result }, 200);
+  } catch (error) {
+    return c.json(
+      { error: `Failed to duplicate public pack: ${error.message}` },
+      500,
+    );
+  }
+};
 
 export function duplicatePublicPackRoute() {
   return protectedProcedure
diff --git a/server/src/controllers/pack/editPack.ts b/server/src/controllers/pack/editPack.ts
index 7fbece236..048eee4e3 100644
--- a/server/src/controllers/pack/editPack.ts
+++ b/server/src/controllers/pack/editPack.ts
@@ -1,28 +1,16 @@
-import { publicProcedure, protectedProcedure } from '../../trpc';
-import { UnableToEditPackError } from '../../helpers/errors';
-import { responseHandler } from '../../helpers/responseHandler';
+import { protectedProcedure } from '../../trpc';
 import { editPackService } from '../../services/pack/pack.service';
 import * as validator from '@packrat/validations';
 
-/**
- * Edits a pack in the database.
- * @param {Object} req - The request object.
- * @param {Object} res - The response object.
- * @return {Object} The updated pack.
- */
-
-// export const editPack = async (req, res, next) => {
-//   try {
-//     const { id } = req.body;
-
-//     const newPack = await editPackService(id, req.body);
-
-//     res.locals.data = newPack;
-//     responseHandler(res);
-//   } catch (error) {
-//     next(UnableToEditPackError);
-//   }
-// };
+export const editPack = async (c) => {
+  try {
+    const packData = await c.req.parseBody();
+    const pack = await editPackService(packData);
+    return c.json({ pack }, 200);
+  } catch (error) {
+    return c.json({ error: `Failed to edit pack: ${error.message}` }, 500);
+  }
+};
 
 export function editPackRoute() {
   return protectedProcedure.input(validator.editPack).mutation(async (opts) => {
diff --git a/server/src/controllers/pack/getPackById.ts b/server/src/controllers/pack/getPackById.ts
index a2b725863..73a49414a 100644
--- a/server/src/controllers/pack/getPackById.ts
+++ b/server/src/controllers/pack/getPackById.ts
@@ -8,18 +8,15 @@ import * as validator from '@packrat/validations';
  * @param {Object} res - The response object.
  * @return {Object} The pack object as a JSON response.
  */
-// export const getPackById = async (req, res, next) => {
-//   try {
-//     const { packId } = req.params;
-
-//     const pack = await getPackByIdService(packId);
-
-//     res.locals.data = pack;
-//     responseHandler(res);
-//   } catch (error) {
-//     next(PackNotFoundError);
-//   }
-// };
+export const getPackById = async (c) => {
+  try {
+    const { packId } = await c.req.parseParams();
+    const pack = await getPackByIdService(packId);
+    return c.json({ pack }, 200);
+  } catch (error) {
+    return c.json({ error: `Failed to get pack: ${error.message}` }, 500);
+  }
+};
 
 export function getPackByIdRoute() {
   return protectedProcedure.input(validator.getPackById).query(async (opts) => {
diff --git a/server/src/controllers/pack/getPacks.ts b/server/src/controllers/pack/getPacks.ts
index f9a81757f..c951f36f8 100644
--- a/server/src/controllers/pack/getPacks.ts
+++ b/server/src/controllers/pack/getPacks.ts
@@ -8,21 +8,15 @@ import * as validator from '@packrat/validations';
  * @param {Object} res - Express response object.
  * @return {Promise} - Array of packs.
  */
-// export const getPacks = async (req, res, next) => {
-//   try {
-//     const { ownerId } = req.params;
-//     const { queryBy } = req.query;
-
-//     const packs = await getPacksService(ownerId, queryBy);
-
-//     res.locals.data = packs;
-
-//     const message = 'Packs retrieved successfully';
-//     responseHandler(res, message);
-//   } catch (error) {
-//     next(PackNotFoundError);
-//   }
-// };
+export const getPacks = async (c) => {
+  try {
+    const { ownerId, queryBy } = await c.req.parseQuery();
+    const packs = await getPacksService(ownerId, queryBy);
+    return c.json({ packs, message: 'Packs retrieved successfully' }, 200);
+  } catch (error) {
+    return c.json({ error: `Failed to get packs: ${error.message}` }, 500);
+  }
+};
 
 export function getPacksRoute() {
   return protectedProcedure.input(validator.getPacks).query(async (opts) => {
diff --git a/server/src/controllers/pack/getPublicPacks.ts b/server/src/controllers/pack/getPublicPacks.ts
index 9d935ef59..36f73a3e8 100644
--- a/server/src/controllers/pack/getPublicPacks.ts
+++ b/server/src/controllers/pack/getPublicPacks.ts
@@ -8,18 +8,21 @@ import { z } from 'zod';
  * @param {Object} res - the response object
  * @return {Promise} - a promise that resolves with the retrieved public packs
  */
-// export const getPublicPacks = async (req, res, next) => {
-//   try {
-//     const { queryBy } = req.query;
-
-//     const publicPacks = await getPublicPacksService(queryBy);
-
-//     res.locals.data = publicPacks;
-//     responseHandler(res);
-//   } catch (error) {
-//     next(PackNotFoundError);
-//   }
-// };
+export const getPublicPacks = async (c) => {
+  try {
+    const { queryBy } = await c.req.parseQuery();
+    const packs = await getPublicPacksService(queryBy);
+    return c.json(
+      { packs, message: 'Public packs retrieved successfully' },
+      200,
+    );
+  } catch (error) {
+    return c.json(
+      { error: `Failed to get public packs: ${error.message}` },
+      500,
+    );
+  }
+};
 
 export function getPublicPacksRoute() {
   return protectedProcedure
diff --git a/server/src/controllers/pack/scorePack.ts b/server/src/controllers/pack/scorePack.ts
index 2f2da42e3..100766dca 100644
--- a/server/src/controllers/pack/scorePack.ts
+++ b/server/src/controllers/pack/scorePack.ts
@@ -8,19 +8,15 @@ import * as validator from '@packrat/validations';
  * @param {Object} res - The response object used to send the response.
  * @return {Promise} A promise that resolves to the updated pack object or an error message.
  */
-// export const scorePack = async (req, res, next) => {
-//   try {
-//     const { packId } = req.params;
-
-//     const updatedPack = await scorePackService(packId);
-
-//     console.log('updatedPack', updatedPack);
-
-//     res.status(200).json({ msg: 'Pack was scored successfully', updatedPack });
-//   } catch (error) {
-//     next(UnableToScorePackError);
-//   }
-// };
+export const scorePack = async (c) => {
+  try {
+    const { packId } = await c.req.parseParams();
+    const pack = await scorePackService(packId);
+    return c.json({ pack }, 200);
+  } catch (error) {
+    return c.json({ error: `Failed to score pack: ${error.message}` }, 500);
+  }
+};
 
 export function scorePackRoute() {
   return protectedProcedure
diff --git a/server/src/routes/index.ts b/server/src/routes/index.ts
index f74563ea2..7d00b62c1 100644
--- a/server/src/routes/index.ts
+++ b/server/src/routes/index.ts
@@ -1,7 +1,7 @@
 // import express, { type Request, type Response } from 'express';
 // import path from 'path';
 // import csrf from 'csurf';
-// import packRoutes from './packRoutes';
+import packRoutes from './packRoutes';
 import itemRoutes from './itemRoutes';
 // import tripRoutes from './tripRoutes';
 // import weatherRoutes from './weatherRoutes';
@@ -45,7 +45,7 @@ const router = new Hono();
 
 // use routes
 router.route('/user', userRoutes);
-// router.use('/pack', packRoutes);
+router.route('/pack', packRoutes);
 router.route('/item', itemRoutes);
 // router.use('/trip', tripRoutes);
 // router.use('/weather', weatherRoutes);
diff --git a/server/src/routes/packRoutes.ts b/server/src/routes/packRoutes.ts
index a2e1eeaea..ff27e0926 100644
--- a/server/src/routes/packRoutes.ts
+++ b/server/src/routes/packRoutes.ts
@@ -1,13 +1,13 @@
 import { Hono } from 'hono';
 import {
-  getPacksRoute as getPacks,
-  getPackByIdRoute as getPackById,
-  addPackRoute as addPack,
-  editPackRoute as editPack,
-  deletePackRoute as deletePack,
-  getPublicPacksRoute as getPublicPacks,
-  scorePackRoute as scorePack,
-  duplicatePublicPackRoute as duplicatePublicPack,
+  getPacks,
+  getPackById,
+  addPack,
+  editPack,
+  deletePack,
+  getPublicPacks,
+  scorePack,
+  duplicatePublicPack,
 } from '../controllers/pack/index';
 import * as validator from '@packrat/validations';
 import { tryCatchWrapper } from '../helpers/tryCatchWrapper';
@@ -17,245 +17,60 @@ import { zodParser } from '../middleware/validators/zodParser';
 
 const router = new Hono();
 
-/**
- * @swagger
- * tags:
- *   name: Packs
- *   description: Pack routes
- */
-
-/**
- * @swagger
- * /pack:
- *   get:
- *     summary: Get public packs
- *     tags: [Packs]
- *     responses:
- *       '200':
- *         description: Successful response with public packs
- *       '500':
- *         description: Error retrieving public packs
- */
 router.get(
   '/',
-  authTokenMiddleware as any,
-  checkRole(['user', 'admin']) as any,
+  authTokenMiddleware,
+  checkRole(['user', 'admin']),
   tryCatchWrapper(getPublicPacks),
 );
 
-/**
- * @swagger
- * /pack/{ownerId}:
- *   get:
- *     summary: Get packs by owner ID
- *     tags: [Packs]
- *     parameters:
- *       - in: path
- *         name: ownerId
- *         schema:
- *           type: string
- *         required: true
- *         description: The ID of the owner
- *     responses:
- *       '200':
- *         description: Successful response with packs by owner ID
- *       '400':
- *         description: Invalid request parameters
- *       '500':
- *         description: Error retrieving packs by owner ID
- */
 router.get(
   '/:ownerId',
-  authTokenMiddleware as any,
-  checkRole(['user', 'admin']) as any,
-  ((req, res, next) => zodParser(validator.getPacks, req.params, next)) as any,
+  authTokenMiddleware,
+  checkRole(['user', 'admin']),
+  zodParser(validator.getPacks, 'query'),
   tryCatchWrapper(getPacks),
 );
 
-/**
- * @swagger
- * /pack/p/{packId}:
- *   get:
- *     summary: Get pack by ID
- *     tags: [Packs]
- *     parameters:
- *       - in: path
- *         name: packId
- *         schema:
- *           type: string
- *         required: true
- *         description: The ID of the pack
- *     responses:
- *       '200':
- *         description: Successful response with pack by ID
- *       '400':
- *         description: Invalid request parameters
- *       '500':
- *         description: Error retrieving pack by ID
- */
 router.get(
   '/p/:packId',
-  authTokenMiddleware as any,
-  ((req, res, next) =>
-    zodParser(validator.getPackById, req.params, next)) as any,
+  authTokenMiddleware,
+  zodParser(validator.getPackById, 'params'),
   tryCatchWrapper(getPackById),
 );
 
-/**
- * @swagger
- * /pack/score/{packId}:
- *   put:
- *     summary: Score a pack
- *     tags: [Packs]
- *     parameters:
- *       - in: path
- *         name: packId
- *         schema:
- *           type: string
- *         required: true
- *         description: The ID of the pack
- *     responses:
- *       '200':
- *         description: Successful response after scoring the pack
- *       '400':
- *         description: Invalid request parameters
- *       '500':
- *         description: Error scoring the pack
- */
 router.put(
   '/score/:packId',
-  authTokenMiddleware as any,
-  ((req, res, next) =>
-    zodParser(validator.getPackById, req.params, next)) as any,
+  authTokenMiddleware,
+  zodParser(validator.getPackById, 'params'),
   tryCatchWrapper(scorePack),
 );
 
-/**
- * @swagger
- * /pack:
- *   post:
- *     summary: Add a pack
- *     tags: [Packs]
- *     requestBody:
- *       required: true
- *       content:
- *         application/json:
- *           schema:
- *             type: object
- *             properties:
- *               name:
- *                 type: string
- *               owner_id:
- *                 type: string
- *               is_public:
- *                 type: boolean
- *     responses:
- *       '200':
- *         description: Successful response after adding the pack
- *       '400':
- *         description: Invalid request parameters
- *       '500':
- *         description: Error adding the pack
- */
 router.post(
   '/',
-  authTokenMiddleware as any,
-  ((req, res, next) => zodParser(validator.addPack, req.body, next)) as any,
+  authTokenMiddleware,
+  zodParser(validator.addPack, 'body'),
   tryCatchWrapper(addPack),
 );
 
-/**
- * @swagger
- * /pack:
- *   put:
- *     summary: Edit a pack
- *     tags: [Packs]
- *     requestBody:
- *       required: true
- *       content:
- *         application/json:
- *           schema:
- *             type: object
- *             properties:
- *               id:
- *                 type: string
- *               name:
- *                 type: string
- *               is_public:
- *                 type: boolean
- *     responses:
- *       '200':
- *         description: Successful response after editing the pack
- *       '400':
- *         description: Invalid request parameters
- *       '500':
- *         description: Error editing the pack
- */
 router.put(
   '/',
-  authTokenMiddleware as any,
-  ((req, res, next) => zodParser(validator.editPack, req.body, next)) as any,
+  authTokenMiddleware,
+  zodParser(validator.editPack, 'body'),
   tryCatchWrapper(editPack),
 );
 
-/**
- * @swagger
- * /pack:
- *   delete:
- *     summary: Delete a pack
- *     tags: [Packs]
- *     requestBody:
- *       required: true
- *       content:
- *         application/json:
- *           schema:
- *             type: object
- *             properties:
- *               packId:
- *                 type: string
- *     responses:
- *       '200':
- *         description: Successful response after deleting the pack
- *       '400':
- *         description: Invalid request parameters
- *       '500':
- *         description: Error deleting the pack
- */
 router.delete(
   '/',
-  authTokenMiddleware as any,
-  ((req, res, next) => zodParser(validator.deletePack, req.body, next)) as any,
+  authTokenMiddleware,
+  zodParser(validator.deletePack, 'body'),
   tryCatchWrapper(deletePack),
 );
 
-/**
- * @swagger
- * /pack:
- *   post:
- *     summary: Duplicate a public pack
- *     tags: [Pack]
- *     requestBody:
- *       required: true
- *       content:
- *         application/json:
- *           schema:
- *             type: object
- *             properties:
- *               packId:
- *                 type: string
- *     responses:
- *       '200':
- *         description: Successful response after duplicating the pack
- *       '400':
- *         description: Invalid request parameters
- *       '500':
- *         description: Error duplicating the pack
- */
 router.post(
   '/duplicate',
-  authTokenMiddleware as any,
-  ((req, res, next) =>
-    zodParser(validator.duplicatePublicPack, req.body, next)) as any,
+  authTokenMiddleware,
+  zodParser(validator.duplicatePublicPack, 'body'),
   tryCatchWrapper(duplicatePublicPack),
 );
 

From 8f4f5af9cf444f291032ba3a5d1a54ed48ef5814 Mon Sep 17 00:00:00 2001
From: pinocchio-life-like <icbr19fl@gmail.com>
Date: Wed, 17 Jul 2024 09:53:09 +0300
Subject: [PATCH 223/257] resolve conflict

---
 server/src/routes/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/server/src/routes/index.ts b/server/src/routes/index.ts
index 670043bc4..292ef1d4b 100644
--- a/server/src/routes/index.ts
+++ b/server/src/routes/index.ts
@@ -63,7 +63,7 @@ router.route('/mapPreview', mapPreviewRouter);
 router.route('/health', healthRoutes);
 
 const helloRouter = new Hono();
-helloRouter.get('/', (c: Context, next: Next) => {
+helloRouter.get('/', (c) => {
   return c.text('Hello, world!');
 });
 router.route('/hello', helloRouter);

From 9bb9ad1d3b3f91c8c7b5d9fa83c36b1e06cc49b2 Mon Sep 17 00:00:00 2001
From: pinocchio-life-like <icbr19fl@gmail.com>
Date: Wed, 17 Jul 2024 10:05:04 +0300
Subject: [PATCH 224/257] trip controllers done

---
 server/src/controllers/trip/addTrip.ts        |  46 +----
 server/src/controllers/trip/deleteTrip.ts     |  29 +--
 server/src/controllers/trip/editTrip.ts       |  33 ++--
 server/src/controllers/trip/getPublicTrips.ts |  27 ++-
 server/src/controllers/trip/getTrip.ts        |  21 +-
 server/src/controllers/trip/getTripById.ts    |  20 +-
 server/src/routes/index.ts                    |   4 +-
 server/src/routes/tripRoutes.ts               | 183 ++----------------
 8 files changed, 73 insertions(+), 290 deletions(-)

diff --git a/server/src/controllers/trip/addTrip.ts b/server/src/controllers/trip/addTrip.ts
index b21a705f8..e14d0e633 100644
--- a/server/src/controllers/trip/addTrip.ts
+++ b/server/src/controllers/trip/addTrip.ts
@@ -7,44 +7,14 @@ import * as validator from '@packrat/validations';
  * @param {Object} res - The response object.
  * @return {Promise} A promise that resolves to a success message or rejects with an error message.
  */
-// export const addTrip = async (req, res, next) => {
-//   try {
-//     const {
-//       name,
-//       description,
-//       duration,
-//       weather,
-//       start_date,
-//       end_date,
-//       destination,
-//       geoJSON,
-//       owner_id,
-//       packs,
-//       is_public,
-//     } = req.body;
-
-//     const tripDetails = {
-//       name,
-//       description,
-//       duration,
-//       weather,
-//       start_date,
-//       end_date,
-//       destination,
-//       geoJSON,
-//       owner_id,
-//       packs,
-//       is_public,
-//     };
-
-//     const result = await addTripService(tripDetails);
-
-//     res.locals.data = result;
-//     responseHandler(res);
-//   } catch (error) {
-//     next(UnableToAddTripError);
-//   }
-// };
+export const addTrip = async (c) => {
+  try {
+    const tripData = await c.req.parseBody();
+    return await addTripService(tripData);
+  } catch (error) {
+    return c.json({ error: `Failed to add trip: ${error.message}` }, 500);
+  }
+};
 
 export function addTripRoute() {
   return protectedProcedure.input(validator.addTrip).mutation(async (opts) => {
diff --git a/server/src/controllers/trip/deleteTrip.ts b/server/src/controllers/trip/deleteTrip.ts
index af736d240..b7609f5d0 100644
--- a/server/src/controllers/trip/deleteTrip.ts
+++ b/server/src/controllers/trip/deleteTrip.ts
@@ -2,25 +2,16 @@ import { publicProcedure, protectedProcedure } from '../../trpc';
 import * as validator from '@packrat/validations';
 import { Trip } from '../../drizzle/methods/trip';
 
-// import { prisma } from '../../prisma';
-/**
- * Deletes a trip from the database.
- * @param {Object} req - The request object.
- * @param {Object} res - The response object.
- * @return {Promise} A promise that resolves to a JSON object containing a success message if the trip was deleted successfully, or an error message if the trip could not be deleted.
- */
-// export const deleteTrip = async (req, res, next) => {
-//   try {
-//     const { tripId } = req.body;
-
-//     await prisma.trip.delete({
-//       where: { id: tripId }, // Assuming tripId is the ID of the trip to delete
-//     });
-//     res.status(200).json({ msg: 'trip was deleted successfully' });
-//   } catch (error) {
-//     next(UnableToDeleteTripError);
-//   }
-// };
+export const deleteTrip = async (c) => {
+  try {
+    const { tripId } = await c.req.parseBody();
+    const tripClass = new Trip();
+    await tripClass.delete(tripId);
+    return c.json({ message: 'trip was deleted successfully' }, 200);
+  } catch (error) {
+    return c.json({ error: `Failed to delete trip: ${error.message}` }, 500);
+  }
+};
 
 export function deleteTripRoute() {
   return protectedProcedure
diff --git a/server/src/controllers/trip/editTrip.ts b/server/src/controllers/trip/editTrip.ts
index d4ba51a6d..01147120a 100644
--- a/server/src/controllers/trip/editTrip.ts
+++ b/server/src/controllers/trip/editTrip.ts
@@ -1,8 +1,4 @@
-import { publicProcedure, protectedProcedure } from '../../trpc';
-import { UnableToEditTripError } from '../../helpers/errors';
-import { responseHandler } from '../../helpers/responseHandler';
-
-// import { prisma } from '../../prisma';
+import { protectedProcedure } from '../../trpc';
 import * as validator from '@packrat/validations';
 import { Trip } from '../../drizzle/methods/trip';
 
@@ -12,23 +8,16 @@ import { Trip } from '../../drizzle/methods/trip';
  * @param {Object} res - The response object.
  * @return {Object} The updated trip object.
  */
-// export const editTrip = async (req, res, next) => {
-//   try {
-//     const { id } = req.body;
-//     const newTrip = await prisma.trip.update({
-//       where: { id: id }, // Assuming id is the ID of the trip to update
-//       data: req.body,
-//       include: {
-//         packs: true, // Fetch associated packs
-//       },
-//     });
-
-//     res.locals.data = newTrip;
-//     responseHandler(res);
-//   } catch (error) {
-//     next(UnableToEditTripError);
-//   }
-// };
+export const editTrip = async (c) => {
+  try {
+    const tripData = await c.req.parseBody();
+    const tripClass = new Trip();
+    const trip = await tripClass.update(tripData);
+    return c.json({ trip }, 200);
+  } catch (error) {
+    return c.json({ error: `Failed to edit trip: ${error.message}` }, 500);
+  }
+};
 
 export function editTripRoute() {
   return protectedProcedure.input(validator.editTrip).mutation(async (opts) => {
diff --git a/server/src/controllers/trip/getPublicTrips.ts b/server/src/controllers/trip/getPublicTrips.ts
index bd75c95a8..d983c774f 100644
--- a/server/src/controllers/trip/getPublicTrips.ts
+++ b/server/src/controllers/trip/getPublicTrips.ts
@@ -1,6 +1,5 @@
-import { publicProcedure, protectedProcedure } from '../../trpc';
+import { protectedProcedure } from '../../trpc';
 import { getPublicTripsService } from '../../services/trip/getPublicTripService';
-import * as validator from '@packrat/validations';
 import { z } from 'zod';
 
 /**
@@ -9,18 +8,18 @@ import { z } from 'zod';
  * @param {object} res - The response object.
  * @return {object} The public trips as a JSON response.
  */
-// export const getPublicTrips = async (req, res, next) => {
-//   try {
-//     const { queryBy } = req.query;
-
-//     const publicTrips = await getPublicTripsService(queryBy);
-
-//     res.locals.data = publicTrips;
-//     responseHandler(res);
-//   } catch (error) {
-//     next(TripNotFoundError);
-//   }
-// };
+export const getPublicTrips = async (c) => {
+  try {
+    const { queryBy } = await c.req.parseBody();
+    const trips = await getPublicTripsService(queryBy);
+    return c.json({ trips }, 200);
+  } catch (error) {
+    return c.json(
+      { error: `Failed to get public trips: ${error.message}` },
+      500,
+    );
+  }
+};
 
 export function getPublicTripsRoute() {
   return protectedProcedure
diff --git a/server/src/controllers/trip/getTrip.ts b/server/src/controllers/trip/getTrip.ts
index acb0ee75e..687ba830c 100644
--- a/server/src/controllers/trip/getTrip.ts
+++ b/server/src/controllers/trip/getTrip.ts
@@ -8,18 +8,15 @@ import * as validator from '@packrat/validations';
  * @param {Object} res - The response object.
  * @return {Promise<void>} The trips owned by the specified owner.
  */
-// export const getTrips = async (req, res, next) => {
-//   try {
-//     const { ownerId } = req.params;
-
-//     const trips = await getTripsService(ownerId);
-
-//     res.locals.data = trips;
-//     responseHandler(res);
-//   } catch (error) {
-//     next(TripNotFoundError);
-//   }
-// };
+export const getTrips = async (c) => {
+  try {
+    const { owner_id } = await c.req.parseParams();
+    const trips = await getTripsService(owner_id);
+    return c.json({ trips }, 200);
+  } catch (error) {
+    return c.json({ error: `Failed to get trips: ${error.message}` }, 500);
+  }
+};
 
 export function getTripsRoute() {
   return protectedProcedure.input(validator.getTrips).query(async (opts) => {
diff --git a/server/src/controllers/trip/getTripById.ts b/server/src/controllers/trip/getTripById.ts
index 1aa7e2c21..93e3bf9fc 100644
--- a/server/src/controllers/trip/getTripById.ts
+++ b/server/src/controllers/trip/getTripById.ts
@@ -7,18 +7,14 @@ import * as validator from '@packrat/validations';
  * @param {Object} res - The response object.
  * @return {Promise} A promise that resolves to the trip details.
  */
-// export const getTripById = async (req, res, next) => {
-//   try {
-//     const { tripId } = req.params;
-
-//     const tripDetails = await getTripByIdService(tripId);
-
-//     res.locals.data = tripDetails;
-//     responseHandler(res);
-//   } catch (error) {
-//     next(TripNotFoundError);
-//   }
-// };
+export const getTripById = async (c) => {
+  try {
+    const { tripId } = await c.req.parseParams();
+    return await getTripByIdService(tripId);
+  } catch (error) {
+    return c.json({ error: `Failed to get trip: ${error.message}` }, 500);
+  }
+};
 
 export function getTripByIdRoute() {
   return protectedProcedure.input(validator.getTripById).query(async (opts) => {
diff --git a/server/src/routes/index.ts b/server/src/routes/index.ts
index 292ef1d4b..4ec4b6243 100644
--- a/server/src/routes/index.ts
+++ b/server/src/routes/index.ts
@@ -3,7 +3,7 @@
 // import csrf from 'csurf';
 import packRoutes from './packRoutes';
 import itemRoutes from './itemRoutes';
-// import tripRoutes from './tripRoutes';
+import tripRoutes from './tripRoutes';
 // import weatherRoutes from './weatherRoutes';
 // import geoCodeRoutes from './geoCodeRoutes';
 // import getParkRoutes from './getParkRoutes';
@@ -48,7 +48,7 @@ const router = new Hono();
 router.route('/user', userRoutes);
 router.route('/pack', packRoutes);
 router.route('/item', itemRoutes);
-// router.use('/trip', tripRoutes);
+router.route('/trip', tripRoutes);
 // router.use('/weather', weatherRoutes);
 // router.use('/geocode', geoCodeRoutes);
 // router.use('/getparks', getParkRoutes);
diff --git a/server/src/routes/tripRoutes.ts b/server/src/routes/tripRoutes.ts
index 804ae707f..8d02255b9 100644
--- a/server/src/routes/tripRoutes.ts
+++ b/server/src/routes/tripRoutes.ts
@@ -1,11 +1,11 @@
 import { Hono } from 'hono';
 import {
-  getPublicTripsRoute as getPublicTrips,
-  getTripsRoute as getTrips,
-  getTripByIdRoute as getTripById,
-  addTripRoute as addTrip,
-  editTripRoute as editTrip,
-  deleteTripRoute as deleteTrip,
+  getPublicTrips,
+  getTrips,
+  getTripById,
+  addTrip,
+  editTrip,
+  deleteTrip,
 } from '../controllers/trip/index';
 import * as validator from '@packrat/validations';
 import { tryCatchWrapper } from '../helpers/tryCatchWrapper';
@@ -15,204 +15,45 @@ import { zodParser } from '../middleware/validators/zodParser';
 
 const router = new Hono();
 
-/**
- * @swagger
- * tags:
- *   name: Trips
- *   description: Trip routes
- */
-
-/**
- * @swagger
- * /trip:
- *   get:
- *     tags:
- *      - Trips
- *     summary: Get public trips
- *     responses:
- *       200:
- *         description: Successful response
- */
 router.get(
   '/',
   authTokenMiddleware as any,
-  checkRole(['user', 'admin']) as any,
+  checkRole(['user', 'admin']),
   tryCatchWrapper(getPublicTrips),
 );
 
-/**
- * @swagger
- * /trip/{ownerId}:
- *   get:
- *     tags:
- *       - Trips
- *     summary: Get trips by owner ID
- *     parameters:
- *       - in: path
- *         name: ownerId
- *         required: true
- *         schema:
- *           type: string
- *     responses:
- *       200:
- *         description: Successful response
- */
 router.get(
   '/:ownerId',
   authTokenMiddleware as any,
-  ((req, res, next) => zodParser(validator.getTrips, req.params, next)) as any,
+  zodParser(validator.getTrips, 'params'),
   tryCatchWrapper(getTrips),
 );
 
-/**
- * @swagger
- * /trip/t/{tripId}:
- *   get:
- *     tags:
- *       - Trips
- *     summary: Get trip by trip ID
- *     parameters:
- *       - in: path
- *         name: tripId
- *         required: true
- *         schema:
- *           type: string
- *     responses:
- *       200:
- *         description: Successful response
- */
 router.get(
   '/t/:tripId',
   authTokenMiddleware as any,
-  ((req, res, next) =>
-    zodParser(validator.getTripById, req.params, next)) as any,
+  zodParser(validator.getTripById, 'params'),
   tryCatchWrapper(getTripById),
 );
 
-/**
- * @swagger
- * /trip:
- *   post:
- *     tags:
- *       - Trips
- *     summary: Add a new trip
- *     requestBody:
- *       required: true
- *       content:
- *         application/json:
- *           schema:
- *             type: object
- *             properties:
- *               name:
- *                 type: string
- *               description:
- *                 type: string
- *               duration:
- *                 type: string
- *               weather:
- *                 type: string
- *               start_date:
- *                 type: string
- *               end_date:
- *                 type: string
- *               destination:
- *                 type: string
- *               trail:
- *                 type: string
- *               owner_id:
- *                 type: string
- *               packs:
- *                 type: array
- *                 items:
- *                   type: string
- *               is_public:
- *                 type: boolean
- *     responses:
- *       200:
- *         description: Successful response
- */
 router.post(
   '/',
   authTokenMiddleware as any,
-  ((req, res, next) => zodParser(validator.addTrip, req.body, next)) as any,
+  zodParser(validator.addTrip, 'body'),
   tryCatchWrapper(addTrip),
 );
 
-/**
- * @swagger
- * /trip:
- *   put:
- *     tags:
- *       - Trips
- *     summary: Edit an existing trip
- *     requestBody:
- *       required: true
- *       content:
- *         application/json:
- *           schema:
- *             type: object
- *             properties:
- *               id:
- *                 type: string
- *               name:
- *                 type: string
- *               description:
- *                 type: string
- *               duration:
- *                 type: string
- *               weather:
- *                 type: string
- *               start_date:
- *                 type: string
- *               end_date:
- *                 type: string
- *               destination:
- *                 type: string
- *               trail:
- *                 type: string
- *               owner_id:
- *                 type: string
- *               packs:
- *                 type: array
- *                 items:
- *                   type: string
- *               is_public:
- *                 type: boolean
- *     responses:
- *       200:
- *         description: Successful response
- */
 router.put(
   '/',
   authTokenMiddleware as any,
-  ((req, res, next) => zodParser(validator.editTrip, req.body, next)) as any,
+  zodParser(validator.editTrip, 'body'),
   tryCatchWrapper(editTrip),
 );
 
-/**
- * @swagger
- * /trip:
- *   delete:
- *     tags:
- *       - Trips
- *     summary: Delete a trip by ID
- *     requestBody:
- *       required: true
- *       content:
- *         application/json:
- *           schema:
- *             type: object
- *             properties:
- *               tripId:
- *                 type: string
- *     responses:
- *       200:
- *         description: Successful response
- */
 router.delete(
   '/',
   authTokenMiddleware as any,
-  ((req, res, next) => zodParser(validator.deleteTrip, req.body, next)) as any,
+  zodParser(validator.deleteTrip, 'body'),
   tryCatchWrapper(deleteTrip),
 );
 

From fd292170bec71528508ce767702cfc297722ea5f Mon Sep 17 00:00:00 2001
From: pinocchio-life-like <icbr19fl@gmail.com>
Date: Wed, 17 Jul 2024 10:08:31 +0300
Subject: [PATCH 225/257] weather controller done

---
 server/src/controllers/weather/getWeather.ts | 31 ++++++---------
 server/src/routes/index.ts                   |  4 +-
 server/src/routes/weatherRoutes.ts           | 42 +-------------------
 3 files changed, 16 insertions(+), 61 deletions(-)

diff --git a/server/src/controllers/weather/getWeather.ts b/server/src/controllers/weather/getWeather.ts
index d4dd29bce..9e6c7ff1b 100644
--- a/server/src/controllers/weather/getWeather.ts
+++ b/server/src/controllers/weather/getWeather.ts
@@ -1,25 +1,20 @@
 import { getWeatherService } from '../../services/weather/getWeatherService';
-import { RetrievingWeatherFromOpenWeatherError } from '../../helpers/errors';
-import { responseHandler } from '../../helpers/responseHandler';
 import { publicProcedure } from '../../trpc';
 import { z } from 'zod';
 
-// /**
-//  * Retrieves weather data from OpenWeather API based on latitude and longitude.
-//  * @param {Object} req - The request object.
-//  * @param {Object} res - The response object.
-//  * @return {Object} The weather data retrieved from OpenWeather API.
-//  */
-// export const getWeather = async (req, res, next) => {
-//   try {
-//     const response = await getWeatherService(req.query.lat, req.query.lon);
-//     res.locals.data = response.data;
-//     responseHandler(res);
-//   } catch (error) {
-//     // send back error message
-//     next(RetrievingWeatherFromOpenWeatherError);
-//   }
-// };
+export const getWeather = async (c) => {
+  try {
+    const { lat, lon } = await c.req.parseBody();
+    return await getWeatherService(
+      c.env.WEATHER_URL,
+      c.env.OPENWEATHER_KEY,
+      lat,
+      lon,
+    );
+  } catch (error) {
+    return c.json({ error: `Failed to get weather: ${error.message}` }, 500);
+  }
+};
 
 export function getWeatherRoute() {
   return publicProcedure
diff --git a/server/src/routes/index.ts b/server/src/routes/index.ts
index 4ec4b6243..171142c2b 100644
--- a/server/src/routes/index.ts
+++ b/server/src/routes/index.ts
@@ -4,7 +4,7 @@
 import packRoutes from './packRoutes';
 import itemRoutes from './itemRoutes';
 import tripRoutes from './tripRoutes';
-// import weatherRoutes from './weatherRoutes';
+import weatherRoutes from './weatherRoutes';
 // import geoCodeRoutes from './geoCodeRoutes';
 // import getParkRoutes from './getParkRoutes';
 // import getTrailRoutes from './getTrailRoutes';
@@ -49,7 +49,7 @@ router.route('/user', userRoutes);
 router.route('/pack', packRoutes);
 router.route('/item', itemRoutes);
 router.route('/trip', tripRoutes);
-// router.use('/weather', weatherRoutes);
+router.route('/weather', weatherRoutes);
 // router.use('/geocode', geoCodeRoutes);
 // router.use('/getparks', getParkRoutes);
 // router.use('/gettrails', getTrailRoutes);
diff --git a/server/src/routes/weatherRoutes.ts b/server/src/routes/weatherRoutes.ts
index e71c7f2cc..5f93e4941 100644
--- a/server/src/routes/weatherRoutes.ts
+++ b/server/src/routes/weatherRoutes.ts
@@ -1,50 +1,10 @@
 import { Hono } from 'hono';
-import {
-  getWeatherWeekRoute as getWeatherWeek,
-  getWeatherRoute as getWeather,
-} from '../controllers/weather/index';
+import { getWeatherRoute as getWeather } from '../controllers/weather/index';
 import authTokenMiddleware from '../middleware/auth';
 import { tryCatchWrapper } from '../helpers/tryCatchWrapper';
 
 const router = new Hono();
 
-/**
- * @swagger
- * tags:
- *   name: Weather
- *   description: Weather routes
- */
-
-/**
- * @swagger
- * /weather:
- *   get:
- *     summary: Get current weather
- *     tags: [Weather]
- *     responses:
- *       '200':
- *         description: Successful response with current weather
- *       '500':
- *         description: Error retrieving current weather
- */
 router.get('/', authTokenMiddleware as any, tryCatchWrapper(getWeather));
 
-/**
- * @swagger
- * /weather/week:
- *   get:
- *     summary: Get weekly weather forecast
- *     tags: [Weather]
- *     responses:
- *       '200':
- *         description: Successful response with weekly weather forecast
- *       '500':
- *         description: Error retrieving weekly weather forecast
- */
-router.get(
-  '/week',
-  authTokenMiddleware as any,
-  tryCatchWrapper(getWeatherWeek),
-);
-
 export default router;

From e935538b61615b45be84e925b3fe0fa0b5270ddd Mon Sep 17 00:00:00 2001
From: pinocchio-life-like <icbr19fl@gmail.com>
Date: Wed, 17 Jul 2024 10:24:17 +0300
Subject: [PATCH 226/257] templates controller done

---
 .../src/controllers/template/addTemplate.ts   |  41 ++---
 .../controllers/template/deleteTemplate.ts    |  45 +++---
 .../src/controllers/template/editTemplate.ts  |  33 ++--
 .../controllers/template/getTemplateById.ts   |  42 ++---
 .../src/controllers/template/getTemplates.ts  |  26 +---
 server/src/middleware/isAdmin.ts              |  26 ++--
 server/src/routes/index.ts                    |   4 +-
 server/src/routes/templateRoutes.ts           | 145 +-----------------
 8 files changed, 81 insertions(+), 281 deletions(-)

diff --git a/server/src/controllers/template/addTemplate.ts b/server/src/controllers/template/addTemplate.ts
index c3280bbe9..57209bde8 100644
--- a/server/src/controllers/template/addTemplate.ts
+++ b/server/src/controllers/template/addTemplate.ts
@@ -3,32 +3,21 @@ import { UserNotFoundError } from '../../helpers/errors';
 import { addTemplateService } from '../../services/template/template.service';
 import { User } from '../../drizzle/methods/User';
 import * as validator from '@packrat/validations';
-
-// import { prisma } from '../../prisma';
-/**
- * Adds a template to the database.
- * @param {Object} req - The request object.
- * @param {Object} res - The response object.
- * @return {Promise<void>} The created template.
- */
-// export const addTemplate = async (req, res, next) => {
-//   const { type, templateId, isGlobalTemplate, createdBy } = req.body;
-
-//   const user = await prisma.user.findUnique({
-//     where: {
-//       id: createdBy,
-//     },
-//   });
-
-//   if (!user) {
-//     next(UserNotFoundError);
-//   }
-
-//   await addTemplateService(type, templateId, isGlobalTemplate, createdBy);
-
-//   res.locals.data = { message: 'Template added successfully' };
-//   responseHandler(res);
-// };
+export const addTemplate = async (c) => {
+  try {
+    const { type, templateId, isGlobalTemplate, createdBy } =
+      await c.req.parseBody();
+    const userClass = new User();
+    const user = await userClass.findUser({ userId: createdBy });
+    if (!user) {
+      throw new Error(UserNotFoundError.message);
+    }
+    await addTemplateService(type, templateId, isGlobalTemplate, createdBy);
+    return c.json({ message: 'Template added successfully' }, 200);
+  } catch (error) {
+    return c.json({ error: `Failed to add template: ${error.message}` }, 500);
+  }
+};
 
 export function addTemplateRoute() {
   return protectedProcedure
diff --git a/server/src/controllers/template/deleteTemplate.ts b/server/src/controllers/template/deleteTemplate.ts
index 6425ae341..f6d26c258 100644
--- a/server/src/controllers/template/deleteTemplate.ts
+++ b/server/src/controllers/template/deleteTemplate.ts
@@ -3,33 +3,24 @@ import { TemplateNotFoundError } from '../../helpers/errors';
 import * as validator from '@packrat/validations';
 import { Template } from '../../drizzle/methods/template';
 
-// import { prisma } from '../../prisma';
-
-/**
- * Deletes a template.
- * @param {Object} req - The request object.
- * @param {Object} res - The response object.
- * @return {Promise<void>} A Promise that resolves when the template is deleted.
- */
-// export const deleteTemplate = async (req, res, next) => {
-//   const { templateId } = req.params;
-//   const template = await prisma.template.findUnique({
-//     where: {
-//       id: templateId,
-//     },
-//   });
-
-//   if (template) {
-//     await prisma.template.delete({
-//       where: {
-//         id: templateId,
-//       },
-//     });
-//     res.json({ message: 'Template removed' });
-//   } else {
-//     next(TemplateNotFoundError);
-//   }
-// };
+export const deleteTemplate = async (c) => {
+  try {
+    const { templateId } = await c.req.parseBody();
+    const templateClass = new Template();
+    const template = await templateClass.findTemplate(templateId);
+    if (template) {
+      await templateClass.delete(templateId);
+      return c.json({ message: 'Template removed' }, 200);
+    } else {
+      return c.json({ error: TemplateNotFoundError.message }, 404);
+    }
+  } catch (error) {
+    return c.json(
+      { error: `Failed to delete template: ${error.message}` },
+      500,
+    );
+  }
+};
 
 export function deleteTemplateRoute() {
   const templateClass = new Template();
diff --git a/server/src/controllers/template/editTemplate.ts b/server/src/controllers/template/editTemplate.ts
index c9f73a7c4..43c82b6aa 100644
--- a/server/src/controllers/template/editTemplate.ts
+++ b/server/src/controllers/template/editTemplate.ts
@@ -1,25 +1,20 @@
-import { publicProcedure, protectedProcedure } from '../../trpc';
+import { protectedProcedure } from '../../trpc';
 import { editTemplateService } from '../../services/template/template.service';
-import { z } from 'zod';
 import * as validator from '@packrat/validations';
 
-/**
- * Edits a template.
- * @param {Object} req - The request object.
- * @param {Object} res - The response object.
- * @return {Promise<void>} - A promise that resolves when the template is edited.
- */
-// export const editTemplate = async (req, res) => {
-//   const { templateId } = req.params;
-//   const { type, isGlobalTemplate } = req.body;
-//   const updatedTemplate = await editTemplateService(
-//     templateId,
-//     type,
-//     isGlobalTemplate,
-//   );
-//   res.locals.data = updatedTemplate;
-//   responseHandler(res);
-// };
+export const editTemplate = async (c) => {
+  try {
+    const { templateId, type, isGlobalTemplate } = await c.req.parseBody();
+    const updatedTemplate = await editTemplateService(
+      templateId,
+      type,
+      isGlobalTemplate,
+    );
+    return c.json({ updatedTemplate }, 200);
+  } catch (error) {
+    return c.json({ error: `Failed to edit template: ${error.message}` }, 500);
+  }
+};
 
 export function editTemplateRoute() {
   return protectedProcedure
diff --git a/server/src/controllers/template/getTemplateById.ts b/server/src/controllers/template/getTemplateById.ts
index efc9b52e7..25509a5f9 100644
--- a/server/src/controllers/template/getTemplateById.ts
+++ b/server/src/controllers/template/getTemplateById.ts
@@ -1,38 +1,18 @@
-import { publicProcedure, protectedProcedure } from '../../trpc';
+import { protectedProcedure } from '../../trpc';
 import { TemplateNotFoundError } from '../../helpers/errors';
-// import { responseHandler } from '../../helpers/responseHandler';
 import * as validator from '@packrat/validations';
 import { Template } from '../../drizzle/methods/template';
 
-// import { prisma } from '../../prisma';
-/**
- * Retrieves a template by its ID.
- * @param {Object} req - The request object.
- * @param {Object} res - The response object.
- * @return {Promise} A promise that resolves with the template or rejects with an error.
- */
-// export const getTemplateById = async (req, res, next) => {
-//   const { templateId } = req.params;
-
-//   const template = await prisma.template.findUnique({
-//     where: {
-//       id: templateId,
-//     },
-//     include: {
-//       createdBy: {
-//         select: {
-//           username: true,
-//         },
-//       },
-//     } as never,
-//   });
-//   if (template) {
-//     res.locals.data = template;
-//     responseHandler(res);
-//   } else {
-//     next(TemplateNotFoundError);
-//   }
-// };
+export const getTemplateById = async (c) => {
+  try {
+    const { templateId } = await c.req.parseParams();
+    const templateClass = new Template();
+    const template = await templateClass.findTemplate(templateId, true);
+    return c.json({ template }, 200);
+  } catch (error) {
+    return c.json({ error: `Failed to get item: ${error.message}` }, 500);
+  }
+};
 
 export function getTemplateByIdRoute() {
   const templateClass = new Template();
diff --git a/server/src/controllers/template/getTemplates.ts b/server/src/controllers/template/getTemplates.ts
index f5f89230f..0a5dde8a3 100644
--- a/server/src/controllers/template/getTemplates.ts
+++ b/server/src/controllers/template/getTemplates.ts
@@ -1,25 +1,11 @@
 import { Template } from '../../drizzle/methods/template';
-import { publicProcedure, protectedProcedure } from '../../trpc';
+import { protectedProcedure } from '../../trpc';
 
-// import { prisma } from '../../prisma';
-/**
- * Retrieves templates from the database and sends them as a JSON response.
- * @param {Object} req - The request object.
- * @param {Object} res - The response object.
- * @return {Object} - The templates retrieved from the database.
- */
-// export const getTemplates = async (req, res) => {
-//   const templates = await prisma.template.findMany({
-//     include: {
-//       createdBy: {
-//         select: {
-//           username: true,
-//         },
-//       },
-//     },
-//   });
-//   res.json(templates);
-// };
+export const getTemplates = async (c) => {
+  const templateClass = new Template();
+  const templates = await templateClass.findMany();
+  return c.json(templates, 200);
+};
 
 export function getTemplatesRoute() {
   const templateClass = new Template();
diff --git a/server/src/middleware/isAdmin.ts b/server/src/middleware/isAdmin.ts
index b93fdf792..b8145d57f 100644
--- a/server/src/middleware/isAdmin.ts
+++ b/server/src/middleware/isAdmin.ts
@@ -1,20 +1,12 @@
-import { type NextFunction, type Request, type Response } from 'express';
-
-/**
- * Checks if the user making the request is an admin.
- *
- * @param {Request} req - The request object.
- * @param {Response} res - The response object.
- * @param {NextFunction} next - The next function to be called in the middleware chain.
- * @return {void} This function does not return anything.
- */
-export function isAdmin(req: Request, res: Response, next: NextFunction) {
-  // Your user object might be different. This is just a sample.
-  if (req.user && req.user.role === 'admin') {
-    next(); // pass control to the next handler
+export function isAdmin(c) {
+  if (c.req.user && c.req.user.role === 'admin') {
+    c.next();
   } else {
-    res.status(403).send({
-      message: 'Admin access is required to perform this action',
-    });
+    c.json(
+      {
+        message: 'Admin access is required to perform this action',
+      },
+      403,
+    );
   }
 }
diff --git a/server/src/routes/index.ts b/server/src/routes/index.ts
index 171142c2b..acb3a05a6 100644
--- a/server/src/routes/index.ts
+++ b/server/src/routes/index.ts
@@ -11,7 +11,7 @@ import weatherRoutes from './weatherRoutes';
 // import osmRoutes from './osmRoutes';
 // import passwordResetRoutes from './passwordResetRoutes';
 // import openAiRoutes from './openAiRoutes';
-// // import templateRoutes from './templateRoutes';
+import templateRoutes from './templateRoutes';
 // import favoriteRouters from './favoriteRoutes';
 import userRoutes from './userRoutes';
 import mapPreviewRouter from './mapPreviewRouter';
@@ -56,7 +56,7 @@ router.route('/weather', weatherRoutes);
 // router.use('/osm', osmRoutes);
 // router.use('/password-reset', passwordResetRoutes);
 // router.use('/openai', openAiRoutes);
-// router.use('/template', templateRoutes);
+router.route('/template', templateRoutes);
 // router.use('/favorite', favoriteRouters);
 // router.use('/openai', openAiRoutes);
 router.route('/mapPreview', mapPreviewRouter);
diff --git a/server/src/routes/templateRoutes.ts b/server/src/routes/templateRoutes.ts
index 830dffc2d..3dc90625b 100644
--- a/server/src/routes/templateRoutes.ts
+++ b/server/src/routes/templateRoutes.ts
@@ -1,48 +1,18 @@
 import { Hono } from 'hono';
 import {
-  getTemplatesRoute as getTemplates,
-  getTemplateByIdRoute as getTemplateById,
-  addTemplateRoute as addTemplate,
-  editTemplateRoute as editTemplate,
-  deleteTemplateRoute as deleteTemplate,
+  getTemplates,
+  getTemplateById,
+  addTemplate,
+  editTemplate,
+  deleteTemplate,
 } from '../controllers/template/index';
-import { isAdmin } from '../middleware/isAdmin'; // Assuming this is your middleware file
+import { isAdmin } from '../middleware/isAdmin';
 import { tryCatchWrapper } from '../helpers/tryCatchWrapper';
 import authTokenMiddleware from '../middleware/auth';
 import checkRole from '../middleware/checkRole';
 
-// import * as validator from "@packrat/validations";
-
-// TODO - add validators, this is just a placeholder
-// REMOVED THIS SINCE VALIDATION IS NOT REALLY DONE HERE
-// const validator = {
-//   getTemplateById: (req,res,next) => next(),
-//   addTemplate: (req,res,next) => next(),
-//   editTemplate: (req,res,next) => next(),
-//   deleteTemplate: (req,res,next) => next(),
-// };
-
 const router = new Hono();
 
-/**
- * @swagger
- * tags:
- *   name: Templates
- *   description: Template routes
- */
-
-/**
- * @swagger
- * /template:
- *   get:
- *     summary: Get all templates
- *     tags: [Templates]
- *     responses:
- *       '200':
- *         description: Successful response with all templates
- *       '500':
- *         description: Error retrieving templates
- */
 router.get(
   '/',
   authTokenMiddleware as any,
@@ -50,27 +20,6 @@ router.get(
   tryCatchWrapper(getTemplates),
 );
 
-/**
- * @swagger
- * /template/{templateId}:
- *   get:
- *     summary: Get template by ID
- *     tags: [Templates]
- *     parameters:
- *       - in: path
- *         name: templateId
- *         schema:
- *           type: string
- *         required: true
- *         description: The ID of the template
- *     responses:
- *       '200':
- *         description: Successful response with template by ID
- *       '400':
- *         description: Invalid request parameters
- *       '500':
- *         description: Error retrieving template by ID
- */
 router.get(
   '/:templateId',
   authTokenMiddleware as any,
@@ -78,35 +27,6 @@ router.get(
   tryCatchWrapper(getTemplateById),
 );
 
-/**
- * @swagger
- * /template:
- *   post:
- *     summary: Add a template
- *     tags: [Templates]
- *     requestBody:
- *       required: true
- *       content:
- *         application/json:
- *           schema:
- *             type: object
- *             properties:
- *               type:
- *                 type: string
- *               templateId:
- *                 type: string
- *               isGlobalTemplate:
- *                 type: boolean
- *               createdBy:
- *                type: string
- *     responses:
- *       '200':
- *         description: Successful response after adding the template
- *       '400':
- *         description: Invalid request parameters
- *       '500':
- *         description: Error adding the template
- */
 router.post(
   '/',
   authTokenMiddleware as any,
@@ -115,38 +35,6 @@ router.post(
   tryCatchWrapper(addTemplate),
 );
 
-/**
- * @swagger
- * /template/{templateId}:
- *   put:
- *     summary: Edit a template
- *     tags: [Templates]
- *     parameters:
- *       - in: path
- *         name: templateId
- *         schema:
- *           type: string
- *         required: true
- *         description: The ID of the template
- *     requestBody:
- *       required: true
- *       content:
- *         application/json:
- *           schema:
- *             type: object
- *             properties:
- *               type:
- *                 type: string
- *               isGlobalTemplate:
- *                 type: boolean
- *     responses:
- *       '200':
- *         description: Successful response after editing the template
- *       '400':
- *         description: Invalid request parameters
- *       '500':
- *         description: Error editing the template
- */
 router.put(
   '/:templateId',
   authTokenMiddleware as any,
@@ -155,27 +43,6 @@ router.put(
   tryCatchWrapper(editTemplate),
 );
 
-/**
- * @swagger
- * /template/{templateId}:
- *   delete:
- *     summary: Delete a template
- *     tags: [Templates]
- *     parameters:
- *       - in: path
- *         name: templateId
- *         schema:
- *           type: string
- *         required: true
- *         description: The ID of the template
- *     responses:
- *       '200':
- *         description: Successful response after deleting the template
- *       '400':
- *         description: Invalid request parameters
- *       '500':
- *         description: Error deleting the template
- */
 router.delete(
   '/:templateId',
   authTokenMiddleware as any,

From f77470157f08674fadad2eefc8689101cbfb15a2 Mon Sep 17 00:00:00 2001
From: Anmol Verma <anmolverma2810@gmail.com>
Date: Wed, 17 Jul 2024 14:33:41 +0530
Subject: [PATCH 227/257] Change chat image to icon

---
 packages/app/components/chat/index.tsx       | 57 ++++++++++++--------
 packages/app/components/pack/PackDetails.tsx | 13 ++---
 2 files changed, 40 insertions(+), 30 deletions(-)

diff --git a/packages/app/components/chat/index.tsx b/packages/app/components/chat/index.tsx
index 13be5d95e..b70086f48 100644
--- a/packages/app/components/chat/index.tsx
+++ b/packages/app/components/chat/index.tsx
@@ -5,8 +5,9 @@ import {
   TouchableOpacity,
   ScrollView,
   Animated,
+  Platform,
 } from 'react-native';
-import { RButton, RImage, RInput, RStack } from '@packrat/ui';
+import { RButton, RIconButton, RImage, RInput, RStack } from '@packrat/ui';
 import useCustomStyles from 'app/hooks/useCustomStyles';
 import { useChat } from 'app/hooks/chat/useChat';
 import { loadStyles } from './chat.style';
@@ -14,10 +15,12 @@ import { ChatList } from '@packrat/ui/src/Bento/elements/list';
 import { X } from '@tamagui/lucide-icons';
 import { MessageCircle, Camera, Settings, Home } from 'lucide-react-native';
 import { ActionItem } from './ActionItem';
+import { Ionicons } from '@expo/vector-icons';
 import {
   SuggestionDescription,
   SuggestionList,
 } from '../../components/Suggestion';
+import useTheme from 'app/hooks/useTheme';
 
 interface ChatComponentProps {
   showChatSelector?: boolean;
@@ -253,40 +256,50 @@ const ChatModalTrigger: React.FC<ChatModalTriggerProps> = ({
       useNativeDriver: false,
     }).start();
   }, [isChatOpen]);
+  const { currentTheme } = useTheme();
 
   return (
     <View style={styles.container}>
-      <TouchableOpacity
+      <View
         style={{
           width: 50,
           height: 50,
-          borderRadius: 25,
           justifyContent: 'center',
           alignItems: 'center',
         }}
-        onPress={() => {
-          if (isChatOpen || isSuggestionsOpen) {
-            setIsItemOpen(false);
-            setIsChatOpen(false);
-            setIsSuggestionsOpen(false);
-          } else {
-            setIsItemOpen(!isItemOpen);
-          }
-        }}
       >
-        <RImage
-          source={{
-            // TODO: Update this to use the intended chat logo
-            uri: 'https://raw.githubusercontent.com/andrew-bierman/PackRat/4ad449702c088e505c4b484219121d365150f971/packages/app/assets/chat-svgrepo-com%20(1).svg',
+        <RIconButton
+          backgroundColor="transparent"
+          style={{
             width: 50,
             height: 50,
+            justifyContent: 'center',
+            alignItems: 'center',
+            padding: 0,
+          }}
+          icon={
+            <Ionicons
+              name="chatbubble-ellipses-sharp"
+              size={50}
+              color={
+                Platform.OS === 'web'
+                  ? 'white'
+                  : currentTheme.colors.secondaryBlue
+              }
+            />
+          }
+          onPress={() => {
+            if (isChatOpen || isSuggestionsOpen) {
+              setIsItemOpen(false);
+              setIsChatOpen(false);
+              setIsSuggestionsOpen(false);
+            } else {
+              setIsItemOpen(!isItemOpen);
+            }
           }}
-          width={40}
-          height={40}
-          style={styles.logo}
-          alt="PackRat Logo"
         />
-      </TouchableOpacity>
+      </View>
+
       {isItemOpen && (
         <Animated.View style={{ ...styles.animatedView, width: 308 }}>
           <View style={{ width: 300 }}>
@@ -347,4 +360,4 @@ const ChatModalTrigger: React.FC<ChatModalTriggerProps> = ({
   );
 };
 
-export default ChatModalTrigger;
\ No newline at end of file
+export default ChatModalTrigger;
diff --git a/packages/app/components/pack/PackDetails.tsx b/packages/app/components/pack/PackDetails.tsx
index 4f1d7f1d3..7f07b955c 100644
--- a/packages/app/components/pack/PackDetails.tsx
+++ b/packages/app/components/pack/PackDetails.tsx
@@ -62,6 +62,7 @@ export function PackDetails() {
         <View
           style={{
             minHeight: '100%',
+            marginBottom: 50,
           }}
         >
           <DetailsComponent
@@ -134,14 +135,10 @@ export function PackDetails() {
       <View
         style={{
           position: 'absolute',
-          right: 50,
-          bottom: 30,
-          width: 60,
-          height: 60,
-          marginBottom: 20,
-
-          justifyContent: 'center',
-          alignItems: 'center',
+          right: -40,
+          bottom: 20,
+          flexDirection: 'row',
+          alignSelf: 'flex-end',
         }}
       >
         <ChatContainer

From 1cc42712133812e0350841e052eb05de64a87970 Mon Sep 17 00:00:00 2001
From: Anmol Verma <anmolverma2810@gmail.com>
Date: Wed, 17 Jul 2024 21:41:08 +0530
Subject: [PATCH 228/257] Change required text

---
 .../src/Bento/forms/layouts/SignInScreen.tsx  |  8 ++++-
 packages/ui/src/form/lib/rhf/LmInputRhf.tsx   | 34 ++++++++++---------
 .../src/validations/userRoutesValidator.ts    |  4 +--
 3 files changed, 27 insertions(+), 19 deletions(-)

diff --git a/packages/ui/src/Bento/forms/layouts/SignInScreen.tsx b/packages/ui/src/Bento/forms/layouts/SignInScreen.tsx
index 14d937aea..856561d64 100644
--- a/packages/ui/src/Bento/forms/layouts/SignInScreen.tsx
+++ b/packages/ui/src/Bento/forms/layouts/SignInScreen.tsx
@@ -46,8 +46,14 @@ export function SignInScreen({
               label="Email ID"
               keyboardType="email-address"
               name="email"
+              aria-label="Email"
+            />
+            <FormInput
+              label="Password"
+              secureTextEntry
+              name="password"
+              aria-label="Password"
             />
-            <FormInput label="Password" secureTextEntry name="password" />
             <Theme inverse>
               <SubmitButton
                 disabled={signInStatus === 'loading'}
diff --git a/packages/ui/src/form/lib/rhf/LmInputRhf.tsx b/packages/ui/src/form/lib/rhf/LmInputRhf.tsx
index 6e13c4a05..5fe0405b3 100644
--- a/packages/ui/src/form/lib/rhf/LmInputRhf.tsx
+++ b/packages/ui/src/form/lib/rhf/LmInputRhf.tsx
@@ -41,22 +41,24 @@ export function LmInputRhf<T extends FieldValues = FieldValues>({
       render={({
         field: { onChange, value, onBlur, ref },
         fieldState: { error },
-      }) => (
-        <LmInput
-          {...inputProps}
-          ref={ref}
-          keyboardType={getInputKeyboardType({
-            isNumeric,
-            isDecimal,
-            defaultKeyBoardType: keyboardType,
-          })}
-          value={(value ?? '').toString()} // Ensure value is defined before calling toString()
-          onBlur={onBlur}
-          error={!!error}
-          onChangeText={(text) => onChange(handleOnChange(text))}
-          helperText={error ? error.message : inputProps.helperText}
-        />
-      )}
+      }) => {
+        return (
+          <LmInput
+            {...inputProps}
+            ref={ref}
+            keyboardType={getInputKeyboardType({
+              isNumeric,
+              isDecimal,
+              defaultKeyBoardType: keyboardType,
+            })}
+            value={(value ?? '').toString()} // Ensure value is defined before calling toString()
+            onBlur={onBlur}
+            error={!!error}
+            onChangeText={(text) => onChange(handleOnChange(text))}
+            helperText={error ? error.message : inputProps.helperText}
+          />
+        );
+      }}
     />
   );
 }
diff --git a/packages/validations/src/validations/userRoutesValidator.ts b/packages/validations/src/validations/userRoutesValidator.ts
index 1dbd22f77..37b17e2c4 100644
--- a/packages/validations/src/validations/userRoutesValidator.ts
+++ b/packages/validations/src/validations/userRoutesValidator.ts
@@ -1,12 +1,12 @@
 import { z } from 'zod';
 
 const emailValidator = z
-  .string()
+  .string({ required_error: 'Email is required' })
   .email()
   .transform((str) => str.trim().toLowerCase());
 
 const passwordValidator = z
-  .string()
+  .string({ required_error: 'Password is required' })
   .min(7)
   .refine((str) => !str.includes('password'), {
     message: `The password cannot contain the word 'password'`,

From 761300582505762aa1d981b3d3cc65e9c6a92fae Mon Sep 17 00:00:00 2001
From: Andrew Bierman <94939237+andrew-bierman@users.noreply.github.com>
Date: Wed, 17 Jul 2024 20:59:25 -0400
Subject: [PATCH 229/257] =?UTF-8?q?=F0=9F=9A=A8=20fix=20error=20=20'React'?=
 =?UTF-8?q?=20must=20be=20in=20scope=20when=20using=20JSX=20=20react/react?=
 =?UTF-8?q?-in-jsx-scope?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../(drawer)/(tabs)/(stack)/about/index.tsx   |  1 +
 .../(tabs)/(stack)/appearance/index.tsx       |  1 +
 .../(stack)/destination/[destinationId].tsx   |  1 +
 .../(drawer)/(tabs)/(stack)/items/index.tsx   |  1 +
 .../(drawer)/(tabs)/(stack)/map/index.tsx     |  1 +
 .../(drawer)/(tabs)/(stack)/maps/index.tsx    |  1 +
 .../(drawer)/(tabs)/(stack)/pack/[id].tsx     |  1 +
 .../(drawer)/(tabs)/(stack)/pack/create.tsx   |  1 +
 .../(drawer)/(tabs)/(stack)/packs/index.tsx   |  1 +
 .../(drawer)/(tabs)/(stack)/profile/[id].tsx  |  1 +
 .../(tabs)/(stack)/profile/settings/index.tsx |  1 +
 .../(drawer)/(tabs)/(stack)/trip/[tripId].tsx |  1 +
 .../(drawer)/(tabs)/(stack)/trip/create.tsx   |  1 +
 .../(drawer)/(tabs)/(stack)/trips/index.tsx   |  1 +
 .../app/(app)/(drawer)/(tabs)/_layout.tsx     |  1 +
 .../app/(app)/(drawer)/(tabs)/feed/index.tsx  |  1 +
 apps/expo/app/(app)/(drawer)/(tabs)/index.tsx |  2 +-
 .../(app)/(drawer)/(tabs)/profile/index.tsx   |  1 +
 .../expo/app/(app)/(drawer)/(tabs)/search.tsx |  1 +
 apps/expo/app/(app)/(drawer)/_layout.tsx      |  1 +
 apps/expo/app/(app)/_layout.tsx               |  1 +
 apps/expo/app/(app)/modal.tsx                 | 27 ++++++++++---------
 apps/expo/app/(auth)/_layout.tsx              |  1 +
 apps/expo/app/(auth)/password-reset.tsx       |  1 +
 apps/expo/app/(auth)/register.tsx             |  1 +
 apps/expo/app/(auth)/sign-in.tsx              |  1 +
 apps/expo/app/_layout.tsx                     |  1 +
 27 files changed, 40 insertions(+), 14 deletions(-)

diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/about/index.tsx b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/about/index.tsx
index d9d1067c1..371efdae2 100644
--- a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/about/index.tsx
+++ b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/about/index.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import About from 'app/screens/about';
 import { Platform, ScrollView, StyleSheet } from 'react-native';
 import { Stack } from 'expo-router';
diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/appearance/index.tsx b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/appearance/index.tsx
index 83e64021a..f0a09eed1 100644
--- a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/appearance/index.tsx
+++ b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/appearance/index.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import { Platform } from 'react-native';
 import { Stack } from 'expo-router';
 import Head from 'expo-router/head';
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 123d43c4f..c1c02dfe0 100644
--- a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/destination/[destinationId].tsx
+++ b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/destination/[destinationId].tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import { Platform } from 'react-native';
 import { DestinationPage } from 'app/components/destination';
 // import DestinationPage from "../../components/destination";
diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/items/index.tsx b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/items/index.tsx
index 21a7ea647..0ff9f3307 100644
--- a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/items/index.tsx
+++ b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/items/index.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import Items from 'app/screens/items';
 import { Platform } from 'react-native';
 import { Stack } from 'expo-router';
diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/map/index.tsx b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/map/index.tsx
index ee9982a16..d0108cf7c 100644
--- a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/map/index.tsx
+++ b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/map/index.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import Map from 'app/screens/map';
 import { Platform } from 'react-native';
 import { Stack } from 'expo-router';
diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/maps/index.tsx b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/maps/index.tsx
index 27afc2d0b..a44bbedaf 100644
--- a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/maps/index.tsx
+++ b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/maps/index.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import Maps from 'app/screens/maps';
 import { Platform } from 'react-native';
 import { Stack } from 'expo-router';
diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/pack/[id].tsx b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/pack/[id].tsx
index 396cc5145..f43f41532 100644
--- a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/pack/[id].tsx
+++ b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/pack/[id].tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import PackContainer from 'app/components/pack/PackContainer';
 import { PackDetails } from 'app/components/pack/PackDetails';
 import { DetailsComponent } from 'app/components/details';
diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/pack/create.tsx b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/pack/create.tsx
index d63c6dae0..8262a6a0a 100644
--- a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/pack/create.tsx
+++ b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/pack/create.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import { AddPack } from 'app/components/pack/AddPack';
 import { Platform } from 'react-native';
 import { Stack } from 'expo-router';
diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/packs/index.tsx b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/packs/index.tsx
index 21cd6520b..2b768493b 100644
--- a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/packs/index.tsx
+++ b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/packs/index.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import Feed from 'app/screens/feed/Feed';
 import { Platform } from 'react-native';
 import { Stack } from 'expo-router';
diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/profile/[id].tsx b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/profile/[id].tsx
index 6c4f133b6..93782e9df 100644
--- a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/profile/[id].tsx
+++ b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/profile/[id].tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import { Stack } from 'expo-router';
 import { useEffect, useState } from 'react';
 import { StyleSheet, Text, View, Platform } from 'react-native';
diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/profile/settings/index.tsx b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/profile/settings/index.tsx
index a054eb4f4..22d0827f9 100644
--- a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/profile/settings/index.tsx
+++ b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/profile/settings/index.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import { Platform, ScrollView } from 'react-native';
 import { Stack } from 'expo-router';
 import Settings from 'app/screens/user/Settings';
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 2920b7631..d07f74fe8 100644
--- a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/trip/[tripId].tsx
+++ b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/trip/[tripId].tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import PackContainer from 'app/components/pack/PackContainer';
 import { TripDetails } from 'app/screens/trip/TripDetails';
 import { DetailsComponent } from 'app/components/details';
diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/trip/create.tsx b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/trip/create.tsx
index cc6d628da..706cf68fa 100644
--- a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/trip/create.tsx
+++ b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/trip/create.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import CreateTrip from 'app/screens/trip/createTrip';
 
 import { Platform } from 'react-native';
diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/trips/index.tsx b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/trips/index.tsx
index 3b91eb051..fe720144d 100644
--- a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/trips/index.tsx
+++ b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/trips/index.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import Feed from 'app/screens/feed/Feed';
 import { Platform } from 'react-native';
 import { Stack } from 'expo-router';
diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/_layout.tsx b/apps/expo/app/(app)/(drawer)/(tabs)/_layout.tsx
index 04a80e160..6f1e4aa2d 100644
--- a/apps/expo/app/(app)/(drawer)/(tabs)/_layout.tsx
+++ b/apps/expo/app/(app)/(drawer)/(tabs)/_layout.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import { Tabs } from 'app/components/navigation';
 
 export default function TabsLayout() {
diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/feed/index.tsx b/apps/expo/app/(app)/(drawer)/(tabs)/feed/index.tsx
index 74cfdcff4..a42c8a28a 100644
--- a/apps/expo/app/(app)/(drawer)/(tabs)/feed/index.tsx
+++ b/apps/expo/app/(app)/(drawer)/(tabs)/feed/index.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import Feed from 'app/screens/feed/Feed';
 import { Platform } from 'react-native';
 import { Stack } from 'expo-router';
diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/index.tsx b/apps/expo/app/(app)/(drawer)/(tabs)/index.tsx
index b33d99032..c8c27f530 100644
--- a/apps/expo/app/(app)/(drawer)/(tabs)/index.tsx
+++ b/apps/expo/app/(app)/(drawer)/(tabs)/index.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { Platform, StyleSheet, View, Text } from 'react-native';
 import { Stack } from 'expo-router';
 import { darkTheme, theme } from 'app/theme';
diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/profile/index.tsx b/apps/expo/app/(app)/(drawer)/(tabs)/profile/index.tsx
index cc9d3a60c..4450d7d12 100644
--- a/apps/expo/app/(app)/(drawer)/(tabs)/profile/index.tsx
+++ b/apps/expo/app/(app)/(drawer)/(tabs)/profile/index.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import ProfileContainer from 'app/screens/user/ProfileContainer';
 import { Platform, ScrollView } from 'react-native';
 import { Stack } from 'expo-router';
diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/search.tsx b/apps/expo/app/(app)/(drawer)/(tabs)/search.tsx
index 716f6bd7c..59721b1bc 100644
--- a/apps/expo/app/(app)/(drawer)/(tabs)/search.tsx
+++ b/apps/expo/app/(app)/(drawer)/(tabs)/search.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import { Platform, type TextInput } from 'react-native';
 import { useCallback, useRef } from 'react';
 import { Stack, useFocusEffect } from 'expo-router';
diff --git a/apps/expo/app/(app)/(drawer)/_layout.tsx b/apps/expo/app/(app)/(drawer)/_layout.tsx
index 4fb5bbbc6..224fbd81b 100644
--- a/apps/expo/app/(app)/(drawer)/_layout.tsx
+++ b/apps/expo/app/(app)/(drawer)/_layout.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import { Drawer } from 'app/components/navigation';
 
 export default function DrawerLayout() {
diff --git a/apps/expo/app/(app)/_layout.tsx b/apps/expo/app/(app)/_layout.tsx
index e73aa4fe9..adb21cfb6 100644
--- a/apps/expo/app/(app)/_layout.tsx
+++ b/apps/expo/app/(app)/_layout.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import { Link, Slot } from 'expo-router';
 import { AuthWrapper } from 'app/auth/AuthWrapper';
 import { Stack } from 'expo-router';
diff --git a/apps/expo/app/(app)/modal.tsx b/apps/expo/app/(app)/modal.tsx
index adf307a82..55dad70a2 100644
--- a/apps/expo/app/(app)/modal.tsx
+++ b/apps/expo/app/(app)/modal.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import { Platform, ScrollView, View } from 'react-native';
 import { Stack, router, Link } from 'expo-router';
 import Head from 'expo-router/head';
@@ -16,21 +17,21 @@ export default function Modal() {
           <title>Modal</title>
         </Head>
       )}
-        <Stack.Screen
-          name="Modal"
-          options={{
-            // https://reactnavigation.org/docs/headers#setting-the-header-title
-            title: 'Modal',
-            // http://reactnavigation.org/docs/headers#adjusting-header-styles
+      <Stack.Screen
+        name="Modal"
+        options={{
+          // https://reactnavigation.org/docs/headers#setting-the-header-title
+          title: 'Modal',
+          // http://reactnavigation.org/docs/headers#adjusting-header-styles
 
-            // https://reactnavigation.org/docs/headers#replacing-the-title-with-a-custom-component
+          // https://reactnavigation.org/docs/headers#replacing-the-title-with-a-custom-component
 
-            presentation: 'modal',
-            headerShown: false,
-            headerTitle: 'model'
-          }}
-          // screenOptions={{ headerShown: false, headerTitle: 'modal' }}
-        />
+          presentation: 'modal',
+          headerShown: false,
+          headerTitle: 'model',
+        }}
+        // screenOptions={{ headerShown: false, headerTitle: 'modal' }}
+      />
 
       <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
         {/* Use `../` as a simple way to navigate to the root. This is not analogous to "goBack". */}
diff --git a/apps/expo/app/(auth)/_layout.tsx b/apps/expo/app/(auth)/_layout.tsx
index c7314d16d..d1002ec1e 100644
--- a/apps/expo/app/(auth)/_layout.tsx
+++ b/apps/expo/app/(auth)/_layout.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import { Stack } from 'expo-router';
 
 export default function AppLayout() {
diff --git a/apps/expo/app/(auth)/password-reset.tsx b/apps/expo/app/(auth)/password-reset.tsx
index ddc9e954c..c40b36812 100644
--- a/apps/expo/app/(auth)/password-reset.tsx
+++ b/apps/expo/app/(auth)/password-reset.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import { Platform } from 'react-native';
 import { RequestPasswordReset } from 'app/components/password-reset';
 import { Stack } from 'expo-router';
diff --git a/apps/expo/app/(auth)/register.tsx b/apps/expo/app/(auth)/register.tsx
index acec42743..5b28bde33 100644
--- a/apps/expo/app/(auth)/register.tsx
+++ b/apps/expo/app/(auth)/register.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import Register from 'app/screens/RegisterScreen';
 import { Platform } from 'react-native';
 import { Stack } from 'expo-router';
diff --git a/apps/expo/app/(auth)/sign-in.tsx b/apps/expo/app/(auth)/sign-in.tsx
index 192f12f49..86361e39c 100644
--- a/apps/expo/app/(auth)/sign-in.tsx
+++ b/apps/expo/app/(auth)/sign-in.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import Login from 'app/screens/LoginScreen';
 import { Platform } from 'react-native';
 import { Stack } from 'expo-router';
diff --git a/apps/expo/app/_layout.tsx b/apps/expo/app/_layout.tsx
index 15d3b3b82..203fa20bb 100644
--- a/apps/expo/app/_layout.tsx
+++ b/apps/expo/app/_layout.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import { Provider } from 'app/provider';
 import { Stack } from 'expo-router';
 

From a4b8f2bffaafc9196fe72af05be953e111f6b8ef Mon Sep 17 00:00:00 2001
From: Andrew Bierman <94939237+andrew-bierman@users.noreply.github.com>
Date: Wed, 17 Jul 2024 21:20:34 -0400
Subject: [PATCH 230/257] =?UTF-8?q?=F0=9F=9A=A8=20fix=20react=20in=20scope?=
 =?UTF-8?q?=20error=20on=20lint?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/tauri/src/App.tsx                                | 1 +
 apps/tauri/src/routes/__root.tsx                      | 1 +
 apps/tauri/src/routes/about/index.lazy.tsx            | 1 +
 apps/tauri/src/routes/appearance/index.lazy.tsx       | 1 +
 apps/tauri/src/routes/dashboard/index.lazy.tsx        | 1 +
 apps/tauri/src/routes/destination/query.lazy.tsx      | 1 +
 apps/tauri/src/routes/feed/index.lazy.tsx             | 1 +
 apps/tauri/src/routes/index.tsx                       | 1 +
 apps/tauri/src/routes/items/index.lazy.tsx            | 1 +
 apps/tauri/src/routes/map/index.lazy.tsx              | 1 +
 apps/tauri/src/routes/maps/index.lazy.tsx             | 1 +
 apps/tauri/src/routes/password-reset/index.lazy.tsx   | 1 +
 apps/tauri/src/routes/profile/$id.lazy.tsx            | 1 +
 apps/tauri/src/routes/profile/index.lazy.tsx          | 1 +
 apps/tauri/src/routes/profile/settings/index.lazy.tsx | 1 +
 apps/tauri/src/routes/trip/$tripId.lazy.tsx           | 1 +
 apps/tauri/src/routes/trip/create.lazy.tsx            | 1 +
 apps/tauri/src/routes/trips/index.lazy.tsx            | 1 +
 apps/vite/src/App.tsx                                 | 3 ++-
 apps/vite/src/routes/__root.tsx                       | 1 +
 apps/vite/src/routes/about/index.lazy.tsx             | 1 +
 apps/vite/src/routes/appearance/index.lazy.tsx        | 1 +
 apps/vite/src/routes/dashboard/index.lazy.tsx         | 1 +
 apps/vite/src/routes/destination/query.lazy.tsx       | 1 +
 apps/vite/src/routes/feed/index.lazy.tsx              | 1 +
 apps/vite/src/routes/items/index.lazy.tsx             | 1 +
 apps/vite/src/routes/map/index.lazy.tsx               | 1 +
 apps/vite/src/routes/maps/index.lazy.tsx              | 1 +
 apps/vite/src/routes/password-reset/index.lazy.tsx    | 1 +
 apps/vite/src/routes/profile/$id.lazy.tsx             | 1 +
 apps/vite/src/routes/profile/index.lazy.tsx           | 1 +
 apps/vite/src/routes/profile/settings/index.lazy.tsx  | 1 +
 apps/vite/src/routes/trip/$tripId.lazy.tsx            | 1 +
 apps/vite/src/routes/trip/create.lazy.tsx             | 1 +
 apps/vite/src/routes/trips/index.lazy.tsx             | 1 +
 35 files changed, 36 insertions(+), 1 deletion(-)

diff --git a/apps/tauri/src/App.tsx b/apps/tauri/src/App.tsx
index 5f0bd5dbb..0a42e9784 100644
--- a/apps/tauri/src/App.tsx
+++ b/apps/tauri/src/App.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import React, { StrictMode } from 'react';
 import ReactDOM from 'react-dom/client';
 import { RouterProvider, createRouter } from '@tanstack/react-router';
diff --git a/apps/tauri/src/routes/__root.tsx b/apps/tauri/src/routes/__root.tsx
index adfc2d232..87537688b 100644
--- a/apps/tauri/src/routes/__root.tsx
+++ b/apps/tauri/src/routes/__root.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import { MainContentWeb } from '@packrat/ui';
 import { createRootRoute, Link, Outlet } from '@tanstack/react-router';
 import { TanStackRouterDevtools } from '@tanstack/router-devtools';
diff --git a/apps/tauri/src/routes/about/index.lazy.tsx b/apps/tauri/src/routes/about/index.lazy.tsx
index 59074ce87..4f529cc6f 100644
--- a/apps/tauri/src/routes/about/index.lazy.tsx
+++ b/apps/tauri/src/routes/about/index.lazy.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import About from 'app/screens/about';
 import { Platform, ScrollView, StyleSheet } from 'react-native';
 import { createLazyFileRoute } from '@tanstack/react-router';
diff --git a/apps/tauri/src/routes/appearance/index.lazy.tsx b/apps/tauri/src/routes/appearance/index.lazy.tsx
index 8b4f7ad0d..2d157cbd6 100644
--- a/apps/tauri/src/routes/appearance/index.lazy.tsx
+++ b/apps/tauri/src/routes/appearance/index.lazy.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import AppearanceContainer from 'app/screens/appearance/AppearanceContainer';
 import { AuthWrapper } from 'app/auth/AuthWrapper';
 import { createLazyFileRoute } from '@tanstack/react-router';
diff --git a/apps/tauri/src/routes/dashboard/index.lazy.tsx b/apps/tauri/src/routes/dashboard/index.lazy.tsx
index 18714b253..c073aa57e 100644
--- a/apps/tauri/src/routes/dashboard/index.lazy.tsx
+++ b/apps/tauri/src/routes/dashboard/index.lazy.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import Dashboard from 'app/screens/dashboard';
 
 import { AuthWrapper } from 'app/auth/AuthWrapper';
diff --git a/apps/tauri/src/routes/destination/query.lazy.tsx b/apps/tauri/src/routes/destination/query.lazy.tsx
index d077237c5..dd5171124 100644
--- a/apps/tauri/src/routes/destination/query.lazy.tsx
+++ b/apps/tauri/src/routes/destination/query.lazy.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import { DestinationPage } from 'app/components/destination';
 import { AuthWrapper } from 'app/auth/AuthWrapper';
 // import DestinationPage from "../../components/destination";
diff --git a/apps/tauri/src/routes/feed/index.lazy.tsx b/apps/tauri/src/routes/feed/index.lazy.tsx
index 6c40a24f3..72b518e2d 100644
--- a/apps/tauri/src/routes/feed/index.lazy.tsx
+++ b/apps/tauri/src/routes/feed/index.lazy.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import Feed from 'app/screens/feed/Feed';
 import { AuthWrapper } from 'app/auth/AuthWrapper';
 import { createLazyFileRoute } from '@tanstack/react-router';
diff --git a/apps/tauri/src/routes/index.tsx b/apps/tauri/src/routes/index.tsx
index 2fe1b91b0..97cc08a58 100644
--- a/apps/tauri/src/routes/index.tsx
+++ b/apps/tauri/src/routes/index.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import Dashboard from 'app/screens/dashboard';
 import LandingPage from 'app/components/landing_page';
 import { useAuthUser } from 'app/auth/hooks';
diff --git a/apps/tauri/src/routes/items/index.lazy.tsx b/apps/tauri/src/routes/items/index.lazy.tsx
index 7eb7e0be1..c6f6d534e 100644
--- a/apps/tauri/src/routes/items/index.lazy.tsx
+++ b/apps/tauri/src/routes/items/index.lazy.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import Items from 'app/screens/items';
 import { AuthWrapper } from 'app/auth/AuthWrapper';
 import { createLazyFileRoute } from '@tanstack/react-router';
diff --git a/apps/tauri/src/routes/map/index.lazy.tsx b/apps/tauri/src/routes/map/index.lazy.tsx
index 161479204..18c39af86 100644
--- a/apps/tauri/src/routes/map/index.lazy.tsx
+++ b/apps/tauri/src/routes/map/index.lazy.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 // import Map from "app/screens/map";
 
 // export default Map;
diff --git a/apps/tauri/src/routes/maps/index.lazy.tsx b/apps/tauri/src/routes/maps/index.lazy.tsx
index 71a4a669a..0fb409e3c 100644
--- a/apps/tauri/src/routes/maps/index.lazy.tsx
+++ b/apps/tauri/src/routes/maps/index.lazy.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 // import DownloadedMaps from "app/screens/maps";
 
 // export default DownloadedMaps;
diff --git a/apps/tauri/src/routes/password-reset/index.lazy.tsx b/apps/tauri/src/routes/password-reset/index.lazy.tsx
index a056d5f8d..6789d8e08 100644
--- a/apps/tauri/src/routes/password-reset/index.lazy.tsx
+++ b/apps/tauri/src/routes/password-reset/index.lazy.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import { RequestPasswordReset } from 'app/components/password-reset';
 import { createLazyFileRoute } from '@tanstack/react-router';
 
diff --git a/apps/tauri/src/routes/profile/$id.lazy.tsx b/apps/tauri/src/routes/profile/$id.lazy.tsx
index 4be85a3a7..7827f7219 100644
--- a/apps/tauri/src/routes/profile/$id.lazy.tsx
+++ b/apps/tauri/src/routes/profile/$id.lazy.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import ProfileContainer from 'app/screens/user/ProfileContainer';
 import { useProfileId } from 'app/hooks/user';
 
diff --git a/apps/tauri/src/routes/profile/index.lazy.tsx b/apps/tauri/src/routes/profile/index.lazy.tsx
index aeb0a6b87..97980da80 100644
--- a/apps/tauri/src/routes/profile/index.lazy.tsx
+++ b/apps/tauri/src/routes/profile/index.lazy.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import ProfileContainer from 'app/screens/user/ProfileContainer';
 import { AuthWrapper } from 'app/auth/AuthWrapper';
 import { createLazyFileRoute } from '@tanstack/react-router';
diff --git a/apps/tauri/src/routes/profile/settings/index.lazy.tsx b/apps/tauri/src/routes/profile/settings/index.lazy.tsx
index eb66e299d..81fa5b327 100644
--- a/apps/tauri/src/routes/profile/settings/index.lazy.tsx
+++ b/apps/tauri/src/routes/profile/settings/index.lazy.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import Settings from 'app/screens/user/Settings';
 import { AuthWrapper } from 'app/auth/AuthWrapper';
 import { createLazyFileRoute } from '@tanstack/react-router';
diff --git a/apps/tauri/src/routes/trip/$tripId.lazy.tsx b/apps/tauri/src/routes/trip/$tripId.lazy.tsx
index f9e0d97ef..6dbceaf97 100644
--- a/apps/tauri/src/routes/trip/$tripId.lazy.tsx
+++ b/apps/tauri/src/routes/trip/$tripId.lazy.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import { TripDetails } from 'app/screens/trip/TripDetails';
 import { AuthWrapper } from 'app/auth/AuthWrapper';
 import { createLazyFileRoute } from '@tanstack/react-router';
diff --git a/apps/tauri/src/routes/trip/create.lazy.tsx b/apps/tauri/src/routes/trip/create.lazy.tsx
index 22c47a745..301a10bae 100644
--- a/apps/tauri/src/routes/trip/create.lazy.tsx
+++ b/apps/tauri/src/routes/trip/create.lazy.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import CreateTrip from 'app/screens/trip/createTrip';
 import { AuthWrapper } from 'app/auth/AuthWrapper';
 import { createLazyFileRoute } from '@tanstack/react-router';
diff --git a/apps/tauri/src/routes/trips/index.lazy.tsx b/apps/tauri/src/routes/trips/index.lazy.tsx
index 5d900fdf7..f08be7c17 100644
--- a/apps/tauri/src/routes/trips/index.lazy.tsx
+++ b/apps/tauri/src/routes/trips/index.lazy.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import Feed from 'app/screens/feed/Feed';
 import { AuthWrapper } from 'app/auth/AuthWrapper';
 import { createLazyFileRoute } from '@tanstack/react-router';
diff --git a/apps/vite/src/App.tsx b/apps/vite/src/App.tsx
index 5f0bd5dbb..3f9dce694 100644
--- a/apps/vite/src/App.tsx
+++ b/apps/vite/src/App.tsx
@@ -1,6 +1,8 @@
+import React from 'react';
 import React, { StrictMode } from 'react';
 import ReactDOM from 'react-dom/client';
 import { RouterProvider, createRouter } from '@tanstack/react-router';
+import * as WebBrowser from 'expo-web-browser';
 import './styles/global.css';
 
 // Import the generated route tree
@@ -16,7 +18,6 @@ declare module '@tanstack/react-router' {
   }
 }
 
-import * as WebBrowser from 'expo-web-browser';
 WebBrowser.maybeCompleteAuthSession();
 
 // Render the app
diff --git a/apps/vite/src/routes/__root.tsx b/apps/vite/src/routes/__root.tsx
index bfa6a10bf..e1e14a1a9 100644
--- a/apps/vite/src/routes/__root.tsx
+++ b/apps/vite/src/routes/__root.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import { MainContentWeb } from '@packrat/ui';
 import { createRootRoute, Link, Outlet } from '@tanstack/react-router';
 import { TanStackRouterDevtools } from '@tanstack/router-devtools';
diff --git a/apps/vite/src/routes/about/index.lazy.tsx b/apps/vite/src/routes/about/index.lazy.tsx
index 59074ce87..4f529cc6f 100644
--- a/apps/vite/src/routes/about/index.lazy.tsx
+++ b/apps/vite/src/routes/about/index.lazy.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import About from 'app/screens/about';
 import { Platform, ScrollView, StyleSheet } from 'react-native';
 import { createLazyFileRoute } from '@tanstack/react-router';
diff --git a/apps/vite/src/routes/appearance/index.lazy.tsx b/apps/vite/src/routes/appearance/index.lazy.tsx
index 8b4f7ad0d..2d157cbd6 100644
--- a/apps/vite/src/routes/appearance/index.lazy.tsx
+++ b/apps/vite/src/routes/appearance/index.lazy.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import AppearanceContainer from 'app/screens/appearance/AppearanceContainer';
 import { AuthWrapper } from 'app/auth/AuthWrapper';
 import { createLazyFileRoute } from '@tanstack/react-router';
diff --git a/apps/vite/src/routes/dashboard/index.lazy.tsx b/apps/vite/src/routes/dashboard/index.lazy.tsx
index 18714b253..c073aa57e 100644
--- a/apps/vite/src/routes/dashboard/index.lazy.tsx
+++ b/apps/vite/src/routes/dashboard/index.lazy.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import Dashboard from 'app/screens/dashboard';
 
 import { AuthWrapper } from 'app/auth/AuthWrapper';
diff --git a/apps/vite/src/routes/destination/query.lazy.tsx b/apps/vite/src/routes/destination/query.lazy.tsx
index d077237c5..dd5171124 100644
--- a/apps/vite/src/routes/destination/query.lazy.tsx
+++ b/apps/vite/src/routes/destination/query.lazy.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import { DestinationPage } from 'app/components/destination';
 import { AuthWrapper } from 'app/auth/AuthWrapper';
 // import DestinationPage from "../../components/destination";
diff --git a/apps/vite/src/routes/feed/index.lazy.tsx b/apps/vite/src/routes/feed/index.lazy.tsx
index 6c40a24f3..72b518e2d 100644
--- a/apps/vite/src/routes/feed/index.lazy.tsx
+++ b/apps/vite/src/routes/feed/index.lazy.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import Feed from 'app/screens/feed/Feed';
 import { AuthWrapper } from 'app/auth/AuthWrapper';
 import { createLazyFileRoute } from '@tanstack/react-router';
diff --git a/apps/vite/src/routes/items/index.lazy.tsx b/apps/vite/src/routes/items/index.lazy.tsx
index 7eb7e0be1..c6f6d534e 100644
--- a/apps/vite/src/routes/items/index.lazy.tsx
+++ b/apps/vite/src/routes/items/index.lazy.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import Items from 'app/screens/items';
 import { AuthWrapper } from 'app/auth/AuthWrapper';
 import { createLazyFileRoute } from '@tanstack/react-router';
diff --git a/apps/vite/src/routes/map/index.lazy.tsx b/apps/vite/src/routes/map/index.lazy.tsx
index 161479204..18c39af86 100644
--- a/apps/vite/src/routes/map/index.lazy.tsx
+++ b/apps/vite/src/routes/map/index.lazy.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 // import Map from "app/screens/map";
 
 // export default Map;
diff --git a/apps/vite/src/routes/maps/index.lazy.tsx b/apps/vite/src/routes/maps/index.lazy.tsx
index 71a4a669a..0fb409e3c 100644
--- a/apps/vite/src/routes/maps/index.lazy.tsx
+++ b/apps/vite/src/routes/maps/index.lazy.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 // import DownloadedMaps from "app/screens/maps";
 
 // export default DownloadedMaps;
diff --git a/apps/vite/src/routes/password-reset/index.lazy.tsx b/apps/vite/src/routes/password-reset/index.lazy.tsx
index a056d5f8d..6789d8e08 100644
--- a/apps/vite/src/routes/password-reset/index.lazy.tsx
+++ b/apps/vite/src/routes/password-reset/index.lazy.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import { RequestPasswordReset } from 'app/components/password-reset';
 import { createLazyFileRoute } from '@tanstack/react-router';
 
diff --git a/apps/vite/src/routes/profile/$id.lazy.tsx b/apps/vite/src/routes/profile/$id.lazy.tsx
index 4be85a3a7..7827f7219 100644
--- a/apps/vite/src/routes/profile/$id.lazy.tsx
+++ b/apps/vite/src/routes/profile/$id.lazy.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import ProfileContainer from 'app/screens/user/ProfileContainer';
 import { useProfileId } from 'app/hooks/user';
 
diff --git a/apps/vite/src/routes/profile/index.lazy.tsx b/apps/vite/src/routes/profile/index.lazy.tsx
index aeb0a6b87..97980da80 100644
--- a/apps/vite/src/routes/profile/index.lazy.tsx
+++ b/apps/vite/src/routes/profile/index.lazy.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import ProfileContainer from 'app/screens/user/ProfileContainer';
 import { AuthWrapper } from 'app/auth/AuthWrapper';
 import { createLazyFileRoute } from '@tanstack/react-router';
diff --git a/apps/vite/src/routes/profile/settings/index.lazy.tsx b/apps/vite/src/routes/profile/settings/index.lazy.tsx
index eb66e299d..81fa5b327 100644
--- a/apps/vite/src/routes/profile/settings/index.lazy.tsx
+++ b/apps/vite/src/routes/profile/settings/index.lazy.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import Settings from 'app/screens/user/Settings';
 import { AuthWrapper } from 'app/auth/AuthWrapper';
 import { createLazyFileRoute } from '@tanstack/react-router';
diff --git a/apps/vite/src/routes/trip/$tripId.lazy.tsx b/apps/vite/src/routes/trip/$tripId.lazy.tsx
index f9e0d97ef..6dbceaf97 100644
--- a/apps/vite/src/routes/trip/$tripId.lazy.tsx
+++ b/apps/vite/src/routes/trip/$tripId.lazy.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import { TripDetails } from 'app/screens/trip/TripDetails';
 import { AuthWrapper } from 'app/auth/AuthWrapper';
 import { createLazyFileRoute } from '@tanstack/react-router';
diff --git a/apps/vite/src/routes/trip/create.lazy.tsx b/apps/vite/src/routes/trip/create.lazy.tsx
index 22c47a745..301a10bae 100644
--- a/apps/vite/src/routes/trip/create.lazy.tsx
+++ b/apps/vite/src/routes/trip/create.lazy.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import CreateTrip from 'app/screens/trip/createTrip';
 import { AuthWrapper } from 'app/auth/AuthWrapper';
 import { createLazyFileRoute } from '@tanstack/react-router';
diff --git a/apps/vite/src/routes/trips/index.lazy.tsx b/apps/vite/src/routes/trips/index.lazy.tsx
index 5d900fdf7..f08be7c17 100644
--- a/apps/vite/src/routes/trips/index.lazy.tsx
+++ b/apps/vite/src/routes/trips/index.lazy.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import Feed from 'app/screens/feed/Feed';
 import { AuthWrapper } from 'app/auth/AuthWrapper';
 import { createLazyFileRoute } from '@tanstack/react-router';

From e9ab1a102a9bafe48110ecd9c395a1ae8912823b Mon Sep 17 00:00:00 2001
From: Taron <taron.aleksanyan.20@gmail.com>
Date: Thu, 18 Jul 2024 09:11:09 +0400
Subject: [PATCH 231/257] fix profile screen crash

---
 apps/expo/app/(app)/(drawer)/(tabs)/(stack)/profile/[id].tsx | 2 +-
 apps/vite/src/App.tsx                                        | 1 -
 packages/app/components/user/UserDataCard.tsx                | 4 +++-
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/profile/[id].tsx b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/profile/[id].tsx
index 93782e9df..4ba12fd1b 100644
--- a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/profile/[id].tsx
+++ b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/profile/[id].tsx
@@ -21,7 +21,7 @@ const Profile = () => {
       )}
       <Stack.Screen
         options={{
-          title: `${userRealName}'s Profile`,
+          title: userRealName ? `${userRealName}'s Profile` : '',
         }}
       />
       <ProfileContainer id={id} />
diff --git a/apps/vite/src/App.tsx b/apps/vite/src/App.tsx
index 3f9dce694..17b4b017f 100644
--- a/apps/vite/src/App.tsx
+++ b/apps/vite/src/App.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import React, { StrictMode } from 'react';
 import ReactDOM from 'react-dom/client';
 import { RouterProvider, createRouter } from '@tanstack/react-router';
diff --git a/packages/app/components/user/UserDataCard.tsx b/packages/app/components/user/UserDataCard.tsx
index 95bd4831c..b8b7573c6 100644
--- a/packages/app/components/user/UserDataCard.tsx
+++ b/packages/app/components/user/UserDataCard.tsx
@@ -225,7 +225,9 @@ const UserDataCard = ({
                   fontWeight={400}
                 >
                   <AntDesign name="heart" size={16} color="red" />
-                  <View>{favorites_count}</View>
+                  <View>
+                    <RText>{favorites_count}</RText>
+                  </View>
                 </RStack>
               )}
             </View>

From 09d172d4c504a771928c456e005922b68e4484ef Mon Sep 17 00:00:00 2001
From: pinocchio-life-like <icbr19fl@gmail.com>
Date: Thu, 18 Jul 2024 08:35:29 +0300
Subject: [PATCH 232/257] password reset done

---
 .../passwordReset/handlePasswordReset.ts      | 34 ++++++++++++++++++
 .../passwordReset/requestPasswordReset.ts     | 35 +++++++++++++++----
 server/src/routes/index.ts                    |  4 +--
 server/src/routes/passwordResetRoutes.ts      |  4 +--
 4 files changed, 67 insertions(+), 10 deletions(-)

diff --git a/server/src/controllers/passwordReset/handlePasswordReset.ts b/server/src/controllers/passwordReset/handlePasswordReset.ts
index bed13dacf..120d905ef 100644
--- a/server/src/controllers/passwordReset/handlePasswordReset.ts
+++ b/server/src/controllers/passwordReset/handlePasswordReset.ts
@@ -3,6 +3,40 @@ import { publicProcedure } from '../../trpc';
 import { hashPassword, verifyPasswordResetToken } from '../../utils/user';
 import { User } from '../../drizzle/methods/User';
 
+export const handlePasswordReset = async (c) => {
+  try {
+    const token = c.req.params.token;
+    const { password } = await c.req.parseBody();
+    const { env } = c;
+    const userClass = new User();
+    const email = await verifyPasswordResetToken(token, env.JWT_SECRET);
+    const hashedPassword = await hashPassword(env.JWT_SECRET, password);
+    const user = await userClass.findUser({ email });
+
+    if (!user) {
+      return { error: 'No user found with this email address' };
+    }
+
+    if (!user.passwordResetTokenExpiration) {
+      return { error: 'Password reset token expiration is not defined' };
+    }
+
+    if (Date.now() > user.passwordResetTokenExpiration.getTime()) {
+      return { error: 'Password reset token has expired' };
+    }
+    await userClass.update({
+      id: user.id,
+      password: hashedPassword,
+      passwordResetToken: null,
+      passwordResetTokenExpiration: null,
+    });
+
+    return { message: 'Password reset successful' };
+  } catch (error) {
+    return { error: `Failed to reset password: ${error.message}` };
+  }
+};
+
 export function handlePasswordResetRoute() {
   return publicProcedure
     .input(z.object({ token: z.string(), password: z.string() }))
diff --git a/server/src/controllers/passwordReset/requestPasswordReset.ts b/server/src/controllers/passwordReset/requestPasswordReset.ts
index 4e0ded705..a6b94efbc 100644
--- a/server/src/controllers/passwordReset/requestPasswordReset.ts
+++ b/server/src/controllers/passwordReset/requestPasswordReset.ts
@@ -3,12 +3,35 @@ import { z } from 'zod';
 import { resetEmail } from '../../utils/accountEmail';
 import { User } from '../../drizzle/methods/User';
 
-/**
- * Sends a password reset email to the user and updates the user's password reset token.
- * @param {Object} req - The HTTP request object.
- * @param {Object} res - The HTTP response object.
- * @return {Object} The HTTP response object with a success message or an error message.
- */
+export const requestPasswordResetEmailAndToken = async (c) => {
+  try {
+    const { email } = await c.req.parseBody();
+    const userClass = new User();
+    const jwtSecret = c.env.JWT_SECRET;
+    const clientUrl = c.env.CLIENT_URL;
+    const user = await userClass.findUser({ email });
+    if (!user) {
+      return { error: 'No user found with this email address' };
+    }
+    const resetUrl = await userClass.generateResetToken(
+      jwtSecret,
+      clientUrl,
+      user.id,
+    );
+    await resetEmail(
+      email,
+      resetUrl,
+      c.env.STMP_EMAIL,
+      c.env.SEND_GRID_API_KEY,
+    );
+    return c.json({ message: 'Password reset email sent successfully' }, 200);
+  } catch (error) {
+    return c.json(
+      { error: `Failed to send password reset email: ${error.message}` },
+      500,
+    );
+  }
+};
 
 export function requestPasswordResetEmailAndTokenRoute() {
   return publicProcedure
diff --git a/server/src/routes/index.ts b/server/src/routes/index.ts
index acb3a05a6..404b86180 100644
--- a/server/src/routes/index.ts
+++ b/server/src/routes/index.ts
@@ -9,7 +9,7 @@ import weatherRoutes from './weatherRoutes';
 // import getParkRoutes from './getParkRoutes';
 // import getTrailRoutes from './getTrailRoutes';
 // import osmRoutes from './osmRoutes';
-// import passwordResetRoutes from './passwordResetRoutes';
+import passwordResetRoutes from './passwordResetRoutes';
 // import openAiRoutes from './openAiRoutes';
 import templateRoutes from './templateRoutes';
 // import favoriteRouters from './favoriteRoutes';
@@ -54,7 +54,7 @@ router.route('/weather', weatherRoutes);
 // router.use('/getparks', getParkRoutes);
 // router.use('/gettrails', getTrailRoutes);
 // router.use('/osm', osmRoutes);
-// router.use('/password-reset', passwordResetRoutes);
+router.route('/password-reset', passwordResetRoutes);
 // router.use('/openai', openAiRoutes);
 router.route('/template', templateRoutes);
 // router.use('/favorite', favoriteRouters);
diff --git a/server/src/routes/passwordResetRoutes.ts b/server/src/routes/passwordResetRoutes.ts
index e3bd3a899..bacbcc40c 100644
--- a/server/src/routes/passwordResetRoutes.ts
+++ b/server/src/routes/passwordResetRoutes.ts
@@ -1,7 +1,7 @@
 import { Hono } from 'hono';
 import {
-  requestPasswordResetEmailAndTokenRoute as requestPasswordResetEmailAndToken,
-  handlePasswordResetRoute as handlePasswordReset,
+  requestPasswordResetEmailAndToken,
+  handlePasswordReset,
 } from '../controllers/passwordReset/index';
 import { tryCatchWrapper } from '../helpers/tryCatchWrapper';
 

From ec55bc62027055273d5ee4575f9441159c0080a1 Mon Sep 17 00:00:00 2001
From: pinocchio-life-like <icbr19fl@gmail.com>
Date: Thu, 18 Jul 2024 09:03:41 +0300
Subject: [PATCH 233/257] openai done

---
 .../src/validations/openAIRoutesValidator.ts  |  6 ++
 .../src/controllers/openAi/getAIResponse.ts   | 28 ++++++--
 .../controllers/openAi/getAISuggestions.ts    | 30 ++++++--
 server/src/controllers/openAi/getUserChats.ts | 31 +++-----
 server/src/routes/index.ts                    |  5 +-
 server/src/routes/openAiRoutes.ts             | 71 +++++--------------
 6 files changed, 80 insertions(+), 91 deletions(-)

diff --git a/packages/validations/src/validations/openAIRoutesValidator.ts b/packages/validations/src/validations/openAIRoutesValidator.ts
index d19daa4fb..baa658c72 100644
--- a/packages/validations/src/validations/openAIRoutesValidator.ts
+++ b/packages/validations/src/validations/openAIRoutesValidator.ts
@@ -10,3 +10,9 @@ export const getUserChats = z.object({
   userId: z.string(),
   itemTypeId: z.string(),
 });
+
+export const getAISuggestions = z.object({
+  userId: z.string(),
+  itemTypeId: z.string(),
+  type: z.string(),
+});
diff --git a/server/src/controllers/openAi/getAIResponse.ts b/server/src/controllers/openAi/getAIResponse.ts
index c0c565c8e..ded9d2b7a 100644
--- a/server/src/controllers/openAi/getAIResponse.ts
+++ b/server/src/controllers/openAi/getAIResponse.ts
@@ -2,13 +2,29 @@ import { getAIResponseService } from '../../services/openAi/openAi.service';
 import { publicProcedure, protectedProcedure } from '../../trpc';
 import { z } from 'zod';
 
-/**
- * Retrieves an AI response based on user input and conversation history.
- * @param {Object} req - The request object.
- * @param {Object} res - The response object.
- * @return {Object} The AI response and updated conversation object.
- */
+interface AIResponseServiceResult {
+  aiResponse: any;
+  conversation: any;
+}
 
+export const getAIResponse = async (c) => {
+  try {
+    const { userId, userInput, itemTypeId, type } = await c.req.parseBody();
+    const { aiResponse, conversation } = (await getAIResponseService(
+      userId,
+      itemTypeId,
+      userInput,
+      type,
+      c.env.OPENAI_API_KEY,
+    )) as AIResponseServiceResult;
+    return c.json({ aiResponse, conversation });
+  } catch (error) {
+    return c.json(
+      { error: `Failed to get AI response: ${error.message}` },
+      500,
+    );
+  }
+};
 export function getAIResponseRoute() {
   return protectedProcedure
     .input(
diff --git a/server/src/controllers/openAi/getAISuggestions.ts b/server/src/controllers/openAi/getAISuggestions.ts
index e7566753c..297ba7101 100644
--- a/server/src/controllers/openAi/getAISuggestions.ts
+++ b/server/src/controllers/openAi/getAISuggestions.ts
@@ -1,13 +1,29 @@
 import { getAISuggestionService } from '../../services/openAi/openAi.service';
-import { publicProcedure, protectedProcedure } from '../../trpc';
+import { protectedProcedure } from '../../trpc';
 import { z } from 'zod';
 
-/**
- * Retrieves an AI response based on user input and conversation history.
- * @param {Object} req - The request object.
- * @param {Object} res - The response object.
- * @return {Object} The AI response and updated conversation object.
- */
+interface AIResponseServiceResult {
+  aiResponse: any;
+  refined: any;
+}
+
+export const getAISuggestions = async (c) => {
+  try {
+    const { userId, itemTypeId, type } = await c.req.parseBody();
+    const { aiResponse, refined } = (await getAISuggestionService(
+      userId,
+      itemTypeId,
+      type,
+      c.env.OPENAI_API_KEY,
+    )) as AIResponseServiceResult;
+    return c.json({ aiResponse, refined });
+  } catch (error) {
+    return c.json(
+      { error: `Failed to get AI response: ${error.message}` },
+      500,
+    );
+  }
+};
 
 export function getAISuggestionsRoute() {
   return protectedProcedure
diff --git a/server/src/controllers/openAi/getUserChats.ts b/server/src/controllers/openAi/getUserChats.ts
index ae25769b7..76dbcd7fb 100644
--- a/server/src/controllers/openAi/getUserChats.ts
+++ b/server/src/controllers/openAi/getUserChats.ts
@@ -1,27 +1,16 @@
-import { publicProcedure, protectedProcedure } from '../../trpc';
-import { FailedToRetrieveUserChats } from '../../helpers/errors';
-import { responseHandler } from '../../helpers/responseHandler';
+import { protectedProcedure } from '../../trpc';
 import { getUserChatsService } from '../../services/openAi/openAi.service';
 import { z } from 'zod';
 
-/**
- * Retrieves the chats of a user.
- * @param {string} req.params.userId - The ID of the user.
- * @param {string} req.params.itemTypeId - The ID of the pack or trip.
- * @returns {object} The conversations of the user.
- */
-// export const getUserChats = async (req, res, next) => {
-//   try {
-//     const { userId, itemTypeId } = req.params;
-
-//     const result = await getUserChatsService(userId, itemTypeId);
-
-//     res.locals.data = result;
-//     responseHandler(res);
-//   } catch (error) {
-//     next(FailedToRetrieveUserChats);
-//   }
-// };
+export const getUserChats = async (c) => {
+  try {
+    const { userId, itemTypeId } = await c.req.parseBody();
+    const conversations = getUserChatsService(userId, itemTypeId);
+    return c.json({ conversations });
+  } catch (error) {
+    return c.json({ error: `Failed to get user chats: ${error.message}` }, 500);
+  }
+};
 
 export function getUserChatsRoute() {
   return protectedProcedure
diff --git a/server/src/routes/index.ts b/server/src/routes/index.ts
index 404b86180..aef00e221 100644
--- a/server/src/routes/index.ts
+++ b/server/src/routes/index.ts
@@ -10,7 +10,7 @@ import weatherRoutes from './weatherRoutes';
 // import getTrailRoutes from './getTrailRoutes';
 // import osmRoutes from './osmRoutes';
 import passwordResetRoutes from './passwordResetRoutes';
-// import openAiRoutes from './openAiRoutes';
+import openAiRoutes from './openAiRoutes';
 import templateRoutes from './templateRoutes';
 // import favoriteRouters from './favoriteRoutes';
 import userRoutes from './userRoutes';
@@ -55,10 +55,9 @@ router.route('/weather', weatherRoutes);
 // router.use('/gettrails', getTrailRoutes);
 // router.use('/osm', osmRoutes);
 router.route('/password-reset', passwordResetRoutes);
-// router.use('/openai', openAiRoutes);
+router.route('/openai', openAiRoutes);
 router.route('/template', templateRoutes);
 // router.use('/favorite', favoriteRouters);
-// router.use('/openai', openAiRoutes);
 router.route('/mapPreview', mapPreviewRouter);
 router.route('/health', healthRoutes);
 
diff --git a/server/src/routes/openAiRoutes.ts b/server/src/routes/openAiRoutes.ts
index aa633c6c6..fe4991755 100644
--- a/server/src/routes/openAiRoutes.ts
+++ b/server/src/routes/openAiRoutes.ts
@@ -1,8 +1,9 @@
 import { Hono } from 'hono';
 import * as validator from '@packrat/validations';
 import {
-  getAIResponseRoute as getAIResponse,
-  getUserChatsRoute as getUserChats,
+  getAIResponse,
+  getUserChats,
+  getAISuggestions,
 } from '../controllers/openAi/index';
 import { tryCatchWrapper } from '../helpers/tryCatchWrapper';
 import authTokenMiddleware from '../middleware/auth';
@@ -11,66 +12,28 @@ import { zodParser } from '../middleware/validators/zodParser';
 
 const router = new Hono();
 
-/**
- * @swagger
- * /openai/ai-response:
- *   post:
- *     summary: Generate AI response based on user input and conversation history
- *     tags: [AI]
- *     requestBody:
- *       required: true
- *       content:
- *         application/json:
- *           schema:
- *             type: object
- *             properties:
- *               userId:
- *                 type: string
- *                 description: The user's ID.
- *               conversationId:
- *                 type: string
- *                 description: The conversation's ID.
- *               userInput:
- *authTokenMiddleware as any,as any,e: string
- *                 description: The user's input message.
- *             example:
- *               userId: "user1"
- *               conversationId: "conversation1"
- *               userInput: "Hello, AI!"
- *     responses:
- *       200:
- *         description: The AI's response message
- *         content:
- *           application/json:
- *             schema:
- *               type: object
- *               properties:
- *                 aiResponse:
- *                   type: string
- *                   description: The AI's response message.
- *                 conversationHistory:
- *                   type: string
- *                   description: The complete conversation history, including the new messages.
- *               example:
- *                 aiResponse: "Hello, user!"
- *                 conversationHistory: "User: Hello, AI!\nAI: Hello, user!"
- */
 router.post(
   '/ai-response',
-  authTokenMiddleware as any,
-  checkRole(['user', 'admin']) as any,
-  ((req, res, next) =>
-    zodParser(validator.getAIResponse, req.body, next)) as any,
+  authTokenMiddleware,
+  checkRole(['user', 'admin']),
+  zodParser(validator.getAIResponse, 'body'),
   tryCatchWrapper(getAIResponse),
 );
 
 router.get(
   '/user-chats/:userId',
-  authTokenMiddleware as any,
-  checkRole(['user', 'admin']) as any,
-  ((req, res, next) =>
-    zodParser(validator.getUserChats, req.body, next)) as any,
+  authTokenMiddleware,
+  checkRole(['user', 'admin']),
+  zodParser(validator.getUserChats, 'body'),
   tryCatchWrapper(getUserChats),
 );
 
+router.post(
+  '/ai-suggestions',
+  authTokenMiddleware,
+  checkRole(['user', 'admin']),
+  zodParser(validator.getAISuggestions, 'body'),
+  tryCatchWrapper(getAISuggestions),
+);
+
 export default router;

From 8e81208355c216f426dc85518c2d2dc2cb7048f1 Mon Sep 17 00:00:00 2001
From: Muhammad Hassan <mh7722178@gmail.com>
Date: Thu, 18 Jul 2024 15:19:54 +0500
Subject: [PATCH 234/257] ALL Controllers Done

---
 .../controllers/getOsm/getPhotonDetails.ts    | 18 +++++++
 .../controllers/getOsm/getPhotonResults.ts    | 17 +++++++
 server/src/controllers/getOsm/getTrailsOSM.ts | 22 ++++++++
 .../controllers/getOsm/postSingleGeoJSON.ts   | 17 +++++++
 server/src/controllers/getParks/getParks.ts   | 23 +++++++++
 server/src/controllers/getTrail/getTrails.ts  | 36 +++++++++++++
 .../controllers/item/addGlobalItemToPack.ts   | 18 +++++++
 server/src/controllers/item/addItem.ts        | 32 ++++++++++++
 server/src/controllers/item/addItemGlobal.ts  | 26 ++++++++++
 .../src/controllers/item/deleteGlobalItem.ts  | 13 +++++
 server/src/controllers/item/deleteItem.ts     | 13 +++++
 .../item/editGlobalItemAsDuplicate.ts         | 23 +++++++++
 server/src/controllers/item/editItem.ts       | 19 +++++++
 server/src/controllers/item/getItemById.ts    | 14 ++++++
 server/src/controllers/item/getItems.ts       | 14 ++++++
 .../src/controllers/item/getItemsGlobally.ts  | 14 ++++++
 .../src/controllers/item/searchItemsByName.ts | 14 ++++++
 server/src/controllers/mapPreview/index.ts    |  7 ++-
 server/src/helpers/responseHandler.ts         | 23 ++++++---
 server/src/index.ts                           |  4 +-
 server/src/middleware/validators/zodParser.ts |  2 +-
 server/src/routes/getParkRoutes.ts            |  4 +-
 server/src/routes/getTrailRoutes.ts           |  5 +-
 server/src/routes/itemRoutes.ts               | 50 +++++++++----------
 server/src/routes/osmRoutes.ts                |  8 +--
 25 files changed, 391 insertions(+), 45 deletions(-)

diff --git a/server/src/controllers/getOsm/getPhotonDetails.ts b/server/src/controllers/getOsm/getPhotonDetails.ts
index 409cb5d44..7b254c798 100644
--- a/server/src/controllers/getOsm/getPhotonDetails.ts
+++ b/server/src/controllers/getOsm/getPhotonDetails.ts
@@ -6,6 +6,7 @@ import { responseHandler } from '../../helpers/responseHandler';
 import { z } from 'zod';
 import { publicProcedure, protectedProcedure } from '../../trpc';
 import { getPhotonDetailsService } from '../../services/osm/getPhotonDetailsService';
+import { Context } from 'hono';
 
 /**
  * Retrieves Photon details based on the provided ID and type.
@@ -27,6 +28,23 @@ import { getPhotonDetailsService } from '../../services/osm/getPhotonDetailsServ
 //   }
 // };
 
+export async function getPhotonDetails(ctx: Context) {
+  try {
+    const { id, type } = await ctx.req.param();
+    const { env }: any = ctx;
+    const response = await getPhotonDetailsService(id, type, env.OSM_URI);
+    if (!response) {
+      ctx.set('data', { data: 'No Photons Details Found' });
+      return await responseHandler(ctx);
+    }
+    ctx.set('data', { data: response });
+    return await responseHandler(ctx);
+  } catch (error) {
+    ctx.set('error', { error: error.message });
+    return await responseHandler(ctx);
+  }
+}
+
 export function getPhotonDetailsRoute() {
   return protectedProcedure
     .input(
diff --git a/server/src/controllers/getOsm/getPhotonResults.ts b/server/src/controllers/getOsm/getPhotonResults.ts
index a4baece7b..4b85dd9ab 100644
--- a/server/src/controllers/getOsm/getPhotonResults.ts
+++ b/server/src/controllers/getOsm/getPhotonResults.ts
@@ -8,6 +8,7 @@ import { publicProcedure, protectedProcedure } from '../../trpc';
 import { z } from 'zod';
 // import * as validators from '@packrat/validations';
 import * as validator from '@packrat/validations';
+import { type Context } from 'hono';
 
 /**
  * Retrieves Photon results based on a search string.
@@ -29,6 +30,22 @@ import * as validator from '@packrat/validations';
 //   }
 // };
 
+export async function getPhotonResults(ctx: Context) {
+  try {
+    const { searchString } = await ctx.req.query();
+    const response = await getPhotonResultsService(searchString);
+    if (!response) {
+      ctx.set('data', { data: 'No Phontons Found' });
+      return await responseHandler(ctx);
+    }
+    ctx.set('data', { data: response.features });
+    return await responseHandler(ctx);
+  } catch (error) {
+    ctx.set('error', error.message);
+    return await responseHandler(ctx);
+  }
+}
+
 export function getPhotonResultsRoute() {
   return protectedProcedure
     .input(validator.getPhotonResults)
diff --git a/server/src/controllers/getOsm/getTrailsOSM.ts b/server/src/controllers/getOsm/getTrailsOSM.ts
index df4f1ec0a..ee3b9eefe 100644
--- a/server/src/controllers/getOsm/getTrailsOSM.ts
+++ b/server/src/controllers/getOsm/getTrailsOSM.ts
@@ -8,6 +8,7 @@ import { publicProcedure, protectedProcedure } from '../../trpc';
 import * as z from 'zod';
 // import * as validators from '@packrat/validations';
 import * as validator from '@packrat/validations';
+import { type Context } from 'hono';
 
 /**
  * Retrieves trails data from OpenStreetMap (OSM) based on the provided latitude, longitude, and radius.
@@ -30,6 +31,27 @@ import * as validator from '@packrat/validations';
 //   }
 // };
 
+export async function getTrailsOSM(ctx: Context) {
+  try {
+    const {
+      lat = 45.5231,
+      lon = -122.6765,
+      radius = 50000,
+    } = await ctx.req.json();
+    const { env }: any = ctx;
+    const response = await getTrailsOsmService(env.OSM_URI, lat, lon, radius);
+    if (!response) {
+      ctx.set('data', { data: 'No Trails Found' });
+      return await responseHandler(ctx);
+    }
+    ctx.set('data', { data: response });
+    return await responseHandler(ctx);
+  } catch (error) {
+    ctx.set('error', { error: error.message });
+    return await responseHandler(ctx);
+  }
+}
+
 export function getTrailsOSMRoute() {
   return protectedProcedure
     .input(validator.getTrailsOSM)
diff --git a/server/src/controllers/getOsm/postSingleGeoJSON.ts b/server/src/controllers/getOsm/postSingleGeoJSON.ts
index 0104bbe77..49dde9e94 100644
--- a/server/src/controllers/getOsm/postSingleGeoJSON.ts
+++ b/server/src/controllers/getOsm/postSingleGeoJSON.ts
@@ -2,6 +2,7 @@ import { publicProcedure, protectedProcedure } from '../../trpc';
 import { responseHandler } from '../../helpers/responseHandler';
 import { postSingleGeoJSONService } from '../../services/osm/osm.service';
 import { z } from 'zod';
+import { type Context } from 'hono';
 
 /**
  * Handles the POST request for a single GeoJSON.
@@ -18,6 +19,22 @@ import { z } from 'zod';
 //   responseHandler(res);
 // };
 
+export async function postSingleGeoJSON(ctx: Context) {
+  try {
+    const { geojson } = await ctx.req.json();
+    const response = await postSingleGeoJSONService(geojson);
+    if (!response) {
+      ctx.set('data', { data: 'No Post Single GeoJson Found' });
+      return await responseHandler(ctx);
+    }
+    ctx.set('data', { data: response });
+    return await responseHandler(ctx);
+  } catch (error) {
+    ctx.set('error', { error: error.message });
+    return await responseHandler(ctx);
+  }
+}
+
 export function postSingleGeoJSONRoute() {
   return protectedProcedure
     .input(z.object({ geojson: z.any() }))
diff --git a/server/src/controllers/getParks/getParks.ts b/server/src/controllers/getParks/getParks.ts
index f71ca7258..743cd6b32 100644
--- a/server/src/controllers/getParks/getParks.ts
+++ b/server/src/controllers/getParks/getParks.ts
@@ -2,6 +2,7 @@ import { publicProcedure, protectedProcedure } from '../../trpc';
 import { responseHandler } from '../../helpers/responseHandler';
 import * as validators from '@packrat/validations';
 import { getParksService } from '../../services/parks/getParksService';
+import { type Context } from 'hono';
 
 /**
  * Retrieves a list of parks based on the specified state code.
@@ -15,6 +16,28 @@ import { getParksService } from '../../services/parks/getParksService';
 //   responseHandler(res);
 // };
 
+export async function getParks(ctx: Context) {
+  try {
+    const { abbrState } = await ctx.req.json();
+    const { env }: any = ctx;
+    const response = await getParksService({
+      abbrStates: abbrState,
+      rapidApiKey: env.X_RAPIDAPI_KEY,
+      npsApi: env.NPS_API,
+      parksHost: env.PARKS_HOST,
+    });
+    if (!response) {
+      ctx.set('data', { data: 'No Parks Found' });
+      return await responseHandler(ctx);
+    }
+    ctx.set('data', { data: response });
+    return await responseHandler(ctx);
+  } catch (error) {
+    ctx.set('error', error.message);
+    return await responseHandler(ctx);
+  }
+}
+
 export function getParksRoute() {
   return protectedProcedure.input(validators.getParks).query(async (opts) => {
     const { abbrState } = opts.input;
diff --git a/server/src/controllers/getTrail/getTrails.ts b/server/src/controllers/getTrail/getTrails.ts
index c1a68da61..7e4b8eacc 100644
--- a/server/src/controllers/getTrail/getTrails.ts
+++ b/server/src/controllers/getTrail/getTrails.ts
@@ -3,6 +3,7 @@ import { responseHandler } from '../../helpers/responseHandler';
 import * as validators from '@packrat/validations';
 import { getTrailsService } from '../../services/trails/getTrailsService';
 import { z } from 'zod';
+import { Context } from 'hono';
 
 /**
  * Retrieves trails based on the provided parameters.
@@ -33,6 +34,41 @@ import { z } from 'zod';
 //   responseHandler(res);
 // };
 
+export async function getTrails(ctx: Context) {
+  try {
+    const radiusParams = 25;
+    const activityParams = true;
+    const {
+      administrative_area_level_1,
+      country,
+      locality,
+      latitude,
+      longitude,
+    } = await ctx.req.json();
+    const { env }: any = ctx;
+    const response = await getTrailsService({
+      trailRootUrl: env.GET_TRAIL_ROOT_URL,
+      xRapidapiKey: env.X_RAPIDAPI_KEY,
+      administrative_area_level_1,
+      country,
+      locality,
+      latitude,
+      longitude,
+      radiusParams,
+      activityParams,
+    });
+    if (!response) {
+      ctx.set('data', 'No Trails Found');
+      return await responseHandler(ctx);
+    }
+    ctx.set('data', response);
+    return await responseHandler(ctx);
+  } catch (error) {
+    ctx.set('error', error.message);
+    return await responseHandler(ctx);
+  }
+}
+
 export function getTrailsRoute() {
   return protectedProcedure
     .input(
diff --git a/server/src/controllers/item/addGlobalItemToPack.ts b/server/src/controllers/item/addGlobalItemToPack.ts
index dc338a764..6028266c6 100644
--- a/server/src/controllers/item/addGlobalItemToPack.ts
+++ b/server/src/controllers/item/addGlobalItemToPack.ts
@@ -1,6 +1,8 @@
 import { publicProcedure, protectedProcedure } from '../../trpc';
 import { addGlobalItemToPackService } from '../../services/item/item.service';
 import { z } from 'zod';
+import { type Context } from 'hono';
+import { responseHandler } from '../../helpers/responseHandler';
 
 /**
  * Adds a global item to a pack.
@@ -22,6 +24,22 @@ import { z } from 'zod';
 //   }
 // };
 
+export async function addGlobalItemToPack(ctx: Context) {
+  try {
+    const { packId, itemId, ownerId } = await ctx.req.json();
+    const item = await addGlobalItemToPackService(packId, itemId, ownerId);
+    if (!item) {
+      ctx.set('data', { data: 'Cannot Convert Global Item To Pack' });
+      return await responseHandler(ctx);
+    }
+    ctx.set('data', item);
+    return await responseHandler(ctx);
+  } catch (error) {
+    ctx.set('error', error.message);
+    return await responseHandler(ctx);
+  }
+}
+
 export function addGlobalItemToPackRoute() {
   return protectedProcedure
     .input(
diff --git a/server/src/controllers/item/addItem.ts b/server/src/controllers/item/addItem.ts
index 966c114b3..d64942cf2 100644
--- a/server/src/controllers/item/addItem.ts
+++ b/server/src/controllers/item/addItem.ts
@@ -1,6 +1,8 @@
 import { publicProcedure, protectedProcedure } from '../../trpc';
 import { addItemService } from '../../services/item/item.service';
 import * as validator from '@packrat/validations';
+import { Context } from 'hono';
+import { responseHandler } from '../../helpers/responseHandler';
 
 /**
  * Adds an item to the database based on the provided request body.
@@ -29,6 +31,36 @@ import * as validator from '@packrat/validations';
 //   }
 // };
 
+export async function addItem(ctx: Context) {
+  try {
+    const { name, weight, quantity, unit, packId, type, ownerId } =
+      await ctx.req.json();
+
+    if (type !== 'Food' && type !== 'Water' && type !== 'Essentials') {
+      throw new Error('Invalid item type');
+    }
+
+    const result = await addItemService(
+      name,
+      weight,
+      quantity,
+      unit,
+      packId,
+      type,
+      ownerId,
+    );
+    if (!result) {
+      ctx.set('data', { data: 'cannot add item' });
+      return await responseHandler(ctx);
+    }
+    ctx.set('data', result);
+    return await responseHandler(ctx);
+  } catch (error) {
+    ctx.set('error', error.message);
+    return await responseHandler(ctx);
+  }
+}
+
 export function addItemRoute() {
   return protectedProcedure.input(validator.addItem).mutation(async (opts) => {
     const { name, weight, quantity, unit, packId, type, ownerId } = opts.input;
diff --git a/server/src/controllers/item/addItemGlobal.ts b/server/src/controllers/item/addItemGlobal.ts
index 04ebbb569..72d72e136 100644
--- a/server/src/controllers/item/addItemGlobal.ts
+++ b/server/src/controllers/item/addItemGlobal.ts
@@ -1,6 +1,8 @@
+import { type Context } from 'hono';
 import { addItemGlobalService } from '../../services/item/item.service';
 import { publicProcedure, protectedProcedure } from '../../trpc';
 import * as validator from '@packrat/validations';
+import { responseHandler } from '../../helpers/responseHandler';
 
 /**
  * Adds an item globally.
@@ -28,6 +30,30 @@ import * as validator from '@packrat/validations';
 //   }
 // };
 
+export async function addItemGlobal(ctx: Context) {
+  try {
+    const { name, weight, quantity, unit, type, ownerId } =
+      await ctx.req.json();
+    if (type !== 'Food' && type !== 'Water' && type !== 'Essentials') {
+      throw new Error('Invalid item type');
+    }
+
+    const item = await addItemGlobalService(
+      name,
+      weight,
+      quantity,
+      unit,
+      type,
+      ownerId,
+    );
+    ctx.set('data', item);
+    return await responseHandler(ctx);
+  } catch (error) {
+    ctx.set('error', error.message);
+    return await responseHandler(ctx);
+  }
+}
+
 export function addItemGlobalRoute() {
   return protectedProcedure
     .input(validator.addItemGlobal)
diff --git a/server/src/controllers/item/deleteGlobalItem.ts b/server/src/controllers/item/deleteGlobalItem.ts
index 929d9ae00..a47c1a12d 100644
--- a/server/src/controllers/item/deleteGlobalItem.ts
+++ b/server/src/controllers/item/deleteGlobalItem.ts
@@ -1,6 +1,8 @@
 import { publicProcedure, protectedProcedure } from '../../trpc';
 import { deleteGlobalItemService } from '../../services/item/item.service';
 import { z } from 'zod';
+import { type Context } from 'hono';
+import { responseHandler } from '../../helpers/responseHandler';
 
 /**
  * Deletes a global item.
@@ -21,6 +23,17 @@ import { z } from 'zod';
 //   }
 // };
 
+export async function deleteGlobalItem(ctx: Context) {
+  try {
+    const { itemId } = await ctx.req.param();
+    ctx.set('data', await deleteGlobalItemService(itemId));
+    return await responseHandler(ctx);
+  } catch (error) {
+    ctx.set('error', error.message);
+    return await responseHandler(ctx);
+  }
+}
+
 export function deleteGlobalItemRoute() {
   return protectedProcedure
     .input(
diff --git a/server/src/controllers/item/deleteItem.ts b/server/src/controllers/item/deleteItem.ts
index fac345058..67e1fd947 100644
--- a/server/src/controllers/item/deleteItem.ts
+++ b/server/src/controllers/item/deleteItem.ts
@@ -1,6 +1,8 @@
 import { deleteItemService } from '../../services/item/item.service';
 import * as validator from '@packrat/validations';
 import { publicProcedure, protectedProcedure } from '../../trpc';
+import { type Context } from 'hono';
+import { responseHandler } from '../../helpers/responseHandler';
 
 /**
  * Deletes an item from the database.
@@ -23,6 +25,17 @@ import { publicProcedure, protectedProcedure } from '../../trpc';
 //   }
 // };
 
+export async function deleteItem(ctx: Context) {
+  try {
+    const { itemId, packId } = await ctx.req.json();
+    ctx.set('data', await deleteItemService(itemId, packId));
+    return await responseHandler(ctx);
+  } catch (error) {
+    ctx.set('error', error.message);
+    return await responseHandler(ctx);
+  }
+}
+
 export function deleteItemRoute() {
   return protectedProcedure
     .input(validator.deleteItem)
diff --git a/server/src/controllers/item/editGlobalItemAsDuplicate.ts b/server/src/controllers/item/editGlobalItemAsDuplicate.ts
index 20185a6a6..5d162dcb2 100644
--- a/server/src/controllers/item/editGlobalItemAsDuplicate.ts
+++ b/server/src/controllers/item/editGlobalItemAsDuplicate.ts
@@ -1,6 +1,8 @@
 import { editGlobalItemAsDuplicateService } from '../../services/item/item.service';
 import { z } from 'zod';
 import { publicProcedure, protectedProcedure } from '../../trpc';
+import { type Context } from 'hono';
+import { responseHandler } from '../../helpers/responseHandler';
 
 /**
  * Edit a global item by duplicating it with new changes.
@@ -39,6 +41,27 @@ import { publicProcedure, protectedProcedure } from '../../trpc';
 //   }
 // };
 
+export async function editGlobalItemAsDuplicate(ctx: Context) {
+  try {
+    const { itemId, packId, name, weight, quantity, unit, type } =
+      await ctx.req.json();
+    const item = await editGlobalItemAsDuplicateService(
+      itemId,
+      packId,
+      name,
+      weight,
+      quantity,
+      unit,
+      type,
+    );
+    ctx.set('data', item);
+    return await responseHandler(ctx);
+  } catch (errpr) {
+    ctx.set('errpr', errpr.message);
+    return await responseHandler(ctx);
+  }
+}
+
 export function editGlobalItemAsDuplicateRoute() {
   return protectedProcedure
     .input(
diff --git a/server/src/controllers/item/editItem.ts b/server/src/controllers/item/editItem.ts
index 29d954d23..85ae70a94 100644
--- a/server/src/controllers/item/editItem.ts
+++ b/server/src/controllers/item/editItem.ts
@@ -1,6 +1,8 @@
 import { publicProcedure, protectedProcedure } from '../../trpc';
 import { editItemService } from '../../services/item/item.service';
 import * as validator from '@packrat/validations';
+import { type Context } from 'hono';
+import { responseHandler } from '../../helpers/responseHandler';
 
 // export const editItem = async (req, res, next) => {
 //   try {
@@ -22,6 +24,23 @@ import * as validator from '@packrat/validations';
 //   }
 // };
 
+export async function editItem(ctx: Context) {
+  try {
+    const { id, name, weight, unit, quantity, type } = await ctx.req.json();
+
+    if (type !== 'Food' && type !== 'Water' && type !== 'Essentials') {
+      throw new Error('Invalid item type');
+    }
+
+    const item = await editItemService(id, name, weight, unit, quantity, type);
+    ctx.set('data', item);
+    return await responseHandler(ctx);
+  } catch (error) {
+    ctx.set('error', error.message);
+    return await responseHandler(ctx);
+  }
+}
+
 export function editItemRoute() {
   return protectedProcedure.input(validator.editItem).mutation(async (opts) => {
     const { id, name, weight, unit, quantity, type } = opts.input;
diff --git a/server/src/controllers/item/getItemById.ts b/server/src/controllers/item/getItemById.ts
index 572959546..5411e6d6a 100644
--- a/server/src/controllers/item/getItemById.ts
+++ b/server/src/controllers/item/getItemById.ts
@@ -1,6 +1,8 @@
 import { publicProcedure, protectedProcedure } from '../../trpc';
 import { getItemByIdService } from '../../services/item/item.service';
 import * as validator from '@packrat/validations';
+import { type Context } from 'hono';
+import { responseHandler } from '../../helpers/responseHandler';
 
 /**
  * Retrieves an item by its ID.
@@ -22,6 +24,18 @@ import * as validator from '@packrat/validations';
 //   }
 // };
 
+export async function getItemById(ctx: Context) {
+  try {
+    const { id } = await ctx.req.param();
+    const item = await getItemByIdService(id);
+    ctx.set('data', item);
+    return await responseHandler(ctx);
+  } catch (error) {
+    ctx.set('error', error.message);
+    return await responseHandler(ctx);
+  }
+}
+
 export function getItemByIdRoute() {
   return protectedProcedure.input(validator.getItemById).query(async (opts) => {
     const { id } = opts.input;
diff --git a/server/src/controllers/item/getItems.ts b/server/src/controllers/item/getItems.ts
index 1dfbd1eab..ae76a21a3 100644
--- a/server/src/controllers/item/getItems.ts
+++ b/server/src/controllers/item/getItems.ts
@@ -1,6 +1,8 @@
 import { publicProcedure, protectedProcedure } from '../../trpc';
 import { getItemsService } from '../../services/item/item.service';
 import * as validator from '@packrat/validations';
+import { Context } from 'hono';
+import { responseHandler } from '../../helpers/responseHandler';
 
 /**
  * Retrieves a list of items associated with a pack.
@@ -22,6 +24,18 @@ import * as validator from '@packrat/validations';
 //   }
 // };
 
+export async function getItems(ctx: Context) {
+  try {
+    const { packId } = await ctx.req.json();
+    const items = await getItemsService(packId);
+    ctx.set('data', items);
+    return await responseHandler(ctx);
+  } catch (error) {
+    ctx.set('error', error.message);
+    return await responseHandler(ctx);
+  }
+}
+
 export function getItemsRoute() {
   return protectedProcedure.input(validator.getItems).query(async (opts) => {
     const { packId } = opts.input;
diff --git a/server/src/controllers/item/getItemsGlobally.ts b/server/src/controllers/item/getItemsGlobally.ts
index 259851e11..dcb986b77 100644
--- a/server/src/controllers/item/getItemsGlobally.ts
+++ b/server/src/controllers/item/getItemsGlobally.ts
@@ -1,6 +1,8 @@
 import { publicProcedure, protectedProcedure } from '../../trpc';
 import { getItemsGloballyService } from '../../services/item/item.service';
 import { z } from 'zod';
+import { type Context } from 'hono';
+import { responseHandler } from '../../helpers/responseHandler';
 
 /**
  * Retrieves globally available items.
@@ -9,6 +11,18 @@ import { z } from 'zod';
  * @return {Object} The items, page, and total pages.
  */
 
+export async function getItemsGlobally(ctx: Context) {
+  try {
+    const { limit, page, searchString } = await ctx.req.json();
+    const result = await getItemsGloballyService(limit, page, searchString);
+    ctx.set('data', { ...result, items: result.items });
+    return await responseHandler(ctx);
+  } catch (error) {
+    ctx.set('error', error.message);
+    return await responseHandler(ctx);
+  }
+}
+
 export function getItemsGloballyRoute() {
   return protectedProcedure
     .input(
diff --git a/server/src/controllers/item/searchItemsByName.ts b/server/src/controllers/item/searchItemsByName.ts
index 2aa5beeed..c2d8e5740 100644
--- a/server/src/controllers/item/searchItemsByName.ts
+++ b/server/src/controllers/item/searchItemsByName.ts
@@ -1,6 +1,8 @@
 import { publicProcedure, protectedProcedure } from '../../trpc';
 import { searchItemsByNameService } from '../../services/item/item.service';
 import { z } from 'zod';
+import { type Context } from 'hono';
+import { responseHandler } from '../../helpers/responseHandler';
 
 /**
  * Searches for items by name.
@@ -25,6 +27,18 @@ import { z } from 'zod';
 //   }
 // };
 
+export async function searchItemsByName(ctx: Context) {
+  try {
+    const { name } = await ctx.req.json();
+    const items = await searchItemsByNameService(name);
+    ctx.set('data', items);
+    return await responseHandler(ctx);
+  } catch (error) {
+    ctx.set('error', error.message);
+    return await responseHandler(ctx);
+  }
+}
+
 export function searchItemsByNameRoute() {
   return protectedProcedure
     .input(z.object({ name: z.string() }))
diff --git a/server/src/controllers/mapPreview/index.ts b/server/src/controllers/mapPreview/index.ts
index 1e3145185..9683ce5fe 100644
--- a/server/src/controllers/mapPreview/index.ts
+++ b/server/src/controllers/mapPreview/index.ts
@@ -1,6 +1,7 @@
 // import { MAPBOX_ACCESS_TOKEN } from '../../config';
 import { MapPreviewError } from '../../helpers/errors';
 import { type Context, type Next } from 'hono';
+import { responseHandler } from '../../helpers/responseHandler';
 
 /**
  *  Responds with map preview image from mapbox api
@@ -43,9 +44,13 @@ const getMapPreview = async (ctx: Context, next: Next) => {
 
     console.log('newResponse', newResponse);
 
-    return newResponse;
+    // return newResponse;
+    ctx.set('data', newResponse);
+    return await responseHandler(ctx);
   } catch (error) {
     console.log(error);
+    ctx.set('error', error.message);
+    return await responseHandler(ctx);
     // next(MapPreviewError);
   }
 };
diff --git a/server/src/helpers/responseHandler.ts b/server/src/helpers/responseHandler.ts
index 47033ee40..f5088ad87 100644
--- a/server/src/helpers/responseHandler.ts
+++ b/server/src/helpers/responseHandler.ts
@@ -1,10 +1,21 @@
 // Assuming responseHandler is a function intended to set headers and send a response in Hono
-export function responseHandler(c, message: string = 'Success') {
-  const data = c.locals?.data ?? { message: 'Success' };
+import { type Context } from 'hono';
 
-  // Set headers using Hono's method
-  c.header('X-Response-Message', message);
-  c.header('Access-Control-Expose-Headers', 'X-Response-Message');
+export async function responseHandler(
+  ctx: Context,
+  message: string = 'Success',
+) {
+  const data = ctx.get('data');
+  const error = ctx.get('error');
 
-  return c.json(data, 200);
+  ctx.header('X-Response-Message', message);
+  ctx.header('Access-Control-Expose-Headers', 'X-Response-Message');
+
+  console.log('message', message, data, error);
+
+  if (error) {
+    return await ctx.json({ error }, 400);
+  } else {
+    return await ctx.json(data ?? { message: 'Success' }, 200);
+  }
 }
diff --git a/server/src/index.ts b/server/src/index.ts
index 31492c067..7282f27cb 100644
--- a/server/src/index.ts
+++ b/server/src/index.ts
@@ -30,10 +30,10 @@ const app = new Hono<{ Bindings: Bindings }>();
 //  ref: https://hono.dev/middleware/builtin/compress
 
 // SETUP HTTPS Enforcement Middleware
-app.use('*', enforceHttps()); // Apply to all routes
+// app.use('*', enforceHttps()); // Apply to all routes
 
 // SETUP SECURITY HEADERS
-app.use('*', securityHeaders()); // Apply to all routes
+// app.use('*', securityHeaders()); // Apply to all routes
 
 // SETUP CORS
 app.use('*', async (c, next) => {
diff --git a/server/src/middleware/validators/zodParser.ts b/server/src/middleware/validators/zodParser.ts
index ebb4565ae..34b60d799 100644
--- a/server/src/middleware/validators/zodParser.ts
+++ b/server/src/middleware/validators/zodParser.ts
@@ -10,7 +10,7 @@ export const zodParser = (
     try {
       let input: any;
       if (location === 'body') {
-        input = await c.req.parseBody();
+        input = await c.req.json();
       } else if (location === 'query') {
         input = c.req.query();
       } else if (location === 'params') {
diff --git a/server/src/routes/getParkRoutes.ts b/server/src/routes/getParkRoutes.ts
index ab292ee9d..df79280be 100644
--- a/server/src/routes/getParkRoutes.ts
+++ b/server/src/routes/getParkRoutes.ts
@@ -1,6 +1,6 @@
 import { Hono } from 'hono';
 import * as validator from '@packrat/validations';
-import { getParksRoute as getParks } from '../controllers/getParks/index';
+import { getParks } from '../controllers/getParks/index';
 import { tryCatchWrapper } from '../helpers/tryCatchWrapper';
 import authTokenMiddleware from '../middleware/auth';
 import checkRole from '../middleware/checkRole';
@@ -12,7 +12,7 @@ router.get(
   '/',
   authTokenMiddleware as any,
   checkRole(['user', 'admin']) as any,
-  ((req, res, next) => zodParser(validator.getParks, req.body, next)) as any,
+  zodParser(validator.getParks, 'body'),
   tryCatchWrapper(getParks),
 );
 
diff --git a/server/src/routes/getTrailRoutes.ts b/server/src/routes/getTrailRoutes.ts
index a765117d6..63b938bf3 100644
--- a/server/src/routes/getTrailRoutes.ts
+++ b/server/src/routes/getTrailRoutes.ts
@@ -1,6 +1,6 @@
 import { Hono } from 'hono';
 import * as validator from '@packrat/validations';
-import { getTrailsRoute as getTrails } from '../controllers/getTrail/index';
+import { getTrails } from '../controllers/getTrail/index';
 import { tryCatchWrapper } from '../helpers/tryCatchWrapper';
 import authTokenMiddleware from '../middleware/auth';
 import checkRole from '../middleware/checkRole';
@@ -12,7 +12,8 @@ router.post(
   '/',
   authTokenMiddleware as any,
   checkRole(['user', 'admin']) as any,
-  ((req, res, next) => zodParser(validator.getTrails, req.body, next)) as any,
+  // ((req, res, next) => zodParser(validator.getTrails, req.body, next)) as any,
+  zodParser(validator.getTrails, 'body'),
   tryCatchWrapper(getTrails),
 );
 
diff --git a/server/src/routes/itemRoutes.ts b/server/src/routes/itemRoutes.ts
index 1e7e86116..5c7c54471 100644
--- a/server/src/routes/itemRoutes.ts
+++ b/server/src/routes/itemRoutes.ts
@@ -1,22 +1,23 @@
 import { Hono } from 'hono';
 import {
-  getItemsRoute as getItems,
-  getItemByIdRoute as getItemById,
-  addItemRoute as addItem,
-  addItemGlobalRoute as addItemGlobal,
-  editItemRoute as editItem,
-  deleteItemRoute as deleteItem,
-  searchItemsByNameRoute as searchItemsByName,
-  getItemsGloballyRoute as getItemsGlobally,
-  addGlobalItemToPackRoute as addGlobalItemToPack,
-  editGlobalItemAsDuplicateRoute as editGlobalItemAsDuplicate,
-  deleteGlobalItemRoute as deleteGlobalItem,
+  getItems,
+  getItemById,
+  addItem,
+  addItemGlobal,
+  editItem,
+  deleteItem,
+  searchItemsByName,
+  getItemsGlobally,
+  addGlobalItemToPack,
+  editGlobalItemAsDuplicate,
+  deleteGlobalItem,
 } from '../controllers/item/index';
 import * as validator from '@packrat/validations';
 import { tryCatchWrapper } from '../helpers/tryCatchWrapper';
 import authTokenMiddleware from '../middleware/auth';
 import checkRole from '../middleware/checkRole';
 import { zodParser } from '../middleware/validators/zodParser';
+import { valid } from 'joi';
 
 const router = new Hono();
 
@@ -47,7 +48,7 @@ const router = new Hono();
 router.get(
   '/packItems/:packId',
   authTokenMiddleware as any,
-  ((req, res, next) => zodParser(validator.getItems, req.body, next)) as any,
+  zodParser(validator.getItems, 'params'),
   tryCatchWrapper(getItems),
 );
 
@@ -69,9 +70,9 @@ router.get(
  *        description: Successful response
  */
 router.get(
-  '/i/:packId',
+  '/i/:id',
   authTokenMiddleware as any,
-  ((req, res, next) => zodParser(validator.getItemById, req.body, next)) as any,
+  zodParser(validator.getItemById, 'params'),
   tryCatchWrapper(getItemById),
 );
 
@@ -130,7 +131,7 @@ router.get(
 router.post(
   '/',
   authTokenMiddleware as any,
-  ((req, res, next) => zodParser(validator.addItem, req.body, next)) as any,
+  zodParser(validator.addItem, 'body'),
   tryCatchWrapper(addItem),
 );
 
@@ -165,7 +166,7 @@ router.post(
 router.put(
   '/',
   authTokenMiddleware as any,
-  ((req, res, next) => zodParser(validator.editItem, req.body, next)) as any,
+  zodParser(validator.editItem, 'body'),
   tryCatchWrapper(editItem),
 );
 
@@ -192,7 +193,7 @@ router.put(
 router.delete(
   '/',
   authTokenMiddleware as any,
-  ((req, res, next) => zodParser(validator.deleteItem, req.body, next)) as any,
+  zodParser(validator.deleteItem, 'body'),
   tryCatchWrapper(deleteItem),
 );
 
@@ -227,8 +228,7 @@ router.delete(
 router.post(
   '/global',
   authTokenMiddleware as any,
-  ((req, res, next) =>
-    zodParser(validator.addItemGlobal, req.body, next)) as any,
+  zodParser(validator.addItemGlobal, 'body'),
   tryCatchWrapper(addItemGlobal),
 );
 
@@ -249,8 +249,7 @@ router.get(
   '/global',
   authTokenMiddleware as any,
   checkRole(['user', 'admin']) as any,
-  ((req, res, next) =>
-    zodParser(validator.getItemsGlobally, req.body, next)) as any,
+  zodParser(validator.getItemsGlobally, 'body'),
   tryCatchWrapper(getItemsGlobally),
 );
 
@@ -271,8 +270,7 @@ router.post(
   '/global/select/:packId',
   authTokenMiddleware as any,
   checkRole(['user', 'admin']) as any,
-  ((req, res, next) =>
-    zodParser(validator.addGlobalItemToPack, req.body, next)) as any,
+  zodParser(validator.addGlobalItemToPack, 'body'),
   tryCatchWrapper(addGlobalItemToPack),
 );
 /**
@@ -292,8 +290,7 @@ router.put(
   '/global/:itemId',
   authTokenMiddleware as any,
   checkRole(['user', 'admin']) as any,
-  ((req, res, next) =>
-    zodParser(validator.editGlobalItemAsDuplicate, req.body, next)) as any,
+  zodParser(validator.editGlobalItemAsDuplicate, 'params'),
   tryCatchWrapper(editGlobalItemAsDuplicate),
 );
 
@@ -321,8 +318,7 @@ router.delete(
   '/global/:itemId',
   authTokenMiddleware as any,
   checkRole(['user', 'admin']) as any,
-  ((req, res, next) =>
-    zodParser(validator.deleteGlobalItem, req.body, next)) as any,
+  zodParser(validator.deleteGlobalItem, 'params'),
   tryCatchWrapper(deleteGlobalItem),
 );
 
diff --git a/server/src/routes/osmRoutes.ts b/server/src/routes/osmRoutes.ts
index 7d3057226..d98a94090 100644
--- a/server/src/routes/osmRoutes.ts
+++ b/server/src/routes/osmRoutes.ts
@@ -3,10 +3,10 @@ import {
   getDestinationRoute as getDestination,
   getOsmRoute as getOsm,
   getParksOSMRoute as getParksOSM,
-  getPhotonResultsRoute as getPhotonResults,
-  getTrailsOSMRoute as getTrailsOSM,
-  postSingleGeoJSONRoute as postSingleGeoJSON,
-  getPhotonDetailsRoute as getPhotonDetails,
+  getPhotonResults,
+  getTrailsOSM,
+  postSingleGeoJSON,
+  getPhotonDetails,
   // getEnhancedPhotonDetails,
 } from '../controllers/getOsm/index';
 import { tryCatchWrapper } from '../helpers/tryCatchWrapper';

From d10f8365ac29d6b5e87b27d8d51c871a4c04409c Mon Sep 17 00:00:00 2001
From: Muhammad Hassan <mh7722178@gmail.com>
Date: Thu, 18 Jul 2024 15:27:43 +0500
Subject: [PATCH 235/257] uncommented enforeceHTTP and securityHeaders

---
 server/src/index.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/server/src/index.ts b/server/src/index.ts
index 7282f27cb..31492c067 100644
--- a/server/src/index.ts
+++ b/server/src/index.ts
@@ -30,10 +30,10 @@ const app = new Hono<{ Bindings: Bindings }>();
 //  ref: https://hono.dev/middleware/builtin/compress
 
 // SETUP HTTPS Enforcement Middleware
-// app.use('*', enforceHttps()); // Apply to all routes
+app.use('*', enforceHttps()); // Apply to all routes
 
 // SETUP SECURITY HEADERS
-// app.use('*', securityHeaders()); // Apply to all routes
+app.use('*', securityHeaders()); // Apply to all routes
 
 // SETUP CORS
 app.use('*', async (c, next) => {

From 1603da839a4b1384a163cfbcbfa43382388b8081 Mon Sep 17 00:00:00 2001
From: Anmol Verma <anmolverma2810@gmail.com>
Date: Thu, 18 Jul 2024 16:25:14 +0530
Subject: [PATCH 236/257] Improve chatbox visibility

---
 apps/vite/src/App.tsx                         |  1 -
 .../Suggestion/SuggestionDescription.tsx      | 26 +++++++------------
 .../components/Suggestion/SuggestionList.tsx  |  8 +++---
 packages/app/components/chat/chat.style.tsx   |  5 ++--
 packages/app/components/chat/index.tsx        | 25 +++++-------------
 .../ui/src/Bento/elements/list/ChatList.tsx   | 22 +++++-----------
 6 files changed, 29 insertions(+), 58 deletions(-)

diff --git a/apps/vite/src/App.tsx b/apps/vite/src/App.tsx
index 3f9dce694..17b4b017f 100644
--- a/apps/vite/src/App.tsx
+++ b/apps/vite/src/App.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import React, { StrictMode } from 'react';
 import ReactDOM from 'react-dom/client';
 import { RouterProvider, createRouter } from '@tanstack/react-router';
diff --git a/packages/app/components/Suggestion/SuggestionDescription.tsx b/packages/app/components/Suggestion/SuggestionDescription.tsx
index 7e4315281..98b429436 100644
--- a/packages/app/components/Suggestion/SuggestionDescription.tsx
+++ b/packages/app/components/Suggestion/SuggestionDescription.tsx
@@ -33,20 +33,14 @@ export function SuggestionDescription({ data }: { data: Message[] }) {
   }, [data]);
 
   return (
-    <View
-      style={{ flexDirection: 'column', height: '100%', minWidth: '100%' }}
-      $group-window-gtXs={{ height: 700 }}
-    >
-      <List
-        $group-window-gtXs={{
-          padding: '$10',
-        }}
-        data={messages}
-        renderItem={renderItem}
-        windowSize={2}
-        style={{ backgroundColor: '$background' }}
-      />
-    </View>
+    <List
+      $group-window-gtXs={{
+        padding: '$10',
+      }}
+      data={messages}
+      renderItem={renderItem}
+      style={{ backgroundColor: '$background' }}
+    />
   );
 }
 
@@ -84,7 +78,7 @@ function ChatItem({ item, index }: { item: Message; index: number }) {
             alignItems: 'flex-start',
             alignSelf: 'self-start',
             maxWidth: '100%',
-            minWidth: '100%'
+            minWidth: '100%',
           }}
           gap="$4"
         >
@@ -93,7 +87,7 @@ function ChatItem({ item, index }: { item: Message; index: number }) {
               flexDirection: 'column',
               alignItems: 'flex-start',
               justifyContent: 'center',
-              flexShrink: '1'
+              flexShrink: 1,
             }}
             gap="$2"
             // maxWidth={400}
diff --git a/packages/app/components/Suggestion/SuggestionList.tsx b/packages/app/components/Suggestion/SuggestionList.tsx
index 26b92b860..2a0a419cd 100644
--- a/packages/app/components/Suggestion/SuggestionList.tsx
+++ b/packages/app/components/Suggestion/SuggestionList.tsx
@@ -43,17 +43,15 @@ export function SuggestionList({ suggestion, onAddItem }: SuggestionListProps) {
         padding: 10,
         borderRadius: 0,
       }}
-      width="100%"
-      justifyContent="center"
-      alignItems="center"
     >
       <View
         style={{
-          minWidth: '100%',
+          minWidth: 300,
         }}
         $group-window-gtXs={{
           padding: '$3',
-          width: 600,
+          width: 800,
+          height: 100,
         }}
         gap="$1.5"
       >
diff --git a/packages/app/components/chat/chat.style.tsx b/packages/app/components/chat/chat.style.tsx
index da84818dc..bc28e8cf4 100644
--- a/packages/app/components/chat/chat.style.tsx
+++ b/packages/app/components/chat/chat.style.tsx
@@ -144,12 +144,11 @@ export const loadStyles = (theme: any) => {
     animatedView: {
       position: 'absolute',
       bottom: 60,
-      right: 5,
-      width: 450,
+      right: 1,
+      maxWidth: 350,
       backgroundColor: '#fff',
       borderRadius: 10,
       padding: 4,
-      zIndex: 1000,
       shadowColor: '#000',
       shadowOffset: { width: 2, height: 4 },
       shadowOpacity: 0.25,
diff --git a/packages/app/components/chat/index.tsx b/packages/app/components/chat/index.tsx
index b70086f48..573cb8fae 100644
--- a/packages/app/components/chat/index.tsx
+++ b/packages/app/components/chat/index.tsx
@@ -94,15 +94,9 @@ const ChatComponent: React.FC<ChatComponentProps> = ({
             )}
           </>
         )}
-        <ScrollView
-          ref={scrollViewRef}
-          onContentSizeChange={handleLayout}
-          style={{ maxHeight: 620, width: '100%', borderRadius: 10 }}
-          showsVerticalScrollIndicator={false}
-          contentContainerStyle={{ flexGrow: 1, justifyContent: 'flex-end' }}
-        >
+        <View style={{ maxHeight: 450, width: '100%', borderRadius: 10 }}>
           <ChatList data={messages} />
-        </ScrollView>
+        </View>
         <RStack
           style={{
             marginTop: 10,
@@ -195,24 +189,19 @@ const SuggestionComponent = ({ itemTypeId = null, type = null }) => {
 
   return (
     <View>
-      <RStack style={{ flex: 1 }}>
+      <RStack>
         {!suggestions.suggestion.Items ? (
-          <Text style={{ width: '100%', textAlign: 'center' }}>
+          <Text style={{ width: 500 }}>
             Allow me to analyze your pack and help!
           </Text>
         ) : (
-          <ScrollView
-            onContentSizeChange={handleLayout}
-            style={{ maxHeight: 620, width: '100%', borderRadius: 10 }}
-            showsVerticalScrollIndicator={false}
-            contentContainerStyle={{ flexGrow: 1, justifyContent: 'flex-end' }}
-          >
+          <View style={{ maxHeight: 450, width: '100%', borderRadius: 10 }}>
             <SuggestionDescription data={suggestions.reasoning} />
             <SuggestionList
               suggestion={suggestions.suggestion}
               onAddItem={removeItem}
             />
-          </ScrollView>
+          </View>
         )}
         <RStack
           style={{
@@ -223,7 +212,7 @@ const SuggestionComponent = ({ itemTypeId = null, type = null }) => {
           }}
         >
           <RButton
-            onClick={() => {
+            onPress={() => {
               handleSubmitAnalysis();
             }}
             disabled={isAnalysisLoading}
diff --git a/packages/ui/src/Bento/elements/list/ChatList.tsx b/packages/ui/src/Bento/elements/list/ChatList.tsx
index 9a2cc7b31..d890efa1f 100644
--- a/packages/ui/src/Bento/elements/list/ChatList.tsx
+++ b/packages/ui/src/Bento/elements/list/ChatList.tsx
@@ -49,21 +49,13 @@ export function ChatList({ data }: { data: Message[] }) {
   }, [data]);
 
   return (
-    <View
-      flexDirection="column"
-      height={'100%'}
-      minWidth="100%"
-      $group-window-gtXs={{ height: 700 }}
-    >
-      <List
-        $group-window-gtXs={{
-          padding: '$10',
-        }}
-        data={messages}
-        renderItem={renderItem}
-        windowSize={2}
-      />
-    </View>
+    <List
+      $group-window-gtXs={{
+        padding: '$10',
+      }}
+      data={messages}
+      renderItem={renderItem}
+    />
   );
 }
 

From 68a5d45dd3eee424a1445a4482fe5100a2a50849 Mon Sep 17 00:00:00 2001
From: pinocchio-life-like <icbr19fl@gmail.com>
Date: Thu, 18 Jul 2024 15:12:28 +0300
Subject: [PATCH 237/257] ...

---
 server/src/controllers/auth/checkCode.ts      |   7 +-
 server/src/controllers/auth/emailExists.ts    |   6 -
 server/src/controllers/auth/updatePassword.ts |   9 +-
 .../src/controllers/favorite/addToFavorite.ts |  39 +--
 .../favorite/getFavoritePacksByUser.ts        |  25 +-
 .../controllers/favorite/getUserFavorites.ts  |  28 +--
 server/src/controllers/geoCode/getGeoCode.ts  |  38 ++-
 .../src/controllers/getOsm/getDestination.ts  |  34 +--
 .../controllers/getOsm/getNominatimDetails.ts |  21 +-
 server/src/controllers/getOsm/getOsm.ts       |  43 ++--
 server/src/controllers/getOsm/getParksOSM.ts  |  39 +--
 .../controllers/getOsm/getPhotonDetails.ts    |  28 +--
 .../controllers/getOsm/getPhotonResults.ts    |  28 +--
 server/src/controllers/getOsm/getTrailsOSM.ts |  29 +--
 .../controllers/getOsm/postSingleGeoJSON.ts   |  17 +-
 .../controllers/item/addGlobalItemToPack.ts   |  26 +-
 server/src/controllers/item/addItem.ts        |  40 +--
 server/src/controllers/item/addItemGlobal.ts  |  35 +--
 .../src/controllers/item/deleteGlobalItem.ts  |  21 +-
 server/src/controllers/item/deleteItem.ts     |  22 +-
 .../item/editGlobalItemAsDuplicate.ts         |  40 +--
 server/src/controllers/item/editItem.ts       |  21 +-
 server/src/controllers/item/getItemById.ts    |  23 +-
 server/src/controllers/item/getItems.ts       |  23 +-
 .../src/controllers/item/getItemsGlobally.ts  |  22 +-
 .../src/controllers/item/searchItemsByName.ts |  24 +-
 server/src/middleware/validators/zodParser.ts |   2 +-
 server/src/routes/favoriteRoutes.ts           |  81 +-----
 server/src/routes/geoCodeRoutes.ts            |   4 +-
 server/src/routes/getParkRoutes.ts            |   4 +-
 server/src/routes/getTrailRoutes.ts           |   5 +-
 server/src/routes/healthRoutes.ts             |  22 --
 server/src/routes/index.ts                    |  51 ++--
 server/src/routes/itemRoutes.ts               |  29 ++-
 server/src/routes/mapPreviewRouter.ts         |  31 +--
 server/src/routes/osmRoutes.ts                | 232 ++----------------
 server/src/routes/templateRoutes.ts           |  26 +-
 server/src/routes/tripRoutes.ts               |  12 +-
 server/src/routes/weatherRoutes.ts            |   2 +-
 39 files changed, 208 insertions(+), 981 deletions(-)

diff --git a/server/src/controllers/auth/checkCode.ts b/server/src/controllers/auth/checkCode.ts
index 58cc9e85c..70f8a32a9 100644
--- a/server/src/controllers/auth/checkCode.ts
+++ b/server/src/controllers/auth/checkCode.ts
@@ -1,12 +1,7 @@
 import { publicProcedure } from '../../trpc';
 import * as validator from '@packrat/validations';
 import { checkCodeService } from '../../services/user/checkCodeService';
-// /**
-//  * Checks the provided code against the user's email in the database.
-//  * @param {Object} req - the request object
-//  * @param {Object} res - the response object
-//  * @return {Promise<void>} - a promise that resolves to void
-//  */
+
 export const checkCode = async (c) => {
   const { email, code } = await c.req.parseBody();
   try {
diff --git a/server/src/controllers/auth/emailExists.ts b/server/src/controllers/auth/emailExists.ts
index abe45b5c2..b8bcfd03c 100644
--- a/server/src/controllers/auth/emailExists.ts
+++ b/server/src/controllers/auth/emailExists.ts
@@ -1,12 +1,6 @@
 import { publicProcedure } from '../../trpc';
 import * as validator from '@packrat/validations';
 import { emailExistsService } from '../../services/user/emailExistsService';
-/**
- * Check if the provided email exists in the database.
- * @param {object} req - The request object.
- * @param {object} res - The response object.
- * @return {Promise<void>} - A promise that resolves to nothing.
- */
 
 export const emailExists = async (c) => {
   try {
diff --git a/server/src/controllers/auth/updatePassword.ts b/server/src/controllers/auth/updatePassword.ts
index 5cc6d2bb7..fb6bedbc1 100644
--- a/server/src/controllers/auth/updatePassword.ts
+++ b/server/src/controllers/auth/updatePassword.ts
@@ -1,15 +1,8 @@
-import { publicProcedure, protectedProcedure } from '../../trpc';
+import { protectedProcedure } from '../../trpc';
 import { findUserAndUpdate } from '../../services/user/user.service';
 import * as validator from '@packrat/validations';
 import { hashPassword } from '../../utils/user';
-// import { prisma } from '../../prisma';
 
-/**
- * Updates the password for a user.
- * @param {object} req - The request object.
- * @param {object} res - The response object.
- * @return {Promise<void>} - A promise that resolves to nothing.
- */
 export const updatePassword = async (c) => {
   try {
     const { email, password } = await c.req.parseBody();
diff --git a/server/src/controllers/favorite/addToFavorite.ts b/server/src/controllers/favorite/addToFavorite.ts
index 6bada1314..85d8abee8 100644
--- a/server/src/controllers/favorite/addToFavorite.ts
+++ b/server/src/controllers/favorite/addToFavorite.ts
@@ -1,32 +1,19 @@
 import { addToFavoriteService } from '../../services/favorite/favorite.service';
-import { publicProcedure, protectedProcedure } from '../../trpc';
+import { protectedProcedure } from '../../trpc';
 import * as validator from '@packrat/validations';
 
-// import { prisma } from '../../prisma';
-/**
- * Adds or removes a pack from a user's favorites list and updates the corresponding pack's favorited_by array.
- * @param {Object} req - The request object containing the packId and userId properties in the body.
- * @param {Object} res - The response object used to send the HTTP response.
- * @return {Object} The updated user object in the response body.
- */
-// export const addToFavorite = async (req, res, next) => {
-//   const { packId, userId } = req.body;
-//   await addToFavoriteService(packId, userId);
-//   const user = await prisma.user.findUnique({
-//     where: {
-//       id: userId, // Assuming userId is the user's ID
-//     },
-//     select: {
-//       // Exclude the 'password' field
-//       id: true,
-//       email: true,
-//       name: true, // Include other fields you want
-//     },
-//   });
-//   if (!user) next(UserNotFoundError);
-//   res.locals.data = user;
-//   responseHandler(res);
-// };
+export const addToFavorite = async (c) => {
+  try {
+    const { packId, userId } = await c.req.parseBody();
+    const response = await addToFavoriteService(packId, userId);
+    return c.json({ response }, 200);
+  } catch (error) {
+    return c.json(
+      { error: `Failed to add to favorites: ${error.message}` },
+      500,
+    );
+  }
+};
 
 export function addToFavoriteRoute() {
   return protectedProcedure
diff --git a/server/src/controllers/favorite/getFavoritePacksByUser.ts b/server/src/controllers/favorite/getFavoritePacksByUser.ts
index d35b53ec8..cd7b3178d 100644
--- a/server/src/controllers/favorite/getFavoritePacksByUser.ts
+++ b/server/src/controllers/favorite/getFavoritePacksByUser.ts
@@ -2,19 +2,18 @@ import { z } from 'zod';
 import { getFavoritePacksByUserService } from '../../services/favorite/favorite.service';
 import { publicProcedure, protectedProcedure } from '../../trpc';
 
-// /**
-//  * Retrieves favorite packs for a user.
-//  * @param {Object} req - The request object.
-//  * @param {Object} res - The response object.
-//  * @return {Promise} - The favorite packs of the user.
-//  */
-// export const getFavoritePacksByUser = async (req, res, next) => {
-//   const { userId } = req.body;
-//   const packs = await getFavoritePacksByUserService(userId);
-//   if (!packs) next(PackNotFoundError);
-//   res.locals.data = packs;
-//   responseHandler(res);
-// };
+export const getFavoritePacksByUser = async (c) => {
+  try {
+    const { userId } = await c.req.parseBody();
+    const packs = await getFavoritePacksByUserService(userId);
+    return c.json({ packs }, 200);
+  } catch (error) {
+    return c.json(
+      { error: `Failed to get favorite packs: ${error.message}` },
+      500,
+    );
+  }
+};
 
 export function getFavoritePacksByUserRoute() {
   return protectedProcedure
diff --git a/server/src/controllers/favorite/getUserFavorites.ts b/server/src/controllers/favorite/getUserFavorites.ts
index b5addfc5e..23439ee91 100644
--- a/server/src/controllers/favorite/getUserFavorites.ts
+++ b/server/src/controllers/favorite/getUserFavorites.ts
@@ -1,21 +1,19 @@
 import { z } from 'zod';
-import { publicProcedure, protectedProcedure } from '../../trpc';
+import { protectedProcedure } from '../../trpc';
 import { getUserFavoritesService } from '../../services/favorite/favorite.service';
 
-// import { prisma } from '../../prisma';
-/**
- * Retrieves the favorite items of a user.
- * @param {Object} req - The request object.
- * @param {Object} res - The response object.
- * @returns {Array} An array of favorite items belonging to the user.
- */
-// export const getUserFavorites = async (req, res, next) => {
-//   const { userId } = req.params;
-//   const favorites = await getUserFavoritesService(userId, next);
-//   if (!favorites) next(UserFavoritesNotFoundError);
-//   res.locals.data = favorites;
-//   responseHandler(res);
-// };
+export const getUserFavorites = async (c) => {
+  try {
+    const { userId } = await c.req.parseBody();
+    const favorites = await getUserFavoritesService(userId);
+    return c.json({ favorites }, 200);
+  } catch (error) {
+    return c.json(
+      { error: `Failed to get user favorites: ${error.message}` },
+      500,
+    );
+  }
+};
 
 export function getUserFavoritesRoute() {
   return protectedProcedure
diff --git a/server/src/controllers/geoCode/getGeoCode.ts b/server/src/controllers/geoCode/getGeoCode.ts
index 896fbe67a..637420ea4 100644
--- a/server/src/controllers/geoCode/getGeoCode.ts
+++ b/server/src/controllers/geoCode/getGeoCode.ts
@@ -1,27 +1,23 @@
-import { publicProcedure, protectedProcedure } from '../../trpc';
+import { protectedProcedure } from '../../trpc';
 import { ErrorFetchingGeoCodeError } from '../../helpers/errors';
-import { responseHandler } from '../../helpers/responseHandler';
-import { oneEntity } from '../../utils/oneEntity';
-// import * as validators from '@packrat/validations';
 import { geoCodeService } from '../../services/geocode/geoCodeService';
 
-// /**
-//  * Retrieves the geocode for a given address array.
-//  * @param {Object} req - The request object.
-//  * @param {Object} req.query - The query parameters.
-//  * @param {string} req.query.addressArray - The address array to retrieve the geocode for.
-//  * @param {Object} res - The response object.
-//  * @return {Promise<void>} - A promise that resolves when the geocode is retrieved and the response is sent.
-//  */
-// export const getGeoCode = async (req, res, next) => {
-//   const result: any = await geoCodeService(req.query);
-//   if (result.message === 'ok') {
-//     res.locals.data = result.result;
-//     responseHandler(res);
-//   } else {
-//     next(ErrorFetchingGeoCodeError);
-//   }
-// };
+export const getGeoCode = async (c) => {
+  try {
+    const { addressArray } = await c.req.parseBody();
+    const result: any = await geoCodeService({
+      addressArray,
+      geoCodeUri: c.env.GEO_CODE_URL,
+      geoapifyKey: c.env.GEOAPIFY_KEY,
+    });
+    if (result.message === 'ok') {
+      return c.json({ result: result.result }, 200);
+    }
+    return c.json({ error: ErrorFetchingGeoCodeError.message }, 500);
+  } catch (error) {
+    return c.json({ error: `Failed to get GeoCode: ${error.message}` }, 500);
+  }
+};
 
 export function getGeoCodeRoute() {
   return protectedProcedure.query(async (opts) => {
diff --git a/server/src/controllers/getOsm/getDestination.ts b/server/src/controllers/getOsm/getDestination.ts
index 5b7e744b0..8d1d744c5 100644
--- a/server/src/controllers/getOsm/getDestination.ts
+++ b/server/src/controllers/getOsm/getDestination.ts
@@ -1,27 +1,19 @@
-import { publicProcedure, protectedProcedure } from '../../trpc';
-import { NoDestinationFoundWithThatIDError } from '../../helpers/errors';
-import { responseHandler } from '../../helpers/responseHandler';
+import { protectedProcedure } from '../../trpc';
 import { getDestinationService } from '../../services/osm/osm.service';
 import { z } from 'zod';
 
-// /**
-//  * Retrieves the destination based on the given ID.
-//  * @param {object} req - The request object.
-//  * @param {object} res - The response object.
-//  * @return {object} The retrieved destination.
-//  */
-// export const getDestination = async (req, res, next) => {
-//   const id = req.params.id;
-
-//   const destination = await getDestinationService(id);
-
-//   if (!destination) {
-//     next(NoDestinationFoundWithThatIDError);
-//   }
-
-//   res.locals.data = destination;
-//   responseHandler(res);
-// };
+export const getDestination = async (c) => {
+  try {
+    const { id } = await c.req.parseBody();
+    const destination = await getDestinationService(id);
+    return c.json({ destination }, 200);
+  } catch (error) {
+    return c.json(
+      { error: `Failed to get destination: ${error.message}` },
+      500,
+    );
+  }
+};
 
 export function getDestinationRoute() {
   return protectedProcedure
diff --git a/server/src/controllers/getOsm/getNominatimDetails.ts b/server/src/controllers/getOsm/getNominatimDetails.ts
index e6f8212f2..0868aeb99 100644
--- a/server/src/controllers/getOsm/getNominatimDetails.ts
+++ b/server/src/controllers/getOsm/getNominatimDetails.ts
@@ -3,16 +3,9 @@ import {
   ErrorRetrievingNominatimError,
   InvalidRequestParamsError,
 } from '../../helpers/errors';
-import { responseHandler } from '../../helpers/responseHandler';
 
-/**
- * Retrieves Nominatim details based on the provided latitude, longitude, or place ID.
- * @param {Object} req - The request object.
- * @param {Object} res - The response object.
- * @returns {Promise<void>} - Returns nothing.
- */
-export const getNominatimDetails = async (req, res, next) => {
-  const { lat, lon, place_id } = req.query;
+export const getNominatimDetails = async (c) => {
+  const { lat, lon, place_id } = c.req.query();
 
   let nominatimUrl = '';
 
@@ -21,19 +14,17 @@ export const getNominatimDetails = async (req, res, next) => {
   } else if (lat && lon) {
     nominatimUrl = `https://nominatim.openstreetmap.org/reverse?format=json&lat=${lat}&lon=${lon}&zoom=18&addressdetails=1`;
   } else {
-    next(InvalidRequestParamsError);
+    c.next(InvalidRequestParamsError);
   }
   try {
     const response = await fetch(nominatimUrl);
 
     if (response.ok) {
-      res.locals.data = await response.json();
-      responseHandler(res);
+      c.json({ response }, 200);
     } else {
-      console.log(response.status, response.statusText);
-      next(ErrorProcessingNominatimError);
+      c.next(ErrorProcessingNominatimError);
     }
   } catch (error) {
-    next(ErrorRetrievingNominatimError);
+    c.next(ErrorRetrievingNominatimError);
   }
 };
diff --git a/server/src/controllers/getOsm/getOsm.ts b/server/src/controllers/getOsm/getOsm.ts
index 9c3f2252d..1bf14ab32 100644
--- a/server/src/controllers/getOsm/getOsm.ts
+++ b/server/src/controllers/getOsm/getOsm.ts
@@ -1,32 +1,22 @@
-import osmtogeojson from 'osmtogeojson';
-import {
-  ErrorProcessingOverpassError,
-  ErrorRetrievingOverpassError,
-  InvalidRequestParamsError,
-} from '../../helpers/errors';
-import { responseHandler } from '../../helpers/responseHandler';
-import { publicProcedure, protectedProcedure } from '../../trpc';
-import * as validators from '@packrat/validations';
+import { ErrorRetrievingOverpassError } from '../../helpers/errors';
+import { protectedProcedure } from '../../trpc';
 import { getOsmService } from '../../services/osm/getOsmService';
 import { z } from 'zod';
 
-/**
- * Retrieves OpenStreetMap data based on the provided activity type, start point, and end point.
- * @param {Object} req - The request object containing the activity type, start point, and end point.
- * @param {Object} res - The response object used to send the retrieved OpenStreetMap data.
- * @return {Promise<void>} - A promise that resolves when the OpenStreetMap data is successfully retrieved and sent.
- */
-// export const getOsm = async (req, res, next) => {
-//   console.log('req', req); // log the request body to see what it looks like
-//   try {
-//     const { activityType, startPoint, endPoint } = req.body;
-//     const result = await getOsmService({ activityType, startPoint, endPoint });
-//     res.locals.data = result;
-//     responseHandler(res);
-//   } catch (error) {
-//     next(ErrorRetrievingOverpassError);
-//   }
-// };
+export const getOsm = async (c) => {
+  try {
+    const { activityType, startPoint, endPoint } = await c.req.parseBody();
+    const route = await getOsmService({
+      activityType,
+      startPoint,
+      endPoint,
+      osmURI: c.env.OSM_URI,
+    });
+    return c.json({ route }, 200);
+  } catch (error) {
+    return c.json({ error: `Failed to get OSM route: ${error.message}` }, 500);
+  }
+};
 
 export function getOsmRoute() {
   return protectedProcedure
@@ -48,7 +38,6 @@ export function getOsmRoute() {
           osmURI: env.OSM_URI,
         });
       } catch (error) {
-        // throw ErrorRetrievingOverpassError;
         return ErrorRetrievingOverpassError;
       }
     });
diff --git a/server/src/controllers/getOsm/getParksOSM.ts b/server/src/controllers/getOsm/getParksOSM.ts
index f5f692913..2e5c99646 100644
--- a/server/src/controllers/getOsm/getParksOSM.ts
+++ b/server/src/controllers/getOsm/getParksOSM.ts
@@ -1,35 +1,16 @@
 import { getParksOSMService } from '../../services/osm/getParksOSMService';
-import {
-  ErrorRetrievingParksOSMError,
-  InvalidRequestParamsError,
-} from '../../helpers/errors';
-import { responseHandler } from '../../helpers/responseHandler';
-import { publicProcedure, protectedProcedure } from '../../trpc';
-import { z } from 'zod';
-// import * as validators from '@packrat/validations';
+import { protectedProcedure } from '../../trpc';
 import * as validator from '@packrat/validations';
 
-/**
- * Retrieves parks data from OpenStreetMap based on the provided latitude, longitude, and radius.
- * @param {Object} req - The request object.
- * @param {Object} res - The response object.
- * @return {Promise} The response object containing the parks data.
- */
-// export const getParksOSM = async (req, res, next) => {
-//   try {
-//     const { lat = 45.5231, lon = -122.6765, radius = 50000 } = req.query;
-
-//     if (!lat || !lon || !radius) {
-//       next(InvalidRequestParamsError);
-//     }
-//     const result = await getParksOSMService(lat, lon, radius);
-//     res.locals.data = result;
-//     responseHandler(res);
-//   } catch (error) {
-//     console.error(error);
-//     next(ErrorRetrievingParksOSMError);
-//   }
-// };
+export const getParksOSM = async (c) => {
+  try {
+    const { lat, lon, radius } = await c.req.parseBody();
+    const parks = await getParksOSMService(lat, lon, radius, c.env.OSM_URI);
+    return c.json({ parks }, 200);
+  } catch (error) {
+    return c.json({ error: `Failed to get parks: ${error.message}` }, 500);
+  }
+};
 
 export function getParksOSMRoute() {
   return protectedProcedure.input(validator.getParksOSM).query(async (opts) => {
diff --git a/server/src/controllers/getOsm/getPhotonDetails.ts b/server/src/controllers/getOsm/getPhotonDetails.ts
index 7b254c798..02544e797 100644
--- a/server/src/controllers/getOsm/getPhotonDetails.ts
+++ b/server/src/controllers/getOsm/getPhotonDetails.ts
@@ -1,32 +1,8 @@
-import {
-  InvalidRequestParamsError,
-  RetrievingPhotonDetailsError,
-} from '../../helpers/errors';
 import { responseHandler } from '../../helpers/responseHandler';
 import { z } from 'zod';
-import { publicProcedure, protectedProcedure } from '../../trpc';
+import { protectedProcedure } from '../../trpc';
 import { getPhotonDetailsService } from '../../services/osm/getPhotonDetailsService';
-import { Context } from 'hono';
-
-/**
- * Retrieves Photon details based on the provided ID and type.
- * @param {Object} req - The request object.
- * @param {Object} res - The response object.
- * @return {Promise<void>} The function does not return anything.
- */
-// export const getPhotonDetails = async (req, res, next) => {
-//   const { id, type } = req.params;
-//   if (!id || !type) {
-//     next(InvalidRequestParamsError);
-//   }
-//   try {
-//     const result = await getPhotonDetailsService(id, type);
-//     res.locals.data = result;
-//     responseHandler(res);
-//   } catch (error) {
-//     next(RetrievingPhotonDetailsError);
-//   }
-// };
+import type { Context } from 'hono';
 
 export async function getPhotonDetails(ctx: Context) {
   try {
diff --git a/server/src/controllers/getOsm/getPhotonResults.ts b/server/src/controllers/getOsm/getPhotonResults.ts
index 4b85dd9ab..d949e1f9f 100644
--- a/server/src/controllers/getOsm/getPhotonResults.ts
+++ b/server/src/controllers/getOsm/getPhotonResults.ts
@@ -1,35 +1,9 @@
 import { getPhotonResultsService } from '../../services/osm/getPhotonResultsService';
-import {
-  InvalidRequestParamsError,
-  RetrievingPhotonDetailsError,
-} from '../../helpers/errors';
 import { responseHandler } from '../../helpers/responseHandler';
-import { publicProcedure, protectedProcedure } from '../../trpc';
-import { z } from 'zod';
-// import * as validators from '@packrat/validations';
+import { protectedProcedure } from '../../trpc';
 import * as validator from '@packrat/validations';
 import { type Context } from 'hono';
 
-/**
- * Retrieves Photon results based on a search string.
- * @param {object} req - The request object.
- * @param {object} res - The response object.
- * @return {undefined} There is no explicit return value.
- */
-// export const getPhotonResults = async (req, res, next) => {
-//   const { searchString } = req.query;
-//   if (!searchString) {
-//     next(InvalidRequestParamsError);
-//   }
-//   try {
-//     const resultsArray = await getPhotonResultsService(searchString);
-//     res.locals.data = resultsArray.data.features;
-//     responseHandler(res);
-//   } catch (error) {
-//     next(RetrievingPhotonDetailsError);
-//   }
-// };
-
 export async function getPhotonResults(ctx: Context) {
   try {
     const { searchString } = await ctx.req.query();
diff --git a/server/src/controllers/getOsm/getTrailsOSM.ts b/server/src/controllers/getOsm/getTrailsOSM.ts
index ee3b9eefe..5e4691501 100644
--- a/server/src/controllers/getOsm/getTrailsOSM.ts
+++ b/server/src/controllers/getOsm/getTrailsOSM.ts
@@ -1,36 +1,9 @@
 import { getTrailsOsmService } from '../../services/osm/getTrailsOSMService';
-import {
-  InvalidRequestParamsError,
-  RetrievingTrailsOSMError,
-} from '../../helpers/errors';
 import { responseHandler } from '../../helpers/responseHandler';
-import { publicProcedure, protectedProcedure } from '../../trpc';
-import * as z from 'zod';
-// import * as validators from '@packrat/validations';
+import { protectedProcedure } from '../../trpc';
 import * as validator from '@packrat/validations';
 import { type Context } from 'hono';
 
-/**
- * Retrieves trails data from OpenStreetMap (OSM) based on the provided latitude, longitude, and radius.
- * @param {Object} req - The request object.
- * @param {Object} res - The response object.
- * @return {Promise<void>} - Resolves with the geojsonData of trails retrieved from OSM.
- */
-// export const getTrailsOSM = async (req, res, next) => {
-//   try {
-//     const { lat = 45.5231, lon = -122.6765, radius = 50000 } = req.query;
-
-//     if (!lat || !lon || !radius) {
-//       next(InvalidRequestParamsError);
-//     }
-//     const geojsonData = await getTrailsOsmService(lat, lon, radius);
-//     res.locals.data = geojsonData;
-//     responseHandler(res);
-//   } catch (error) {
-//     next(RetrievingTrailsOSMError);
-//   }
-// };
-
 export async function getTrailsOSM(ctx: Context) {
   try {
     const {
diff --git a/server/src/controllers/getOsm/postSingleGeoJSON.ts b/server/src/controllers/getOsm/postSingleGeoJSON.ts
index 49dde9e94..91352f047 100644
--- a/server/src/controllers/getOsm/postSingleGeoJSON.ts
+++ b/server/src/controllers/getOsm/postSingleGeoJSON.ts
@@ -1,24 +1,9 @@
-import { publicProcedure, protectedProcedure } from '../../trpc';
+import { protectedProcedure } from '../../trpc';
 import { responseHandler } from '../../helpers/responseHandler';
 import { postSingleGeoJSONService } from '../../services/osm/osm.service';
 import { z } from 'zod';
 import { type Context } from 'hono';
 
-/**
- * Handles the POST request for a single GeoJSON.
- * @param {Object} req - the request object
- * @param {Object} res - the response object
- * @return {void} - does not return a value
- */
-// export const postSingleGeoJSON = async (req, res) => {
-//   console.log('in postSingleGeoJSON');
-//   const geojson = req.body;
-
-//   const result = await postSingleGeoJSONService(geojson);
-//   res.locals.data = result;
-//   responseHandler(res);
-// };
-
 export async function postSingleGeoJSON(ctx: Context) {
   try {
     const { geojson } = await ctx.req.json();
diff --git a/server/src/controllers/item/addGlobalItemToPack.ts b/server/src/controllers/item/addGlobalItemToPack.ts
index 6400292bf..3deebbdb7 100644
--- a/server/src/controllers/item/addGlobalItemToPack.ts
+++ b/server/src/controllers/item/addGlobalItemToPack.ts
@@ -1,15 +1,7 @@
-import { publicProcedure, protectedProcedure } from '../../trpc';
+import { protectedProcedure } from '../../trpc';
 import { addGlobalItemToPackService } from '../../services/item/item.service';
 import { z } from 'zod';
-import { type Context } from 'hono';
-import { responseHandler } from '../../helpers/responseHandler';
 
-/**
- * Adds a global item to a pack.
- * @param {Object} req - The request object.
- * @param {Object} res - The response object.
- * @return {Object} The updated item.
- */
 export const addGlobalItemToPack = async (c) => {
   try {
     const { packId, itemId, ownerId } = await c.req.parseBody();
@@ -23,22 +15,6 @@ export const addGlobalItemToPack = async (c) => {
   }
 };
 
-export async function addGlobalItemToPack(ctx: Context) {
-  try {
-    const { packId, itemId, ownerId } = await ctx.req.json();
-    const item = await addGlobalItemToPackService(packId, itemId, ownerId);
-    if (!item) {
-      ctx.set('data', { data: 'Cannot Convert Global Item To Pack' });
-      return await responseHandler(ctx);
-    }
-    ctx.set('data', item);
-    return await responseHandler(ctx);
-  } catch (error) {
-    ctx.set('error', error.message);
-    return await responseHandler(ctx);
-  }
-}
-
 export function addGlobalItemToPackRoute() {
   return protectedProcedure
     .input(
diff --git a/server/src/controllers/item/addItem.ts b/server/src/controllers/item/addItem.ts
index bfb247f13..b6f6a44ca 100644
--- a/server/src/controllers/item/addItem.ts
+++ b/server/src/controllers/item/addItem.ts
@@ -1,15 +1,7 @@
-import { publicProcedure, protectedProcedure } from '../../trpc';
+import { protectedProcedure } from '../../trpc';
 import { addItemService } from '../../services/item/item.service';
 import * as validator from '@packrat/validations';
-import { Context } from 'hono';
-import { responseHandler } from '../../helpers/responseHandler';
 
-/**
- * Adds an item to the database based on the provided request body.
- * @param {Object} req - The request object.
- * @param {Object} res - The response object.
- * @return {Object} The updated item and pack ID.
- */
 export const addItem = async (c) => {
   try {
     const { name, weight, quantity, unit, packId, type, ownerId } =
@@ -30,36 +22,6 @@ export const addItem = async (c) => {
   }
 };
 
-export async function addItem(ctx: Context) {
-  try {
-    const { name, weight, quantity, unit, packId, type, ownerId } =
-      await ctx.req.json();
-
-    if (type !== 'Food' && type !== 'Water' && type !== 'Essentials') {
-      throw new Error('Invalid item type');
-    }
-
-    const result = await addItemService(
-      name,
-      weight,
-      quantity,
-      unit,
-      packId,
-      type,
-      ownerId,
-    );
-    if (!result) {
-      ctx.set('data', { data: 'cannot add item' });
-      return await responseHandler(ctx);
-    }
-    ctx.set('data', result);
-    return await responseHandler(ctx);
-  } catch (error) {
-    ctx.set('error', error.message);
-    return await responseHandler(ctx);
-  }
-}
-
 export function addItemRoute() {
   return protectedProcedure.input(validator.addItem).mutation(async (opts) => {
     const { name, weight, quantity, unit, packId, type, ownerId } = opts.input;
diff --git a/server/src/controllers/item/addItemGlobal.ts b/server/src/controllers/item/addItemGlobal.ts
index 8b881430e..cd42eca52 100644
--- a/server/src/controllers/item/addItemGlobal.ts
+++ b/server/src/controllers/item/addItemGlobal.ts
@@ -1,15 +1,6 @@
-import { type Context } from 'hono';
 import { addItemGlobalService } from '../../services/item/item.service';
-import { publicProcedure, protectedProcedure } from '../../trpc';
+import { protectedProcedure } from '../../trpc';
 import * as validator from '@packrat/validations';
-import { responseHandler } from '../../helpers/responseHandler';
-
-/**
- * Adds an item globally.
- * @param {object} req - The request object.
- * @param {object} res - The response object.
- * @return {object} The added item.
- */
 
 export const addItemGlobal = async (c) => {
   try {
@@ -30,30 +21,6 @@ export const addItemGlobal = async (c) => {
   }
 };
 
-export async function addItemGlobal(ctx: Context) {
-  try {
-    const { name, weight, quantity, unit, type, ownerId } =
-      await ctx.req.json();
-    if (type !== 'Food' && type !== 'Water' && type !== 'Essentials') {
-      throw new Error('Invalid item type');
-    }
-
-    const item = await addItemGlobalService(
-      name,
-      weight,
-      quantity,
-      unit,
-      type,
-      ownerId,
-    );
-    ctx.set('data', item);
-    return await responseHandler(ctx);
-  } catch (error) {
-    ctx.set('error', error.message);
-    return await responseHandler(ctx);
-  }
-}
-
 export function addItemGlobalRoute() {
   return protectedProcedure
     .input(validator.addItemGlobal)
diff --git a/server/src/controllers/item/deleteGlobalItem.ts b/server/src/controllers/item/deleteGlobalItem.ts
index 4283d4c64..6ca5db51a 100644
--- a/server/src/controllers/item/deleteGlobalItem.ts
+++ b/server/src/controllers/item/deleteGlobalItem.ts
@@ -1,15 +1,7 @@
-import { publicProcedure, protectedProcedure } from '../../trpc';
+import { protectedProcedure } from '../../trpc';
 import { deleteGlobalItemService } from '../../services/item/item.service';
 import { z } from 'zod';
-import { type Context } from 'hono';
-import { responseHandler } from '../../helpers/responseHandler';
 
-/**
- * Deletes a global item.
- * @param {Object} req - The request object.
- * @param {Object} res - The response object.
- * @return {Promise<void>} - Returns a promise that resolves to void.
- */
 export const deleteGlobalItem = async (c) => {
   try {
     const { itemId } = await c.req.parseBody();
@@ -23,17 +15,6 @@ export const deleteGlobalItem = async (c) => {
   }
 };
 
-export async function deleteGlobalItem(ctx: Context) {
-  try {
-    const { itemId } = await ctx.req.param();
-    ctx.set('data', await deleteGlobalItemService(itemId));
-    return await responseHandler(ctx);
-  } catch (error) {
-    ctx.set('error', error.message);
-    return await responseHandler(ctx);
-  }
-}
-
 export function deleteGlobalItemRoute() {
   return protectedProcedure
     .input(
diff --git a/server/src/controllers/item/deleteItem.ts b/server/src/controllers/item/deleteItem.ts
index 51ae89352..6aefa4d03 100644
--- a/server/src/controllers/item/deleteItem.ts
+++ b/server/src/controllers/item/deleteItem.ts
@@ -1,15 +1,6 @@
 import { deleteItemService } from '../../services/item/item.service';
 import * as validator from '@packrat/validations';
-import { publicProcedure, protectedProcedure } from '../../trpc';
-import { type Context } from 'hono';
-import { responseHandler } from '../../helpers/responseHandler';
-
-/**
- * Deletes an item from the database.
- * @param {Object} req - The request object.
- * @param {Object} res - The response object.
- * @return {Object} The deleted item.
- */
+import { protectedProcedure } from '../../trpc';
 
 export const deleteItem = async (c) => {
   try {
@@ -21,17 +12,6 @@ export const deleteItem = async (c) => {
   }
 };
 
-export async function deleteItem(ctx: Context) {
-  try {
-    const { itemId, packId } = await ctx.req.json();
-    ctx.set('data', await deleteItemService(itemId, packId));
-    return await responseHandler(ctx);
-  } catch (error) {
-    ctx.set('error', error.message);
-    return await responseHandler(ctx);
-  }
-}
-
 export function deleteItemRoute() {
   return protectedProcedure
     .input(validator.deleteItem)
diff --git a/server/src/controllers/item/editGlobalItemAsDuplicate.ts b/server/src/controllers/item/editGlobalItemAsDuplicate.ts
index a3b291372..4ca99d5e8 100644
--- a/server/src/controllers/item/editGlobalItemAsDuplicate.ts
+++ b/server/src/controllers/item/editGlobalItemAsDuplicate.ts
@@ -1,24 +1,7 @@
 import { editGlobalItemAsDuplicateService } from '../../services/item/item.service';
 import { z } from 'zod';
-import { publicProcedure, protectedProcedure } from '../../trpc';
-import { type Context } from 'hono';
-import { responseHandler } from '../../helpers/responseHandler';
+import { protectedProcedure } from '../../trpc';
 
-/**
- * Edit a global item by duplicating it with new changes.
- * @param {Object} req - The request object.
- * @param {Object} req.params - The parameters object.
- * @param {string} req.params.itemId - The ID of the item to edit.
- * @param {Object} req.body - The request body object.
- * @param {string} req.body.packId - The ID of the pack.
- * @param {string} req.body.name - The name of the item.
- * @param {number} req.body.weight - The weight of the item.
- * @param {number} req.body.quantity - The quantity of the item.
- * @param {string} req.body.unit - The unit of the item.
- * @param {string} req.body.type - The type of the item.
- * @param {Object} res - The response object.
- * @return {Object} The updated item.
- */
 export const editGlobalItemAsDuplicate = async (c) => {
   try {
     const { itemId } = await c.req.parseParams();
@@ -43,27 +26,6 @@ export const editGlobalItemAsDuplicate = async (c) => {
   }
 };
 
-export async function editGlobalItemAsDuplicate(ctx: Context) {
-  try {
-    const { itemId, packId, name, weight, quantity, unit, type } =
-      await ctx.req.json();
-    const item = await editGlobalItemAsDuplicateService(
-      itemId,
-      packId,
-      name,
-      weight,
-      quantity,
-      unit,
-      type,
-    );
-    ctx.set('data', item);
-    return await responseHandler(ctx);
-  } catch (errpr) {
-    ctx.set('errpr', errpr.message);
-    return await responseHandler(ctx);
-  }
-}
-
 export function editGlobalItemAsDuplicateRoute() {
   return protectedProcedure
     .input(
diff --git a/server/src/controllers/item/editItem.ts b/server/src/controllers/item/editItem.ts
index 605d6124c..ff0db0f08 100644
--- a/server/src/controllers/item/editItem.ts
+++ b/server/src/controllers/item/editItem.ts
@@ -1,8 +1,6 @@
-import { publicProcedure, protectedProcedure } from '../../trpc';
+import { protectedProcedure } from '../../trpc';
 import { editItemService } from '../../services/item/item.service';
 import * as validator from '@packrat/validations';
-import { type Context } from 'hono';
-import { responseHandler } from '../../helpers/responseHandler';
 
 export const editItem = async (c) => {
   try {
@@ -15,23 +13,6 @@ export const editItem = async (c) => {
   }
 };
 
-export async function editItem(ctx: Context) {
-  try {
-    const { id, name, weight, unit, quantity, type } = await ctx.req.json();
-
-    if (type !== 'Food' && type !== 'Water' && type !== 'Essentials') {
-      throw new Error('Invalid item type');
-    }
-
-    const item = await editItemService(id, name, weight, unit, quantity, type);
-    ctx.set('data', item);
-    return await responseHandler(ctx);
-  } catch (error) {
-    ctx.set('error', error.message);
-    return await responseHandler(ctx);
-  }
-}
-
 export function editItemRoute() {
   return protectedProcedure.input(validator.editItem).mutation(async (opts) => {
     const { id, name, weight, unit, quantity, type } = opts.input;
diff --git a/server/src/controllers/item/getItemById.ts b/server/src/controllers/item/getItemById.ts
index 634ad789c..0614e603e 100644
--- a/server/src/controllers/item/getItemById.ts
+++ b/server/src/controllers/item/getItemById.ts
@@ -1,16 +1,7 @@
-import { publicProcedure, protectedProcedure } from '../../trpc';
+import { protectedProcedure } from '../../trpc';
 import { getItemByIdService } from '../../services/item/item.service';
 import * as validator from '@packrat/validations';
-import { type Context } from 'hono';
-import { responseHandler } from '../../helpers/responseHandler';
 
-/**
- * Retrieves an item by its ID.
- * @param {Object} req - The request object.
- * @param {Object} res - The response object.
- * @param {string} req.body.id - The ID of the item to retrieve.
- * @return {Object} The retrieved item.
- */
 export const getItemById = async (c) => {
   try {
     const { id } = await c.req.parseBody();
@@ -21,18 +12,6 @@ export const getItemById = async (c) => {
   }
 };
 
-export async function getItemById(ctx: Context) {
-  try {
-    const { id } = await ctx.req.param();
-    const item = await getItemByIdService(id);
-    ctx.set('data', item);
-    return await responseHandler(ctx);
-  } catch (error) {
-    ctx.set('error', error.message);
-    return await responseHandler(ctx);
-  }
-}
-
 export function getItemByIdRoute() {
   return protectedProcedure.input(validator.getItemById).query(async (opts) => {
     const { id } = opts.input;
diff --git a/server/src/controllers/item/getItems.ts b/server/src/controllers/item/getItems.ts
index 4e72275a3..7cd881696 100644
--- a/server/src/controllers/item/getItems.ts
+++ b/server/src/controllers/item/getItems.ts
@@ -1,16 +1,7 @@
-import { publicProcedure, protectedProcedure } from '../../trpc';
+import { protectedProcedure } from '../../trpc';
 import { getItemsService } from '../../services/item/item.service';
 import * as validator from '@packrat/validations';
-import { Context } from 'hono';
-import { responseHandler } from '../../helpers/responseHandler';
 
-/**
- * Retrieves a list of items associated with a pack.
- * @param {Object} req - The request object.
- * @param {Object} res - The response object.
- * @param {string} req.params.packId - The ID of the pack to retrieve items for.
- * @return {Object} An array of items associated with the pack.
- */
 export const getItems = async (c) => {
   try {
     const packId = c.req.param('packId');
@@ -21,18 +12,6 @@ export const getItems = async (c) => {
   }
 };
 
-export async function getItems(ctx: Context) {
-  try {
-    const { packId } = await ctx.req.json();
-    const items = await getItemsService(packId);
-    ctx.set('data', items);
-    return await responseHandler(ctx);
-  } catch (error) {
-    ctx.set('error', error.message);
-    return await responseHandler(ctx);
-  }
-}
-
 export function getItemsRoute() {
   return protectedProcedure.input(validator.getItems).query(async (opts) => {
     const { packId } = opts.input;
diff --git a/server/src/controllers/item/getItemsGlobally.ts b/server/src/controllers/item/getItemsGlobally.ts
index 27b544455..537b2c181 100644
--- a/server/src/controllers/item/getItemsGlobally.ts
+++ b/server/src/controllers/item/getItemsGlobally.ts
@@ -1,15 +1,7 @@
-import { publicProcedure, protectedProcedure } from '../../trpc';
+import { protectedProcedure } from '../../trpc';
 import { getItemsGloballyService } from '../../services/item/item.service';
 import { z } from 'zod';
-import { type Context } from 'hono';
-import { responseHandler } from '../../helpers/responseHandler';
 
-/**
- * Retrieves globally available items.
- * @param {Object} req - The request object.
- * @param {Object} res - The response object.
- * @return {Object} The items, page, and total pages.
- */
 export const getItemsGlobally = async (c) => {
   try {
     const { limit, page, searchString } = await c.req.parseBody();
@@ -20,18 +12,6 @@ export const getItemsGlobally = async (c) => {
   }
 };
 
-export async function getItemsGlobally(ctx: Context) {
-  try {
-    const { limit, page, searchString } = await ctx.req.json();
-    const result = await getItemsGloballyService(limit, page, searchString);
-    ctx.set('data', { ...result, items: result.items });
-    return await responseHandler(ctx);
-  } catch (error) {
-    ctx.set('error', error.message);
-    return await responseHandler(ctx);
-  }
-}
-
 export function getItemsGloballyRoute() {
   return protectedProcedure
     .input(
diff --git a/server/src/controllers/item/searchItemsByName.ts b/server/src/controllers/item/searchItemsByName.ts
index 8fbb9cc81..ebf7ef363 100644
--- a/server/src/controllers/item/searchItemsByName.ts
+++ b/server/src/controllers/item/searchItemsByName.ts
@@ -1,17 +1,7 @@
-import { publicProcedure, protectedProcedure } from '../../trpc';
+import { protectedProcedure } from '../../trpc';
 import { searchItemsByNameService } from '../../services/item/item.service';
 import { z } from 'zod';
-import { type Context } from 'hono';
-import { responseHandler } from '../../helpers/responseHandler';
 
-/**
- * Searches for items by name.
- * @param {Object} req - The request object.
- * @param {Object} req.query - The query string parameters.
- * @param {string} req.query.name - The name to search for.
- * @param {Object} res - The response object.
- * @return {Array} An array of items matching the search criteria.
- */
 export const searchItemsByName = async (c) => {
   try {
     const { name } = c.req.query();
@@ -22,18 +12,6 @@ export const searchItemsByName = async (c) => {
   }
 };
 
-export async function searchItemsByName(ctx: Context) {
-  try {
-    const { name } = await ctx.req.json();
-    const items = await searchItemsByNameService(name);
-    ctx.set('data', items);
-    return await responseHandler(ctx);
-  } catch (error) {
-    ctx.set('error', error.message);
-    return await responseHandler(ctx);
-  }
-}
-
 export function searchItemsByNameRoute() {
   return protectedProcedure
     .input(z.object({ name: z.string() }))
diff --git a/server/src/middleware/validators/zodParser.ts b/server/src/middleware/validators/zodParser.ts
index 34b60d799..ebb4565ae 100644
--- a/server/src/middleware/validators/zodParser.ts
+++ b/server/src/middleware/validators/zodParser.ts
@@ -10,7 +10,7 @@ export const zodParser = (
     try {
       let input: any;
       if (location === 'body') {
-        input = await c.req.json();
+        input = await c.req.parseBody();
       } else if (location === 'query') {
         input = c.req.query();
       } else if (location === 'params') {
diff --git a/server/src/routes/favoriteRoutes.ts b/server/src/routes/favoriteRoutes.ts
index 5f28fec29..4b17eaca3 100644
--- a/server/src/routes/favoriteRoutes.ts
+++ b/server/src/routes/favoriteRoutes.ts
@@ -11,93 +11,24 @@ import checkRole from '../middleware/checkRole';
 import { zodParser } from '../middleware/validators/zodParser';
 
 const router = new Hono();
-
-/**
- * @swagger
- * /favorite:
- *   post:
- *     summary: Add to favorite
- *     tags: [Favorite]
- *     requestBody:
- *       required: true
- *       content:
- *         application/json:
- *           schema:
- *             type: object
- *             properties:
- *               packId:
- *                 type: string
- *               userId:
- *                 type: string
- *     responses:
- *       '200':
- *         description: Successful response adding to favorite
- *       '400':
- *         description: Invalid request parameters
- *       '500':
- *         description: Error adding to favorite
- */
 router.post(
   '/',
-  authTokenMiddleware as any,
-  ((req, res, next) =>
-    zodParser(validator.addToFavorite, req.body, next)) as any,
+  authTokenMiddleware,
+  zodParser(validator.addToFavorite, 'body'),
   tryCatchWrapper(addToFavorite),
 );
 
-/**
- * @swagger
- * /favorite/user/{userId}:
- *   get:
- *     summary: Get favorites of a user
- *     tags: [Favorite]
- *     parameters:
- *       - in: path
- *         name: userId
- *         schema:
- *           type: string
- *         required: true
- *         description: ID of the user
- *     responses:
- *       '200':
- *         description: Successful response with user's favorites
- *       '400':
- *         description: Invalid request parameters
- *       '500':
- *         description: Error retrieving favorites
- */
 router.get(
   '/user/:userId',
-  authTokenMiddleware as any,
-  checkRole(['user', 'admin']) as any,
+  authTokenMiddleware,
+  checkRole(['user', 'admin']),
   tryCatchWrapper(getUserFavorites),
 );
 
-/**
- * @swagger
- * /favorite/user/{userId}/packs:
- *   get:
- *     summary: Get favorite packs of a user
- *     tags: [Favorite]
- *     parameters:
- *       - in: path
- *         name: userId
- *         schema:
- *           type: string
- *         required: true
- *         description: ID of the user
- *     responses:
- *       '200':
- *         description: Successful response with user's favorite packs
- *       '400':
- *         description: Invalid request parameters
- *       '500':
- *         description: Error retrieving favorite packs
- */
 router.get(
   '/user/:userId/packs',
-  authTokenMiddleware as any,
-  checkRole(['user', 'admin']) as any,
+  authTokenMiddleware,
+  checkRole(['user', 'admin']),
   tryCatchWrapper(getFavoritePacksByUser),
 );
 
diff --git a/server/src/routes/geoCodeRoutes.ts b/server/src/routes/geoCodeRoutes.ts
index 5daf73ecd..7bb5d097b 100644
--- a/server/src/routes/geoCodeRoutes.ts
+++ b/server/src/routes/geoCodeRoutes.ts
@@ -8,8 +8,8 @@ const router = new Hono();
 
 router.get(
   '/',
-  authTokenMiddleware as any,
-  checkRole(['user', 'admin']) as any,
+  authTokenMiddleware,
+  checkRole(['user', 'admin']),
   tryCatchWrapper(getGeoCode),
 );
 
diff --git a/server/src/routes/getParkRoutes.ts b/server/src/routes/getParkRoutes.ts
index df79280be..ea09f76bc 100644
--- a/server/src/routes/getParkRoutes.ts
+++ b/server/src/routes/getParkRoutes.ts
@@ -10,8 +10,8 @@ const router = new Hono();
 
 router.get(
   '/',
-  authTokenMiddleware as any,
-  checkRole(['user', 'admin']) as any,
+  authTokenMiddleware,
+  checkRole(['user', 'admin']),
   zodParser(validator.getParks, 'body'),
   tryCatchWrapper(getParks),
 );
diff --git a/server/src/routes/getTrailRoutes.ts b/server/src/routes/getTrailRoutes.ts
index 63b938bf3..fb40dbf5b 100644
--- a/server/src/routes/getTrailRoutes.ts
+++ b/server/src/routes/getTrailRoutes.ts
@@ -10,9 +10,8 @@ const router = new Hono();
 
 router.post(
   '/',
-  authTokenMiddleware as any,
-  checkRole(['user', 'admin']) as any,
-  // ((req, res, next) => zodParser(validator.getTrails, req.body, next)) as any,
+  authTokenMiddleware,
+  checkRole(['user', 'admin']),
   zodParser(validator.getTrails, 'body'),
   tryCatchWrapper(getTrails),
 );
diff --git a/server/src/routes/healthRoutes.ts b/server/src/routes/healthRoutes.ts
index b48bea5d0..34f312e5c 100644
--- a/server/src/routes/healthRoutes.ts
+++ b/server/src/routes/healthRoutes.ts
@@ -2,28 +2,6 @@ import { Hono } from 'hono';
 
 const router = new Hono();
 
-/**
- * @swagger
- * tags:
- *   name: Health
- *   description: Health routes
- */
-
-/**
- * @swagger
- * /health:
- * get:
- *  tags:
- *   - Health
- * summary: Get health status
- * responses:
- *  200:
- *   description: Successful response
- *  content:
- *  application/json:
- *  schema:
- *  type: object
- */
 router.get('/', (c) => {
   return c.json({ status: 'ok' });
 });
diff --git a/server/src/routes/index.ts b/server/src/routes/index.ts
index aef00e221..38944ac30 100644
--- a/server/src/routes/index.ts
+++ b/server/src/routes/index.ts
@@ -1,18 +1,17 @@
-// import express, { type Request, type Response } from 'express';
 // import path from 'path';
 // import csrf from 'csurf';
 import packRoutes from './packRoutes';
 import itemRoutes from './itemRoutes';
 import tripRoutes from './tripRoutes';
 import weatherRoutes from './weatherRoutes';
-// import geoCodeRoutes from './geoCodeRoutes';
-// import getParkRoutes from './getParkRoutes';
-// import getTrailRoutes from './getTrailRoutes';
-// import osmRoutes from './osmRoutes';
+import geoCodeRoutes from './geoCodeRoutes';
+import getParkRoutes from './getParkRoutes';
+import getTrailRoutes from './getTrailRoutes';
+import osmRoutes from './osmRoutes';
 import passwordResetRoutes from './passwordResetRoutes';
 import openAiRoutes from './openAiRoutes';
 import templateRoutes from './templateRoutes';
-// import favoriteRouters from './favoriteRoutes';
+import favoriteRouters from './favoriteRoutes';
 import userRoutes from './userRoutes';
 import mapPreviewRouter from './mapPreviewRouter';
 import healthRoutes from './healthRoutes';
@@ -50,14 +49,14 @@ router.route('/pack', packRoutes);
 router.route('/item', itemRoutes);
 router.route('/trip', tripRoutes);
 router.route('/weather', weatherRoutes);
-// router.use('/geocode', geoCodeRoutes);
-// router.use('/getparks', getParkRoutes);
-// router.use('/gettrails', getTrailRoutes);
-// router.use('/osm', osmRoutes);
+router.route('/geocode', geoCodeRoutes);
+router.route('/getparks', getParkRoutes);
+router.route('/gettrails', getTrailRoutes);
+router.route('/osm', osmRoutes);
 router.route('/password-reset', passwordResetRoutes);
 router.route('/openai', openAiRoutes);
 router.route('/template', templateRoutes);
-// router.use('/favorite', favoriteRouters);
+router.route('/favorite', favoriteRouters);
 router.route('/mapPreview', mapPreviewRouter);
 router.route('/health', healthRoutes);
 
@@ -68,21 +67,21 @@ helloRouter.get('/', (c) => {
 router.route('/hello', helloRouter);
 
 // Also listen to /api for backwards compatibility
-// router.use('/api/user', userRoutes);
-// router.use('/api/pack', packRoutes);
-// router.use('/api/item', itemRoutes);
-// router.use('/api/trip', tripRoutes);
-// router.use('/api/weather', weatherRoutes);
-// router.use('/api/geocode', geoCodeRoutes);
-// router.use('/api/getparks', getParkRoutes);
-// router.use('/api/gettrails', getTrailRoutes);
-// router.use('/api/osm', osmRoutes);
-// router.use('/api/password-reset', passwordResetRoutes);
-// router.use('/api/openai', openAiRoutes);
-// router.use('/api/template', templateRoutes);
-// router.use('/api/favorite', favoriteRouters);
-// router.use('/api/openai', openAiRoutes);
-// router.use('/api/mapPreview', mapPreviewRouter);
+router.route('/api/user', userRoutes);
+router.route('/api/pack', packRoutes);
+router.route('/api/item', itemRoutes);
+router.route('/api/trip', tripRoutes);
+router.route('/api/weather', weatherRoutes);
+router.route('/api/geocode', geoCodeRoutes);
+router.route('/api/getparks', getParkRoutes);
+router.route('/api/gettrails', getTrailRoutes);
+router.route('/api/osm', osmRoutes);
+router.route('/api/password-reset', passwordResetRoutes);
+router.route('/api/openai', openAiRoutes);
+router.route('/api/template', templateRoutes);
+router.route('/api/favorite', favoriteRouters);
+router.route('/api/openai', openAiRoutes);
+router.route('/api/mapPreview', mapPreviewRouter);
 
 // // Static routes for serving the React Native Web app
 // if (process.env.NODE_ENV === 'production') {
diff --git a/server/src/routes/itemRoutes.ts b/server/src/routes/itemRoutes.ts
index 9f3ac5628..acf68cd67 100644
--- a/server/src/routes/itemRoutes.ts
+++ b/server/src/routes/itemRoutes.ts
@@ -17,20 +17,19 @@ import { tryCatchWrapper } from '../helpers/tryCatchWrapper';
 import authTokenMiddleware from '../middleware/auth';
 import checkRole from '../middleware/checkRole';
 import { zodParser } from '../middleware/validators/zodParser';
-import { valid } from 'joi';
 
 const router = new Hono();
 
 router.get(
   '/packItems/:packId',
-  authTokenMiddleware as any,
+  authTokenMiddleware,
   zodParser(validator.getItems, 'params'),
   tryCatchWrapper(getItems),
 );
 
 router.get(
   '/i/:id',
-  authTokenMiddleware as any,
+  authTokenMiddleware,
   zodParser(validator.getItemById, 'params'),
   tryCatchWrapper(getItemById),
 );
@@ -44,60 +43,60 @@ router.get(
 
 router.post(
   '/',
-  authTokenMiddleware as any,
+  authTokenMiddleware,
   zodParser(validator.addItem, 'body'),
   tryCatchWrapper(addItem),
 );
 
 router.put(
   '/',
-  authTokenMiddleware as any,
+  authTokenMiddleware,
   zodParser(validator.editItem, 'body'),
   tryCatchWrapper(editItem),
 );
 
 router.delete(
   '/',
-  authTokenMiddleware as any,
+  authTokenMiddleware,
   zodParser(validator.deleteItem, 'body'),
   tryCatchWrapper(deleteItem),
 );
 
 router.post(
   '/global',
-  authTokenMiddleware as any,
+  authTokenMiddleware,
   zodParser(validator.addItemGlobal, 'body'),
   tryCatchWrapper(addItemGlobal),
 );
 
 router.get(
   '/global',
-  authTokenMiddleware as any,
-  checkRole(['user', 'admin']) as any,
+  authTokenMiddleware,
+  checkRole(['user', 'admin']),
   zodParser(validator.getItemsGlobally, 'body'),
   tryCatchWrapper(getItemsGlobally),
 );
 
 router.post(
   '/global/select/:packId',
-  authTokenMiddleware as any,
-  checkRole(['user', 'admin']) as any,
+  authTokenMiddleware,
+  checkRole(['user', 'admin']),
   zodParser(validator.addGlobalItemToPack, 'body'),
   tryCatchWrapper(addGlobalItemToPack),
 );
 
 router.put(
   '/global/:itemId',
-  authTokenMiddleware as any,
-  checkRole(['user', 'admin']) as any,
+  authTokenMiddleware,
+  checkRole(['user', 'admin']),
   zodParser(validator.editGlobalItemAsDuplicate, 'params'),
   tryCatchWrapper(editGlobalItemAsDuplicate),
 );
 
 router.delete(
   '/global/:itemId',
-  authTokenMiddleware as any,
-  checkRole(['user', 'admin']) as any,
+  authTokenMiddleware,
+  checkRole(['user', 'admin']),
   zodParser(validator.deleteGlobalItem, 'params'),
   tryCatchWrapper(deleteGlobalItem),
 );
diff --git a/server/src/routes/mapPreviewRouter.ts b/server/src/routes/mapPreviewRouter.ts
index f37a52de1..565ecfe61 100644
--- a/server/src/routes/mapPreviewRouter.ts
+++ b/server/src/routes/mapPreviewRouter.ts
@@ -6,35 +6,6 @@ import checkRole from '../middleware/checkRole';
 
 const router = new Hono();
 
-/**
- * @swagger
- * /mapPreview/{mapQuery}:
- *  get:
- *   summary: get static image map preview
- *   tags:
- *    - Map image preview
- *   parameters:
- *    - in: path
- *      name: mapQuery
- *      schema:
- *       type: string
- *      required: true
- *      description: mapQuery is anything that comes after "https://api.mapbox.com/styles/v1/mapbox/streets-v12/static/" excluding access_token query param
- *   responses:
- *    200:
- *     content:
- *      image/png:
- *       schema:
- *        type: string
- *        format: binary
- *    500:
- *     description: Error getting map preview
- */
-router.get(
-  '/*',
-  authTokenMiddleware as any,
-  tryCatchWrapper(getMapPreview),
-  // getMapPreview,
-);
+router.get('/*', authTokenMiddleware, tryCatchWrapper(getMapPreview));
 
 export default router;
diff --git a/server/src/routes/osmRoutes.ts b/server/src/routes/osmRoutes.ts
index d98a94090..5cd0b5a5a 100644
--- a/server/src/routes/osmRoutes.ts
+++ b/server/src/routes/osmRoutes.ts
@@ -1,13 +1,12 @@
 import { Hono } from 'hono';
 import {
-  getDestinationRoute as getDestination,
-  getOsmRoute as getOsm,
-  getParksOSMRoute as getParksOSM,
+  getDestination,
+  getOsm,
+  getParksOSM,
   getPhotonResults,
   getTrailsOSM,
   postSingleGeoJSON,
   getPhotonDetails,
-  // getEnhancedPhotonDetails,
 } from '../controllers/getOsm/index';
 import { tryCatchWrapper } from '../helpers/tryCatchWrapper';
 import authTokenMiddleware from '../middleware/auth';
@@ -15,250 +14,53 @@ import checkRole from '../middleware/checkRole';
 
 const router = new Hono();
 
-/**
- * @swagger
- * tags:
- *   name: OSM
- *   description: OSM routes
- */
-
-/**
- * @swagger
- * /osm/photon/search:
- *   get:
- *     summary: Get Photon search results
- *     tags: [OSM]
- *     parameters:
- *       - in: query
- *         name: searchString
- *         schema:
- *           type: string
- *         required: true
- *         description: The search string for Photon API
- *     responses:
- *       '200':
- *         description: Successful response with Photon search results
- *       '400':
- *         description: Invalid request parameters
- *       '500':
- *         description: Error retrieving Photon results
- */
 router.get(
   '/photon/search',
-  authTokenMiddleware as any,
-  checkRole(['user', 'admin']) as any,
+  authTokenMiddleware,
+  checkRole(['user', 'admin']),
   tryCatchWrapper(getPhotonResults),
 );
 
-/**
- * @swagger
- * /osm/trails:
- *   get:
- *     summary: Get Trails OSM results
- *     tags: [OSM]
- *     parameters:
- *       - in: query
- *         name: lat
- *         required: false
- *         schema:
- *           type: number
- *       - in: query
- *         name: lon
- *         required: false
- *         schema:
- *           type: number
- *       - in: query
- *         name: radius
- *         required: false
- *         schema:
- *           type: number
- *     responses:
- *       200:
- *         description: Successful response with Trails OSM results
- *       400:
- *         description: Invalid request parameters
- *       500:
- *         description: Error retrieving Trails OSM results
- */
 router.get(
   '/trails',
-  authTokenMiddleware as any,
-  checkRole(['user', 'admin']) as any,
+  authTokenMiddleware,
+  checkRole(['user', 'admin']),
   tryCatchWrapper(getTrailsOSM),
 );
 
-/**
- * @swagger
- * /osm/parks:
- *   get:
- *     summary: Get Parks OSM results
- *     tags: [OSM]
- *     parameters:
- *       - in: query
- *         name: lat
- *         schema:
- *           type: number
- *         required: false
- *       - in: query
- *         name: lon
- *         schema:
- *           type: number
- *         required: false
- *       - in: query
- *         name: radius
- *         schema:
- *           type: number
- *         required: false
- *     responses:
- *       '200':
- *         description: Successful response with Parks OSM results
- *       '400':
- *         description: Invalid request parameters
- *       '500':
- *         description: Error retrieving Parks OSM results
- */
 router.get(
   '/parks',
-  authTokenMiddleware as any,
-  checkRole(['user', 'admin']) as any,
+  authTokenMiddleware,
+  checkRole(['user', 'admin']),
   tryCatchWrapper(getParksOSM),
 );
 
-/**
- * @swagger
- * /osm:
- *   post:
- *     summary: Get OSM data
- *     tags: [OSM]
- *     requestBody:
- *       required: true
- *       content:
- *         text/plain:
- *           schema:
- *             type: object
- *             properties:
- *               activityType:
- *                 type: string
- *               startPoint:
- *                 type: object
- *                 properties:
- *                   latitude:
- *                     type: number
- *                   longitude:
- *                     type: number
- *               endPoint:
- *                 type: object
- *                 properties:
- *                   latitude:
- *                     type: number
- *                   longitude:
- *                     type: number
- *     responses:
- *       '200':
- *         description: Successful response with OSM data
- *       '400':
- *         description: Invalid request parameters
- *       '500':
- *         description: Error retrieving Overpass Data
- */
 router.post(
   '/osm',
-  authTokenMiddleware as any,
-  checkRole(['user', 'admin']) as any,
+  authTokenMiddleware,
+  checkRole(['user', 'admin']),
   tryCatchWrapper(getOsm),
 );
 
-/**
- * @swagger
- * /process/geojson:
- *   post:
- *     summary: Post a single GeoJSON object
- *     tags: [OSM]
- *     requestBody:
- *     required: true
- *     content:
- *       application/json:
- *         schema:
- *           type: object
- *           properties:
- *             geojson:
- *               type: object
- *     responses:
- *       '201':
- *         description: Successfully created new instance
- *       '400':
- *         description: Invalid or missing geoJSON
- *       '500':
- *         description: Error processing request
- */
 router.post(
   '/process/geojson',
-  authTokenMiddleware as any,
-  checkRole(['user', 'admin']) as any,
+  authTokenMiddleware,
+  checkRole(['user', 'admin']),
   tryCatchWrapper(postSingleGeoJSON),
 );
 
-/**
- * @swagger
- * /destination/{id}:
- *   get:
- *     summary: Get a single destination by ID
- *     tags: [OSM]
- *     parameters:
- *       - in: path
- *         name: id
- *         schema:
- *           type: string
- *         required: true
- *         description: The id of the destination
- *     responses:
- *       '200':
- *         description: Successfully retrieved destination
- *       '404':
- *         description: No destination found with provided ID
- *       '500':
- *         description: Error retrieving destination
- */
 router.get(
   '/destination/:id',
-  authTokenMiddleware as any,
-  checkRole(['user', 'admin']) as any,
+  authTokenMiddleware,
+  checkRole(['user', 'admin']),
   tryCatchWrapper(getDestination),
 );
 
-/**
- * @swagger
- * /photonDetails/:type/:id:
- *   get:
- *     summary: Get Photon details for a specific result
- *     tags: [OSM]
- *     parameters:
- *       - in: path
- *         name: type
- *         schema:
- *           type: string
- *         required: true
- *         description: The type of the Photon result
- *       - in: path
- *         name: id
- *         schema:
- *           type: string
- *         required: true
- *         description: The id of the Photon result
- *     responses:
- *       '200':
- *         description: Successful response with Photon details
- *       '400':
- *         description: Invalid request parameters
- *       '500':
- *         description: Error retrieving Photon details
- */
 router.get(
   '/photonDetails/:type/:id',
-  authTokenMiddleware as any,
-  checkRole(['user', 'admin']) as any,
+  authTokenMiddleware,
+  checkRole(['user', 'admin']),
   tryCatchWrapper(getPhotonDetails),
 );
-// router.get("/photonDetails/:type/:id", getEnhancedPhotonDetails)
 
 export default router;
diff --git a/server/src/routes/templateRoutes.ts b/server/src/routes/templateRoutes.ts
index 3dc90625b..6abe6a224 100644
--- a/server/src/routes/templateRoutes.ts
+++ b/server/src/routes/templateRoutes.ts
@@ -15,39 +15,39 @@ const router = new Hono();
 
 router.get(
   '/',
-  authTokenMiddleware as any,
-  checkRole(['user', 'admin']) as any,
+  authTokenMiddleware,
+  checkRole(['user', 'admin']),
   tryCatchWrapper(getTemplates),
 );
 
 router.get(
   '/:templateId',
-  authTokenMiddleware as any,
-  checkRole(['user', 'admin']) as any,
+  authTokenMiddleware,
+  checkRole(['user', 'admin']),
   tryCatchWrapper(getTemplateById),
 );
 
 router.post(
   '/',
-  authTokenMiddleware as any,
-  checkRole(['user', 'admin']) as any,
-  isAdmin as any,
+  authTokenMiddleware,
+  checkRole(['user', 'admin']),
+  isAdmin,
   tryCatchWrapper(addTemplate),
 );
 
 router.put(
   '/:templateId',
-  authTokenMiddleware as any,
-  checkRole(['user', 'admin']) as any,
-  isAdmin as any,
+  authTokenMiddleware,
+  checkRole(['user', 'admin']),
+  isAdmin,
   tryCatchWrapper(editTemplate),
 );
 
 router.delete(
   '/:templateId',
-  authTokenMiddleware as any,
-  checkRole(['user', 'admin']) as any,
-  isAdmin as any,
+  authTokenMiddleware,
+  checkRole(['user', 'admin']),
+  isAdmin,
   tryCatchWrapper(deleteTemplate),
 );
 
diff --git a/server/src/routes/tripRoutes.ts b/server/src/routes/tripRoutes.ts
index 8d02255b9..f5daf9fe0 100644
--- a/server/src/routes/tripRoutes.ts
+++ b/server/src/routes/tripRoutes.ts
@@ -17,42 +17,42 @@ const router = new Hono();
 
 router.get(
   '/',
-  authTokenMiddleware as any,
+  authTokenMiddleware,
   checkRole(['user', 'admin']),
   tryCatchWrapper(getPublicTrips),
 );
 
 router.get(
   '/:ownerId',
-  authTokenMiddleware as any,
+  authTokenMiddleware,
   zodParser(validator.getTrips, 'params'),
   tryCatchWrapper(getTrips),
 );
 
 router.get(
   '/t/:tripId',
-  authTokenMiddleware as any,
+  authTokenMiddleware,
   zodParser(validator.getTripById, 'params'),
   tryCatchWrapper(getTripById),
 );
 
 router.post(
   '/',
-  authTokenMiddleware as any,
+  authTokenMiddleware,
   zodParser(validator.addTrip, 'body'),
   tryCatchWrapper(addTrip),
 );
 
 router.put(
   '/',
-  authTokenMiddleware as any,
+  authTokenMiddleware,
   zodParser(validator.editTrip, 'body'),
   tryCatchWrapper(editTrip),
 );
 
 router.delete(
   '/',
-  authTokenMiddleware as any,
+  authTokenMiddleware,
   zodParser(validator.deleteTrip, 'body'),
   tryCatchWrapper(deleteTrip),
 );
diff --git a/server/src/routes/weatherRoutes.ts b/server/src/routes/weatherRoutes.ts
index 5f93e4941..5fdc02eb3 100644
--- a/server/src/routes/weatherRoutes.ts
+++ b/server/src/routes/weatherRoutes.ts
@@ -5,6 +5,6 @@ import { tryCatchWrapper } from '../helpers/tryCatchWrapper';
 
 const router = new Hono();
 
-router.get('/', authTokenMiddleware as any, tryCatchWrapper(getWeather));
+router.get('/', authTokenMiddleware, tryCatchWrapper(getWeather));
 
 export default router;

From 92003ba1643af5dc71901a2340c7b85dde483c54 Mon Sep 17 00:00:00 2001
From: pinocchio-life-like <icbr19fl@gmail.com>
Date: Thu, 18 Jul 2024 15:33:34 +0300
Subject: [PATCH 238/257] cleanup

---
 server/src/controllers/getTrail/getTrails.ts  | 34 ++-----------------
 server/src/controllers/mapPreview/index.ts    |  9 -----
 server/src/controllers/pack/addPack.ts        |  8 +----
 server/src/controllers/pack/deletePack.ts     |  9 ++---
 .../controllers/pack/duplicatePublicPack.ts   |  8 +----
 server/src/controllers/pack/getPackById.ts    |  8 +----
 server/src/controllers/pack/getPacks.ts       |  8 +----
 server/src/controllers/pack/getPublicPacks.ts |  6 ----
 server/src/controllers/pack/scorePack.ts      |  8 +----
 server/src/controllers/trip/addTrip.ts        |  7 +---
 server/src/controllers/trip/editTrip.ts       |  6 ----
 server/src/controllers/trip/getPublicTrips.ts |  6 ----
 server/src/controllers/trip/getTrip.ts        |  6 ----
 server/src/controllers/trip/getTripById.ts    |  7 +---
 server/src/controllers/user/deleteUser.ts     |  6 ----
 server/src/controllers/user/editUser.ts       |  8 -----
 .../src/controllers/user/getGoogleAuthUrl.ts  |  6 ----
 server/src/controllers/user/getMe.ts          |  6 ----
 server/src/controllers/user/getUserById.ts    |  7 +---
 server/src/controllers/user/getUsers.ts       | 23 +------------
 server/src/controllers/user/resetPassword.ts  |  6 ----
 server/src/controllers/user/sentEmail.ts      |  6 ----
 server/src/controllers/user/userSignIn.ts     |  6 ----
 23 files changed, 13 insertions(+), 191 deletions(-)

diff --git a/server/src/controllers/getTrail/getTrails.ts b/server/src/controllers/getTrail/getTrails.ts
index 7e4b8eacc..ee81bca86 100644
--- a/server/src/controllers/getTrail/getTrails.ts
+++ b/server/src/controllers/getTrail/getTrails.ts
@@ -1,38 +1,8 @@
-import { publicProcedure, protectedProcedure } from '../../trpc';
+import { protectedProcedure } from '../../trpc';
 import { responseHandler } from '../../helpers/responseHandler';
-import * as validators from '@packrat/validations';
 import { getTrailsService } from '../../services/trails/getTrailsService';
 import { z } from 'zod';
-import { Context } from 'hono';
-
-/**
- * Retrieves trails based on the provided parameters.
- * @param {Object} req - The request object containing the parameters.
- * @param {Object} res - The response object.
- * @return {Promise} A promise that resolves with the retrieved trail data or an error message.
- */
-// export const getTrails = async (req, res, next) => {
-//   const radiusParams = 25;
-//   const activityParams = true;
-//   const {
-//     administrative_area_level_1,
-//     country,
-//     locality,
-//     latitude,
-//     longitude,
-//   } = req.body;
-//   const response = await getTrailsService(
-//     administrative_area_level_1,
-//     country,
-//     locality,
-//     latitude,
-//     longitude,
-//     radiusParams,
-//     activityParams,
-//   );
-//   res.locals.data = response;
-//   responseHandler(res);
-// };
+import type { Context } from 'hono';
 
 export async function getTrails(ctx: Context) {
   try {
diff --git a/server/src/controllers/mapPreview/index.ts b/server/src/controllers/mapPreview/index.ts
index 9683ce5fe..b1b873455 100644
--- a/server/src/controllers/mapPreview/index.ts
+++ b/server/src/controllers/mapPreview/index.ts
@@ -1,16 +1,7 @@
 // import { MAPBOX_ACCESS_TOKEN } from '../../config';
-import { MapPreviewError } from '../../helpers/errors';
 import { type Context, type Next } from 'hono';
 import { responseHandler } from '../../helpers/responseHandler';
 
-/**
- *  Responds with map preview image from mapbox api
- *
- * @param {Request} req - Request object
- * @param {Response} res - Respone object
- * @param {NextFunction} next - The next middleware
- * @returns {Promise} - Resolves with the preview image
- */
 const getMapPreview = async (ctx: Context, next: Next) => {
   try {
     const { env }: any = ctx;
diff --git a/server/src/controllers/pack/addPack.ts b/server/src/controllers/pack/addPack.ts
index 54bb62204..0692962b2 100644
--- a/server/src/controllers/pack/addPack.ts
+++ b/server/src/controllers/pack/addPack.ts
@@ -1,13 +1,7 @@
 import { addPackService } from '../../services/pack/pack.service';
 import * as validator from '@packrat/validations';
-import { publicProcedure, protectedProcedure } from '../../trpc';
+import { protectedProcedure } from '../../trpc';
 
-/**
- * Adds a new pack to the database.
- * @param {Object} req - The HTTP request object.
- * @param {Object} res - The HTTP response object.
- * @return {Promise} A promise that resolves to the created pack.
- */
 export const addPack = async (c) => {
   try {
     const { name, owner_id, is_public } = await c.req.parseBody();
diff --git a/server/src/controllers/pack/deletePack.ts b/server/src/controllers/pack/deletePack.ts
index c8fa868bf..3173eb7cf 100644
--- a/server/src/controllers/pack/deletePack.ts
+++ b/server/src/controllers/pack/deletePack.ts
@@ -1,12 +1,7 @@
 import { deletePackService } from '../../services/pack/pack.service';
 import * as validator from '@packrat/validations';
-import { publicProcedure, protectedProcedure } from '../../trpc';
-/**
- * Deletes a pack.
- * @param {Object} req - The request object.
- * @param {Object} res - The response object.
- * @return {Promise} A promise that resolves with the deletion result.
- */
+import { protectedProcedure } from '../../trpc';
+
 export const deletePack = async (c) => {
   try {
     const { packId } = await c.req.parseBody();
diff --git a/server/src/controllers/pack/duplicatePublicPack.ts b/server/src/controllers/pack/duplicatePublicPack.ts
index 93b77d4a0..cc5f89b3b 100644
--- a/server/src/controllers/pack/duplicatePublicPack.ts
+++ b/server/src/controllers/pack/duplicatePublicPack.ts
@@ -1,13 +1,7 @@
 import { duplicatePublicPackService } from '../../services/pack/pack.service';
 import * as validator from '@packrat/validations';
-import { publicProcedure, protectedProcedure } from '../../trpc';
+import { protectedProcedure } from '../../trpc';
 
-/**
- * Duplicates a public pack.
- * @param {Object} req - the request object
- * @param {Object} res - the response object
- * @return {Promise} - a promise that resolves with the duplicated pack
- */
 export const duplicatePublicPack = async (c) => {
   try {
     const { packId, ownerId, items } = await c.req.parseBody();
diff --git a/server/src/controllers/pack/getPackById.ts b/server/src/controllers/pack/getPackById.ts
index 73a49414a..5b6027eb2 100644
--- a/server/src/controllers/pack/getPackById.ts
+++ b/server/src/controllers/pack/getPackById.ts
@@ -1,13 +1,7 @@
-import { publicProcedure, protectedProcedure } from '../../trpc';
+import { protectedProcedure } from '../../trpc';
 import { getPackByIdService } from '../../services/pack/pack.service';
 import * as validator from '@packrat/validations';
 
-/**
- * Retrieves a pack by its ID and returns it as a JSON response.
- * @param {Object} req - The request object.
- * @param {Object} res - The response object.
- * @return {Object} The pack object as a JSON response.
- */
 export const getPackById = async (c) => {
   try {
     const { packId } = await c.req.parseParams();
diff --git a/server/src/controllers/pack/getPacks.ts b/server/src/controllers/pack/getPacks.ts
index c951f36f8..eccbd78b3 100644
--- a/server/src/controllers/pack/getPacks.ts
+++ b/server/src/controllers/pack/getPacks.ts
@@ -1,13 +1,7 @@
 import { getPacksService } from '../../services/pack/pack.service';
-import { publicProcedure, protectedProcedure } from '../../trpc';
+import { protectedProcedure } from '../../trpc';
 import * as validator from '@packrat/validations';
 
-/**
- * Retrieves packs associated with a specific owner.
- * @param {Object} req - Express request object.
- * @param {Object} res - Express response object.
- * @return {Promise} - Array of packs.
- */
 export const getPacks = async (c) => {
   try {
     const { ownerId, queryBy } = await c.req.parseQuery();
diff --git a/server/src/controllers/pack/getPublicPacks.ts b/server/src/controllers/pack/getPublicPacks.ts
index 36f73a3e8..31fb469e5 100644
--- a/server/src/controllers/pack/getPublicPacks.ts
+++ b/server/src/controllers/pack/getPublicPacks.ts
@@ -2,12 +2,6 @@ import { publicProcedure, protectedProcedure } from '../../trpc';
 import { getPublicPacksService } from '../../services/pack/pack.service';
 import { z } from 'zod';
 
-/**
- * Retrieves public packs based on the given query parameter.
- * @param {Object} req - the request object
- * @param {Object} res - the response object
- * @return {Promise} - a promise that resolves with the retrieved public packs
- */
 export const getPublicPacks = async (c) => {
   try {
     const { queryBy } = await c.req.parseQuery();
diff --git a/server/src/controllers/pack/scorePack.ts b/server/src/controllers/pack/scorePack.ts
index 100766dca..9bca56db6 100644
--- a/server/src/controllers/pack/scorePack.ts
+++ b/server/src/controllers/pack/scorePack.ts
@@ -1,13 +1,7 @@
-import { publicProcedure, protectedProcedure } from '../../trpc';
+import { protectedProcedure } from '../../trpc';
 import { scorePackService } from '../../services/pack/pack.service';
 import * as validator from '@packrat/validations';
 
-/**
- * Scores a pack by calculating its score and updating the pack object in the database.
- * @param {Object} req - The request object containing the packId parameter.
- * @param {Object} res - The response object used to send the response.
- * @return {Promise} A promise that resolves to the updated pack object or an error message.
- */
 export const scorePack = async (c) => {
   try {
     const { packId } = await c.req.parseParams();
diff --git a/server/src/controllers/trip/addTrip.ts b/server/src/controllers/trip/addTrip.ts
index e14d0e633..74c7365b5 100644
--- a/server/src/controllers/trip/addTrip.ts
+++ b/server/src/controllers/trip/addTrip.ts
@@ -1,12 +1,7 @@
 import { publicProcedure, protectedProcedure } from '../../trpc';
 import { addTripService } from '../../services/trip/addTripService';
 import * as validator from '@packrat/validations';
-/**
- * Adds a trip to the database.
- * @param {Object} req - The request object containing the trip details.
- * @param {Object} res - The response object.
- * @return {Promise} A promise that resolves to a success message or rejects with an error message.
- */
+
 export const addTrip = async (c) => {
   try {
     const tripData = await c.req.parseBody();
diff --git a/server/src/controllers/trip/editTrip.ts b/server/src/controllers/trip/editTrip.ts
index 01147120a..a10093e1e 100644
--- a/server/src/controllers/trip/editTrip.ts
+++ b/server/src/controllers/trip/editTrip.ts
@@ -2,12 +2,6 @@ import { protectedProcedure } from '../../trpc';
 import * as validator from '@packrat/validations';
 import { Trip } from '../../drizzle/methods/trip';
 
-/**
- * Edits a trip by updating the trip details.
- * @param {Object} req - The request object.
- * @param {Object} res - The response object.
- * @return {Object} The updated trip object.
- */
 export const editTrip = async (c) => {
   try {
     const tripData = await c.req.parseBody();
diff --git a/server/src/controllers/trip/getPublicTrips.ts b/server/src/controllers/trip/getPublicTrips.ts
index d983c774f..99444ec35 100644
--- a/server/src/controllers/trip/getPublicTrips.ts
+++ b/server/src/controllers/trip/getPublicTrips.ts
@@ -2,12 +2,6 @@ import { protectedProcedure } from '../../trpc';
 import { getPublicTripsService } from '../../services/trip/getPublicTripService';
 import { z } from 'zod';
 
-/**
- * Retrieves public trips based on the given query parameter.
- * @param {object} req - The request object.
- * @param {object} res - The response object.
- * @return {object} The public trips as a JSON response.
- */
 export const getPublicTrips = async (c) => {
   try {
     const { queryBy } = await c.req.parseBody();
diff --git a/server/src/controllers/trip/getTrip.ts b/server/src/controllers/trip/getTrip.ts
index 687ba830c..7fc59c34f 100644
--- a/server/src/controllers/trip/getTrip.ts
+++ b/server/src/controllers/trip/getTrip.ts
@@ -2,12 +2,6 @@ import { publicProcedure, protectedProcedure } from '../../trpc';
 import { getTripsService } from '../../services/trip/getTripsService';
 import * as validator from '@packrat/validations';
 
-/**
- * Retrieves trips belonging to a specific owner.
- * @param {Object} req - The request object.
- * @param {Object} res - The response object.
- * @return {Promise<void>} The trips owned by the specified owner.
- */
 export const getTrips = async (c) => {
   try {
     const { owner_id } = await c.req.parseParams();
diff --git a/server/src/controllers/trip/getTripById.ts b/server/src/controllers/trip/getTripById.ts
index 93e3bf9fc..ef79b8922 100644
--- a/server/src/controllers/trip/getTripById.ts
+++ b/server/src/controllers/trip/getTripById.ts
@@ -1,12 +1,7 @@
 import { publicProcedure, protectedProcedure } from '../../trpc';
 import { getTripByIdService } from '../../services/trip/getTripByIdService';
 import * as validator from '@packrat/validations';
-/**
- * Retrieves a trip by its ID and returns the trip details.
- * @param {Object} req - The request object.
- * @param {Object} res - The response object.
- * @return {Promise} A promise that resolves to the trip details.
- */
+
 export const getTripById = async (c) => {
   try {
     const { tripId } = await c.req.parseParams();
diff --git a/server/src/controllers/user/deleteUser.ts b/server/src/controllers/user/deleteUser.ts
index 4524bc215..22e7770ab 100644
--- a/server/src/controllers/user/deleteUser.ts
+++ b/server/src/controllers/user/deleteUser.ts
@@ -2,12 +2,6 @@ import { publicProcedure, protectedProcedure } from '../../trpc';
 import * as validator from '@packrat/validations';
 import { User } from '../../drizzle/methods/User';
 
-/**
- * Deletes a user from the database.
- * @param {Object} req - The request object containing the user ID.
- * @param {Object} res - The response object.
- * @return {Promise} A promise that resolves to the message "user was deleted successfully" if the user is deleted, or rejects with an error message if there is an error.
- */
 export const deleteUser = async (c) => {
   try {
     const { userId } = await c.req.parseBody();
diff --git a/server/src/controllers/user/editUser.ts b/server/src/controllers/user/editUser.ts
index ab68146bb..3b7a10355 100644
--- a/server/src/controllers/user/editUser.ts
+++ b/server/src/controllers/user/editUser.ts
@@ -3,14 +3,6 @@ import * as validator from '@packrat/validations';
 import { User } from '../../drizzle/methods/User';
 import { hashPassword } from '../../utils/user';
 
-/**
- * Edits a user.
- * @param {Object} req - The request object.
- * @param {Object} req.body - The body of the request.
- * @param {string} req.body.userId - The ID of the user to edit.
- * @param {Object} res - The response object.
- * @return {Promise} A promise that resolves to the edited user.
- */
 export const editUser = async (c) => {
   try {
     let {
diff --git a/server/src/controllers/user/getGoogleAuthUrl.ts b/server/src/controllers/user/getGoogleAuthUrl.ts
index b5a44d86d..561c09355 100644
--- a/server/src/controllers/user/getGoogleAuthUrl.ts
+++ b/server/src/controllers/user/getGoogleAuthUrl.ts
@@ -1,11 +1,5 @@
 import { publicProcedure } from '../../trpc';
 
-/**
- * Retrieves the Google authentication URL.
- * @param {object} req - The request object.
- * @param {object} res - The response object.
- * @return {object} The Google authentication URL and status.
- */
 export const getGoogleAuthURL = async (c) => {
   try {
     const scopes = [
diff --git a/server/src/controllers/user/getMe.ts b/server/src/controllers/user/getMe.ts
index 4ca545723..f870b54d6 100644
--- a/server/src/controllers/user/getMe.ts
+++ b/server/src/controllers/user/getMe.ts
@@ -1,12 +1,6 @@
 import { getUserByTokenService } from '../../services/user/getUserByToken';
 import { protectedProcedure } from '../../trpc';
 
-/**
- * Retrieves the user information and sends it as a response.
- * @param {object} req - The request object.
- * @param {object} res - The response object.
- * @return {object} The user information.
- */
 export const getMe = async (c) => {
   try {
     const { user } = c;
diff --git a/server/src/controllers/user/getUserById.ts b/server/src/controllers/user/getUserById.ts
index a3c3c11a6..014956b78 100644
--- a/server/src/controllers/user/getUserById.ts
+++ b/server/src/controllers/user/getUserById.ts
@@ -2,12 +2,7 @@ import { publicProcedure, protectedProcedure } from '../../trpc';
 import { getUserByIdService } from '../../services/user/getUserByIdService';
 import * as validator from '@packrat/validations';
 import { responseHandler } from '../../helpers/responseHandler';
-/**
- * Retrieves a user by their ID from the database and returns the user object as a JSON response.
- * @param {Object} req - The request object.
- * @param {Object} res - The response object.
- * @return {Object} The user object as a JSON response.
- */
+
 export const getUserById = async (c) => {
   try {
     // Correctly accessing route parameters in Hono
diff --git a/server/src/controllers/user/getUsers.ts b/server/src/controllers/user/getUsers.ts
index a0925f9ca..f4080e291 100644
--- a/server/src/controllers/user/getUsers.ts
+++ b/server/src/controllers/user/getUsers.ts
@@ -1,28 +1,7 @@
-import { publicProcedure, protectedProcedure } from '../../trpc';
-import { UserNotFoundError } from '../../helpers/errors';
+import { protectedProcedure } from '../../trpc';
 import { responseHandler } from '../../helpers/responseHandler';
 import { User } from '../../drizzle/methods/User';
-import { Context, Next } from 'hono';
 
-// Middleware to check if user is authenticated
-// export const isAuthenticated = async (req, res, next) => {
-//   const token = req.headers.authorization.split(" ")[1];
-//   try {
-//     const decodedToken = await firebaseAdmin.auth().verifyIdToken(token);
-//     req.userData = decodedToken;
-//     next();
-//   } catch (error) {
-//     res.status(401).json({ error: "Unauthorized" });
-//   }
-// };
-
-/**
- * Get all users from the database and send a JSON response.
- * @param {Object} req - The request object.
- * @param {Object} res - The response object.
- * @return {Promise} The JSON response containing the users.
- */
-// Adjust the getUsers function to be compatible with Hono
 export const getUsers = async (c) => {
   try {
     const userClass = new User();
diff --git a/server/src/controllers/user/resetPassword.ts b/server/src/controllers/user/resetPassword.ts
index 6f37f48ec..51d6121c5 100644
--- a/server/src/controllers/user/resetPassword.ts
+++ b/server/src/controllers/user/resetPassword.ts
@@ -2,12 +2,6 @@ import { publicProcedure } from '../../trpc';
 import * as validator from '@packrat/validations';
 import { User } from '../../drizzle/methods/User';
 import { hashPassword } from '../../utils/user';
-/**
- * Resets the user's password.
- * @param {Object} req - The request object.
- * @param {Object} res - The response object.
- * @return {Promise<void>} A promise that resolves when the password is successfully reset.
- */
 
 export const resetPassword = async (c) => {
   try {
diff --git a/server/src/controllers/user/sentEmail.ts b/server/src/controllers/user/sentEmail.ts
index c7d60b593..1d76ba131 100644
--- a/server/src/controllers/user/sentEmail.ts
+++ b/server/src/controllers/user/sentEmail.ts
@@ -3,12 +3,6 @@ import { resetEmail } from '../../utils/accountEmail';
 import * as validator from '@packrat/validations';
 import { User } from '../../drizzle/methods/User';
 
-/**
- * Sends an email to the specified email address.
- * @param {Object} req - The request object.
- * @param {Object} res - The response object.
- * @return {Promise<void>} - A promise that resolves when the email is sent.
- */
 export const sentEmail = async (c) => {
   try {
     const { email } = await c.req.parseBody();
diff --git a/server/src/controllers/user/userSignIn.ts b/server/src/controllers/user/userSignIn.ts
index c72863ce1..e2ca1fc9f 100644
--- a/server/src/controllers/user/userSignIn.ts
+++ b/server/src/controllers/user/userSignIn.ts
@@ -2,12 +2,6 @@ import { publicProcedure } from '../../trpc';
 import * as validator from '@packrat/validations';
 import { User } from '../../drizzle/methods/User';
 
-// /**
-//  * Sign in a user.
-//  * @param {Object} req - The request object.
-//  * @param {Object} res - The response object.
-//  * @return {Object} The user object.
-//  */
 export const userSignIn = async (c) => {
   try {
     const { email, password } = await c.req.parseBody();

From c572a29cfeabe14a2b17cc7f243f03149fa7d976 Mon Sep 17 00:00:00 2001
From: Muhammad Hassan <mh7722178@gmail.com>
Date: Thu, 18 Jul 2024 19:14:57 +0500
Subject: [PATCH 239/257] userRoutes Testing Done

---
 server/src/controllers/auth/emailExists.ts    |  3 ++-
 server/src/controllers/auth/updatePassword.ts |  5 +++--
 .../src/controllers/passport/signInGoogle.ts  | 11 ++++++-----
 server/src/controllers/user/deleteUser.ts     |  2 +-
 server/src/controllers/user/editUser.ts       |  2 +-
 .../src/controllers/user/getGoogleAuthUrl.ts  |  5 +++--
 server/src/controllers/user/getMe.ts          |  6 ++++--
 server/src/controllers/user/getUserById.ts    | 19 ++++++++++++-------
 server/src/controllers/user/getUsers.ts       |  4 +---
 server/src/controllers/user/resetPassword.ts  |  2 +-
 server/src/controllers/user/sentEmail.ts      | 17 +++++++++--------
 server/src/controllers/user/userSignIn.ts     |  2 +-
 server/src/controllers/user/userSignUp.ts     |  2 +-
 server/src/index.ts                           |  4 ++--
 server/src/middleware/checkRole.ts            | 18 ++++++++++--------
 server/src/middleware/validators/zodParser.ts | 10 +++++-----
 server/src/routes/userRoutes.ts               |  2 +-
 .../src/services/user/emailExistsService.ts   |  3 +++
 server/src/utils/accountEmail.ts              | 10 +++++-----
 19 files changed, 71 insertions(+), 56 deletions(-)

diff --git a/server/src/controllers/auth/emailExists.ts b/server/src/controllers/auth/emailExists.ts
index b8bcfd03c..5c9ff56a4 100644
--- a/server/src/controllers/auth/emailExists.ts
+++ b/server/src/controllers/auth/emailExists.ts
@@ -4,13 +4,14 @@ import { emailExistsService } from '../../services/user/emailExistsService';
 
 export const emailExists = async (c) => {
   try {
-    const { email } = await c.req.parseBody();
+    const { email } = await c.req.json();
 
     const emailExists = await emailExistsService({
       sendGridApiKey: c.env.SEND_GRID_API_KEY,
       smtpEmail: c.env.STMP_EMAIL,
       email,
     });
+    console.log('emailExists', emailExists)
     return c.json({ emailExists }, 200);
   } catch (error) {
     return c.json({ error: `Failed to delete user: ${error.message}` }, 404);
diff --git a/server/src/controllers/auth/updatePassword.ts b/server/src/controllers/auth/updatePassword.ts
index fb6bedbc1..86649f37f 100644
--- a/server/src/controllers/auth/updatePassword.ts
+++ b/server/src/controllers/auth/updatePassword.ts
@@ -2,10 +2,11 @@ import { protectedProcedure } from '../../trpc';
 import { findUserAndUpdate } from '../../services/user/user.service';
 import * as validator from '@packrat/validations';
 import { hashPassword } from '../../utils/user';
+import { type Context } from 'hono';
 
-export const updatePassword = async (c) => {
+export const updatePassword = async (c: Context) => {
   try {
-    const { email, password } = await c.req.parseBody();
+    const { email, password } = await c.req.json();
     const JWT_SECRET = c.env.JWT_SECRET;
     const hashedPassword = await hashPassword(JWT_SECRET, password);
     const user = await findUserAndUpdate(email, hashedPassword, 'password');
diff --git a/server/src/controllers/passport/signInGoogle.ts b/server/src/controllers/passport/signInGoogle.ts
index 9400b3334..89ef917b2 100644
--- a/server/src/controllers/passport/signInGoogle.ts
+++ b/server/src/controllers/passport/signInGoogle.ts
@@ -7,16 +7,17 @@ import z from 'zod';
 import { User } from '../../drizzle/methods/User';
 import { and, eq } from 'drizzle-orm';
 import { user as UserTable } from '../../db/schema';
+import { type Context } from 'hono';
 
-export const signInGoogle = async (c) => {
+export const signInGoogle = async (c: Context) => {
   try {
-    const { idToken } = await c.req.parseBody();
+    const { idToken } = await c.req.json();
 
     const decodedToken: any = jwt.decode(idToken);
     if (!decodedToken) {
       throw new Error('Invalid ID token');
     }
-
+    console.log('decodedToken', decodedToken)
     const {
       payload: { email, name, sub: googleId },
     } = decodedToken;
@@ -87,8 +88,8 @@ export const signInGoogle = async (c) => {
       return c.json(updatedUser?.[0], 200);
     }
   } catch (err) {
-    c.json({ message: err.message });
-    throw new Error(`Google Signin failed: ${err.message}`);
+    return c.json({ message: err.message });
+    // throw new Error(`Google Signin failed: ${err.message}`);
   }
 };
 
diff --git a/server/src/controllers/user/deleteUser.ts b/server/src/controllers/user/deleteUser.ts
index 22e7770ab..56c376757 100644
--- a/server/src/controllers/user/deleteUser.ts
+++ b/server/src/controllers/user/deleteUser.ts
@@ -4,7 +4,7 @@ import { User } from '../../drizzle/methods/User';
 
 export const deleteUser = async (c) => {
   try {
-    const { userId } = await c.req.parseBody();
+    const { userId } = await c.req.json();
     const user = new User();
     await user.delete(userId);
     return c.json({ message: 'User deleted successfully' }, 200);
diff --git a/server/src/controllers/user/editUser.ts b/server/src/controllers/user/editUser.ts
index 3b7a10355..c03e4a145 100644
--- a/server/src/controllers/user/editUser.ts
+++ b/server/src/controllers/user/editUser.ts
@@ -16,7 +16,7 @@ export const editUser = async (c) => {
       preferredWeather,
       preferredWeight,
       password,
-    } = await c.req.parseBody();
+    } = await c.req.json();
 
     const JWT_SECRET = c.env.JWT_SECRET;
     const userClass = new User();
diff --git a/server/src/controllers/user/getGoogleAuthUrl.ts b/server/src/controllers/user/getGoogleAuthUrl.ts
index 561c09355..d513cb4ae 100644
--- a/server/src/controllers/user/getGoogleAuthUrl.ts
+++ b/server/src/controllers/user/getGoogleAuthUrl.ts
@@ -1,6 +1,7 @@
+import { type Context } from 'hono';
 import { publicProcedure } from '../../trpc';
 
-export const getGoogleAuthURL = async (c) => {
+export const getGoogleAuthURL = async (c: Context) => {
   try {
     const scopes = [
       'https://www.googleapis.com/auth/userinfo.profile',
@@ -14,7 +15,7 @@ export const getGoogleAuthURL = async (c) => {
 
     const googleUrl = `https://accounts.google.com/o/oauth2/v2/auth?client_id=${clientId}&redirect_uri=${redirectUri}&response_type=code&scope=${scope}&access_type=offline&prompt=consent&client_secret=${clientSecret}`;
 
-    return c.json({ googleUrl, status: 'success', statusCode: 200 }, 200);
+    return c.json({ googleUrl, status: 'success' }, 200);
   } catch (error) {
     return c.json(
       { error: `Failed to get Google Auth URL: ${error.message}` },
diff --git a/server/src/controllers/user/getMe.ts b/server/src/controllers/user/getMe.ts
index f870b54d6..77f49663d 100644
--- a/server/src/controllers/user/getMe.ts
+++ b/server/src/controllers/user/getMe.ts
@@ -1,9 +1,11 @@
+import type { Context } from 'hono';
 import { getUserByTokenService } from '../../services/user/getUserByToken';
 import { protectedProcedure } from '../../trpc';
 
-export const getMe = async (c) => {
+export const getMe = async (c: Context) => {
   try {
-    const { user } = c;
+    const { user } = await c.req.json();
+    console.log('user ', user)
     return c.json({ user }, 200);
   } catch (error) {
     return c.json({ error: `Failed to get user: ${error.message}` }, 500);
diff --git a/server/src/controllers/user/getUserById.ts b/server/src/controllers/user/getUserById.ts
index 014956b78..2557b2b2f 100644
--- a/server/src/controllers/user/getUserById.ts
+++ b/server/src/controllers/user/getUserById.ts
@@ -2,19 +2,24 @@ import { publicProcedure, protectedProcedure } from '../../trpc';
 import { getUserByIdService } from '../../services/user/getUserByIdService';
 import * as validator from '@packrat/validations';
 import { responseHandler } from '../../helpers/responseHandler';
+import { type Context } from 'hono';
 
-export const getUserById = async (c) => {
+export const getUserById = async (ctx: Context) => {
   try {
     // Correctly accessing route parameters in Hono
-    const userId = c.req.param('userId');
-
+    const { userId } = await ctx.req.param();
     const user = await getUserByIdService(userId);
 
-    if (!c.locals) c.locals = {};
-    c.locals.data = user;
-    return responseHandler(c);
+    // if (!c.locals) c.locals = {};
+    // c.locals.data = user;
+    // return responseHandler(c);
+
+    ctx.set('data', user);
+    return await responseHandler(ctx);
   } catch (error) {
-    return c.json({ error: `Failed to get user: ${error.message}` }, 500);
+    ctx.set('error', error.message);
+    return await responseHandler(ctx);
+    // return c.json({ error: `Failed to get user: ${error.message}` }, 500);
   }
 };
 
diff --git a/server/src/controllers/user/getUsers.ts b/server/src/controllers/user/getUsers.ts
index f4080e291..6721b0655 100644
--- a/server/src/controllers/user/getUsers.ts
+++ b/server/src/controllers/user/getUsers.ts
@@ -6,9 +6,7 @@ export const getUsers = async (c) => {
   try {
     const userClass = new User();
     const users = await userClass.findMany();
-    if (!c.locals) c.locals = {};
-    c.locals.data = users;
-    return responseHandler(c);
+    return c.json(users, 200);
   } catch (error) {
     return c.json({ error: `Failed to get users: ${error.message}` }, 500);
   }
diff --git a/server/src/controllers/user/resetPassword.ts b/server/src/controllers/user/resetPassword.ts
index 51d6121c5..caf372713 100644
--- a/server/src/controllers/user/resetPassword.ts
+++ b/server/src/controllers/user/resetPassword.ts
@@ -5,7 +5,7 @@ import { hashPassword } from '../../utils/user';
 
 export const resetPassword = async (c) => {
   try {
-    const { resetToken, password } = await c.req.parseBody();
+    const { resetToken, password } = await c.req.json();
     const JWT_SECRET = c.env.JWT_SECRET;
     const userClass = new User();
     const user = await userClass.validateResetToken(resetToken, JWT_SECRET);
diff --git a/server/src/controllers/user/sentEmail.ts b/server/src/controllers/user/sentEmail.ts
index 1d76ba131..5dc66884f 100644
--- a/server/src/controllers/user/sentEmail.ts
+++ b/server/src/controllers/user/sentEmail.ts
@@ -2,11 +2,13 @@ import { publicProcedure } from '../../trpc';
 import { resetEmail } from '../../utils/accountEmail';
 import * as validator from '@packrat/validations';
 import { User } from '../../drizzle/methods/User';
+import { responseHandler } from '../../helpers/responseHandler';
+import { type Context } from 'hono';
 
-export const sentEmail = async (c) => {
+export const sentEmail = async (c: Context) => {
   try {
-    const { email } = await c.req.parseBody();
-
+    const { email } = await c.req.json();
+    console.log('email ', c.env.SEND_GRID_API_KEY)
     const STMP_EMAIL = c.env.STMP_EMAIL;
     const SEND_GRID_API_KEY = c.env.SEND_GRID_API_KEY;
     const JWT_SECRET = c.env.JWT_SECRET;
@@ -24,12 +26,11 @@ export const sentEmail = async (c) => {
       user.id,
     );
     await resetEmail(user.email, resetUrl, STMP_EMAIL, SEND_GRID_API_KEY);
-    return c.json({ message: 'Reset Token has been sent successfully' }, 200);
+    c.set('data', { message: 'Reset Token has been sent successfully' });
+    return await responseHandler(c);
   } catch (error) {
-    return c.json(
-      { error: `Failed to send reset token: ${error.message}` },
-      500,
-    );
+    c.set('error', error.message);
+    return await responseHandler(c);
   }
 };
 
diff --git a/server/src/controllers/user/userSignIn.ts b/server/src/controllers/user/userSignIn.ts
index e2ca1fc9f..9386d8c05 100644
--- a/server/src/controllers/user/userSignIn.ts
+++ b/server/src/controllers/user/userSignIn.ts
@@ -4,7 +4,7 @@ import { User } from '../../drizzle/methods/User';
 
 export const userSignIn = async (c) => {
   try {
-    const { email, password } = await c.req.parseBody();
+    const { email, password } = await c.req.json();
     const userClass = new User();
     const user = await userClass.findByCredentials(email, password);
     await userClass.generateAuthToken(c.env.JWT_SECRET, user.id);
diff --git a/server/src/controllers/user/userSignUp.ts b/server/src/controllers/user/userSignUp.ts
index cfc6a6bee..5d0869d27 100644
--- a/server/src/controllers/user/userSignUp.ts
+++ b/server/src/controllers/user/userSignUp.ts
@@ -7,7 +7,7 @@ import { hashPassword } from '../../utils/user';
 
 export const userSignup = async (c) => {
   try {
-    let { email, password, name, username } = await c.req.parseBody();
+    let { email, password, name, username } = await c.req.json();
     const userClass = new User();
     const userExists = await userClass.findUser({ email });
     if (userExists) {
diff --git a/server/src/index.ts b/server/src/index.ts
index 31492c067..7282f27cb 100644
--- a/server/src/index.ts
+++ b/server/src/index.ts
@@ -30,10 +30,10 @@ const app = new Hono<{ Bindings: Bindings }>();
 //  ref: https://hono.dev/middleware/builtin/compress
 
 // SETUP HTTPS Enforcement Middleware
-app.use('*', enforceHttps()); // Apply to all routes
+// app.use('*', enforceHttps()); // Apply to all routes
 
 // SETUP SECURITY HEADERS
-app.use('*', securityHeaders()); // Apply to all routes
+// app.use('*', securityHeaders()); // Apply to all routes
 
 // SETUP CORS
 app.use('*', async (c, next) => {
diff --git a/server/src/middleware/checkRole.ts b/server/src/middleware/checkRole.ts
index 13b2a0cac..5b5f86d92 100644
--- a/server/src/middleware/checkRole.ts
+++ b/server/src/middleware/checkRole.ts
@@ -1,12 +1,12 @@
-import type { Context } from 'hono';
+import type { Context, Next } from 'hono';
 import { RoleSchema } from './validators/roleValidator';
 import { ZodError } from 'zod';
 
 // Extend the Context type to include the user property in the request and the next method.
-interface ExtendedContext extends Context {
-  req: Context['req'] & { user?: { role: string } };
-  next: () => Promise<void>;
-}
+// interface ExtendedContext extends Context {
+//   req: Context['req'] & { user?: { role: string } };
+//   next: () => Next;
+// }
 
 /**
  * Middleware to check if the user has a certain role.
@@ -14,8 +14,10 @@ interface ExtendedContext extends Context {
  * @returns {Function} - Hono middleware function.
  */
 const checkRole = (roles: string[]) => {
-  return async (c: ExtendedContext) => {
-    const user = c.req.user;
+  return async (c: Context, next: Next) => {
+    const { user } = await c.req.json();
+
+    console.log('user', user.role, roles);
 
     try {
       // Make sure all roles are valid.
@@ -28,7 +30,7 @@ const checkRole = (roles: string[]) => {
       }
 
       // Proceed to the next middleware or route handler.
-      await c.next();
+      await next();
     } catch (err) {
       if (err instanceof ZodError) {
         console.error('Invalid role provided:', err.errors);
diff --git a/server/src/middleware/validators/zodParser.ts b/server/src/middleware/validators/zodParser.ts
index ebb4565ae..50e057c22 100644
--- a/server/src/middleware/validators/zodParser.ts
+++ b/server/src/middleware/validators/zodParser.ts
@@ -1,5 +1,6 @@
 import type { Context, Hono, Next } from 'hono';
 import type { z, ZodSchema } from 'zod';
+import { responseHandler } from '../../helpers/responseHandler';
 
 // Define the Zod parser function as middleware
 export const zodParser = (
@@ -10,18 +11,17 @@ export const zodParser = (
     try {
       let input: any;
       if (location === 'body') {
-        input = await c.req.parseBody();
+        input = await c.req.json();
       } else if (location === 'query') {
         input = c.req.query();
       } else if (location === 'params') {
         input = c.req.param();
       }
-
       schema.parse(input);
-      await next();
+      return await next();
     } catch (error) {
-      c.status(400);
-      c.json({ error: error.errors });
+      c.set('error', error.message);
+      return await responseHandler(c);
     }
   };
 };
diff --git a/server/src/routes/userRoutes.ts b/server/src/routes/userRoutes.ts
index dd3843716..ae8e8a441 100644
--- a/server/src/routes/userRoutes.ts
+++ b/server/src/routes/userRoutes.ts
@@ -61,7 +61,7 @@ router.post(
 
 router.post(
   '/reset-password',
-  zodParser(validator.checkCode, 'body'),
+  zodParser(validator.resetPassword, 'body'),
   tryCatchWrapper(resetPassword),
 );
 
diff --git a/server/src/services/user/emailExistsService.ts b/server/src/services/user/emailExistsService.ts
index 398b2f615..51a3c3166 100644
--- a/server/src/services/user/emailExistsService.ts
+++ b/server/src/services/user/emailExistsService.ts
@@ -18,6 +18,7 @@ export async function emailExistsService({
       throw new Error(val);
     }
     const result1 = await sendEmailNotice({ sendGridApiKey, smtpEmail, email });
+    console.log('result1result1', result1)
     if (result1.status) {
       const { newcode } = result1;
       const result2 = await findUserAndUpdate(email, newcode, 'code');
@@ -26,7 +27,9 @@ export async function emailExistsService({
       }
     }
   } catch (error) {
+    console.log('error', error.message)
     throw new Error(error.message);
+   
   }
 }
 
diff --git a/server/src/utils/accountEmail.ts b/server/src/utils/accountEmail.ts
index 9a497c85e..fd2a67c8a 100644
--- a/server/src/utils/accountEmail.ts
+++ b/server/src/utils/accountEmail.ts
@@ -99,12 +99,12 @@ export const resetEmail = async (
       body: JSON.stringify(emailData),
     });
 
-    if (!response.ok) {
-      console.log('Email did not Send');
-      throw new Error(`HTTP error! status: ${response.status}`);
-    }
+    // if (!response.ok) {
+    //   console.log('Email did not Send');
+    //   throw new Error(`HTTP error! status: ${response.status}`);
+    // }
 
-    console.log('Email Sent');
+    console.log('Email Sent', response);
     // return await response.json();
   } catch (error) {
     console.error('Error resetting email:', error);

From 0e999e5fe8b99d86fe8f5b237bcd90db21a2eb1d Mon Sep 17 00:00:00 2001
From: Anmol Verma <anmolverma2810@gmail.com>
Date: Thu, 18 Jul 2024 20:26:51 +0530
Subject: [PATCH 240/257] Remove splash

---
 apps/expo/app.json | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/apps/expo/app.json b/apps/expo/app.json
index 5e0d81dfe..1cf034965 100644
--- a/apps/expo/app.json
+++ b/apps/expo/app.json
@@ -7,12 +7,6 @@
     "icon": "./assets/packrat-app-icon.png",
     "userInterfaceStyle": "automatic",
     "scheme": "packrat",
-    "splash": {
-      "image": "./assets/packrat.png",
-      "resizeMode": "contain",
-      "backgroundColor": "#0284c7",
-      "scheme": "myapp"
-    },
     "assetBundlePatterns": ["**/*"],
     "ios": {
       "supportsTablet": true,

From f42ab4bb579f900c5dd52a98bdc92af14aa1be0e Mon Sep 17 00:00:00 2001
From: Muhammad Hassan <mh7722178@gmail.com>
Date: Thu, 18 Jul 2024 19:57:24 +0500
Subject: [PATCH 241/257] Pack Routes Testing Done

---
 server/src/controllers/pack/addPack.ts             | 2 +-
 server/src/controllers/pack/deletePack.ts          | 2 +-
 server/src/controllers/pack/duplicatePublicPack.ts | 2 +-
 server/src/controllers/pack/editPack.ts            | 2 +-
 server/src/controllers/pack/getPackById.ts         | 2 +-
 server/src/controllers/pack/getPacks.ts            | 4 ++--
 server/src/controllers/pack/getPublicPacks.ts      | 5 +++--
 server/src/controllers/pack/scorePack.ts           | 2 +-
 server/src/middleware/auth.ts                      | 7 ++++---
 server/src/routes/packRoutes.ts                    | 2 +-
 server/src/services/pack/getPublicPacksService.ts  | 1 +
 11 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/server/src/controllers/pack/addPack.ts b/server/src/controllers/pack/addPack.ts
index 0692962b2..a3bba63ee 100644
--- a/server/src/controllers/pack/addPack.ts
+++ b/server/src/controllers/pack/addPack.ts
@@ -4,7 +4,7 @@ import { protectedProcedure } from '../../trpc';
 
 export const addPack = async (c) => {
   try {
-    const { name, owner_id, is_public } = await c.req.parseBody();
+    const { name, owner_id, is_public } = await c.req.json();
     const pack = await addPackService(name, owner_id, is_public);
     return c.json({ pack }, 200);
   } catch (error) {
diff --git a/server/src/controllers/pack/deletePack.ts b/server/src/controllers/pack/deletePack.ts
index 3173eb7cf..56168583d 100644
--- a/server/src/controllers/pack/deletePack.ts
+++ b/server/src/controllers/pack/deletePack.ts
@@ -4,7 +4,7 @@ import { protectedProcedure } from '../../trpc';
 
 export const deletePack = async (c) => {
   try {
-    const { packId } = await c.req.parseBody();
+    const { packId } = await c.req.json();
     await deletePackService(packId);
     return c.json({ msg: 'pack was deleted successfully' }, 200);
   } catch (error) {
diff --git a/server/src/controllers/pack/duplicatePublicPack.ts b/server/src/controllers/pack/duplicatePublicPack.ts
index cc5f89b3b..3d73b3ce7 100644
--- a/server/src/controllers/pack/duplicatePublicPack.ts
+++ b/server/src/controllers/pack/duplicatePublicPack.ts
@@ -4,7 +4,7 @@ import { protectedProcedure } from '../../trpc';
 
 export const duplicatePublicPack = async (c) => {
   try {
-    const { packId, ownerId, items } = await c.req.parseBody();
+    const { packId, ownerId, items } = await c.req.json();
     const result = await duplicatePublicPackService(packId, ownerId, items);
     return c.json({ result }, 200);
   } catch (error) {
diff --git a/server/src/controllers/pack/editPack.ts b/server/src/controllers/pack/editPack.ts
index 048eee4e3..e8c011404 100644
--- a/server/src/controllers/pack/editPack.ts
+++ b/server/src/controllers/pack/editPack.ts
@@ -4,7 +4,7 @@ import * as validator from '@packrat/validations';
 
 export const editPack = async (c) => {
   try {
-    const packData = await c.req.parseBody();
+    const packData = await c.req.json();
     const pack = await editPackService(packData);
     return c.json({ pack }, 200);
   } catch (error) {
diff --git a/server/src/controllers/pack/getPackById.ts b/server/src/controllers/pack/getPackById.ts
index 5b6027eb2..d17fc1ac2 100644
--- a/server/src/controllers/pack/getPackById.ts
+++ b/server/src/controllers/pack/getPackById.ts
@@ -4,7 +4,7 @@ import * as validator from '@packrat/validations';
 
 export const getPackById = async (c) => {
   try {
-    const { packId } = await c.req.parseParams();
+    const { packId } = await c.req.param();
     const pack = await getPackByIdService(packId);
     return c.json({ pack }, 200);
   } catch (error) {
diff --git a/server/src/controllers/pack/getPacks.ts b/server/src/controllers/pack/getPacks.ts
index eccbd78b3..791fcf4ca 100644
--- a/server/src/controllers/pack/getPacks.ts
+++ b/server/src/controllers/pack/getPacks.ts
@@ -4,8 +4,8 @@ import * as validator from '@packrat/validations';
 
 export const getPacks = async (c) => {
   try {
-    const { ownerId, queryBy } = await c.req.parseQuery();
-    const packs = await getPacksService(ownerId, queryBy);
+    const { ownerId, queryBy } = await c.req.param();
+    const packs = await getPacksService(ownerId, queryBy || null);
     return c.json({ packs, message: 'Packs retrieved successfully' }, 200);
   } catch (error) {
     return c.json({ error: `Failed to get packs: ${error.message}` }, 500);
diff --git a/server/src/controllers/pack/getPublicPacks.ts b/server/src/controllers/pack/getPublicPacks.ts
index 31fb469e5..e01e8b12b 100644
--- a/server/src/controllers/pack/getPublicPacks.ts
+++ b/server/src/controllers/pack/getPublicPacks.ts
@@ -1,10 +1,11 @@
 import { publicProcedure, protectedProcedure } from '../../trpc';
 import { getPublicPacksService } from '../../services/pack/pack.service';
 import { z } from 'zod';
+import { type Context } from 'hono';
 
-export const getPublicPacks = async (c) => {
+export const getPublicPacks = async (c: Context) => {
   try {
-    const { queryBy } = await c.req.parseQuery();
+    const { queryBy } = await c.req.query();
     const packs = await getPublicPacksService(queryBy);
     return c.json(
       { packs, message: 'Public packs retrieved successfully' },
diff --git a/server/src/controllers/pack/scorePack.ts b/server/src/controllers/pack/scorePack.ts
index 9bca56db6..3617813b4 100644
--- a/server/src/controllers/pack/scorePack.ts
+++ b/server/src/controllers/pack/scorePack.ts
@@ -4,7 +4,7 @@ import * as validator from '@packrat/validations';
 
 export const scorePack = async (c) => {
   try {
-    const { packId } = await c.req.parseParams();
+    const { packId } = await c.req.param();
     const pack = await scorePackService(packId);
     return c.json({ pack }, 200);
   } catch (error) {
diff --git a/server/src/middleware/auth.ts b/server/src/middleware/auth.ts
index bd34f8eb5..68d91cc5b 100644
--- a/server/src/middleware/auth.ts
+++ b/server/src/middleware/auth.ts
@@ -63,7 +63,8 @@ const authMiddlewareHTTP = async (c: Context, next: Next) => {
 
     await next();
   } catch (err) {
-    handleErrorHTTP(err, c);
+    return await handleErrorHTTP(err, c);
+    // return c.json('error', err.message)
   }
 };
 
@@ -75,10 +76,10 @@ const authMiddlewareHTTP = async (c: Context, next: Next) => {
 const handleErrorHTTP = (err: Error, c: Context) => {
   if (err instanceof ZodError) {
     console.error('Invalid token structure:', err.message);
-    c.json({ error: 'Invalid token structure.' }, 400);
+    return c.json({ error: 'Invalid token structure.' }, 400);
   } else {
     console.error(err.message);
-    c.json({ error: 'Not authorized to access this resource.' }, 401);
+    return c.json({ error: 'Not authorized to access this resource.' }, 401);
   }
 };
 
diff --git a/server/src/routes/packRoutes.ts b/server/src/routes/packRoutes.ts
index ff27e0926..fe33c4b29 100644
--- a/server/src/routes/packRoutes.ts
+++ b/server/src/routes/packRoutes.ts
@@ -28,7 +28,7 @@ router.get(
   '/:ownerId',
   authTokenMiddleware,
   checkRole(['user', 'admin']),
-  zodParser(validator.getPacks, 'query'),
+  zodParser(validator.getPacks, 'params'),
   tryCatchWrapper(getPacks),
 );
 
diff --git a/server/src/services/pack/getPublicPacksService.ts b/server/src/services/pack/getPublicPacksService.ts
index 0bfeba40a..b6a20ca76 100644
--- a/server/src/services/pack/getPublicPacksService.ts
+++ b/server/src/services/pack/getPublicPacksService.ts
@@ -17,6 +17,7 @@ export async function getPublicPacksService(queryBy: string = 'createdAt') {
       is_public: true,
     });
 
+
     // Apply sorting if necessary
     packs = await sortFunction({
       packs,

From b9d7c9103db0b60f97e1279f8e6186afb75b32d9 Mon Sep 17 00:00:00 2001
From: Muhammad Hassan <mh7722178@gmail.com>
Date: Thu, 18 Jul 2024 20:52:53 +0500
Subject: [PATCH 242/257] Item Routes Testing

---
 server/src/controllers/item/addGlobalItemToPack.ts   |  7 ++++---
 server/src/controllers/item/addItem.ts               |  4 ++--
 server/src/controllers/item/addItemGlobal.ts         |  5 +++--
 server/src/controllers/item/deleteGlobalItem.ts      |  2 +-
 .../controllers/item/editGlobalItemAsDuplicate.ts    |  2 +-
 server/src/controllers/item/editItem.ts              |  2 +-
 server/src/controllers/item/getItemById.ts           |  7 ++++---
 server/src/controllers/item/getItems.ts              |  6 +++---
 server/src/controllers/item/getItemsGlobally.ts      |  2 +-
 server/src/controllers/item/searchItemsByName.ts     |  6 ++++--
 server/src/middleware/checkRole.ts                   | 12 ++++++++----
 server/src/routes/itemRoutes.ts                      |  4 ++--
 server/src/services/item/addItemService.ts           |  8 ++++++--
 13 files changed, 40 insertions(+), 27 deletions(-)

diff --git a/server/src/controllers/item/addGlobalItemToPack.ts b/server/src/controllers/item/addGlobalItemToPack.ts
index 3deebbdb7..989210782 100644
--- a/server/src/controllers/item/addGlobalItemToPack.ts
+++ b/server/src/controllers/item/addGlobalItemToPack.ts
@@ -1,15 +1,16 @@
 import { protectedProcedure } from '../../trpc';
 import { addGlobalItemToPackService } from '../../services/item/item.service';
 import { z } from 'zod';
+import { type Context } from 'hono';
 
-export const addGlobalItemToPack = async (c) => {
+export const addGlobalItemToPack = async (c: Context) => {
   try {
-    const { packId, itemId, ownerId } = await c.req.parseBody();
+    const { packId, itemId, ownerId } = await c.req.json();
     const item = await addGlobalItemToPackService(packId, itemId, ownerId);
     return c.json({ item }, 200);
   } catch (error) {
     return c.json(
-      { error: `Failed to add item to pack: ${error.message}` },
+      { error: `${error.message}` },
       500,
     );
   }
diff --git a/server/src/controllers/item/addItem.ts b/server/src/controllers/item/addItem.ts
index b6f6a44ca..23d07a72c 100644
--- a/server/src/controllers/item/addItem.ts
+++ b/server/src/controllers/item/addItem.ts
@@ -5,7 +5,7 @@ import * as validator from '@packrat/validations';
 export const addItem = async (c) => {
   try {
     const { name, weight, quantity, unit, packId, type, ownerId } =
-      await c.req.parseBody();
+      await c.req.json();
 
     const result = await addItemService(
       name,
@@ -18,7 +18,7 @@ export const addItem = async (c) => {
     );
     return c.json({ result }, 200);
   } catch (error) {
-    return c.json({ error: `Failed to add item: ${error.message}` }, 500);
+    return c.json({ error: `${error.message}` }, 500);
   }
 };
 
diff --git a/server/src/controllers/item/addItemGlobal.ts b/server/src/controllers/item/addItemGlobal.ts
index cd42eca52..4fbe4d594 100644
--- a/server/src/controllers/item/addItemGlobal.ts
+++ b/server/src/controllers/item/addItemGlobal.ts
@@ -1,11 +1,12 @@
+import { type Context } from 'hono';
 import { addItemGlobalService } from '../../services/item/item.service';
 import { protectedProcedure } from '../../trpc';
 import * as validator from '@packrat/validations';
 
-export const addItemGlobal = async (c) => {
+export const addItemGlobal = async (c: Context) => {
   try {
     const { name, weight, quantity, unit, type, ownerId } =
-      await c.req.parseBody();
+      await c.req.json();
 
     const item = await addItemGlobalService(
       name,
diff --git a/server/src/controllers/item/deleteGlobalItem.ts b/server/src/controllers/item/deleteGlobalItem.ts
index 6ca5db51a..0b11dc705 100644
--- a/server/src/controllers/item/deleteGlobalItem.ts
+++ b/server/src/controllers/item/deleteGlobalItem.ts
@@ -4,7 +4,7 @@ import { z } from 'zod';
 
 export const deleteGlobalItem = async (c) => {
   try {
-    const { itemId } = await c.req.parseBody();
+    const { itemId } = await c.req.json();
     const itemDeleted = await deleteGlobalItemService(itemId);
     return c.json({ itemDeleted }, 200);
   } catch (error) {
diff --git a/server/src/controllers/item/editGlobalItemAsDuplicate.ts b/server/src/controllers/item/editGlobalItemAsDuplicate.ts
index 4ca99d5e8..c448b4431 100644
--- a/server/src/controllers/item/editGlobalItemAsDuplicate.ts
+++ b/server/src/controllers/item/editGlobalItemAsDuplicate.ts
@@ -4,7 +4,7 @@ import { protectedProcedure } from '../../trpc';
 
 export const editGlobalItemAsDuplicate = async (c) => {
   try {
-    const { itemId } = await c.req.parseParams();
+    const { itemId } = await c.req.param();
     const { packId, name, weight, quantity, unit, type } =
       await c.req.parseBody();
 
diff --git a/server/src/controllers/item/editItem.ts b/server/src/controllers/item/editItem.ts
index ff0db0f08..7342079fb 100644
--- a/server/src/controllers/item/editItem.ts
+++ b/server/src/controllers/item/editItem.ts
@@ -4,7 +4,7 @@ import * as validator from '@packrat/validations';
 
 export const editItem = async (c) => {
   try {
-    const { id, name, weight, unit, quantity, type } = await c.req.parseBody();
+    const { id, name, weight, unit, quantity, type } = await c.req.json();
 
     const item = await editItemService(id, name, weight, unit, quantity, type);
     return c.json({ item }, 200);
diff --git a/server/src/controllers/item/getItemById.ts b/server/src/controllers/item/getItemById.ts
index 0614e603e..96bef32de 100644
--- a/server/src/controllers/item/getItemById.ts
+++ b/server/src/controllers/item/getItemById.ts
@@ -1,14 +1,15 @@
 import { protectedProcedure } from '../../trpc';
 import { getItemByIdService } from '../../services/item/item.service';
 import * as validator from '@packrat/validations';
+import { type Context } from 'hono';
 
-export const getItemById = async (c) => {
+export const getItemById = async (c: Context) => {
   try {
-    const { id } = await c.req.parseBody();
+    const { id } = await c.req.param();
     const item = await getItemByIdService(id);
     return c.json({ item }, 200);
   } catch (error) {
-    return c.json({ error: `Failed to get item: ${error.message}` }, 500);
+    return c.json({ error: `${error.message}` }, 500);
   }
 };
 
diff --git a/server/src/controllers/item/getItems.ts b/server/src/controllers/item/getItems.ts
index 7cd881696..97cf45bb8 100644
--- a/server/src/controllers/item/getItems.ts
+++ b/server/src/controllers/item/getItems.ts
@@ -4,11 +4,11 @@ import * as validator from '@packrat/validations';
 
 export const getItems = async (c) => {
   try {
-    const packId = c.req.param('packId');
-    const items = await getItemsService(packId);
+    const { packId } = c.req.param();
+    const items = await getItemsService(packId || null);
     return c.json({ items }, 200);
   } catch (error) {
-    return c.json({ error: `Failed to get items: ${error.message}` }, 500);
+    return c.json({ error: `${error.message}` }, 500);
   }
 };
 
diff --git a/server/src/controllers/item/getItemsGlobally.ts b/server/src/controllers/item/getItemsGlobally.ts
index 537b2c181..bce638ddf 100644
--- a/server/src/controllers/item/getItemsGlobally.ts
+++ b/server/src/controllers/item/getItemsGlobally.ts
@@ -4,7 +4,7 @@ import { z } from 'zod';
 
 export const getItemsGlobally = async (c) => {
   try {
-    const { limit, page, searchString } = await c.req.parseBody();
+    const { limit, page, searchString } = await c.req.json();
     const result = await getItemsGloballyService(limit, page, searchString);
     return c.json({ ...result, items: result.items }, 200);
   } catch (error) {
diff --git a/server/src/controllers/item/searchItemsByName.ts b/server/src/controllers/item/searchItemsByName.ts
index ebf7ef363..b83998514 100644
--- a/server/src/controllers/item/searchItemsByName.ts
+++ b/server/src/controllers/item/searchItemsByName.ts
@@ -1,10 +1,12 @@
 import { protectedProcedure } from '../../trpc';
 import { searchItemsByNameService } from '../../services/item/item.service';
 import { z } from 'zod';
+import { type Context } from 'hono';
 
-export const searchItemsByName = async (c) => {
+export const searchItemsByName = async (c: Context) => {
   try {
-    const { name } = c.req.query();
+    const { name } = await c.req.query();
+    
     const items = await searchItemsByNameService(name);
     return c.json({ items }, 200);
   } catch (error) {
diff --git a/server/src/middleware/checkRole.ts b/server/src/middleware/checkRole.ts
index 5b5f86d92..079335140 100644
--- a/server/src/middleware/checkRole.ts
+++ b/server/src/middleware/checkRole.ts
@@ -15,11 +15,14 @@ import { ZodError } from 'zod';
  */
 const checkRole = (roles: string[]) => {
   return async (c: Context, next: Next) => {
-    const { user } = await c.req.json();
+    try {
+      const { user } = await c.req.json();
 
-    console.log('user', user.role, roles);
+      console.log('user', user.role, roles);
+      if (!user) {
+        throw new Error('User Data Not Provided');
+      }
 
-    try {
       // Make sure all roles are valid.
       roles.forEach((role) => RoleSchema.parse(role));
 
@@ -32,12 +35,13 @@ const checkRole = (roles: string[]) => {
       // Proceed to the next middleware or route handler.
       await next();
     } catch (err) {
+      console.log('error', err)
       if (err instanceof ZodError) {
         console.error('Invalid role provided:', err.errors);
         return c.json({ error: 'Invalid role provided.' }, 400);
       } else {
         console.error(err.message);
-        return c.json({ error: 'Internal server error' }, 500);
+        return c.json({ error: `Internal server error ${err.message}` }, 500);
       }
     }
   };
diff --git a/server/src/routes/itemRoutes.ts b/server/src/routes/itemRoutes.ts
index acf68cd67..1cddf04c3 100644
--- a/server/src/routes/itemRoutes.ts
+++ b/server/src/routes/itemRoutes.ts
@@ -21,7 +21,7 @@ import { zodParser } from '../middleware/validators/zodParser';
 const router = new Hono();
 
 router.get(
-  '/packItems/:packId',
+  '/packItems/:packId?',
   authTokenMiddleware,
   zodParser(validator.getItems, 'params'),
   tryCatchWrapper(getItems),
@@ -78,7 +78,7 @@ router.get(
 );
 
 router.post(
-  '/global/select/:packId',
+  '/global/select/',
   authTokenMiddleware,
   checkRole(['user', 'admin']),
   zodParser(validator.addGlobalItemToPack, 'body'),
diff --git a/server/src/services/item/addItemService.ts b/server/src/services/item/addItemService.ts
index e297de7e5..b0b799b77 100644
--- a/server/src/services/item/addItemService.ts
+++ b/server/src/services/item/addItemService.ts
@@ -26,18 +26,22 @@ export const addItemService = async (
   type: 'Food' | 'Water' | 'Essentials',
   ownerId: string,
 ) => {
+ 
   let category: InsertItemCategory | null;
   if (!categories.includes(type)) {
     throw new Error(`Category must be one of: ${categories.join(', ')}`);
   }
+  
   const itemCategoryClass = new ItemCategory();
   const itemClass = new Item();
   const itemPacksClass = new ItemPacks();
   const itemOwnersClass = new ItemOwners();
+  
   category = (await itemCategoryClass.findItemCategory({ name: type })) || null;
   if (!category) {
     category = await itemCategoryClass.create({ name: type });
   }
+  
   const item = await itemClass.create({
     name,
     weight,
@@ -49,8 +53,8 @@ export const addItemService = async (
   });
 
   // await Pack.updateOne({ _id: packId }, { $addToSet: { items: newItem._id } });
-  await itemPacksClass.create({ itemId: item.id, packId });
-  await itemOwnersClass.create({ itemId: item.id, ownerId });
+  // await itemPacksClass.create({ itemId: item.id, packId });
+  // await itemOwnersClass.create({ itemId: item.id, ownerId });
   // const pack = await packClass.update(
   //   {
   //     itemDocuments: newItem.id,

From 97fedb3077e5b364649a8e2513416b86dd3df0dd Mon Sep 17 00:00:00 2001
From: Muhammad Hassan <mh7722178@gmail.com>
Date: Thu, 18 Jul 2024 21:00:42 +0500
Subject: [PATCH 243/257] Trip Routes Done

---
 server/src/controllers/trip/addTrip.ts        |  7 ++++---
 server/src/controllers/trip/deleteTrip.ts     |  4 ++--
 server/src/controllers/trip/editTrip.ts       |  4 ++--
 server/src/controllers/trip/getPublicTrips.ts | 10 ++++------
 server/src/controllers/trip/getTrip.ts        |  2 +-
 server/src/controllers/trip/getTripById.ts    |  7 ++++---
 server/src/routes/tripRoutes.ts               |  2 +-
 7 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/server/src/controllers/trip/addTrip.ts b/server/src/controllers/trip/addTrip.ts
index 74c7365b5..7b94e4413 100644
--- a/server/src/controllers/trip/addTrip.ts
+++ b/server/src/controllers/trip/addTrip.ts
@@ -4,10 +4,11 @@ import * as validator from '@packrat/validations';
 
 export const addTrip = async (c) => {
   try {
-    const tripData = await c.req.parseBody();
-    return await addTripService(tripData);
+    const tripData = await c.req.json();
+    const trip = await addTripService(tripData);
+    return c.json(trip, 200);
   } catch (error) {
-    return c.json({ error: `Failed to add trip: ${error.message}` }, 500);
+    return c.json({ error: `${error.message}` }, 500);
   }
 };
 
diff --git a/server/src/controllers/trip/deleteTrip.ts b/server/src/controllers/trip/deleteTrip.ts
index b7609f5d0..85127236b 100644
--- a/server/src/controllers/trip/deleteTrip.ts
+++ b/server/src/controllers/trip/deleteTrip.ts
@@ -4,12 +4,12 @@ import { Trip } from '../../drizzle/methods/trip';
 
 export const deleteTrip = async (c) => {
   try {
-    const { tripId } = await c.req.parseBody();
+    const { tripId } = await c.req.json();
     const tripClass = new Trip();
     await tripClass.delete(tripId);
     return c.json({ message: 'trip was deleted successfully' }, 200);
   } catch (error) {
-    return c.json({ error: `Failed to delete trip: ${error.message}` }, 500);
+    return c.json({ error: `${error.message}` }, 500);
   }
 };
 
diff --git a/server/src/controllers/trip/editTrip.ts b/server/src/controllers/trip/editTrip.ts
index a10093e1e..a509c8391 100644
--- a/server/src/controllers/trip/editTrip.ts
+++ b/server/src/controllers/trip/editTrip.ts
@@ -4,12 +4,12 @@ import { Trip } from '../../drizzle/methods/trip';
 
 export const editTrip = async (c) => {
   try {
-    const tripData = await c.req.parseBody();
+    const tripData = await c.req.json();
     const tripClass = new Trip();
     const trip = await tripClass.update(tripData);
     return c.json({ trip }, 200);
   } catch (error) {
-    return c.json({ error: `Failed to edit trip: ${error.message}` }, 500);
+    return c.json({ error: `${error.message}` }, 500);
   }
 };
 
diff --git a/server/src/controllers/trip/getPublicTrips.ts b/server/src/controllers/trip/getPublicTrips.ts
index 99444ec35..16e28d960 100644
--- a/server/src/controllers/trip/getPublicTrips.ts
+++ b/server/src/controllers/trip/getPublicTrips.ts
@@ -1,17 +1,15 @@
 import { protectedProcedure } from '../../trpc';
 import { getPublicTripsService } from '../../services/trip/getPublicTripService';
 import { z } from 'zod';
+import { type Context } from 'hono';
 
-export const getPublicTrips = async (c) => {
+export const getPublicTrips = async (c: Context) => {
   try {
-    const { queryBy } = await c.req.parseBody();
+    const { queryBy } = await c.req.json();
     const trips = await getPublicTripsService(queryBy);
     return c.json({ trips }, 200);
   } catch (error) {
-    return c.json(
-      { error: `Failed to get public trips: ${error.message}` },
-      500,
-    );
+    return c.json({ error: `${error.message}` }, 500);
   }
 };
 
diff --git a/server/src/controllers/trip/getTrip.ts b/server/src/controllers/trip/getTrip.ts
index 7fc59c34f..5c1bbc7dc 100644
--- a/server/src/controllers/trip/getTrip.ts
+++ b/server/src/controllers/trip/getTrip.ts
@@ -8,7 +8,7 @@ export const getTrips = async (c) => {
     const trips = await getTripsService(owner_id);
     return c.json({ trips }, 200);
   } catch (error) {
-    return c.json({ error: `Failed to get trips: ${error.message}` }, 500);
+    return c.json({ error: `${error.message}` }, 500);
   }
 };
 
diff --git a/server/src/controllers/trip/getTripById.ts b/server/src/controllers/trip/getTripById.ts
index ef79b8922..f26a4f357 100644
--- a/server/src/controllers/trip/getTripById.ts
+++ b/server/src/controllers/trip/getTripById.ts
@@ -4,10 +4,11 @@ import * as validator from '@packrat/validations';
 
 export const getTripById = async (c) => {
   try {
-    const { tripId } = await c.req.parseParams();
-    return await getTripByIdService(tripId);
+    const { tripId } = await c.req.param();
+    const trip = await getTripByIdService(tripId);
+    return c.json(trip, 200);
   } catch (error) {
-    return c.json({ error: `Failed to get trip: ${error.message}` }, 500);
+    return c.json({ error: `${error.message}` }, 500);
   }
 };
 
diff --git a/server/src/routes/tripRoutes.ts b/server/src/routes/tripRoutes.ts
index f5daf9fe0..fcde455b4 100644
--- a/server/src/routes/tripRoutes.ts
+++ b/server/src/routes/tripRoutes.ts
@@ -23,7 +23,7 @@ router.get(
 );
 
 router.get(
-  '/:ownerId',
+  '/:ownerId?',
   authTokenMiddleware,
   zodParser(validator.getTrips, 'params'),
   tryCatchWrapper(getTrips),

From be5c746e1c64b127d7d104e45a92f42e196db722 Mon Sep 17 00:00:00 2001
From: Muhammad Hassan <mh7722178@gmail.com>
Date: Thu, 18 Jul 2024 21:05:42 +0500
Subject: [PATCH 244/257] Weather Routes Testing

---
 server/src/controllers/weather/getWeather.ts | 7 ++++---
 server/src/routes/weatherRoutes.ts           | 2 +-
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/server/src/controllers/weather/getWeather.ts b/server/src/controllers/weather/getWeather.ts
index 9e6c7ff1b..897045560 100644
--- a/server/src/controllers/weather/getWeather.ts
+++ b/server/src/controllers/weather/getWeather.ts
@@ -1,10 +1,11 @@
+import { type Context } from 'hono';
 import { getWeatherService } from '../../services/weather/getWeatherService';
 import { publicProcedure } from '../../trpc';
 import { z } from 'zod';
 
-export const getWeather = async (c) => {
+export const getWeather = async (c: Context) => {
   try {
-    const { lat, lon } = await c.req.parseBody();
+    const { lat, lon } = await c.req.json();
     return await getWeatherService(
       c.env.WEATHER_URL,
       c.env.OPENWEATHER_KEY,
@@ -12,7 +13,7 @@ export const getWeather = async (c) => {
       lon,
     );
   } catch (error) {
-    return c.json({ error: `Failed to get weather: ${error.message}` }, 500);
+    return c.json({ error: `${error.message}` }, 500);
   }
 };
 
diff --git a/server/src/routes/weatherRoutes.ts b/server/src/routes/weatherRoutes.ts
index 5fdc02eb3..ca3340536 100644
--- a/server/src/routes/weatherRoutes.ts
+++ b/server/src/routes/weatherRoutes.ts
@@ -1,5 +1,5 @@
 import { Hono } from 'hono';
-import { getWeatherRoute as getWeather } from '../controllers/weather/index';
+import { getWeather } from '../controllers/weather/index';
 import authTokenMiddleware from '../middleware/auth';
 import { tryCatchWrapper } from '../helpers/tryCatchWrapper';
 

From d083682f3b6c962a0cbbb81ef15b17ffbaf8c661 Mon Sep 17 00:00:00 2001
From: Muhammad Hassan <mh7722178@gmail.com>
Date: Thu, 18 Jul 2024 21:08:27 +0500
Subject: [PATCH 245/257] GeoCode Testing Done

---
 server/src/controllers/geoCode/getGeoCode.ts | 2 +-
 server/src/routes/geoCodeRoutes.ts           | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/server/src/controllers/geoCode/getGeoCode.ts b/server/src/controllers/geoCode/getGeoCode.ts
index 637420ea4..ca51c232b 100644
--- a/server/src/controllers/geoCode/getGeoCode.ts
+++ b/server/src/controllers/geoCode/getGeoCode.ts
@@ -4,7 +4,7 @@ import { geoCodeService } from '../../services/geocode/geoCodeService';
 
 export const getGeoCode = async (c) => {
   try {
-    const { addressArray } = await c.req.parseBody();
+    const { addressArray } = await c.req.json();
     const result: any = await geoCodeService({
       addressArray,
       geoCodeUri: c.env.GEO_CODE_URL,
diff --git a/server/src/routes/geoCodeRoutes.ts b/server/src/routes/geoCodeRoutes.ts
index 7bb5d097b..8c535316a 100644
--- a/server/src/routes/geoCodeRoutes.ts
+++ b/server/src/routes/geoCodeRoutes.ts
@@ -1,5 +1,5 @@
 import { Hono } from 'hono';
-import { getGeoCodeRoute as getGeoCode } from '../controllers/geoCode/index';
+import { getGeoCode } from '../controllers/geoCode/index';
 import { tryCatchWrapper } from '../helpers/tryCatchWrapper';
 import authTokenMiddleware from '../middleware/auth';
 import checkRole from '../middleware/checkRole';

From 757632f1913b906631cfba01c85ba1e881b1426c Mon Sep 17 00:00:00 2001
From: Muhammad Hassan <mh7722178@gmail.com>
Date: Thu, 18 Jul 2024 21:14:57 +0500
Subject: [PATCH 246/257] getParks Routes Testing Done

---
 server/src/controllers/getParks/getParks.ts | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/server/src/controllers/getParks/getParks.ts b/server/src/controllers/getParks/getParks.ts
index 743cd6b32..38b730e3e 100644
--- a/server/src/controllers/getParks/getParks.ts
+++ b/server/src/controllers/getParks/getParks.ts
@@ -26,15 +26,9 @@ export async function getParks(ctx: Context) {
       npsApi: env.NPS_API,
       parksHost: env.PARKS_HOST,
     });
-    if (!response) {
-      ctx.set('data', { data: 'No Parks Found' });
-      return await responseHandler(ctx);
-    }
-    ctx.set('data', { data: response });
-    return await responseHandler(ctx);
+    return ctx.json(response, 200);
   } catch (error) {
-    ctx.set('error', error.message);
-    return await responseHandler(ctx);
+    return ctx.json({ error: error.message }, 400);
   }
 }
 

From 105e41f378de81308cd6fb711cfbd491784c50b3 Mon Sep 17 00:00:00 2001
From: Muhammad Hassan <mh7722178@gmail.com>
Date: Thu, 18 Jul 2024 21:16:41 +0500
Subject: [PATCH 247/257] gettrails Testing Done

---
 server/src/controllers/getTrail/getTrails.ts | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/server/src/controllers/getTrail/getTrails.ts b/server/src/controllers/getTrail/getTrails.ts
index ee81bca86..4e3e009eb 100644
--- a/server/src/controllers/getTrail/getTrails.ts
+++ b/server/src/controllers/getTrail/getTrails.ts
@@ -27,15 +27,9 @@ export async function getTrails(ctx: Context) {
       radiusParams,
       activityParams,
     });
-    if (!response) {
-      ctx.set('data', 'No Trails Found');
-      return await responseHandler(ctx);
-    }
-    ctx.set('data', response);
-    return await responseHandler(ctx);
+    return ctx.json(response, 200);
   } catch (error) {
-    ctx.set('error', error.message);
-    return await responseHandler(ctx);
+    return ctx.json({ error: error.message }, 400);
   }
 }
 

From 112443c0bd4802e04417896cfd180e3fba00f3ec Mon Sep 17 00:00:00 2001
From: Muhammad Hassan <mh7722178@gmail.com>
Date: Thu, 18 Jul 2024 21:25:17 +0500
Subject: [PATCH 248/257] templateRoutes, FavouritesRoutes, mapPreview Testing
 Done

---
 server/src/controllers/favorite/addToFavorite.ts    | 10 ++++------
 .../controllers/favorite/getFavoritePacksByUser.ts  | 10 ++++------
 server/src/controllers/favorite/getUserFavorites.ts | 10 ++++------
 server/src/controllers/mapPreview/index.ts          | 12 +++++-------
 server/src/controllers/template/addTemplate.ts      |  4 ++--
 server/src/controllers/template/deleteTemplate.ts   |  7 ++-----
 server/src/controllers/template/editTemplate.ts     |  4 ++--
 server/src/controllers/template/getTemplateById.ts  |  4 ++--
 server/src/controllers/template/getTemplates.ts     | 13 +++++++++----
 server/src/routes/favoriteRoutes.ts                 |  6 +++---
 10 files changed, 37 insertions(+), 43 deletions(-)

diff --git a/server/src/controllers/favorite/addToFavorite.ts b/server/src/controllers/favorite/addToFavorite.ts
index 85d8abee8..a4ec98102 100644
--- a/server/src/controllers/favorite/addToFavorite.ts
+++ b/server/src/controllers/favorite/addToFavorite.ts
@@ -1,17 +1,15 @@
+import { type Context } from 'hono';
 import { addToFavoriteService } from '../../services/favorite/favorite.service';
 import { protectedProcedure } from '../../trpc';
 import * as validator from '@packrat/validations';
 
-export const addToFavorite = async (c) => {
+export const addToFavorite = async (c: Context) => {
   try {
-    const { packId, userId } = await c.req.parseBody();
+    const { packId, userId } = await c.req.json();
     const response = await addToFavoriteService(packId, userId);
     return c.json({ response }, 200);
   } catch (error) {
-    return c.json(
-      { error: `Failed to add to favorites: ${error.message}` },
-      500,
-    );
+    return c.json({ error: `${error.message}` }, 500);
   }
 };
 
diff --git a/server/src/controllers/favorite/getFavoritePacksByUser.ts b/server/src/controllers/favorite/getFavoritePacksByUser.ts
index cd7b3178d..18a8e7a01 100644
--- a/server/src/controllers/favorite/getFavoritePacksByUser.ts
+++ b/server/src/controllers/favorite/getFavoritePacksByUser.ts
@@ -1,17 +1,15 @@
 import { z } from 'zod';
 import { getFavoritePacksByUserService } from '../../services/favorite/favorite.service';
 import { publicProcedure, protectedProcedure } from '../../trpc';
+import { type Context } from 'hono';
 
-export const getFavoritePacksByUser = async (c) => {
+export const getFavoritePacksByUser = async (c: Context) => {
   try {
-    const { userId } = await c.req.parseBody();
+    const { userId } = await c.req.json();
     const packs = await getFavoritePacksByUserService(userId);
     return c.json({ packs }, 200);
   } catch (error) {
-    return c.json(
-      { error: `Failed to get favorite packs: ${error.message}` },
-      500,
-    );
+    return c.json({ error: `${error.message}` }, 500);
   }
 };
 
diff --git a/server/src/controllers/favorite/getUserFavorites.ts b/server/src/controllers/favorite/getUserFavorites.ts
index 23439ee91..84346df30 100644
--- a/server/src/controllers/favorite/getUserFavorites.ts
+++ b/server/src/controllers/favorite/getUserFavorites.ts
@@ -1,17 +1,15 @@
 import { z } from 'zod';
 import { protectedProcedure } from '../../trpc';
 import { getUserFavoritesService } from '../../services/favorite/favorite.service';
+import { type Context } from 'hono';
 
-export const getUserFavorites = async (c) => {
+export const getUserFavorites = async (c: Context) => {
   try {
-    const { userId } = await c.req.parseBody();
+    const { userId } = await c.req.json();
     const favorites = await getUserFavoritesService(userId);
     return c.json({ favorites }, 200);
   } catch (error) {
-    return c.json(
-      { error: `Failed to get user favorites: ${error.message}` },
-      500,
-    );
+    return c.json({ error: `${error.message}` }, 500);
   }
 };
 
diff --git a/server/src/controllers/mapPreview/index.ts b/server/src/controllers/mapPreview/index.ts
index b1b873455..812eb66ac 100644
--- a/server/src/controllers/mapPreview/index.ts
+++ b/server/src/controllers/mapPreview/index.ts
@@ -1,13 +1,13 @@
 // import { MAPBOX_ACCESS_TOKEN } from '../../config';
-import { type Context, type Next } from 'hono';
+import { type Context } from 'hono';
 import { responseHandler } from '../../helpers/responseHandler';
 
-const getMapPreview = async (ctx: Context, next: Next) => {
+const getMapPreview = async (ctx: Context) => {
   try {
     const { env }: any = ctx;
     const { MAPBOX_ACCESS_TOKEN } = env;
 
-    const queryParams = Object.entries(ctx.req.query).reduce(
+    const queryParams = Object.entries(await ctx.req.query).reduce(
       (acc, [key, val], i, arr) =>
         `${acc}${key}=${val}${i == arr.length - 1 ? '' : '&'}`,
       '',
@@ -36,12 +36,10 @@ const getMapPreview = async (ctx: Context, next: Next) => {
     console.log('newResponse', newResponse);
 
     // return newResponse;
-    ctx.set('data', newResponse);
-    return await responseHandler(ctx);
+    return ctx.json(newResponse, 200);
   } catch (error) {
     console.log(error);
-    ctx.set('error', error.message);
-    return await responseHandler(ctx);
+    return ctx.json({ error: error.message }, 400);
     // next(MapPreviewError);
   }
 };
diff --git a/server/src/controllers/template/addTemplate.ts b/server/src/controllers/template/addTemplate.ts
index 57209bde8..b62753c0c 100644
--- a/server/src/controllers/template/addTemplate.ts
+++ b/server/src/controllers/template/addTemplate.ts
@@ -6,7 +6,7 @@ import * as validator from '@packrat/validations';
 export const addTemplate = async (c) => {
   try {
     const { type, templateId, isGlobalTemplate, createdBy } =
-      await c.req.parseBody();
+      await c.req.json();
     const userClass = new User();
     const user = await userClass.findUser({ userId: createdBy });
     if (!user) {
@@ -15,7 +15,7 @@ export const addTemplate = async (c) => {
     await addTemplateService(type, templateId, isGlobalTemplate, createdBy);
     return c.json({ message: 'Template added successfully' }, 200);
   } catch (error) {
-    return c.json({ error: `Failed to add template: ${error.message}` }, 500);
+    return c.json({ error: `${error.message}` }, 500);
   }
 };
 
diff --git a/server/src/controllers/template/deleteTemplate.ts b/server/src/controllers/template/deleteTemplate.ts
index f6d26c258..48279c903 100644
--- a/server/src/controllers/template/deleteTemplate.ts
+++ b/server/src/controllers/template/deleteTemplate.ts
@@ -5,7 +5,7 @@ import { Template } from '../../drizzle/methods/template';
 
 export const deleteTemplate = async (c) => {
   try {
-    const { templateId } = await c.req.parseBody();
+    const { templateId } = await c.req.json();
     const templateClass = new Template();
     const template = await templateClass.findTemplate(templateId);
     if (template) {
@@ -15,10 +15,7 @@ export const deleteTemplate = async (c) => {
       return c.json({ error: TemplateNotFoundError.message }, 404);
     }
   } catch (error) {
-    return c.json(
-      { error: `Failed to delete template: ${error.message}` },
-      500,
-    );
+    return c.json({ error: `${error.message}` }, 500);
   }
 };
 
diff --git a/server/src/controllers/template/editTemplate.ts b/server/src/controllers/template/editTemplate.ts
index 43c82b6aa..42fe525d5 100644
--- a/server/src/controllers/template/editTemplate.ts
+++ b/server/src/controllers/template/editTemplate.ts
@@ -4,7 +4,7 @@ import * as validator from '@packrat/validations';
 
 export const editTemplate = async (c) => {
   try {
-    const { templateId, type, isGlobalTemplate } = await c.req.parseBody();
+    const { templateId, type, isGlobalTemplate } = await c.req.json();
     const updatedTemplate = await editTemplateService(
       templateId,
       type,
@@ -12,7 +12,7 @@ export const editTemplate = async (c) => {
     );
     return c.json({ updatedTemplate }, 200);
   } catch (error) {
-    return c.json({ error: `Failed to edit template: ${error.message}` }, 500);
+    return c.json({ error: `${error.message}` }, 500);
   }
 };
 
diff --git a/server/src/controllers/template/getTemplateById.ts b/server/src/controllers/template/getTemplateById.ts
index 25509a5f9..310e82fa7 100644
--- a/server/src/controllers/template/getTemplateById.ts
+++ b/server/src/controllers/template/getTemplateById.ts
@@ -5,12 +5,12 @@ import { Template } from '../../drizzle/methods/template';
 
 export const getTemplateById = async (c) => {
   try {
-    const { templateId } = await c.req.parseParams();
+    const { templateId } = await c.req.param();
     const templateClass = new Template();
     const template = await templateClass.findTemplate(templateId, true);
     return c.json({ template }, 200);
   } catch (error) {
-    return c.json({ error: `Failed to get item: ${error.message}` }, 500);
+    return c.json({ error: `${error.message}` }, 500);
   }
 };
 
diff --git a/server/src/controllers/template/getTemplates.ts b/server/src/controllers/template/getTemplates.ts
index 0a5dde8a3..1f58439cc 100644
--- a/server/src/controllers/template/getTemplates.ts
+++ b/server/src/controllers/template/getTemplates.ts
@@ -1,10 +1,15 @@
+import { type Context } from 'hono';
 import { Template } from '../../drizzle/methods/template';
 import { protectedProcedure } from '../../trpc';
 
-export const getTemplates = async (c) => {
-  const templateClass = new Template();
-  const templates = await templateClass.findMany();
-  return c.json(templates, 200);
+export const getTemplates = async (c: Context) => {
+  try {
+    const templateClass = new Template();
+    const templates = await templateClass.findMany();
+    return c.json(templates, 200);
+  } catch (error) {
+    return c.json({ error: error.message }, 400);
+  }
 };
 
 export function getTemplatesRoute() {
diff --git a/server/src/routes/favoriteRoutes.ts b/server/src/routes/favoriteRoutes.ts
index 4b17eaca3..25b137000 100644
--- a/server/src/routes/favoriteRoutes.ts
+++ b/server/src/routes/favoriteRoutes.ts
@@ -1,9 +1,9 @@
 import { Hono } from 'hono';
 import * as validator from '@packrat/validations';
 import {
-  addToFavoriteRoute as addToFavorite,
-  getFavoritePacksByUserRoute as getFavoritePacksByUser,
-  getUserFavoritesRoute as getUserFavorites,
+  addToFavorite,
+  getFavoritePacksByUser,
+  getUserFavorites,
 } from '../controllers/favorite/index';
 import { tryCatchWrapper } from '../helpers/tryCatchWrapper';
 import authTokenMiddleware from '../middleware/auth';

From 7915338b180307738c7ed0a364f8092611b95720 Mon Sep 17 00:00:00 2001
From: Muhammad Hassan <mh7722178@gmail.com>
Date: Thu, 18 Jul 2024 21:42:03 +0500
Subject: [PATCH 249/257] OpenAi, Osm, password_rest Routes Testing Done

---
 .../src/validations/openAIRoutesValidator.ts           |  1 +
 server/src/controllers/getOsm/getDestination.ts        | 10 ++++------
 server/src/controllers/getOsm/getOsm.ts                |  4 ++--
 server/src/controllers/getOsm/getParksOSM.ts           |  7 ++++---
 server/src/controllers/getOsm/getPhotonDetails.ts      | 10 ++--------
 server/src/controllers/getOsm/getPhotonResults.ts      | 10 ++--------
 server/src/controllers/getOsm/getTrailsOSM.ts          | 10 ++--------
 server/src/controllers/getOsm/postSingleGeoJSON.ts     | 10 ++--------
 server/src/controllers/openAi/getAIResponse.ts         |  9 +++------
 server/src/controllers/openAi/getAISuggestions.ts      |  2 +-
 server/src/controllers/openAi/getUserChats.ts          |  6 +++---
 .../controllers/passwordReset/handlePasswordReset.ts   |  4 ++--
 .../controllers/passwordReset/requestPasswordReset.ts  |  7 ++-----
 13 files changed, 30 insertions(+), 60 deletions(-)

diff --git a/packages/validations/src/validations/openAIRoutesValidator.ts b/packages/validations/src/validations/openAIRoutesValidator.ts
index baa658c72..a703930fd 100644
--- a/packages/validations/src/validations/openAIRoutesValidator.ts
+++ b/packages/validations/src/validations/openAIRoutesValidator.ts
@@ -11,6 +11,7 @@ export const getUserChats = z.object({
   itemTypeId: z.string(),
 });
 
+
 export const getAISuggestions = z.object({
   userId: z.string(),
   itemTypeId: z.string(),
diff --git a/server/src/controllers/getOsm/getDestination.ts b/server/src/controllers/getOsm/getDestination.ts
index 8d1d744c5..7e92943dc 100644
--- a/server/src/controllers/getOsm/getDestination.ts
+++ b/server/src/controllers/getOsm/getDestination.ts
@@ -1,17 +1,15 @@
 import { protectedProcedure } from '../../trpc';
 import { getDestinationService } from '../../services/osm/osm.service';
 import { z } from 'zod';
+import { type Context } from 'hono';
 
-export const getDestination = async (c) => {
+export const getDestination = async (c: Context) => {
   try {
-    const { id } = await c.req.parseBody();
+    const { id } = await c.req.json();
     const destination = await getDestinationService(id);
     return c.json({ destination }, 200);
   } catch (error) {
-    return c.json(
-      { error: `Failed to get destination: ${error.message}` },
-      500,
-    );
+    return c.json({ error: `${error.message}` }, 500);
   }
 };
 
diff --git a/server/src/controllers/getOsm/getOsm.ts b/server/src/controllers/getOsm/getOsm.ts
index 1bf14ab32..0809b4f8c 100644
--- a/server/src/controllers/getOsm/getOsm.ts
+++ b/server/src/controllers/getOsm/getOsm.ts
@@ -5,7 +5,7 @@ import { z } from 'zod';
 
 export const getOsm = async (c) => {
   try {
-    const { activityType, startPoint, endPoint } = await c.req.parseBody();
+    const { activityType, startPoint, endPoint } = await c.req.json();
     const route = await getOsmService({
       activityType,
       startPoint,
@@ -14,7 +14,7 @@ export const getOsm = async (c) => {
     });
     return c.json({ route }, 200);
   } catch (error) {
-    return c.json({ error: `Failed to get OSM route: ${error.message}` }, 500);
+    return c.json({ error: `${error.message}` }, 500);
   }
 };
 
diff --git a/server/src/controllers/getOsm/getParksOSM.ts b/server/src/controllers/getOsm/getParksOSM.ts
index 2e5c99646..aab9efadc 100644
--- a/server/src/controllers/getOsm/getParksOSM.ts
+++ b/server/src/controllers/getOsm/getParksOSM.ts
@@ -1,14 +1,15 @@
+import { type Context } from 'hono';
 import { getParksOSMService } from '../../services/osm/getParksOSMService';
 import { protectedProcedure } from '../../trpc';
 import * as validator from '@packrat/validations';
 
-export const getParksOSM = async (c) => {
+export const getParksOSM = async (c: Context) => {
   try {
-    const { lat, lon, radius } = await c.req.parseBody();
+    const { lat, lon, radius } = await c.req.json();
     const parks = await getParksOSMService(lat, lon, radius, c.env.OSM_URI);
     return c.json({ parks }, 200);
   } catch (error) {
-    return c.json({ error: `Failed to get parks: ${error.message}` }, 500);
+    return c.json({ error: `${error.message}` }, 500);
   }
 };
 
diff --git a/server/src/controllers/getOsm/getPhotonDetails.ts b/server/src/controllers/getOsm/getPhotonDetails.ts
index 02544e797..c54e1e25a 100644
--- a/server/src/controllers/getOsm/getPhotonDetails.ts
+++ b/server/src/controllers/getOsm/getPhotonDetails.ts
@@ -9,15 +9,9 @@ export async function getPhotonDetails(ctx: Context) {
     const { id, type } = await ctx.req.param();
     const { env }: any = ctx;
     const response = await getPhotonDetailsService(id, type, env.OSM_URI);
-    if (!response) {
-      ctx.set('data', { data: 'No Photons Details Found' });
-      return await responseHandler(ctx);
-    }
-    ctx.set('data', { data: response });
-    return await responseHandler(ctx);
+    return ctx.json({ response }, 200);
   } catch (error) {
-    ctx.set('error', { error: error.message });
-    return await responseHandler(ctx);
+    return ctx.json({ error: error.message }, 500);
   }
 }
 
diff --git a/server/src/controllers/getOsm/getPhotonResults.ts b/server/src/controllers/getOsm/getPhotonResults.ts
index d949e1f9f..7fb287954 100644
--- a/server/src/controllers/getOsm/getPhotonResults.ts
+++ b/server/src/controllers/getOsm/getPhotonResults.ts
@@ -8,15 +8,9 @@ export async function getPhotonResults(ctx: Context) {
   try {
     const { searchString } = await ctx.req.query();
     const response = await getPhotonResultsService(searchString);
-    if (!response) {
-      ctx.set('data', { data: 'No Phontons Found' });
-      return await responseHandler(ctx);
-    }
-    ctx.set('data', { data: response.features });
-    return await responseHandler(ctx);
+    return ctx.json(response.features, 200)
   } catch (error) {
-    ctx.set('error', error.message);
-    return await responseHandler(ctx);
+    return ctx.json({error: error.message}, 500)
   }
 }
 
diff --git a/server/src/controllers/getOsm/getTrailsOSM.ts b/server/src/controllers/getOsm/getTrailsOSM.ts
index 5e4691501..75fab4de7 100644
--- a/server/src/controllers/getOsm/getTrailsOSM.ts
+++ b/server/src/controllers/getOsm/getTrailsOSM.ts
@@ -13,15 +13,9 @@ export async function getTrailsOSM(ctx: Context) {
     } = await ctx.req.json();
     const { env }: any = ctx;
     const response = await getTrailsOsmService(env.OSM_URI, lat, lon, radius);
-    if (!response) {
-      ctx.set('data', { data: 'No Trails Found' });
-      return await responseHandler(ctx);
-    }
-    ctx.set('data', { data: response });
-    return await responseHandler(ctx);
+    return ctx.json(response, 200);
   } catch (error) {
-    ctx.set('error', { error: error.message });
-    return await responseHandler(ctx);
+    return ctx.json({ error: error.message }, 500);
   }
 }
 
diff --git a/server/src/controllers/getOsm/postSingleGeoJSON.ts b/server/src/controllers/getOsm/postSingleGeoJSON.ts
index 91352f047..9446971bc 100644
--- a/server/src/controllers/getOsm/postSingleGeoJSON.ts
+++ b/server/src/controllers/getOsm/postSingleGeoJSON.ts
@@ -8,15 +8,9 @@ export async function postSingleGeoJSON(ctx: Context) {
   try {
     const { geojson } = await ctx.req.json();
     const response = await postSingleGeoJSONService(geojson);
-    if (!response) {
-      ctx.set('data', { data: 'No Post Single GeoJson Found' });
-      return await responseHandler(ctx);
-    }
-    ctx.set('data', { data: response });
-    return await responseHandler(ctx);
+    return ctx.json({ response }, 200);
   } catch (error) {
-    ctx.set('error', { error: error.message });
-    return await responseHandler(ctx);
+    return ctx.json({ error: error.message }, 500);
   }
 }
 
diff --git a/server/src/controllers/openAi/getAIResponse.ts b/server/src/controllers/openAi/getAIResponse.ts
index ded9d2b7a..71d040d6b 100644
--- a/server/src/controllers/openAi/getAIResponse.ts
+++ b/server/src/controllers/openAi/getAIResponse.ts
@@ -9,7 +9,7 @@ interface AIResponseServiceResult {
 
 export const getAIResponse = async (c) => {
   try {
-    const { userId, userInput, itemTypeId, type } = await c.req.parseBody();
+    const { userId, userInput, itemTypeId, type } = await c.req.json();
     const { aiResponse, conversation } = (await getAIResponseService(
       userId,
       itemTypeId,
@@ -17,12 +17,9 @@ export const getAIResponse = async (c) => {
       type,
       c.env.OPENAI_API_KEY,
     )) as AIResponseServiceResult;
-    return c.json({ aiResponse, conversation });
+    return c.json({ aiResponse, conversation }, 200);
   } catch (error) {
-    return c.json(
-      { error: `Failed to get AI response: ${error.message}` },
-      500,
-    );
+    return c.json({ error: `${error.message}` }, 500);
   }
 };
 export function getAIResponseRoute() {
diff --git a/server/src/controllers/openAi/getAISuggestions.ts b/server/src/controllers/openAi/getAISuggestions.ts
index 297ba7101..b98667a3f 100644
--- a/server/src/controllers/openAi/getAISuggestions.ts
+++ b/server/src/controllers/openAi/getAISuggestions.ts
@@ -9,7 +9,7 @@ interface AIResponseServiceResult {
 
 export const getAISuggestions = async (c) => {
   try {
-    const { userId, itemTypeId, type } = await c.req.parseBody();
+    const { userId, itemTypeId, type } = await c.req.json();
     const { aiResponse, refined } = (await getAISuggestionService(
       userId,
       itemTypeId,
diff --git a/server/src/controllers/openAi/getUserChats.ts b/server/src/controllers/openAi/getUserChats.ts
index 76dbcd7fb..4b4ba0204 100644
--- a/server/src/controllers/openAi/getUserChats.ts
+++ b/server/src/controllers/openAi/getUserChats.ts
@@ -4,11 +4,11 @@ import { z } from 'zod';
 
 export const getUserChats = async (c) => {
   try {
-    const { userId, itemTypeId } = await c.req.parseBody();
+    const { userId, itemTypeId } = await c.req.json();
     const conversations = getUserChatsService(userId, itemTypeId);
-    return c.json({ conversations });
+    return c.json({ conversations }, 200);
   } catch (error) {
-    return c.json({ error: `Failed to get user chats: ${error.message}` }, 500);
+    return c.json({ error: `${error.message}` }, 500);
   }
 };
 
diff --git a/server/src/controllers/passwordReset/handlePasswordReset.ts b/server/src/controllers/passwordReset/handlePasswordReset.ts
index 120d905ef..6dcd8fdee 100644
--- a/server/src/controllers/passwordReset/handlePasswordReset.ts
+++ b/server/src/controllers/passwordReset/handlePasswordReset.ts
@@ -31,9 +31,9 @@ export const handlePasswordReset = async (c) => {
       passwordResetTokenExpiration: null,
     });
 
-    return { message: 'Password reset successful' };
+    return c.json({ message: 'Password reset successful' }, 200);
   } catch (error) {
-    return { error: `Failed to reset password: ${error.message}` };
+    return c.json({ error: `${error.message}` }, 500);
   }
 };
 
diff --git a/server/src/controllers/passwordReset/requestPasswordReset.ts b/server/src/controllers/passwordReset/requestPasswordReset.ts
index a6b94efbc..b66b6edaf 100644
--- a/server/src/controllers/passwordReset/requestPasswordReset.ts
+++ b/server/src/controllers/passwordReset/requestPasswordReset.ts
@@ -5,7 +5,7 @@ import { User } from '../../drizzle/methods/User';
 
 export const requestPasswordResetEmailAndToken = async (c) => {
   try {
-    const { email } = await c.req.parseBody();
+    const { email } = await c.req.json();
     const userClass = new User();
     const jwtSecret = c.env.JWT_SECRET;
     const clientUrl = c.env.CLIENT_URL;
@@ -26,10 +26,7 @@ export const requestPasswordResetEmailAndToken = async (c) => {
     );
     return c.json({ message: 'Password reset email sent successfully' }, 200);
   } catch (error) {
-    return c.json(
-      { error: `Failed to send password reset email: ${error.message}` },
-      500,
-    );
+    return c.json({ error: `${error.message}` }, 500);
   }
 };
 

From 44bc15dcbf1bc58d8457a5118710854fb8d27b62 Mon Sep 17 00:00:00 2001
From: Muhammad Hassan <mh7722178@gmail.com>
Date: Thu, 18 Jul 2024 21:42:44 +0500
Subject: [PATCH 250/257] uncommented enforceHttps, SecurityHeaders

---
 server/src/index.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/server/src/index.ts b/server/src/index.ts
index 7282f27cb..31492c067 100644
--- a/server/src/index.ts
+++ b/server/src/index.ts
@@ -30,10 +30,10 @@ const app = new Hono<{ Bindings: Bindings }>();
 //  ref: https://hono.dev/middleware/builtin/compress
 
 // SETUP HTTPS Enforcement Middleware
-// app.use('*', enforceHttps()); // Apply to all routes
+app.use('*', enforceHttps()); // Apply to all routes
 
 // SETUP SECURITY HEADERS
-// app.use('*', securityHeaders()); // Apply to all routes
+app.use('*', securityHeaders()); // Apply to all routes
 
 // SETUP CORS
 app.use('*', async (c, next) => {

From 79ebce65abab94dcacd72733c5e425a196d37e9a Mon Sep 17 00:00:00 2001
From: Anmol Verma <anmolverma2810@gmail.com>
Date: Fri, 19 Jul 2024 21:43:27 +0530
Subject: [PATCH 251/257] Add position to sheet

---
 .../app/components/feed/FeedSearchFilter.tsx  |  7 +++----
 packages/ui/src/Dropdown.tsx                  |  8 +++++++-
 packages/ui/src/RSelect/index.tsx             | 20 +++++--------------
 3 files changed, 15 insertions(+), 20 deletions(-)

diff --git a/packages/app/components/feed/FeedSearchFilter.tsx b/packages/app/components/feed/FeedSearchFilter.tsx
index 04989c88f..c100c1ec6 100644
--- a/packages/app/components/feed/FeedSearchFilter.tsx
+++ b/packages/app/components/feed/FeedSearchFilter.tsx
@@ -59,7 +59,7 @@ const FeedSearchFilter = ({
   const styles = useCustomStyles(loadStyles);
   const [searchValue, setSearchValue] = useState('');
 
-  const onSearch = (search) => (setSearchQuery) ? setSearchQuery(search) : null;
+  const onSearch = (search) => (setSearchQuery ? setSearchQuery(search) : null);
 
   return (
     <Layout>
@@ -155,8 +155,7 @@ const FeedSearchFilter = ({
                 data={dataValues}
                 onValueChange={handleSortChange}
                 placeholder={queryString}
-                style={styles.dropdown}
-                width="55%"
+                native={true}
               />
             </RStack>
             {(feedType === 'userPacks' || feedType === 'userTrips') && (
@@ -181,7 +180,7 @@ const loadStyles = (theme: any) => {
 
   return {
     mainContainer: {
-      flex: 1,
+      // flex: 1,
       backgroundColor: currentTheme.colors.background,
       fontSize: 18,
       padding: 15,
diff --git a/packages/ui/src/Dropdown.tsx b/packages/ui/src/Dropdown.tsx
index b414f48a2..de66cacc8 100644
--- a/packages/ui/src/Dropdown.tsx
+++ b/packages/ui/src/Dropdown.tsx
@@ -139,7 +139,13 @@ export const DropdownComponent: React.FC<DropdownComponentProps> = ({
   const isWeb = Platform.OS === 'web';
 
   return (
-    <View style={{ flexDirection: 'row', justifyContent: 'center' }}>
+    <View
+      style={{
+        flexDirection: 'row',
+        justifyContent: 'center',
+        width: '70%',
+      }}
+    >
       <RSelect
         placeholder={placeholder || 'Select'}
         native={!isWeb}
diff --git a/packages/ui/src/RSelect/index.tsx b/packages/ui/src/RSelect/index.tsx
index d44a2721f..0b9420282 100644
--- a/packages/ui/src/RSelect/index.tsx
+++ b/packages/ui/src/RSelect/index.tsx
@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { useMemo, useState } from 'react';
 import { Check, ChevronDown } from '@tamagui/lucide-icons';
 import {
   Adapt,
@@ -91,6 +91,8 @@ export function SelectItem(props) {
     return <Text>No options available</Text>;
   }
 
+  const [position, setPosition] = useState(0);
+
   return (
     <Select
       value={value}
@@ -104,20 +106,6 @@ export function SelectItem(props) {
       <Select.Content zIndex={200000}>
         <Select.Viewport minWidth={200}>
           <Select.Group>{options}</Select.Group>
-          {native && (
-            <YStack
-              position="absolute"
-              right={0}
-              top={0}
-              bottom={0}
-              alignItems="center"
-              justifyContent="center"
-              width={'$4'}
-              pointerEvents="none"
-            >
-              {/* <ChevronDown size={getFontSize((props.size ?? '$true') as any)} /> */}
-            </YStack>
-          )}
         </Select.Viewport>
       </Select.Content>
       {native && (
@@ -126,6 +114,8 @@ export function SelectItem(props) {
             native
             modal
             snapPointsMode="fit"
+            position={position}
+            onPositionChange={setPosition}
             dismissOnSnapToBottom
             animationConfig={{
               type: 'spring',

From 0a95e8fef18bc0a7b34c6a5099b7e8d838233ce0 Mon Sep 17 00:00:00 2001
From: Muhammad Hassan <mh7722178@gmail.com>
Date: Fri, 19 Jul 2024 21:17:27 +0500
Subject: [PATCH 252/257] Refactored the requested Changes in addItemservice

---
 server/src/services/item/addItemService.ts | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/server/src/services/item/addItemService.ts b/server/src/services/item/addItemService.ts
index b0b799b77..daf3e3fc8 100644
--- a/server/src/services/item/addItemService.ts
+++ b/server/src/services/item/addItemService.ts
@@ -26,22 +26,18 @@ export const addItemService = async (
   type: 'Food' | 'Water' | 'Essentials',
   ownerId: string,
 ) => {
- 
   let category: InsertItemCategory | null;
   if (!categories.includes(type)) {
     throw new Error(`Category must be one of: ${categories.join(', ')}`);
   }
-  
   const itemCategoryClass = new ItemCategory();
   const itemClass = new Item();
   const itemPacksClass = new ItemPacks();
   const itemOwnersClass = new ItemOwners();
-  
   category = (await itemCategoryClass.findItemCategory({ name: type })) || null;
   if (!category) {
     category = await itemCategoryClass.create({ name: type });
   }
-  
   const item = await itemClass.create({
     name,
     weight,
@@ -53,8 +49,8 @@ export const addItemService = async (
   });
 
   // await Pack.updateOne({ _id: packId }, { $addToSet: { items: newItem._id } });
-  // await itemPacksClass.create({ itemId: item.id, packId });
-  // await itemOwnersClass.create({ itemId: item.id, ownerId });
+  await itemPacksClass.create({ itemId: item.id, packId });
+  await itemOwnersClass.create({ itemId: item.id, ownerId });
   // const pack = await packClass.update(
   //   {
   //     itemDocuments: newItem.id,
@@ -74,4 +70,4 @@ export const addItemService = async (
 
   // return { newItem: updatedItem, packId };
   return item;
-};
+};
\ No newline at end of file

From 627c3dd0e1605d4978aaefb7d85f4334d9c610a3 Mon Sep 17 00:00:00 2001
From: Taron <taron.aleksanyan.20@gmail.com>
Date: Sat, 20 Jul 2024 02:06:55 +0400
Subject: [PATCH 253/257] disable trips related stuff for short term

---
 .../app/components/feed/FeedSearchFilter.tsx  | 12 ++++++--
 packages/app/hoc/disableScreen.tsx            | 11 +++++++
 .../app/hooks/navigation/useNavigationList.ts | 30 ++++++++++---------
 packages/app/screens/feed/Feed.tsx            |  3 +-
 packages/app/screens/trip/createTrip.tsx      |  5 +++-
 .../app/screens/user/ProfileContainer.tsx     |  5 ++--
 6 files changed, 46 insertions(+), 20 deletions(-)
 create mode 100644 packages/app/hoc/disableScreen.tsx

diff --git a/packages/app/components/feed/FeedSearchFilter.tsx b/packages/app/components/feed/FeedSearchFilter.tsx
index c100c1ec6..32cc6e1d9 100644
--- a/packages/app/components/feed/FeedSearchFilter.tsx
+++ b/packages/app/components/feed/FeedSearchFilter.tsx
@@ -103,10 +103,18 @@ const FeedSearchFilter = ({
               <RStack
                 style={{ flexDirection: 'row', gap: 10, alignItems: 'center' }}
               >
+                {/* DISABLE TRIP TEMP */}
                 <RText
                   fontSize={18}
                   fontWeight="bold"
                   color={currentTheme.colors.textColor}
+                >
+                  Discover Other Users' Public Packs
+                </RText>
+                {/* <RText
+                  fontSize={18}
+                  fontWeight="bold"
+                  color={currentTheme.colors.textColor}
                 >
                   Packs
                 </RText>
@@ -125,7 +133,7 @@ const FeedSearchFilter = ({
                   color={currentTheme.colors.textColor}
                 >
                   Trips
-                </RText>
+                </RText> 
                 <RSwitch
                   id="two-switch"
                   size="$1.5"
@@ -133,7 +141,7 @@ const FeedSearchFilter = ({
                   onCheckedChange={handleToggleTrip}
                 >
                   <Switch.Thumb />
-                </RSwitch>
+                </RSwitch>*/}
               </RStack>
             )}
             <RStack
diff --git a/packages/app/hoc/disableScreen.tsx b/packages/app/hoc/disableScreen.tsx
new file mode 100644
index 000000000..fa749a9bd
--- /dev/null
+++ b/packages/app/hoc/disableScreen.tsx
@@ -0,0 +1,11 @@
+import { FC } from 'react';
+
+export const disableScreen =
+  <T extends {}>(Component: FC<T>, checkDisabled?: (props: T) => boolean) =>
+  (props: T) => {
+    if (!checkDisabled || checkDisabled(props)) {
+      return null;
+    }
+
+    return <Component {...props} />;
+  };
diff --git a/packages/app/hooks/navigation/useNavigationList.ts b/packages/app/hooks/navigation/useNavigationList.ts
index 28704aa33..1d0eeff22 100644
--- a/packages/app/hooks/navigation/useNavigationList.ts
+++ b/packages/app/hooks/navigation/useNavigationList.ts
@@ -85,13 +85,14 @@ const logedInMenuItems: NavigationItem[] = [
     text: 'Feed',
     iconSource: MaterialCommunityIcons,
   },
-  {
-    type: NavigationItemTypeEnum.LINK,
-    href: '/trips',
-    icon: 'routes',
-    text: 'Trips',
-    iconSource: MaterialCommunityIcons,
-  },
+  // DISABLE TROP TEMP
+  // {
+  //   type: NavigationItemTypeEnum.LINK,
+  //   href: '/trips',
+  //   icon: 'routes',
+  //   text: 'Trips',
+  //   iconSource: MaterialCommunityIcons,
+  // },
   {
     type: NavigationItemTypeEnum.LINK,
     href: '/packs',
@@ -128,13 +129,14 @@ const logedInMenuItems: NavigationItem[] = [
     type: NavigationItemTypeEnum.DIVIDER,
     Component: Separator,
   },
-  {
-    type: NavigationItemTypeEnum.LINK,
-    href: '/appearance',
-    icon: 'theme-light-dark',
-    text: 'Appearance',
-    iconSource: MaterialCommunityIcons,
-  },
+  // DISABLE SCREEN TEMP
+  // {
+  //   type: NavigationItemTypeEnum.LINK,
+  //   href: '/appearance',
+  //   icon: 'theme-light-dark',
+  //   text: 'Appearance',
+  //   iconSource: MaterialCommunityIcons,
+  // },
   {
     type: NavigationItemTypeEnum.LINK,
     href: '/logout',
diff --git a/packages/app/screens/feed/Feed.tsx b/packages/app/screens/feed/Feed.tsx
index a29677f20..2f2e6b17c 100644
--- a/packages/app/screens/feed/Feed.tsx
+++ b/packages/app/screens/feed/Feed.tsx
@@ -9,6 +9,7 @@ import { useFeed } from 'app/hooks/feed';
 import { RefreshControl } from 'react-native';
 import { RText } from '@packrat/ui';
 import { useAuthUser } from 'app/auth/hooks';
+import { disableScreen } from '../../hoc/disableScreen';
 
 const URL_PATHS = {
   userPacks: '/pack/',
@@ -212,4 +213,4 @@ const loadStyles = (theme) => {
   };
 };
 
-export default Feed;
\ No newline at end of file
+export default disableScreen(Feed, (props) => props.feedType === 'userTrips');
diff --git a/packages/app/screens/trip/createTrip.tsx b/packages/app/screens/trip/createTrip.tsx
index 216399d48..8c3314e2c 100644
--- a/packages/app/screens/trip/createTrip.tsx
+++ b/packages/app/screens/trip/createTrip.tsx
@@ -18,8 +18,9 @@ import {
   TripDateRangeCard,
 } from 'app/components/trip/TripCards';
 import { WeatherData } from 'app/components/weather/WeatherData';
+import { disableScreen } from 'app/hoc/disableScreen';
 
-export default function Trips() {
+function Trips() {
   const styles = useCustomStyles(loadStyles);
 
   const placesAutoCompleteRef = useRef({});
@@ -94,3 +95,5 @@ const loadStyles = () => ({
     padding: 20,
   },
 });
+
+export default disableScreen(Trips);
diff --git a/packages/app/screens/user/ProfileContainer.tsx b/packages/app/screens/user/ProfileContainer.tsx
index ba4c24ed2..ad0e30134 100644
--- a/packages/app/screens/user/ProfileContainer.tsx
+++ b/packages/app/screens/user/ProfileContainer.tsx
@@ -258,7 +258,8 @@ export default function ProfileContainer({ id = null }) {
                 />
               </View>
             )}
-            {tripsList.length > 0 && (
+            {/* DISABLE TRIP TEMP */}
+            {/* {tripsList.length > 0 && (
               <View style={styles.userDataContainer}>
                 <UserDataContainer
                   data={tripsList}
@@ -266,7 +267,7 @@ export default function ProfileContainer({ id = null }) {
                   userId={user?.id}
                 />
               </View>
-            )}
+            )} */}
           </View>
         </RStack>
       </ScrollView>

From ed2cb334d663dad630024b7b813a62f0f2edb4d9 Mon Sep 17 00:00:00 2001
From: Andrew Bierman <94939237+andrew-bierman@users.noreply.github.com>
Date: Sun, 21 Jul 2024 21:11:44 -0400
Subject: [PATCH 254/257] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20add=20automated=20?=
 =?UTF-8?q?deploys=20for=20backend?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .github/workflows/backend.yml | 49 ++++++++++++++++++++++++++++++++---
 1 file changed, 45 insertions(+), 4 deletions(-)

diff --git a/.github/workflows/backend.yml b/.github/workflows/backend.yml
index a6ef63aaa..4508fdc42 100644
--- a/.github/workflows/backend.yml
+++ b/.github/workflows/backend.yml
@@ -5,11 +5,12 @@ on:
   push:
     branches:
       - master
+      - andrew_testing
     paths:
       - 'packages/api/**'
       - 'server/**'
 
-concurrency: 
+concurrency:
   group: ${{ github.workflow }}-${{ github.ref }}
   cancel-in-progress: true
 
@@ -50,11 +51,51 @@ jobs:
           # packageManager: bun
           packageManager: yarn
           secrets: |
-            APP_URL
-            JWT_VERIFICATION_KEY
             CI
+            GOOGLE_CLIENT_ID
+            GOOGLE_CLIENT_SECRET
+            STMP_EMAIL
+            STMP_PASSWORD
+            JWT_SECRET
+            SEND_GRID_API_KEY
+            MAPBOX_ACCESS_TOKEN
+            OSM_URI
+            WEATHER_URL
+            WEATHER_WEEK_URL
+            OPENWEATHER_KEY
+            VECTORIZE_API_KEY
+            CLOUDFLARE_ACCOUNT_ID
+            VITE_PUBLIC_APP_URL
         env:
           APP_URL: ${{ secrets.VITE_PUBLIC_APP_URL }}
           JWT_VERIFICATION_KEY: ${{ secrets.JWT_SECRET }}
+          GOOGLE_CLIENT_ID: ${{ secrets.GOOGLE_CLIENT_ID }}
+          GOOGLE_CLIENT_SECRET: ${{ secrets.GOOGLE_CLIENT_SECRET }}
+          STMP_EMAIL: ${{ secrets.STMP_EMAIL }}
+          STMP_PASSWORD: ${{ secrets.STMP_PASSWORD }}
+          JWT_SECRET: ${{ secrets.JWT_SECRET }}
+          SEND_GRID_API_KEY: ${{ secrets.SEND_GRID_API_KEY }}
+          MAPBOX_ACCESS_TOKEN: ${{ secrets.MAPBOX_ACCESS_TOKEN }}
+          OSM_URI: ${{ secrets.OSM_URI }}
+          WEATHER_URL: ${{ secrets.WEATHER_URL }}
+          WEATHER_WEEK_URL: ${{ secrets.WEATHER_WEEK_URL }}
+          OPENWEATHER_KEY: ${{ secrets.OPENWEATHER_KEY }}
+          VECTORIZE_API_KEY: ${{ secrets.VECTORIZE_API_KEY }}
+          CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
           CI: true
-          NO_D1_WARNING: true
\ No newline at end of file
+          NO_D1_WARNING: true
+
+
+          # GOOGLE_CLIENT_ID=""
+# GOOGLE_CLIENT_SECRET=""
+# STMP_EMAIL=""
+# STMP_PASSWORD=""
+# JWT_SECRET=""
+# SEND_GRID_API_KEY=""
+# MAPBOX_ACCESS_TOKEN=""
+# OSM_URI=""
+# WEATHER_URL=""
+# WEATHER_WEEK_URL=""
+# OPENWEATHER_KEY=""
+# VECTORIZE_API_KEY=""
+# CLOUDFLARE_ACCOUNT_ID=""
\ No newline at end of file

From dd05b29607939cb89acc245967402c5487e970c6 Mon Sep 17 00:00:00 2001
From: Andrew Bierman <94939237+andrew-bierman@users.noreply.github.com>
Date: Sun, 21 Jul 2024 21:12:33 -0400
Subject: [PATCH 255/257] =?UTF-8?q?=F0=9F=8E=A8=20cleanup?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .github/workflows/backend.yml | 15 ---------------
 1 file changed, 15 deletions(-)

diff --git a/.github/workflows/backend.yml b/.github/workflows/backend.yml
index 4508fdc42..78a13d507 100644
--- a/.github/workflows/backend.yml
+++ b/.github/workflows/backend.yml
@@ -84,18 +84,3 @@ jobs:
           CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
           CI: true
           NO_D1_WARNING: true
-
-
-          # GOOGLE_CLIENT_ID=""
-# GOOGLE_CLIENT_SECRET=""
-# STMP_EMAIL=""
-# STMP_PASSWORD=""
-# JWT_SECRET=""
-# SEND_GRID_API_KEY=""
-# MAPBOX_ACCESS_TOKEN=""
-# OSM_URI=""
-# WEATHER_URL=""
-# WEATHER_WEEK_URL=""
-# OPENWEATHER_KEY=""
-# VECTORIZE_API_KEY=""
-# CLOUDFLARE_ACCOUNT_ID=""
\ No newline at end of file

From 5b5c14c90583a5cd9eb8ba70ef8d1fd15865fa4b Mon Sep 17 00:00:00 2001
From: Andrew Bierman <94939237+andrew-bierman@users.noreply.github.com>
Date: Sun, 21 Jul 2024 21:18:15 -0400
Subject: [PATCH 256/257] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20refresh=20lockfile?=
 =?UTF-8?q?=20bot?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .github/workflows/refresh-lockfile.yml | 36 ++++++++++++++++++++++++++
 1 file changed, 36 insertions(+)
 create mode 100644 .github/workflows/refresh-lockfile.yml

diff --git a/.github/workflows/refresh-lockfile.yml b/.github/workflows/refresh-lockfile.yml
new file mode 100644
index 000000000..542cf3af4
--- /dev/null
+++ b/.github/workflows/refresh-lockfile.yml
@@ -0,0 +1,36 @@
+name: Refresh Lockfile
+
+on:
+  issue_comment:
+    types: [created]
+
+jobs:
+  refresh-lockfile:
+    if: github.event.issue.pull_request != null && contains(github.event.comment.body, '/refresh-lockfile')
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Check out the repository
+        uses: actions/checkout@v3
+
+      - name: Setup Standard Environment
+        uses: ./.github/actions/setup-standard-environment
+        with:
+          expo-token: ${{ secrets.EXPO_TOKEN }}
+
+      - name: Refresh lockfile
+        run: yarn regen
+
+      - name: Commit changes
+        run: |
+          git config --global user.name 'github-actions[bot]'
+          git config --global user.email 'github-actions[bot]@users.noreply.github.com'
+          git add yarn.lock
+          git commit -m 'Refresh lockfile'
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Push changes
+        run: git push
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

From f39fbddbe019f071e8de31acdd7b31a7bbda893d Mon Sep 17 00:00:00 2001
From: Andrew Bierman <94939237+andrew-bierman@users.noreply.github.com>
Date: Sun, 21 Jul 2024 21:39:29 -0400
Subject: [PATCH 257/257] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20add=20error=20hand?=
 =?UTF-8?q?ling=20to=20bot?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .github/workflows/refresh-lockfile.yml | 31 ++++++++++++++++++++------
 1 file changed, 24 insertions(+), 7 deletions(-)

diff --git a/.github/workflows/refresh-lockfile.yml b/.github/workflows/refresh-lockfile.yml
index 542cf3af4..b82492a8d 100644
--- a/.github/workflows/refresh-lockfile.yml
+++ b/.github/workflows/refresh-lockfile.yml
@@ -18,19 +18,36 @@ jobs:
         with:
           expo-token: ${{ secrets.EXPO_TOKEN }}
 
+      - name: Post start comment
+        run: |
+          gh pr comment ${{ github.event.issue.number }} --body "Starting lockfile refresh..."
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
       - name: Refresh lockfile
         run: yarn regen
 
-      - name: Commit changes
+      - name: Verify changes
+        run: git status
+
+      - name: Commit changes if there are any
         run: |
-          git config --global user.name 'github-actions[bot]'
-          git config --global user.email 'github-actions[bot]@users.noreply.github.com'
-          git add yarn.lock
-          git commit -m 'Refresh lockfile'
+          if [ -n "$(git status --porcelain)" ]; then
+            git config --global user.name 'github-actions[bot]'
+            git config --global user.email 'github-actions[bot]@users.noreply.github.com'
+            git add yarn.lock
+            git commit -m 'Refresh lockfile'
+            git push
+            gh pr comment ${{ github.event.issue.number }} --body "Lockfile refreshed and changes committed."
+          else
+            gh pr comment ${{ github.event.issue.number }} --body "No changes to commit."
+          fi
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
-      - name: Push changes
-        run: git push
+      - name: Post completion comment
+        if: always()
+        run: |
+          gh pr comment ${{ github.event.issue.number }} --body "Lockfile refresh process completed."
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}