enh

apps/backend/assets/demo.txt

@@ -1,6 +0,0 @@
-I have a mobile app meant for online shopping. People can shop for meat, fruits and dry fruits.
-my major colors are #F83758 and #fff0f6. I want just an info web site. I want the website
-to tell people that we sell the trust of local and the convenience of online. I want to highlight
-the process of selling. the steps are Find products, select a delivery slot, and get order delivered
-I want the site to be a jolly and fun theme one baked primarily in the colors I've given. Make
-it a node js app with pug and a statically rendered home page. 

apps/user-ui/app/(drawer)/(tabs)/home/index.tsx

@@ -40,7 +40,7 @@ dayjs.extend(relativeTime);
 
 const { width: screenWidth } = Dimensions.get("window");
 const itemWidth = screenWidth * 0.45; // 45% of screen width
-const gridItemWidth = (screenWidth * 0.9) / 2; // Half of screen width minus padding
+const gridItemWidth = (screenWidth - 48) / 2; // Half of screen width minus padding
 
 const RenderStore = ({
   item,
@@ -149,7 +149,9 @@ export default function Dashboard() {
       //   return !product.isOutOfStock;
       // });
 
-      const initialBatch = initialBatchRaw.sort((a, b) => {
+      const initialBatch = initialBatchRaw
+      .filter(p => typeof p.id === "number")
+      .sort((a, b) => {
         const slotA = getQuickestSlot(a.id);
         const slotB = getQuickestSlot(b.id);
 
@@ -161,6 +163,7 @@ export default function Dashboard() {
         return 0;
       })
       
+      
       setDisplayedProducts(initialBatch);
       setHasMore(products.length > 10);
       setEndIndex(10);
@@ -233,6 +236,7 @@ export default function Dashboard() {
   }
 
 
+
   return (
     <TabLayoutWrapper>
       {/* <ExpoStatusBar style="light" backgroundColor={headerColor} /> */}
@@ -589,12 +593,13 @@ export default function Dashboard() {
             <MyFlatList
               // data={products}
               data={displayedProducts}
-              keyExtractor={(item) => item.id.toString()}
+              keyExtractor={(item) => item.id}
               numColumns={2}
-              contentContainerStyle={tw`pb-8`}
+              // contentContainerStyle={tw`pb-8`}
-              columnWrapperStyle={tw`py-2`}
+              contentContainerStyle={[tw` pb-24`, { gap: 16 }]}
+              columnWrapperStyle={{gap: 16}}
               renderItem={({ item, index }) => (
-                <View style={tw`ml-1`}>
+
                   <ProductCard
                     item={item}
                     itemWidth={gridItemWidth}
@@ -608,7 +613,7 @@ export default function Dashboard() {
 
                     key={item.id}
                   />
-                </View>
+
               )}
               initialNumToRender={4}
               maxToRenderPerBatch={4}