@hed-hog/operations 0.0.327 → 0.0.329

package/hedhog/frontend/src/app/(app)/(libraries)/operations/operations/collaborator-types/page.tsx

@@ -1,805 +0,0 @@
-'use client';
-
-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,
-  SheetContent,
-  SheetDescription,
-  SheetHeader,
-  SheetTitle,
-} from '@/components/ui/sheet';
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  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,
-  GripVertical,
-  LayoutGrid,
-  List,
-  Pencil,
-  Users,
-} from 'lucide-react';
-import { useTranslations } from 'next-intl';
-import Link from 'next/link';
-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,
-  PaginatedResponse,
-} from '../_lib/types';
-import { formatEnumLabel, getStatusBadgeClass } from '../_lib/utils/format';
-
-type CollaboratorTypeFormState = {
-  name: string;
-  slug: string;
-  description: string;
-  category: string;
-  status: 'active' | 'inactive';
-};
-
-const EMPTY_FORM_STATE: CollaboratorTypeFormState = {
-  name: '',
-  slug: '',
-  description: '',
-  category: '',
-  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: collaboratorTypesResponse,
-    isLoading,
-    refetch,
-  } = useQuery<PaginatedResponse<OperationsCollaboratorType>>({
-    queryKey: [
-      'operations-collaborator-types-page',
-      currentLocaleCode,
-      search,
-      statusFilter,
-      page,
-      pageSize,
-    ],
-    enabled: access.isDirector,
-    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?${params.toString()}`
-      );
-    },
-    placeholderData: (previous) => previous,
-  });
-
-  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(
-    () => [
-      {
-        key: 'total',
-        title: t('cards.total'),
-        value: collaboratorTypes.length,
-        icon: Briefcase,
-      },
-      {
-        key: 'active',
-        title: t('cards.active'),
-        value: collaboratorTypes.filter((item) => item.status === 'active')
-          .length,
-        icon: Briefcase,
-      },
-      {
-        key: 'linkedCollaborators',
-        title: t('cards.linkedCollaborators'),
-        value: collaboratorTypes.reduce(
-          (total, item) => total + Number(item.collaboratorCount ?? 0),
-          0
-        ),
-        icon: Users,
-      },
-      {
-        key: 'inactive',
-        title: t('cards.inactive'),
-        value: collaboratorTypes.filter((item) => item.status === 'inactive')
-          .length,
-        icon: Briefcase,
-      },
-    ],
-    [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]
-  ) => {
-    setForm((current) => ({
-      ...current,
-      [field]: value,
-    }));
-  };
-
-  const openCreateSheet = () => {
-    setEditingType(null);
-    setForm(EMPTY_FORM_STATE);
-    setIsSheetOpen(true);
-  };
-
-  const openEditSheet = (collaboratorType: OperationsCollaboratorType) => {
-    setEditingType(collaboratorType);
-    setForm({
-      name: collaboratorType.name ?? '',
-      slug: collaboratorType.slug ?? '',
-      description: collaboratorType.description ?? '',
-      category: collaboratorType.category ?? '',
-      status: collaboratorType.status ?? 'active',
-    });
-    setIsSheetOpen(true);
-  };
-
-  const saveCollaboratorType = async () => {
-    if (!form.name.trim()) {
-      showToastHandler?.('error', t('messages.requiredFields'));
-      return;
-    }
-
-    setIsSaving(true);
-
-    try {
-      await mutateOperations(
-        request,
-        editingType
-          ? `/operations/collaborator-types/${editingType.id}`
-          : '/operations/collaborator-types',
-        editingType ? 'PATCH' : 'POST',
-        {
-          name: form.name.trim(),
-          slug: form.slug.trim() || null,
-          description: form.description.trim() || null,
-          category: form.category.trim() || null,
-          status: form.status,
-          isActive: form.status === 'active',
-        }
-      );
-
-      showToastHandler?.('success', t('messages.saveSuccess'));
-      setIsSheetOpen(false);
-      setEditingType(null);
-      setForm(EMPTY_FORM_STATE);
-      await refetch();
-    } catch {
-      showToastHandler?.('error', t('messages.saveError'));
-    } finally {
-      setIsSaving(false);
-    }
-  };
-
-  const toggleStatus = async (collaboratorType: OperationsCollaboratorType) => {
-    const nextStatus =
-      collaboratorType.status === 'inactive' ? 'active' : 'inactive';
-
-    try {
-      await mutateOperations(
-        request,
-        `/operations/collaborator-types/${collaboratorType.id}`,
-        'PATCH',
-        { status: nextStatus, isActive: nextStatus === 'active' }
-      );
-      showToastHandler?.('success', t('messages.statusSuccess'));
-      await refetch();
-    } catch {
-      showToastHandler?.('error', t('messages.statusError'));
-    }
-  };
-
-  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>
-        <OperationsHeader
-          title={t('title')}
-          description={t('description')}
-          current={t('breadcrumb')}
-          actions={
-            <Button variant="outline" size="sm" asChild>
-              <Link href="/operations/collaborators">
-                {commonT('actions.back')}
-              </Link>
-            </Button>
-          }
-        />
-
-        <EmptyState
-          icon={<Briefcase className="size-12" />}
-          title={commonT('states.noAccessTitle')}
-          description={t('noAccessDescription')}
-          actionLabel={commonT('actions.back')}
-          onAction={() => {
-            window.location.href = '/operations';
-          }}
-        />
-      </Page>
-    );
-  }
-
-  return (
-    <Page>
-      <OperationsHeader
-        title={t('title')}
-        description={t('description')}
-        current={t('breadcrumb')}
-        actions={
-          <div className="flex flex-wrap gap-2">
-            <Button variant="outline" size="sm" asChild>
-              <Link href="/operations/collaborators">
-                {commonT('actions.back')}
-              </Link>
-            </Button>
-            <Button size="sm" onClick={openCreateSheet}>
-              {commonT('actions.create')}
-            </Button>
-          </div>
-        }
-      />
-
-      <KpiCardsGrid items={statsCards} columns={4} />
-
-      <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>
-      ) : 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={getStatusLabel(collaboratorType.status)}
-                      className={getStatusBadgeClass(collaboratorType.status)}
-                    />
-                  </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" />}
-          title={commonT('states.emptyTitle')}
-          description={t('emptyDescription')}
-          actionLabel={commonT('actions.create')}
-          onAction={openCreateSheet}
-        />
-      )}
-
-      <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>
-            <SheetTitle>
-              {editingType ? t('sheet.editTitle') : t('sheet.createTitle')}
-            </SheetTitle>
-            <SheetDescription>{t('sheet.description')}</SheetDescription>
-          </SheetHeader>
-
-          <form
-            className="mt-6 space-y-4 px-6"
-            onSubmit={(event) => {
-              event.preventDefault();
-              void saveCollaboratorType();
-            }}
-          >
-            <div className="space-y-2">
-              <label className="text-sm font-medium" htmlFor="type-name">
-                {t('form.name')}
-              </label>
-              <input
-                id="type-name"
-                value={form.name}
-                onChange={(event) => updateForm('name', event.target.value)}
-                className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
-                placeholder={t('form.name')}
-              />
-            </div>
-
-            <div className="space-y-2">
-              <label className="text-sm font-medium" htmlFor="type-slug">
-                {t('form.slug')}
-              </label>
-              <input
-                id="type-slug"
-                value={form.slug}
-                onChange={(event) => updateForm('slug', event.target.value)}
-                className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
-                placeholder={t('form.slug')}
-              />
-            </div>
-
-            <div className="space-y-2">
-              <label className="text-sm font-medium" htmlFor="type-category">
-                {t('form.category')}
-              </label>
-              <input
-                id="type-category"
-                value={form.category}
-                onChange={(event) => updateForm('category', event.target.value)}
-                className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
-                placeholder={t('form.category')}
-              />
-            </div>
-
-            <div className="space-y-2">
-              <label className="text-sm font-medium" htmlFor="type-description">
-                {t('form.description')}
-              </label>
-              <textarea
-                id="type-description"
-                value={form.description}
-                onChange={(event) =>
-                  updateForm('description', event.target.value)
-                }
-                className="min-h-24 w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
-                placeholder={t('form.description')}
-              />
-            </div>
-
-            <div className="space-y-2">
-              <label className="text-sm font-medium" htmlFor="type-status">
-                {t('form.status')}
-              </label>
-              <select
-                id="type-status"
-                value={form.status}
-                onChange={(event) =>
-                  updateForm(
-                    'status',
-                    event.target.value === 'inactive' ? 'inactive' : 'active'
-                  )
-                }
-                className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
-              >
-                <option value="active">{getStatusLabel('active')}</option>
-                <option value="inactive">{getStatusLabel('inactive')}</option>
-              </select>
-            </div>
-
-            <div className="flex justify-end gap-2 pt-2">
-              <Button
-                type="button"
-                variant="outline"
-                onClick={() => setIsSheetOpen(false)}
-              >
-                {commonT('actions.cancel')}
-              </Button>
-              <Button type="submit" disabled={isSaving}>
-                {commonT('actions.save')}
-              </Button>
-            </div>
-          </form>
-        </SheetContent>
-      </Sheet>
-    </Page>
-  );
-}