@hed-hog/operations 0.0.322 → 0.0.326

package/hedhog/frontend/src/app/(app)/(libraries)/operations/operations/_components/async-options-combobox.d.ts

@@ -0,0 +1,29 @@
+export type AsyncOptionComboboxOption = {
+    id: number | string;
+    label: string;
+    description?: string | null;
+};
+type AsyncOptionsComboboxProps<T extends AsyncOptionComboboxOption> = {
+    value?: number | string;
+    selectedOption?: T | null;
+    options: T[];
+    onSelect: (option: T | null) => void;
+    searchValue: string;
+    onSearchValueChange: (value: string) => void;
+    placeholder: string;
+    searchPlaceholder?: string;
+    emptyLabel: string;
+    loadingLabel?: string;
+    loadMoreLabel?: string;
+    clearLabel?: string;
+    createLabel?: string;
+    onCreateClick?: () => void;
+    isLoading?: boolean;
+    hasMore?: boolean;
+    onLoadMore?: () => void;
+    disabled?: boolean;
+    className?: string;
+};
+export declare function AsyncOptionsCombobox<T extends AsyncOptionComboboxOption>({ value, selectedOption, options, onSelect, searchValue, onSearchValueChange, placeholder, searchPlaceholder, emptyLabel, loadingLabel, loadMoreLabel, clearLabel, createLabel, onCreateClick, isLoading, hasMore, onLoadMore, disabled, className, }: AsyncOptionsComboboxProps<T>): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=async-options-combobox.d.ts.map

package/hedhog/frontend/src/app/(app)/(libraries)/operations/operations/_components/async-options-combobox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"async-options-combobox.d.ts","sourceRoot":"","sources":["async-options-combobox.tsx"],"names":[],"mappings":"AAqBA,MAAM,MAAM,yBAAyB,GAAG;IACtC,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC7B,CAAC;AAEF,KAAK,yBAAyB,CAAC,CAAC,SAAS,yBAAyB,IAAI;IACpE,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC;IAC1B,OAAO,EAAE,CAAC,EAAE,CAAC;IACb,QAAQ,EAAE,CAAC,MAAM,EAAE,CAAC,GAAG,IAAI,KAAK,IAAI,CAAC;IACrC,WAAW,EAAE,MAAM,CAAC;IACpB,mBAAmB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,WAAW,EAAE,MAAM,CAAC;IACpB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,wBAAgB,oBAAoB,CAAC,CAAC,SAAS,yBAAyB,EAAE,EACxE,KAAK,EACL,cAAc,EACd,OAAO,EACP,QAAQ,EACR,WAAW,EACX,mBAAmB,EACnB,WAAW,EACX,iBAAiB,EACjB,UAAU,EACV,YAA2B,EAC3B,aAA2B,EAC3B,UAA8B,EAC9B,WAAW,EACX,aAAa,EACb,SAAiB,EACjB,OAAe,EACf,UAAU,EACV,QAAgB,EAChB,SAAS,GACV,EAAE,yBAAyB,CAAC,CAAC,CAAC,+BAmK9B"}

package/hedhog/frontend/src/app/(app)/(libraries)/operations/operations/_components/async-options-combobox.js

