enh

apps/admin-ui/app/(drawer)/dashboard/manage-orders/delivery-sequences/index.tsx

@@ -302,7 +302,7 @@ export default function DeliverySequences() {
   // Auto-select first slot if no slotId provided
   useEffect(() => {
     if (!slotId && slotsData?.slots && slotsData.slots.length > 0) {
-      router.replace(`/manage-orders/delivery-sequences?slotId=${slotsData.slots[0].id}`);
+      router.replace(`/(drawer)/dashboard/manage-orders/delivery-sequences?slotId=${slotsData.slots[0].id}`);
     }
   }, [slotId, slotsData, router]);
 
@@ -505,7 +505,7 @@ export default function DeliverySequences() {
                 value={selectedSlotId || ""}
                 onValueChange={(val) => {
                   if (val) {
-                    router.replace(`/manage-orders/delivery-sequences?slotId=${val}`);
+                    router.replace(`/(drawer)/dashboard/manage-orders/delivery-sequences?slotId=${val}`);
                   }
                 }}
                 placeholder="Select slot"
@@ -726,7 +726,7 @@ export default function DeliverySequences() {
         }}
         onViewDetails={() => {
           if (selectedOrder) {
-            router.push(`/manage-orders/order-details/${selectedOrder.id}`);
+            router.push(`/(drawer)/dashboard/manage-orders/order-details/${selectedOrder.id}`);
           }
           setShowOrderMenu(false);
         }}

apps/admin-ui/app/(drawer)/dashboard/manage-orders/orders/index.tsx

@@ -105,12 +105,12 @@ const OrderItem = ({ order, refetch }: { order: OrderType; refetch: () => void }
   const updateItemPackagingMutation = trpc.admin.order.updateOrderItemPackaging.useMutation();
 
   const handleOrderPress = () => {
-    router.push(`/manage-orders/order-details/${order.orderId}` as any);
+    router.push(`/(drawer)/dashboard/manage-orders/order-details/${order.orderId}` as any);
   };
 
   const handleMenuOption = () => {
     setMenuOpen(false);
-    router.push(`/manage-orders/order-details/${order.orderId}` as any);
+    router.push(`/(drawer)/dashboard/manage-orders/order-details/${order.orderId}` as any);
   };
 
   const handleMarkPackaged = (isPackaged: boolean) => {

apps/admin-ui/app/(drawer)/dashboard/prices-overview/index.tsx

@@ -419,7 +419,7 @@ export default function PricesOverview() {
           <TouchableOpacity
             style={tw`flex-row items-center p-4 bg-gray-50 rounded-lg`}
             onPress={() => {
-              router.push('/rebalance-orders' as any);
+              router.push('/(drawer)/dashboard/rebalance-orders' as any);
               setShowMenu(false);
             }}
           >

apps/admin-ui/app/(drawer)/dashboard/product-tags/index.tsx

@@ -95,11 +95,11 @@ export default function ProductTags() {
   };
 
   const handleAddNewTag = () => {
-    router.push('/product-tags/add');
+    router.push('/(drawer)/dashboard/product-tags/add');
   };
 
   const handleOrderTags = () => {
-    router.push('/product-tags/order');
+    router.push('/(drawer)/dashboard/product-tags/order');
   };
 
 

apps/admin-ui/app/(drawer)/dashboard/slots/index.tsx

@@ -72,7 +72,7 @@ const SlotItemComponent: React.FC<SlotItemProps> = ({
          </View>
          <View style={tw`flex-row items-center`}>
             <TouchableOpacity
-               onPress={() => router.push(`/slots/edit/${slot.id}` as any)}
+               onPress={() => router.push(`/(drawer)/dashboard/slots/edit/${slot.id}` as any)}
              style={tw`px-3 py-1 rounded-full bg-pink2 mr-2`}
             >
               <View style={tw`flex-row items-center`}>
@@ -147,7 +147,7 @@ const SlotItemComponent: React.FC<SlotItemProps> = ({
              <TouchableOpacity
                onPress={() => {
                  setMenuOpen(false);
-                 router.push(`/slots/add?baseslot=${slot.id}` as any);
+                 router.push(`/(drawer)/dashboard/slots/add?baseslot=${slot.id}` as any);
                }}
                style={tw`py-4 border-b border-gray-200`}
              >
@@ -277,7 +277,7 @@ export default function Slots() {
       <MyTouchableOpacity
         testID="add-slot-fab"
         accessibilityLabel="add-slot-fab"
-        onPress={() => router.push('/slots/add' as any)}
+        onPress={() => router.push('/(drawer)/dashboard/slots/add' as any)}
         activeOpacity={0.95}
         style={{ position: 'absolute', bottom: 32, right: 24, zIndex: 100 }}
       >

apps/admin-ui/app/(drawer)/dashboard/slots/slot-details.tsx

@@ -198,7 +198,7 @@ export default function SlotDetails() {
 
         {/* FAB for Edit Slot */}
         <MyTouchableOpacity
-          onPress={() => router.push(`/slots/edit/${slot.id}` as any)}
+          onPress={() => router.push(`/(drawer)/dashboard/slots/edit/${slot.id}` as any)}
           activeOpacity={0.95}
           style={{ position: 'absolute', bottom: 32, right: 24, zIndex: 100 }}
         >

apps/admin-ui/src/components/TagMenu.tsx

@@ -34,7 +34,7 @@ export const TagMenu: React.FC<TagMenuProps> = ({
 
   const handleEditTag = () => {
     setIsOpen(false);
-    router.push(`/product-tags/edit?tagId=${tagId}`);
+    router.push(`/(drawer)/dashboard/product-tags/edit?tagId=${tagId}`);
   };
 
   const handleDeleteTag = () => {

apps/backend/src/trpc/apis/admin-apis/apis/const.ts

@@ -2,9 +2,16 @@ import { router, protectedProcedure } from '@/src/trpc/trpc-index'
 import { z } from 'zod';
 import { computeConstants } from '@/src/lib/const-store'
 import { CONST_KEYS } from '@/src/lib/const-keys'
+import { scheduleStoreInitialization } from '@/src/stores/store-initializer'
 import { getAllConstants as getAllConstantsFromDb, upsertConstants as upsertConstantsInDb } from '@/src/dbService'
 import type { Constant, ConstantUpdateResult } from '@packages/shared'
 
+// Constants that are baked into the versioned cache files (products.json etc.)
+// — changing them requires regenerating the cache so the user app picks it up.
+const CACHE_AFFECTING_KEYS: string[] = [
+  CONST_KEYS.tagsOrder,
+]
+
 export const constRouter = router({
   getConstants: protectedProcedure
     .query(async (): Promise<Constant[]> => {
@@ -64,6 +71,13 @@ export const constRouter = router({
       // Refresh all constants in Redis after database update
       await computeConstants();
 
+      // Constants like tagsOrder are baked into the versioned cache files.
+      // Regenerate the cache (bumps cacheVersion) so the user app fetches the
+      // new data (e.g., the new tab order on the home page).
+      if (constants.some((c) => CACHE_AFFECTING_KEYS.includes(c.key))) {
+        await scheduleStoreInitialization()
+      }
+
       return {
         success: true,
         updatedCount: constants.length,

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

@@ -12,7 +12,7 @@ export default function HomeLayout() {
       }}
     >
       <Stack.Screen
-        name="product-detail/[id]"
+        name="product-detail"
         options={{
           headerShown: false,
           title: "Product Details",

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

@@ -1,7 +1,6 @@
-import React, { useState, useCallback, useMemo, memo } from "react";
+import React, { useState, useCallback, useMemo, memo, useRef, useEffect } from "react";
 import { View, Dimensions, Image, RefreshControl } from "react-native";
-import { TabView, TabBar } from "react-native-tab-view";
-import { LinearGradient } from "expo-linear-gradient";
+import { ScrollView } from "react-native-gesture-handler";
 import { useRouter } from "expo-router";
 import {
   theme,
@@ -37,14 +36,6 @@ const itemWidth = screenWidth * 0.45;
 const heroItemWidth = (screenWidth - 72) / 3;
 const gridItemWidth = (screenWidth - 48) / 2;
 
-// Hero product card geometry (used to size the tab scene heights)
-const heroCardImageHeight = heroItemWidth * 0.82;
-const heroCardTextBlock = 92;
-const heroCardHeight = heroCardImageHeight + heroCardTextBlock;
-const heroRowHeight = heroCardHeight + 12; // + mb-3
-const TAG_GRID_COLUMNS = 3;
-const TAB_BAR_HEIGHT = 48;
-
 const formatTimeRange = (deliveryTime: string) => {
   const time = dayjs(deliveryTime);
   const endTime = time.add(1, 'hour');
@@ -195,22 +186,21 @@ const SlotCard = memo(({ slot }: SlotCardProps) => {
   );
 });
 
-interface TagTabViewProps {
+interface TagTabStripProps {
   dashboardTags: any[];
   activeTagId: number | null;
-  productsByTagId: Record<number, any[]>;
   onSelectTag: (id: number) => void;
-  onProductPress: (id: number) => void;
 }
 
-const TagTabView = memo(({
+// Fixed, horizontally scrollable tab strip (plain ScrollView — no nesting,
+// so it scrolls reliably on Android). Sits OUTSIDE the vertical FlatList.
+const TagTabStrip = memo(({
   dashboardTags,
   activeTagId,
-  productsByTagId,
   onSelectTag,
-  onProductPress,
-}: TagTabViewProps) => {
-  const [expandedByTagId, setExpandedByTagId] = useState<Record<number, boolean>>({});
+}: TagTabStripProps) => {
+  const scrollRef = useRef<any>(null);
+  const positions = useRef<number[]>([]);
 
   const routes = useMemo(
     () => dashboardTags.map((tag) => ({ key: String(tag.id), title: tag.tagName })),
@@ -222,82 +212,116 @@ const TagTabView = memo(({
     return idx < 0 ? 0 : idx;
   }, [dashboardTags, activeTagId]);
 
-  // Height: fit the active tag's visible product rows (default 6 per tag),
-  // plus room for the "Show More" button when it has more products.
-  const activeTagKey = routes[index]?.key;
-  const sceneHeight = useMemo(() => {
-    const tagId = Number(activeTagKey);
-    const count = (productsByTagId[tagId]?.length) || 0;
-    const expanded = expandedByTagId[tagId];
-    const visible = expanded ? count : Math.min(count, 6);
-    const rows = Math.max(1, Math.ceil(visible / TAG_GRID_COLUMNS));
-    const showMore = count > 6 && !expanded;
-    return rows * heroRowHeight + 24 + (showMore ? 52 : 0);
-  }, [activeTagKey, productsByTagId, expandedByTagId]);
-
-  const renderTabBar = useCallback((props: any) => (
-    <TabBar
-      {...props}
-      scrollEnabled
-      activeColor={theme.colors.brand600}
-      inactiveColor="#64748B"
-      indicatorStyle={{
-        backgroundColor: theme.colors.brand500,
-        height: 4,
-        borderRadius: 999,
-      }}
-      labelStyle={tw`text-sm font-bold`}
-      style={tw`bg-transparent`}
-      tabStyle={{ width: 'auto', paddingHorizontal: 8, minWidth: 0 }}
-      indicatorContainerStyle={tw`mb-1`}
-    />
-  ), []);
-
-  const renderScene = useCallback(({ route }: any) => {
-    const tagId = Number(route.key);
-    const products = productsByTagId[tagId] || [];
-    const expanded = !!expandedByTagId[tagId];
-    const visible = expanded ? products : products.slice(0, 6);
-    const hasMore = products.length > 6 && !expanded;
-
-    return (
-      <View style={tw`mt-3`}>
-        {products.length > 0 ? (
-          <View style={tw`flex-row flex-wrap justify-between`}>
-            {visible.map((product: any) => (
-              <ExploreProductItem key={product.id} item={product} onPress={onProductPress} />
-            ))}
-          </View>
-        ) : (
-          <View style={tw`py-6 items-center`}>
-            <MyText style={tw`text-sm text-gray-500 font-medium`}>
-              No products in this category yet
-            </MyText>
-          </View>
-        )}
-        {hasMore && (
-          <MyTouchableOpacity
-            style={tw`self-center mt-1 mb-2 px-5 py-2.5 rounded-full bg-brand500 shadow-sm`}
-            activeOpacity={0.85}
-            onPress={() => setExpandedByTagId((prev) => ({ ...prev, [tagId]: true }))}
-          >
-            <MyText style={tw`text-white text-sm font-semibold`}>Show More</MyText>
-          </MyTouchableOpacity>
-        )}
-      </View>
-    );
-  }, [productsByTagId, expandedByTagId, onProductPress]);
+  useEffect(() => {
+    const x = positions.current[index];
+    if (x != null) {
+      scrollRef.current?.scrollTo({ x: Math.max(0, x - 16), animated: true });
+    }
+  }, [index]);
 
   return (
-    <TabView
-      navigationState={{ index, routes }}
-      onIndexChange={(i) => onSelectTag(Number(routes[i].key))}
-      renderTabBar={renderTabBar}
-      renderScene={renderScene}
-      swipeEnabled
-      lazy
-      style={{ height: TAB_BAR_HEIGHT + sceneHeight }}
-    />
+    <ScrollView
+      ref={scrollRef}
+      horizontal
+      showsHorizontalScrollIndicator={false}
+      // horizontal ScrollViews default to flexGrow: 1 — pin it to content height
+      // so it doesn't eat the page space below the tabs
+      style={[tw`bg-transparent`, { flexGrow: 0, height: 48 }]}
+      contentContainerStyle={tw`px-2 items-center`}
+    >
+      {routes.map((route, i) => {
+        const isActive = i === index;
+        return (
+          <MyTouchableOpacity
+            key={route.key}
+            onLayout={(e: any) => {
+              positions.current[i] = e.nativeEvent.layout.x;
+            }}
+            onPress={() => onSelectTag(Number(route.key))}
+            style={tw`h-12 px-3 justify-center`}
+            activeOpacity={0.7}
+          >
+            <View style={tw`items-center justify-center`}>
+              <MyText
+                style={[
+                  tw`text-sm font-bold`,
+                  isActive
+                    ? { color: theme.colors.brand600 }
+                    : { color: '#64748B' },
+                ]}
+              >
+                {route.title}
+              </MyText>
+              <View
+                style={[
+                  tw`h-1 rounded-full mt-1 self-stretch`,
+                  {
+                    backgroundColor: isActive
+                      ? theme.colors.brand500
+                      : 'transparent',
+                  },
+                ]}
+              />
+            </View>
+          </MyTouchableOpacity>
+        );
+      })}
+    </ScrollView>
+  );
+});
+
+interface TagSceneProps {
+  dashboardTags: any[];
+  activeTagId: number | null;
+  productsByTagId: Record<number, any[]>;
+  expandedByTagId: Record<number, boolean>;
+  onToggleExpand: (tagId: number) => void;
+  onProductPress: (id: number) => void;
+}
+
+// Active tag's products grid — rendered inside the vertical FlatList so it
+// scrolls with the page.
+const TagScene = memo(({
+  dashboardTags,
+  activeTagId,
+  productsByTagId,
+  expandedByTagId,
+  onToggleExpand,
+  onProductPress,
+}: TagSceneProps) => {
+  const tagId = activeTagId ?? dashboardTags[0]?.id ?? null;
+  if (tagId == null) return null;
+
+  const products = productsByTagId[tagId] || [];
+  const expanded = !!expandedByTagId[tagId];
+  const visible = expanded ? products : products.slice(0, 6);
+  const hasMore = products.length > 6 && !expanded;
+
+  return (
+    <View style={tw`mt-3`}>
+      {products.length > 0 ? (
+        <View style={tw`flex-row flex-wrap justify-between`}>
+          {visible.map((product: any) => (
+            <ExploreProductItem key={product.id} item={product} onPress={onProductPress} />
+          ))}
+        </View>
+      ) : (
+        <View style={tw`py-6 items-center`}>
+          <MyText style={tw`text-sm text-gray-500 font-medium`}>
+            No products in this category yet
+          </MyText>
+        </View>
+      )}
+      {hasMore && (
+        <MyTouchableOpacity
+          style={tw`self-center mt-1 mb-2 px-5 py-2.5 rounded-full bg-brand500 shadow-sm`}
+          activeOpacity={0.85}
+          onPress={() => onToggleExpand(tagId)}
+        >
+          <MyText style={tw`text-white text-sm font-semibold`}>Show More</MyText>
+        </MyTouchableOpacity>
+      )}
+    </View>
   );
 });
 
@@ -354,72 +378,58 @@ const ProductItem = memo(({ item, onPress }: ProductItemProps) => {
 });
 
 interface ListHeaderProps {
-  gradientHeight: number;
-  onGradientLayout: (height: number) => void;
-  storesData: any;
-  sortedSlots: any[];
-  onProductPress: (id: number) => void;
   dashboardTags: any[];
   activeTagId: number | null;
   productsByTagId: Record<number, any[]>;
+  expandedByTagId: Record<number, boolean>;
+  onToggleExpand: (tagId: number) => void;
+  onProductPress: (id: number) => void;
   onSelectTag: (id: number) => void;
+  storesData: any;
+  sortedSlots: any[];
 }
 
 const ListHeader = memo(({
-  gradientHeight,
-  onGradientLayout,
-  storesData,
-  sortedSlots,
-  onProductPress,
   dashboardTags,
   activeTagId,
   productsByTagId,
+  expandedByTagId,
+  onToggleExpand,
+  onProductPress,
   onSelectTag,
+  storesData,
+  sortedSlots,
 }: ListHeaderProps) => {
-  const handleLayout = useCallback((event: any) => {
-    const { y, height } = event.nativeEvent.layout;
-    onGradientLayout(y + height);
-  }, [onGradientLayout]);
-
   const renderSlotItem = useCallback(({ item }: { item: any }) => (
     <SlotItem item={item} />
   ), []);
 
-  const gradientStyle = useMemo(() => [
-    tw`absolute left-0 right-0 shadow-lg`,
-    { height: gradientHeight + 32, zIndex: -1 }
-  ], [gradientHeight]);
-  const activeColor = activeTagId == null ? null : getTagColor(activeTagId);
-  const pageTint = activeColor?.pageBg ?? '#FFFFFF';
-
   return (
     <>
-      <View onLayout={handleLayout} style={{ backgroundColor: '#FFFFFF' }}>
-        <LinearGradient
-          colors={['#FFFFFF', '#FFFFFF']}
-          start={{ x: 0, y: 0 }}
-          end={{ x: 0, y: 1 }}
-          style={gradientStyle}
+      {dashboardTags.length > 0 && (
+        <TagTabStrip
+          dashboardTags={dashboardTags}
+          activeTagId={activeTagId}
+          onSelectTag={onSelectTag}
         />
-
-        {dashboardTags.length > 0 && (
-          <View
-            style={[
-              tw`mx-4 mb-2 rounded-[28px] px-3 pt-3 pb-[30px]`,
-              { backgroundColor: theme.colors.brand25 },
-            ]}
-          >
-            <TagTabView
-              dashboardTags={dashboardTags}
-              activeTagId={activeTagId}
-              productsByTagId={productsByTagId}
-              onSelectTag={onSelectTag}
-              onProductPress={onProductPress}
-            />
-          </View>
-        )}
-      </View>
-
+      )}
+      {dashboardTags.length > 0 && (
+        <View
+          style={[
+            tw`mx-4 mt-1 rounded-[28px] px-3 pt-3 pb-4`,
+            { backgroundColor: theme.colors.brand25 },
+          ]}
+        >
+          <TagScene
+            dashboardTags={dashboardTags}
+            activeTagId={activeTagId}
+            productsByTagId={productsByTagId}
+            expandedByTagId={expandedByTagId}
+            onToggleExpand={onToggleExpand}
+            onProductPress={onProductPress}
+          />
+        </View>
+      )}
       <View
         style={[
           tw`rounded-t-3xl px-4`,
@@ -498,7 +508,6 @@ export default function Dashboard() {
   const userDetails = useUserDetails();
   const [inputQuery, setInputQuery] = useState("");
   const [isLoadingDialogOpen, setIsLoadingDialogOpen] = useState(false);
-  const [gradientHeight, setGradientHeight] = useState(0);
   const [displayedProducts, setDisplayedProducts] = useState<any[]>([]);
   const [visibleCount, setVisibleCount] = useState(21);
   const [hasMore, setHasMore] = useState(true);
@@ -524,6 +533,10 @@ export default function Dashboard() {
 
   const [selectedTagId, setSelectedTagId] = useState<number | null>(null);
   const activeTagId = selectedTagId ?? dashboardTags[0]?.id ?? null;
+  const [expandedByTagId, setExpandedByTagId] = useState<Record<number, boolean>>({});
+  const handleToggleExpand = useCallback((tagId: number) => {
+    setExpandedByTagId((prev) => ({ ...prev, [tagId]: true }));
+  }, []);
 
 
   React.useEffect(() => {
@@ -580,35 +593,14 @@ export default function Dashboard() {
         productById.set(product.id, product);
       }
 
-      // tag.productIds is already in the admin-curated order (backend sorts by sortOrder).
-      const orderedIds = (tag.productIds || []).filter((id: number) => productById.has(id));
-      const ordered: any[] = [];
-      const rest: any[] = [];
-      for (const id of orderedIds) {
-        const product = productById.get(id);
-        const isOutOfStock = Boolean(productSlotsMap[id]?.isOutOfStock) || !getQuickestSlot(id);
-        if (isOutOfStock) rest.push(product);
-        else ordered.push(product);
-      }
-
-      // Products in the tag's productIds but not in the curated order (added later) — availability sort.
-      const seen = new Set(orderedIds);
-      const extra = products
-        .filter((product: any) => (tag.productIds?.includes(product.id) ?? false) && !seen.has(product.id))
-        .sort((a: any, b: any) => {
-          const slotA = getQuickestSlot(a.id)
-          const slotB = getQuickestSlot(b.id)
-          const aOutOfStock = Boolean(productSlotsMap[a.id]?.isOutOfStock) || !slotA
-          const bOutOfStock = Boolean(productSlotsMap[b.id]?.isOutOfStock) || !slotB
-          if (aOutOfStock && !bOutOfStock) return 1
-          if (!aOutOfStock && bOutOfStock) return -1
-          return 0
-        });
-
-      map[tag.id] = [...ordered, ...rest, ...extra];
+      // Respect the admin-curated order — tag.productIds is already ordered by
+      // the tag's sortOrder (backend reorders it when building the cache).
+      map[tag.id] = (tag.productIds || [])
+        .map((id: number) => productById.get(id))
+        .filter(Boolean) as any[];
     }
     return map;
-  }, [dashboardTags, products, getQuickestSlot, productSlotsMap]);
+  }, [dashboardTags, products]);
 
   const handleRefresh = useCallback(async () => {
     setIsRefreshing(true);
@@ -642,10 +634,6 @@ export default function Dashboard() {
     router.push(`/(drawer)/(tabs)/home/product-detail/${id}`);
   }, [router]);
 
-  const handleGradientLayout = useCallback((height: number) => {
-    setGradientHeight(height);
-  }, []);
-
   const handleSearchPress = useCallback(() => {
     router.push("/(drawer)/(tabs)/home/search-results");
   }, [router]);
@@ -657,17 +645,17 @@ export default function Dashboard() {
 
   const listHeader = useMemo(() => (
     <ListHeader
-      gradientHeight={gradientHeight}
-      onGradientLayout={handleGradientLayout}
-      storesData={storesData}
-      sortedSlots={sortedSlots}
-      onProductPress={handleProductPress}
       dashboardTags={dashboardTags}
       activeTagId={activeTagId}
       productsByTagId={productsByTagId}
+      expandedByTagId={expandedByTagId}
+      onToggleExpand={handleToggleExpand}
+      onProductPress={handleProductPress}
       onSelectTag={setSelectedTagId}
+      storesData={storesData}
+      sortedSlots={sortedSlots}
     />
-  ), [gradientHeight, handleGradientLayout, storesData, sortedSlots, handleProductPress, dashboardTags, activeTagId, productsByTagId]);
+  ), [dashboardTags, activeTagId, productsByTagId, expandedByTagId, handleToggleExpand, handleProductPress, storesData, sortedSlots]);
 
   const pageTint = activeTagId == null ? '#FFFFFF' : getTagColor(activeTagId).pageBg;
   const pageTintStyle = useMemo(() => [
@@ -762,7 +750,9 @@ export default function Dashboard() {
               <MyText style={tw`text-gray-500`}>No products available</MyText>
             </View>
           }
-          removeClippedSubviews={true}
+          // NOTE: do not add removeClippedSubviews here - it breaks touch
+          // delivery to the nested horizontal scrollables in ListHeaderComponent
+          // (tag tabs / slots) on Android.
           maxToRenderPerBatch={10}
           windowSize={5}
           initialNumToRender={10}

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

@@ -1,14 +1,13 @@
-import React from "react";
+import React, { useState } from "react";
 import { View, Dimensions, ScrollView } from "react-native";
-import { LinearGradient } from "expo-linear-gradient";
 import { useRouter } from "expo-router";
 import {
   tw,
   useManualRefresh,
   useMarkDataFetchers,
   AppContainer,
-  MyFlatList,
   MyText,
+  MyTouchableOpacity,
 } from "common-ui";
 import MaterialIcons from "@expo/vector-icons/MaterialIcons";
 import ProductCard from "@/components/ProductCard";
@@ -17,34 +16,35 @@ import FloatingCartBar from "@/components/floating-cart-bar";
 import TabLayoutWrapper from "@/components/TabLayoutWrapper";
 
 const { width: screenWidth } = Dimensions.get("window");
-const itemWidth = screenWidth * 0.45;
+// Same 3-column hero card sizing used on the home page.
+const heroItemWidth = (screenWidth - 72) / 3;
+const SHOW_MORE_STEP = 6;
 
-const rowListContent = { paddingBottom: 16, paddingHorizontal: 16 };
-
-interface OffersRowProps {
+interface OffersSectionProps {
   title: string;
   subtitle: string;
   products: any[];
+  expanded: boolean;
+  onExpand: () => void;
   onProductPress: (id: number) => void;
 }
 
-const OffersRow = ({ title, subtitle, products, onProductPress }: OffersRowProps) => {
-  const renderItem = ({ item }: { item: any }) => (
-    <View style={tw`mr-4`}>
-      <ProductCard
-        item={item}
-        itemWidth={itemWidth}
-        onPress={() => onProductPress(item.id)}
-        showDeliveryInfo={false}
-        useAddToCartDialog={true}
-        miniView={true}
-      />
-    </View>
-  );
+// Grid section (home page style): shows the first SHOW_MORE_STEP products
+// with a "Show More" button to reveal the rest.
+const OffersSection = ({
+  title,
+  subtitle,
+  products,
+  expanded,
+  onExpand,
+  onProductPress,
+}: OffersSectionProps) => {
+  const visible = expanded ? products : products.slice(0, SHOW_MORE_STEP);
+  const hasMore = products.length > SHOW_MORE_STEP && !expanded;
 
   return (
-    <View style={tw`bg-white`}>
-      <View style={tw`mb-2 pt-4 px-4`}>
+    <View style={tw`pt-4`}>
+      <View style={tw`mb-2 px-4`}>
         <MyText style={tw`text-2xl font-extrabold text-gray-900 tracking-tight`}>
           {title}
         </MyText>
@@ -61,24 +61,32 @@ const OffersRow = ({ title, subtitle, products, onProductPress }: OffersRowProps
           </MyText>
         </View>
       ) : (
-        <View style={tw`relative`}>
-          <MyFlatList
-            data={products}
-            keyExtractor={(item) => item.id.toString()}
-            horizontal
-            showsHorizontalScrollIndicator={false}
-            contentContainerStyle={rowListContent}
-            renderItem={renderItem}
-            removeClippedSubviews={true}
-          />
-          <LinearGradient
-            colors={["transparent", "rgba(0,0,0,0.08)"]}
-            start={{ x: 0, y: 0.5 }}
-            end={{ x: 1, y: 0.5 }}
-            style={tw`absolute right-4 top-0 bottom-4 w-12 rounded-l-xl`}
-            pointerEvents="none"
-          />
-        </View>
+        <>
+          <View style={tw`flex-row flex-wrap justify-between px-4`}>
+            {visible.map((item: any) => (
+              <View key={item.id} style={tw`mb-3`}>
+                <ProductCard
+                  item={item}
+                  itemWidth={heroItemWidth}
+                  onPress={() => onProductPress(item.id)}
+                  showDeliveryInfo={false}
+                  useAddToCartDialog={true}
+                  miniView={true}
+                  variant="hero"
+                />
+              </View>
+            ))}
+          </View>
+          {hasMore && (
+            <MyTouchableOpacity
+              style={tw`self-center mt-1 mb-2 px-5 py-2.5 rounded-full bg-brand500 shadow-sm`}
+              activeOpacity={0.85}
+              onPress={onExpand}
+            >
+              <MyText style={tw`text-white text-sm font-semibold`}>Show More</MyText>
+            </MyTouchableOpacity>
+          )}
+        </>
       )}
     </View>
   );
@@ -86,6 +94,8 @@ const OffersRow = ({ title, subtitle, products, onProductPress }: OffersRowProps
 
 export default function Offers() {
   const router = useRouter();
+  const [expandedOffers, setExpandedOffers] = useState(false);
+  const [expandedCombos, setExpandedCombos] = useState(false);
 
   const { data, isLoading, error, refetch } =
     trpc.user.product.getOffersPage.useQuery();
@@ -135,17 +145,21 @@ export default function Offers() {
   return (
     <TabLayoutWrapper>
       <ScrollView style={tw`flex-1`} contentContainerStyle={tw`pb-20`}>
-        <OffersRow
-          title="Combos"
-          subtitle="Bundle your favorites and save"
-          products={combos}
-          onProductPress={handleProductPress}
-        />
-
-        <OffersRow
+        <OffersSection
           title="Offers"
           subtitle="Great prices on select items"
           products={offers}
+          expanded={expandedOffers}
+          onExpand={() => setExpandedOffers(true)}
+          onProductPress={handleProductPress}
+        />
+
+        <OffersSection
+          title="Combos"
+          subtitle="Bundle your favorites and save"
+          products={combos}
+          expanded={expandedCombos}
+          onExpand={() => setExpandedCombos(true)}
           onProductPress={handleProductPress}
         />
       </ScrollView>

apps/user-ui/app/_layout.tsx

@@ -28,6 +28,7 @@ import WebViewWrapper from "@/components/WebViewWrapper";
 import BackHandlerWrapper from "@/components/BackHandler";
 import AddToCartDialog from "@/src/components/AddToCartDialog";
 import React from "react";
+import { GestureHandlerRootView } from "react-native-gesture-handler";
 import NotifChecker from "@/services/notif-service/notif-checker";
 
 export default function RootLayout() {
@@ -47,9 +48,10 @@ export default function RootLayout() {
   }
 
   return (
-    <ThemeProvider value={colorScheme === "dark" ? DarkTheme : DefaultTheme}>
-      <MyStatusBar />
-      <SafeAreaProvider>
+    <GestureHandlerRootView style={{ flex: 1 }}>
+      <ThemeProvider value={colorScheme === "dark" ? DarkTheme : DefaultTheme}>
+        <MyStatusBar />
+        <SafeAreaProvider>
       <SafeAreaView
         edges={['bottom', 'left', 'right']}
         style={{ flex: 1, paddingTop: 0 }}
@@ -90,5 +92,6 @@ export default function RootLayout() {
       </SafeAreaProvider>
       <Toast />
     </ThemeProvider>
+    </GestureHandlerRootView>
   );
 }

apps/user-ui/src/hooks/prominent-api-hooks.ts

@@ -6,82 +6,52 @@ import { AllProductsApiType, StoresApiType, SlotsApiType, EssentialConstsApiType
 import { CACHE_FILENAMES } from "@packages/shared";
 import { StorageServiceCasual } from 'common-ui';
 
-// Local useGetEssentialConsts hook
+// The only persisted payload: the small essential-consts config object
+// (assetsDomain, cache versions, etc.). The big data payloads (products,
+// stores, slots, availability, banners) are fetched fresh each session and
+// kept in memory by react-query — they are NOT written to storage.
+const ESSENTIAL_CONSTS_KEY = 'essential_consts'
+
 export const useGetEssentialConsts = () => {
-  const query = trpc.common.essentialConsts.useQuery(undefined, {
-    refetchInterval: 60000,
-  })
-  return { ...query, refetch: query.refetch }
-}
-
-// ---------------------------------------------------------------------------
-// Persisted cache helpers — store fetched JSON keyed by its versioned URL.
-// Only refetch + repersist when the version (URL) changes.
-// ---------------------------------------------------------------------------
-
-interface PersistedCache<T> {
-  version: string
-  data: T
-}
-
-const CACHE_STORAGE_KEYS = {
-  products: 'cache_products',
-  stores: 'cache_stores',
-  slots: 'cache_slots',
-  banners: 'cache_banners',
-  availability: 'cache_availability',
-  storeProducts: (storeId: number) => `cache_store_${storeId}`,
-} as const
-
-async function readPersistedCache<T>(key: string): Promise<PersistedCache<T> | null> {
-  const raw = await StorageServiceCasual.getItem(key)
-  if (!raw) return null
-  try {
-    return JSON.parse(raw) as PersistedCache<T>
-  } catch {
-    return null
-  }
-}
-
-async function writePersistedCache<T>(key: string, version: string, data: T): Promise<void> {
-  await StorageServiceCasual.setItem(key, JSON.stringify({ version, data }))
-}
-
-/**
- * Loads the persisted cache for `storageKey` and reports whether its version
- * matches the current `version`. Returns { initialData, isReady }.
- * - version matches → serve persisted data, no network refetch needed.
- * - version differs → signal to refetch (caller's query fetches + repersists).
- */
-function usePersistedCache<T>(storageKey: string, version: string | null) {
-  const [initialData, setInitialData] = useState<T | undefined>(undefined)
+  const [initialData, setInitialData] = useState<EssentialConstsApiType | undefined>(undefined)
   const [isReady, setIsReady] = useState(false)
 
+  // Load the last persisted response so config is available immediately.
   useEffect(() => {
     let cancelled = false
-    setIsReady(false)
-    setInitialData(undefined)
-    if (!version) {
-      setIsReady(true)
-      return
-    }
-    readPersistedCache<T>(storageKey).then((persisted) => {
+    StorageServiceCasual.getItem(ESSENTIAL_CONSTS_KEY).then((raw) => {
       if (cancelled) return
-      if (persisted && persisted.version === version) {
-        setInitialData(persisted.data)
+      if (raw) {
+        try {
+          setInitialData(JSON.parse(raw))
+        } catch {
+          // ignore corrupt cache
+        }
       }
       setIsReady(true)
     })
     return () => { cancelled = true }
-  }, [storageKey, version])
+  }, [])
 
-  return { initialData, isReady }
+  const query = trpc.common.essentialConsts.useQuery(undefined, {
+    refetchInterval: 60000,
+    enabled: isReady,
+    placeholderData: initialData,
+  })
+
+  // Persist the latest response.
+  useEffect(() => {
+    if (query.data) {
+      StorageServiceCasual.setItem(ESSENTIAL_CONSTS_KEY, JSON.stringify(query.data))
+    }
+  }, [query.data])
+
+  return { ...query, refetch: query.refetch }
 }
 
 type ProductsResponse = AllProductsApiType;
 type StoresResponse = StoresApiType;
 type SlotsResponse = SlotsApiType;
-type EssentialConstsResponse = EssentialConstsApiType;
 type BannersResponse = BannersApiType;
 type StoreWithProductsResponse = StoreWithProductsApiType;
 type AvailabilityResponse = AvailabilityApiType;
@@ -142,7 +112,6 @@ export function useAllProducts() {
   const cacheUrl = useCacheUrl(CACHE_FILENAMES.products)
   const { data: availabilityData } = useAvailability()
   const version = cacheUrl ?? ''
-  const { initialData, isReady } = usePersistedCache<ProductsResponse>(CACHE_STORAGE_KEYS.products, version)
 
   const productsQuery = useQuery<ProductsResponse>({
     queryKey: ['all-products', version],
@@ -151,12 +120,10 @@ export function useAllProducts() {
         throw new Error('Cache URL not available')
       }
       const response = await axios.get<ProductsResponse>(cacheUrl)
-      await writePersistedCache(CACHE_STORAGE_KEYS.products, version, response.data)
       return response.data
     },
     staleTime: 60000, // 1 minute
-    enabled: !!cacheUrl && isReady,
-    placeholderData: initialData,
+    enabled: !!cacheUrl,
   })
 
   const mergedProducts = React.useMemo(() => {
@@ -197,7 +164,6 @@ export function useAllProducts() {
 export function useAvailability() {
   const cacheUrl = useAvailabilityCacheUrl()
   const version = cacheUrl ?? ''
-  const { initialData, isReady } = usePersistedCache<AvailabilityResponse>(CACHE_STORAGE_KEYS.availability, version)
 
   return useQuery<AvailabilityResponse>({
     queryKey: ['availability', version],
@@ -206,19 +172,16 @@ export function useAvailability() {
         throw new Error('Cache URL not available')
       }
       const response = await axios.get<AvailabilityResponse>(cacheUrl)
-      await writePersistedCache(CACHE_STORAGE_KEYS.availability, version, response.data)
       return response.data
     },
     staleTime: 60000, // 1 minute
-    enabled: !!cacheUrl && isReady,
-    placeholderData: initialData,
+    enabled: !!cacheUrl,
   })
 }
 
 export function useStores() {
   const cacheUrl = useCacheUrl(CACHE_FILENAMES.stores)
   const version = cacheUrl ?? ''
-  const { initialData, isReady } = usePersistedCache<StoresResponse>(CACHE_STORAGE_KEYS.stores, version)
 
   return useQuery<StoresResponse>({
     queryKey: ['stores', version],
@@ -227,19 +190,16 @@ export function useStores() {
         throw new Error('Cache URL not available')
       }
       const response = await axios.get<StoresResponse>(cacheUrl)
-      await writePersistedCache(CACHE_STORAGE_KEYS.stores, version, response.data)
       return response.data
     },
     staleTime: 60000, // 1 minute
-    enabled: !!cacheUrl && isReady,
-    placeholderData: initialData,
+    enabled: !!cacheUrl,
   })
 }
 
 export function useSlots() {
   const cacheUrl = useSlotsCacheUrl()
   const version = cacheUrl ?? ''
-  const { initialData, isReady } = usePersistedCache<SlotsResponse>(CACHE_STORAGE_KEYS.slots, version)
 
   return useQuery<SlotsResponse>({
     queryKey: ['slots', version],
@@ -247,36 +207,29 @@ export function useSlots() {
       if (!cacheUrl) {
         throw new Error('Cache URL not available')
       }
-      const response = await axios.get<SlotsResponse>(cacheUrl+'?v=123')
-      await writePersistedCache(CACHE_STORAGE_KEYS.slots, version, response.data)
+      const response = await axios.get<SlotsResponse>(cacheUrl + '?v=123')
       return response.data
     },
     staleTime: 60000, // 1 minute
-    enabled: !!cacheUrl && isReady,
-    placeholderData: initialData,
+    enabled: !!cacheUrl,
   })
 }
 
 export function useBanners() {
   const cacheUrl = useCacheUrl(CACHE_FILENAMES.banners)
   const version = cacheUrl ?? ''
-  const { initialData, isReady } = usePersistedCache<BannersResponse>(CACHE_STORAGE_KEYS.banners, version)
 
   return useQuery<BannersResponse>({
     queryKey: ['banners', version],
     queryFn: async () => {
-    
-        if (!cacheUrl) {
-          throw new Error('Cache URL not available')
-        }
-        const response = await axios.get<BannersResponse>(cacheUrl)
-        await writePersistedCache(CACHE_STORAGE_KEYS.banners, version, response.data)
-        return response.data
-      
+      if (!cacheUrl) {
+        throw new Error('Cache URL not available')
+      }
+      const response = await axios.get<BannersResponse>(cacheUrl)
+      return response.data
     },
     staleTime: 60000, // 1 minute
-    enabled: !!cacheUrl && isReady,
-    placeholderData: initialData,
+    enabled: !!cacheUrl,
   })
 }
 
@@ -291,7 +244,6 @@ export function useStoreWithProducts(storeId: number) {
     ? `${assetsDomain}${apiCacheKey}/v-${cacheVersion}/stores/${storeId}.json`
     : null
   const version = cacheUrl ?? ''
-  const { initialData, isReady } = usePersistedCache<StoreWithProductsResponse>(CACHE_STORAGE_KEYS.storeProducts(storeId), version)
 
   return useQuery<StoreWithProductsResponse>({
     queryKey: ['store-with-products', storeId, version],
@@ -300,11 +252,9 @@ export function useStoreWithProducts(storeId: number) {
         throw new Error('Cache URL not available')
       }
       const response = await axios.get<StoreWithProductsResponse>(cacheUrl)
-      await writePersistedCache(CACHE_STORAGE_KEYS.storeProducts(storeId), version, response.data)
       return response.data
     },
     staleTime: 60000, // 1 minute
-    enabled: !!cacheUrl && isReady,
-    placeholderData: initialData,
+    enabled: !!cacheUrl,
   })
 }