bigger button

src/components/StockTakeManagement/PickerCardList.tsx

@@ -1072,17 +1072,17 @@ const PickerCardList: React.FC<PickerCardListProps> = ({
               <Tabs
                 value={searchKind}
                 onChange={(_, value: PickerSearchKind) => applyFilters({ ...searchFilters, searchKind: value })}
-                sx={{ minHeight: 36 }}
+                sx={{ minHeight: 48 }}
               >
                 <Tab
                   value="location"
                   label={t("Search by location")}
-                  sx={{ minHeight: 36, py: 0.5, textTransform: "none" }}
+                  sx={{ minHeight: 48, py: 1, textTransform: "none" }}
                 />
                 <Tab
                   value="section"
                   label={t("Search by stock take section")}
-                  sx={{ minHeight: 36, py: 0.5, textTransform: "none" }}
+                  sx={{ minHeight: 48, py: 1, textTransform: "none" }}
                 />
               </Tabs>
             </Grid>
@@ -1204,7 +1204,6 @@ const PickerCardList: React.FC<PickerCardListProps> = ({
                   </Typography>
                   <ToggleButtonGroup
                     exclusive
-                    size="small"
                     value={locationPick.storeId || null}
                     onChange={(_, next: string | null) => {
                       const pick = { storeId: next ?? "", warehouse: "", area: "", slot: "" };
@@ -1213,7 +1212,7 @@ const PickerCardList: React.FC<PickerCardListProps> = ({
                     }}
                   >
                     {locationFloorOptions.map((floor) => (
-                      <ToggleButton key={floor} value={floor} sx={{ px: 1.5, textTransform: "none" }}>
+                      <ToggleButton key={floor} value={floor} sx={{ minHeight: 48, px: 2, textTransform: "none" }}>
                         {floor === LOCATION_ALL ? t("All") : floor}
                       </ToggleButton>
                     ))}
@@ -1228,7 +1227,6 @@ const PickerCardList: React.FC<PickerCardListProps> = ({
                       <ToggleButtonGroup
                         key={row.join("-") || rowIndex}
                         exclusive
-                        size="small"
                         disabled={!locationPick.storeId}
                         value={locationPick.storeId ? locationPick.warehouse || null : null}
                         onChange={(_, next: string | null) => {
@@ -1247,7 +1245,7 @@ const PickerCardList: React.FC<PickerCardListProps> = ({
                         }}
                       >
                         {row.map((zone) => (
-                          <ToggleButton key={zone} value={zone} sx={{ textTransform: "none" }}>
+                          <ToggleButton key={zone} value={zone} sx={{ minHeight: 48, textTransform: "none" }}>
                             {zone === LOCATION_ALL ? t("All") : zone}
                           </ToggleButton>
                         ))}
@@ -1276,7 +1274,6 @@ const PickerCardList: React.FC<PickerCardListProps> = ({
                       <ToggleButtonGroup
                         key={row.join("-") || rowIndex}
                         exclusive
-                        size="small"
                         disabled={!locationPick.storeId || !locationPick.warehouse}
                         value={locationPick.warehouse ? locationPick.area || null : null}
                         onChange={(_, next: string | null) => {
@@ -1295,7 +1292,7 @@ const PickerCardList: React.FC<PickerCardListProps> = ({
                         }}
                       >
                         {row.map((area) => (
-                          <ToggleButton key={area} value={area} sx={{ textTransform: "none" }}>
+                          <ToggleButton key={area} value={area} sx={{ minHeight: 48, textTransform: "none" }}>
                             {area === LOCATION_ALL ? t("All") : area}
                           </ToggleButton>
                         ))}
@@ -1324,7 +1321,6 @@ const PickerCardList: React.FC<PickerCardListProps> = ({
                       <ToggleButtonGroup
                         key={row.join("-") || rowIndex}
                         exclusive
-                        size="small"
                         disabled={!locationPick.storeId || !locationPick.warehouse || !locationPick.area}
                         value={locationPick.area ? locationPick.slot || null : null}
                         onChange={(_, next: string | null) => {
@@ -1343,7 +1339,7 @@ const PickerCardList: React.FC<PickerCardListProps> = ({
                         }}
                       >
                         {row.map((slot) => (
-                          <ToggleButton key={slot} value={slot} sx={{ textTransform: "none" }}>
+                          <ToggleButton key={slot} value={slot} sx={{ minHeight: 48, textTransform: "none" }}>
                             {slot === LOCATION_ALL ? t("All") : slot}
                           </ToggleButton>
                         ))}
@@ -1361,7 +1357,7 @@ const PickerCardList: React.FC<PickerCardListProps> = ({
             )}
           </Grid>
           <CardActions sx={{ px: 0, pt: 2, gap: 1 }}>
-            <Button variant="outlined" onClick={handleResetSearch}>
+            <Button variant="outlined" onClick={handleResetSearch} sx={{ minHeight: 48, px: 2 }}>
               {t("Reset")}
             </Button>
           </CardActions>
@@ -1406,7 +1402,7 @@ const PickerCardList: React.FC<PickerCardListProps> = ({
     ].filter((v): v is string => Boolean(v && v.trim())).join(" / ");
 
           return (
-            <Grid key={session.id} item xs={12} sm={6} md={4}>
+            <Grid key={session.id} item xs={12} md={6}>
               <Card
                 sx={{
                   minHeight: 200,
@@ -1443,16 +1439,16 @@ const PickerCardList: React.FC<PickerCardListProps> = ({
 
                 <CardActions sx={{ pt: 0.5 ,justifyContent: "space-between"}}>
                   <Stack direction="row" spacing={1}>
-                  <Button 
-                    variant="contained" 
-                    size="small" 
+                  <Button
+                    variant="contained"
+                    sx={{ minHeight: 48, px: 2 }}
                     onClick={() => onCardClick(session)}
                   >
                     {t("View Details")}
                   </Button>
                   <Button
                     variant="contained"
-                    size="small"
+                    sx={{ minHeight: 48, px: 2 }}
                     onClick={() => onReStockTakeClick(session)}
                     disabled={!session.reStockTakeTrueFalse}
                   >

src/components/StockTakeManagement/PickerStockTake.tsx

@@ -49,6 +49,19 @@ import {
   validateStockTakeQtyString,
 } from "@/app/utils/formatUtil";
 
+const pickerQtyFieldSx = {
+  width: 168,
+  minWidth: 168,
+  "& .MuiInputBase-root": { minHeight: 48 },
+  "& .MuiInputBase-input": {
+    fontSize: "1.125rem",
+    height: "1.5em",
+    padding: "12px 10px",
+  },
+} as const;
+
+const pickerTouchButtonSx = { minHeight: 48, minWidth: 96, px: 2, fontSize: "1rem" };
+
 interface PickerStockTakeProps {
   selectedSession: AllPickedStockTakeListReponse;
   onBack: () => void;
@@ -262,6 +275,8 @@ const PickerStockTake: React.FC<PickerStockTakeProps> = ({
         );
         
         //await loadDetails(page, pageSize, { silent: true });
+        const nextQtyId = editableQtyIdsRef.current[editableQtyIdsRef.current.indexOf(detail.id) + 1];
+        if (nextQtyId != null) focusQtyInput(nextQtyId);
         setInventoryLotDetails((prev) =>
           prev.map((d) =>
             d.id === detail.id
@@ -413,6 +428,35 @@ const PickerStockTake: React.FC<PickerStockTakeProps> = ({
       e.preventDefault();
     }
   };
+  const qtyInputRefs = useRef(new Map<number, HTMLInputElement>());
+  const editableQtyIdsRef = useRef<number[]>([]);
+
+  const focusQtyInput = (id: number) => {
+    const el = qtyInputRefs.current.get(id);
+    if (!el) return;
+    el.focus();
+    el.scrollIntoView({ block: "center", inline: "nearest" });
+  };
+
+  const onQtyRowClick = (detailId: number) => (e: React.MouseEvent) => {
+    const target = e.target as HTMLElement;
+    if (target.closest("button, input, textarea, a, .MuiInputBase-root")) return;
+    focusQtyInput(detailId);
+  };
+
+  const focusNextQtyInput = (currentId: number) => {
+    const ids = editableQtyIdsRef.current;
+    const nextId = ids[ids.indexOf(currentId) + 1];
+    if (nextId == null) return;
+    focusQtyInput(nextId);
+  };
+
+  const onQtyKeyDown = (detailId: number) => (e: React.KeyboardEvent<HTMLInputElement>) => {
+    blockNonIntegerKeys(e);
+    if (e.key !== "Enter") return;
+    e.preventDefault();
+    focusNextQtyInput(detailId);
+  };
   
   const isSubmitDisabled = useCallback((detail: InventoryLotDetailResponse): boolean => {
     if (selectedSession?.status?.toLowerCase() === "completed") {
@@ -424,6 +468,9 @@ const PickerStockTake: React.FC<PickerStockTakeProps> = ({
     }
     return false;
   }, [selectedSession?.status]);
+  editableQtyIdsRef.current = inventoryLotDetails
+    .filter((detail) => !isSubmitDisabled(detail) && (detail.firstStockTakeQty == null || detail.secondStockTakeQty == null))
+    .map((detail) => detail.id);
   const handleBatchSaveInputted = useCallback(async () => {
     if (!selectedSession || !currentUserId || batchInFlightRef.current) return;
 
@@ -495,7 +542,7 @@ const PickerStockTake: React.FC<PickerStockTakeProps> = ({
     <Box sx={{ pb: 10 }}>
       <Button
         onClick={onBack}
-        sx={{ mb: 2, border: "1px solid", borderColor: "primary.main" }}
+        sx={{ mb: 2, minHeight: 48, px: 2, border: "1px solid", borderColor: "primary.main" }}
       >
         {t("Back to List")}
       </Button>
@@ -584,8 +631,18 @@ const PickerStockTake: React.FC<PickerStockTakeProps> = ({
                       detail.firstStockTakeQty != null &&
                       detail.secondStockTakeQty == null;
 
+                    const canEditQty = !submitDisabled && (isFirstSubmit || isSecondSubmit);
+
                     return (
-                      <TableRow key={detail.id}>
+                      <TableRow
+                        key={detail.id}
+                        hover={canEditQty}
+                        onClick={canEditQty ? onQtyRowClick(detail.id) : undefined}
+                        sx={{
+                          "& .MuiTableCell-root": { py: 1.5 },
+                          ...(canEditQty ? { cursor: "pointer" } : {}),
+                        }}
+                      >
                         <TableCell>
                           {detail.warehouseArea || "-"}
                           {detail.warehouseSlot || "-"}
@@ -624,16 +681,27 @@ const PickerStockTake: React.FC<PickerStockTakeProps> = ({
                                 <Typography variant="body2">{t("First")}:</Typography>
                                 <TextField
                                   size="small"
-                                  type="number"
+                                  type="text"
                                   value={recordInputs[detail.id]?.firstQty || ""}
                                   onFocus={() =>
                                     setGapCheckOpen((prev) => ({ ...prev, [`${detail.id}:first`]: false }))
                                   }
-                                  onBlur={() =>
-                                    setGapCheckOpen((prev) => ({ ...prev, [`${detail.id}:first`]: true }))
-                                  }
-                                  inputProps={{ inputMode: "numeric", pattern: "[0-9]*" }}
-                                  onKeyDown={blockNonIntegerKeys}
+                                  onBlur={(e) => {
+                                    const next = e.relatedTarget as HTMLElement | null;
+                                    if (next?.dataset.stockTakeQty === "1") return;
+                                    setGapCheckOpen((prev) => ({ ...prev, [`${detail.id}:first`]: true }));
+                                  }}
+                                  inputRef={(el) => {
+                                    if (el) qtyInputRefs.current.set(detail.id, el);
+                                    else qtyInputRefs.current.delete(detail.id);
+                                  }}
+                                  inputProps={{
+                                    inputMode: "numeric",
+                                    enterKeyHint: "next",
+                                    pattern: "[0-9]*",
+                                    "data-stock-take-qty": "1",
+                                  }}
+                                  onKeyDown={onQtyKeyDown(detail.id)}
                                   onChange={(e) => {
                                     const clean = sanitizeStockTakeQtyInput(e.target.value);
                                     const val = clean;
@@ -643,18 +711,7 @@ const PickerStockTake: React.FC<PickerStockTakeProps> = ({
                                   InputProps={{
                                     endAdornment: stockTakeQtyEndAdornment(detail.uomShortDesc),
                                   }}
-                                  sx={{
-                                    width: 148,
-                                    minWidth: 148,
-                                    "& .MuiInputBase-input": {
-                                      height: "1.4375em",
-                                      padding: "4px 8px",
-                                    },
-                                    "& .MuiInputBase-input::placeholder": {
-                                      color: "grey.400",   // MUI light grey
-                                      opacity: 1,
-                                    },
-                                  }}
+                                  sx={pickerQtyFieldSx}
                                   placeholder={t("Stock Take Qty")}
                                 />
                                 {/*
@@ -710,16 +767,27 @@ const PickerStockTake: React.FC<PickerStockTakeProps> = ({
                                 <Typography variant="body2">{t("Second")}:</Typography>
                                 <TextField
                                   size="small"
-                                  type="number"
+                                  type="text"
                                   value={recordInputs[detail.id]?.secondQty || ""}
                                   onFocus={() =>
                                     setGapCheckOpen((prev) => ({ ...prev, [`${detail.id}:second`]: false }))
                                   }
-                                  onBlur={() =>
-                                    setGapCheckOpen((prev) => ({ ...prev, [`${detail.id}:second`]: true }))
-                                  }
-                                  inputProps={{ inputMode: "numeric", pattern: "[0-9]*" }}
-                                  onKeyDown={blockNonIntegerKeys}
+                                  onBlur={(e) => {
+                                    const next = e.relatedTarget as HTMLElement | null;
+                                    if (next?.dataset.stockTakeQty === "1") return;
+                                    setGapCheckOpen((prev) => ({ ...prev, [`${detail.id}:second`]: true }));
+                                  }}
+                                  inputRef={(el) => {
+                                    if (el) qtyInputRefs.current.set(detail.id, el);
+                                    else qtyInputRefs.current.delete(detail.id);
+                                  }}
+                                  inputProps={{
+                                    inputMode: "numeric",
+                                    enterKeyHint: "next",
+                                    pattern: "[0-9]*",
+                                    "data-stock-take-qty": "1",
+                                  }}
+                                  onKeyDown={onQtyKeyDown(detail.id)}
                                   onChange={(e) => {
                                     const clean = sanitizeStockTakeQtyInput(e.target.value);
                                     const val = clean;
@@ -729,14 +797,7 @@ const PickerStockTake: React.FC<PickerStockTakeProps> = ({
                                   InputProps={{
                                     endAdornment: stockTakeQtyEndAdornment(detail.uomShortDesc),
                                   }}
-                                  sx={{
-                                    width: 148,
-                                    minWidth: 148,
-                                    "& .MuiInputBase-input": {
-                                      height: "1.4375em",
-                                      padding: "4px 8px",
-                                    },
-                                  }}
+                                  sx={pickerQtyFieldSx}
                                   placeholder={t("Stock Take Qty")}
                                 />
                                 {/*
@@ -797,8 +858,8 @@ const PickerStockTake: React.FC<PickerStockTakeProps> = ({
                         
                         <Stack direction="row" spacing={1}>
                           <Button
-                            size="small"
                             variant="contained"
+                            sx={pickerTouchButtonSx}
                             onClick={() => handleSaveStockTake(detail)}
                             disabled={saving || submitDisabled}
                           >