@zauru-sdk/components 6.9.0 → 6.11.0

package/src/AccessControl/WebappEmployeeAccess.tsx

@@ -0,0 +1,275 @@
+import type {
+  EmployeeGraphQL,
+  SelectFieldOption,
+  WebAppRowGraphQL,
+  WebappEmployeeRole,
+  WebappRole,
+} from "@zauru-sdk/types";
+import { isSuperAdminEmail } from "@zauru-sdk/utils";
+import { useMemo, type ReactNode } from "react";
+import { z } from "zod";
+import { Button } from "../Buttons/Button.js";
+import { ButtonSectionContainer } from "../Containers/ButtonSectionContainer.js";
+import { DoubleFieldContainer } from "../Form/FieldContainer/DoubleFieldContainer.js";
+import { ReactZodForm } from "../Form/ReactZodForm/index.js";
+import { SelectField } from "../Form/SelectField/index.js";
+import { ZauruTable } from "../Table/ZauruTable.js";
+
+const addEmployeeSchema = z.object({
+  employee_id: z.coerce.number().min(1, "El empleado es requerido"),
+  role_id: z.coerce.number().min(1, "El rol es requerido"),
+});
+
+export type WebappEmployeeAssignmentChange<
+  TAssignment extends WebappEmployeeRole,
+> = {
+  employee: EmployeeGraphQL;
+  assignment?: WebAppRowGraphQL<TAssignment>;
+  roleId: number | null;
+};
+
+export type WebappEmployeeAssignmentDetails<
+  TAssignment extends WebappEmployeeRole,
+> = {
+  employee: EmployeeGraphQL;
+  assignment?: WebAppRowGraphQL<TAssignment>;
+  disabled: boolean;
+};
+
+type Props<TAssignment extends WebappEmployeeRole> = {
+  employees: EmployeeGraphQL[];
+  roles: WebAppRowGraphQL<WebappRole>[];
+  assignments: WebAppRowGraphQL<TAssignment>[];
+  canAssign?: boolean;
+  loading?: boolean;
+  description?: string;
+  superAdminLabel?: string;
+  addEmployeeTitle?: string;
+  addEmployeeDescription?: string;
+  noEmployeesToAddText?: string;
+  noRolesText?: string;
+  assignmentDetailsColumn?: {
+    name: string;
+    minWidth?: string;
+    grow?: number;
+  };
+  renderAssignmentDetails?: (
+    details: WebappEmployeeAssignmentDetails<TAssignment>,
+  ) => ReactNode;
+  superAdminEmailSuffixes?: readonly string[];
+  onAssignRole: (
+    change: WebappEmployeeAssignmentChange<TAssignment>,
+  ) => void;
+  onAddEmployee: (employeeId: number, roleId: number) => void;
+};
+
+export function WebappEmployeeAccess<
+  TAssignment extends WebappEmployeeRole = WebappEmployeeRole,
+>({
+  employees,
+  roles,
+  assignments,
+  canAssign = false,
+  loading = false,
+  description =
+    "Solo aparecen quienes ya tienen acceso: rol asignado o super admin. Quitar el rol los saca de la lista.",
+  superAdminLabel = "Super admin (todos los permisos)",
+  addEmployeeTitle = "Agregar empleado",
+  addEmployeeDescription =
+    "Busca entre quienes aún no están en la lista y asígnales un rol.",
+  noEmployeesToAddText = "No quedan empleados activos por agregar.",
+  noRolesText = "Crea al menos un rol antes de agregar empleados.",
+  assignmentDetailsColumn,
+  renderAssignmentDetails,
+  superAdminEmailSuffixes,
+  onAssignRole,
+  onAddEmployee,
+}: Props<TAssignment>) {
+  const roleOptions: SelectFieldOption[] = useMemo(
+    () => [
+      { value: "", label: "Sin rol" },
+      ...roles.map((role) => ({
+        value: String(role.id),
+        label: role.data.name,
+      })),
+    ],
+    [roles],
+  );
+
+  const addRoleOptions: SelectFieldOption[] = useMemo(
+    () =>
+      roles.map((role) => ({
+        value: String(role.id),
+        label: role.data.name,
+      })),
+    [roles],
+  );
+
+  const assignmentByEmployee = useMemo(() => {
+    const map = new Map<number, WebAppRowGraphQL<TAssignment>>();
+    for (const row of assignments) {
+      map.set(Number(row.data.employee_id), row);
+    }
+    return map;
+  }, [assignments]);
+
+  const listedEmployees = useMemo(
+    () =>
+      employees
+        .filter(
+          (employee) =>
+            isSuperAdminEmail(employee.email, superAdminEmailSuffixes) ||
+            assignmentByEmployee.has(employee.id),
+        )
+        .sort((a, b) => a.name.localeCompare(b.name)),
+    [assignmentByEmployee, employees, superAdminEmailSuffixes],
+  );
+
+  const addEmployeeOptions: SelectFieldOption[] = useMemo(() => {
+    const listedIds = new Set(listedEmployees.map((employee) => employee.id));
+    return employees
+      .filter((employee) => !listedIds.has(employee.id))
+      .sort((a, b) => a.name.localeCompare(b.name))
+      .map((employee) => ({
+        value: employee.id,
+        label: employee.email
+          ? `${employee.name} (${employee.email})`
+          : employee.name,
+      }));
+  }, [employees, listedEmployees]);
+
+  const columns = [
+    {
+      name: "Empleado",
+      sortable: true,
+      grow: 1,
+      minWidth: "12rem",
+      selector: (employee: EmployeeGraphQL) => employee.name,
+    },
+    {
+      name: "Email",
+      sortable: true,
+      grow: 1,
+      minWidth: "14rem",
+      selector: (employee: EmployeeGraphQL) => employee.email || "—",
+    },
+    {
+      name: "Rol",
+      minWidth: "14rem",
+      cell: (employee: EmployeeGraphQL) => {
+        const assignment = assignmentByEmployee.get(employee.id);
+        const superAdmin = isSuperAdminEmail(
+          employee.email,
+          superAdminEmailSuffixes,
+        );
+        const currentRole = assignment
+          ? String(assignment.data.role_id)
+          : "";
+
+        return (
+          <div className="w-56 py-2">
+            {superAdmin ? (
+              <p className="text-sm text-gray-600">{superAdminLabel}</p>
+            ) : (
+              <SelectField
+                name={`role_${employee.id}`}
+                options={roleOptions}
+                defaultValue={
+                  roleOptions.find(
+                    (option) => option.value === currentRole,
+                  ) ?? roleOptions[0]
+                }
+                disabled={!canAssign || loading}
+                onChange={(option) => {
+                  const value = option?.value?.toString() ?? "";
+                  onAssignRole({
+                    employee,
+                    assignment,
+                    roleId: value ? Number(value) : null,
+                  });
+                }}
+              />
+            )}
+          </div>
+        );
+      },
+    },
+    ...(assignmentDetailsColumn && renderAssignmentDetails
+      ? [
+          {
+            name: assignmentDetailsColumn.name,
+            minWidth: assignmentDetailsColumn.minWidth ?? "16rem",
+            grow: assignmentDetailsColumn.grow ?? 1,
+            cell: (employee: EmployeeGraphQL) => {
+              const assignment = assignmentByEmployee.get(employee.id);
+              return renderAssignmentDetails({
+                employee,
+                assignment,
+                disabled: !canAssign || !assignment || loading,
+              });
+            },
+          },
+        ]
+      : []),
+  ];
+
+  return (
+    <div className="mt-4 space-y-6">
+      <p className="text-sm text-gray-600">{description}</p>
+      <ZauruTable
+        columns={columns}
+        data={listedEmployees}
+        loading={loading}
+        offlineSearch={["name", "email"]}
+      />
+      {canAssign ? (
+        roles.length === 0 ? (
+          <p className="text-sm text-gray-600" role="status">
+            {noRolesText}
+          </p>
+        ) : addEmployeeOptions.length > 0 ? (
+          <div className="rounded-md border border-gray-200 bg-white p-4">
+            <ReactZodForm
+              schema={addEmployeeSchema}
+              onSubmit={(values) =>
+                onAddEmployee(
+                  Number(values.employee_id),
+                  Number(values.role_id),
+                )
+              }
+            >
+              <h2 className="text-base font-semibold text-gray-900">
+                {addEmployeeTitle}
+              </h2>
+              <p className="mb-4 mt-1 text-sm text-gray-600">
+                {addEmployeeDescription}
+              </p>
+              <DoubleFieldContainer alignCenter={false}>
+                <SelectField
+                  name="employee_id"
+                  title="Empleado"
+                  hint="Escribe para filtrar por nombre o correo"
+                  options={addEmployeeOptions}
+                  required
+                />
+                <SelectField
+                  name="role_id"
+                  title="Rol"
+                  options={addRoleOptions}
+                  required
+                />
+              </DoubleFieldContainer>
+              <ButtonSectionContainer>
+                <Button loading={loading} title="Agregar" />
+              </ButtonSectionContainer>
+            </ReactZodForm>
+          </div>
+        ) : (
+          <p className="text-sm text-gray-600" role="status">
+            {noEmployeesToAddText}
+          </p>
+        )
+      ) : null}
+    </div>
+  );
+}