@@ -0,0 +1,95 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AsyncOptionsCombobox = AsyncOptionsCombobox;
+const react_1 = require("react");
+const button_1 = require("@/components/ui/button");
+const command_1 = require("@/components/ui/command");
+const popover_1 = require("@/components/ui/popover");
+const utils_1 = require("@/lib/utils");
+const lucide_react_1 = require("lucide-react");
+function AsyncOptionsCombobox({ value, selectedOption, options, onSelect, searchValue, onSearchValueChange, placeholder, searchPlaceholder, emptyLabel, loadingLabel = 'Loading...', loadMoreLabel = 'Load more', clearLabel = 'Clear selection', createLabel, onCreateClick, isLoading = false, hasMore = false, onLoadMore, disabled = false, className, }) {
+    var _a, _b;
+    const [open, setOpen] = (0, react_1.useState)(false);
+    const normalizedOptions = (0, react_1.useMemo)(() => {
+        const unique = new Map();
+        options.forEach((option) => {
+            unique.set(String(option.id), option);
+        });
+        return Array.from(unique.values());
+    }, [options]);
+    const normalizedValue = value === undefined || value === null ? null : String(value);
+    const resolvedOption = (_a = selectedOption !== null && selectedOption !== void 0 ? selectedOption : normalizedOptions.find((option) => String(option.id) === normalizedValue)) !== null && _a !== void 0 ? _a : null;
+    return (<div className={(0, utils_1.cn)('flex min-w-0 items-start gap-2', className)}>
+      <popover_1.Popover open={open} onOpenChange={setOpen}>
+        <popover_1.PopoverTrigger asChild>
+          <button_1.Button type="button" variant="outline" role="combobox" aria-expanded={open} disabled={disabled} className="flex min-w-0 flex-1 justify-between overflow-hidden">
+            <span className="min-w-0 flex-1 truncate text-left">
+              {(_b = resolvedOption === null || resolvedOption === void 0 ? void 0 : resolvedOption.label) !== null && _b !== void 0 ? _b : placeholder}
+            </span>
+            <lucide_react_1.ChevronsUpDown className="ml-2 size-4 shrink-0 opacity-50"/>
+          </button_1.Button>
+        </popover_1.PopoverTrigger>
+
+        <popover_1.PopoverContent align="start" className="w-(--radix-popover-trigger-width) p-0">
+          <command_1.Command shouldFilter={false}>
+            <command_1.CommandInput value={searchValue} onValueChange={onSearchValueChange} placeholder={searchPlaceholder !== null && searchPlaceholder !== void 0 ? searchPlaceholder : placeholder}/>
+
+            <command_1.CommandList>
+              <command_1.CommandEmpty className="py-6 text-center text-sm">
+                {isLoading ? (<div className="flex items-center justify-center gap-2 text-muted-foreground">
+                    <lucide_react_1.Loader2 className="size-4 animate-spin"/>
+                    <span>{loadingLabel}</span>
+                  </div>) : (<div className="space-y-2">
+                    <p className="text-muted-foreground">{emptyLabel}</p>
+                    {onCreateClick && createLabel ? (<button_1.Button type="button" variant="outline" size="sm" onClick={() => {
+                    setOpen(false);
+                    onCreateClick();
+                }}>
+                        <lucide_react_1.Plus className="size-4"/>
+                        {createLabel}
+                      </button_1.Button>) : null}
+                  </div>)}
+              </command_1.CommandEmpty>
+
+              {normalizedOptions.length > 0 ? (<command_1.CommandGroup>
+                  {normalizedOptions.map((option) => {
+                var _a;
+                const isSelected = String(option.id) === normalizedValue;
+                return (<command_1.CommandItem key={String(option.id)} value={`${option.label} ${(_a = option.description) !== null && _a !== void 0 ? _a : ''}`} onSelect={() => {
+                        onSelect(option);
+                        setOpen(false);
+                    }}>
+                        <lucide_react_1.Check className={(0, utils_1.cn)('mr-2 size-4', isSelected ? 'opacity-100' : 'opacity-0')}/>
+
+                        <div className="flex min-w-0 flex-col">
+                          <span className="truncate">{option.label}</span>
+                          {option.description ? (<span className="truncate text-xs text-muted-foreground">
+                              {option.description}
+                            </span>) : null}
+                        </div>
+                      </command_1.CommandItem>);
+            })}
+                </command_1.CommandGroup>) : null}
+
+              {hasMore && onLoadMore ? (<div className="border-t p-2">
+                  <button_1.Button type="button" variant="ghost" className="w-full justify-center" onClick={onLoadMore} disabled={isLoading}>
+                    {isLoading ? (<lucide_react_1.Loader2 className="size-4 animate-spin"/>) : null}
+                    {loadMoreLabel}
+                  </button_1.Button>
+                </div>) : null}
+            </command_1.CommandList>
+          </command_1.Command>
+        </popover_1.PopoverContent>
+      </popover_1.Popover>
+
+      {normalizedValue ? (<button_1.Button type="button" variant="ghost" size="icon" className="shrink-0" aria-label={clearLabel} onClick={() => onSelect(null)} disabled={disabled}>
+          <lucide_react_1.X className="size-4"/>
+        </button_1.Button>) : null}
+
+      {onCreateClick ? (<button_1.Button type="button" variant="outline" size="icon" className="shrink-0" aria-label={createLabel !== null && createLabel !== void 0 ? createLabel : 'Create'} onClick={onCreateClick} disabled={disabled}>
+          <lucide_react_1.Plus className="size-4"/>
+        </button_1.Button>) : null}
+    </div>);
+}
+//# sourceMappingURL=async-options-combobox.js.map

