@hed-hog/operations 0.0.306 → 0.0.310

package/hedhog/frontend/app/collaborator-types/page.tsx.ejs

@@ -1,7 +1,13 @@
 'use client';
 
-import { EmptyState, Page, SearchBar } from '@/components/entity-list';
+import {
+  EmptyState,
+  Page,
+  PaginationFooter,
+  SearchBar,
+} from '@/components/entity-list';
 import { Button } from '@/components/ui/button';
+import { Card, CardContent } from '@/components/ui/card';
 import { KpiCardsGrid } from '@/components/ui/kpi-cards-grid';
 import {
   Sheet,
@@ -18,16 +24,42 @@ import {
   TableHeader,
   TableRow,
 } from '@/components/ui/table';
+import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
+import {
+  closestCenter,
+  DndContext,
+  type DragEndEvent,
+  PointerSensor,
+  useSensor,
+  useSensors,
+} from '@dnd-kit/core';
+import {
+  arrayMove,
+  SortableContext,
+  useSortable,
+  verticalListSortingStrategy,
+} from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
-import { Briefcase, Pencil, Users } from 'lucide-react';
+import {
+  Briefcase,
+  GripVertical,
+  LayoutGrid,
+  List,
+  Pencil,
+  Users,
+} from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import Link from 'next/link';
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { OperationsHeader } from '../_components/operations-header';
 import { StatusBadge } from '../_components/status-badge';
 import { fetchOperations, mutateOperations } from '../_lib/api';
 import { useOperationsAccess } from '../_lib/hooks/use-operations-access';
-import type { OperationsCollaboratorType } from '../_lib/types';
+import type {
+  OperationsCollaboratorType,
+  PaginatedResponse,
+} from '../_lib/types';
 import { formatEnumLabel, getStatusBadgeClass } from '../_lib/utils/format';
 
 type CollaboratorTypeFormState = {
@@ -35,7 +67,6 @@ type CollaboratorTypeFormState = {
   slug: string;
   description: string;
   category: string;
-  sortOrder: string;
   status: 'active' | 'inactive';
 };
 
@@ -44,66 +75,188 @@ const EMPTY_FORM_STATE: CollaboratorTypeFormState = {
   slug: '',
   description: '',
   category: '',
-  sortOrder: '0',
   status: 'active',
 };
+const EMPTY_COLLABORATOR_TYPES: OperationsCollaboratorType[] = [];
+
+function SortableCollaboratorTypeRow({
+  collaboratorType,
+  position,
+  commonT,
+  t,
+  onEdit,
+  onToggleStatus,
+  reorderEnabled,
+  getStatusLabel,
+}: {
+  collaboratorType: OperationsCollaboratorType;
+  position: number;
+  commonT: ReturnType<typeof useTranslations>;
+  t: ReturnType<typeof useTranslations>;
+  onEdit: (collaboratorType: OperationsCollaboratorType) => void;
+  onToggleStatus: (collaboratorType: OperationsCollaboratorType) => void;
+  reorderEnabled: boolean;
+  getStatusLabel: (value?: string | null) => string;
+}) {
+  const {
+    attributes,
+    listeners,
+    setActivatorNodeRef,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({
+    id: collaboratorType.id,
+    disabled: !reorderEnabled,
+  });
+
+  return (
+    <TableRow
+      ref={setNodeRef}
+      style={{
+        transform: CSS.Transform.toString(transform),
+        transition,
+      }}
+      className={isDragging ? 'bg-muted/40' : undefined}
+    >
+      <TableCell className="w-14">
+        <button
+          type="button"
+          ref={setActivatorNodeRef}
+          {...listeners}
+          {...attributes}
+          disabled={!reorderEnabled}
+          className="inline-flex h-8 w-8 items-center justify-center rounded-md border border-input bg-background text-muted-foreground transition hover:text-foreground disabled:cursor-not-allowed disabled:opacity-40"
+          aria-label={t('columns.drag')}
+        >
+          <GripVertical className="size-4" />
+        </button>
+      </TableCell>
+      <TableCell className="font-medium">{position}</TableCell>
+      <TableCell className="font-medium">{collaboratorType.name}</TableCell>
+      <TableCell>{collaboratorType.slug}</TableCell>
+      <TableCell>
+        {collaboratorType.category || commonT('labels.notAvailable')}
+      </TableCell>
+      <TableCell className="max-w-md text-sm text-muted-foreground">
+        {collaboratorType.description || commonT('labels.notAvailable')}
+      </TableCell>
+      <TableCell>{Number(collaboratorType.collaboratorCount ?? 0)}</TableCell>
+      <TableCell>
+        <StatusBadge
+          label={getStatusLabel(collaboratorType.status)}
+          className={getStatusBadgeClass(collaboratorType.status)}
+        />
+      </TableCell>
+      <TableCell>
+        <div className="flex justify-end gap-2">
+          <Button
+            variant="outline"
+            size="icon"
+            className="cursor-pointer"
+            onClick={() => onEdit(collaboratorType)}
+          >
+            <Pencil className="size-4" />
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            className="cursor-pointer"
+            onClick={() => onToggleStatus(collaboratorType)}
+          >
+            {collaboratorType.status === 'inactive'
+              ? commonT('actions.activate')
+              : commonT('actions.deactivate')}
+          </Button>
+        </div>
+      </TableCell>
+    </TableRow>
+  );
+}
 
 export default function OperationsCollaboratorTypesPage() {
   const t = useTranslations('operations.CollaboratorTypesPage');
   const commonT = useTranslations('operations.Common');
+  const collaboratorFormT = useTranslations('operations.CollaboratorFormPage');
   const { request, showToastHandler, currentLocaleCode } = useApp();
+  const getStatusLabel = (value?: string | null) =>
+    value
+      ? collaboratorFormT.has(`options.statuses.${value}`)
+        ? collaboratorFormT(`options.statuses.${value}`)
+        : formatEnumLabel(value)
+      : '-';
   const access = useOperationsAccess();
+  const sensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 6 } })
+  );
   const [search, setSearch] = useState('');
   const [statusFilter, setStatusFilter] = useState<
     'all' | 'active' | 'inactive'
   >('all');
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(100);
+  const [viewMode, setViewMode] = useState<'table' | 'cards'>(() => {
+    if (typeof window === 'undefined') return 'table';
+    const saved = window.localStorage.getItem(
+      'operations-collaborator-types-view-mode'
+    );
+    return saved === 'cards' ? 'cards' : 'table';
+  });
   const [isSheetOpen, setIsSheetOpen] = useState(false);
   const [isSaving, setIsSaving] = useState(false);