package/src/AccessControl/WebappRoleManagement.tsx

@@ -0,0 +1,207 @@
+import { PencilSvg, TrashSvg } from "@zauru-sdk/icons";
+import type {
+  WebAppRowGraphQL,
+  WebappRole,
+} from "@zauru-sdk/types";
+import { useSyncExternalStore } from "react";
+import { z } from "zod";
+import { Button } from "../Buttons/Button.js";
+import { ButtonSectionContainer } from "../Containers/ButtonSectionContainer.js";
+import { ReactZodForm } from "../Form/ReactZodForm/index.js";
+import { TextField } from "../Form/TextField/index.js";
+import { createModal } from "../Modal/Modal.js";
+import { ZauruTable } from "../Table/ZauruTable.js";
+
+const roleSchema = z.object({
+  name: z.string().min(1, "El nombre es requerido"),
+  description: z.string().optional(),
+});
+
+const subscribeToBrowser = () => () => undefined;
+const getBrowserSnapshot = () => true;
+const getServerSnapshot = () => false;
+
+export type WebappRoleValues = {
+  name: string;
+  description: string;
+};
+
+type Props = {
+  roles: WebAppRowGraphQL<WebappRole>[];
+  canCreate?: boolean;
+  canEdit?: boolean;
+  canDelete?: boolean;
+  loading?: boolean;
+  createTitle?: string;
+  createButtonLabel?: string;
+  editTitle?: string;
+  deleteTitle?: string;
+  deleteDescription?: string;
+  onCreate: (values: WebappRoleValues) => void;
+  onUpdate: (roleId: number, values: WebappRoleValues) => void;
+  onDelete: (roleId: number) => void;
+};
+
+export function WebappRoleManagement({
+  roles,
+  canCreate = false,
+  canEdit = false,
+  canDelete = false,
+  loading = false,
+  createTitle = "Crear rol",
+  createButtonLabel = "Crear rol",
+  editTitle = "Editar rol",
+  deleteTitle = "¿Eliminar este rol?",
+  deleteDescription = "No se puede eliminar si hay empleados asignados.",
+  onCreate,
+  onUpdate,
+  onDelete,
+}: Props) {
+  const isClient = useSyncExternalStore(
+    subscribeToBrowser,
+    getBrowserSnapshot,
+    getServerSnapshot,
+  );
+
+  const editRole = async (role: WebAppRowGraphQL<WebappRole>) => {
+    let name = role.data.name;
+    let description = role.data.description ?? "";
+    const response = await createModal({
+      title: editTitle,
+      okButtonText: "Guardar",
+      description: (
+        <>
+          <TextField
+            title="Nombre"
+            name="name"
+            defaultValue={name}
+            onChange={(value) => {
+              name = value;
+            }}
+          />
+          <TextField
+            className="mt-4"
+            title="Descripción"
+            name="description"
+            defaultValue={description}
+            onChange={(value) => {
+              description = value;
+            }}
+          />
+        </>
+      ),
+    });
+
+    if (response === "OK") {
+      onUpdate(role.id, { name, description });
+    }
+  };
+
+  const confirmDelete = async (roleId: number) => {
+    const response = await createModal({
+      title: deleteTitle,
+      description: deleteDescription,
+    });
+    if (response === "OK") {
+      onDelete(roleId);
+    }
+  };
+
+  const columns = [
+    {
+      name: "Nombre",
+      sortable: true,
+      grow: 1,
+      selector: (role: WebAppRowGraphQL<WebappRole>) => role.data.name,
+    },
+    {
+      name: "Descripción",
+      grow: 2,
+      selector: (role: WebAppRowGraphQL<WebappRole>) =>
+        role.data.description || "—",
+    },
+    {
+      name: "Permisos",
+      width: "8%",
+      selector: (role: WebAppRowGraphQL<WebappRole>) =>
+        role.data.permission_keys?.length ?? 0,
+    },
+    {
+      name: "",
+      grow: 0,
+      minWidth: "90px",
+      maxWidth: "90px",
+      cell: (role: WebAppRowGraphQL<WebappRole>) => (
+        <div className="flex gap-2">
+          {canDelete ? (
+            <button
+              type="button"
+              title="Eliminar"
+              aria-label={`Eliminar rol ${role.data.name}`}
+              disabled={loading}
+              className="cursor-pointer rounded focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+              onClick={() => void confirmDelete(role.id)}
+            >
+              <TrashSvg />
+            </button>
+          ) : null}
+          {canEdit ? (
+            <button
+              type="button"
+              title="Editar"
+              aria-label={`Editar rol ${role.data.name}`}
+              disabled={loading}
+              className="cursor-pointer rounded focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+              onClick={() => void editRole(role)}
+            >
+              <PencilSvg />
+            </button>
+          ) : null}
+        </div>
+      ),
+    },
+  ];
+
+  if (!isClient) {
+    return null;
+  }
+
+  return (
+    <div className="mt-4 space-y-6">
+      <ZauruTable
+        columns={columns}
+        data={[...roles].sort((a, b) =>
+          a.data.name.localeCompare(b.data.name),
+        )}
+        loading={loading}
+        offlineSearch={["data.name", "data.description"]}
+      />
+      {canCreate ? (
+        <div className="rounded-md border border-gray-200 bg-white p-4">
+          <ReactZodForm
+            schema={roleSchema}
+            onSubmit={(values) =>
+              onCreate({
+                name: String(values.name ?? ""),
+                description: String(values.description ?? ""),
+              })
+            }
+          >
+            <h2 className="mb-4 text-base font-semibold text-gray-900">
+              {createTitle}
+            </h2>
+            <TextField name="name" title="Nombre del rol" required />
+            <TextField
+              className="mt-4"
+              name="description"
+              title="Descripción"
+            />
+            <ButtonSectionContainer>
+              <Button loading={loading} title={createButtonLabel} />
+            </ButtonSectionContainer>
+          </ReactZodForm>
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/src/AccessControl/index.ts

@@ -0,0 +1,2 @@
+export * from "./WebappEmployeeAccess.js";
+export * from "./WebappRoleManagement.js";

package/src/Form/SelectField/index.tsx

@@ -4,6 +4,7 @@ import React, {
   useEffect,
   useState,
   useRef,
+  useId,
   KeyboardEvent,
   useCallback,
 } from "react";
@@ -89,6 +90,10 @@ export const SelectField = (props: Props) => {
   );
   const [isTabPressed, setIsTabPressed] = useState<boolean>(false);
   const [isSearching, setIsSearching] = useState<boolean>(false);
+  const generatedInputId = useId();
+  const inputId = id ?? (name ? `${name}-input` : generatedInputId);
+  const errorId = `${inputId}-error`;
+  const hintId = `${inputId}-hint`;
 
   // Use refs to store stable references to callbacks
   const onChangeRef = useRef(onChange);
@@ -409,12 +414,11 @@ export const SelectField = (props: Props) => {
     return (
       <>
         {title && (
-          <label
-            htmlFor={error ? `${name}-error` : `${name}-success`}
+          <span
             className={`block text-sm font-medium text-${color}-700 dark:text-${color}-500`}
           >
             {title}
-          </label>
+          </span>
         )}
         <LoadingInputSkeleton />
         {helpText && (
@@ -432,7 +436,7 @@ export const SelectField = (props: Props) => {
     <div className={`col-span-6 sm:col-span-3 ${className}`} ref={selectRef}>
       {title && (
         <label
-          htmlFor={error ? `${name}-error` : `${name}-success`}
+          htmlFor={inputId}
           className={`block text-sm font-medium ${
             color === "red"
               ? "text-red-700 dark:text-red-500"
@@ -447,7 +451,7 @@ export const SelectField = (props: Props) => {
         <div className="flex items-center">
           <input
             type="text"
-            id={id}
+            id={inputId}
             value={inputValue}
             onFocus={() => setIsOpen(true)}
             onKeyDown={handleKeyDown}
@@ -459,14 +463,21 @@ export const SelectField = (props: Props) => {
             onChange={handleInputChange}
             onBlur={handleBlur}
             required={required}
+            aria-invalid={Boolean(error)}
+            aria-describedby={error ? errorId : hint ? hintId : undefined}
           />
           {isClearable && (value || valueMulti.length > 0) && (
             <button
               type="button"
               onClick={handleClear}
-              className="absolute inset-y-0 right-0 pr-3 flex items-center"
+              aria-label={
+                isMulti
+                  ? "Limpiar todas las opciones seleccionadas"
+                  : "Limpiar la opción seleccionada"
+              }
+              className="absolute inset-y-0 right-0 flex cursor-pointer items-center pr-3 text-gray-600 hover:text-gray-900 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2"
             >
-              ×
+              <span aria-hidden="true">×</span>
             </button>
           )}
           {helpText && (
@@ -542,32 +553,40 @@ export const SelectField = (props: Props) => {
         )}
       </div>
       {isMulti && valueMulti.length > 0 && (
-        <div className="mt-2 flex flex-wrap gap-2">
+        <ul
+          className="mt-2 flex max-h-20 flex-wrap gap-1.5 overflow-auto overscroll-contain rounded-md border border-blue-100 bg-blue-50/40 p-1.5"
+          aria-label="Opciones seleccionadas"
+        >
           {valueMulti.map((option, index) => (
-            <span
+            <li
               key={`${option.value}-${index}`}
-              className="bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded"
+              className="inline-flex max-w-full shrink-0 items-center rounded bg-blue-100 py-0.5 pl-2.5 pr-0.5 text-xs font-semibold text-blue-800"
             >
-              {option.label}
+              <span className="whitespace-nowrap">{option.label}</span>
               <button
                 type="button"
                 onClick={() => handleRemoveMultiValue(option)}
-                className="ml-1 text-blue-600 hover:text-blue-800"
+                aria-label={`Quitar ${option.label}`}
+                className="ml-1 inline-flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center rounded text-blue-700 hover:bg-blue-200 hover:text-blue-900 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-1"
               >
-                ×
+                <span aria-hidden="true">×</span>
               </button>
-            </span>
+            </li>
           ))}
-        </div>
+        </ul>
       )}
       {error && (
-        <p className={`mt-2 text-sm text-${color}-600 dark:text-${color}-500`}>
+        <p
+          id={errorId}
+          className={`mt-2 text-sm text-${color}-600 dark:text-${color}-500`}
+        >
           <span className="font-medium">Oops!</span>{" "}
           {error?.message?.toString() || "Error desconocido"}
         </p>
       )}
       {!error && hint && (
         <p
+          id={hintId}
           className={`mt-2 italic text-sm text-${color}-500 dark:text-${color}-400`}
         >
           {hint}

package/src/NavBar/NavBar.tsx

@@ -15,7 +15,12 @@ import type {
 import { Link, useNavigate, useLocation } from "@remix-run/react";
 import { useAppSelector } from "@zauru-sdk/redux";
 
-const OptionsDropDownButton = ({ color, options, name }: EntityProps) => {
+const OptionsDropDownButton = ({
+  color,
+  options,
+  name,
+  ariaLabel,
+}: EntityProps & { ariaLabel?: string }) => {
   const [showOptionsMenu, setShowOptionsMenu] = useState(true);
 
   return (
@@ -23,8 +28,14 @@ const OptionsDropDownButton = ({ color, options, name }: EntityProps) => {
       <div className="flex justify-center">
         <div className="relative inline-block">
           <button
+            type="button"
+            aria-label={
+              ariaLabel ?? (typeof name === "string" ? name : "Menú")
+            }
+            aria-haspopup="menu"
+            aria-expanded={!showOptionsMenu}
             onClick={() => setShowOptionsMenu(!showOptionsMenu)}
-            className={`relative flex cursor-pointer items-center p-2 text-xs text-white ${color.bg700} active:${color.bg900} border border-transparent rounded-full uppercase focus:ring-opacity-40 focus:outline-none`}
+            className={`relative flex cursor-pointer items-center p-2 text-xs text-white ${color.bg700} active:${color.bg900} border border-transparent rounded-full uppercase focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2`}
           >
             {name ?? <OpcionButtonSvgIcon />}
             <DropDownArrowSvgIcon />
@@ -128,6 +139,7 @@ export const NavBar = ({
   selectedColor,
   version,
   reloadCatalogsOption,
+  settingsOption,
   showDarkModeToggle = false,
 }: NavBarProps) => {
   const color: ColorInterface = COLORS[selectedColor];
@@ -191,7 +203,35 @@ export const NavBar = ({
           {loggedIn && (
             <OptionsDropDownButton
               color={color}
+              ariaLabel="Menú de usuario"
               options={[
+                settingsOption && (
+                  <Link
+                    key="configuracion"
+                    className="block cursor-pointer px-4 py-3 text-sm text-gray-600 capitalize transition-colors duration-200 transform dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 dark:hover:text-white"
+                    to="/configuracion"
+                  >
+                    <div className="mx-auto pt-2">
+                      <svg
+                        className="h-5 w-5 mr-1"
+                        width="24"
+                        height="24"
+                        fill="none"
+                        stroke="currentColor"
+                        strokeWidth="1.5"
+                        viewBox="0 0 24 24"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        xmlns="http://www.w3.org/2000/svg"
+                        aria-hidden="true"
+                      >
+                        <path d="M12 15.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Z" />
+                        <path d="M19.4 13a7.7 7.7 0 0 0 .06-2l2.1-1.64-2-3.46-2.55 1a7.7 7.7 0 0 0-1.73-1L14.7 2H9.3l-.58 2.9a7.7 7.7 0 0 0-1.73 1l-2.55-1-2 3.46L4.54 11a7.7 7.7 0 0 0 0 2l-2.1 1.64 2 3.46 2.55-1a7.7 7.7 0 0 0 1.73 1L9.3 22h5.4l.58-2.9a7.7 7.7 0 0 0 1.73-1l2.55 1 2-3.46Z" />
+                      </svg>
+                      <span>Configuración</span>
+                    </div>
+                  </Link>
+                ),
                 reloadCatalogsOption && (
                   <Link
                     key="recargar-catalogos"
@@ -247,7 +287,7 @@ export const NavBar = ({
         </ul>
       </>
     );
-  }, [items, loggedIn, hiddenItemsChange, showDarkModeToggle, isDarkMode]);
+  }, [items, loggedIn, hiddenItemsChange, reloadCatalogsOption, settingsOption, showDarkModeToggle, isDarkMode]);
 
   return (
     <nav className={`py-3 ${color.bg600}`}>