anteriority-ui 1.0.0

package/screens/components/Notification/Error/ErrorMessage.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { AlertCircle, CheckCircle } from 'lucide-react';
+import styles from './ErrorMessage.module.css';
+
+const ErrorMessage = ({ message, title = "Atención", variant = "danger", bgColor, borderColor, style }) => {
+  if (!message) return null;
+
+  return (
+    <div
+      className={`${styles.errorBanner} ${styles[variant] || ''}`}
+      style={{
+        ...(bgColor ? { '--errormessage-bg': bgColor } : {}),
+        ...(borderColor ? { '--errormessage-border': borderColor } : {}),
+        ...style,
+      }}
+    >
+      {variant === 'success' ? (
+        <CheckCircle size={18} className={styles.successIcon} />
+      ) : (
+        <AlertCircle size={18} className={styles.errorIcon} />
+      )}
+      <div className={styles.errorTextContent}>
+        <strong className={styles.errorTitle}>{title}</strong>
+        <span className={styles.errorText}>{message}</span>
+      </div>
+    </div>
+  );
+};
+
+export default ErrorMessage;

package/screens/components/Notification/Error/ErrorMessage.module.css

@@ -0,0 +1,57 @@
+.errorBanner {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 12px 16px;
+  border-radius: 8px;
+  margin: 10px 0;
+  animation: slideIn 0.3s ease-out;
+  border: 1px solid var(--errormessage-border, #fecdd3);
+  background-color: var(--errormessage-bg, #fff1f2);
+}
+
+.errorIcon {
+  color: #dc2626;
+  flex-shrink: 0;
+  margin-top: 2px;
+}
+
+.errorTextContent {
+  display: flex;
+  flex-direction: column;
+  font-size: 0.85rem;
+  line-height: 1.4;
+}
+
+.errorTitle {
+  color: #991b1b;
+  margin-bottom: 2px;
+}
+
+.errorText {
+  color: #b91c1c;
+}
+
+@keyframes slideIn {
+  from { opacity: 0; transform: translateY(-10px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.success {
+  border-color: var(--errormessage-border, #bbf7d0);
+  background-color: var(--errormessage-bg, #f0fdf4);
+}
+
+.success .errorTitle {
+  color: #166534;
+}
+
+.success .errorText {
+  color: #15803d;
+}
+
+.successIcon {
+  color: #22c55e;
+  flex-shrink: 0;
+  margin-top: 2px;
+}

package/screens/components/Notification/Error/ErrorMessage.stories.jsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import ErrorMessage from './ErrorMessage';
+
+export default {
+  title: 'Components/Notification/Error/ErrorMessage',
+  component: ErrorMessage,
+};
+
+export const Danger = {
+  args: {
+    title: 'Atención',
+    message: 'No se pudo completar la operación. Intenta de nuevo.',
+    variant: 'danger',
+  },
+};
+
+export const Success = {
+  args: {
+    title: 'Operación Exitosa',
+    message: '¡Contraseña actualizada correctamente!',
+    variant: 'success',
+  },
+};
+
+export const CustomTitle = {
+  args: {
+    title: 'Error de validación',
+    message: 'El correo electrónico ya está registrado.',
+    variant: 'danger',
+  },
+};
+
+export const NoMessage = {
+  args: {
+    message: '',
+  },
+};

package/screens/components/PasswordResetPanel/index.jsx

@@ -0,0 +1,325 @@
+import React, { useState, useEffect } from "react";
+import { Mail, Eye, EyeOff } from "lucide-react";
+import DrawPanel from "../DrawPanel/index";
+import TextField from "../Material-UI/Components/TextField/index";
+import ToggleCard from "../ToggleCard";
+import Loading from "../Loading/index";
+import ErrorMessage from "../Notification/Error/ErrorMessage";
+import Button from "../Button/index";
+import CountdownBar from "../CountdownBar";
+import DateTag from "../DateTag";
+import useAdminPasswordReset from "../../../hooks/useAdminPasswordReset";
+
+const DEFAULT_PENDING_COLOR = { label: '#b45309', bg: '#fffbeb', text: '#92400e' };
+const DEFAULT_ACCEPTED_COLOR = { label: '#16a34a', bg: '#f0fdf4', text: '#166534' };
+const DEFAULT_EXPIRED_COLOR = { label: '#ef4444', bg: '#fef2f2', text: '#991b1b' };
+
+export default function PasswordResetPanel({
+  isOpen,
+  onClose,
+  cancelColor = 'var(--button-red, #ef4444)',
+  pendingColor = DEFAULT_PENDING_COLOR,
+  acceptedColor = DEFAULT_ACCEPTED_COLOR,
+  expiredColor = DEFAULT_EXPIRED_COLOR,
+}) {
+  const { 
+    requestPasswordReset, 
+    assignNewPassword, 
+    requestLoading, 
+    pwdLoading, 
+    error: apiError, 
+    success: pwdSuccess, 
+    status: pwdStatus, 
+    setStatus: setPwdStatus,
+    clearError,
+    pendingList,
+    fetchLoading,
+    fetchPendingList,
+    startPolling,
+    stopPolling,
+    activeTicket,
+    setActiveTicket,
+    resetResetState
+  } = useAdminPasswordReset();
+
+  const [pwdData, setPwdData] = useState({ email: '', newPassword: '', confirmPassword: '' });
+  const [showPass, setShowPass] = useState(false);
+  const [localPwdError, setLocalPwdError] = useState(null);
+
+  const resolvedPendingColor = { ...DEFAULT_PENDING_COLOR, ...pendingColor };
+  const resolvedAcceptedColor = { ...DEFAULT_ACCEPTED_COLOR, ...acceptedColor };
+  const resolvedExpiredColor = { ...DEFAULT_EXPIRED_COLOR, ...expiredColor };
+
+  // Map API status to UI Steps
+  const pwdStep = pwdStatus === 'Idle' ? 1 : pwdStatus === 'Pending' ? 2 : 3;
+
+  const [showPwdToast, setShowPwdToast] = useState(false);
+
+  useEffect(() => {
+    if (pwdStep === 2) {
+      setShowPwdToast(true);
+    } else {
+      setShowPwdToast(false);
+    }
+  }, [pwdStep]);
+
+  useEffect(() => {
+    if (isOpen) {
+      fetchPendingList();
+    } else {
+      setPwdData({ email: '', newPassword: '', confirmPassword: '' });
+      setLocalPwdError(null);
+      resetResetState();
+      stopPolling();
+    }
+  }, [isOpen, fetchPendingList, resetResetState, stopPolling]);
+
+  const handleContinuePending = (pendingUser) => {
+    setPwdData({ ...pwdData, email: pendingUser.email });
+    setPwdStatus(pendingUser.status);
+    setActiveTicket(pendingUser);
+    if (pendingUser.status === 'Pending') {
+      startPolling(pendingUser.email);
+    }
+  };
+
+  useEffect(() => {
+    if (localPwdError) setLocalPwdError(null);
+  }, [pwdData]);
+
+  const handlePwdChange = (e) => setPwdData({ ...pwdData, [e.target.name]: e.target.value });
+
+  const submitPasswordChange = async (e) => {
+    if (e) e.preventDefault();
+    clearError();
+    
+    if (pwdStep === 1) {
+      if (!pwdData.email) {
+        setLocalPwdError("Ingresa el correo del usuario.");
+        return;
+      }
+      await requestPasswordReset(pwdData.email);
+      return;
+    }
+    
+    if (pwdStep === 3) {
+      if (pwdData.newPassword !== pwdData.confirmPassword) {
+        setLocalPwdError("Las contraseñas nuevas no coinciden");
+        return;
+      }
+      if (pwdData.newPassword.length < 6) {
+        setLocalPwdError("La contraseña debe tener al menos 6 caracteres");
+        return;
+      }
+      const ok = await assignNewPassword(pwdData.email, pwdData.newPassword);
+      if (ok) {
+        setTimeout(() => {
+          resetResetState();
+          setPwdData({ email: '', newPassword: '', confirmPassword: '' });
+          fetchPendingList();
+        }, 3000);
+      }
+    }
+  };
+
+  return (
+    <DrawPanel
+      isOpen={isOpen}
+      onClose={onClose}
+      title="Restablecimiento de Contraseñas"
+      showActions={true}
+      onConfirm={submitPasswordChange}
+      confirmText={pwdStep === 1 ? "Solicitar Aprobación" : "Cambiar Clave"}
+      cancelText="Cancelar"
+      loading={pwdLoading || requestLoading}
+      formId="changePwdForm"
+    >
+      {showPwdToast && (
+        <ToggleCard
+          title="Recuperación de Contraseña"
+          description={`Se envio la solicitua al usuario ${pwdData.email}`}
+          icon={Mail}
+          iconColorVariant="blue"
+          onClose={() => setShowPwdToast(false)}
+          variant="floating"
+        />
+      )}
+
+      <form id="changePwdForm" onSubmit={submitPasswordChange} autoComplete="off" style={{ display: 'flex', flexDirection: 'column', gap: '1.2rem', padding: '10px 0' }}>
+        
+        {(requestLoading || pwdLoading || fetchLoading || (pwdStep === 2 && (!activeTicket || !activeTicket.expiracion))) ? (
+          <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', minHeight: '300px' }}>
+            <Loading 
+              size="large" 
+              phrases={["Iniciando solicitud"]}
+              variant=''
+            />
+          </div>
+        ) : pwdStep === 2 ? (
+          <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', minHeight: '300px', gap: '1.5rem', width: '100%' }}>
+            <Loading 
+              size="large" 
+              phrases={["Cargando", "Esperando la aceptación del usuario", "Verificando"]}
+              variant='bounce'
+            />
+            <div style={{ textAlign: 'center', width: '100%' }}>
+              <p style={{ margin: '0 0 8px 0', fontSize: '0.9rem', color: '#475569' }}>
+                Esperando por: <b>{pwdData.email}</b>
+              </p>
+              <div style={{ width: '100%', padding: '0 20px', boxSizing: 'border-box', marginBottom: '15px' }}>
+                <CountdownBar 
+                  active={true} 
+                  expiresAt={activeTicket?.expiracion} 
+                  totalDuration={(activeTicket?.expiresInSeconds || activeTicket?.expires_in_seconds || 900) * 1000} 
+                />
+              </div>
+              <Button
+                type="button"
+                onClick={() => {
+                  resetResetState();
+                  stopPolling();
+                }}
+                color={cancelColor}
+                size="small"
+                style={{ fontSize: '0.75rem', marginTop: '10px' }}
+              >
+                Cancelar Espera
+              </Button>
+            </div>
+          </div>
+        ) : (
+          <>
+            {pwdStep === 1 && !fetchLoading && (
+              <>
+                {pendingList && pendingList.length > 0 && (
+                  <div style={{ marginBottom: '20px' }}>
+                    <h4 style={{ margin: '0 0 10px 0', color: '#334155', fontSize: '0.9rem' }}>Hay solicitudes en proceso:</h4>
+                    <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: '8px' }}>
+                      {pendingList.map((item, idx) => {
+                        const isExpired = item.status === 'Pending' && (
+                          item.expiresInSeconds === 0 || 
+                          item.expires_in_seconds === 0 || 
+                          (item.expiracion && new Date(item.expiracion).getTime() <= Date.now())
+                        );
+
+                        return (
+                          <li key={idx} style={{ background: '#f8fafc', border: '1px solid #e2e8f0', borderRadius: '6px', padding: '10px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                            <div>
+                              <div style={{ fontSize: '0.85rem', fontWeight: 'bold', color: '#0f172a' }}>{item.email}</div>
+                              <div style={{
+                                fontSize: '0.75rem',
+                                color: isExpired ? resolvedExpiredColor.label : item.status === 'Accepted' ? resolvedAcceptedColor.label : resolvedPendingColor.label,
+                                marginBottom: '6px'
+                              }}>
+                                {isExpired ? 'Solicitud expirada' : item.status === 'Accepted' ? 'Lista para asignar nueva clave' : 'Enviado al correo'}
+                              </div>
+                              {item.expiracion && (
+                                <DateTag
+                                  date={item.expiracion}
+                                  bgColor={isExpired ? resolvedExpiredColor.bg : item.status === 'Accepted' ? resolvedAcceptedColor.bg : resolvedPendingColor.bg}
+                                  textColor={isExpired ? resolvedExpiredColor.text : item.status === 'Accepted' ? resolvedAcceptedColor.text : resolvedPendingColor.text}
+                                />
+                              )}
+                            </div>
+                            <Button
+                              onClick={() => handleContinuePending(item)}
+                              color={isExpired ? 'inherit' : item.status === 'Accepted' ? 'var(--button-green)' : 'primary'}
+                              size="small"
+                              style={{ fontSize: '0.75rem', padding: '4px 10px', minWidth: 'auto' }}
+                              disabled={isExpired}
+                            >
+                              Continuar
+                            </Button>
+                          </li>
+                        );
+                      })}
+                    </ul>
+                    <hr style={{ border: '0', borderTop: '1px solid #e2e8f0', margin: '20px 0' }} />
+                    <h4 style={{ margin: '0 0 10px 0', color: '#334155', fontSize: '0.9rem' }}>O iniciar nueva solicitud:</h4>
+                  </div>
+                )}
+                <ToggleCard
+                  title="Correo Electrónico"
+                  description="Ingresa el correo electrónico del usuario para enviarle una solicitud de aprobación para el cambio de clave."
+                  icon={Mail}
+                  iconColorVariant="blue"
+                  isOpen={false}
+                />
+                <TextField
+                  label="Correo Electrónico"
+                  name="email"
+                  value={pwdData.email}
+                  onChange={handlePwdChange}
+                  placeholder="usuario@correo.com"
+                  disabled={pwdLoading || requestLoading}
+                  autoComplete="off"
+                />
+              </>
+            )}
+
+            {pwdStep === 3 && (
+              <>
+                <ToggleCard
+                  title="Correo Electrónico"
+                  description="A continuación ingrese la nueva clave, esta debe tener al menos 6 caracteres, puede cerrar el panel, pero tras 15 minutos expirará la solicitud."
+                  icon={Mail}
+                  iconColorVariant="blue"
+                  isOpen={false}
+                />
+                <TextField
+                  label="Correo Electrónico (Autocompletado)"
+                  name="email"
+                  value={pwdData.email || 'usuario@correo.com'}
+                  disabled={true}
+                />
+                <div style={{ position: 'relative', marginTop: '10px' }}>
+                  <TextField
+                    label="Nueva Contraseña"
+                    name="newPassword"
+                    type={showPass ? "text" : "password"}
+                    value={pwdData.newPassword}
+                    onChange={handlePwdChange}
+                    placeholder="Mínimo 6 caracteres"
+                    disabled={pwdLoading}
+                    autoComplete="new-password"
+                    slotProps={{
+                      input: {
+                        endAdornment: (
+                          <button type="button" onClick={() => setShowPass(!showPass)} tabIndex={-1} style={{ position: 'absolute', right: '10px', top: '50%', transform: 'translateY(-50%)', background: 'none', border: 'none', cursor: 'pointer', display: 'flex', alignItems: 'center' }}>
+                            {showPass ? <EyeOff size={18} color="#64748b" /> : <Eye size={18} color="#64748b" />}
+                          </button>
+                        )
+                      }
+                    }}
+                  />
+                </div>
+                <TextField
+                  label="Confirmar Nueva Contraseña"
+                  name="confirmPassword"
+                  type={showPass ? "text" : "password"}
+                  value={pwdData.confirmPassword}
+                  onChange={handlePwdChange}
+                  placeholder="Repite la nueva contraseña"
+                  disabled={pwdLoading}
+                  autoComplete="new-password"
+                />
+              </>
+            )}
+            <ErrorMessage 
+              message={apiError || localPwdError} 
+              title="Error en la solicitud" 
+              variant="danger" 
+            />
+            {pwdSuccess && (
+              <ErrorMessage 
+                message="¡Contraseña actualizada correctamente!" 
+                title="Operación Exitosa" 
+                variant="success" 
+              />
+            )}
+          </>
+        )}
+      </form>
+    </DrawPanel>
+  );
+}

package/screens/components/PasswordResetPanel/index.stories.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import PasswordResetPanel from './index';
+
+export default {
+  title: 'Components/PasswordResetPanel',
+  component: PasswordResetPanel,
+};
+
+// Note: this component calls a real hook (useAdminPasswordReset) which performs
+// fetch() calls to relative API paths (e.g. /users/pending-resets). There is no
+// backend in Storybook, so those requests will fail/reject — this is expected,
+// and the panel still renders its initial/loading/error UI without crashing.
+
+export const Open = {
+  args: {
+    isOpen: true,
+    onClose: () => console.log('close panel'),
+  },
+};
+
+export const Closed = {
+  args: {
+    isOpen: false,
+    onClose: () => console.log('close panel'),
+  },
+};

package/screens/components/PlaceholderButton/index.jsx

@@ -0,0 +1,169 @@
+import React, { useState, useEffect } from 'react';
+import { Save, Loader2 } from 'lucide-react';
+import styles from './index.module.css';
+import { handleAction } from './utils';
+
+import Button from '../Button/index';
+import InputWithIcon from '../Material-UI/Components/InputWithIcon/index'; 
+
+const PlaceholderButton = ({
+  icon: Icon,
+  tooltipText, 
+  placeholder,
+  unitText,
+  buttonText,
+  hintText,
+  disabledHintText,
+  
+  initialValue = '',
+  inputType = 'number',
+  min = "1",
+  disabled = false,
+  multiline = false,
+  
+  onSavePromise,
+  clearCache,
+  
+  successMessage,
+  errorMessage,
+  validationErrorMsg,
+  clearOnSuccess = false,
+
+  focusColor,
+  unitBgColor,
+}) => {
+  const [value, setValue] = useState(initialValue);
+  const [isSaving, setIsSaving] = useState(false);
+  const [message, setMessage] = useState({ text: '', type: '' });
+
+  useEffect(() => {
+    setValue(initialValue);
+  }, [initialValue]);
+
+  const onSaveClick = () => {
+    handleAction({
+      actionPromise: onSavePromise,
+      value: inputType === 'number' ? parseInt(value) : value,
+      setIsSaving,
+      setMessage,
+      clearCache,
+      successMessage,
+      errorMessage,
+      validationErrorMsg,
+      validate: (v) => inputType === 'number' ? (v && v >= 1) : !!v,
+      setValue,
+      clearOnSuccess
+    });
+  };
+
+  const handleKeyDown = (e) => {
+    if (e.key === 'Enter') {
+      if (multiline) {
+        if (e.ctrlKey) {
+          e.preventDefault();
+          const start = e.target.selectionStart;
+          const end = e.target.selectionEnd;
+          const val = e.target.value;
+          setValue(val.substring(0, start) + "\n" + val.substring(end));
+          setTimeout(() => {
+            e.target.selectionStart = e.target.selectionEnd = start + 1;
+          }, 0);
+        } else {
+          e.preventDefault();
+          if (!isSaving && !disabled) {
+            onSaveClick();
+          }
+        }
+      } else {
+        if (!isSaving && !disabled) {
+          e.preventDefault();
+          onSaveClick();
+        }
+      }
+    }
+  };
+
+  return (
+    <div
+      className={`${styles.configContainer} ${disabled ? styles.disabledContainer : ''}`}
+      style={{
+        ...(focusColor ? { '--placeholderbutton-focus': focusColor } : {}),
+        ...(unitBgColor ? { '--placeholderbutton-unit-bg': unitBgColor } : {}),
+      }}
+    >
+      <div className={styles.inputGroup}>
+        {multiline ? (
+          <InputWithIcon
+            value={value}
+            onChange={(e) => setValue(e.target.value)}
+            onKeyDown={handleKeyDown}
+            placeholder={placeholder}
+            disabled={disabled}
+            multiline
+            maxRows={4}
+            variant="outlined" 
+            style={{ flex: 1 }}
+          />
+        ) : (
+          <div className={styles.inputWrapper}>
+            <InputWithIcon
+              variant="standard" 
+              icon={Icon}
+              type={inputType}
+              value={value}
+              onChange={(e) => setValue(e.target.value)}
+              onKeyDown={handleKeyDown}
+              placeholder={placeholder}
+              disabled={disabled}
+              disableUnderline  
+              fullWidth
+              inputProps={{ 
+                min: min, 
+                className: styles.daysInput 
+              }}
+              sx={{ 
+                '& .MuiInput-root': {
+                  height: '100%',
+                  marginTop: '0px !important',
+                },
+                flex: 1
+              }}
+            />
+            {unitText && <span className={styles.unitText}>{unitText}</span>}
+          </div>
+        )}
+
+        <Button
+          variant={Button.VARIANTS.PRIMARY}
+          size={Button.SIZES.LARGE}
+          icon={isSaving ? Loader2 : Save}
+          color={Button.COLORS.BLUE}
+          onClick={onSaveClick}
+          loading={isSaving}
+        >
+          {buttonText}
+        </Button>
+      </div>
+
+      {disabled && disabledHintText && (
+        <p className={styles.infoTextDisabled}>
+          {disabledHintText}
+        </p>
+      )}
+
+      {message.text && (
+        <p className={`${styles.statusMessage} ${styles[message.type]}`}>
+          {message.text}
+        </p>
+      )}
+
+      {hintText && (
+        <p className={styles.hintText}>
+          {hintText}
+        </p>
+      )}
+    </div>
+  );
+};
+
+export default PlaceholderButton;