@hed-hog/operations 0.0.303 → 0.0.305

package/hedhog/frontend/app/_components/section-card.tsx.ejs

@@ -15,6 +15,7 @@ interface SectionCardProps {
   className?: string;
   compact?: boolean;
   descriptionMode?: 'inline' | 'tooltip';
+  actions?: ReactNode;
 }
 
 export function SectionCard({
@@ -24,38 +25,44 @@ export function SectionCard({
   className,
   compact = false,
   descriptionMode = 'inline',
+  actions,
 }: SectionCardProps) {
   return (
     <div className={cn(className, '')}>
-      <div className={compact ? 'space-y-1 px-0 py-2.5' : undefined}>
-        <div className="flex items-start justify-between gap-2">
-          <div className="flex items-center gap-2">
+      <div className={compact ? 'space-y-1 px-0 py-2.5' : 'mb-4 space-y-2'}>
+        <div className="flex items-start justify-between gap-3">
+          <div className="space-y-1.5">
             <CardTitle
               className={compact ? 'text-sm font-semibold' : undefined}
             >
               {title}
             </CardTitle>
             {description && descriptionMode === 'tooltip' ? (
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <button
-                    type="button"
-                    className="cursor-help text-muted-foreground transition-colors hover:text-foreground"
-                    aria-label={description}
-                  >
-                    <Info className="size-4" />
-                  </button>
-                </TooltipTrigger>
-                <TooltipContent className="max-w-xs text-sm leading-relaxed">
-                  {description}
-                </TooltipContent>
-              </Tooltip>
+              <div className="flex items-center gap-2">
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <button
+                      type="button"
+                      className="cursor-help text-muted-foreground transition-colors hover:text-foreground"
+                      aria-label={description}
+                    >
+                      <Info className="size-4" />
+                    </button>
+                  </TooltipTrigger>
+                  <TooltipContent className="max-w-xs text-sm leading-relaxed">
+                    {description}
+                  </TooltipContent>
+                </Tooltip>
+              </div>
             ) : null}
           </div>
+          {actions ? <div className="shrink-0">{actions}</div> : null}
         </div>
         {description && descriptionMode !== 'tooltip' ? (
           <CardDescription
-            className={compact ? 'text-[11px] leading-relaxed' : undefined}
+            className={
+              compact ? 'text-[11px] leading-relaxed' : 'leading-relaxed'
+            }
           >
             {description}
           </CardDescription>

package/hedhog/frontend/app/_components/system-user-select-with-create.tsx.ejs

@@ -0,0 +1,609 @@
+'use client';
+
+import { Button } from '@/components/ui/button';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '@/components/ui/command';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import { useApp } from '@hed-hog/next-app-provider';
+import { Check, ChevronsUpDown, Plus, X } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useEffect, useMemo, useRef, useState } from 'react';
+
+export type SystemUserOption = {
+  id: number;
+  name: string;
+};
+
+type SystemUserSelectWithCreateProps = {
+  label: string;
+  value: string;
+  options: SystemUserOption[];
+  placeholder: string;
+  emptyLabel: string;
+  onChange: (value: string) => void;
+  onCreate: (
+    name: string,
+    email: string,
+    password: string
+  ) => Promise<SystemUserOption | null>;
+  createDescription?: string;
+};
+
+type UserListPayload = {
+  paginate: {
+    data: Array<{ id: number; name: string | null }>;
+    total: number;
+    lastPage: number;
+    page: number;
+    pageSize: number;
+  };
+  stats?: Record<string, unknown>;
+};
+
+const PAGE_SIZE = 10;
+
+function mergeOptions(
+  base: SystemUserOption[],
+  extra: SystemUserOption[]
+): SystemUserOption[] {
+  const byId = new Map<number, SystemUserOption>();
+
+  for (const option of base) {
+    byId.set(option.id, option);
+  }
+
+  for (const option of extra) {
+    byId.set(option.id, option);
+  }
+
+  return Array.from(byId.values());
+}
+
+function parseUserListResponse(payload: UserListPayload): {
+  items: SystemUserOption[];
+  hasMore: boolean;
+} {
+  const raw = payload?.paginate?.data ?? [];
+  const items = raw.map((u) => ({ id: u.id, name: u.name || `#${u.id}` }));
+  const hasMore =
+    (payload?.paginate?.page ?? 1) < (payload?.paginate?.lastPage ?? 1);
+  return { items, hasMore };
+}
+
+export function SystemUserSelectWithCreate({
+  label,
+  value,
+  options,
+  placeholder,
+  emptyLabel,
+  onChange,
+  onCreate,
+  createDescription,
+}: SystemUserSelectWithCreateProps) {
+  const { request } = useApp();
+  const commonT = useTranslations('operations.Common');
+  const t = useTranslations('operations.CollaboratorFormPage');
+
+  const [open, setOpen] = useState(false);
+  const [search, setSearch] = useState('');
+  const [debouncedSearch, setDebouncedSearch] = useState('');
+  const [remoteOptions, setRemoteOptions] = useState<SystemUserOption[]>([]);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [hasMore, setHasMore] = useState(false);
+  const [isLoadingOptions, setIsLoadingOptions] = useState(false);
+  const [isLoadingMoreOptions, setIsLoadingMoreOptions] = useState(false);
+  const [selectedValueOption, setSelectedValueOption] =
+    useState<SystemUserOption | null>(null);
+
+  const [createOpen, setCreateOpen] = useState(false);
+  const [newName, setNewName] = useState('');
+  const [newEmail, setNewEmail] = useState('');
+  const [newPassword, setNewPassword] = useState('');
+  const [isCreating, setIsCreating] = useState(false);
+
+  const parentScrollContainerRef = useRef<HTMLElement | null>(null);
+  const parentScrollTopRef = useRef(0);
+  const requestIdRef = useRef(0);
+
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      setDebouncedSearch(search);
+    }, 300);
+
+    return () => clearTimeout(timeout);
+  }, [search]);
+
+  const loadOwnerOptions = async (
+    page: number,
+    searchTerm: string,
+    reset: boolean
+  ) => {
+    const requestId = requestIdRef.current + 1;
+    requestIdRef.current = requestId;
+
+    if (reset) {
+      setIsLoadingOptions(true);
+    } else {
+      setIsLoadingMoreOptions(true);
+    }
+
+    try {
+      const params = new URLSearchParams();
+      params.set('page', String(page));
+      params.set('pageSize', String(PAGE_SIZE));
+
+      const normalizedSearch = searchTerm.trim();
+      if (normalizedSearch) {
+        params.set('search', normalizedSearch);
+      }
+
+      const response = await request<UserListPayload>({
+        url: `/user?${params.toString()}`,
+        method: 'GET',
+      });
+
+      if (requestIdRef.current !== requestId) {
+        return;
+      }
+
+      const parsed = parseUserListResponse(response.data);
+      setCurrentPage(page);
+      setHasMore(parsed.hasMore);
+      setRemoteOptions((current) =>
+        reset ? parsed.items : mergeOptions(current, parsed.items)
+      );
+    } finally {
+      if (requestIdRef.current === requestId) {
+        setIsLoadingOptions(false);
+        setIsLoadingMoreOptions(false);
+      }
+    }
+  };
+
+  useEffect(() => {
+    void loadOwnerOptions(1, debouncedSearch, true);
+  }, [debouncedSearch]);
+
+  useEffect(() => {
+    const normalizedValue = value.trim();
+
+    if (!normalizedValue) {
+      setSelectedValueOption(null);
+      return;
+    }
+
+    const matchedOption =
+      options.find((option) => String(option.id) === normalizedValue) ??
+      remoteOptions.find((option) => String(option.id) === normalizedValue) ??
+      null;
+
+    if (matchedOption) {
+      setSelectedValueOption(matchedOption);
+      return;
+    }
+
+    let active = true;
+
+    void request<UserListPayload>({
+      url: `/user/${normalizedValue}`,
+      method: 'GET',
+    })
+      .then((response) => {
+        if (!active) {
+          return;
+        }
+
+        const rawUser = response.data as
+          | { id?: number; name?: string | null }
+          | undefined;
+        const resolvedOption =
+          rawUser?.id && String(rawUser.id) === normalizedValue
+            ? {
+                id: rawUser.id,
+                name: rawUser.name || `#${rawUser.id}`,
+              }
+            : null;
+
+        if (resolvedOption) {
+          setSelectedValueOption(resolvedOption);
+          setRemoteOptions((current) => mergeOptions(current, [resolvedOption]));
+          return;
+        }
+
+        setSelectedValueOption({
+          id: Number(normalizedValue),
+          name: `#${normalizedValue}`,
+        });
+      })
+      .catch(() => {
+        if (active) {
+          setSelectedValueOption({
+            id: Number(normalizedValue),
+            name: `#${normalizedValue}`,
+          });
+        }
+      });
+
+    return () => {
+      active = false;
+    };
+  }, [options, remoteOptions, request, value]);
+
+  const knownOptions = useMemo(
+    () => mergeOptions(options, remoteOptions),
+    [options, remoteOptions]
+  );
+
+  const listedOptions = useMemo(
+    () => (debouncedSearch.trim() ? remoteOptions : knownOptions),
+    [debouncedSearch, remoteOptions, knownOptions]
+  );
+
+  const selectedOption =
+    knownOptions.find((option) => String(option.id) === value) ??
+    selectedValueOption ??
+    (value ? { id: Number(value), name: `#${value}` } : null);
+
+  const captureParentScrollPosition = (trigger: HTMLElement) => {
+    const parentSheetContent = trigger.closest(
+      '[data-radix-dialog-content]'
+    ) as HTMLElement | null;
+
+    if (!parentSheetContent) {
+      parentScrollContainerRef.current = null;
+      parentScrollTopRef.current = 0;
+      return;
+    }
+
+    parentScrollContainerRef.current = parentSheetContent;
+    parentScrollTopRef.current = parentSheetContent.scrollTop;
+  };
+
+  const restoreParentScrollPosition = () => {
+    const fallbackOpenDialog = (
+      Array.from(
+        document.querySelectorAll(
+          '[data-radix-dialog-content][data-state="open"]'
+        )
+      ) as HTMLElement[]
+    ).at(-1);
+
+    const container =
+      parentScrollContainerRef.current &&
+      document.body.contains(parentScrollContainerRef.current)
+        ? parentScrollContainerRef.current
+        : fallbackOpenDialog || null;
+
+    if (!container) {
+      return;
+    }
+
+    const restore = () => {
+      container.scrollTop = parentScrollTopRef.current;
+    };
+
+    requestAnimationFrame(restore);
+    setTimeout(restore, 0);
+    setTimeout(restore, 120);
+  };
+
+  const saveUser = async () => {
+    if (
+      !newName.trim() ||
+      !newEmail.trim() ||
+      !newPassword.trim() ||
+      isCreating
+    ) {
+      return;
+    }
+
+    setIsCreating(true);
+
+    try {
+      const created = await onCreate(
+        newName.trim(),
+        newEmail.trim(),
+        newPassword
+      );
+
+      if (!created) {
+        return;
+      }
+
+      setRemoteOptions((current) => mergeOptions([created], current));
+      onChange(String(created.id));
+      setNewName('');
+      setNewEmail('');
+      setNewPassword('');
+      setCreateOpen(false);
+      setOpen(false);
+    } finally {
+      setIsCreating(false);
+    }
+  };
+
+  return (
+    <>
+      <div className="grid gap-2">
+        <Label>{label}</Label>
+
+        <div className="flex w-full min-w-0 items-center gap-2">
+          <Popover
+            open={open}
+            onOpenChange={(nextOpen) => {
+              setOpen(nextOpen);
+
+              if (
+                nextOpen &&
+                !remoteOptions.length &&
+                !isLoadingOptions &&
+                !isLoadingMoreOptions
+              ) {
+                void loadOwnerOptions(1, debouncedSearch, true);
+              }
+
+              if (!nextOpen) {
+                setSearch('');
+              }
+            }}
+          >
+            <PopoverTrigger asChild>
+              <Button
+                type="button"
+                variant="outline"
+                role="combobox"
+                className="h-10 min-w-0 flex-1 justify-between overflow-hidden"
+              >
+                <span className="truncate text-left">
+                  {selectedOption
+                    ? `${selectedOption.name} (#${selectedOption.id})`
+                    : emptyLabel}
+                </span>
+                <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent
+              className="p-0"
+              style={{ width: 'var(--radix-popover-trigger-width)' }}
+            >
+              <Command shouldFilter={false}>
+                <CommandInput
+                  placeholder={placeholder}
+                  value={search}
+                  onValueChange={(v) => setSearch(v)}
+                />
+                <CommandList>
+                  <CommandEmpty>
+                    <div className="space-y-2 p-2 text-center">
+                      <p className="text-sm text-muted-foreground">
+                        {commonT('states.emptyDescription')}
+                      </p>
+                      <Button
+                        type="button"
+                        variant="outline"
+                        className="w-full"
+                        onClick={(event) => {
+                          captureParentScrollPosition(event.currentTarget);
+                          setNewName(search.trim());
+                          setOpen(false);
+                          setCreateOpen(true);
+                        }}
+                      >
+                        {t('actions.createUser')}
+                      </Button>
+                    </div>
+                  </CommandEmpty>
+
+                  <CommandGroup>
+                    <CommandItem
+                      value="none"
+                      onSelect={() => {
+                        onChange('');
+                        setOpen(false);
+                      }}
+                    >
+                      {!value ? (
+                        <Check className="mr-2 h-4 w-4" />
+                      ) : (
+                        <span className="mr-2 h-4 w-4" />
+                      )}
+                      {emptyLabel}
+                    </CommandItem>
+
+                    {listedOptions.map((option) => (
+                      <CommandItem
+                        key={option.id}
+                        value={`${option.name} #${option.id}`}
+                        onSelect={() => {
+                          onChange(String(option.id));
+                          setOpen(false);
+                        }}
+                      >
+                        {String(option.id) === value ? (
+                          <Check className="mr-2 h-4 w-4" />
+                        ) : (
+                          <span className="mr-2 h-4 w-4" />
+                        )}
+                        <div className="min-w-0">
+                          <div className="truncate">{option.name}</div>
+                          <div className="truncate text-xs text-muted-foreground">
+                            #{option.id}
+                          </div>
+                        </div>
+                      </CommandItem>
+                    ))}
+                  </CommandGroup>
+
+                  {hasMore ? (
+                    <div className="border-t p-2">
+                      <Button
+                        type="button"
+                        variant="ghost"
+                        className="w-full"
+                        disabled={isLoadingOptions || isLoadingMoreOptions}
+                        onClick={() =>
+                          void loadOwnerOptions(
+                            currentPage + 1,
+                            debouncedSearch,
+                            false
+                          )
+                        }
+                      >
+                        {isLoadingOptions || isLoadingMoreOptions
+                          ? `${commonT('actions.loadMore')}...`
+                          : commonT('actions.loadMore')}
+                      </Button>
+                    </div>
+                  ) : null}
+                </CommandList>
+              </Command>
+            </PopoverContent>
+          </Popover>
+
+          {value ? (
+            <Button
+              type="button"
+              variant="outline"
+              size="icon"
+              className="h-10 w-10 shrink-0"
+              disabled={isCreating}
+              onClick={() => {
+                onChange('');
+              }}
+              aria-label={commonT('actions.cancel')}
+            >
+              <X className="h-4 w-4" />
+            </Button>
+          ) : null}
+
+          <Button
+            type="button"
+            variant="outline"
+            size="icon"
+            className="h-10 w-10 shrink-0"
+            disabled={isCreating}
+            onClick={(event) => {
+              captureParentScrollPosition(event.currentTarget);
+              setNewName('');
+              setNewEmail('');
+              setNewPassword('');
+              setOpen(false);
+              setCreateOpen(true);
+            }}
+            aria-label={t('actions.createUser')}
+          >
+            <Plus className="h-4 w-4" />
+          </Button>
+        </div>
+      </div>
+
+      <Sheet
+        open={createOpen}
+        onOpenChange={(nextOpen) => {
+          setCreateOpen(nextOpen);
+
+          if (!nextOpen) {
+            setNewName('');
+            setNewEmail('');
+            setNewPassword('');
+            restoreParentScrollPosition();
+          }
+        }}
+      >
+        <SheetContent
+          className="w-full overflow-y-auto px-2 sm:max-w-md"
+          onCloseAutoFocus={(event) => event.preventDefault()}
+        >
+          <SheetHeader>
+            <SheetTitle>{t('actions.createUser')}</SheetTitle>
+            <SheetDescription>
+              {createDescription ?? t('fields.createUserDescription')}
+            </SheetDescription>
+          </SheetHeader>
+
+          <div className="mt-6 space-y-4">
+            <div className="space-y-2">
+              <Label>{t('fields.createUserName')}</Label>
+              <Input
+                value={newName}
+                placeholder={t('placeholders.createUserName')}
+                onChange={(e) => setNewName(e.target.value)}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter') {
+                    e.preventDefault();
+                    void saveUser();
+                  }
+                }}
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label>{t('fields.createUserEmail')}</Label>
+              <Input
+                type="email"
+                value={newEmail}
+                placeholder={t('placeholders.createUserEmail')}
+                onChange={(e) => setNewEmail(e.target.value)}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter') {
+                    e.preventDefault();
+                    void saveUser();
+                  }
+                }}
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label>{t('fields.createUserPassword')}</Label>
+              <Input
+                type="password"
+                value={newPassword}
+                placeholder={t('placeholders.createUserPassword')}
+                onChange={(e) => setNewPassword(e.target.value)}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter') {
+                    e.preventDefault();
+                    void saveUser();
+                  }
+                }}
+              />
+            </div>
+
+            <Button
+              type="button"
+              className="w-full"
+              disabled={
+                !newName.trim() ||
+                !newEmail.trim() ||
+                !newPassword.trim() ||
+                isCreating
+              }
+              onClick={() => void saveUser()}
+            >
+              {commonT('actions.save')}
+            </Button>
+          </div>
+        </SheetContent>
+      </Sheet>
+    </>
+  );
+}