order: add progress timer

src/pages/pay/components/splitBill/CustomAmountChoiceBottomSheet.tsx

@@ -163,7 +163,7 @@ export function CustomAmountChoiceBottomSheet({
         style={{
           display: "flex",
           gap: 12,
-          marginTop: 20,
+          margin: 20,
         }}
       >
         <Button

src/pages/pay/components/splitBill/PayForYourItemsChoiceBottomSheet.tsx

@@ -1,4 +1,4 @@
-import { Button, Card, Image } from "antd";
+import { Button, Card, Checkbox, Divider, Image } from "antd";
 import { ProBottomSheet } from "components/ProBottomSheet/ProBottomSheet.tsx";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -7,6 +7,7 @@ import ArabicPrice from "components/ArabicPrice";
 import ProText from "components/ProText";
 import { selectCart, updateSplitBillAmount } from "features/order/orderSlice";
 import { useAppDispatch, useAppSelector } from "redux/hooks";
+import styles from "./SplitBill.module.css";
 
 interface SplitBillChoiceBottomSheetProps {
   isOpen: boolean;
@@ -72,13 +73,13 @@ export function PayForYourItemsChoiceBottomSheet({
       title={t("splitBill.payForYourItems")}
       showCloseButton={true}
       initialSnap={1}
-      height={745}
-      snapPoints={[745]}
+      height={720}
+      snapPoints={[720]}
+      contentStyle={{ padding: 0 }}
     >
       <div
         style={{
-          padding: "0 20px",
-          margin: "20px 0",
+          padding: 20,
           display: "flex",
           flexDirection: "column",
           gap: 12,
@@ -101,65 +102,71 @@ export function PayForYourItemsChoiceBottomSheet({
             const itemTotal = item.price * item.quantity;
 
             return (
-              <Card
-                key={itemId}
-                style={{
-                  border: "none",
-                  cursor: "pointer",
-                }}
-                onClick={() => handleItemToggle(itemId)}
-              >
-                <div
+              <>
+                <Card
+                  key={itemId}
                   style={{
-                    display: "flex",
-                    flexDirection: "row",
-                    gap: 12,
-                    alignItems: "center",
+                    border: "none",
+                    cursor: "pointer",
+                    padding: 0,
                   }}
+                  onClick={() => handleItemToggle(itemId)}
                 >
-                  <Image
-                    src={item.image}
-                    alt={item.name}
-                    width={60}
-                    height={60}
-                    preview={false}
-                    style={{
-                      borderRadius: 8,
-                      objectFit: "cover",
-                    }}
-                  />
                   <div
                     style={{
-                      flex: 1,
-                      display: "flex",
-                      flexDirection: "column",
-                      gap: 4,
-                    }}
-                  >
-                    <ProText style={{ fontSize: 14, fontWeight: 500 }}>
-                      {item.name}
-                    </ProText>
-                    <ProText type="secondary" style={{ fontSize: 12 }}>
-                      {t("cart.quantity")}: {item.quantity}
-                    </ProText>
-                    <ArabicPrice price={itemTotal} />
-                  </div>
-                  <Button
-                    type={isSelected ? "primary" : "default"}
-                    shape="circle"
-                    style={{
-                      width: 32,
-                      height: 32,
-                      minWidth: 32,
                       display: "flex",
+                      flexDirection: "row",
+                      gap: 12,
                       alignItems: "center",
-                      justifyContent: "center",
                     }}
                   >
-                    {isSelected ? "✓" : "+"}
-                  </Button>
-                </div>
-              </Card>
+                    <Image
+                      src={item.image}
+                      alt={item.name}
+                      width={60}
+                      height={60}
+                      preview={false}
+                      style={{
+                        borderRadius: 8,
+                        objectFit: "cover",
+                      }}
+                    />
+                    <div
+                      style={{
+                        flex: 1,
+                        display: "flex",
+                        flexDirection: "column",
+                        gap: 4,
+                      }}
+                    >
+                      <ProText style={{ fontSize: 14, fontWeight: 500 }}>
+                        {item.name}
+                      </ProText>
+                      <ArabicPrice price={itemTotal} />
+                    </div>
+                    <div
+                      style={{
+                        width: 32,
+                        height: 32,
+                        minWidth: 32,
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                      }}
+                      onClick={(e) => e.stopPropagation()}
+                    >
+                      <Checkbox
+                        className={styles.circleCheckbox}
+                        checked={isSelected}
+                        onChange={() => handleItemToggle(itemId)}
+                      />
+                    </div>
+                  </div>
+                </Card>
+                {item !== items[items.length - 1] && (
+                  <Divider style={{ margin: "0" }} />
+                )}
+              </>
             );
           })
         )}
@@ -189,7 +196,7 @@ export function PayForYourItemsChoiceBottomSheet({
         style={{
           display: "flex",
           gap: 12,
-          marginTop: 20,
+          margin: 20,
         }}
       >
         <Button

src/pages/pay/components/splitBill/SplitBill.module.css

@@ -19,7 +19,6 @@
   height: 48px !important;
 }
 
-
 .backToHomePage {
   width: 100%;
   height: 48px;
@@ -53,3 +52,38 @@
   align-items: center;
   font-size: 16px;
 }
+
+/* Make AntD checkbox look like a circular check indicator (scoped via CSS modules) */
+.circleCheckbox :global(.ant-checkbox-inner) {
+  width: 24px;
+  height: 24px;
+  border-radius: 50% !important;
+  border: 1.5px solid #D5D8DA;
+  background: transparent;
+}
+
+.circleCheckbox :global(.ant-checkbox-checked .ant-checkbox-inner) {
+  border-radius: 50% !important;
+  background: transparent;
+  border-color: #ffb700;
+}
+
+/* Replace AntD checkmark with a filled inner circle when checked (match SVG) */
+.circleCheckbox :global(.ant-checkbox-inner::after) {
+  content: "";
+  border: 0 !important;
+  transform: none !important;
+  width: 0;
+  height: 0;
+  left: 50%;
+  top: 50%;
+}
+
+.circleCheckbox :global(.ant-checkbox-checked .ant-checkbox-inner::after) {
+  width: 18px;
+  height: 18px;
+  margin-left: -9px;
+  margin-top: -9px;
+  border-radius: 50%;
+  background: #ffb700;
+}