order: add progress timer

src/pages/order/page.tsx

@@ -1,4 +1,4 @@
-import { Button, Card, Divider, Image } from "antd";
+import { Button, Card, Divider, Flex, Image, Progress, Tooltip } from "antd";
 import Ads2 from "components/Ads/Ads2";
 import { CancelOrderBottomSheet } from "components/CustomBottomSheet/CancelOrderBottomSheet";
 import LocationIcon from "components/Icons/LocationIcon";
@@ -11,7 +11,7 @@ import ProInputCard from "components/ProInputCard/ProInputCard";
 import ProText from "components/ProText";
 import ProTitle from "components/ProTitle";
 import dayjs from "dayjs";
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useNavigate, useParams } from "react-router-dom";
 import {
@@ -74,6 +74,57 @@ export default function OrderPage() {
     }
   }, [orderDetails?.status, restaurantSubdomain, refetchRestaurantDetails]);
 
+  // Check if order is in progress (check last status alias)
+  const lastStatus = orderDetails?.status?.[orderDetails.status.length - 1];
+  const isInProgress = lastStatus?.alias === "accepted_by_restaurant";
+
+  // Calculate timer and progress
+  const [remainingSeconds, setRemainingSeconds] = useState<number>(0);
+  const [progressPercent, setProgressPercent] = useState<number>(0);
+
+  useEffect(() => {
+    if (
+      !isInProgress ||
+      !orderDetails?.order?.time_to_prepare ||
+      !orderDetails?.order?.created_at
+    ) {
+      return;
+    }
+
+    const updateTimer = () => {
+      const orderCreatedAt = dayjs(orderDetails.order.created_at);
+      const now = dayjs();
+      const elapsedSeconds = now.diff(orderCreatedAt, "second");
+      // time_to_prepare is in minutes, convert to seconds
+      const totalSeconds =
+        (Number(orderDetails.order.time_to_prepare) || 0) * 60;
+      const remaining = Math.max(0, totalSeconds - elapsedSeconds);
+
+      setRemainingSeconds(remaining);
+      const percent =
+        totalSeconds > 0
+          ? Math.min(100, Math.max(0, (elapsedSeconds / totalSeconds) * 100))
+          : 0;
+      setProgressPercent(percent);
+    };
+
+    updateTimer();
+    const interval = setInterval(updateTimer, 1000);
+
+    return () => clearInterval(interval);
+  }, [
+    isInProgress,
+    orderDetails?.order?.time_to_prepare,
+    orderDetails?.status,
+  ]);
+
+  // Format remaining time as MM:SS
+  const formatTimer = (totalSeconds: number): string => {
+    const mins = Math.floor(totalSeconds / 60);
+    const secs = Math.floor(totalSeconds % 60);
+    return `${mins.toString().padStart(2, "0")}:${secs.toString().padStart(2, "0")}`;
+  };
+
   return (
     <>
       <ProHeader>{t("order.title")}</ProHeader>
@@ -126,7 +177,22 @@ export default function OrderPage() {
             </div>
           </div>
 
-          <OrderDishIcon className={styles.orderDishIcon} />
+          {isInProgress ? (
+            <Flex gap="small" wrap justify="center">
+              <Tooltip title="3 done / 3 in progress / 4 to do">
+                <Progress
+                  percent={progressPercent}
+                  format={() => formatTimer(remainingSeconds)}
+                  // success={{ percent: progressPercent }}
+                  strokeColor="#FFB700"
+                  size={120}
+                  type="dashboard"
+                />
+              </Tooltip>
+            </Flex>
+          ) : (
+            <OrderDishIcon className={styles.orderDishIcon} />
+          )}
 
           <div>
             <ProTitle