init commit

src/components/AnimatedDropdown.jsx

@@ -0,0 +1,92 @@
+import { useState, useRef, useEffect, cloneElement } from 'react';
+import { Button } from 'react-bootstrap';
+import { AnimatePresence, motion as _motion } from 'framer-motion';
+import '../css/AnimatedDropdown.css';
+
+const AnimatedDropdown = ({
+  trigger,
+  icon,
+  variant = "secondary",
+  className = "",
+  buttonStyle = "",
+  show,
+  onToggle,
+  onMouseEnter,
+  onMouseLeave,
+  children
+}) => {
+  const isControlled = show !== undefined;
+  const [open, setOpen] = useState(false);
+  const triggerRef = useRef(null);
+  const dropdownRef = useRef(null);
+
+  const actualOpen = isControlled ? show : open;
+
+  const toggle = () => {
+    const newState = !actualOpen;
+    if (!isControlled) setOpen(newState);
+    onToggle?.(newState);
+  };
+
+  useEffect(() => {
+    const handleClickOutside = (e) => {
+      if (
+        dropdownRef.current &&
+        !dropdownRef.current.contains(e.target) &&
+        !triggerRef.current?.contains(e.target)
+      ) {
+        if (!isControlled) setOpen(false);
+        onToggle?.(false);
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [isControlled, onToggle]);
+
+  const triggerElement = trigger
+    ? (typeof trigger === "function"
+      ? trigger({ onClick: toggle, ref: triggerRef })
+      : cloneElement(trigger, { onClick: toggle, ref: triggerRef }))
+    : (
+      <Button
+        ref={triggerRef}
+        variant={variant}
+        className={`circle-btn ${buttonStyle}`}
+        onClick={toggle}
+      >
+        {icon}
+      </Button>
+    );
+
+  const dropdownClasses = `dropdown-menu show shadow rounded-4 px-2 py-2 ${className}`;
+
+  return (
+    <div
+      className={`position-relative d-inline-block`}
+      onClick={toggle}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+      ref={triggerRef}
+    >
+      {triggerElement}
+
+      <AnimatePresence>
+        {actualOpen && (
+          <_motion.div
+            ref={dropdownRef}
+            initial={{ opacity: 0, scale: 0.98 }}
+            animate={{ opacity: 1, scale: 1 }}
+            exit={{ opacity: 0, scale: 0.98 }}
+            transition={{ duration: 0.15 }}
+            className={dropdownClasses}
+          >
+            {typeof children === "function" ? children({ closeDropdown: () => toggle(false) }) : children}
+          </_motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+};
+
+export default AnimatedDropdown;

src/components/AnimatedDropend.jsx

@@ -0,0 +1,122 @@
+import { useState, useRef, useEffect, cloneElement } from 'react';
+import { Button } from 'react-bootstrap';
+import { AnimatePresence, motion as _motion } from 'framer-motion';
+import '@/css/AnimatedDropdown.css';
+
+const AnimatedDropend = ({
+  trigger,
+  icon,
+  variant = "secondary",
+  className = "",
+  buttonStyle = "",
+  show,
+  onToggle,
+  onMouseEnter,
+  onMouseLeave,
+  children
+}) => {
+  const isControlled = show !== undefined;
+  const [open, setOpen] = useState(false);
+  const triggerRef = useRef(null);
+  const dropdownRef = useRef(null);
+
+  const actualOpen = isControlled ? show : open;
+
+  const toggle = (forceValue) => {
+    const newState = typeof forceValue === "boolean" ? forceValue : !actualOpen;
+    if (!isControlled) setOpen(newState);
+    onToggle?.(newState);
+  };
+
+  useEffect(() => {
+    const handleClickOutside = (e) => {
+      if (
+        dropdownRef.current &&
+        !dropdownRef.current.contains(e.target) &&
+        !triggerRef.current?.contains(e.target)
+      ) {
+        if (!isControlled) setOpen(false);
+        onToggle?.(false);
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [isControlled, onToggle]);
+
+  const handleMouseEnter = () => {
+    if (!isControlled) setOpen(true);
+    onToggle?.(true);
+    onMouseEnter?.();
+  };
+
+  const handleMouseLeave = () => {
+    if (!isControlled) setOpen(false);
+    onToggle?.(false);
+    onMouseLeave?.();
+  };
+
+  const triggerElement = trigger
+    ? (typeof trigger === "function"
+      ? trigger({ 
+        onClick: e => {
+          e.stopPropagation();
+          toggle();
+        }, 
+        ref: triggerRef 
+      })
+      : cloneElement(trigger, { 
+        onClick: e => {
+          e.stopPropagation();
+          toggle();
+        }, 
+        ref: triggerRef 
+      }))
+    : (
+      <Button
+        ref={triggerRef}
+        variant={variant}
+        className={`circle-btn ${buttonStyle}`}
+        onClick={toggle}
+      >
+        {icon}
+      </Button>
+    );
+
+  const dropdownClasses = `dropdown-menu show shadow rounded-4 px-2 py-2 ${className}`;
+
+  return (
+    <div
+      className="position-relative d-inline-block dropend"
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      ref={triggerRef}
+    >
+      {triggerElement}
+
+      <AnimatePresence>
+        {actualOpen && (
+          <_motion.div
+            ref={dropdownRef}
+            initial={{ opacity: 0, x: -10 }}
+            animate={{ opacity: 1, x: 0 }}
+            exit={{ opacity: 0, x: -10 }}
+            transition={{ duration: 0.15 }}
+            className={dropdownClasses}
+            style={{
+              position: 'absolute',
+              top: '0',
+              left: '100%',
+              zIndex: 1000,
+              whiteSpace: 'nowrap'
+            }}
+          >
+            {typeof children === "function" ? children({ closeDropdown: () => toggle(false) }) : children}
+          </_motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+};
+
+export default AnimatedDropend;

src/components/Auth/IfAuthenticated.jsx

@@ -0,0 +1,8 @@
+import { useAuth } from "@/hooks/useAuth.js";
+
+const IfAuthenticated = ({ children }) => {
+  const { authStatus } = useAuth();
+  return authStatus === "authenticated" ? children : null;
+};
+
+export default IfAuthenticated;

src/components/Auth/IfNotAuthenticated.jsx

@@ -0,0 +1,8 @@
+import { useAuth } from "@/hooks/useAuth.js";
+
+const IfNotAuthenticated = ({ children }) => {
+  const { authStatus } = useAuth();
+  return authStatus === "unauthenticated" ? children : null;
+};
+
+export default IfNotAuthenticated;

src/components/Auth/IfRole.jsx

@@ -0,0 +1,13 @@
+import { useAuth } from "@/hooks/useAuth.js";
+
+const IfRole = ({ roles, children }) => {
+  const { user, authStatus } = useAuth();
+
+  if (authStatus !== "authenticated") return null;
+
+  const userRole = user?.role;
+  
+  return roles.includes(userRole) ? children : null;
+};
+
+export default IfRole;

src/components/Auth/LoginForm.jsx

@@ -0,0 +1,120 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faUser } from '@fortawesome/free-solid-svg-icons';
+import { Form, Button, Alert, FloatingLabel, Row, Col } from 'react-bootstrap';
+import PasswordInput from '@/components/Auth/PasswordInput.jsx';
+
+import { useContext, useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import { AuthContext } from "@/context/AuthContext.jsx";
+
+import CustomContainer from '@/components/CustomContainer.jsx';
+import ContentWrapper from '@/components/ContentWrapper.jsx';
+
+import '@/css/LoginForm.css';
+
+const LoginForm = () => {
+    const { login, error } = useContext(AuthContext);
+    const navigate = useNavigate();
+
+    const [formState, setFormState] = useState({
+        emailOrUserName: "",
+        password: "",
+        keepLoggedIn: false
+    });
+
+    const handleChange = (e) => {
+        const { name, value } = e.target;
+        setFormState((prev) => ({ ...prev, [name]: value }));
+    };
+
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+    
+        const isEmail = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formState.emailOrUserName);
+
+        const loginBody = {
+            password: formState.password,
+            keepLoggedIn: Boolean(formState.keepLoggedIn),
+        };
+    
+        if (isEmail) {
+            loginBody.email = formState.emailOrUserName;
+        } else {
+            loginBody.userName = formState.emailOrUserName;
+        }
+    
+        try {
+            await login(loginBody);
+            navigate("/");
+        } catch (err) {
+            console.error("Error de login:", err.message);
+        }
+    };
+
+    return (
+        <CustomContainer>
+            <ContentWrapper>
+                <div className="login-card card shadow p-5 rounded-5 mx-auto col-12 col-md-8 col-lg-6 col-xl-5 d-flex flex-column gap-4">
+                    <h1 className="text-center">Inicio de sesión</h1>
+                    <Form className="d-flex flex-column gap-5" onSubmit={handleSubmit}>
+                        <div className="d-flex flex-column gap-3">
+                            <FloatingLabel
+                                controlId="floatingUsuario"
+                                label={
+                                    <>
+                                        <FontAwesomeIcon icon={faUser} className="me-2" />
+                                        Usuario o Email
+                                    </>
+                                }
+                            >
+                                <Form.Control
+                                    type="text"
+                                    placeholder=""
+                                    name="emailOrUserName"
+                                    value={formState.emailOrUserName}
+                                    onChange={handleChange}
+                                    className="rounded-4"
+                                />
+                            </FloatingLabel>
+
+                            <PasswordInput
+                                value={formState.password}
+                                onChange={handleChange}
+                                name="password"
+                            />
+
+                            <div className="d-flex flex-column flex-sm-row justify-content-between align-items-center gap-2">
+                                <Form.Check
+                                    type="checkbox"
+                                    name="keepLoggedIn"
+                                    label="Mantener sesión iniciada"
+                                    className="text-secondary"
+                                    value={formState.keepLoggedIn}
+                                    onChange={(e) => { formState.keepLoggedIn = e.target.checked; setFormState({ ...formState }) }}
+                                />
+                                {/*<Link disabled to="#" className="muted">
+                                    Olvidé mi contraseña
+                                </Link>*/}
+                            </div>
+                        </div>
+
+                        {error && (
+                            <Alert variant="danger" className="text-center py-2 mb-0">
+                                {error}
+                            </Alert>
+                        )}
+
+                        <div className="text-center">
+                            <Button type="submit" className="w-75 padding-4 rounded-4 border-0 shadow-sm login-button">
+                                Iniciar sesión
+                            </Button>
+                        </div>
+                    </Form>
+                </div>
+            </ContentWrapper>
+        </CustomContainer>
+    );
+};
+
+
+export default LoginForm;

src/components/Auth/PasswordInput.jsx

@@ -0,0 +1,48 @@
+import { useState } from 'react';
+import { Form, FloatingLabel, Button } from 'react-bootstrap';
+import '@/css/PasswordInput.css';
+
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faEye, faEyeSlash, faKey } from '@fortawesome/free-solid-svg-icons';
+
+const PasswordInput = ({ value, onChange, name = "password" }) => {
+  const [show, setShow] = useState(false);
+
+  const toggleShow = () => setShow(prev => !prev);
+
+  return (
+    <div className="position-relative w-100">
+      <FloatingLabel
+        controlId="passwordInput"
+        label={
+          <>
+            <FontAwesomeIcon icon={faKey} className="me-2" />
+            Contraseña
+          </>
+        }
+      >
+        <Form.Control
+          type={show ? "text" : "password"}
+          name={name}
+          value={value}
+          placeholder=""
+          onChange={onChange}
+          className="rounded-4 pe-5"
+        />
+      </FloatingLabel>
+
+      <Button
+        variant="link"
+        className="show-button position-absolute end-0 top-50 translate-middle-y me-2"
+        onClick={toggleShow}
+        aria-label="Mostrar contraseña"
+        tabIndex={-1}
+        style={{ zIndex: 2 }}
+      >
+        <FontAwesomeIcon icon={show ? faEyeSlash : faEye} className='fa-lg' />
+      </Button>
+    </div>
+  );
+};
+
+export default PasswordInput;

src/components/Auth/ProtectedRoute.jsx

@@ -0,0 +1,18 @@
+import { Navigate } from "react-router-dom";
+import { useAuth } from "@/hooks/useAuth.js";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faSpinner } from "@fortawesome/free-solid-svg-icons";
+
+const ProtectedRoute = ({ minimumRoles, children }) => {
+  const { authStatus } = useAuth();
+
+  if (authStatus === "checking") return <FontAwesomeIcon icon={faSpinner} />; // o un loader si quieres
+  if (authStatus === "unauthenticated") return <Navigate to="/login" replace />;
+  if (authStatus === "authenticated" && minimumRoles) {
+    const userRole = JSON.parse(localStorage.getItem("user"))?.role;
+    if (!minimumRoles.includes(userRole)) return <Navigate to="/" replace />;
+  }
+  return children;
+};
+
+export default ProtectedRoute;

src/components/ContentWrapper.jsx

@@ -0,0 +1,15 @@
+import PropTypes from 'prop-types';
+
+const ContentWrapper = ({ children }) => {
+    return (
+        <div className="container-xl">
+            {children}
+        </div>
+    );
+}
+
+ContentWrapper.propTypes = {
+    children: PropTypes.node.isRequired,
+}
+
+export default ContentWrapper;

src/components/CustomCarousel.jsx

@@ -0,0 +1,47 @@
+import Slider from 'react-slick';
+import '@/css/CustomCarousel.css';
+
+const CustomCarousel = ({ images }) => {
+    const settings = {
+        dots: false,
+        infinite: true,
+        speed: 500,
+        slidesToShow: 2,
+        slidesToScroll: 1,
+        arrows: false,
+        autoplay: true,
+        autoplaySpeed: 3000,
+        responsive: [
+            {
+                breakpoint: 768, // móviles
+                settings: {
+                    slidesToShow: 1,
+                    arrows: false,
+                    autoplay: true,
+                    autoplaySpeed: 3000,
+                    dots: false,
+                    infinite: true,
+                    speed: 500
+                }
+            }
+        ]
+    };
+
+    return (
+        <div className="my-4">
+            <Slider {...settings}>
+                {images.map((src, index) => (
+                    <div key={index} className='carousel-img-wrapper'>
+                        <img
+                            src={src}
+                            alt={`slide-${index}`}
+                            className="carousel-img"
+                        />
+                    </div>
+                ))}
+            </Slider>
+        </div>
+    );
+};
+
+export default CustomCarousel;

src/components/CustomContainer.jsx

@@ -0,0 +1,15 @@
+import PropTypes from 'prop-types';
+
+const CustomContainer = ({ children }) => {
+    return (
+        <main className="px-4 py-5">
+            {children}
+        </main>
+    );
+}
+
+CustomContainer.propTypes = {
+    children: PropTypes.node.isRequired,
+}
+
+export default CustomContainer;

src/components/CustomModal.jsx

@@ -0,0 +1,26 @@
+import { faXmark } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Modal, Button } from "react-bootstrap";
+
+const CustomModal = ({ show, onClose, title, children }) => {
+    return (
+        <Modal show={show} onHide={onClose} size="xl" centered>
+            <Modal.Header className='justify-content-between rounded-top-4'>
+                <Modal.Title>{title}</Modal.Title>
+                <Button variant='transparent' onClick={onClose}>
+                    <FontAwesomeIcon icon={faXmark} className='close-button fa-xl' />
+                </Button>
+            </Modal.Header>
+            <Modal.Body className="rounded-bottom-4 p-0"
+                style={{
+                    maxHeight: '80vh',
+                    overflowY: 'auto',
+                    padding: '1rem',
+                }}>
+                {children}
+            </Modal.Body>
+        </Modal>
+    );
+}
+
+export default CustomModal;

src/components/Footer.jsx

@@ -0,0 +1,56 @@
+import React, { useState, useEffect } from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faEnvelope } from '@fortawesome/free-solid-svg-icons';
+import '@/css/Footer.css';
+import { faGithub } from '@fortawesome/free-brands-svg-icons';
+
+const Footer = () => {
+  const [heart, setHeart] = useState('💜');
+
+  useEffect(() => {
+    const hearts = ["❤️", "💛", "🧡", "💚", "💙", "💜"];
+    const randomHeart = () => hearts[Math.floor(Math.random() * hearts.length)];
+
+    const interval = setInterval(() => {
+      setHeart(randomHeart());
+    }, 3000);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <footer className="footer d-flex flex-column align-items-center gap-5 pt-5 px-4">
+      <div className="footer-columns w-100" style={{ maxWidth: '900px' }}>
+        <div className="footer-column">
+          <h4 className="footer-title">Contenido del footer</h4>
+          <div className="contact-info p-4">
+            <a
+              href="https://github.com/Gallardo7761"
+              target="_blank"
+              className='text-break d-block'
+              rel="noopener noreferrer"
+            >
+              <FontAwesomeIcon icon={faGithub} className="fa-icon me-2 " />
+              Gallardo7761
+            </a>
+            <a href="mailto:jose@miarma.net" className="text-break d-block">
+              <FontAwesomeIcon icon={faEnvelope} className="fa-icon me-2" />
+              jose@miarma.net
+            </a>
+          </div>
+        </div>
+      </div>
+
+      <div className="footer-bottom w-100 py-5 text-center">
+        <h6 id="devd" className='m-0'>
+          Hecho con <span className="heart-anim">{heart}</span> por{' '}
+          <a href="https://gallardo.dev" target="_blank" rel="noopener noreferrer">
+            Gallardo7761
+          </a>
+        </h6>
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;

src/components/Header.jsx

@@ -0,0 +1,19 @@
+import '@/css/Header.css';
+import { Link } from 'react-router-dom';
+
+const Header = () => {
+
+    return (
+        <header className={`text-center bg-img`}>
+            <div className="m-0 p-5 mask">
+                <div className="d-flex flex-column justify-content-center align-items-center h-100">
+                    <Link to='/' className='text-decoration-none'>
+                        <h1 className='header-title m-0 text-white shadowed'>Tu página web</h1>
+                    </Link>
+                </div>
+            </div>
+        </header>
+    );
+}
+
+export default Header;

src/components/LoadingIcon.jsx

@@ -0,0 +1,10 @@
+import { faSpinner } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+const LoadingIcon = () => {
+    return (
+        <FontAwesomeIcon icon={faSpinner} className='fa-spin fa-lg' />
+    );
+}
+
+export default LoadingIcon;

src/components/NavBar.jsx

@@ -0,0 +1,133 @@
+import { useEffect, useState } from 'react';
+import { Link } from 'react-router-dom';
+import { useAuth } from "@/hooks/useAuth";
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import {
+  faSignIn,
+  faUser,
+  faSignOut,
+  faHouse,
+  faList,
+  faBullhorn,
+  faFile
+} from '@fortawesome/free-solid-svg-icons';
+
+import '@/css/NavBar.css';
+
+import ThemeButton from '@/components/ThemeButton.jsx';
+
+import IfAuthenticated from '@/components/Auth/IfAuthenticated.jsx';
+import IfNotAuthenticated from '@/components/Auth/IfNotAuthenticated.jsx';
+import IfRole from '@/components/Auth/IfRole.jsx';
+
+import { Navbar, Nav, Container } from 'react-bootstrap';
+import AnimatedDropdown from '@/components/AnimatedDropdown.jsx';
+
+import { CONSTANTS } from '@/util/constants.js';
+
+const NavBar = () => {
+  const { user, logout } = useAuth();
+  const [showingUserDropdown, setShowingUserDropdown] = useState(false);
+  const [expanded, setExpanded] = useState(false);
+  const [isLg, setIsLg] = useState(window.innerWidth >= 992);
+
+  useEffect(() => {
+    const handleResize = () => {
+      setIsLg(window.innerWidth >= 992 && window.innerWidth < 1200);
+    };
+  
+    handleResize(); // inicializar
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  useEffect(() => {
+    const handleResize = () => {
+      if (window.innerWidth >= 992) {
+        setExpanded(false);
+      }
+    };
+
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  });
+
+
+  return (
+    <Navbar expand="lg" sticky="top" expanded={expanded} onToggle={() => setExpanded(!expanded)}>
+      <Container fluid>
+        <Navbar.Toggle aria-controls="navbar" className="custom-toggler">
+          <svg width="30" height="30" viewBox="0 0 30 30">
+            <path
+              d="M4 7h22M4 15h22M4 23h22"
+              stroke="var(--navbar-link-color)"
+              strokeWidth="3"
+              strokeLinecap="round"
+              strokeMiterlimit="10"
+            />
+          </svg>
+        </Navbar.Toggle>
+
+        <Navbar.Collapse id="main-navbar">
+          <Nav className="me-auto gap-2">
+            <Nav.Link
+              as={Link}
+              to="/"
+              title="Inicio"
+              href="/"
+              className={`text-truncate ${expanded ? "mt-3" : ""}`}
+              onClick={() => setExpanded(false)}
+            >
+              <FontAwesomeIcon icon={faHouse} className="me-2" />
+              Inicio
+            </Nav.Link>
+            
+            <div className="d-lg-none mt-2 ms-2">
+              <ThemeButton onlyIcon={isLg} />
+            </div>
+          </Nav>
+        </Navbar.Collapse>
+
+        <div className="d-none d-lg-block me-3">
+          <ThemeButton onlyIcon={isLg} />
+        </div>
+
+        <Nav className="d-flex flex-md-row flex-column gap-2 ms-auto align-items-center">
+          <IfAuthenticated>
+            <AnimatedDropdown
+              className='end-0 position-absolute'
+              show={showingUserDropdown}
+              onMouseEnter={() => setShowingUserDropdown(true)}
+              onMouseLeave={() => setShowingUserDropdown(false)}
+              onToggle={(isOpen) => setShowingUserDropdown(isOpen)}
+              trigger={
+                <Link className="nav-link dropdown-toggle fw-bold">
+                  @{user?.user_name}
+                </Link>
+              }
+            >
+              <Link to="/perfil" className="text-muted dropdown-item nav-link">
+                <FontAwesomeIcon icon={faUser} className="me-2" />
+                Mi perfil
+              </Link>
+              <hr className="dropdown-divider" />
+              <Link to="#" className="dropdown-item nav-link" onClick={logout}>
+                <FontAwesomeIcon icon={faSignOut} className="me-2" />
+                Cerrar sesión
+              </Link>
+            </AnimatedDropdown>
+          </IfAuthenticated>
+
+          <IfNotAuthenticated>
+            <Nav.Link as={Link} to="/login" title="Iniciar sesión">
+              <FontAwesomeIcon icon={faSignIn} className="me-2" />
+              Iniciar sesión
+            </Nav.Link>
+          </IfNotAuthenticated>
+        </Nav>
+      </Container>
+    </Navbar>
+  );
+};
+
+export default NavBar;

src/components/NotificationModal.jsx

@@ -0,0 +1,69 @@
+import PropTypes from 'prop-types';
+import { Modal, Button } from 'react-bootstrap';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import {
+  faCircleCheck,
+  faCircleXmark,
+  faCircleExclamation,
+  faCircleInfo
+} from '@fortawesome/free-solid-svg-icons';
+
+const iconMap = {
+  success: faCircleCheck,
+  danger: faCircleXmark,
+  warning: faCircleExclamation,
+  info: faCircleInfo
+};
+
+const NotificationModal = ({
+  show,
+  onClose,
+  title,
+  message,
+  variant = "info",
+  buttons = [{ label: "Aceptar", variant: "primary", onClick: onClose }]
+}) => {
+  return (
+    <Modal show={show} onHide={onClose} centered>
+      <Modal.Header closeButton className={`bg-${variant} ${variant === 'info' ? 'text-dark' : 'text-white'}`}>
+        <Modal.Title>
+          <FontAwesomeIcon icon={iconMap[variant] || faCircleInfo} className="me-2" />
+          {title}
+        </Modal.Title>
+      </Modal.Header>
+
+      <Modal.Body>
+        <p className="mb-0">{message}</p>
+      </Modal.Body>
+
+      <Modal.Footer>
+        {buttons.map((btn, index) => (
+          <Button
+            key={index}
+            variant={btn.variant || "primary"}
+            onClick={btn.onClick || onClose}
+          >
+            {btn.label}
+          </Button>
+        ))}
+      </Modal.Footer>
+    </Modal>
+  );
+};
+
+NotificationModal.propTypes = {
+  show: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+  title: PropTypes.string.isRequired,
+  message: PropTypes.string.isRequired,
+  variant: PropTypes.oneOf(['success', 'danger', 'warning', 'info']),
+  buttons: PropTypes.arrayOf(
+    PropTypes.shape({
+      label: PropTypes.string.isRequired,
+      variant: PropTypes.string,
+      onClick: PropTypes.func
+    })
+  )
+};
+
+export default NotificationModal;

src/components/SearchToolbar.jsx

@@ -0,0 +1,43 @@
+import { faFilter, faFilePdf, faPlus } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import AnimatedDropdown from '@components/AnimatedDropdown';
+import Button from 'react-bootstrap/Button';
+import { CONSTANTS } from '@/util/constants';
+import IfRole from '@/components/Auth/IfRole';
+
+const SearchToolbar = ({ searchTerm, onSearchChange, filtersComponent, onCreate, onPDF }) => (
+    <div className="sticky-toolbar search-toolbar-wrapper">
+        <div className="search-toolbar">
+            <input
+                type="text"
+                className="search-input"
+                placeholder="Buscar..."
+                value={searchTerm}
+                onChange={(e) => onSearchChange(e.target.value)}
+            />
+            <div className="toolbar-buttons">
+                {filtersComponent && (
+                    <AnimatedDropdown variant="transparent" icon={<FontAwesomeIcon icon={faFilter} className='fa-md' />}>
+                        {filtersComponent}
+                    </AnimatedDropdown>
+                )}
+                {onPDF && (
+                    <IfRole roles={[CONSTANTS.ROLE_ADMIN, CONSTANTS.ROLE_DEV]}>
+                        <Button variant="transparent" onClick={onPDF}>
+                            <FontAwesomeIcon icon={faFilePdf} className='fa-md' />
+                        </Button>
+                    </IfRole>
+                )}
+                {onCreate && (
+                    <IfRole roles={[CONSTANTS.ROLE_ADMIN, CONSTANTS.ROLE_DEV]}>
+                        <Button variant="transparent" onClick={onCreate}>
+                            <FontAwesomeIcon icon={faPlus} className='fa-md' />
+                        </Button>
+                    </IfRole>
+                )}
+            </div>
+        </div>
+    </div>
+);
+
+export default SearchToolbar;

src/components/ThemeButton.jsx

@@ -0,0 +1,18 @@
+import { useTheme } from "@/hooks/useTheme.js";
+import "@/css/ThemeButton.css";
+
+export default function ThemeButton({ className, onlyIcon}) {
+    const { theme, toggleTheme } = useTheme();
+    
+    return (
+        <button className={`theme-toggle ${className}`} onClick={toggleTheme}>
+            {
+                onlyIcon ? (
+                    theme === "dark" ? ("🌞") : ("🌙")
+                ) : (
+                    theme === "dark" ? ("🌞 tema claro") : ("🌙 tema oscuro")
+                )
+            }
+        </button>
+    );
+}