refactor: update FormInput and FormSelect components to accept props directly; add FieldsWrapper for improved layout

src/pages/CheckInOutManagement.jsx

@@ -10,6 +10,7 @@ import { useToast } from "../hooks/useToast";
 import { lockerService } from "../services/locker.service";
 import { useLoading } from "../hooks/useLoading";
 import { useNavigate } from "react-router-dom";
+import FieldsWrapper from "../components/FieldsWrapper";
 
 function CheckInOutManagement() {
   const [accountNumber, setAccountNumber] = useState("");
@@ -66,18 +67,20 @@ function CheckInOutManagement() {
         {notification.visible && <Notification notification={notification} />}
       </AnimatePresence>
       <FormBox title="Check In/Out">
-        <div className="p-2 pt-7">
+        <FieldsWrapper>
           <FormField
             label="Account Number"
             icon={{ icon: <Search size={17} />, onClick: () => {} }}
           >
             <FormInput
-              type="text"
-              value={accountNumber}
-              onChange={(e) => setAccountNumber(e.target.value)}
+              props={{
+                type: "text",
+                value: accountNumber,
+                onChange: (e) => setAccountNumber(e.target.value),
+              }}
             />
           </FormField>
-        </div>
+          </FieldsWrapper>
         <Button text="Next" onClick={handleNext} />
       </FormBox>
     </div>