This commit is contained in:
2026-02-09 12:26:18 -06:00
7 changed files with 133 additions and 14 deletions
+18 -7
View File
@@ -4,8 +4,6 @@ import { useState } from "react";
import toast from "react-hot-toast";
import { useRouter } from "next/navigation";
import { PostReceipt } from "@/app/lib/postReceipt";
import "./addTime.css";
import SelectionCo from "@/app/Components/Selection/SelectionCo";
import axios from "axios";
@@ -35,9 +33,10 @@ export default function AddTime({
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);
const day = new Date();
const year = day.getFullYear();
const month = day.getMonth();
@@ -138,13 +137,16 @@ export default function AddTime({
value={amount}
onChange={(e) => {
const value = e.target.value;
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..."
@@ -163,10 +165,19 @@ export default function AddTime({
/>
</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>
+40
View File
@@ -23,6 +23,46 @@
width: 100%;
}
.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;
}
@media (max-width: 800px) {
.containeInformationTime {
flex-direction: column;
+18 -3
View File
@@ -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>
+40
View File
@@ -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;
}
+15 -4
View File
@@ -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>
+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free 7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M416 160C416 124.7 444.7 96 480 96C515.3 96 544 124.7 544 160L544 192C544 209.7 558.3 224 576 224C593.7 224 608 209.7 608 192L608 160C608 89.3 550.7 32 480 32C409.3 32 352 89.3 352 160L352 224L192 224C156.7 224 128 252.7 128 288L128 512C128 547.3 156.7 576 192 576L448 576C483.3 576 512 547.3 512 512L512 288C512 252.7 483.3 224 448 224L416 224L416 160z"/></svg>

After

Width:  |  Height:  |  Size: 584 B

+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free 7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M256 160L256 224L384 224L384 160C384 124.7 355.3 96 320 96C284.7 96 256 124.7 256 160zM192 224L192 160C192 89.3 249.3 32 320 32C390.7 32 448 89.3 448 160L448 224C483.3 224 512 252.7 512 288L512 512C512 547.3 483.3 576 448 576L192 576C156.7 576 128 547.3 128 512L128 288C128 252.7 156.7 224 192 224z"/></svg>

After

Width:  |  Height:  |  Size: 529 B