@hed-hog/operations 0.0.303 → 0.0.305

package/hedhog/frontend/app/_components/async-options-combobox.tsx.ejs

@@ -0,0 +1,231 @@
+'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 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="w-full justify-between"
+          >
+            <span className="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"
+          aria-label={clearLabel}
+          onClick={() => onSelect(null)}
+          disabled={disabled}
+        >
+          <X className="size-4" />
+        </Button>
+      ) : null}
+
+      {onCreateClick ? (
+        <Button
+          type="button"
+          variant="outline"
+          size="icon"
+          aria-label={createLabel ?? 'Create'}
+          onClick={onCreateClick}
+          disabled={disabled}
+        >
+          <Plus className="size-4" />
+        </Button>
+      ) : null}
+    </div>
+  );
+}

package/hedhog/frontend/app/_components/collaborator-details-screen.tsx.ejs

@@ -40,14 +40,19 @@ export function CollaboratorDetailsScreen({
   const { request, currentLocaleCode } = useApp();
   const access = useOperationsAccess();
 
-  const { data: collaborator, refetch } = useQuery<OperationsCollaboratorDetails>({
-    queryKey: ['operations-collaborator-details', currentLocaleCode, collaboratorId],
-    queryFn: () =>
-      fetchOperations<OperationsCollaboratorDetails>(
-        request,
-        `/operations/collaborators/${collaboratorId}`
-      ),
-  });
+  const { data: collaborator, refetch } =
+    useQuery<OperationsCollaboratorDetails>({
+      queryKey: [
+        'operations-collaborator-details',
+        currentLocaleCode,
+        collaboratorId,
+      ],
+      queryFn: () =>
+        fetchOperations<OperationsCollaboratorDetails>(
+          request,
+          `/operations/collaborators/${collaboratorId}`
+        ),
+    });
 
   if (!collaborator) {
     return (
@@ -121,45 +126,67 @@ export function CollaboratorDetailsScreen({
         <SectionCard title={t('sections.profile')} className="xl:col-span-2">
           <dl className="grid gap-3 md:grid-cols-2 text-sm">
             <div>
-              <dt className="text-muted-foreground">{commonT('labels.collaborator')}</dt>
+              <dt className="text-muted-foreground">
+                {commonT('labels.collaborator')}
+              </dt>
               <dd className="font-medium">{collaborator.displayName}</dd>
             </div>
             <div>
-              <dt className="text-muted-foreground">{commonT('labels.collaboratorType')}</dt>
+              <dt className="text-muted-foreground">
+                {commonT('labels.collaboratorType')}
+              </dt>
               <dd className="font-medium">
-                {formatEnumLabel(collaborator.collaboratorType)}
+                {collaborator.collaboratorTypeName ||
+                  formatEnumLabel(
+                    collaborator.collaboratorTypeSlug ??
+                      collaborator.collaboratorType
+                  )}
               </dd>
             </div>
             <div>
-              <dt className="text-muted-foreground">{commonT('labels.department')}</dt>
+              <dt className="text-muted-foreground">
+                {commonT('labels.department')}
+              </dt>
               <dd className="font-medium">
                 {collaborator.department || commonT('labels.notAvailable')}
               </dd>
             </div>
             <div>
-              <dt className="text-muted-foreground">{commonT('labels.title')}</dt>
+              <dt className="text-muted-foreground">
+                {commonT('labels.title')}
+              </dt>
               <dd className="font-medium">
                 {collaborator.title || commonT('labels.notAvailable')}
               </dd>
             </div>
             <div>
-              <dt className="text-muted-foreground">{commonT('labels.supervisor')}</dt>
+              <dt className="text-muted-foreground">
+                {commonT('labels.supervisor')}
+              </dt>
               <dd className="font-medium">
                 {collaborator.supervisorName || commonT('labels.notAssigned')}
               </dd>
             </div>
             <div>
-              <dt className="text-muted-foreground">{commonT('labels.weeklyCapacity')}</dt>
+              <dt className="text-muted-foreground">
+                {commonT('labels.weeklyCapacity')}
+              </dt>
               <dd className="font-medium">
                 {formatHours(collaborator.weeklyCapacityHours)}
               </dd>
             </div>
             <div>
-              <dt className="text-muted-foreground">{commonT('labels.startDate')}</dt>
-              <dd className="font-medium">{formatDate(collaborator.joinedAt)}</dd>
+              <dt className="text-muted-foreground">
+                {commonT('labels.startDate')}
+              </dt>
+              <dd className="font-medium">
+                {formatDate(collaborator.joinedAt)}
+              </dd>
             </div>
             <div>
-              <dt className="text-muted-foreground">{commonT('labels.status')}</dt>
+              <dt className="text-muted-foreground">
+                {commonT('labels.status')}
+              </dt>
               <dd className="font-medium">
                 <StatusBadge
                   label={formatEnumLabel(collaborator.status)}
@@ -167,24 +194,52 @@ export function CollaboratorDetailsScreen({
                 />
               </dd>
             </div>
+            {collaborator.equityParticipation ? (
+              <>
+                <div>
+                  <dt className="text-muted-foreground">
+                    {commonT('labels.equityParticipation')}
+                  </dt>
+                  <dd className="font-medium">
+                    {formatEnumLabel(
+                      collaborator.equityParticipation.participationType
+                    )}
+                  </dd>
+                </div>
+                <div>
+                  <dt className="text-muted-foreground">
+                    {commonT('labels.votingPower')}
+                  </dt>
+                  <dd className="font-medium">
+                    {collaborator.equityParticipation.votingPower != null
+                      ? `${collaborator.equityParticipation.votingPower}%`
+                      : commonT('labels.notAvailable')}
+                  </dd>
+                </div>
+              </>
+            ) : null}
           </dl>
         </SectionCard>
 
-        <SectionCard title={t('sections.primaryContract')} className="xl:col-span-2">
+        <SectionCard
+          title={t('sections.primaryContract')}
+          className="xl:col-span-2"
+        >
           {collaborator.relatedContracts.length > 0 ? (
             <div className="space-y-3">
               {collaborator.relatedContracts.slice(0, 2).map((contract) => (
                 <div
                   key={contract.id}
                   className="flex items-center justify-between rounded-lg border px-4 py-3"
-                >
-                  <div>
-                    <div className="font-medium">
-                      {contract.name || contract.code}
-                    </div>
-                    <div className="text-sm text-muted-foreground">
-                      {contract.code} • {formatEnumLabel(contract.contractCategory)}
-                    </div>
+                >
+                  <div>
+                    <div className="font-medium">
+                      {contract.name || contract.code}
+                    </div>
+                    <div className="text-sm text-muted-foreground">
+                      {contract.code} •{' '}
+                      {formatEnumLabel(contract.contractCategory)}
+                    </div>
                   </div>
                   <div className="flex items-center gap-2">
                     <StatusBadge
@@ -209,7 +264,10 @@ export function CollaboratorDetailsScreen({
       <KpiCardsGrid items={summaryCards} />
 
       <div className="grid gap-4 xl:grid-cols-2">
-        <SectionCard title={t('sections.projects')} description={t('sections.projectsDescription')}>
+        <SectionCard
+          title={t('sections.projects')}
+          description={t('sections.projectsDescription')}
+        >
           {collaborator.assignedProjects.length > 0 ? (
             <div className="overflow-x-auto rounded-md border">
               <Table>
@@ -230,8 +288,12 @@ export function CollaboratorDetailsScreen({
                           {project.code}
                         </div>
                       </TableCell>
-                      <TableCell>{project.roleLabel || commonT('labels.notAssigned')}</TableCell>
-                      <TableCell>{formatDateRange(project.startDate, project.endDate)}</TableCell>
+                      <TableCell>
+                        {project.roleLabel || commonT('labels.notAssigned')}
+                      </TableCell>
+                      <TableCell>
+                        {formatDateRange(project.startDate, project.endDate)}
+                      </TableCell>
                       <TableCell>
                         <StatusBadge
                           label={formatEnumLabel(project.status)}
@@ -248,27 +310,48 @@ export function CollaboratorDetailsScreen({
           )}
         </SectionCard>
 
-        <SectionCard title={t('sections.schedule')} description={t('sections.scheduleDescription')}>
+        <SectionCard
+          title={t('sections.schedule')}
+          description={t('sections.scheduleDescription')}
+        >
           <p className="text-sm">
-            {summarizeScheduleDays(collaborator.weeklySchedule)}
+            {summarizeScheduleDays(
+              collaborator.weeklySchedule,
+              currentLocaleCode
+            )}
           </p>
         </SectionCard>
       </div>
 
       <div className="grid gap-4 xl:grid-cols-2">
-        <SectionCard title={t('sections.timeOff')} description={t('sections.timeOffDescription')}>
+        <SectionCard
+          title={t('sections.timeOff')}
+          description={t('sections.timeOffDescription')}
+        >
           <dl className="grid gap-3 md:grid-cols-3 text-sm">
             <div>
-              <dt className="text-muted-foreground">{commonT('labels.total')}</dt>
-              <dd className="font-medium">{collaborator.timeOffSummary.totalRequests}</dd>
+              <dt className="text-muted-foreground">
+                {commonT('labels.total')}
+              </dt>
+              <dd className="font-medium">
+                {collaborator.timeOffSummary.totalRequests}
+              </dd>
             </div>
             <div>
-              <dt className="text-muted-foreground">{commonT('labels.pending')}</dt>
-              <dd className="font-medium">{collaborator.timeOffSummary.pendingRequests}</dd>
+              <dt className="text-muted-foreground">
+                {commonT('labels.pending')}
+              </dt>
+              <dd className="font-medium">
+                {collaborator.timeOffSummary.pendingRequests}
+              </dd>
             </div>
             <div>
-              <dt className="text-muted-foreground">{commonT('labels.approved')}</dt>
-              <dd className="font-medium">{collaborator.timeOffSummary.approvedRequests}</dd>
+              <dt className="text-muted-foreground">
+                {commonT('labels.approved')}
+              </dt>
+              <dd className="font-medium">
+                {collaborator.timeOffSummary.approvedRequests}
+              </dd>
             </div>
           </dl>
         </SectionCard>
@@ -303,7 +386,9 @@ export function CollaboratorDetailsScreen({
               ))}
             </div>
           ) : (
-            <p className="text-sm text-muted-foreground">{t('noScheduleAdjustments')}</p>
+            <p className="text-sm text-muted-foreground">
+              {t('noScheduleAdjustments')}
+            </p>
           )}
         </SectionCard>
       </div>