enh

apps/user-ui/app/(drawer)/(tabs)/me/my-orders/index.tsx

@@ -98,6 +98,7 @@ interface OrderItemProps {
   onRetryPayment: (orderId: number) => void;
   onViewMoreItems: (orderId: number) => void;
   isPaymentPending: boolean;
+  refetch: () => void;
 }
 
 const OrderItem: React.FC<OrderItemProps> = ({
@@ -108,7 +109,8 @@ const OrderItem: React.FC<OrderItemProps> = ({
   onPress,
   onRetryPayment,
   onViewMoreItems,
-  isPaymentPending
+  isPaymentPending,
+  refetch
 }) => {
   const mainStatus = getStatusColor(item.orderStatus);
   const deliveryStatus = getStatusColor(item.deliveryStatus);
@@ -165,12 +167,16 @@ const OrderItem: React.FC<OrderItemProps> = ({
                    <MyText style={[tw`text-[10px] font-bold uppercase`, item.isFlashDelivery ? tw`text-amber-700` : tw`text-brand700`]}>
                      {item.isFlashDelivery ? "Flash Delivery" : "Delivery Time"}
                    </MyText>
-                   <MyText style={[tw`text-sm font-extrabold`, item.isFlashDelivery ? tw`text-amber-900` : tw`text-brand900`]}>
+                    <MyText style={[tw`text-sm font-extrabold`, item.isFlashDelivery ? tw`text-amber-900` : tw`text-brand900`]}>
-                     {item.isFlashDelivery
+                      {item.isFlashDelivery
-                       ? dayjs(item.createdAt || item.orderDate).add(30, 'minutes').format("DD MMM, hh:mm A")
+                        ? dayjs(item.createdAt || item.orderDate).add(30, 'minutes').format("DD MMM, hh:mm A")
-                       : dayjs(item.deliveryDate).format("DD MMM, hh:mm A")
+                        : (() => {
-                     }
+                            const startTime = dayjs(item.deliveryDate);
-                   </MyText>
+                            const endTime = startTime.add(1, 'hour');
+                            return `${startTime.format("DD MMM, hh:mm A")} - ${endTime.format("hh:mm A")}`;
+                          })()
+                      }
+                    </MyText>
                    {item.isFlashDelivery && (
                      <View style={tw`flex-row items-center mt-1`}>
                        <MyText style={tw`text-[9px] font-bold text-amber-600 uppercase`}>⚡ 30-Min Delivery</MyText>
@@ -194,10 +200,8 @@ const OrderItem: React.FC<OrderItemProps> = ({
           </View>
 
           <OrderMenu
-            orderId={item.id.toString()}
+            orderId={item.id}
-            postActionHandler={() => {
+            postActionHandler={refetch}
-              // refetch will be handled by parent
-            }}
           />
         </View>
 
@@ -628,6 +632,7 @@ export default function MyOrders() {
               onRetryPayment={handleRetryPayment}
               onViewMoreItems={(orderId) => router.push(`/(drawer)/(tabs)/me/my-orders/${orderId}`)}
               isPaymentPending={createRazorpayOrderMutation.isPending}
+              refetch={refetch}
             />
           )}
           keyExtractor={(item) => item.orderId}

apps/user-ui/components/ComplaintForm.tsx

@@ -10,7 +10,7 @@ import axios from '../services/axios-user-ui';
 interface ComplaintFormProps {
   open: boolean;
   onClose: () => void;
-  orderId: string;
+  orderId: number;
 }
 
 export default function ComplaintForm({ open, onClose, orderId }: ComplaintFormProps) {
@@ -21,7 +21,7 @@ export default function ComplaintForm({ open, onClose, orderId }: ComplaintFormP
   const raiseComplaintApi = async (payload: { complaintBody: string; images: { uri?: string }[] }) => {
     const formData = new FormData();
 
-    formData.append('orderId', orderId);
+    formData.append('orderId', orderId.toString());
     formData.append('complaintBody', payload.complaintBody);
 
     // Add images if provided

apps/user-ui/components/NextOrderGlimpse.tsx

@@ -140,7 +140,11 @@ export default function NextOrderGlimpse() {
           <MyText style={tw`text-xs font-medium text-amber-800`}>
             {nextOrder.isFlashDelivery
               ? "30-Min Delivery"
-              : dayjs(nextOrder.deliveryDate).format("DD MMM, hh:mm A")
+              : (() => {
+                  const startTime = dayjs(nextOrder.deliveryDate);
+                  const endTime = startTime.add(1, 'hour');
+                  return `${startTime.format("DD MMM, hh:mm A")} - ${endTime.format("hh:mm A")}`;
+                })()
             }
           </MyText>
         </View>

apps/user-ui/components/OrderMenu.tsx

@@ -4,13 +4,15 @@ import { MaterialIcons, Ionicons } from '@expo/vector-icons';
 import { tw, MyText, MyTouchableOpacity, BottomDialog } from 'common-ui';
 import { trpc } from '@/src/trpc-client';
 import ComplaintForm from '@/components/ComplaintForm';
+import { useRouter } from 'expo-router';
 
 interface OrderMenuProps {
-  orderId: string;
+  orderId: number;
   postActionHandler?: () => void;
 }
 
 const OrderMenu: React.FC<OrderMenuProps> = ({ orderId, postActionHandler }) => {
+  const router = useRouter();
   const [open, setOpen] = useState(false);
   const [editNotesDialogOpen, setEditNotesDialogOpen] = useState(false);
   const [editNotes, setEditNotes] = useState('');
@@ -34,7 +36,7 @@ const OrderMenu: React.FC<OrderMenuProps> = ({ orderId, postActionHandler }) =>
   const handleEditNotes = async () => {
     try {
       await updateNotesMutation.mutateAsync({
-        id: orderId,
+        id: orderId.toString(),
         userNotes: editNotes.trim()
       });
     } catch (error) {
@@ -84,6 +86,23 @@ const OrderMenu: React.FC<OrderMenuProps> = ({ orderId, postActionHandler }) =>
           </View>
 
           <View style={tw`space-y-3`}>
+            <MyTouchableOpacity
+              style={tw`flex-row items-center p-4 bg-white border border-gray-100 rounded-xl shadow-sm`}
+              onPress={() => {
+                setOpen(false);
+                router.push(`/(drawer)/(tabs)/me/my-orders/${orderId}`);
+              }}
+            >
+              <View style={tw`w-10 h-10 rounded-full bg-gray-50 items-center justify-center mr-4`}>
+                <MaterialIcons name="visibility" size={20} color="#4B5563" />
+              </View>
+              <View style={tw`flex-1`}>
+                <MyText style={tw`text-gray-900 font-semibold text-base`}>View Details</MyText>
+                <MyText style={tw`text-gray-500 text-xs`}>View complete order information</MyText>
+              </View>
+              <MaterialIcons name="chevron-right" size={24} color="#9CA3AF" />
+            </MyTouchableOpacity>
+
             <MyTouchableOpacity
               style={tw`flex-row items-center p-4 bg-white border border-gray-100 rounded-xl shadow-sm`}
               onPress={() => {
@@ -117,7 +136,10 @@ const OrderMenu: React.FC<OrderMenuProps> = ({ orderId, postActionHandler }) =>
 
             <MyTouchableOpacity
               style={tw`flex-row items-center p-4 bg-white border border-gray-100 rounded-xl shadow-sm`}
-              onPress={() => setCancelDialogOpen(true)}
+              onPress={() => {
+                setOpen(false);
+                setTimeout(() => setCancelDialogOpen(true), 300);
+              }}
             >
               <View style={tw`w-10 h-10 rounded-full bg-red-50 items-center justify-center mr-4`}>
                 <MaterialIcons name="cancel" size={20} color="#DC2626" />

packages/ui/src/components/quantifier.tsx

@@ -39,11 +39,12 @@ const Quantifier: React.FC<QuantifierProps> = ({
         <Text style={tw`text-center text-gray-900 font-bold text-base`}>
           {value}
         </Text>
-        {unitText && (
+        {/* {unitText && (
+           //hide unit text for now
           <Text style={tw`text-xs text-gray-400 font-medium ml-0.5 mt-0.5`}>
             {unitText}
           </Text>
-        )}
+        )} */}
       </View>
 
       <TouchableOpacity