added new button lock

app/Components/Receipt/Inscripcion.tsx

@@ -35,6 +35,7 @@ export default function Inscripcion({
 
   const [folio, setFolio] = useState("");
   const [amount, setAmount] = useState("");
+  const [lock, setLock] = useState<boolean>(true);
   const todayISO = new Date().toISOString().split("T")[0];
   const [date, setDate] = useState(todayISO);
 
@@ -193,11 +194,16 @@ export default function Inscripcion({
                 value={amount}
                 onChange={(e) => {
                   const value = e.target.value;
+
                   if (/^\d*\.?\d*$/.test(value)) {
                     const numericValue = parseFloat(value);
-                    if (value === "" || numericValue <= 1000) {
-                      setAmount(value);
+
+                    if (lock && numericValue > 1000) {
+                      toast.error("El monto no puede superar $1000.00");
+                      return;
                     }
+
+                    setAmount(value);
                   }
                 }}
                 placeholder="Monto recibido..."
@@ -216,8 +222,17 @@ export default function Inscripcion({
               />
             </div>
 
-            <div className="containerButton">
+            <div className="containerButton" style={{ position: 'relative' }}>
               <button className="button buttonSearch">Inscribir</button>
+              <button
+                type="button"
+                className={`button buttonCancel ${lock ? "buttonLock" : "buttonOpenLock"
+                  }`}
+                onClick={() => {
+                  setLock((prev) => !prev)
+                  setAmount('');
+                }}
+              />
             </div>
           </div>
         </form>

app/Components/Receipt/Receipt.css

@@ -22,3 +22,43 @@
   border: 1px solid #cfcfcf;
   background-color: #cfcfcf;
 }
+
+.buttonLock{
+  padding: 0.8rem;
+  position: absolute;
+  right: 0;
+  background-color: #d32f2f;
+}
+
+.buttonOpenLock{
+  padding: 0.8rem;
+  position: absolute;
+  right: 0;
+  background-color: #8cd32f;
+}
+
+.buttonOpenLock:hover{
+  background-color: #78b32c;
+}
+
+.buttonLock::after {
+  content: "";
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  background: url('/lock.svg');
+  filter: invert(1);
+  background-size: contain;
+  background-repeat: no-repeat;
+}
+
+.buttonOpenLock::after {
+  content: "";
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  background: url('/lock-open.svg');
+  filter: invert(1);
+  background-size: contain;
+  background-repeat: no-repeat;
+}

app/Components/Receipt/Receipt.tsx

@@ -16,6 +16,7 @@ function Receipt({ numAcount }: ReceiptsProps) {
 
   const [folio, setFolio] = useState("");
   const [amount, setAmount] = useState("");
+  const [lock, setLock] = useState<boolean>(true);
   const todayISO = new Date().toISOString().split("T")[0];
   const [date, setDate] = useState(todayISO);
 
@@ -105,11 +106,12 @@ function Receipt({ numAcount }: ReceiptsProps) {
               if (/^\d*\.?\d*$/.test(value)) {
                 const numericValue = parseFloat(value);
 
-                if (value === "" || numericValue <= 1000) {
-                  setAmount(value);
-                } else {
+                if (lock && numericValue > 1000) {
                   toast.error("El monto no puede superar $1000.00");
+                  return;
                 }
+
+                setAmount(value);
               }
             }}
             placeholder="Monto recibido..."
@@ -129,8 +131,17 @@ function Receipt({ numAcount }: ReceiptsProps) {
           />
         </div>
 
-        <div className="containerButton">
+        <div className="containerButton" style={{ position: 'relative' }}>
           <button className="button buttonSearch" type="submit">Guardar</button>
+          <button
+            type="button"
+            className={`button buttonCancel ${lock ? "buttonLock" : "buttonOpenLock"
+              }`}
+            onClick={() => {
+              setLock((prev) => !prev)
+              setAmount('');
+            }}
+          />
         </div>
       </div>
     </form>