[REPO REFACTOR]: changed to a better git repository structure with branches

src/pages/Anuncios.jsx

@@ -0,0 +1,207 @@
+import { useState } from 'react';
+import { useConfig } from '../hooks/useConfig';
+import { DataProvider } from '../context/DataContext';
+import { useDataContext } from '../hooks/useDataContext';
+import { usePaginatedList } from '../hooks/usePaginatedList';
+
+import CustomContainer from '../components/CustomContainer';
+import ContentWrapper from '../components/ContentWrapper';
+import LoadingIcon from '../components/LoadingIcon';
+import SearchToolbar from '../components/SearchToolbar';
+import PaginatedCardGrid from '../components/PaginatedCardGrid';
+import AnuncioCard from '../components/Anuncios/AnuncioCard';
+import AnunciosFilter from '../components/Anuncios/AnunciosFilter';
+
+import { errorParser } from '../util/parsers/errorParser';
+import CustomModal from '../components/CustomModal';
+import { Button } from 'react-bootstrap';
+import { EditorProvider } from 'react-simple-wysiwyg';
+
+const PAGE_SIZE = 10;
+
+const Anuncios = () => {
+  const { config, configLoading } = useConfig();
+
+  if (configLoading) return <p><LoadingIcon /></p>;
+
+  const reqConfig = {
+    baseUrl: `${config.apiConfig.baseUrl}${config.apiConfig.endpoints.announces.all}`,
+    params: {
+      _sort: 'created_at',
+      _order: 'desc',
+    },
+  };
+
+  return (
+    <DataProvider config={reqConfig}>
+      <AnunciosContent reqConfig={reqConfig} />
+    </DataProvider>
+  );
+};
+
+const AnunciosContent = ({ reqConfig }) => {
+  const { data, dataLoading, dataError, postData, putData, deleteData } = useDataContext();
+  const [creatingAnuncio, setCreatingAnuncio] = useState(false);
+  const [tempAnuncio, setTempAnuncio] = useState(null);
+  const [error, setError] = useState(null);
+  const [deleteTargetId, setDeleteTargetId] = useState(null);
+
+  const {
+    filtered,
+    searchTerm,
+    setSearchTerm,
+    filters,
+    setFilters,
+  } = usePaginatedList({
+    data,
+    pageSize: PAGE_SIZE,
+    filterFn: (anuncio, filters) => {
+      if (filters.todos) return true;
+      const matchesPrioridad =
+        (filters.baja && anuncio.priority === 0) ||
+        (filters.media && anuncio.priority === 1) ||
+        (filters.alta && anuncio.priority === 2);
+      const createdAt = new Date(anuncio.created_at);
+      const now = new Date();
+      const matchesFecha =
+        (filters.ultimos7 && (now - createdAt) / (1000 * 60 * 60 * 24) <= 7) ||
+        (filters.esteMes &&
+          createdAt.getMonth() === now.getMonth() &&
+          createdAt.getFullYear() === now.getFullYear());
+      return matchesPrioridad || matchesFecha;
+    },
+    searchFn: (anuncio, term) => {
+      const normalized = term.toLowerCase();
+      return (
+        anuncio.body?.toLowerCase().includes(normalized) ||
+        anuncio.published_by_name?.toLowerCase().includes(normalized)
+      );
+    },
+    initialFilters: {
+      todos: true,
+      baja: true,
+      media: true,
+      alta: true,
+      ultimos7: true,
+      esteMes: true,
+    },
+  });
+
+  const handleCreate = () => {
+    setCreatingAnuncio(true);
+    setTempAnuncio({
+      announce_id: null,
+      body: 'Nuevo anuncio',
+      priority: 1,
+      published_by_name: 'Admin',
+    });
+    document.querySelector('.cards-grid')?.scrollTo({ top: 0, behavior: 'smooth' });
+  };
+
+  const handleCancelCreate = () => {
+    setCreatingAnuncio(false);
+    setTempAnuncio(null);
+  };
+
+  const handleCreateSubmit = async (nuevo) => {
+    try {
+      await postData(reqConfig.baseUrl, nuevo);
+      setError(null);
+      setCreatingAnuncio(false);
+      setTempAnuncio(null);
+    } catch (err) {
+      setTempAnuncio({ ...nuevo });
+      setError(errorParser(err));
+    }
+  };
+
+  const handleEditSubmit = async (editado, id) => {
+    try {
+      await putData(`${reqConfig.baseUrl}/${id}`, editado);
+      setError(null);
+    } catch (err) {
+      setError(errorParser(err));
+    }
+  };
+
+  const handleDelete = async (id) => {
+    setDeleteTargetId(id);
+  };
+
+  if (dataLoading) return <p className="text-center my-5"><LoadingIcon /></p>;
+  if (dataError) return <p className="text-danger text-center my-5">{dataError}</p>;
+
+  return (
+    <CustomContainer>
+      <ContentWrapper>
+        <div className="d-flex justify-content-between align-items-center m-0 p-0">
+          <h1 className='section-title'>Tablón de Anuncios</h1>
+        </div>
+
+        <hr className="section-divider" />
+
+        <SearchToolbar
+          searchTerm={searchTerm}
+          onSearchChange={setSearchTerm}
+          filtersComponent={<AnunciosFilter filters={filters} onChange={setFilters} />}
+          onCreate={handleCreate}
+        />
+
+        <PaginatedCardGrid
+          items={filtered}
+          creatingItem={creatingAnuncio}
+          renderCreatingCard={() => (
+            <EditorProvider>
+              <AnuncioCard
+                anuncio={tempAnuncio}
+                isNew
+                onCreate={handleCreateSubmit}
+                onCancel={handleCancelCreate}
+                error={error}
+                onClearError={() => setError(null)}
+              />
+            </EditorProvider>
+          )}
+          renderCard={(anuncio) => (
+            <AnuncioCard
+              key={anuncio.announce_id}
+              anuncio={anuncio}
+              onUpdate={(a, id) => handleEditSubmit(a, id)}
+              onDelete={() => handleDelete(anuncio.announce_id)}
+              error={error}
+              onClearError={() => setError(null)}
+            />
+          )}
+        />
+
+        <CustomModal
+          title="Confirmar eliminación"
+          show={deleteTargetId !== null}
+          onClose={() => setDeleteTargetId(null)}
+        >
+          <p className='p-3'>¿Estás seguro de que quieres eliminar el anuncio?</p>
+          <div className="d-flex justify-content-end gap-2 mt-3 p-3">
+            <Button variant="secondary" onClick={() => setDeleteTargetId(null)}>Cancelar</Button>
+            <Button
+              variant="danger"
+              onClick={async () => {
+                try {
+                  await deleteData(`${reqConfig.baseUrl}/${deleteTargetId}`);
+                  setSearchTerm("");
+                  setDeleteTargetId(null);
+                } catch (err) {
+                  setError(errorParser(err));
+                }
+              }}
+            >
+              Confirmar
+            </Button>
+          </div>
+        </CustomModal>
+
+      </ContentWrapper>
+    </CustomContainer>
+  );
+};
+
+export default Anuncios;

src/pages/Balance.jsx

@@ -0,0 +1,44 @@
+import { useConfig } from '../hooks/useConfig';
+import { DataProvider } from '../context/DataContext';
+import { useDataContext } from '../hooks/useDataContext';
+
+import CustomContainer from '../components/CustomContainer';
+import ContentWrapper from '../components/ContentWrapper';
+import LoadingIcon from '../components/LoadingIcon';
+import BalanceReport from '../components/Balance/BalanceReport';
+
+const Balance = () => {
+  const { config, configLoading } = useConfig();
+
+  if (configLoading || !config) return <p className="text-center my-5"><LoadingIcon /></p>;
+
+  const reqConfig = {
+    baseUrl: config.apiConfig.baseUrl + "/v1/balance/with-totals"
+  };
+
+  return (
+    <DataProvider config={reqConfig}>
+      <BalanceContent />
+    </DataProvider>
+  );
+};
+
+const BalanceContent = () => {
+  const { data, dataLoading, dataError } = useDataContext();
+
+  if (dataLoading) return <p className="text-center my-5"><LoadingIcon /></p>;
+  if (dataError) return <p className="text-danger text-center my-5">{dataError}</p>;
+  if (!data || !data.id) return <p className="text-center my-5">No se encontró el balance.</p>;
+
+  return (
+    <CustomContainer>
+      <ContentWrapper>
+        <h1 className="section-title">Resumen del Balance</h1>
+        <hr className="section-divider" />
+        <BalanceReport balance={data} />
+      </ContentWrapper>
+    </CustomContainer>
+  );
+};
+
+export default Balance;

src/pages/Building.jsx

@@ -0,0 +1,17 @@
+import { useLocation } from 'react-router-dom';
+import '../css/Building.css';
+
+export default function Building() {
+  const location = useLocation();
+
+  if (location.pathname === '/') return null;
+
+  return (
+    <div className="building-container d-flex flex-column align-items-center justify-content-center text-center py-5 px-3">
+      <div className="building-icon">🚧</div>
+      <div className="building-title">Esta página está en construcción</div>
+      <div className="building-subtitle">Estamos trabajando para traértela pronto 🌱</div>
+    </div>
+
+  );
+}

src/pages/Correo.jsx

