@traky-app/ui 1.4.0 → 1.6.0

package/registry/traky/ui/option-combobox.tsx

@@ -0,0 +1,307 @@
+"use client"
+
+import { useState, type ComponentType } from "react"
+import { IconCheck, IconSelector } from "@tabler/icons-react"
+import { Button } from "@/components/ui/button"
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover"
+import { cn, commandFilterAccentInsensitive } from "@/lib/utils"
+
+export type OptionComboboxOption = {
+  value: string
+  label: string
+  icon?: ComponentType<{ className?: string; stroke?: number }>
+  iconClassName?: string
+  /** Pastilla de color, por ejemplo una etiqueta. */
+  color?: string
+  /** Sangría para una opción hija. */
+  indented?: boolean
+}
+
+function OptionGlyph({
+  icon: Icon,
+  className,
+}: {
+  icon?: OptionComboboxOption["icon"]
+  className?: string
+}) {
+  if (!Icon) return null
+  return <Icon className={cn("size-4 shrink-0", className)} stroke={1.75} />
+}
+
+function OptionFace({ option }: { option: OptionComboboxOption }) {
+  if (option.color) {
+    return (
+      <span
+        className="inline-flex max-w-full items-center truncate rounded-full border px-2 py-0.5 text-xs font-medium"
+        style={{
+          color: option.color,
+          borderColor: option.color,
+          backgroundColor: `${option.color}1A`,
+        }}
+      >
+        {option.label}
+      </span>
+    )
+  }
+  return (
+    <span className="flex min-w-0 items-center gap-2">
+      <OptionGlyph icon={option.icon} className={option.iconClassName} />
+      <span className="truncate">{option.label}</span>
+    </span>
+  )
+}
+
+export function OptionCombobox({
+  value = "",
+  options,
+  onChange,
+  placeholder = "Seleccionar…",
+  searchPlaceholder = "Buscar…",
+  emptyLabel = "No se encontraron resultados.",
+  groupHeading,
+  allowEmpty = false,
+  emptyValueLabel,
+  emptyValueIcon,
+  clearLabel,
+  clearOption,
+  allOption,
+  groups,
+  multiple = false,
+  values = [],
+  onValuesChange,
+  className,
+  disabled = false,
+  modal = false,
+  title,
+}: {
+  value?: string
+  options: OptionComboboxOption[]
+  onChange?: (value: string) => void
+  /** Varias opciones a la vez. El menú no se cierra al marcar. */
+  multiple?: boolean
+  values?: string[]
+  onValuesChange?: (values: string[]) => void
+  placeholder?: string
+  searchPlaceholder?: string
+  emptyLabel?: string
+  groupHeading?: string
+  /** Si es true, la primera fila deja el valor vacío y no pertenece a `options`. */
+  allowEmpty?: boolean
+  /** Texto de esa fila vacía. Si no se indica, usa `placeholder`. */
+  emptyValueLabel?: string
+  emptyValueIcon?: OptionComboboxOption["icon"]
+  /** Opción para vaciar el valor. El botón sigue mostrando `placeholder`. */
+  clearLabel?: string
+  /** Opción para vaciar el valor, visible también en el botón. */
+  clearOption?: OptionComboboxOption
+  /** Opción extra al inicio. Si no hay valor, el botón la muestra. */
+  allOption?: OptionComboboxOption
+  /** Varios grupos, por ejemplo persona y empresa. */
+  groups?: { heading?: string; options: OptionComboboxOption[] }[]
+  className?: string
+  disabled?: boolean
+  modal?: boolean
+  title?: string
+}) {
+  const [open, setOpen] = useState(false)
+  const blankLabel = emptyValueLabel || placeholder
+  const realOptions = allowEmpty
+    ? options.filter((option) => option.value !== "")
+    : options
+  const grouped = (groups ?? []).filter((group) => group.options.length > 0)
+  const catalog = grouped.length
+    ? grouped.flatMap((group) => group.options)
+    : realOptions
+  const listOptions = allOption ? [allOption, ...catalog] : catalog
+  const emptyChoice: OptionComboboxOption = {
+    value: "",
+    label: blankLabel,
+    icon: emptyValueIcon,
+  }
+  const selected = allowEmpty && value === ""
+    ? emptyChoice
+    : clearOption && value === ""
+      ? clearOption
+      : listOptions.find((option) => option.value === value)
+        ?? (!value ? allOption : undefined)
+  const selectedMany = multiple
+    ? values.flatMap((id) => {
+        const option = listOptions.find((item) => item.value === id)
+        return option ? [option] : []
+      })
+    : []
+
+  const chosen = (optionValue: string) =>
+    multiple ? values.includes(optionValue) : value === optionValue
+
+  const choose = (next: string) => {
+    if (multiple) {
+      onValuesChange?.(
+        values.includes(next)
+          ? values.filter((item) => item !== next)
+          : [...values, next],
+      )
+      return
+    }
+    onChange?.(next)
+    setOpen(false)
+  }
+
+  return (
+    <Popover
+      open={open}
+      onOpenChange={disabled ? undefined : setOpen}
+      modal={modal}
+    >
+      <PopoverTrigger asChild>
+        <Button
+          type="button"
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          disabled={disabled}
+          title={title}
+          className={cn(
+            "w-full justify-between font-normal",
+            multiple && "h-auto py-2",
+            className,
+          )}
+        >
+          {multiple ? (
+            <span className="flex min-w-0 flex-1 flex-wrap items-center gap-1.5">
+              {selectedMany.length ? (
+                selectedMany.map((option) => (
+                  <OptionFace key={option.value} option={option} />
+                ))
+              ) : (
+                <span className="truncate text-muted-foreground">
+                  {placeholder}
+                </span>
+              )}
+            </span>
+          ) : selected ? (
+            <OptionFace option={selected} />
+          ) : (
+            <span className="truncate text-muted-foreground">{placeholder}</span>
+          )}
+          <IconSelector className="size-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      {disabled ? null : (
+        <PopoverContent
+          align="start"
+          className="z-[60] w-[var(--radix-popover-trigger-width)] min-w-56 p-0"
+        >
+          <Command filter={commandFilterAccentInsensitive}>
+            <CommandInput placeholder={searchPlaceholder} />
+            <CommandList>
+              <CommandEmpty>{emptyLabel}</CommandEmpty>
+              {grouped.length ? (
+                grouped.map((group) => (
+                  <CommandGroup
+                    key={group.heading ?? group.options[0]?.value}
+                    heading={group.heading}
+                  >
+                    {group.options.map((option) => (
+                      <CommandItem
+                        key={option.value || option.label}
+                        value={`${option.label} ${option.value}`}
+                        className={option.indented ? "pl-6" : undefined}
+                        onSelect={() => choose(option.value)}
+                      >
+                        <OptionFace option={option} />
+                        <IconCheck
+                          className={cn(
+                            "ml-auto size-4",
+                            chosen(option.value) ? "opacity-100" : "opacity-0",
+                          )}
+                        />
+                      </CommandItem>
+                    ))}
+                  </CommandGroup>
+                ))
+              ) : (
+                <CommandGroup heading={groupHeading}>
+                  {allowEmpty ? (
+                    <CommandItem
+                      value={`__empty__ ${blankLabel}`}
+                      onSelect={() => choose("")}
+                    >
+                      <OptionGlyph icon={emptyValueIcon} />
+                      {blankLabel}
+                      <IconCheck
+                        className={cn(
+                          "ml-auto size-4",
+                          value ? "opacity-0" : "opacity-100",
+                        )}
+                      />
+                    </CommandItem>
+                  ) : null}
+                  {clearOption ? (
+                    <CommandItem
+                      value={`__clear__ ${clearOption.label}`}
+                      onSelect={() => choose("")}
+                    >
+                      <OptionGlyph
+                        icon={clearOption.icon}
+                        className={clearOption.iconClassName}
+                      />
+                      {clearOption.label}
+                      <IconCheck
+                        className={cn(
+                          "ml-auto size-4",
+                          value ? "opacity-0" : "opacity-100",
+                        )}
+                      />
+                    </CommandItem>
+                  ) : clearLabel ? (
+                    <CommandItem
+                      value={`__clear__ ${clearLabel}`}
+                      onSelect={() => choose("")}
+                    >
+                      {clearLabel}
+                      <IconCheck
+                        className={cn(
+                          "ml-auto size-4",
+                          value ? "opacity-0" : "opacity-100",
+                        )}
+                      />
+                    </CommandItem>
+                  ) : null}
+                  {listOptions.map((option) => (
+                    <CommandItem
+                      key={option.value || option.label}
+                      value={`${option.label} ${option.value}`}
+                      className={option.indented ? "pl-6" : undefined}
+                      onSelect={() => choose(option.value)}
+                    >
+                      <OptionFace option={option} />
+                      <IconCheck
+                        className={cn(
+                          "ml-auto size-4",
+                          chosen(option.value) ? "opacity-100" : "opacity-0",
+                        )}
+                      />
+                    </CommandItem>
+                  ))}
+                </CommandGroup>
+              )}
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      )}
+    </Popover>
+  )
+}

