anteriority-ui 1.0.0

package/CLAUDE.md

@@ -0,0 +1,91 @@
+# CLAUDE.md
+
+Guía para trabajar en este repo. Para documentación orientada a consumidores de la librería, ver [README.md](README.md) (instalación, setup, estructura) y [AnteriorityUI.md](AnteriorityUI.md) (props y ejemplos de uso de cada uno de los 50 componentes, en un único documento).
+
+## Qué es este proyecto
+
+`anteriority-ui` es una librería interna de componentes React, extraída originalmente del proyecto `vet-system-WEB` (en `C:\Users\Usuario\ProjectoUniversidad\vet-system-WEB`), con el objetivo de reutilizarla en otros proyectos. Los componentes viven en `screens/components/` y están construidos sobre MUI + CSS Modules + lucide-react.
+
+## Estructura
+
+```
+index.js              → barrel: re-exporta los ~50 componentes por nombre (import { Button } from 'anteriority-ui')
+screens/components/   → ~50 componentes de UI, uno por carpeta (index.jsx + .module.css + .stories.jsx, siempre en minúscula)
+common/
+  styles/             → variables.css (design tokens en :root) y typography.css (fuente global + import de Google Fonts)
+  theme/muiTheme.js   → theme de MUI compartido (fontFamily: var(--font-sans))
+  api/client.js       → cliente HTTP genérico (fetch wrapper), sin lógica de negocio ni endpoints hardcodeados
+  storage/LocalStorage.js → utilidades de sessionStorage/localStorage (getUserId/setUserId)
+features/
+  password-reset/api.js  → funciones de API específicas del flujo de reseteo de contraseña
+  user-profile/api.js    → función de API para actualizar nombre de usuario
+hooks/useAdminPasswordReset.js → hook que consume features/password-reset/api.js
+.storybook/           → config de Storybook (main.js, preview.jsx)
+```
+
+**Regla de separación:** `screens/components/*` es UI pura y reutilizable. `features/*` y `hooks/*` son lógica de negocio (llamadas a API con endpoints concretos) — solo dos componentes dependen de ellos (`PasswordResetPanel`, `UserEditPopover`), y ambos siguen funcionando/renderizando sin crashear aunque no haya backend real detrás (las llamadas fallan silenciosamente, atrapadas en try/catch).
+
+## Origen y por qué existen `common/api`, `features/`, `hooks/`
+
+Al extraer componentes de `vet-system-WEB`, algunos (`Button`, `Sidebar`, `PasswordResetPanel`, `UserEditPopover`, etc.) importaban cosas fuera del árbol de componentes: `ModalTooltip`, `AlertModal`, `Notification/Error/ErrorMessage` (ya copiados dentro de `screens/components/`), y lógica real de negocio (`services/api`, `hooks/useAdminPasswordReset`, `context/LocalStorage`). Para esta última parte, en vez de copiar el cliente API completo de vet-system-WEB (771 líneas acopladas a axios/config/dummyDB/tokens de esa app específica), se reimplementó un cliente HTTP genérico (`common/api/client.js`) y solo las funciones puntuales que los dos componentes necesitan (`features/password-reset`, `features/user-profile`), para que la librería no dependa del backend de ningún proyecto en particular.
+
+Un consumidor de la librería que quiera usar `PasswordResetPanel` o `UserEditPopover` con datos reales debe llamar `configureApiClient({ baseURL, getAuthToken })` (ver README.md) antes de que se disparen las llamadas.
+
+## Convención: props de color
+
+La mayoría de los componentes con color propio (fondo, texto, ícono, borde) exponen props opcionales de color (`bgColor`, `textColor`, `iconColor`, `borderColor`, `accentColor`, o nombres específicos del rol cuando ninguno de esos encaja). Reglas al tocar o agregar componentes:
+
+- **Todo prop de color es opcional y su default debe reproducir exactamente el color hardcodeado que existía antes** — es un cambio aditivo, nunca un rediseño.
+- **Mecanismo:** si el color vive en el CSS module, se convierte a `var(--token-local, <valor-original>)` y el componente aplica `style={{ '--token-local': prop }}` solo cuando la prop viene definida (merge con cualquier `style` que el componente ya reciba). Esto funciona incluso para gradientes, `:hover` y contenido en portales (las CSS custom properties heredan).
+- Si el color ya estaba inline en JSX (`style`, `sx`, `color=` de MUI), se reemplaza el literal por la prop con ese mismo valor como default de parámetro.
+- **Los componentes con sistema `variant`/`type` (Barnner, DesplegablePanel, Notification/Error, TableB) mantienen su variant tal cual** — las props de color nuevas son un override opcional por encima de la paleta que resolvería el variant.
+- Nombres reutilizados a propósito para consistencia entre componentes: `bgColor`, `textColor`, `iconColor`, `borderColor`, `accentColor`.
+
+## Tipografía y theme
+
+La fuente global es **Plus Jakarta Sans** (Google Fonts), no Roboto (default de MUI) ni el serif por default del navegador. Esto requiere DOS piezas trabajando juntas:
+- `common/styles/typography.css` → importa la fuente y define `body { font-family: var(--font-sans) }` (arregla elementos HTML planos, ej. un `<h3>` sin clase).
+- `common/theme/muiTheme.js` → `ThemeProvider` de MUI con `typography.fontFamily: 'var(--font-sans)'` (arregla componentes MUI, que si no, ignoran el `body` y usan su propio theme default).
+
+Si se agrega un componente nuevo con texto visible, verificar que se vea con la fuente correcta en Storybook (`.storybook/preview.jsx` ya envuelve todas las stories en ambos).
+
+## Comandos
+
+```bash
+pnpm storybook          # levanta Storybook en http://localhost:6006
+pnpm build-storybook    # build estático de Storybook
+pnpm build              # check-case + compila a dist/ + verify-dist — correr antes de confiar en un release
+pnpm check-case         # solo el audit de mayúsculas/minúsculas en imports (rápido, sin compilar)
+```
+
+## Barrel (`index.js`) — indexación de componentes
+
+`index.js` en la raíz re-exporta cada componente por nombre (`export { default as Button } from './screens/components/Button/index.js'`, etc.) para que un consumidor pueda hacer `import { Button, Sidebar } from 'anteriority-ui'` sin conocer el subpath de cada uno. Es un archivo **mantenido a mano**, no generado — al agregar un componente nuevo en `screens/components/`, agregarlo también acá. Reglas:
+- Alias siempre = nombre de la carpeta (no el nombre interno de la variable/función, que a veces difiere — ej. `Sidebar/index.jsx` exporta internamente `ProSidebar`, pero el barrel lo expone como `Sidebar`).
+- Solo se re-exporta el `default` de cada componente, nunca `export *` — varios componentes tienen sus propios `VARIANTS`/`SIZES`/`COLORS` locales (ver [Convención: props de color](#convención-props-de-color) y el patrón `variant`/`type`) que colisionarían entre sí como named exports al tope del barrel. Quien necesite esos named exports sigue importando el subpath directo del componente.
+- `screens/components/Avatar/` (el stub vacío) queda **fuera** del barrel a propósito — ver [Componentes sin implementar](#componentes-sin-implementar). El avatar real (`Profile/Avatar`) está en el barrel como `ProfileAvatar`.
+- `FormControls` no tiene default export (exporta `FormCard`, `FormInput`, `FormTextArea` con nombre propio) — se re-exportan tal cual, sin alias de carpeta.
+
+## Build y publicación (versionado real, npm público)
+
+El paquete se publica en el registro público de npm como `anteriority-ui`, no vía `git+https://...` apuntando a `main` (ese instalaba el HEAD del branch sin versión ni changelog — ver [.github/workflows/publish.yml](.github/workflows/publish.yml)). Se eligió npm público en vez de GitHub Packages a propósito: GitHub Packages exige autenticación hasta para instalar (incluso en repos públicos), y la prioridad acá era que instalar fuera tan simple como `pnpm add mui` — sin `.npmrc` ni token del lado del consumidor. El costo es que el código queda visible públicamente en npm (el repo de GitHub puede seguir siendo privado).
+
+- `scripts/build.mjs` transpila JSX → JS con esbuild (`jsx: 'automatic'`) y copia CSS Modules/otros assets, preservando la misma estructura de carpetas que el código fuente para que los subpath imports documentados en README.md sigan resolviendo igual. También genera `dist/package.json` (subset de campos del `package.json` raíz — ver el script para la lista exacta) porque `publishConfig.directory: "dist"` en el `package.json` raíz le dice a `pnpm publish` que empaquete desde ahí, no desde la raíz del repo.
+- **Todos los imports relativos internos deben ser sin extensión** (`from '../Loading/index'`, no `'../Loading/index.jsx'`). Un import con extensión `.jsx` explícita funciona en el código fuente (Vite/Storybook resuelve contra el archivo `.jsx` real), pero rompe en `dist/` una vez compilado, porque esbuild transpila `.jsx` → `.js` sin reescribir el string del import — queda apuntando a un archivo que ya no existe. `scripts/verify-dist.mjs` (bundlea `dist/index.js` completo con esbuild, con los peer deps como `external`) es lo único que detecta esto; `pnpm build-storybook` NO alcanza porque corre contra el código fuente, no contra el paquete compilado.
+- `scripts/check-case.mjs` audita que cada import relativo matchee el nombre real en disco con mayúsculas/minúsculas exactas (había 22 componentes con entry file `Index.jsx` en vez de `index.jsx` — rompía deploys en Linux por ser case-sensitive, invisible en Windows/Mac). Corre como parte de `pnpm build` y en CI ([.github/workflows/ci.yml](.github/workflows/ci.yml)).
+- **Gotcha real ya vivido:** un rename de archivo solo-de-casing (`Index.jsx` → `index.jsx`) en Windows puede quedar sin aplicar físicamente en disco después de un `git checkout`/merge, aunque el índice de git ya diga `index.jsx` — NTFS es case-insensitive y git a veces no reescribe el archivo físico si solo cambia el casing. Si `pnpm check-case` falla después de un pull que "debería" traer un fix de casing ya mergeado, sospechar de esto antes de asumir que el fix nunca se aplicó.
+- El workflow de publish se dispara con push de un tag `vX.Y.Z` y valida que coincida con la versión de `package.json` antes de publicar — ver la sección "Versionado y releases" en README.md para el flujo (`pnpm version patch/minor/major` + `git push --tags`).
+- Si se agrega un componente/carpeta nueva bajo `screens/`, `common/`, `features/` o `hooks/`, no hace falta tocar nada del build — `scripts/build.mjs` recorre esos cuatro directorios dinámicamente. Sí hay que agregarlo a mano al barrel `index.js` (ver arriba).
+- `react`, `react-dom`, `@mui/material`, `@emotion/*` ya son `peerDependencies` (no van empaquetados) — eso ya estaba bien resuelto antes de este cambio; lo que faltaba era el build + versionado, no las peer deps.
+
+## ⚠️ Gotcha de pnpm workspace
+
+`C:\Users\Usuario` (la carpeta home del usuario) es raíz de OTRO proyecto suyo no relacionado (`proyecto-hp-backend`, con su propio `package.json`/`pnpm-workspace.yaml`/`.git`). Como está dos niveles arriba de este repo, pnpm puede tratarlo como raíz del workspace y mezclar instalaciones ahí en vez de aislarlas acá. Por eso este repo tiene su propio `pnpm-workspace.yaml` (con `packages: []`) — **no lo borres** — sirve para que pnpm pare la búsqueda hacia arriba y trate `AnteriorityUI` como su propia raíz. Si algo similar vuelve a romperse (paquetes no encontrados en runtime pese a estar en `package.json`), sospechar primero de esto antes de reinstalar todo.
+
+## Storybook
+
+Cada componente en `screens/components/` tiene un `.stories.jsx` (formato CSF3) al lado de su implementación. Al agregar un componente nuevo, agregarle también su story con variantes reales (no placeholders) — son la referencia que se usa para escribir/actualizar la sección correspondiente en AnteriorityUI.md.
+
+## Componentes sin implementar
+
+`screens/components/Avatar/` (`index.jsx`, `utils.js`, `index.module.css`) son archivos vacíos (0 bytes) — un stub sin terminar, no lo usa nada del código. El avatar real y usado es `screens/components/Profile/Avatar/`. No confundir los dos ni documentar el stub hasta que tenga contenido real.

package/README.md

@@ -0,0 +1,182 @@
+<p align="center">
+  <img src="assets/favicon/anteriorityUI.ico" alt="anteriority-ui" width="480" />
+</p>
+
+# anteriority-ui
+
+Librería interna de componentes React (UI) para reutilizar entre proyectos. Construida sobre [MUI](https://mui.com/), [lucide-react](https://lucide.dev/) y CSS Modules, con [Storybook](https://storybook.js.org/) para navegar y probar cada componente de forma aislada.
+
+## Instalación
+
+Publicada en el registro público de npm — se instala igual que cualquier otra dependencia, sin tokens ni configuración extra:
+
+```bash
+pnpm add anteriority-ui
+```
+
+Cada versión se genera a partir de un tag `vX.Y.Z` (semver real, no el HEAD de `main`) — ver [Versionado y releases](#versionado-y-releases).
+
+### Peer dependencies
+
+Estas dependencias las provee el proyecto que consume la librería (no van empaquetadas, para evitar duplicar React/MUI):
+
+```bash
+pnpm add react react-dom @mui/material @emotion/react @emotion/styled
+```
+
+## Setup en el proyecto consumidor
+
+1. Importar los estilos base (design tokens + tipografía) una sola vez, en el punto de entrada de la app:
+
+   ```js
+   import 'anteriority-ui/common/styles/variables.css';
+   import 'anteriority-ui/common/styles/typography.css';
+   ```
+
+2. Envolver la app en el `ThemeProvider` de MUI con el theme de la librería, para que los componentes basados en MUI (Button, TextField, Selector, etc.) usen la misma tipografía y no el Roboto por default de MUI:
+
+   ```jsx
+   import { ThemeProvider } from '@mui/material/styles';
+   import muiTheme from 'anteriority-ui/common/theme/muiTheme';
+
+   function App() {
+     return (
+       <ThemeProvider theme={muiTheme}>
+         {/* resto de la app */}
+       </ThemeProvider>
+     );
+   }
+   ```
+
+3. (Opcional) Si vas a usar `hooks/useAdminPasswordReset` o cualquier función de `features/*/api.js`, configurá el cliente HTTP genérico una vez al arrancar la app:
+
+   ```js
+   import { configureApiClient } from 'anteriority-ui/common/api/client';
+
+   configureApiClient({
+     baseURL: 'https://api.tu-proyecto.com',
+     getAuthToken: () => localStorage.getItem('token'),
+   });
+   ```
+
+## Importar componentes
+
+Todos los componentes están indexados en el entry point principal — no hace falta conocer el subpath de cada uno:
+
+```jsx
+import { Button, Sidebar, TableB } from 'anteriority-ui';
+```
+
+Alternativa, importando el subpath directo de cada componente (útil para acceder a exports nombrados extra que no pasan por el barrel, ej. `Button.VARIANTS`):
+
+```jsx
+import Button, { VARIANTS } from 'anteriority-ui/screens/components/Button';
+```
+
+## Estructura del proyecto
+
+```
+screens/components/   → componentes de UI (uno por carpeta, ver docs abajo)
+common/
+  styles/             → variables.css (design tokens) y typography.css (fuente global)
+  theme/              → muiTheme.js, el theme de MUI compartido
+  api/                → cliente HTTP genérico (client.js), sin lógica de negocio
+  storage/            → utilidades de localStorage/sessionStorage (LocalStorage.js)
+features/
+  password-reset/     → lógica de API para el flujo de reseteo de contraseña
+  user-profile/       → lógica de API para edición de perfil de usuario
+hooks/                → hooks reutilizables (useAdminPasswordReset)
+.storybook/           → configuración de Storybook
+```
+
+Cada componente en `screens/components/` es independiente entre sí salvo por composición explícita (por ejemplo, `Button` usa `ModalTooltip`, `TableB` usa `Barnner`). Ningún componente de UI importa nada de `features/` directamente salvo los que ya tienen lógica de negocio propia (`PasswordResetPanel`, `UserEditPopover`).
+
+## Versionado y releases
+
+La librería se compila (JSX → JS, se preserva la estructura de carpetas) antes de publicarse — ver [scripts/build.mjs](scripts/build.mjs). El build corre solo en CI, no hace falta ejecutarlo a mano salvo para probarlo localmente con `pnpm run build`.
+
+**Setup único, antes del primer release:** generar un [access token de npm](https://www.npmjs.com/) de tipo *Automation* (desde la cuenta/organización de npm que va a ser dueña del paquete) y cargarlo como secret `NPM_TOKEN` en Settings → Secrets and variables → Actions de este repo. Sin esto el workflow de publish falla.
+
+Para publicar una nueva versión (ej. después de un fix en un componente):
+
+```bash
+pnpm version patch   # o minor / major — bumpea package.json, commitea y crea el tag vX.Y.Z
+git push && git push --tags
+```
+
+El push del tag dispara [.github/workflows/publish.yml](.github/workflows/publish.yml), que compila y publica a npm con el secret `NPM_TOKEN`. El workflow falla si el tag no coincide con la versión del `package.json`, como chequeo de seguridad.
+
+Los proyectos consumidores controlan cuándo actualizar corriendo `pnpm update anteriority-ui` (respetando el rango semver que hayan fijado), en vez de recibir cambios de golpe con cada push a `main`.
+
+## Ver los componentes en Storybook
+
+```bash
+pnpm storybook
+```
+
+Abre `http://localhost:6006` con los ~50 componentes navegables, cada uno con varias variantes de ejemplo.
+
+## Convención de colores
+
+La mayoría de los componentes con color propio (fondo, texto, ícono, borde) exponen props opcionales para sobreescribirlo — por ejemplo `bgColor`, `textColor`, `iconColor`, `borderColor`, `accentColor`. Si no se pasa la prop, el componente se ve exactamente igual que antes (el valor por default reproduce el color original). Ver [AnteriorityUI.md](AnteriorityUI.md) para la lista exacta de props de color que acepta cada componente.
+
+Componentes que ya tenían un sistema de `variant`/`type` con paletas predefinidas (`Barnner`, `DesplegablePanel`, `Notification/Error`, `TableB`) lo conservan tal cual — las props de color nuevas son un override opcional por encima del `variant` elegido.
+
+## Componentes
+
+Documentación completa de props y ejemplos de uso de los 50 componentes en **[AnteriorityUI.md](AnteriorityUI.md)**.
+
+| Componente | Descripción |
+|---|---|
+| [AlertModal](AnteriorityUI.md#alertmodal) | Modal de confirmación/alerta, con soporte de input embebido |
+| [Badge](AnteriorityUI.md#badge) | Etiqueta de estado con ícono, label y valor |
+| [Barnner](AnteriorityUI.md#barnner) | Banner de aviso con variantes de color |
+| [BlueLink](AnteriorityUI.md#bluelink) | Link de navegación con tooltip |
+| [Breadcrumbs](AnteriorityUI.md#breadcrumbs) | Migas de pan de navegación |
+| [Button](AnteriorityUI.md#button) | Botón (envoltorio de MUI Button) con variantes, loading, tooltip |
+| [CalendarComponent](AnteriorityUI.md#calendarcomponent) | Selector de fecha standalone (date picker) |
+| [CalendarPicker](AnteriorityUI.md#calendarpicker) | Selector de fecha integrado a un `TextField` |
+| [CardV1](AnteriorityUI.md#cardv1) | Tarjeta con badges, acción e indicadores de estado |
+| [ChatWindow](AnteriorityUI.md#chatwindow) | Ventana de chat completa (mensajes, input, avatar) |
+| [Checks](AnteriorityUI.md#checks) | Checkbox de permisos/ítem seleccionable |
+| [Container](AnteriorityUI.md#container) | Contenedor con paginación integrada |
+| [CopyText](AnteriorityUI.md#copytext) | Texto con botón de copiar al portapapeles |
+| [CountdownBar](AnteriorityUI.md#countdownbar) | Barra de progreso con cuenta regresiva |
+| [DateTag](AnteriorityUI.md#datetag) | Etiqueta de fecha formateada |
+| [DesplegablePanel](AnteriorityUI.md#desplegablepanel) | Panel colapsable con ícono temático |
+| [DrawPanel](AnteriorityUI.md#drawpanel) | Panel lateral deslizable (drawer) |
+| [Filter](AnteriorityUI.md#filter) | Panel de filtros con contador de activos |
+| [FormControls](AnteriorityUI.md#formcontrols) | Controles de formulario (Card, Input, TextArea) |
+| [Frame](AnteriorityUI.md#frame) | Marco/tarjeta base reutilizable, soporta modal |
+| [GreenHighlight](AnteriorityUI.md#greenhighlight) | Resaltado de texto/valor destacado |
+| [HoursPicker](AnteriorityUI.md#hourspicker) | Selector de horario |
+| [InfoTooltip](AnteriorityUI.md#infotooltip) | Ícono de información con tooltip |
+| [Input](AnteriorityUI.md#input) | Input de texto (envoltorio de MUI TextField) |
+| [Loading](AnteriorityUI.md#loading) | Indicadores de carga (spinner, barras, rebote) |
+| [MarkdownContent](AnteriorityUI.md#markdowncontent) | Render de contenido Markdown |
+| [MarkdownEditor](AnteriorityUI.md#markdowneditor) | Editor de Markdown con vista previa |
+| [Material-UI/Components/InputWithIcon](AnteriorityUI.md#inputwithicon) | Input con ícono embebido |
+| [Material-UI/Components/MenuPopover](AnteriorityUI.md#menupopover) | Menú contextual (popover) |
+| [Material-UI/Components/MultilinePlaceholder](AnteriorityUI.md#multilineplaceholder) | Textarea con placeholder multilinea |
+| [Material-UI/Components/Paginador](AnteriorityUI.md#paginador) | Paginación (envoltorio de MUI Pagination) |
+| [Material-UI/Components/Search](AnteriorityUI.md#search) | Buscador con autocompletado |
+| [Material-UI/Components/Selector](AnteriorityUI.md#selector) | Select (envoltorio de MUI Select) |
+| [Material-UI/Components/TextField](AnteriorityUI.md#textfield) | TextField base compartido por otros componentes |
+| [ModalTooltip](AnteriorityUI.md#modaltooltip) | Tooltip flotante (portal) |
+| [Notification/Error/ErrorMessage](AnteriorityUI.md#errormessage) | Mensaje de error/éxito inline |
+| [PasswordResetPanel](AnteriorityUI.md#passwordresetpanel) | Panel de flujo de reseteo de contraseña (usa `features/password-reset`) |
+| [PlaceholderButton](AnteriorityUI.md#placeholderbutton) | Botón que se convierte en input al hacer click |
+| [Profile](AnteriorityUI.md#profile) | Header de perfil de usuario |
+| [Profile/Avatar](AnteriorityUI.md#avatar-profileavatar) | Avatar con estado (online/offline) |
+| [ScrollBar](AnteriorityUI.md#scrollbar) | Contenedor con scrollbar estilizada |
+| [Sidebar](AnteriorityUI.md#sidebar) | Barra lateral de navegación completa |
+| [Skeleton](AnteriorityUI.md#skeleton) | Placeholders de carga (shimmer) |
+| [SubSidebarLayout](AnteriorityUI.md#subsidebarlayout) | Layout de sub-sidebar con menú |
+| [SummaryCard](AnteriorityUI.md#summarycard) | Tarjeta de resumen con degradado |
+| [Swich](AnteriorityUI.md#swich) | Interruptor (switch) on/off |
+| [TableA](AnteriorityUI.md#tablea) | Tabla simple con columnas configurables |
+| [TableB](AnteriorityUI.md#tableb) | Tabla con filas expandibles y badges |
+| [ToggleCard](AnteriorityUI.md#togglecard) | Tarjeta colapsable con acción |
+| [UserEditPopover](AnteriorityUI.md#usereditpopover) | Popover de edición de nombre de usuario (usa `features/user-profile`) |
+
+> `screens/components/Avatar/` existe pero está sin implementar (archivos vacíos) — no se documenta hasta que tenga contenido.

package/common/api/client.js

@@ -0,0 +1,43 @@
+let baseURL = '';
+let getAuthToken = () => null;
+
+// Debe llamarse una vez al iniciar la app consumidora de la librería.
+export function configureApiClient({ baseURL: base, getAuthToken: tokenGetter } = {}) {
+  if (base !== undefined) baseURL = base;
+  if (tokenGetter) getAuthToken = tokenGetter;
+}
+
+export async function request(path, { method = 'GET', body, headers = {}, auth = true } = {}) {
+  const cleanPath = path.startsWith('/') ? path : `/${path}`;
+  const url = `${baseURL}${cleanPath}`;
+
+  const opts = { method, headers: { ...headers } };
+
+  if (auth) {
+    const token = getAuthToken();
+    if (token) opts.headers['Authorization'] = `Bearer ${token}`;
+  }
+
+  if (body !== undefined && !['GET', 'HEAD'].includes(method.toUpperCase())) {
+    opts.headers['Content-Type'] = opts.headers['Content-Type'] || 'application/json';
+    opts.body = typeof body === 'string' ? body : JSON.stringify(body);
+  }
+
+  const res = await fetch(url, opts);
+
+  if (res.status === 204) return null;
+
+  const contentType = (res.headers.get('content-type') || '').toLowerCase();
+  const data = contentType.includes('application/json')
+    ? await res.json().catch(() => null)
+    : await res.text();
+
+  if (!res.ok) {
+    const err = new Error((data && (data.error || data.message)) || res.statusText || `Request failed (${res.status})`);
+    err.status = res.status;
+    err.body = data;
+    throw err;
+  }
+
+  return data;
+}

package/common/storage/LocalStorage.js

@@ -0,0 +1,13 @@
+
+// Guarda el id del usuario logueado
+export function setUserId(id) {
+	if (!id) return;
+	localStorage.setItem('user_id', id);
+	sessionStorage.setItem('user_id', id);
+}
+
+// Obtiene el id del usuario logueado
+export function getUserId() {
+	// Prioriza sessionStorage para evitar IDs viejos de otra sesión/pestaña.
+	return sessionStorage.getItem('user_id') || localStorage.getItem('user_id') || null;
+}

package/common/styles/typography.css

@@ -0,0 +1,5 @@
+@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');
+
+body {
+  font-family: var(--font-sans);
+}

package/common/styles/variables.css

@@ -0,0 +1,192 @@
+:root {
+  /*fondo sistema*/
+  --bg-soft: rgba(216, 239, 220, 0);
+  --bg-modal-big: rgb(188, 219, 188);
+  --bg-marron-gueso: #E3DAC9;
+  /*colores de botones*/
+  --button-blue: linear-gradient(135deg, #0284c7, #0369a1);
+  --button-hover-blue: #0369a1;
+  --button-green: #0f766e;
+  --button-hover-green: rgb(0, 167, 39);
+  --cancel-button: red;
+  --button-hover-red: rgb(203, 3, 3);
+  /*letras*/
+  --letter: #103529;
+  --letter-white: #ffffff;
+  /*interfaz CitasDoctor*/
+  --ink: #0f172a;
+  --line: #008412;
+  --brand-dark: #115e59;
+  --danger-bg: #fdfdfd;
+  --danger-text: #991b1b;
+
+  /*diseño*/
+  --blur: blur(18px);
+  --shadow: 2px 1px 6px rgb(0, 0, 0);
+
+  --color-secondary: rgb(2, 169, 18);
+  --color-secondary-dark: #027800;
+  --color-primary: rgb(23, 23, 255);
+  --color-primary-dark: #032585;
+  --color-danger: #ea1f1f;
+  --color-danger-dark: #dc2626;
+  --color-danger-bg: #fee2e2;
+  --color-text: #1e293b;
+  --color-text-muted: #64748b;
+  --color-text-muted2: #b3b7bd;
+  --color-border: #e2e8f0;
+  --productCardConsulta: #088d4f;
+  --color-card-bg: #ffffff;
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --radius-sm: 0.375rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.75rem;
+  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
+  --transition: all 0.2s ease;
+
+
+  /* Glassmorphism Green-White Gradient */
+  --bg-glass-gradient-green: linear-gradient(135deg, rgb(101, 255, 49), rgba(85, 255, 0, 0.45));
+  --bg-glass-gradient-ross: linear-gradient(135deg, rgba(207, 173, 2, 0.25), rgba(255, 255, 255, 0.45));
+  --bg-glass-gradient-logo: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(255, 255, 255, 0.5), rgba(14, 165, 233, 0.15));
+
+  --logo-yellow-soft: #60aaff31;
+  --logo-yellow-border: rgba(254, 240, 138, 0.5);
+
+  --glass-blur-panel: blur(12px);
+  --glass-border: 1px solid rgba(255, 255, 255, 0.4);
+
+  /* Pink-Green Glassmorphism */
+  --gr-pink-green: linear-gradient(135deg, #f47fe9 0%, #017A51 100%);
+  --glass-blur-pink-green: blur(10px);
+
+  /* Sidebar Glassmorphism */
+  --sidebar-bg: linear-gradient(135deg, rgba(34, 197, 94, 0.5), rgba(255, 255, 255, 0.4), rgba(14, 165, 233, 0.5));
+  --sidebar-blur: blur(24px);
+  --sidebar-border-right: 1px solid rgba(14, 165, 233, 0.3);
+  --sidebar-text: #0f172a;
+  --sidebar-text-muted: #475569;
+  --sidebar-text-active: #0ea5e9;
+  --sidebar-hover-bg: rgba(14, 165, 233, 0.08);
+  --sidebar-border: rgba(14, 165, 233, 0.15);
+
+
+  /*AlertModal*/
+  --modal-overlay-bg: rgba(15, 23, 42, 0.65);
+  --modal-bg: #ffffff70;
+  --modal-border: 1px solid rgba(226, 232, 240, 0.8);
+  --modal-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.02);
+  --modal-title-color: #0f172a;
+  --modal-text-color: #faebeb;
+  --primary-color: #2563eb;
+  --primary-hover: #000000;
+  --secondary-color: #f1f5f9;
+  --secondary-hover: #e2e8f0;
+  --border-radius-md: 0.5rem;
+  --border-radius-lg: 0.75rem;
+  --transition: all 0.2s ease;
+
+
+  /*AgreeProduct*/
+  --input-border: #e2e8f0;
+  --input-focus: #2a4d97;
+  --bg-dropdown: #ffffff;
+  --text-muted: #64748b00;
+  --item-hover: #f8fafc;
+
+
+  /*CreatedCita*/
+  --bg-page: #f8fafc;
+  --bg-inputs: #ffffff;
+  --text-primary: #0f172a;
+  --text-secondary: #475569;
+  --text-muted: #64748b;
+  --border-light: #e2e8f0;
+  --border-focus: #0ea5e9;
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --radius-sm: 0.375rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.75rem;
+  --transition: all 0.2s ease;
+  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+
+  /*Facturas*/
+  --bg-facturas: #1e293b;
+  --bg-main: #0f172a;
+  --bg-hover: rgb(0, 80, 47);
+  --text-main: #f1f5f9;
+  --text-muted: #ffffff;
+  --accent-green: #10b981;
+  --accent-blue: #0c3d9f;
+  --border-color: #ffffff;
+
+  /*colores*/
+  --color-black: #000000;
+  --color-white: #ffffff;
+
+  /*inputs*/
+  --inputs-bordes: #309ff9;
+  --inputs-px: 2px;
+
+  /*Buttons color */
+  --btn-login: #34cc06;
+  --btn-login-hover: #259e04;
+  --btn-blue: rgb(1, 1, 225);
+
+  /* Switch Colors */
+  --SW-green: rgb(0, 125, 0);
+  --SW-blue: rgb(1, 1, 225);
+  --SW-red: rgb(197, 0, 0);
+  --SW-white: white;
+  --SW-disable-default: rgb(100, 100, 100);
+  --SW-thumb-color: white;
+  --SW-thumb-color: black;
+
+
+  /*Bordes*/
+  --border-gray-low: #9b9b9b;
+  --border-gray-hight: #575757;
+  --border-white: #f3f4f6;
+  --border-black: #000000;
+
+  /* Gradients */
+  --gr-login: linear-gradient(135deg, #0041f2, #1341e0);
+  --gr-login-hover: linear-gradient(135deg, #0039d1, #1039c2);
+  --gr-create: linear-gradient(135deg, #0041f2, #0039d1);
+  --gr-create-hover: linear-gradient(135deg, #0039d1, #1039c2);
+  --gr-danger: linear-gradient(135deg, #d10000, #c20000);
+  --gr-danger-hover: linear-gradient(135deg, #c20000, #a30000);
+  --gr-cancel: linear-gradient(135deg, #d10000, #c20000);
+  --gr-cancel-hover: linear-gradient(135deg, #c20000, #a30000);
+  --gr-spinner-green-blue: linear-gradient(135deg, #027800, #0284c7);
+  --gr-spinner-green-blue-hover: linear-gradient(135deg, #0039d1, #1039c2);
+}
+
+.glass-panel-green {
+  background: var(--bg-glass-gradient-green) !important;
+  backdrop-filter: var(--glass-blur-panel) !important;
+  -webkit-backdrop-filter: var(--glass-blur-panel) !important;
+  border: var(--glass-border) !important;
+}
+
+.sidebar-glass {
+  background: var(--sidebar-bg) !important;
+  backdrop-filter: var(--sidebar-blur) !important;
+  -webkit-backdrop-filter: var(--sidebar-blur) !important;
+  border-right: var(--sidebar-border-right) !important;
+}
+
+.glass-pink-green {
+  background: var(--gr-pink-green) !important;
+  backdrop-filter: var(--glass-blur-pink-green) !important;
+  -webkit-backdrop-filter: var(--glass-blur-pink-green) !important;
+  border: 1px solid rgba(255, 255, 255, 0.2) !important;
+}
+
+.glass-pink-green * {
+  color: #ffffff !important;
+}

package/common/theme/muiTheme.js

@@ -0,0 +1,9 @@
+import { createTheme } from '@mui/material/styles';
+
+const muiTheme = createTheme({
+  typography: {
+    fontFamily: 'var(--font-sans)',
+  },
+});
+
+export default muiTheme;

package/features/password-reset/api.js

@@ -0,0 +1,39 @@
+import { request } from '../../common/api/client';
+
+export async function requestPasswordReset(email) {
+  return request('/users/request-password-reset', {
+    method: 'POST',
+    body: { email: String(email).trim() },
+  });
+}
+
+export async function getResetStatus(email) {
+  return request(`/users/reset-status/${encodeURIComponent(email)}`, {
+    method: 'GET',
+  });
+}
+
+export async function getPendingResets() {
+  return request('/users/pending-resets', {
+    method: 'GET',
+  });
+}
+
+export async function assignNewPassword(email, new_password) {
+  return request('/users/assign-new-password', {
+    method: 'POST',
+    body: {
+      email: String(email).trim(),
+      new_password: String(new_password).trim(),
+    },
+  });
+}
+
+const api = {
+  requestPasswordReset,
+  getResetStatus,
+  getPendingResets,
+  assignNewPassword,
+};
+
+export default api;

package/features/user-profile/api.js

@@ -0,0 +1,5 @@
+import { request } from '../../common/api/client';
+
+export async function updateUserName(payload) {
+  return request('/Users/update-user-name', { method: 'PATCH', body: payload });
+}