@@ -0,0 +1,118 @@
+import { useState, useEffect } from 'react';
+import Split from 'react-split';
+import { useMediaQuery } from 'react-responsive';
+
+import Sidebar from '../components/Correo/Sidebar';
+import MailListMobile from '../components/Correo/MailListMobile';
+import MailList from '../components/Correo/MailList';
+import MailView from '../components/Correo/MailView';
+import MobileToolbar from '../components/Correo/MobileToolbar';
+import ContentWrapper from '../components/ContentWrapper';
+
+import '../css/Correo.css';
+import '../css/CorreoMobile.css';
+
+import { useConfig } from '../hooks/useConfig';
+import LoadingIcon from '../components/LoadingIcon';
+import { useData } from '../hooks/useData';
+
+const Correo = () => {
+  const { config, configLoading } = useConfig();
+
+  if (configLoading) return <p><LoadingIcon /></p>;
+
+  return (
+    <CorreoContent
+      baseUrl={config.apiConfig.baseUrl}
+      endpoint={config.apiConfig.endpoints.mail.all}
+    />
+  );
+};
+
+const CorreoContent = ({ baseUrl, endpoint }) => {
+  const isMobile = useMediaQuery({ maxWidth: 900 });
+  const [folder, setFolder] = useState("INBOX");
+  const [emails, setEmails] = useState([]);
+  const [selectedEmail, setSelectedEmail] = useState(null);
+  const [viewingMail, setViewingMail] = useState(false);
+
+  const { getData, postData } = useData({});
+
+  const fetchMails = async (folderName) => {
+    const url = `${baseUrl}${endpoint}/${folderName}`;
+    const { data, error } = await getData(url);
+    if (error) {
+      console.error("Error cargando correos:", error);
+      setEmails([]);
+    } else {
+      const mails = data?.emails || data || [];
+      setEmails(mails);
+    }
+  };
+
+  useEffect(() => {
+    fetchMails(folder);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [folder]);
+
+  const handleSelect = (mail, index) => {
+    setSelectedEmail({ ...mail, index });
+    setViewingMail(true);
+  };
+
+  const handleSend = async (mailData) => {
+    const url = `${baseUrl}${endpoint}/send`;
+    try {
+      await postData(url, mailData);
+      setViewingMail(false);
+      fetchMails(folder);
+    } catch (error) {
+      console.error("Error enviando correo:", error);
+    }
+  }
+
+  if (!emails) return <p className="text-center my-5"><LoadingIcon /></p>;
+
+  if (isMobile) {
+    return (
+      <ContentWrapper>
+        <MobileToolbar
+          isViewingMail={viewingMail}
+          onBack={() => setViewingMail(false)}
+          onCompose={() => alert("Redactar...")}
+          className="mt-3 px-3 sticky-toolbar"
+        />
+        {!viewingMail ? (
+          <MailListMobile
+            emails={emails}
+            onSelect={handleSelect}
+            selectedEmail={selectedEmail}
+            className="px-3"
+          />
+        ) : (
+          <MailView email={selectedEmail} />
+        )}
+      </ContentWrapper>
+    );
+  }
+
+  return (
+    <div className="correo-page">
+      <Split className="split-wrapper" sizes={[45, 55]} minSize={[300, 300]} gutterSize={8} snapOffset={0}>
+        <div className="mail-nav-pane">
+          <div className="mail-nav-inner">
+            <Sidebar onFolderChange={setFolder} onMailSend={handleSend} />
+            <MailList
+              emails={emails}
+              onSelect={handleSelect}
+              selectedEmail={selectedEmail}
+            />
+          </div>
+        </div>
+        <MailView email={selectedEmail} />
+      </Split>
+    </div>
+  );
+};
+
+export default Correo;

src/pages/Documentacion.jsx

@@ -0,0 +1,122 @@
+import { useRef, useState } from 'react';
+import { useConfig } from '../hooks/useConfig';
+import { DataProvider } from '../context/DataContext';
+import { useDataContext } from '../hooks/useDataContext';
+import FileUpload from '../components/Documentacion/FileUpload';
+import File from '../components/Documentacion/File';
+import CustomContainer from '../components/CustomContainer';
+import ContentWrapper from '../components/ContentWrapper';
+import LoadingIcon from '../components/LoadingIcon';
+import IfRole from '../components/Auth/IfRole.jsx';
+import { CONSTANTS } from '../util/constants.js';
+import CustomModal from '../components/CustomModal.jsx';
+import { Button } from 'react-bootstrap';
+
+const Documentacion = () => {
+  const { config, configLoading } = useConfig();
+
+  if (configLoading) return <p><LoadingIcon /></p>;
+
+  const reqConfig = {
+    baseUrl: config.apiConfig.coreUrl + config.apiConfig.endpoints.files.all,
+    uploadUrl: config.apiConfig.coreUrl + config.apiConfig.endpoints.files.upload,
+    params: {
+      _sort: 'uploaded_at',
+      _order: 'desc'
+    }
+  };
+
+  return (
+    <DataProvider config={reqConfig}>
+      <DocumentacionContent reqConfig={reqConfig} />
+    </DataProvider>
+  );
+};
+
+const DocumentacionContent = ({ reqConfig }) => {
+  const { data, dataLoading, dataError, postData, deleteDataWithBody } = useDataContext();
+  const [deleteTarget, setDeleteTarget] = useState(null);
+  const fileUploadRef = useRef();
+
+  const handleSelectFiles = async (files) => {
+    const file = files[0];
+    if (!file || !reqConfig?.uploadUrl) return;
+
+    const file_name = file.name;
+    const mime_type = file.type || "application/octet-stream";
+    const uploaded_by = JSON.parse(localStorage.getItem("user"))?.user_id;
+    const context = 1;
+
+    const formData = new FormData();
+    formData.append("file", file);
+    formData.append("file_name", file_name);
+    formData.append("mime_type", mime_type);
+    formData.append("uploaded_by", uploaded_by);
+    formData.append("context", context);
+
+    try {
+      await postData(reqConfig.uploadUrl, formData);
+      fileUploadRef.current?.resetSelectedFiles();
+    } catch (err) {
+      console.error("Error al subir archivo:", err);
+    }
+  };
+
+  const handleDeleteFile = async (file) => {
+    setDeleteTarget(file);
+  };
+
+  return (
+    <CustomContainer className="py-4">
+      <ContentWrapper>
+        <h1 className="section-title mb-3">Documentación</h1>
+        <hr className="section-divider my-4" />
+
+        <IfRole roles={[CONSTANTS.ROLE_ADMIN, CONSTANTS.ROLE_DEV]}>
+          <FileUpload ref={fileUploadRef} onFilesSelected={handleSelectFiles} />
+        </IfRole>
+
+        {dataLoading ? (<LoadingIcon />) : (
+          <div className="mt-4 d-flex flex-wrap gap-3 justify-content-start">
+            {dataError && <p className="text-danger">Error al cargar los archivos.</p>}
+            {data?.length === 0 && <p>No hay documentos todavía.</p>}
+            {data?.filter(file => file.context === CONSTANTS.CONTEXT_HUERTOS)
+              .map((file, idx) => (
+                <File key={idx} file={file} onDelete={handleDeleteFile} />
+              ))
+            }
+          </div>
+        )}
+
+        <CustomModal
+          title="Confirmar eliminación"
+          show={deleteTarget !== null}
+          onClose={() => setDeleteTarget(null)}
+        >
+          <p className='p-3'>¿Estás seguro de que quieres eliminar el archivo?</p>
+          <div className="d-flex justify-content-end gap-2 mt-3 p-3">
+            <Button variant="secondary" onClick={() => setDeleteTarget(null)}>Cancelar</Button>
+            <Button
+              variant="danger"
+              onClick={async () => {
+                try {
+                  await deleteDataWithBody(`${reqConfig.baseUrl}/${deleteTarget.file_id}`, {
+                    file_path: deleteTarget.file_path
+                  });
+                  setDeleteTarget(null);
+                } catch (err) {
+                  console.error("Error al eliminar:", err.message);
+                }
+              }}
+            >
+              Confirmar
+            </Button>
+          </div>
+        </CustomModal>
+
+      </ContentWrapper>
+    </CustomContainer>
+  );
+};
+
+export default Documentacion;

src/pages/Gastos.jsx

@@ -0,0 +1,207 @@
+import { useState } from 'react';
+import { useConfig } from '../hooks/useConfig';
+import { DataProvider } from '../context/DataContext';
+import { useDataContext } from '../hooks/useDataContext';
+import { usePaginatedList } from '../hooks/usePaginatedList';
+
+import CustomContainer from '../components/CustomContainer';
+import ContentWrapper from '../components/ContentWrapper';
+import LoadingIcon from '../components/LoadingIcon';
+import SearchToolbar from '../components/SearchToolbar';
+import PaginatedCardGrid from '../components/PaginatedCardGrid';
+import PDFModal from '../components/PDFModal';
+import GastoCard from '../components/Gastos/GastoCard';
+import GastosFilter from '../components/Gastos/GastosFilter';
+import { GastosPDF } from '../components/Gastos/GastosPDF';
+
+import '../css/Ingresos.css';
+import { CONSTANTS } from '../util/constants';
+import { errorParser } from '../util/parsers/errorParser';
+import CustomModal from '../components/CustomModal';
+import { Button } from 'react-bootstrap';
+
+const PAGE_SIZE = 10;
+
+const Gastos = () => {
+  const { config, configLoading } = useConfig();
+
+  if (configLoading) return <p><LoadingIcon /></p>;
+
+  const reqConfig = {
+    baseUrl: `${config.apiConfig.baseUrl}${config.apiConfig.endpoints.expenses.all}`,
+    params: {
+      _sort: 'created_at',
+      _order: 'desc',
+    },
+  };
+
+  return (
+    <DataProvider config={reqConfig}>
+      <GastosContent reqConfig={reqConfig} />
+    </DataProvider>
+  );
+};
+
+const GastosContent = ({ reqConfig }) => {
+  const { data, dataLoading, dataError, postData, putData, deleteData } = useDataContext();
+  const [showPDFModal, setShowPDFModal] = useState(false);
+  const [creatingGasto, setCreatingGasto] = useState(false);
+  const [tempGasto, setTempGasto] = useState(null);
+  const [error, setError] = useState(null);
+  const [deleteTargetId, setDeleteTargetId] = useState(null);
+
+  const {
+    filtered,
+    searchTerm,
+    setSearchTerm,
+    filters,
+    setFilters,
+  } = usePaginatedList({
+    data,
+    pageSize: PAGE_SIZE,
+    initialFilters: {
+      todos: true,
+      banco: true,
+      caja: true
+    },
+    filterFn: (gasto, filters) => {
+      if (filters.todos) return true;
+      return (
+        (filters.banco && gasto.type === CONSTANTS.PAYMENT_TYPE_BANK) ||
+        (filters.caja && gasto.type === CONSTANTS.PAYMENT_TYPE_CASH)
+      );
+    },
+    searchFn: (gasto, term) => {
+      const normalized = term.toLowerCase();
+      return (
+        gasto.concept?.toLowerCase().includes(normalized) ||
+        gasto.supplier?.toLowerCase().includes(normalized) ||
+        gasto.invoice?.toLowerCase().includes(normalized)
+      );
+    }
+  });
+
+  const handleCreate = () => {
+    setCreatingGasto(true);
+    setTempGasto({
+      expense_id: null,
+      concept: '',
+      amount: 0.0,
+      supplier: '',
+      invoice: '',
+      type: 0
+    });
+    document.querySelector('.cards-grid')?.scrollTo({ top: 0, behavior: 'smooth' });
+  };
+
+  const handleCreateSubmit = async (nuevo) => {
+    try {
+      await postData(reqConfig.baseUrl, nuevo);
+      setError(null);
+      setCreatingGasto(false);
+      setTempGasto(null);
+    } catch (err) {
+      setTempGasto({ ...nuevo });
+      setError(errorParser(err));
+    }
+  };
+
+  const handleEditSubmit = async (editado, id) => {
+    try {
+      await putData(`${reqConfig.baseUrl}/${id}`, editado);
+      setError(null);
+    } catch (err) {
+      setError(errorParser(err));
+    }
+  };
+
+  const handleDelete = async (id) => {
+    setDeleteTargetId(id);
+  };
+
+  const handleCancelCreate = () => {
+    setCreatingGasto(false);
+    setTempGasto(null);
+    setError(null);
+  };
+
+  if (dataLoading) return <p className="text-center my-5"><LoadingIcon /></p>;
+  if (dataError) return <p className="text-danger text-center my-5">{dataError}</p>;
+
+  return (
+    <CustomContainer>
+      <ContentWrapper>
+        <div className="d-flex justify-content-between align-items-center m-0 p-0">
+          <h1 className="section-title">Lista de Gastos</h1>
+        </div>
+
+        <hr className="section-divider" />
+
+        <SearchToolbar
+          searchTerm={searchTerm}
+          onSearchChange={setSearchTerm}
+          filtersComponent={<GastosFilter filters={filters} onChange={setFilters} />}
+          onCreate={handleCreate}
+          onPDF={() => setShowPDFModal(true)}
+        />
+
+        <PaginatedCardGrid
+          items={filtered}
+          creatingItem={creatingGasto}
+          renderCreatingCard={() => (
+            <GastoCard
+              gasto={tempGasto}
+              isNew
+              onCreate={handleCreateSubmit}
+              onCancel={handleCancelCreate}
+              error={error}
+              onClearError={() => setError(null)}
+            />
+          )}
+          renderCard={(gasto) => (
+            <GastoCard
+              key={gasto.expense_id}
+              gasto={gasto}
+              onUpdate={handleEditSubmit}
+              onDelete={handleDelete}
+              error={error}
+              onClearError={() => setError(null)}
+            />
+          )}
+        />
+
+        <PDFModal show={showPDFModal} onClose={() => setShowPDFModal(false)} title="Vista previa del PDF">
+          <GastosPDF gastos={filtered} />
+        </PDFModal>
+
+        <CustomModal
+          title="Confirmar eliminación"
+          show={deleteTargetId !== null}
+          onClose={() => setDeleteTargetId(null)}
+        >
+          <p className='p-3'>¿Estás seguro de que quieres eliminar el gasto?</p>
+          <div className="d-flex justify-content-end gap-2 mt-3 p-3">
+            <Button variant="secondary" onClick={() => setDeleteTargetId(null)}>Cancelar</Button>
+            <Button
+              variant="danger"
+              onClick={async () => {
+                try {
+                  await deleteData(`${reqConfig.baseUrl}/${deleteTargetId}`);
+                  setSearchTerm("");
+                  setDeleteTargetId(null);
+                } catch (err) {
+                  setError(errorParser(err));
+                }
+              }}
+            >
+              Confirmar
+            </Button>
+          </div>
+        </CustomModal>
+
+      </ContentWrapper>
+    </CustomContainer>
+  );
+};
+
+export default Gastos;

src/pages/Home.jsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import '../css/Home.css';
+import Mapa3D from '../components/Mapa3D';
+import CustomContainer from '../components/CustomContainer';
+import ContentWrapper from '../components/ContentWrapper';
+import CustomCarousel from '../components/CustomCarousel';
+
+const Home = () => {
+  return (
+    <CustomContainer>
+      <section className="about-section">
+        <ContentWrapper>
+          <h1 className="section-title">Sobre nosotros</h1>
+          <hr className="section-divider" />
+          <div className="about-content">
+            <div className="text-content">
+              <p>
+                Nos dedicamos a cultivar una variedad de frutas y verduras, promoviendo la sostenibilidad,
+                la vida saludable y la convivencia entre los hortelanos. Nuestra comunidad está compuesta
+                por vecinos apasionados por la jardinería, el medio ambiente y la creación de zonas verdes en la ciudad.
+              </p>
+              <p>
+                Cada hortelano dispone de una parcela y puede optar a una parcela dentro del invernadero. Dentro
+                de las zonas comunes disponemos de árboles frutales.
+              </p>
+              <p>
+                Si quieres unirte a nuestra comunidad, tenemos una <strong>lista de espera</strong> y un sistema de 
+                <strong> solicitudes de alta</strong> que puedes ver {' '} <Link to="/lista-espera" className="link">aquí</Link>.
+                No dudes en ponerte en contacto con nosotros a través de nuestro correo electrónico para cualquier duda. 
+              </p>
+            </div>
+            <div className="img-content gallery-img">
+              <img className="about-img" src="/images/bg.png" alt="Huerto" />
+            </div>
+          </div>
+        </ContentWrapper>
+      </section>
+
+      <section className="gallery-section">
+        <ContentWrapper>
+          <h1 className="section-title">Un vistazo a los huertos...</h1>
+          <hr className="section-divider" />
+          <CustomCarousel images={[
+            "/images/huertos-1.jpg",
+            "/images/huertos-2.jpg",
+            "/images/huertos-3.jpg",
+            "/images/huertos-4.jpg",
+            "/images/huertos-5.jpg",
+            "/images/huertos-6.jpg"
+          ]} />
+        </ContentWrapper>
+      </section>
+
+      <section className="map-section">
+        <ContentWrapper>
+          <h1 className='section-title'>Dónde estamos</h1>
+          <hr className='section-divider' />
+          <div className="embed-responsive embed-responsive-16by9 col-sm-12">
+            <iframe
+              src="https://www.google.com/maps/embed?pb=!1m10!1m8!1m3!1d852.9089299216993!2d-5.964801462716831!3d37.32821983433692!3m2!1i1024!2i768!4f13.1!5e1!3m2!1ses!2ses!4v1719902018700!5m2!1ses!2ses"
+              style={{ width: '100%', height: '60vh', border: 0 }}
+              allowFullScreen={false}
+              loading="lazy"
+              referrerPolicy="no-referrer-when-downgrade"
+              title="Ubicación del huerto"
+              className='rounded-4'
+            ></iframe>
+          </div>
+        </ContentWrapper>
+      </section>
+    </CustomContainer>
+  );
+};
+
+export default Home;

src/pages/Ingresos.jsx

@@ -0,0 +1,230 @@
+import { useEffect, useState } from 'react';
+import { useConfig } from '../hooks/useConfig';
+import { DataProvider } from '../context/DataContext';
+import { useDataContext } from '../hooks/useDataContext';
+import { usePaginatedList } from '../hooks/usePaginatedList';
+
+import CustomContainer from '../components/CustomContainer';
+import ContentWrapper from '../components/ContentWrapper';
+import LoadingIcon from '../components/LoadingIcon';
+import SearchToolbar from '../components/SearchToolbar';
+import PaginatedCardGrid from '../components/PaginatedCardGrid';
+import PDFModal from '../components/PDFModal';
+
+import IngresoCard from '../components/Ingresos/IngresoCard';
+import IngresosFilter from '../components/Ingresos/IngresosFilter';
+import { IngresosPDF } from '../components/Ingresos/IngresosPDF';
+import { CONSTANTS } from '../util/constants';
+import { errorParser } from '../util/parsers/errorParser';
+
+import '../css/Ingresos.css';
+import CustomModal from '../components/CustomModal';
+import { Button } from 'react-bootstrap';
+
+const PAGE_SIZE = 10;
+
+const Ingresos = () => {
+  const { config, configLoading } = useConfig();
+
+  if (configLoading) return <p><LoadingIcon /></p>;
+
+  const reqConfig = {
+    baseUrl: config.apiConfig.baseUrl + config.apiConfig.endpoints.incomes.allWithNames,
+    rawUrl: config.apiConfig.baseUrl + config.apiConfig.endpoints.incomes.all,
+    membersUrl: config.apiConfig.baseUrl + config.apiConfig.endpoints.members.all,
+    params: {
+      _sort: 'created_at',
+      _order: 'desc'
+    }
+  };
+
+  return (
+    <DataProvider config={reqConfig}>
+      <IngresosContent reqConfig={reqConfig} />
+    </DataProvider>
+  );
+};
+
+const IngresosContent = ({ reqConfig }) => {
+  const { data, dataLoading, dataError, getData, postData, putData, deleteData } = useDataContext();
+  const [showPDFModal, setShowPDFModal] = useState(false);
+  const [creatingIngreso, setCreatingIngreso] = useState(false);
+  const [tempIngreso, setTempIngreso] = useState(null);
+  const [error, setError] = useState(null);
+  const [deleteTargetId, setDeleteTargetId] = useState(null);
+  const [members, setMembers] = useState([]);
+
+  useEffect(() => {
+    const fetchMembers = async () => {
+      try {
+        const membersData = await getData(reqConfig.membersUrl, { params: { _sort: 'name', _order: 'asc' } });
+        setMembers(membersData.data);
+      } catch (err) {
+        setError(errorParser(err));
+      }
+    };
+
+    fetchMembers();
+  }, [reqConfig.membersUrl, getData]);
+
+  const {
+    filtered,
+    searchTerm,
+    setSearchTerm,
+    filters,
+    setFilters
+  } = usePaginatedList({
+    data,
+    pageSize: PAGE_SIZE,
+    initialFilters: {
+      todos: true,
+      banco: true,
+      caja: true,
+      semestral: true,
+      anual: true
+    },
+    filterFn: (ingreso, filters) => {
+      if (filters.todos) return true;
+      const { banco, caja, semestral, anual } = filters;
+      const typeMatch = (banco && ingreso.type === CONSTANTS.PAYMENT_TYPE_BANK) || (caja && ingreso.type === CONSTANTS.PAYMENT_TYPE_CASH);
+      const freqMatch = (semestral && ingreso.frequency === CONSTANTS.PAYMENT_FREQUENCY_BIYEARLY) || (anual && ingreso.frequency === CONSTANTS.PAYMENT_FREQUENCY_YEARLY);
+      const typeFilters = [banco, caja].filter(Boolean).length;
+      const freqFilters = [semestral, anual].filter(Boolean).length;
+      if (typeFilters > 0 && freqFilters > 0) return typeMatch && freqMatch;
+      if (typeFilters > 0) return typeMatch;
+      if (freqFilters > 0) return freqMatch;
+      return false;
+    },
+    searchFn: (ingreso, term) => {
+      const normalized = term.toLowerCase();
+      return ingreso.concept?.toLowerCase().includes(normalized) || 
+             String(ingreso.member_number).includes(normalized) ||
+             ingreso.display_name?.toLowerCase().includes(normalized);
+    }
+  });
+
+  const handleCreate = () => {
+    setCreatingIngreso(true);
+    setTempIngreso({
+      income_id: null,
+      member_number: 0,
+      concept: '',
+      amount: 0.0,
+      frequency: CONSTANTS.PAYMENT_FREQUENCY_YEARLY,
+      type: CONSTANTS.PAYMENT_TYPE_BANK
+    });
+    document.querySelector('.cards-grid')?.scrollTo({ top: 0, behavior: 'smooth' });
+  };
+
+  const handleCancelCreate = () => {
+    setCreatingIngreso(false);
+    setTempIngreso(null);
+    setError(null);
+  };
+
+  const handleCreateSubmit = async (nuevo) => {
+    try {
+      await postData(reqConfig.rawUrl, nuevo);
+      setError(null);
+      setCreatingIngreso(false);
+      setTempIngreso(null);
+    } catch (err) {
+      setTempIngreso({ ...nuevo });
+      setError(errorParser(err));
+    }
+  };
+
+  const handleEditSubmit = async (editado, id) => {
+    try {
+      await putData(`${reqConfig.rawUrl}/${id}`, editado);
+      setError(null);
+    } catch (err) {
+      setError(errorParser(err));
+    }
+  };
+
+
+  const handleDelete = async (id) => {
+    setDeleteTargetId(id);
+  };
+
+  if (dataLoading) return <p className="text-center my-5"><LoadingIcon /></p>;
+  if (dataError) return <p className="text-danger text-center my-5">{dataError}</p>;
+
+  return (
+    <CustomContainer>
+      <ContentWrapper>
+        <div className="d-flex justify-content-between align-items-center m-0 p-0">
+          <h1 className="section-title">Lista de Ingresos</h1>
+        </div>
+        <hr className="section-divider" />
+
+        <SearchToolbar
+          searchTerm={searchTerm}
+          onSearchChange={setSearchTerm}
+          filtersComponent={<IngresosFilter filters={filters} onChange={setFilters} />}
+          onCreate={handleCreate}
+          onPDF={() => setShowPDFModal(true)}
+        />
+
+        <PaginatedCardGrid
+          items={filtered}
+          creatingItem={creatingIngreso}
+          renderCreatingCard={() => (
+            <IngresoCard
+              income={tempIngreso}
+              isNew
+              onCreate={handleCreateSubmit}
+              onCancel={handleCancelCreate}
+              error={error}
+              onClearError={() => setError(null)}
+              members={members}
+            />
+          )}
+          renderCard={(income) => (
+            <IngresoCard
+              key={income.income_id}
+              income={income}
+              onUpdate={(data, id) => handleEditSubmit(data, id)}
+              onDelete={() => handleDelete(income.income_id)}
+              error={error}
+              onClearError={() => setError(null)}
+            />
+          )}
+        />
+
+        <PDFModal show={showPDFModal} onClose={() => setShowPDFModal(false)} title="Vista previa del PDF">
+          <IngresosPDF ingresos={filtered} />
+        </PDFModal>
+
+        <CustomModal
+          title="Confirmar eliminación"
+          show={deleteTargetId !== null}
+          onClose={() => setDeleteTargetId(null)}
+        >
+          <p className='p-3'>¿Estás seguro de que quieres eliminar el ingreso?</p>
+          <div className="d-flex justify-content-end gap-2 mt-3 p-3">
+            <Button variant="secondary" onClick={() => setDeleteTargetId(null)}>Cancelar</Button>
+            <Button
+              variant="danger"
+              onClick={async () => {
+                try {
+                  await deleteData(`${reqConfig.rawUrl}/${deleteTargetId}`);
+                  setSearchTerm("");
+                  setDeleteTargetId(null);
+                } catch (err) {
+                  setError(errorParser(err));
+                }
+              }}
+            >
+              Confirmar
+            </Button>
+          </div>
+        </CustomModal>
+
+      </ContentWrapper>
+    </CustomContainer>
+  );
+};
+
+export default Ingresos;

src/pages/ListaEspera.jsx

@@ -0,0 +1,178 @@
+import { useEffect, useState } from 'react';
+import { Modal, Button } from 'react-bootstrap';
+import { useConfig } from '../hooks/useConfig';
+import { useAuth } from '../hooks/useAuth';
+import { useDataContext } from '../hooks/useDataContext';
+import { DataProvider } from '../context/DataContext';
+
+import List from '../components/List';
+import { DateParser } from '../util/parsers/dateParser';
+import CustomContainer from '../components/CustomContainer';
+import ContentWrapper from '../components/ContentWrapper';
+import LoadingIcon from '../components/LoadingIcon';
+import PreUserForm from '../components/Solicitudes/PreUserForm';
+import CustomModal from '../components/CustomModal';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faPencil } from '@fortawesome/free-solid-svg-icons';
+import IfNotAuthenticated from '../components/Auth/IfNotAuthenticated';
+import NotificationModal from '../components/NotificationModal';
+
+const ListaEspera = () => {
+  const { config, configLoading } = useConfig();
+
+  if (configLoading) return <p><LoadingIcon /></p>;
+
+  const reqConfig = {
+    baseUrl: config.apiConfig.baseUrl + config.apiConfig.endpoints.members.limitedWaitlist,
+    requestUrl: config.apiConfig.baseUrl + config.apiConfig.endpoints.requests.all,
+    preUsersUrl: config.apiConfig.baseUrl + config.apiConfig.endpoints.pre_users.all,
+    preUserValidationUrl: config.apiConfig.baseUrl + config.apiConfig.endpoints.pre_users.validation,
+    params: {}
+  };
+
+  return (
+    <DataProvider config={reqConfig}>
+      <ListaEsperaContent reqConfig={reqConfig} />
+    </DataProvider>
+  );
+};
+
+const ListaEsperaContent = ({ reqConfig }) => {
+  const { authStatus } = useAuth();
+  const { data, dataLoading, dataError, postDataValidated, postData } = useDataContext();
+
+  const [showWelcomeModal, setShowWelcomeModal] = useState(false);
+  const [showPreUserFormModal, setShowPreUserFormModal] = useState(false);
+  const [showConfirmationModal, setShowConfirmationModal] = useState(false);
+  const [validationErrors, setValidationErrors] = useState({});
+
+  useEffect(() => {
+    if (authStatus !== 'authenticated' && authStatus !== 'unauthenticated') return;
+
+    if (authStatus === 'authenticated') {
+      setShowWelcomeModal(false);
+      return;
+    }
+
+    const hasSeenModal = localStorage.getItem('welcomeModalSeen') === 'true';
+    if (!hasSeenModal) {
+      setShowWelcomeModal(true);
+      localStorage.setItem('welcomeModalSeen', 'true');
+    }
+  }, [authStatus]);
+
+  const handleRegisterSubmit = async (formData) => {
+    setValidationErrors({});
+
+    const { _, errors } = await postDataValidated(reqConfig.preUserValidationUrl, formData);
+
+    if (errors) {
+      setValidationErrors(errors);
+      return;
+    }
+
+    try {
+      const request = await postData(reqConfig.requestUrl, { type: 0, status: 0 });
+      const requestId = request?.request_id;
+      if (!requestId) throw new Error("No se pudo registrar la solicitud.");
+
+      await postData(reqConfig.preUsersUrl, {
+        ...formData,
+        request_id: requestId
+      });
+
+      setShowPreUserFormModal(false);
+      setShowConfirmationModal(true);
+    } catch (err) {
+      setValidationErrors({ general: err.message });
+    }
+  };
+
+  const handleOpenFormModal = () => {
+    setValidationErrors({});
+    setShowWelcomeModal(false);
+    setShowPreUserFormModal(true);
+  };
+
+  const mapped = [...(data ?? [])]
+    .sort((a, b) => new Date(a.created_at) - new Date(b.created_at))
+    .map((item) => ({
+      ...item,
+      created_at: DateParser.timestampToString(item.created_at)
+    }));
+
+  if (dataLoading) return <p className="text-center my-5"><LoadingIcon /></p>;
+  if (dataError) return <p className="text-danger text-center my-5">{dataError}</p>;
+
+  return (
+    <CustomContainer>
+      <ContentWrapper>
+        <div className="d-flex align-items-center m-0 p-0 justify-content-between">
+          <h1 className="section-title">Lista de Espera</h1>
+          <IfNotAuthenticated>
+            <Button variant="danger" onClick={handleOpenFormModal}>
+              <FontAwesomeIcon icon={faPencil} className="me-2" />
+              Apuntarme
+            </Button>
+          </IfNotAuthenticated>
+        </div>
+        <hr className="section-divider" />
+        <List datos={mapped} config={{ title: 'display_name', subtitle: 'created_at', showIndex: true }} />
+
+        {authStatus === 'unauthenticated' && (
+          <Modal show={showWelcomeModal} onHide={() => setShowWelcomeModal(false)}>
+            <Modal.Header closeButton>
+              <Modal.Title>¿Quieres unirte?</Modal.Title>
+            </Modal.Header>
+            <Modal.Body>
+              <p>
+                Puedes apuntarte a la lista de espera clicando en el botón de abajo. Una persona de la directiva revisará tu solicitud y se te notificará por email si entras o no.
+              </p>
+            </Modal.Body>
+            <Modal.Footer>
+              <Button variant="danger" onClick={() => setShowWelcomeModal(false)}>
+                Cerrar
+              </Button>
+              <Button variant="success" onClick={handleOpenFormModal}>
+                Apuntarme
+              </Button>
+            </Modal.Footer>
+          </Modal>
+        )}
+
+        <CustomModal
+          title="Solicitud de Huerto"
+          show={showPreUserFormModal}
+          onClose={() => {
+            setShowPreUserFormModal(false);
+            setValidationErrors({});
+          }}
+        >
+          <PreUserForm
+            userType={0}
+            plotNumber={0}
+            onSubmit={handleRegisterSubmit}
+            errors={validationErrors}
+          />
+        </CustomModal>
+
+        <NotificationModal
+          show={showConfirmationModal}
+          onClose={() => setShowConfirmationModal(false)}
+          title="Solicitud enviada"
+          message="Tu solicitud ha sido enviada correctamente. Te notificaremos por email si entras o no."
+          variant="success"
+          buttons={[
+            {
+              label: 'Aceptar',
+              variant: 'success',
+              onClick: () => setShowConfirmationModal(false)
+            }
+          ]}
+        />
+      </ContentWrapper>
+    </CustomContainer>
+  );
+};
+
+export default ListaEspera;