package/hedhog/frontend/src/app/(app)/(libraries)/operations/operations/_components/async-options-combobox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"async-options-combobox.js","sourceRoot":"","sources":["async-options-combobox.tsx"],"names":[],"mappings":"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"}

package/hedhog/frontend/src/app/(app)/(libraries)/operations/operations/_components/async-options-combobox.tsx

@@ -0,0 +1,233 @@
+'use client';
+
+import { useMemo, useState } from '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 } from '@/lib/utils';
+import { Check, ChevronsUpDown, Loader2, Plus, X } from 'lucide-react';
+
+export type AsyncOptionComboboxOption = {
+  id: number | string;
+  label: string;
+  description?: string | null;
+};
+
+type AsyncOptionsComboboxProps<T extends AsyncOptionComboboxOption> = {
+  value?: number | string;
+  selectedOption?: T | null;
+  options: T[];
+  onSelect: (option: T | null) => void;
+  searchValue: string;
+  onSearchValueChange: (value: string) => void;
+  placeholder: string;
+  searchPlaceholder?: string;
+  emptyLabel: string;
+  loadingLabel?: string;
+  loadMoreLabel?: string;
+  clearLabel?: string;
+  createLabel?: string;
+  onCreateClick?: () => void;
+  isLoading?: boolean;
+  hasMore?: boolean;
+  onLoadMore?: () => void;
+  disabled?: boolean;
+  className?: string;
+};
+
+export function AsyncOptionsCombobox<T extends AsyncOptionComboboxOption>({
+  value,
+  selectedOption,
+  options,
+  onSelect,
+  searchValue,
+  onSearchValueChange,
+  placeholder,
+  searchPlaceholder,
+  emptyLabel,
+  loadingLabel = 'Loading...',
+  loadMoreLabel = 'Load more',
+  clearLabel = 'Clear selection',
+  createLabel,
+  onCreateClick,
+  isLoading = false,
+  hasMore = false,
+  onLoadMore,
+  disabled = false,
+  className,
+}: AsyncOptionsComboboxProps<T>) {
+  const [open, setOpen] = useState(false);
+
+  const normalizedOptions = useMemo(() => {
+    const unique = new Map<string, T>();
+
+    options.forEach((option) => {
+      unique.set(String(option.id), option);
+    });
+
+    return Array.from(unique.values());
+  }, [options]);
+
+  const normalizedValue =
+    value === undefined || value === null ? null : String(value);
+  const resolvedOption =
+    selectedOption ??
+    normalizedOptions.find((option) => String(option.id) === normalizedValue) ??
+    null;
+
+  return (
+    <div className={cn('flex min-w-0 items-start gap-2', className)}>
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            type="button"
+            variant="outline"
+            role="combobox"
+            aria-expanded={open}
+            disabled={disabled}
+            className="flex min-w-0 flex-1 justify-between overflow-hidden"
+          >
+            <span className="min-w-0 flex-1 truncate text-left">
+              {resolvedOption?.label ?? placeholder}
+            </span>
+            <ChevronsUpDown className="ml-2 size-4 shrink-0 opacity-50" />
+          </Button>
+        </PopoverTrigger>
+
+        <PopoverContent
+          align="start"
+          className="w-(--radix-popover-trigger-width) p-0"
+        >
+          <Command shouldFilter={false}>
+            <CommandInput
+              value={searchValue}
+              onValueChange={onSearchValueChange}
+              placeholder={searchPlaceholder ?? placeholder}
+            />
+
+            <CommandList>
+              <CommandEmpty className="py-6 text-center text-sm">
+                {isLoading ? (
+                  <div className="flex items-center justify-center gap-2 text-muted-foreground">
+                    <Loader2 className="size-4 animate-spin" />
+                    <span>{loadingLabel}</span>
+                  </div>
+                ) : (
+                  <div className="space-y-2">
+                    <p className="text-muted-foreground">{emptyLabel}</p>
+                    {onCreateClick && createLabel ? (
+                      <Button
+                        type="button"
+                        variant="outline"
+                        size="sm"
+                        onClick={() => {
+                          setOpen(false);
+                          onCreateClick();
+                        }}
+                      >
+                        <Plus className="size-4" />
+                        {createLabel}
+                      </Button>
+                    ) : null}
+                  </div>
+                )}
+              </CommandEmpty>
+
+              {normalizedOptions.length > 0 ? (
+                <CommandGroup>
+                  {normalizedOptions.map((option) => {
+                    const isSelected = String(option.id) === normalizedValue;
+
+                    return (
+                      <CommandItem
+                        key={String(option.id)}
+                        value={`${option.label} ${option.description ?? ''}`}
+                        onSelect={() => {
+                          onSelect(option);
+                          setOpen(false);
+                        }}
+                      >
+                        <Check
+                          className={cn(
+                            'mr-2 size-4',
+                            isSelected ? 'opacity-100' : 'opacity-0'
+                          )}
+                        />
+
+                        <div className="flex min-w-0 flex-col">
+                          <span className="truncate">{option.label}</span>
+                          {option.description ? (
+                            <span className="truncate text-xs text-muted-foreground">
+                              {option.description}
+                            </span>
+                          ) : null}
+                        </div>
+                      </CommandItem>
+                    );
+                  })}
+                </CommandGroup>
+              ) : null}
+
+              {hasMore && onLoadMore ? (
+                <div className="border-t p-2">
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    className="w-full justify-center"
+                    onClick={onLoadMore}
+                    disabled={isLoading}
+                  >
+                    {isLoading ? (
+                      <Loader2 className="size-4 animate-spin" />
+                    ) : null}
+                    {loadMoreLabel}
+                  </Button>
+                </div>
+              ) : null}
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      </Popover>
+
+      {normalizedValue ? (
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          className="shrink-0"
+          aria-label={clearLabel}
+          onClick={() => onSelect(null)}
+          disabled={disabled}
+        >
+          <X className="size-4" />
+        </Button>
+      ) : null}
+
+      {onCreateClick ? (
+        <Button
+          type="button"
+          variant="outline"
+          size="icon"
+          className="shrink-0"
+          aria-label={createLabel ?? 'Create'}
+          onClick={onCreateClick}
+          disabled={disabled}
+        >
+          <Plus className="size-4" />
+        </Button>
+      ) : null}
+    </div>
+  );
+}

package/hedhog/frontend/src/app/(app)/(libraries)/operations/operations/_components/collaborator-costs-section.d.ts

@@ -0,0 +1,10 @@
+type Props = {
+    collaboratorId: number;
+    disabled?: boolean;
+    remunerationValue?: number;
+    weeklyCapacity?: number;
+    onCostsChanged?: () => void;
+};
+export declare function CollaboratorCostsSection({ collaboratorId, disabled, weeklyCapacity, onCostsChanged, }: Props): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=collaborator-costs-section.d.ts.map

package/hedhog/frontend/src/app/(app)/(libraries)/operations/operations/_components/collaborator-costs-section.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"collaborator-costs-section.d.ts","sourceRoot":"","sources":["collaborator-costs-section.tsx"],"names":[],"mappings":"AA8IA,KAAK,KAAK,GAAG;IACX,cAAc,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;CAC7B,CAAC;AAEF,wBAAgB,wBAAwB,CAAC,EACvC,cAAc,EACd,QAAgB,EAChB,cAAc,EACd,cAAc,GACf,EAAE,KAAK,+BAwsBP"}