+  const [isReordering, setIsReordering] = useState(false);
   const [editingType, setEditingType] =
     useState<OperationsCollaboratorType | null>(null);
   const [form, setForm] = useState<CollaboratorTypeFormState>(EMPTY_FORM_STATE);
+  const [orderedCollaboratorTypes, setOrderedCollaboratorTypes] = useState<
+    OperationsCollaboratorType[]
+  >([]);
 
   const {
-    data: collaboratorTypes = [],
+    data: collaboratorTypesResponse,
     isLoading,
     refetch,
-  } = useQuery<OperationsCollaboratorType[]>({
-    queryKey: ['operations-collaborator-types-page', currentLocaleCode],
+  } = useQuery<PaginatedResponse<OperationsCollaboratorType>>({
+    queryKey: [
+      'operations-collaborator-types-page',
+      currentLocaleCode,
+      search,
+      statusFilter,
+      page,
+      pageSize,
+    ],
     enabled: access.isDirector,
-    queryFn: () =>
-      fetchOperations<OperationsCollaboratorType[]>(
+    queryFn: () => {
+      const params = new URLSearchParams({
+        page: String(page),
+        pageSize: String(pageSize),
+        sortField: 'sortOrder',
+        sortOrder: 'asc',
+      });
+      if (search.trim()) params.set('search', search.trim());
+      if (statusFilter !== 'all') params.set('status', statusFilter);
+      return fetchOperations<PaginatedResponse<OperationsCollaboratorType>>(
         request,
-        '/operations/collaborator-types'
-      ),
+        `/operations/collaborator-types?${params.toString()}`
+      );
+    },
+    placeholderData: (previous) => previous,
   });
 
-  const filteredTypes = useMemo(
-    () =>
-      collaboratorTypes.filter((collaboratorType) => {
-        const matchesSearch = !search.trim()
-          ? true
-          : [
-              collaboratorType.name,
-              collaboratorType.slug,
-              collaboratorType.category,
-              collaboratorType.description,
-            ]
-              .filter(Boolean)
-              .some((value) =>
-                String(value)
-                  .toLowerCase()
-                  .includes(search.trim().toLowerCase())
-              );
-
-        const matchesStatus =
-          statusFilter === 'all'
-            ? true
-            : collaboratorType.status === statusFilter;
-
-        return matchesSearch && matchesStatus;
-      }),
-    [collaboratorTypes, search, statusFilter]
-  );
+  const collaboratorTypes =
+    collaboratorTypesResponse?.data ?? EMPTY_COLLABORATOR_TYPES;
+  const totalItems = collaboratorTypesResponse?.total ?? 0;
+  const reorderEnabled =
+    viewMode === 'table' &&
+    !search.trim() &&
+    statusFilter === 'all' &&
+    page === 1 &&
+    totalItems <= pageSize;
+
+  useEffect(() => {
+    setOrderedCollaboratorTypes(collaboratorTypes);
+  }, [collaboratorTypes]);
 
   const statsCards = useMemo(
     () => [
@@ -140,6 +293,17 @@ export default function OperationsCollaboratorTypesPage() {
     [collaboratorTypes, t]
   );
 
+  const handleViewModeChange = (value: string) => {
+    if (value !== 'table' && value !== 'cards') return;
+    setViewMode(value);
+    if (typeof window !== 'undefined') {
+      window.localStorage.setItem(
+        'operations-collaborator-types-view-mode',
+        value
+      );
+    }
+  };
+
   const updateForm = <K extends keyof CollaboratorTypeFormState>(
     field: K,
     value: CollaboratorTypeFormState[K]
@@ -163,7 +327,6 @@ export default function OperationsCollaboratorTypesPage() {
       slug: collaboratorType.slug ?? '',
       description: collaboratorType.description ?? '',
       category: collaboratorType.category ?? '',
-      sortOrder: String(collaboratorType.sortOrder ?? 0),
       status: collaboratorType.status ?? 'active',
     });
     setIsSheetOpen(true);
@@ -189,7 +352,6 @@ export default function OperationsCollaboratorTypesPage() {
           slug: form.slug.trim() || null,
           description: form.description.trim() || null,
           category: form.category.trim() || null,
-          sortOrder: Number(form.sortOrder || '0'),
           status: form.status,
           isActive: form.status === 'active',
         }
@@ -225,6 +387,51 @@ export default function OperationsCollaboratorTypesPage() {
     }
   };
 
+  const handleDragEnd = async (event: DragEndEvent) => {
+    if (!reorderEnabled || isReordering) return;
+
+    const { active, over } = event;
+
+    if (!over || active.id === over.id) {
+      return;
+    }
+
+    const oldIndex = orderedCollaboratorTypes.findIndex(
+      (item) => item.id === Number(active.id)
+    );
+    const newIndex = orderedCollaboratorTypes.findIndex(
+      (item) => item.id === Number(over.id)
+    );
+
+    if (oldIndex < 0 || newIndex < 0) {
+      return;
+    }
+
+    const nextOrder = arrayMove(orderedCollaboratorTypes, oldIndex, newIndex);
+    const previousOrder = orderedCollaboratorTypes;
+
+    setOrderedCollaboratorTypes(nextOrder);
+    setIsReordering(true);
+
+    try {
+      await mutateOperations(
+        request,
+        '/operations/collaborator-types/reorder',
+        'PATCH',
+        {
+          ids: nextOrder.map((item) => item.id),
+        }
+      );
+      showToastHandler?.('success', t('messages.reorderSuccess'));
+      await refetch();
+    } catch {
+      setOrderedCollaboratorTypes(previousOrder);
+      showToastHandler?.('error', t('messages.reorderError'));
+    } finally {
+      setIsReordering(false);
+    }
+  };
+
   if (!access.isLoading && !access.isDirector) {
     return (
       <Page>
@@ -276,107 +483,196 @@ export default function OperationsCollaboratorTypesPage() {
 
       <KpiCardsGrid items={statsCards} columns={4} />
 
-      <div className="flex flex-col gap-4">
-        <SearchBar
-          searchQuery={search}
-          onSearchChange={setSearch}
-          onSearch={() => undefined}
-          placeholder={t('searchPlaceholder')}
-          controls={[
-            {
-              id: 'status',
-              type: 'select',
-              value: statusFilter,
-              onChange: (value) =>
-                setStatusFilter(
-                  (value as 'all' | 'active' | 'inactive') ?? 'all'
-                ),
-              placeholder: commonT('labels.status'),
-              options: [
-                { value: 'all', label: commonT('filters.allStatuses') },
-                { value: 'active', label: formatEnumLabel('active') },
-                { value: 'inactive', label: formatEnumLabel('inactive') },
-              ],
-            },
-          ]}
-        />
+      <div className="flex min-w-0 flex-col gap-4 xl:flex-row xl:items-center">
+        <div className="flex-1">
+          <SearchBar
+            searchQuery={search}
+            onSearchChange={(value) => {
+              setSearch(value);
+              setPage(1);
+            }}
+            showSearchButton={false}
+            debounceMs={500}
+            placeholder={t('searchPlaceholder')}
+            controls={[
+              {
+                id: 'status',
+                type: 'select',
+                value: statusFilter,
+                onChange: (value) => {
+                  setStatusFilter(
+                    (value as 'all' | 'active' | 'inactive') ?? 'all'
+                  );
+                  setPage(1);
+                },
+                placeholder: commonT('labels.status'),
+                options: [
+                  { value: 'all', label: commonT('filters.allStatuses') },
+                  { value: 'active', label: getStatusLabel('active') },
+                  { value: 'inactive', label: getStatusLabel('inactive') },
+                ],
+              },
+            ]}
+          />
+        </div>
+
+        <div className="flex items-center justify-between gap-3 xl:justify-end">
+          <span className="text-xs font-medium text-muted-foreground">
+            {t('viewMode')}
+          </span>
+          <ToggleGroup
+            type="single"
+            value={viewMode}
+            onValueChange={handleViewModeChange}
+            variant="outline"
+            size="sm"
+            aria-label={t('viewMode')}
+          >
+            <ToggleGroupItem
+              value="table"
+              className="gap-1.5 px-2.5"
+              aria-label={t('viewModeTable')}
+            >
+              <List className="h-4 w-4" />
+              <span className="hidden sm:inline">{t('viewModeTable')}</span>
+            </ToggleGroupItem>
+            <ToggleGroupItem
+              value="cards"
+              className="gap-1.5 px-2.5"
+              aria-label={t('viewModeCards')}
+            >
+              <LayoutGrid className="h-4 w-4" />
+              <span className="hidden sm:inline">{t('viewModeCards')}</span>
+            </ToggleGroupItem>
+          </ToggleGroup>
+        </div>
+      </div>
+
+      <div className="rounded-md border border-dashed bg-muted/20 px-4 py-3 text-sm text-muted-foreground">
+        {reorderEnabled ? t('reorder.description') : t('reorder.filtered')}
       </div>
 
       {isLoading ? (
         <div className="rounded-md border px-4 py-6 text-sm text-muted-foreground">
           {commonT('actions.refresh')}...
         </div>
-      ) : filteredTypes.length > 0 ? (
-        <div className="overflow-x-auto rounded-md border">
-          <Table>
-            <TableHeader>
-              <TableRow>
-                <TableHead>{t('columns.name')}</TableHead>
-                <TableHead>{t('columns.slug')}</TableHead>
-                <TableHead>{t('columns.category')}</TableHead>
-                <TableHead>{t('columns.description')}</TableHead>
-                <TableHead>{t('columns.sortOrder')}</TableHead>
-                <TableHead>{t('columns.collaborators')}</TableHead>
-                <TableHead>{commonT('labels.status')}</TableHead>
-                <TableHead className="text-right">
-                  {commonT('labels.actions')}
-                </TableHead>
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              {filteredTypes.map((collaboratorType) => (
-                <TableRow key={collaboratorType.id}>
-                  <TableCell className="font-medium">
-                    {collaboratorType.name}
-                  </TableCell>
-                  <TableCell>{collaboratorType.slug}</TableCell>
-                  <TableCell>
-                    {collaboratorType.category ||
-                      commonT('labels.notAvailable')}
-                  </TableCell>
-                  <TableCell className="max-w-md text-sm text-muted-foreground">
-                    {collaboratorType.description ||
-                      commonT('labels.notAvailable')}
-                  </TableCell>
-                  <TableCell>
-                    {Number(collaboratorType.sortOrder ?? 0)}
-                  </TableCell>
-                  <TableCell>
-                    {Number(collaboratorType.collaboratorCount ?? 0)}
-                  </TableCell>
-                  <TableCell>
+      ) : collaboratorTypes.length > 0 ? (
+        viewMode === 'cards' ? (
+          <div className="grid gap-4 md:grid-cols-2 2xl:grid-cols-3">
+            {orderedCollaboratorTypes.map((collaboratorType) => (
+              <Card
+                key={collaboratorType.id}
+                className="cursor-pointer overflow-hidden border-border/60 py-0 shadow-sm transition-all hover:-translate-y-0.5 hover:shadow-md"
+                onClick={() => openEditSheet(collaboratorType)}
+              >
+                <CardContent className="space-y-3 p-4">
+                  <div className="flex items-start justify-between gap-3">
+                    <div className="min-w-0">
+                      <div className="truncate font-semibold">
+                        {collaboratorType.name}
+                      </div>
+                      {collaboratorType.slug ? (
+                        <div className="truncate text-xs text-muted-foreground">
+                          {collaboratorType.slug}
+                        </div>
+                      ) : null}
+                    </div>
                     <StatusBadge
-                      label={formatEnumLabel(collaboratorType.status)}
+                      label={getStatusLabel(collaboratorType.status)}
                       className={getStatusBadgeClass(collaboratorType.status)}
                     />
-                  </TableCell>
-                  <TableCell>
-                    <div className="flex justify-end gap-2">
-                      <Button
-                        variant="outline"
-                        size="icon"
-                        className="cursor-pointer"
-                        onClick={() => openEditSheet(collaboratorType)}
-                      >
-                        <Pencil className="size-4" />
-                      </Button>
-                      <Button
-                        variant="outline"
-                        size="sm"
-                        className="cursor-pointer"
-                        onClick={() => void toggleStatus(collaboratorType)}
-                      >
-                        {collaboratorType.status === 'inactive'
-                          ? commonT('actions.activate')
-                          : commonT('actions.deactivate')}
-                      </Button>
-                    </div>
-                  </TableCell>
-                </TableRow>
-              ))}
-            </TableBody>
-          </Table>
-        </div>
+                  </div>
+                  <div className="flex flex-wrap gap-2">
+                    {collaboratorType.category ? (
+                      <span className="inline-flex items-center rounded-full bg-primary/10 px-2.5 py-1 text-xs font-medium text-primary">
+                        {collaboratorType.category}
+                      </span>
+                    ) : null}
+                    <span className="inline-flex items-center rounded-full bg-muted px-2.5 py-1 text-xs font-medium text-muted-foreground">
+                      {Number(collaboratorType.collaboratorCount ?? 0)}{' '}
+                      {commonT('labels.collaborators')}
+                    </span>
+                  </div>
+                  {collaboratorType.description ? (
+                    <p className="line-clamp-2 text-sm text-muted-foreground">
+                      {collaboratorType.description}
+                    </p>
+                  ) : null}
+                  <div className="flex justify-end gap-2 border-t border-border/60 pt-3">
+                    <Button
+                      variant="outline"
+                      size="icon"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        openEditSheet(collaboratorType);
+                      }}
+                    >
+                      <Pencil className="size-4" />
+                    </Button>
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        void toggleStatus(collaboratorType);
+                      }}
+                    >
+                      {collaboratorType.status === 'inactive'
+                        ? commonT('actions.activate')
+                        : commonT('actions.deactivate')}
+                    </Button>
+                  </div>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        ) : (
+          <div className="overflow-x-auto rounded-md border">
+            <DndContext
+              sensors={sensors}
+              collisionDetection={closestCenter}
+              onDragEnd={(event) => void handleDragEnd(event)}
+            >
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead className="w-14">{t('columns.drag')}</TableHead>
+                    <TableHead>{t('columns.sortOrder')}</TableHead>
+                    <TableHead>{t('columns.name')}</TableHead>
+                    <TableHead>{t('columns.slug')}</TableHead>
+                    <TableHead>{t('columns.category')}</TableHead>
+                    <TableHead>{t('columns.description')}</TableHead>
+                    <TableHead>{t('columns.collaborators')}</TableHead>
+                    <TableHead>{commonT('labels.status')}</TableHead>
+                    <TableHead className="text-right">
+                      {commonT('labels.actions')}
+                    </TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  <SortableContext
+                    items={orderedCollaboratorTypes.map((item) => item.id)}
+                    strategy={verticalListSortingStrategy}
+                  >
+                    {orderedCollaboratorTypes.map((collaboratorType, index) => (
+                      <SortableCollaboratorTypeRow
+                        key={collaboratorType.id}
+                        collaboratorType={collaboratorType}
+                        position={index + 1}
+                        commonT={commonT}
+                        t={t}
+                        onEdit={openEditSheet}
+                        onToggleStatus={(item) => void toggleStatus(item)}
+                        reorderEnabled={reorderEnabled && !isReordering}
+                        getStatusLabel={getStatusLabel}
+                      />
+                    ))}
+                  </SortableContext>
+                </TableBody>
+              </Table>
+            </DndContext>
+          </div>
+        )
       ) : (
         <EmptyState
           icon={<Briefcase className="size-12" />}
@@ -387,6 +683,18 @@ export default function OperationsCollaboratorTypesPage() {
         />
       )}
 
+      <PaginationFooter
+        currentPage={page}
+        pageSize={pageSize}
+        totalItems={totalItems}
+        pageSizeOptions={[25, 50, 100, 200]}
+        onPageChange={setPage}
+        onPageSizeChange={(size) => {
+          setPageSize(size);
+          setPage(1);
+        }}
+      />
+
       <Sheet open={isSheetOpen} onOpenChange={setIsSheetOpen}>
         <SheetContent className="w-full overflow-y-auto sm:max-w-xl">
           <SheetHeader>
@@ -397,7 +705,7 @@ export default function OperationsCollaboratorTypesPage() {
           </SheetHeader>
 
           <form
-            className="mt-6 px-6 space-y-4"
+            className="mt-6 space-y-4 px-6"
             onSubmit={(event) => {
               event.preventDefault();
               void saveCollaboratorType();
@@ -457,22 +765,6 @@ export default function OperationsCollaboratorTypesPage() {
               />
             </div>
 
-            <div className="space-y-2">
-              <label className="text-sm font-medium" htmlFor="type-sort-order">
-                {t('form.sortOrder')}
-              </label>
-              <input
-                id="type-sort-order"
-                type="number"
-                value={form.sortOrder}
-                onChange={(event) =>
-                  updateForm('sortOrder', event.target.value)
-                }
-                className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
-                placeholder="0"
-              />
-            </div>
-
             <div className="space-y-2">
               <label className="text-sm font-medium" htmlFor="type-status">
                 {t('form.status')}
@@ -488,8 +780,8 @@ export default function OperationsCollaboratorTypesPage() {
                 }
                 className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
               >
-                <option value="active">{formatEnumLabel('active')}</option>
-                <option value="inactive">{formatEnumLabel('inactive')}</option>
+                <option value="active">{getStatusLabel('active')}</option>
+                <option value="inactive">{getStatusLabel('inactive')}</option>
               </select>
             </div>