src/pages/Login.jsx

@@ -0,0 +1,9 @@
+import LoginForm from "../components/Auth/LoginForm.jsx";
+
+const Login = () => {
+    return (
+        <LoginForm />
+    );
+}
+
+export default Login;

src/pages/Perfil.jsx

@@ -0,0 +1,539 @@
+import { useConfig } from '../hooks/useConfig';
+import { useDataContext } from '../hooks/useDataContext';
+import { DataProvider } from '../context/DataContext';
+
+import CustomContainer from '../components/CustomContainer';
+import ContentWrapper from '../components/ContentWrapper';
+import LoadingIcon from '../components/LoadingIcon';
+
+import { Card, ListGroup, Form, FloatingLabel } from 'react-bootstrap';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import {
+  faUser, faIdCard, faEnvelope, faPhone, faHashtag,
+  faSeedling, faUserShield, faCalendar,
+  faUserSlash, faUserPlus,
+  faArrowRightFromBracket,
+  faCog,
+  faEyeSlash,
+  faEye,
+  faKey
+} from '@fortawesome/free-solid-svg-icons';
+
+import '../css/Perfil.css';
+
+import { useState } from 'react';
+import IngresoCard from '../components/Ingresos/IngresoCard';
+import SolicitudCard from '../components/Solicitudes/SolicitudCard';
+import CustomModal from '../components/CustomModal';
+import PreUserForm from '../components/Solicitudes/PreUserForm';
+import NotificationModal from '../components/NotificationModal';
+import { Button, Col, Row } from 'react-bootstrap';
+import AnimatedDropdown from '../components/AnimatedDropdown';
+import { useAuth } from '../hooks/useAuth';
+import { CONSTANTS } from '../util/constants';
+
+const parseDate = (date) => {
+  if (!date) return 'NO';
+  const d = new Date(date);
+  return `${d.getDate().toString().padStart(2, '0')}/${(d.getMonth() + 1).toString().padStart(2, '0')}/${d.getFullYear()}`;
+};
+
+const getPFP = (tipo) => {
+  const base = '/images/icons/';
+  const map = {
+    1: 'farmer.svg',
+    2: 'green_house.svg',
+    0: 'list.svg',
+    3: 'join.svg',
+    4: 'subvencion4.svg',
+    5: 'programmer.svg'
+  };
+  return base + (map[tipo] || 'farmer.svg');
+};
+
+const Perfil = () => {
+  const { config, configLoading } = useConfig();
+
+  if (configLoading || !config) return <p className="text-center my-5"><LoadingIcon /></p>;
+
+  const buildUrl = (base, endpoint, params = {}) => {
+    if (!endpoint) return null;
+    let url = base + endpoint;
+    for (const [key, value] of Object.entries(params)) {
+      url = url.replace(`:${key}`, value);
+    }
+    return url;
+  };
+
+  const reqConfig = {
+    baseUrl: `${config.apiConfig.baseUrl}${config.apiConfig.endpoints.members.profile}`,
+    myIncomesUrl: buildUrl(config.apiConfig.baseUrl, config.apiConfig.endpoints.incomes.myIncomes),
+    requestUrl: buildUrl(config.apiConfig.baseUrl, config.apiConfig.endpoints.requests.all),
+    preUsersUrl: buildUrl(config.apiConfig.baseUrl, config.apiConfig.endpoints.pre_users.all),
+    preUserValidationUrl: buildUrl(config.apiConfig.baseUrl, config.apiConfig.endpoints.pre_users.validation),
+    myRequestsUrl: buildUrl(config.apiConfig.baseUrl, config.apiConfig.endpoints.requests.myRequests),
+    changePasswordUrl: buildUrl(config.apiConfig.coreUrl, config.apiConfig.endpoints.auth.changePassword),
+    loginValidateUrl: buildUrl(config.apiConfig.coreUrl, config.apiConfig.endpoints.auth.loginValidate),
+  };
+
+  return (
+    <DataProvider config={reqConfig}>
+      <PerfilContent config={reqConfig} />
+    </DataProvider>
+  );
+};
+
+const PerfilContent = ({ config }) => {
+  const { data, dataLoading, dataError, postData, postDataValidated } = useDataContext();
+  const { logout } = useAuth();
+
+  const usuario = data?.member;
+  const myRequests = data?.requests ?? [];
+  const incomes = data?.payments ?? [];
+  const hasCollaborator = data?.hasCollaborator ?? false;
+  const hasCollaboratorRequest = data?.hasCollaboratorRequest ?? false;
+  const hasGreenHouse = data?.hasGreenHouse ?? false;
+  const hasGreenHouseRequest = data?.hasGreenHouseRequest ?? false;
+
+  const [showAddCollaboratorModal, setShowAddCollaboratorModal] = useState(false);
+  const [showRemoveCollaboratorModal, setShowRemoveCollaboratorModal] = useState(false);
+  const [feedbackModal, setFeedbackModal] = useState(null);
+  const closeFeedback = () => setFeedbackModal(null);
+
+  const [validationErrors, setValidationErrors] = useState({});
+
+  const [newPasswordData, setNewPasswordData] = useState({
+    currentPassword: "",
+    newPassword: "",
+    confirmNewPassword: ""
+  });
+
+  const [showOld, setShowOld] = useState(false);
+  const [showNew, setShowNew] = useState(false);
+  const [showConfirm, setShowConfirm] = useState(false);
+
+  const handleRequestUnregister = async () => {
+    try {
+      await postData(config.requestUrl, {
+        type: CONSTANTS.REQUEST_TYPE_UNREGISTER,
+        status: CONSTANTS.REQUEST_PENDING,
+        requested_by: usuario.user_id
+      });
+      setFeedbackModal({
+        title: 'Solicitud enviada',
+        message: 'Se ha enviado la solicitud de baja correctamente.',
+        variant: 'success',
+        onClick: closeFeedback
+      });
+    } catch (err) {
+      setFeedbackModal({
+        title: 'Error',
+        message: err.message,
+        variant: 'danger',
+        onClick: closeFeedback
+      });
+    }
+  };
+
+  const handleRequestGreenHouse = async () => {
+    try {
+      await postData(config.requestUrl, {
+        type: CONSTANTS.REQUEST_TYPE_ADD_GREENHOUSE,
+        status: CONSTANTS.REQUEST_PENDING,
+        requested_by: usuario.user_id
+      });
+      setFeedbackModal({
+        title: 'Solicitud enviada',
+        message: 'Se ha enviado la solicitud de invernadero correctamente.',
+        variant: 'success',
+        onClick: closeFeedback
+      });
+    } catch (err) {
+      setFeedbackModal({
+        title: 'Error',
+        message: err.message,
+        variant: 'danger',
+        onClick: closeFeedback
+      });
+    }
+  };
+
+  const handleRemoveGreenHouse = async () => {
+    try {
+      await postData(config.requestUrl, {
+        type: CONSTANTS.REQUEST_TYPE_REMOVE_GREENHOUSE,
+        status: CONSTANTS.REQUEST_PENDING,
+        requested_by: usuario.user_id
+      });
+      setFeedbackModal({
+        title: 'Solicitud enviada',
+        message: 'Se ha enviado la solicitud de baja de invernadero correctamente.',
+        variant: 'success',
+        onClick: closeFeedback
+      });
+    } catch (err) {
+      setFeedbackModal({
+        title: 'Error',
+        message: err.message,
+        variant: 'danger',
+        onClick: closeFeedback
+      });
+    }
+  };
+
+  const handleChange = (e) => {
+    setNewPasswordData({
+      ...newPasswordData,
+      [e.target.name]: e.target.value
+    });
+  }
+
+  const handleChangePassword = async () => {
+    try {
+      const validOldPassword = await postData(config.loginValidateUrl, {
+        userId: usuario.user_id,
+        password: newPasswordData.currentPassword
+      });
+      if (!validOldPassword.valid) throw new Error("La contraseña actual es incorrecta.");
+      if (newPasswordData.newPassword !== newPasswordData.confirmNewPassword) throw new Error("Las contraseñas no coinciden.");
+      if (newPasswordData.newPassword.length < 8) throw new Error("La nueva contraseña debe tener al menos 8 caracteres.");
+
+      const response = await postData(config.changePasswordUrl, {
+        userId: usuario.user_id,
+        newPassword: newPasswordData.newPassword
+      });
+
+      if (!response) throw new Error("Error al cambiar la contraseña.");
+      setNewPasswordData({
+        currentPassword: "",
+        newPassword: "",
+        confirmNewPassword: ""
+      });
+
+      setFeedbackModal({
+        title: 'Contraseña cambiada',
+        message: 'Tu contraseña ha sido cambiada correctamente.',
+        variant: 'success',
+        onClick: () => {
+          closeFeedback();
+          logout();
+        }
+      });
+    } catch (err) {
+      setFeedbackModal({
+        title: 'Error',
+        message: err.message,
+        variant: 'danger',
+        onClick: closeFeedback
+      });
+    }
+  }
+
+  const mappedRequests = myRequests.map(r => ({
+    ...r,
+    request_type: r.request_type ?? r.type,
+    request_status: r.request_status ?? r.status,
+    request_created_at: r.request_created_at ?? r.created_at
+  }));
+
+  if (dataLoading) return <p className="text-center my-5"><LoadingIcon /></p>;
+  if (dataError) return <p className="text-danger text-center my-5">{dataError}</p>;
+
+  return (
+    <CustomContainer>
+      <ContentWrapper>
+        <Row className='gap-2 justify-content-center'>
+          <Col xs={12} md={4} className="mb-4">
+            <Card className="shadow-sm rounded-4 perfil-card">
+              <Card.Header className="bg-secondary text-white rounded-top-4 d-flex align-items-center justify-content-between">
+                <div className="d-flex align-items-center">
+                  <img src={getPFP(usuario.type)} alt="PFP" width={36} className="me-3" />
+                  <div className="m-0 p-0">
+                    <Card.Title className="mb-0">{`@${usuario.user_name}`}</Card.Title>
+                    <small>Te uniste el {parseDate(usuario.created_at)}</small>
+                  </div>
+                </div>
+
+                <AnimatedDropdown
+                  className="end-0"
+                  buttonStyle="card-button"
+                  icon={<FontAwesomeIcon icon={faCog} className="fa-xl" />}
+                >
+                  {({ closeDropdown }) => (
+                    <>
+                      {!hasGreenHouse && !hasGreenHouseRequest && (
+                        <div className="dropdown-item d-flex align-items-center" onClick={() => { handleRequestGreenHouse(); closeDropdown(); }}>
+                          <FontAwesomeIcon icon={faSeedling} className="me-2" />Solicitar invernadero
+                        </div>
+                      )}
+                      {!hasCollaborator && !hasCollaboratorRequest && (
+                        <div className="dropdown-item d-flex align-items-center" onClick={() => { setShowAddCollaboratorModal(true); closeDropdown(); }}>
+                          <FontAwesomeIcon icon={faUserPlus} className="me-2" />Añadir un colaborador
+                        </div>
+                      )}
+                      <hr className="dropdown-divider" />
+                      {hasGreenHouse && !hasGreenHouseRequest && (
+                        <div className="dropdown-item d-flex align-items-center text-danger" onClick={() => { handleRemoveGreenHouse(); closeDropdown(); }}>
+                          <FontAwesomeIcon icon={faArrowRightFromBracket} className="me-2" />Dejar invernadero
+                        </div>
+                      )}
+                      {hasCollaborator && !hasCollaboratorRequest && (
+                        <div className="dropdown-item d-flex align-items-center text-danger" onClick={() => { setShowRemoveCollaboratorModal(true); closeDropdown(); }}>
+                          <FontAwesomeIcon icon={faUserSlash} className="me-2" />Quitar colaborador
+                        </div>
+                      )}
+                      <div className="dropdown-item d-flex align-items-center text-danger" onClick={() => { handleRequestUnregister(); closeDropdown(); }}>
+                        <FontAwesomeIcon icon={faUserSlash} className="me-2" />Darse de baja
+                      </div>
+                    </>
+                  )}
+                </AnimatedDropdown>
+              </Card.Header>
+
+
+              <Card.Body>
+                <ListGroup variant="flush" className="border rounded-3">
+                  <ListGroup.Item><FontAwesomeIcon icon={faUser} className="me-2" />Nombre: <strong>{usuario.display_name}</strong></ListGroup.Item>
+                  <ListGroup.Item><FontAwesomeIcon icon={faIdCard} className="me-2" />DNI: <strong>{usuario.dni}</strong></ListGroup.Item>
+                  <ListGroup.Item><FontAwesomeIcon icon={faEnvelope} className="me-2" />Email: <strong>{usuario.email}</strong></ListGroup.Item>
+                  <ListGroup.Item><FontAwesomeIcon icon={faPhone} className="me-2" />Teléfono: <strong>{usuario.phone}</strong></ListGroup.Item>
+                  <ListGroup.Item>
+                    <FontAwesomeIcon icon={faHashtag} className="me-2" />Socio Nº: <strong>{usuario.member_number}</strong> | Huerto Nº: <strong>{usuario.plot_number}</strong>
+                  </ListGroup.Item>
+                  <ListGroup.Item>
+                    <FontAwesomeIcon icon={faSeedling} className="me-2" />Tipo de socio: <strong>{['LISTA DE ESPERA', 'HORTELANO', 'HORTELANO + INVERNADERO', 'COLABORADOR', 'SUBVENCION', 'DESARROLLADOR'][usuario.type]}</strong>
+                  </ListGroup.Item>
+                  <ListGroup.Item>
+                    <FontAwesomeIcon icon={faUserShield} className="me-2" />Rol en huertos: <strong>{['USUARIO', 'ADMIN', 'DESARROLLADOR'][usuario.role]}</strong>
+                  </ListGroup.Item>
+                  <ListGroup.Item>
+                    <FontAwesomeIcon icon={faCalendar} className="me-2" />Estado: <strong>{usuario.status === 1 ? 'ACTIVO' : 'INACTIVO'}</strong>
+                  </ListGroup.Item>
+                </ListGroup>
+              </Card.Body>
+            </Card>
+          </Col>
+
+
+          <Col xs={12} md={7}>
+            <h2 className='section-title'>Mis pagos</h2>
+            <hr className="section-divider" />
+            {incomes.length === 0 && <p className="text-center">No hay pagos registrados.</p>}
+            <div className="d-flex flex-wrap gap-3 mb-4">
+              {incomes.map(income => (
+                <IngresoCard key={income.income_id} income={income} editable={false} />
+              ))}
+            </div>
+
+            <h2 className='section-title'>Mis solicitudes</h2>
+            <hr className="section-divider" />
+            {myRequests.length === 0 && <p className="text-center">No tienes solicitudes registradas.</p>}
+
+            <div className="d-flex flex-wrap gap-3 mb-4">
+              {mappedRequests.map(request => (
+                <SolicitudCard key={request.request_id} data={request} editable={false} onProfile={true} />
+              ))}
+            </div>
+
+            <h2 className='section-title'>Cambio de contraseña</h2>
+            <hr className="section-divider" />
+            <Form onSubmit={(e) => { e.preventDefault(); handleChangePassword(); }} className="d-flex flex-column gap-3">
+              <div className="d-flex flex-column gap-3">
+                {/* Contraseña actual */}
+                <FloatingLabel controlId="floatingPassword" label={<><FontAwesomeIcon icon={faUser} className="me-2" />Contraseña actual</>}>
+                  <Form.Control
+                    required
+                    onChange={handleChange}
+                    type={showOld ? "text" : "password"}
+                    placeholder=""
+                    name="currentPassword"
+                    className="rounded-4"
+                  />
+                  <Button
+                    variant="link"
+                    className="show-button position-absolute end-0 top-50 translate-middle-y me-2"
+                    onClick={() => setShowOld(!showOld)}
+                    aria-label="Mostrar contraseña"
+                    tabIndex={-1}
+                    style={{ zIndex: 2 }}
+                  >
+                    <FontAwesomeIcon icon={showOld ? faEyeSlash : faEye} className='fa-lg' />
+                  </Button>
+                </FloatingLabel>
+
+                {/* Nueva contraseña */}
+                <FloatingLabel controlId="floatingNewPassword" label={<><FontAwesomeIcon icon={faUser} className="me-2" />Nueva contraseña</>}>
+                  <Form.Control
+                    required
+                    onChange={handleChange}
+                    type={showNew ? "text" : "password"}
+                    placeholder=""
+                    name="newPassword"
+                    className="rounded-4"
+                  />
+                  <Button
+                    variant="link"
+                    className="show-button position-absolute end-0 top-50 translate-middle-y me-2"
+                    onClick={() => setShowNew(!showNew)}
+                    aria-label="Mostrar contraseña"
+                    tabIndex={-1}
+                    style={{ zIndex: 2 }}
+                  >
+                    <FontAwesomeIcon icon={showNew ? faEyeSlash : faEye} className='fa-lg' />
+                  </Button>
+                </FloatingLabel>
+
+                {/* Confirmar nueva contraseña */}
+                <FloatingLabel controlId="floatingConfirmPassword" label={<><FontAwesomeIcon icon={faUser} className="me-2" />Confirmar nueva contraseña</>}>
+                  <Form.Control
+                    required
+                    onChange={handleChange}
+                    type={showConfirm ? "text" : "password"}
+                    placeholder=""
+                    name="confirmNewPassword"
+                    className="rounded-4"
+                  />
+                  <Button
+                    variant="link"
+                    className="show-button position-absolute end-0 top-50 translate-middle-y me-2"
+                    onClick={() => setShowConfirm(!showConfirm)}
+                    aria-label="Mostrar contraseña"
+                    tabIndex={-1}
+                    style={{ zIndex: 2 }}
+                  >
+                    <FontAwesomeIcon icon={showConfirm ? faEyeSlash : faEye} className='fa-lg' />
+                  </Button>
+                </FloatingLabel>
+              </div>
+              <Button
+                disabled={newPasswordData.newPassword !== newPasswordData.confirmNewPassword ||
+                  newPasswordData.newPassword === '' || newPasswordData.confirmNewPassword === '' ||
+                  newPasswordData.currentPassword === ''
+                }
+                onClick={(e) => { e.preventDefault(); handleChangePassword(); }}
+                type='submit'
+                variant="warning"
+                style={{ width: 'fit-content' }}
+                className='rounded-4'
+              >
+                <FontAwesomeIcon icon={faKey} className="me-2" />  Cambiar contraseña
+              </Button>
+            </Form>
+          </Col>
+        </Row>
+
+        <CustomModal
+          title="Añadir colaborador"
+          show={showAddCollaboratorModal}
+          onClose={() => {
+            setShowAddCollaboratorModal(false);
+            setValidationErrors({});
+          }}
+        >
+          <PreUserForm
+            userType={3}
+            plotNumber={usuario.plot_number}
+            errors={validationErrors}
+            onSubmit={async (formData) => {
+              setValidationErrors({});
+
+              const { _, errors } = await postDataValidated(config.preUserValidationUrl, formData);
+              if (errors) {
+                setValidationErrors(errors);
+                return;
+              }
+
+              try {
+                const request = await postData(config.requestUrl, {
+                  type: CONSTANTS.REQUEST_TYPE_ADD_COLLABORATOR,
+                  status: CONSTANTS.REQUEST_PENDING,
+                  requested_by: usuario.user_id
+                });
+
+                const requestId = request?.request_id;
+                if (!requestId) throw new Error("No se pudo crear la solicitud.");
+
+                await postData(config.preUsersUrl, {
+                  ...formData,
+                  request_id: requestId
+                });
+
+                setValidationErrors({});
+                setShowAddCollaboratorModal(false);
+                setFeedbackModal({
+                  title: "Colaborador añadido",
+                  message: "Tu solicitud de colaborador ha sido enviada correctamente.",
+                  variant: "success",
+                  onClick: closeFeedback
+                });
+              } catch (err) {
+                setValidationErrors({});
+                setFeedbackModal({
+                  title: "Error",
+                  message: err.message,
+                  variant: "danger",
+                  onClick: closeFeedback
+                });
+              }
+            }}
+          />
+        </CustomModal>
+
+
+        <CustomModal
+          title="Eliminar colaborador"
+          show={showRemoveCollaboratorModal}
+          onClose={() => setShowRemoveCollaboratorModal(false)}
+        >
+          <p className=' p-3'>¿Estás seguro de que quieres eliminar tu colaborador actual?</p>
+          <div className="d-flex justify-content-end gap-2 mt-3 p-3">
+            <Button variant="secondary" onClick={() => setShowRemoveCollaboratorModal(false)}>Cancelar</Button>
+            <Button
+              variant="warning"
+              onClick={async () => {
+                try {
+                  await postData(config.requestUrl, {
+                    type: CONSTANTS.REQUEST_TYPE_REMOVE_COLLABORATOR,
+                    status: CONSTANTS.REQUEST_PENDING,
+                    requested_by: usuario.user_id
+                  });
+
+                  setFeedbackModal({
+                    title: "Solicitud enviada",
+                    message: "Se ha solicitado la eliminación del colaborador.",
+                    variant: "success",
+                    onClick: closeFeedback
+                  });
+                  setShowRemoveCollaboratorModal(false);
+                } catch (err) {
+                  setFeedbackModal({
+                    title: "Error",
+                    message: err.message,
+                    variant: "danger",
+                    onClick: closeFeedback
+                  });
+                }
+              }}
+            >
+              Confirmar
+            </Button>
+          </div>
+        </CustomModal>
+
+        {feedbackModal && (
+          <NotificationModal
+            show={true}
+            onClose={closeFeedback}
+            title={feedbackModal.title}
+            message={feedbackModal.message}
+            variant={feedbackModal.variant}
+            buttons={[{ label: "Aceptar", variant: feedbackModal.variant, onClick: feedbackModal.onClick }]}
+          />
+        )}
+
+      </ContentWrapper>
+    </CustomContainer>
+  );
+};
+
+export default Perfil;

