diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 1e1462d..07b6cb5 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -10,7 +10,7 @@ "dependencies": { "@emotion/react": "^11.11.4", "@emotion/styled": "^11.11.5", - "@mui/material": "^5.15.17", + "@mui/material": "^5.15.18", "axios": "^1.6.8", "react": "^18.2.0", "react-dom": "^18.2.0", @@ -1110,22 +1110,22 @@ } }, "node_modules/@mui/core-downloads-tracker": { - "version": "5.15.17", - "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.15.17.tgz", - "integrity": "sha512-DVAejDQkjNnIac7MfP8sLzuo7fyrBPxNdXe+6bYqOqg1z2OPTlfFAejSNzWe7UenRMuFu9/AyFXj/X2vN2w6dA==", + "version": "5.15.18", + "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.15.18.tgz", + "integrity": "sha512-/9pVk+Al8qxAjwFUADv4BRZgMpZM4m5E+2Q/20qhVPuIJWqKp4Ie4tGExac6zu93rgPTYVQGgu+1vjiT0E+cEw==", "funding": { "type": "opencollective", "url": "https://opencollective.com/mui-org" } }, "node_modules/@mui/material": { - "version": "5.15.17", - "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.15.17.tgz", - "integrity": "sha512-ru/MLvTkCh0AZXmqwIpqGTOoVBS/sX48zArXq/DvktxXZx4fskiRA2PEc7Rk5ZlFiZhKh4moL4an+l8zZwq49Q==", + "version": "5.15.18", + "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.15.18.tgz", + "integrity": "sha512-n+/dsiqux74fFfcRUJjok+ieNQ7+BEk6/OwX9cLcLvriZrZb+/7Y8+Fd2HlUUbn5N0CDurgAHm0VH1DqyJ9HAw==", "dependencies": { "@babel/runtime": "^7.23.9", "@mui/base": "5.0.0-beta.40", - "@mui/core-downloads-tracker": "^5.15.17", + "@mui/core-downloads-tracker": "^5.15.18", "@mui/system": "^5.15.15", "@mui/types": "^7.2.14", "@mui/utils": "^5.15.14", diff --git a/frontend/package.json b/frontend/package.json index 0694e73..7b9a80a 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -12,7 +12,7 @@ "dependencies": { "@emotion/react": "^11.11.4", "@emotion/styled": "^11.11.5", - "@mui/material": "^5.15.17", + "@mui/material": "^5.15.18", "axios": "^1.6.8", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/frontend/src/AdminPackages/AdminVista.css b/frontend/src/AdminPackages/AdminVista.css new file mode 100644 index 0000000..e441343 --- /dev/null +++ b/frontend/src/AdminPackages/AdminVista.css @@ -0,0 +1,1343 @@ +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); + +:root { + --primary-color: #8B374A; + --background-color: #f9f5f0; + --dark-color: #151515; +} + +html { + font-size: 62.5%; + font-family: 'Poppins', sans-serif; +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +/* ********************************** */ +/* UTILIDADES */ +/* ********************************** */ +.container { + max-width: 120rem; + margin: 0 auto; +} + +.heading-1 { + text-align: center; + font-weight: 700; + font-size: 3rem; +} + +.heading-2{ + text-align: left; + font-weight: 700; + font-size: 3rem; + color: #000000; +} + +/* ********************************** */ +/* HEADER */ +/* ********************************** */ +.container-hero { + background-color: var(--background-color); +} + +.hero { + display: flex; + justify-content: space-between; + align-items: center; + padding: 2rem 0; +} + +.customer-support { + display: flex; + align-items: center; + gap: 2rem; +} + +.customer-support i { + font-size: 3.3rem; +} + +.content-customer-support { + display: flex; + flex-direction: column; +} + +.container-logo { + display: flex; + align-items: center; + gap: 0.5rem; +} + +.container-logo i { + font-size: 3rem; +} + +.container-logo h1 a { + text-decoration: none; + color: #000; + font-size: 3rem; + text-transform: uppercase; + letter-spacing: -1px; +} + +.container-user { + display: flex; + gap: 1rem; + cursor: pointer; +} + +.container-user .fa-user { + font-size: 3rem; + color: var(--primary-color); + padding-right: 2.5rem; + border-right: 1px solid #e2e2e2; +} + +.container-user .fa-basket-shopping { + font-size: 3rem; + color: var(--primary-color); + padding-left: 1rem; +} + +.content-shopping-cart { + display: flex; + flex-direction: column; +} + +/* ************* NAVBAR ************* */ +.container-navbar { + background-color: var(--primary-color); +} + +.navbar { + display: flex; + justify-content: space-between; + align-items: center; + padding: 1rem 0; + color: white; +} + +.navbar .fa-bars { + display: none; +} + +.menu { + display: flex; + gap: 2rem; + +} + +.menu li { + list-style: none; +} + +.menu a { + text-decoration: none; + font-size: 1.3rem; + color: var(--dark-color); + font-weight: 600; + text-transform: uppercase; + position: relative; + color: white; +} + +.menu a::after { + content: ''; + width: 1.5rem; + height: 1px; + background-color: #fff; + position: absolute; + bottom: -3px; + left: 50%; + transform: translate(-50%, 50%); + opacity: 0; + transition: all 0.3s ease; +} + +.menu a:hover::after { + opacity: 1; +} + +.menu a:hover { + color: #fff; +} + +.search-form { + position: relative; + display: flex; + align-items: center; + + border-radius: 2rem; + + height: 4.4rem; + overflow: hidden; +} + +.search-form input { + outline: none; + font-family: inherit; + border: none; + width: 25rem; + font-size: 1.4rem; + padding: 0 2rem; + color: #777; + cursor: pointer; +} + +.search-form input::-webkit-search-cancel-button { + appearance: none; +} + +.search-form .btn-search { + border: none; + background-color: var(--primary-color); + display: flex; + align-items: center; + justify-content: center; + height: 100%; + padding: 1rem; +} + +.btn-search i { + font-size: 2rem; + color: var(--primary-color); +} + +/* ********************************** */ +/* BANNER */ +/* ********************************** */ +.banner { + background-image: linear-gradient(100deg, #000000, #00000020), + url('assets/pastel-fondo.jpg'); + height: 60rem; + background-size: cover; + background-position: center; +} + +.content-banner { + max-width: 90rem; + margin: 0 auto; + padding: 25rem 0; +} + +.content-banner p { + color: var(--primary-color); + font-size: 1.2rem; + margin-bottom: 1rem; + font-weight: 500; +} + +.content-banner h2 { + color: #fff; + font-size: 3.5rem; + font-weight: 500; + line-height: 1.2; +} + +.content-banner a { + margin-top: 2rem; + text-decoration: none; + color: #fff; + background-color: var(--primary-color); + display: inline-block; + padding: 1rem 3rem; + text-transform: uppercase; + border-radius: 3rem; +} + +/* ********************************** */ +/* MAIN CONTENT */ +/* ********************************** */ +.main-content { + background-color: var(--background-color); +} + +/* ********************************** */ +/* FEATURES */ +/* ********************************** */ +.container-features { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 3rem; + padding: 3rem 0; +} + +.card-feature { + display: flex; + align-items: center; + justify-content: center; + gap: 1.5rem; + + background-color: #fff; + border-radius: 1rem; + padding: 1.5rem 0; +} + +.card-feature i { + font-size: 2.7rem; + color: var(--primary-color); +} + +.feature-content { + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +.feature-content span { + font-weight: 700; + font-size: 1.2rem; + color: var(--dark-color); +} + +.feature-content p { + color: #777; + font-weight: 500; +} + +/* ********************************** */ +/* CATEGORIES */ +/* ********************************** */ + +.top-categories { + display: flex; + flex-direction: column; + gap: 2rem; + margin-bottom: 3rem; +} + +.container-categories { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 3rem; +} + +.card-category { + height: 20rem; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + border-radius: 2rem; + gap: 2rem; +} + +.category-moca { + background-image: linear-gradient(#00000080, #00000080), + url('assets/pastel-4-leches.jpg'); + background-size: cover; + background-position: bottom; + background-repeat: no-repeat; +} + +.category-capuchino { + background-image: linear-gradient(#00000080, #00000080), + url('assets/pastel-zarza.jpg'); + background-size: cover; + background-position: center; + background-repeat: no-repeat; +} + +.category-expreso { + background-image: linear-gradient(#00000080, #00000080), + url('assets/pastel-moka.jpg'); + background-size: cover; + background-position: center; + background-repeat: no-repeat; +} + +.card-category p { + font-size: 2.5rem; + color: #fff; + text-transform: capitalize; + position: relative; +} + +.card-category p::after { + content: ''; + width: 2.5rem; + height: 2px; + background-color: #fff; + position: absolute; + bottom: -1rem; + left: 50%; + transform: translate(-50%, 50%); +} + +.card-category span { + font-size: 1.6rem; + color: #fff; + cursor: pointer; +} + +.card-category span:hover { + color: var(--primary-color); +} + +/* ********************************** */ +/* TOP PRODUCTS */ +/* ********************************** */ +.top-products { + display: flex; + flex-direction: column; + gap: 2rem; + margin-bottom: 3rem; +} + +.container-options { + display: flex; + justify-content: center; + gap: 2rem; + margin-bottom: 1rem; +} + +.container-options span { + color: #777; + background-color: #fff; + padding: 0.7rem 3rem; + font-size: 1.4rem; + text-transform: capitalize; + border-radius: 2rem; + cursor: pointer; +} + +.container-options span:hover { + background-color: var(--primary-color); + color: #fff; +} + +.container-options span.active { + background-color: var(--primary-color); + color: #fff; +} + +/* Products */ +.container-products { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); + gap: 5rem; + margin-bottom: 30px; +} + +.card-product { + background-color: #fff; + padding: 2rem 3rem; + border-radius: 0.5rem; + cursor: pointer; + box-shadow: 0 0 60px rgba(0, 0, 0, 0.1); + border-radius: 30px; + margin-top: 10px; +} + +.card-product1 { + background-color: #fff; + padding: 2rem 3rem; + border-radius: 0.5rem; + cursor: pointer; + box-shadow: 0 0 60px rgba(0, 0, 0, 0.1); + border-radius: 30px; + margin-top: 10px; +} + +.container-img { + position: relative; +} + +.container-img img { + width: 100%; +} + +.container-img .discount { + position: absolute; + left: 0; + background-color: var(--primary-color); + color: #ffffff; + padding: 2px 1.2rem; + border-radius: 1rem; + font-size: 1.2rem; +} + +.card-product:hover .discount { + background-color: #000; +} + +.button-group { + display: flex; + flex-direction: column; + gap: 1rem; + + position: absolute; + top: 0; + right: -3rem; + z-index: -1; + transition: all 0.4s ease; +} + +.button-group span { + border: 1px solid var(--primary-color); + padding: 0.8rem; + + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + cursor: pointer; + transition: all 0.4s ease; +} + +.button-group span:hover { + background-color: var(--primary-color); +} + +.button-group span i { + font-size: 1.5rem; + color: var(--primary-color); +} + +.button-group span:hover i { + color: #fff; +} + +.card-product:hover .button-group { + z-index: 0; + right: -1rem; +} + +.content-card-product { + display: grid; + justify-items: center; + grid-template-columns: 1fr 1fr; + grid-template-rows: repeat(4, min-content); + row-gap: 1rem; +} + +.stars { + grid-row: 1/2; + grid-column: 1/-1; +} + +.stars i { + font-size: 1.3rem; + color: var(--primary-color); +} + +.content-card-product h3 { + grid-row: 2/3; + grid-column: 1/-1; + text-align: center; + font-weight: 400; + font-size: 1.6rem; + margin-bottom: 1rem; + cursor: pointer; +} + +.content-card-product h3:hover { + color: var(--primary-color); +} + +.add-cart { + justify-self: start; + border: 2px solid var(--primary-color); + padding: 1rem; + border-radius: 50%; + cursor: pointer; + transition: all 0.4s ease; + + display: flex; + align-items: center; + justify-content: center; +} + +.add-cart:hover { + background-color: var(--primary-color); +} + +.add-cart i { + font-size: 1.5rem; + color: var(--primary-color); +} + +.add-cart:hover i { + color: #fff; +} + +.content-card-product .price { + justify-self: end; + align-self: center; + + font-size: 1.7rem; + font-weight: 600; +} + +.content-card-product .price span { + font-size: 1.5rem; + font-weight: 400; + text-decoration: line-through; + color: #777; + margin-left: 0.5rem; +} + +.heading-3{ + +} + +/* ********************************** */ +/* GALLERY */ +/* ********************************** */ +.gallery { + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-template-rows: repeat(2, 30rem); + gap: 1.5rem; + margin-bottom: 3rem; +} + +.gallery img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.gallery-img-3 { + grid-column: 2/4; + grid-row: 1/3; +} + +/* ********************************** */ +/* SPECIALS */ +/* ********************************** */ +.specials { + display: flex; + flex-direction: column; + gap: 2rem; + margin-bottom: 3rem; +} + +/* ********************************** */ +/* BLOGS */ +/* ********************************** */ +.blogs { + display: flex; + flex-direction: column; + gap: 2rem; +} + +.container-blogs { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 3rem; +} + +.card-blog { + display: flex; + flex-direction: column; + gap: 2rem; +} + +.card-blog .container-img { + border-radius: 2rem; + cursor: pointer; + position: relative; + overflow: hidden; +} + +.button-group-blog { + position: absolute; + bottom: 1.5rem; + right: -2.5rem; + + display: flex; + gap: 0.7rem; + z-index: -1; + transition: all 0.3s ease; +} + +.card-blog:hover .button-group-blog { + z-index: 0; + right: 1.5rem; +} + +.button-group-blog span { + background-color: #fff; + padding: 1rem; + border-radius: 50%; + transition: all 0.4s ease; + + display: flex; + align-items: center; + justify-content: center; +} + +.button-group-blog span i { + font-size: 1.3rem; +} + +.button-group-blog span:hover { + background-color: var(--primary-color); +} + +.button-group-blog span:hover i { + color: #fff; +} + +.content-blog h3 { + font-size: 1.8rem; + margin-bottom: 1.7rem; + color: var(--dark-color); + font-weight: 800; +} + +.content-blog h3:hover { + color: var(--primary-color); + cursor: pointer; +} + +.content-blog p { + margin-top: 1rem; + font-size: 1.4rem; + color: #777; + text-align: justify; +} + +.content-blog span { + color: var(--primary-color); + font-size: 1.3rem; +} + +.btn-read-more { + padding: 1rem 3rem; + background-color: var(--primary-color); + color: #fff; + text-transform: uppercase; + font-size: 1.4rem; + border-radius: 30px; + margin: 3rem 0 5rem; + display: inline-block; + cursor: pointer; +} + +.btn-read-more:hover { + background-color: var(--dark-color); +} + +/* ********************************** */ +/* FOOTER */ +/* ********************************** */ + +.footer { + background-color: var(--primary-color); +} + +.container-footer { + display: flex; + flex-direction: column; + gap: 4rem; + padding: 3rem; +} + +.menu-footer { + display: grid; + grid-template-columns: repeat(3, 1fr) 30rem; + gap: 3rem; + justify-items: center; +} + +.title-footer { + font-weight: 600; + font-size: 1.6rem; + text-transform: uppercase; +} + +.contact-info, +.information, +.my-account, +.newsletter { + display: flex; + flex-direction: column; + gap: 2rem; +} + +.contact-info ul, +.information ul, +.my-account ul { + display: flex; + flex-direction: column; + gap: 1rem; +} + +.contact-info ul li, +.information ul li, +.my-account ul li { + list-style: none; + color: #fff; + font-size: 1.4rem; + font-weight: 300; +} + +.information ul li a, +.my-account ul li a { + text-decoration: none; + color: #fff; + font-weight: 300; +} + +.information ul li a:hover, +.my-account ul li a:hover { + color: var(--dark-color); +} + +.social-icons { + display: flex; + gap: 1.5rem; +} + +.social-icons span { + border-radius: 50%; + width: 3rem; + height: 3rem; + + display: flex; + align-items: center; + justify-content: center; +} + +.social-icons span i { + color: #fff; + font-size: 1.2rem; +} + +.facebook { + background-color: #3b5998; +} + +.twitter { + background-color: #00acee; +} + +.youtube { + background-color: #c4302b; +} + +.pinterest { + background-color: #c8232c; +} + +.instagram { + background: linear-gradient( + #405de6, + #833ab4, + #c13584, + #e1306c, + #fd1d1d, + #f56040, + #fcaf45 + ); +} + +.content p { + font-size: 1.4rem; + color: #fff; + font-weight: 300; +} + +.content input { + outline: none; + background: none; + border: none; + border-bottom: 2px solid #d2b495; + cursor: pointer; + padding: 0.5rem 0 1.2rem; + color: var(--dark-color); + display: block; + margin-bottom: 3rem; + margin-top: 2rem; + width: 100%; + font-family: inherit; +} + +.content input::-webkit-input-placeholder { + color: #eee; +} + +.content button { + border: none; + background-color: #000; + color: #fff; + text-transform: uppercase; + padding: 1rem 3rem; + border-radius: 2rem; + font-size: 1.4rem; + font-family: inherit; + cursor: pointer; + font-weight: 600; +} + +.content button:hover { + background-color: var(--background-color); + color: var(--primary-color); +} + +.copyright { + display: flex; + justify-content: space-between; + padding-top: 2rem; + + border-top: 1px solid #d2b495; +} + +.copyright p { + font-weight: 400; + font-size: 1.6rem; +} + +/* ********************************** */ +/* MEDIA QUERIES -- 768px */ +/* ********************************** */ +@media (max-width: 768px) { + html { + font-size: 55%; + } + + .hero { + padding: 2rem; + } + + .customer-support { + display: none; + } + + .content-shopping-cart { + display: none; + } + + .navbar { + padding: 1rem 2rem; + + } + + .navbar .fa-bars { + display: block; + color: #fff; + font-size: 3rem; + } + + .menu { + display: none; + } + + .content-banner { + max-width: 50rem; + margin: 0 auto; + padding: 25rem 0; + } + + .container-features { + grid-template-columns: repeat(2, 1fr); + padding: 3rem 2rem; + } + + .card-feature { + padding: 2rem; + } + + .heading-1 { + font-size: 2.4rem; + } + + .card-category { + height: 12rem; + } + + .card-category p { + font-size: 2rem; + text-align: center; + line-height: 1; + } + + .card-category span { + font-size: 1.4rem; + } + + .container-options { + align-items: center; + } + + .container-options span { + text-align: center; + padding: 1rem 2rem; + } + + .container-products { + grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr)); + } + + .gallery { + grid-template-rows: repeat(2, 15rem); + } + + .container-blogs { + overflow: hidden; + grid-template-columns: 1fr 1fr; + + height: 52rem; + } + + .menu-footer { + grid-template-columns: repeat(2, 1fr); + } + + .copyright { + flex-direction: column; + justify-content: center; + align-items: center; + gap: 1.5rem; + } +} + +/* ********************************** */ +/* MEDIA QUERIES -- 468px */ +/* ********************************** */ +@media (max-width: 468px) { + html { + font-size: 42.5%; + } + + .content-banner { + max-width: 50rem; + padding: 22rem 0; + } + + .heading-1 { + font-size: 2.8rem; + } + + .card-feature { + flex-direction: column; + border-radius: 2rem; + } + + .feature-content { + align-items: center; + } + + .feature-content p { + font-size: 1.4rem; + text-align: center; + } + + .feature-content span { + font-size: 1.6rem; + text-align: center; + } + + .container-options span { + font-size: 1.8rem; + padding: 1rem 1.5rem; + font-weight: 500; + } + + .container-products { + grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr)); + gap: 1rem; + } + + .container-img .discount { + font-size: 2rem; + } + + .content-card-product h3 { + font-size: 2.2rem; + } + + .gallery { + grid-template-rows: repeat(2, 20rem); + } + + .blogs { + padding: 2rem; + } + + .container-blogs { + grid-template-columns: 1fr; + height: 75rem; + } + + .content-blog h3 { + font-size: 2.4rem; + } + + .content-blog span { + font-size: 1.8rem; + } + + .content-blog p { + font-size: 2.2rem; + } + + .btn-read-more{ + font-size: 1.8rem; + } + + .contact-info ul, + .information ul, + .my-account ul{ + display: none; + } + + .contact-info { + align-items: center; + } + + .menu-footer{ + grid-template-columns: 1fr; + } + + .content p{ + font-size: 1.6rem; + } +} + +.icono-cliente { + font-size: 4rem; /* Cambia el tamaño del icono ajustando el valor de '2rem' según sea necesario */ + align-items: center; + text-align: left; + color:var(--primary-color) +} + +.icono-User { + font-size: 4rem; /* Cambia el tamaño del icono ajustando el valor de '2rem' según sea necesario */ + align-items: center; + text-align: left; + color:var(--primary-color) + +} +.icono-basket { + font-size: 4.5rem; /* Cambia el tamaño del icono ajustando el valor de '2rem' según sea necesario */ + align-items: center; + text-align: left; + color:var(--primary-color) + +} + +.icono-lupa{ + font-size: 2rem; /* Cambia el tamaño del icono ajustando el valor de '2rem' según sea necesario */ + align-items: center; + text-align: left; + color: white; +} + +.icono-basket-card{ + font-size: 2.5rem; /* Cambia el tamaño del icono ajustando el valor de '2rem' según sea necesario */ + align-items: center; + text-align: left; + color:var(--primary-color) +} + +.icono-heart{ + font-size: 2rem; /* Cambia el tamaño del icono ajustando el valor de '2rem' según sea necesario */ + align-items: center; + text-align: left; + color:var(--primary-color) +} +.icono-eye{ + font-size: 2rem; /* Cambia el tamaño del icono ajustando el valor de '2rem' según sea necesario */ + align-items: center; + text-align: left; + color:var(--primary-color) +} + + +.enlace a { + font-weight: 500; + color: var(--texto-claro); + transition: 0.3s; + } + + .enlace a:hover { + color: var(--color-primario); + } + +.enlaceNombre{ + margin-left: 500px; +} + + + +.content-card-product h3:hover { + color: var(--primary-color); +} + +.add-cart { + justify-self: start; + border: 2px solid var(--primary-color); + padding: 1rem; + border-radius: 50%; + cursor: pointer; + transition: all 0.4s ease; + + display: flex; + align-items: center; + justify-content: center; +} + +.add-cart:hover { + background-color: var(--primary-color); +} + +.add-cart i { + font-size: 1.5rem; + color: var(--primary-color); +} + +.add-cart:hover i { + color: #fff; +} + +.content-card-product .price { + justify-self: end; + align-self: center; + + font-size: 1.7rem; + font-weight: 600; +} + +.content-card-product .price span { + font-size: 1.5rem; + font-weight: 400; + text-decoration: line-through; + color: #777; + margin-left: 0.5rem; +} + + +/* ************* ICONOS ************* */ + + +.icono-cliente { + font-size: 4rem; /* Cambia el tamaño del icono ajustando el valor de '2rem' según sea necesario */ + align-items: center; + text-align: left; + color:var(--primary-color) +} + +.icono-User { + font-size: 4rem; /* Cambia el tamaño del icono ajustando el valor de '2rem' según sea necesario */ + align-items: center; + text-align: left; + color:var(--primary-color) + +} +.icono-basket { + font-size: 4.5rem; /* Cambia el tamaño del icono ajustando el valor de '2rem' según sea necesario */ + align-items: center; + text-align: left; + color:var(--primary-color) +} + +.icono-lupa{ + font-size: 2rem; /* Cambia el tamaño del icono ajustando el valor de '2rem' según sea necesario */ + align-items: center; + text-align: left; + color: white; +} + +.icono-basket-card{ + font-size: 2.5rem; /* Cambia el tamaño del icono ajustando el valor de '2rem' según sea necesario */ + align-items: center; + text-align: left; + color:var(--primary-color) +} + +/* Estilos del contenedor principal de reservaciones */ +#contenedor_reservaciones { + display: flex; + flex-wrap: wrap; + justify-content: space-around; + padding-top: 10px; +} + +/* Estilos de cada tarjeta de reservación */ +.reservacion { + display: flex; /* Añadir esta propiedad para usar flexbox */ + width: 700px; + gap: 1.5rem; + height: 230px; + margin: 20px; + padding: 15px; + border: 1px solid #ccc; + border-radius: 10px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + background-color: #fff; +} + +/* Estilos para la imagen */ +.imagenPastel { + width: 300px; + height: 100%; /* Ajustar al 100% del contenedor padre */ + object-fit: cover; + background-repeat: no-repeat; + background-size: 100% auto; + border-radius: 8px; /* Añadir bordes redondeados solo a la izquierda */ +} + +/* Estilos para el texto */ +.reservaData { + width: 50%; + padding: 0 15px; /* Agregar relleno solo a los lados */ +} + +.reservacion h3 { + margin-top: 10px; + font-size: 18px; +} + +.reservacion p { + margin: 8px 0; +} + +/* Estilos del botón Eliminar Reservación */ +.eliminar-btn { + background-color: #8B374A; + color: #fff; + border: none; + padding: 8px 16px; + border-radius: 5px; + cursor: pointer; +} + +.eliminar-btn:hover { + background-color: #ff4646; +} + + +.eliminar-btn:hover { + background-color: #4b1e29; /* Cambia el color al pasar el cursor sobre el botón */ + } + + +.IniSesReserva{ + padding-top: 2rem; + padding-bottom: 10px; + border-bottom: 1px solid #e4e4e4; + display: flex; + align-items: center; + justify-content: space-between; + font-size: 24px; + font-weight: 300; +} + +.ReservaNull{ + padding-top: 2rem; + padding-bottom: 10px; + border-bottom: 1px solid #e4e4e4; + display: flex; + align-items: center; + justify-content: space-between; + font-size: 24px; + font-weight: 300; +} \ No newline at end of file diff --git a/frontend/src/AdminPackages/AdminVista.jsx b/frontend/src/AdminPackages/AdminVista.jsx new file mode 100644 index 0000000..9db4ed0 --- /dev/null +++ b/frontend/src/AdminPackages/AdminVista.jsx @@ -0,0 +1,342 @@ +import { useState, useEffect } from 'react'; + +import './AdminVista.css'; + +import viteLogo from '/vite.svg' +import Edicion1 from '/src/assets/Edicion21.jpg'; +import Edicion12 from '/src/assets/Edicion12.jpg'; +import Edicion13 from '/src/assets/Edicion13.jpg'; +import Edicion14 from '/src/assets/Edicion14.jpg'; +import Edicion15 from '/src/assets/Edicion15.jpg'; +import Edicion16 from '/src/assets/Edicion16.jpg'; +import otra_imagen from '/src/assets/Edicion2.jpg'; +import { RiCustomerService2Fill } from "react-icons/ri"; +import { FaUser } from "react-icons/fa"; +import { LuShoppingBasket } from "react-icons/lu"; +import { FaMagnifyingGlass } from "react-icons/fa6"; +import { CiHeart } from "react-icons/ci"; +import { FaRegEye } from "react-icons/fa"; +import { CiShare2 } from "react-icons/ci"; +import { useNavigate } from "react-router-dom"; +import axios from "axios"; +//imagenes de pastel de fresas +import pastel_fresa_original from "/src/assets/Pastel-fresa-original.png"; +import pastel_fresa_arcoiris from "/src/assets/Pastel-fresas-arcoiris.png"; +import pastel_fresa_oreo from "/src/assets/Pastel-fresas-oreo.png"; +import pastel_fresa_vainilla from "/src/assets/Pastel-fresas-vainilla.png"; + +import pastelZarza from "/src/assets/pastel-zarza.jpg" + + +function AdminVista() { + const [count, setCount] = useState(0); + const navigate = useNavigate(); + +const [pedidosDePasteles, setPedidosDePasteles] = useState([]); + +const [datosFormulario, setDatosFormulario] = useState( + {correo: '', + password: '', + nombre: '' +}); + + +const mostrarAlertaLogOut = () => { + Swal.fire({ + title: "Cerrar Sesión", + text: "¿Seguro que quieres cerrar sesión?", + icon: "warning", + showCancelButton: true, // Mostrar el botón de cancelar + confirmButtonColor: "#3085d6", // Color del botón de confirmar + cancelButtonColor: "#d33", // Color del botón de cancelar + confirmButtonText: "Sí", // Texto del botón de confirmar + cancelButtonText: "No", // Texto del botón de cancelar + }).then((result) => { + if (result.isConfirmed) { + Swal.fire({ + text: "Sesión cerrada correctamente. Adiós " + nombreUsuario + "", + icon: "success", + }); + cerrarSesion(); + } + }); + }; + + const [nombreUsuario, setNombreUsuario]=useState(""); + + const obtenerNombreUsuario = async () => { + try { + // Realizar la llamada al backend para obtener el nombre del usuario + const response = await axios.post('http://localhost:4567/frontend/obtenerUsuario', { datosFormulario }); + setNombreUsuario(response.data.nombre); + console.log(nombreUsuario); + console.log("hola"+ datosFormulario.nombre); + } catch (error) { + // Manejar el error según tus necesidades + console.error("Error al obtener el nombre del usuario", error); + } + }; + + useEffect(() => { + // Llamar a la función al cargar la página + obtenerNombreUsuario(); + obtenerPedidosDePasteles(); + console.log("obtuvo los pedidos"); + }, []); + + const cerrarSesion = async () => { + try { + // Realizar la llamada al backend para obtener el nombre del usuario + const response = await axios.post('http://localhost:4567/frontend/cerrarSesion', { datosFormulario }); + setNombreUsuario(response.data.nombre); + console.log(nombreUsuario); + obtenerNombreUsuario(); + //mostrarAlertaLogOut(); + } catch (error) { + // Manejar el error según tus necesidades + console.error("Error al obtener el nombre del usuario", error); + } + }; + + const mostrarAlertaPedidoFallidaLogin=()=>{ + Swal.fire({ + title: "Pedido Fallida", + text: "Inicia Sesion para poder hacer un pedido.", + icon: "error", + button: "Aceptar" + + }); + }; + + + + const obtenerPedidosDePasteles = async () => { + try { + const response = await axios.post('http://localhost:4567/frontend/obtenerPedidosDePastelesAdmin'); + console.log("Pedidos de pasteles obtenidos:", response.data.pedidos_de_pasteles); + // Almacena los pedidos de pasteles en el estado + setPedidosDePasteles(response.data.pedidos_de_pasteles); + } catch (error) { + console.error("Error al obtener pedidos de pasteles:", error); + } + }; + + + + + + const redirectToLogin = () => { + + navigate("/Login"); + }; + + const redirectToPedidos = () => { + navigate("/Pedidos"); + + }; + + + const [pedidos, setPedidos] = useState([]); + + const generarPedidos = () => { + if (nombreUsuario == null) { + return ( +

Inicia Sesión para poder ver tus pedidos de pasteles.

+ ); + } else { + if (pedidosDePasteles.length === 0) { + return ( +

No tienes pedidos de pasteles en este momento.

+ ); + } else { + return ( +
+ {pedidosDePasteles.map(pedido => ( +
+ + +
+ {pedido.nombre_pastel === 'Pastel de Fresas' ? ( + pedido.relleno === 'Original' ? : + pedido.relleno === 'Arcoiris' ? : + pedido.relleno === 'Oreo' ? : + pedido.relleno === 'Vainilla' ? : + // Si el relleno no coincide con ninguno de los anteriores + ) : pedido.nombre_pastel === 'Pastel Chocolate Blanco' ? ( + + + ) : pedido.nombre_pastel === 'Pastel Cajeta' ? ( + + + ): pedido.nombre_pastel === 'Pastel de Chocolate' ? ( + + + ): pedido.nombre_pastel === 'Pastel Frambuesa' ? ( + + + ) : pedido.nombre_pastel === 'Pastel de Moka' ? ( + + + ) : pedido.nombre_pastel === 'Pastel de Zanahoria' ? ( + + + ):( + // Si el pastel no es de fresas ni de chocolate blanco + )} +
+ + +
+

{pedido.nombre_pastel}

+

Precio del pastel: ${pedido.precio}

+

Tamaño: {pedido.tamaño}

+

Estatus: {pedido.estatus}

+

Inscripción: {pedido.inscripcion}

+

Relleno: {pedido.relleno}

+ +
+
+ ))} +
+ ); + } + } + }; + + return ( + <> + +
+
+
+
+ +
+ + Soporte al cliente + 123-456-7890 + +
+
+ +
+ +

Pasteleria RAPI

+
+ +
+ + +
+ +
+
+
+
+ +
+ +
+
+ + +
+
+ {generarPedidos()} +
+
+ + + + + + + ) + } + + export default AdminVista \ No newline at end of file diff --git a/frontend/src/Sesion/LoginForm.jsx b/frontend/src/Sesion/LoginForm.jsx index dc2df3b..03608cd 100644 --- a/frontend/src/Sesion/LoginForm.jsx +++ b/frontend/src/Sesion/LoginForm.jsx @@ -22,6 +22,10 @@ const redirectToRecuperarContraseña = () => { navigate("/RecuperarContraseña"); }; + const redirectToAdminVista = () => { + navigate("/AdminVista"); + }; + const mostrarAlertaLoginExitoso=(nomb)=>{ Swal.fire({ title: "Inicio de sesion Exitoso", @@ -33,6 +37,7 @@ const redirectToRecuperarContraseña = () => { if(respuesta){ if(datosFormulario.correo == "admin" && datosFormulario.password == "12345"){ console.log("asdasddsdasdasdadadsasddasdasdassa"); + redirectToAdminVista(); }else{ redirectToHome(); } diff --git a/frontend/src/main.jsx b/frontend/src/main.jsx index 166752b..72cd56a 100644 --- a/frontend/src/main.jsx +++ b/frontend/src/main.jsx @@ -3,6 +3,7 @@ import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; import ReactDOM from 'react-dom'; import { createRoot } from 'react-dom/client'; import AppInicio from './AppInicio.jsx' +import AdminVista from './AdminPackages/AdminVista.jsx' import PersPastel1 from './PersPastel1.jsx' import Pedidos from './Pedidos.jsx' import Pasteles from './Pasteles.jsx' @@ -33,6 +34,7 @@ createRoot(document.getElementById('root')).render( }/> }/> }/> + }/> ,