package/src/ui/office-switcher.tsx

@@ -0,0 +1,406 @@
+"use client"
+
+import {
+  IconCheck,
+  IconLayoutGrid,
+  IconPlus,
+  IconSelector,
+} from "@tabler/icons-react"
+import * as React from "react"
+
+import { cn } from "../lib/utils"
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "./alert-dialog"
+import { Badge } from "./badge"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "./dropdown-menu"
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from "./sidebar"
+import { Skeleton } from "./skeleton"
+
+export type OfficeSwitcherKind = "branch" | "warehouse"
+
+export type OfficeSwitcherItem = {
+  id: string
+  label: string
+  subtitle?: string
+  kind: OfficeSwitcherKind
+  isMain?: boolean
+}
+
+export type OfficeSwitcherAction = {
+  id: string
+  label: string
+  href?: string
+  onSelect?: () => void
+}
+
+export type OfficeSwitcherConfirmation = {
+  open: boolean
+  title: string
+  description: React.ReactNode
+  confirmLabel?: string
+  cancelLabel?: string
+  onConfirm: () => void
+  onOpenChange: (open: boolean) => void
+}
+
+export type OfficeSwitcherLabels = {
+  filter: string
+  all: string
+  allHint: string
+  placeholder: string
+  placeholderHint: string
+  branches: string
+  warehouses: string
+  empty: string
+  main: string
+  change: string
+}
+
+const DEFAULT_LABELS: OfficeSwitcherLabels = {
+  filter: "Filtro por oficina",
+  all: "Todas las ubicaciones",
+  allHint: "Mostrar todo sin filtrar",
+  placeholder: "Selecciona una oficina",
+  placeholderHint: "Elige una sucursal o bodega",
+  branches: "Sucursales",
+  warehouses: "Bodegas",
+  empty: "No hay sucursales ni bodegas activas.",
+  main: "Principal",
+  change: "Cambiar oficina",
+}
+
+export type OfficeSwitcherProps = {
+  items: OfficeSwitcherItem[]
+  selectedId?: string | null
+  onSelect: (item: OfficeSwitcherItem) => void
+  onClear?: () => void
+  loading?: boolean
+  /** Una sola oficina: se muestra el nombre y no abre el menú. */
+  locked?: boolean
+  /** Dueños pueden ver todo sin filtrar. El personal no. */
+  allowAll?: boolean
+  labels?: Partial<OfficeSwitcherLabels>
+  actions?: OfficeSwitcherAction[]
+  /** Pieza superior, por ejemplo el cambio de cuenta. */
+  header?: React.ReactNode
+  confirmation?: OfficeSwitcherConfirmation | null
+  className?: string
+}
+
+function AllLocationsMark() {
+  return (
+    <span className="flex size-6 shrink-0 items-center justify-center rounded-md border border-border bg-background text-muted-foreground">
+      <IconLayoutGrid className="size-4" stroke={1.75} />
+    </span>
+  )
+}
+
+function OfficeCopy({
+  label,
+  subtitle,
+  isMain,
+  mainLabel,
+  uppercaseSubtitle,
+}: {
+  label: string
+  subtitle?: string
+  isMain?: boolean
+  mainLabel: string
+  uppercaseSubtitle?: boolean
+}) {
+  return (
+    <span className="min-w-0 flex-1">
+      <span className="flex min-w-0 items-center gap-1.5">
+        <span className="truncate text-sm font-medium">{label}</span>
+        {isMain ? (
+          <Badge
+            variant="outline"
+            className="h-4 px-1.5 text-[10px] font-medium tracking-wide uppercase"
+          >
+            {mainLabel}
+          </Badge>
+        ) : null}
+      </span>
+      {subtitle ? (
+        <span
+          className={cn(
+            "mt-0.5 line-clamp-2 block text-xs text-muted-foreground",
+            uppercaseSubtitle && "uppercase",
+          )}
+        >
+          {subtitle}
+        </span>
+      ) : null}
+    </span>
+  )
+}
+
+function OfficeSwitcher({
+  items,
+  selectedId,
+  onSelect,
+  onClear,
+  loading = false,
+  locked = false,
+  allowAll = true,
+  labels: labelsProp,
+  actions = [],
+  header,
+  confirmation,
+  className,
+}: OfficeSwitcherProps) {
+  const { isMobile } = useSidebar()
+  const labels = { ...DEFAULT_LABELS, ...labelsProp }
+  const selected = items.find((item) => item.id === selectedId) ?? null
+  const branches = items.filter((item) => item.kind === "branch")
+  const warehouses = items.filter((item) => item.kind === "warehouse")
+  const hasActions = actions.length > 0
+
+  const triggerLabel = selected
+    ? selected.label
+    : allowAll
+      ? labels.all
+      : labels.placeholder
+  const triggerSubtitle = selected
+    ? selected.subtitle
+    : allowAll
+      ? labels.allHint
+      : labels.placeholderHint
+
+  const trigger = (
+    <SidebarMenuButton
+      size="lg"
+      aria-label={labels.change}
+      className={cn(
+        "h-auto min-h-12 gap-2 border",
+        selected?.isMain
+          ? "border-primary/25 bg-primary/8"
+          : "border-border",
+        !locked &&
+          "data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground",
+      )}
+    >
+      <OfficeCopy
+        label={triggerLabel}
+        subtitle={triggerSubtitle}
+        isMain={selected?.isMain}
+        mainLabel={labels.main}
+        uppercaseSubtitle={Boolean(selected)}
+      />
+      {locked ? null : <IconSelector className="ml-auto size-4 shrink-0" />}
+    </SidebarMenuButton>
+  )
+
+  return (
+    <div
+      data-slot="office-switcher"
+      className={cn("flex w-full flex-col gap-1.5", className)}
+    >
+      {header}
+      {loading ? (
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <div className="flex items-center rounded-md border border-border p-2">
+              <div className="grid flex-1 gap-1">
+                <Skeleton className="h-4 w-28" />
+                <Skeleton className="h-3 w-36" />
+              </div>
+            </div>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      ) : items.length === 0 ? null : (
+        <SidebarMenu>
+          <SidebarMenuItem>
+            {locked ? (
+              trigger
+            ) : (
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>{trigger}</DropdownMenuTrigger>
+                <DropdownMenuContent
+                  className="w-(--radix-dropdown-menu-trigger-width) min-w-72 max-w-80 rounded-lg"
+                  align="start"
+                  side={isMobile ? "bottom" : "right"}
+                  sideOffset={4}
+                >
+                  <DropdownMenuLabel className="text-xs text-muted-foreground">
+                    {labels.filter}
+                  </DropdownMenuLabel>
+
+                  {allowAll ? (
+                    <DropdownMenuItem
+                      onClick={onClear}
+                      className={cn("gap-2 p-2", !selected && "bg-accent")}
+                    >
+                      <AllLocationsMark />
+                      <OfficeCopy
+                        label={labels.all}
+                        subtitle={labels.allHint}
+                        mainLabel={labels.main}
+                      />
+                      {selected ? null : (
+                        <IconCheck className="size-4 shrink-0 text-primary" />
+                      )}
+                    </DropdownMenuItem>
+                  ) : null}
+
+                  {allowAll && items.length > 0 ? <DropdownMenuSeparator /> : null}
+
+                  <OfficeGroup
+                    label={labels.branches}
+                    items={branches}
+                    selectedId={selected?.id}
+                    mainLabel={labels.main}
+                    onSelect={onSelect}
+                  />
+
+                  {branches.length > 0 && warehouses.length > 0 ? (
+                    <DropdownMenuSeparator />
+                  ) : null}
+
+                  <OfficeGroup
+                    label={labels.warehouses}
+                    items={warehouses}
+                    selectedId={selected?.id}
+                    mainLabel={labels.main}
+                    onSelect={onSelect}
+                  />
+
+                  {items.length === 0 ? (
+                    <p className="px-2 py-2 text-xs text-muted-foreground">
+                      {labels.empty}
+                    </p>
+                  ) : null}
+
+                  {hasActions ? <DropdownMenuSeparator /> : null}
+                  {actions.map((action) => (
+                    <OfficeAction key={action.id} action={action} />
+                  ))}
+                </DropdownMenuContent>
+              </DropdownMenu>
+            )}
+          </SidebarMenuItem>
+        </SidebarMenu>
+      )}
+
+      {confirmation ? (
+        <AlertDialog
+          open={confirmation.open}
+          onOpenChange={confirmation.onOpenChange}
+        >
+          <AlertDialogContent>
+            <AlertDialogHeader>
+              <AlertDialogTitle>{confirmation.title}</AlertDialogTitle>
+              <AlertDialogDescription asChild>
+                <div className="space-y-2 text-sm text-muted-foreground">
+                  {confirmation.description}
+                </div>
+              </AlertDialogDescription>
+            </AlertDialogHeader>
+            <AlertDialogFooter>
+              <AlertDialogCancel>
+                {confirmation.cancelLabel ?? "Cancelar"}
+              </AlertDialogCancel>
+              <AlertDialogAction onClick={confirmation.onConfirm}>
+                {confirmation.confirmLabel ?? "Confirmar"}
+              </AlertDialogAction>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialog>
+      ) : null}
+    </div>
+  )
+}
+
+function OfficeGroup({
+  label,
+  items,
+  selectedId,
+  mainLabel,
+  onSelect,
+}: {
+  label: string
+  items: OfficeSwitcherItem[]
+  selectedId?: string
+  mainLabel: string
+  onSelect: (item: OfficeSwitcherItem) => void
+}) {
+  if (items.length === 0) return null
+
+  return (
+    <>
+      <DropdownMenuLabel className="text-xs text-muted-foreground">
+        {label}
+      </DropdownMenuLabel>
+      {items.map((item) => {
+        const selected = item.id === selectedId
+        return (
+          <DropdownMenuItem
+            key={item.id}
+            onClick={() => onSelect(item)}
+            className={cn("gap-2 p-2", selected && "bg-accent")}
+          >
+            <OfficeCopy
+              label={item.label}
+              subtitle={item.subtitle}
+              isMain={item.isMain}
+              mainLabel={mainLabel}
+              uppercaseSubtitle
+            />
+            {selected ? (
+              <IconCheck className="size-4 shrink-0 text-primary" />
+            ) : null}
+          </DropdownMenuItem>
+        )
+      })}
+    </>
+  )
+}
+
+function OfficeAction({ action }: { action: OfficeSwitcherAction }) {
+  const body = (
+    <>
+      <span className="flex size-8 shrink-0 items-center justify-center rounded-lg border border-border bg-background text-muted-foreground">
+        <IconPlus className="size-4" stroke={1.75} />
+      </span>
+      <span className="font-medium text-muted-foreground">{action.label}</span>
+    </>
+  )
+
+  if (action.href) {
+    return (
+      <DropdownMenuItem asChild>
+        <a href={action.href} className="flex cursor-pointer items-center gap-2 p-2">
+          {body}
+        </a>
+      </DropdownMenuItem>
+    )
+  }
+
+  return (
+    <DropdownMenuItem onClick={action.onSelect} className="gap-2 p-2">
+      {body}
+    </DropdownMenuItem>
+  )
+}
+
+export { OfficeSwitcher }