src/pages/Socios.jsx

@@ -0,0 +1,294 @@
+import { useState } from 'react';
+import { useConfig } from '../hooks/useConfig';
+import { DataProvider } from '../context/DataContext';
+import { useDataContext } from '../hooks/useDataContext';
+import { usePaginatedList } from '../hooks/usePaginatedList';
+
+import CustomContainer from '../components/CustomContainer';
+import ContentWrapper from '../components/ContentWrapper';
+import LoadingIcon from '../components/LoadingIcon';
+import SearchToolbar from '../components/SearchToolbar';
+import PDFModal from '../components/PDFModal';
+import SociosFilter from '../components/Socios/SociosFilter';
+import SocioCard from '../components/Socios/SocioCard';
+import { SociosPDF } from '../components/Socios/SociosPDF';
+import PaginatedCardGrid from '../components/PaginatedCardGrid';
+import CustomModal from '../components/CustomModal';
+import IngresoCard from '../components/Ingresos/IngresoCard';
+import { errorParser } from '../util/parsers/errorParser';
+
+import '../css/Socios.css';
+import { Button } from 'react-bootstrap';
+
+const PAGE_SIZE = 10;
+
+const Socios = () => {
+  const { config, configLoading } = useConfig();
+
+  if (configLoading || !config) return <p className="text-center my-5"><LoadingIcon /></p>;
+
+  const reqConfig = {
+    baseUrl: `${config.apiConfig.baseUrl}${config.apiConfig.endpoints.members.all}`,
+    incomesUrl: `${config.apiConfig.baseUrl}${config.apiConfig.endpoints.members.payments}`,
+    rawIncomesUrl: `${config.apiConfig.baseUrl}${config.apiConfig.endpoints.incomes.all}`,
+    params: {
+      _sort: "member_number",
+      _order: "asc"
+    }
+  };
+
+  return (
+    <DataProvider config={reqConfig}>
+      <SociosContent reqConfig={reqConfig} />
+    </DataProvider>
+  );
+};
+
+const SociosContent = ({ reqConfig }) => {
+  const { data, dataLoading, dataError, getData, postData, putData, deleteData } = useDataContext();
+
+  const [showPDFModal, setShowPDFModal] = useState(false);
+  const [creatingSocio, setCreatingSocio] = useState(false);
+  const [tempSocio, setTempSocio] = useState(null);
+  const [showIncomesModal, setShowIncomesModal] = useState(false);
+  const [selectedMemberNumber, setSelectedMemberNumber] = useState(null);
+  const [incomes, setIncomes] = useState([]);
+  const [incomesLoading, setIncomesLoading] = useState(false);
+  const [incomesError, setIncomesError] = useState(null);
+  const [error, setError] = useState(null);
+  const [deleteTargetId, setDeleteTargetId] = useState(null);
+
+  const {
+    filtered,
+    searchTerm,
+    setSearchTerm,
+    filters,
+    setFilters
+  } = usePaginatedList({
+    data,
+    pageSize: PAGE_SIZE,
+    filterFn: (socio, filters) => {
+      if (filters.todos) return true;
+      if (!filters.inactivos && socio.status === 0) return false;
+      return (
+        (filters.listaEspera && socio.type === 0) ||
+        (filters.hortelanos && socio.type === 1) ||
+        (filters.invernadero && socio.type === 2) ||
+        (filters.colaboradores && socio.type === 3) ||
+        (filters.inactivos && socio.status === 0)
+      );
+    },
+    searchFn: (socio, term) => {
+      const normalized = term.toLowerCase();
+      return (
+        socio.display_name?.toLowerCase().includes(normalized) ||
+        socio.dni?.toLowerCase().includes(normalized) ||
+        String(socio.member_number).includes(normalized) ||
+        String(socio.plot_number).includes(normalized)
+      );
+    },
+    initialFilters: {
+      todos: true,
+      listaEspera: true,
+      invernadero: true,
+      inactivos: true,
+      colaboradores: true,
+      hortelanos: true
+    }
+  });
+
+  const listaEsperaOrdenada = data ? data
+    .filter(s => s.type === 0 && s.status !== 0)
+    .sort((a, b) => new Date(a.created_at) - new Date(b.created_at)) : [];
+
+  const handleCreate = () => {
+    setCreatingSocio(true);
+    const socio = {
+      user_id: null,
+      user_name: "nuevo" + Date.now(),
+      email: "",
+      display_name: "Nuevo Socio",
+      role: 0,
+      global_status: 1,
+      member_number: "",
+      plot_number: "",
+      dni: "",
+      phone: "",
+      notes: "",
+      status: 1,
+      type: 1
+    };
+    setTempSocio(socio);
+    document.querySelector('.cards-grid').scrollTo({ top: 0, behavior: 'smooth' });
+  };
+
+  const handleCancelCreate = () => {
+    setCreatingSocio(false);
+    setTempSocio(null);
+    setError(null);
+  };
+
+  const handleCreateSubmit = async (newSocio) => {
+    try {
+      newSocio.user_name = newSocio.display_name.split(" ")[0].toLowerCase() + newSocio.member_number;
+      await postData(reqConfig.baseUrl, newSocio);
+      setError(null);
+      setCreatingSocio(false);
+      setTempSocio(null);
+    } catch (err) {
+      setTempSocio({ ...newSocio });
+      setError(errorParser(err));
+    }
+  };
+
+  const handleEditSubmit = async (updatedSocio, userId) => {
+    try {
+      await putData(`${reqConfig.baseUrl}/${userId}`, updatedSocio);
+      setError(null);
+    } catch (err) {
+      setError(errorParser(err));
+    }
+  };
+
+  const handleDelete = async (userId) => {
+    setDeleteTargetId(userId);
+  };
+
+  const handleViewIncomes = async (memberNumber) => {
+    setSelectedMemberNumber(memberNumber);
+    setShowIncomesModal(true);
+    setIncomes([]);
+    setIncomesLoading(true);
+    setIncomesError(null);
+
+    try {
+      const url = reqConfig.incomesUrl.replace(":member_number", memberNumber);
+      const res = await getData(url);
+      setIncomes(res.data);
+    } catch (err) {
+      setIncomesError(err.message);
+    } finally {
+      setIncomesLoading(false);
+    }
+  };
+
+  const handleIncomeUpdate = async (editado) => {
+    try {
+      await putData(`${reqConfig.rawIncomesUrl}/${editado.income_id}`, editado);
+      await handleViewIncomes(selectedMemberNumber);
+    } catch (err) {
+      console.error("Error actualizando ingreso:", err);
+    }
+  };
+
+  const showPDFPopup = () => setShowPDFModal(true);
+  const closePDFPopup = () => setShowPDFModal(false);
+
+  if (dataLoading) return <p className="text-center my-5"><LoadingIcon /></p>;
+  if (dataError) return <p className="text-danger text-center my-5">{dataError}</p>;
+
+  return (
+    <CustomContainer>
+      <ContentWrapper>
+        <div className="d-flex justify-content-between align-items-center m-0 p-0">
+          <h1 className='section-title'>Lista de Socios</h1>
+        </div>
+
+        <hr className="section-divider" />
+
+        <SearchToolbar
+          searchTerm={searchTerm}
+          onSearchChange={setSearchTerm}
+          filtersComponent={<SociosFilter filters={filters} onChange={setFilters} />}
+          onCreate={handleCreate}
+          onPDF={showPDFPopup}
+        />
+
+        <PaginatedCardGrid
+          items={filtered}
+          creatingItem={creatingSocio}
+          renderCreatingCard={() => (
+            <SocioCard
+              socio={tempSocio}
+              isNew
+              onCreate={handleCreateSubmit}
+              onCancel={handleCancelCreate}
+              error={error}
+              onClearError={() => setError(null)}
+            />
+          )}
+          renderCard={(socio) => {
+            const position = socio.type === 0
+              ? listaEsperaOrdenada.findIndex(s => s.user_id === socio.user_id) + 1
+              : null;
+          
+            return (
+              <SocioCard
+                key={socio.user_id}
+                socio={socio}
+                onUpdate={handleEditSubmit}
+                onDelete={handleDelete}
+                onCancel={handleCancelCreate}
+                onViewIncomes={() => handleViewIncomes(socio.member_number)}
+                error={error}
+                onClearError={() => setError(null)}
+                positionIfWaitlist={position}
+              />
+            );
+          }}
+          
+        />
+      </ContentWrapper>
+
+      <PDFModal show={showPDFModal} onClose={closePDFPopup} title="Vista previa del PDF">
+        <SociosPDF socios={filtered} />
+      </PDFModal>
+
+      <CustomModal
+        show={showIncomesModal}
+        onClose={() => setShowIncomesModal(false)}
+        title={`Ingresos del socio nº ${selectedMemberNumber}`}
+      >
+        {incomesLoading && <p className="text-center my-3"><LoadingIcon /></p>}
+        {incomesError && <p className="text-danger text-center my-3">{incomesError}</p>}
+        {!incomesLoading && !incomesError && incomes.length === 0 && (
+          <p className="text-center my-3">Este socio no tiene ingresos registrados.</p>
+        )}
+        <div className="d-flex flex-wrap gap-3 p-3 justify-content-start">
+          {incomes.map((income) => (
+            <IngresoCard key={income.income_id} income={income}
+              onUpdate={handleIncomeUpdate} className='from-members' />
+          ))}
+        </div>
+      </CustomModal>
+
+      <CustomModal
+        title="Confirmar eliminación"
+        show={deleteTargetId !== null}
+        onClose={() => setDeleteTargetId(null)}
+      >
+        <p className='p-3'>¿Estás seguro de que quieres eliminar este socio?</p>
+        <div className="d-flex justify-content-end gap-2 mt-3 p-3">
+          <Button variant="secondary" onClick={() => setDeleteTargetId(null)}>Cancelar</Button>
+          <Button
+            variant="danger"
+            onClick={async () => {
+              try {
+                await deleteData(`${reqConfig.baseUrl}/${deleteTargetId}`);
+                setSearchTerm("");
+                setDeleteTargetId(null);
+              } catch (err) {
+                setError(errorParser(err));
+              }
+            }}
+          >
+            Confirmar
+          </Button>
+        </div>
+      </CustomModal>
+
+    </CustomContainer>
+  );
+};
+
+export default Socios;

