enhnace the progress timer

src/assets/locals/ar.json

@@ -377,7 +377,10 @@
     "howWasYourExperienceWithFascanoRestaurant": "كيف كانت تجربتك مع مطعم فاسكانو؟",
     "rateOrder": "تقييم الطلب",
     "submitRating": "إرسال التقييم",
-    "pleaseLoginToAllowRating": "يرجى تسجيل الدخول لتمكين التقييم"
+    "pleaseLoginToAllowRating": "يرجى تسجيل الدخول لتمكين التقييم",
+    "remainingTime": "الوقت المتبقي",
+    "sec": "ثانية",
+    "min": "دقيقة"
   },
   "orderTypes": {
     "dine-in": "في المطعم",

src/assets/locals/en.json

@@ -388,7 +388,10 @@
     "howWasYourExperienceWithFascanoRestaurant": "How was your experience with Fascano Restaurant?",
     "rateOrder": "Rate Order",
     "submitRating": "Submit Rating",
-    "pleaseLoginToAllowRating": "Please login to allow rating"
+    "pleaseLoginToAllowRating": "Please login to allow rating",
+    "remainingTime": "Remaining Time",
+    "sec": "Sec",
+    "min": "Min"
   },
   "orderTypes": {
     "dine-in": "Dine In",

src/pages/order/page.tsx

@@ -101,10 +101,11 @@ export default function OrderPage() {
       const remaining = Math.max(0, totalSeconds - elapsedSeconds);
 
       setRemainingSeconds(remaining);
+      // Calculate progress as remaining time percentage (starts at 100%, decreases to 0%)
       const percent =
         totalSeconds > 0
-          ? Math.min(100, Math.max(0, (elapsedSeconds / totalSeconds) * 100))
+          ? Math.min(100, Math.max(0, (remaining / totalSeconds) * 100))
-          : 0;
+          : 100;
       setProgressPercent(percent);
     };
 
@@ -118,11 +119,100 @@ export default function OrderPage() {
     orderDetails?.status,
   ]);
 
-  // Format remaining time as MM:SS
+  // Format remaining time with Min and Sec labels
-  const formatTimer = (totalSeconds: number): string => {
+  const formatTimer = (totalSeconds: number) => {
     const mins = Math.floor(totalSeconds / 60);
     const secs = Math.floor(totalSeconds % 60);
-    return `${mins.toString().padStart(2, "0")}:${secs.toString().padStart(2, "0")}`;
+    return (
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "row",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: 8,
+        }}
+      >
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            gap: 2,
+          }}
+        >
+          <ProText
+            style={{
+              fontWeight: 600,
+              fontStyle: "SemiBold",
+              fontSize: 28,
+              lineHeight: "100%",
+              letterSpacing: "0%",
+              color: "#CC9300",
+            }}
+          >
+            {mins.toString().padStart(2, "0")}
+          </ProText>
+          <ProText
+            style={{
+              fontWeight: 400,
+              fontStyle: "Regular",
+              fontSize: 12,
+              lineHeight: "140%",
+              letterSpacing: "0%",
+              color: "#CC9300",
+            }}
+          >
+            {t("order.min")}
+          </ProText>
+        </div>
+        <ProText
+          style={{
+            fontWeight: 600,
+            fontStyle: "SemiBold",
+            fontSize: 28,
+            lineHeight: "100%",
+            letterSpacing: "0%",
+            color: "#CC9300",
+          }}
+        >
+          :
+        </ProText>
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            gap: 2,
+          }}
+        >
+          <ProText
+            style={{
+              fontWeight: 600,
+              fontStyle: "SemiBold",
+              fontSize: 28,
+              lineHeight: "100%",
+              letterSpacing: "0%",
+              color: "#CC9300",
+            }}
+          >
+            {secs.toString().padStart(2, "0")}
+          </ProText>
+          <ProText
+            style={{
+              fontWeight: 400,
+              fontStyle: "Regular",
+              fontSize: 12,
+              lineHeight: "140%",
+              letterSpacing: "0%",
+              color: "#CC9300",
+            }}
+          >
+            {t("order.sec")}
+          </ProText>
+        </div>
+      </div>
+    );
   };
 
   return (
@@ -180,14 +270,43 @@ export default function OrderPage() {
           {isInProgress ? (
             <Flex gap="small" wrap justify="center">
               <Tooltip title="3 done / 3 in progress / 4 to do">
-                <Progress
+                <div
-                  percent={progressPercent}
+                  style={{
-                  format={() => formatTimer(remainingSeconds)}
+                    transform: "scaleX(-1)",
-                  // success={{ percent: progressPercent }}
+                  }}
-                  strokeColor="#FFB700"
+                >
-                  size={120}
+                  <Progress
-                  type="dashboard"
+                    percent={progressPercent}
-                />
+                    format={() => (
+                      <div
+                        style={{
+                          display: "flex",
+                          flexDirection: "column",
+                          alignItems: "center",
+                          justifyContent: "center",
+                          gap: 4,
+                          transform: "scaleX(-1)",
+                        }}
+                      >
+                        <ProText
+                          style={{
+                            fontWeight: 400,
+                            fontStyle: "Regular",
+                            fontSize: 18,
+                            lineHeight: "140%",
+                            letterSpacing: "0%",
+                          }}
+                        >
+                          {t("order.remainingTime")}
+                        </ProText>
+                        {formatTimer(remainingSeconds)}
+                      </div>
+                    )}
+                    strokeColor="#FFB700"
+                    size={200}
+                    type="dashboard"
+                  />
+                </div>
               </Tooltip>
             </Flex>
           ) : (