src/pages/Solicitudes.jsx

@@ -0,0 +1,149 @@
+import { useConfig } from '../hooks/useConfig';
+import { DataProvider } from '../context/DataContext';
+import { useDataContext } from '../hooks/useDataContext';
+import { usePaginatedList } from '../hooks/usePaginatedList';
+import { useState } from 'react';
+
+import CustomContainer from '../components/CustomContainer';
+import ContentWrapper from '../components/ContentWrapper';
+import LoadingIcon from '../components/LoadingIcon';
+import SearchToolbar from '../components/SearchToolbar';
+import PaginatedCardGrid from '../components/PaginatedCardGrid';
+import SolicitudCard from '../components/Solicitudes/SolicitudCard';
+import { Button } from 'react-bootstrap';
+import CustomModal from '../components/CustomModal';
+
+const PAGE_SIZE = 10;
+
+const Solicitudes = () => {
+  const { config, configLoading } = useConfig();
+
+  if (configLoading || !config) return <p className="text-center my-5"><LoadingIcon /></p>;
+
+  const reqConfig = {
+    baseUrl: config.apiConfig.baseUrl + config.apiConfig.endpoints.requests.allWithPreUsers,
+    rawUrl: config.apiConfig.baseUrl + config.apiConfig.endpoints.requests.all,
+    acceptUrl: config.apiConfig.baseUrl + config.apiConfig.endpoints.requests.accept,
+    rejectUrl: config.apiConfig.baseUrl + config.apiConfig.endpoints.requests.reject,
+    params: {}
+  };
+
+  return (
+    <DataProvider config={reqConfig}>
+      <SolicitudesContent reqConfig={reqConfig} />
+    </DataProvider>
+  );
+};
+
+const SolicitudesContent = ({ reqConfig }) => {
+  const { data, dataLoading, dataError, putData, deleteData } = useDataContext();
+  const [deleteTargetId, setDeleteTargetId] = useState(null);
+
+  const {
+    filtered,
+    searchTerm,
+    setSearchTerm
+  } = usePaginatedList({
+    data,
+    pageSize: PAGE_SIZE,
+    searchFn: (entry, term) => {
+      const normalized = term.toLowerCase();
+      return (
+        entry.pre_display_name?.toLowerCase().includes(normalized) ||
+        entry.pre_dni?.toLowerCase().includes(normalized) ||
+        entry.pre_email?.toLowerCase().includes(normalized) ||
+        String(entry.pre_phone).includes(normalized)
+      );
+    },
+    sortFn: (a, b) => a.request_status - b.request_status
+  });
+
+  const handleAccept = async (entry) => {
+    const url = reqConfig.acceptUrl.replace(":request_id", entry.request_id);
+    try {
+      await putData(url, {});
+      console.log("✅ Solicitud aceptada:", entry.request_id);
+    } catch (err) {
+      console.error("❌ Error al aceptar solicitud:", err.message);
+    }
+  };
+
+  const handleReject = async (entry) => {
+    const url = reqConfig.rejectUrl.replace(":request_id", entry.request_id);
+    try {
+      await putData(url, {});
+      console.log("🛑 Solicitud rechazada:", entry.request_id);
+    } catch (err) {
+      console.error("❌ Error al rechazar solicitud:", err.message);
+    }
+  };
+
+  const handleDelete = async (id) => {
+    setDeleteTargetId(id);
+  }
+
+  if (dataLoading) return <p className="text-center my-5"><LoadingIcon /></p>;
+  if (dataError) return <p className="text-danger text-center my-5">{dataError}</p>;
+
+  return (
+    <CustomContainer>
+      <ContentWrapper>
+        <div className="d-flex flex-column align-items-center m-0 p-0">
+          <h1 className='section-title me-auto'>Panel de Solicitudes</h1>
+          <h5 className='me-auto'>Es necesario asignarle manualmente una contraseña al socio en caso de 
+            aceptar su solicitud tanto de alta como de nuevo colaborador.</h5>
+        </div>
+
+        <hr className="section-divider" />
+
+        <SearchToolbar
+          searchTerm={searchTerm}
+          onSearchChange={setSearchTerm}
+          hideCreate
+          hidePDF
+        />
+
+        <PaginatedCardGrid
+          items={filtered}
+          renderCard={(entry) => (
+            <SolicitudCard
+              key={entry.request_id}
+              data={entry}
+              onAccept={() => handleAccept(entry)}
+              onReject={() => handleReject(entry)}
+              onDelete={handleDelete}
+            />
+          )}
+        />
+
+        <CustomModal
+          title="Confirmar eliminación"
+          show={deleteTargetId !== null}
+          onClose={() => setDeleteTargetId(null)}
+        >
+          <p className='p-3'>¿Estás seguro de que quieres eliminar la solicitud manualmente?</p>
+          <div className="d-flex justify-content-end gap-2 mt-3 p-3">
+            <Button variant="secondary" onClick={() => setDeleteTargetId(null)}>Cancelar</Button>
+            <Button
+              variant="danger"
+              onClick={async () => {
+                try {
+                  await deleteData(`${reqConfig.rawUrl}/${deleteTargetId}`);
+                  setSearchTerm("");
+                  setDeleteTargetId(null);
+                } catch (err) {
+                  console.error(err);
+                }
+              }}
+            >
+              Confirmar
+            </Button>
+          </div>
+        </CustomModal>
+
+      </ContentWrapper>
+    </CustomContainer>
+  );
+};
+
+export default Solicitudes;