@hed-hog/operations 0.0.327 → 0.0.329

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

@@ -1,846 +0,0 @@
-'use client';
-
-import {
-    EmptyState,
-    Page,
-    PaginationFooter,
-    SearchBar,
-} from '@/components/entity-list';
-import {
-    AlertDialog,
-    AlertDialogAction,
-    AlertDialogCancel,
-    AlertDialogContent,
-    AlertDialogDescription,
-    AlertDialogFooter,
-    AlertDialogHeader,
-    AlertDialogTitle,
-} from '@/components/ui/alert-dialog';
-import { Badge } from '@/components/ui/badge';
-import { Button } from '@/components/ui/button';
-import { Card, CardContent } from '@/components/ui/card';
-import { Input } from '@/components/ui/input';
-import { KpiCardsGrid } from '@/components/ui/kpi-cards-grid';
-import { Label } from '@/components/ui/label';
-import {
-    Select,
-    SelectContent,
-    SelectItem,
-    SelectTrigger,
-    SelectValue,
-} from '@/components/ui/select';
-import {
-    Sheet,
-    SheetContent,
-    SheetDescription,
-    SheetHeader,
-    SheetTitle,
-} from '@/components/ui/sheet';
-import { Switch } from '@/components/ui/switch';
-import {
-    Table,
-    TableBody,
-    TableCell,
-    TableHead,
-    TableHeader,
-    TableRow,
-} from '@/components/ui/table';
-import { Textarea } from '@/components/ui/textarea';
-import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
-import { useApp, useQuery } from '@hed-hog/next-app-provider';
-import { Layers, LayoutGrid, List, Pencil, Trash2 } from 'lucide-react';
-import { useTranslations } from 'next-intl';
-import Link from 'next/link';
-import { useMemo, useState } from 'react';
-import { OperationsHeader } from '../_components/operations-header';
-import {
-    createProjectCostType,
-    deleteProjectCostType,
-    listProjectCostCategories,
-    listProjectCostTypes,
-    updateProjectCostType,
-} from '../_lib/api';
-import { useOperationsAccess } from '../_lib/hooks/use-operations-access';
-import type {
-    PaginatedResponse,
-    ProjectCostCategory,
-    ProjectCostType,
-} from '../_lib/types';
-import { formatEnumLabel } from '../_lib/utils/format';
-
-const CALCULATION_TYPE_OPTIONS = [
-  'fixed',
-  'unit',
-  'hourly',
-  'monthly',
-  'percentage',
-] as const;
-
-type CostTypeFormState = {
-  category_id: string;
-  slug: string;
-  code: string;
-  name: string;
-  description: string;
-  default_unit: string;
-  default_calculation_type: string;
-  is_recurring_allowed: boolean;
-  is_active: boolean;
-  sort_order: string;
-};
-
-const EMPTY_FORM: CostTypeFormState = {
-  category_id: 'none',
-  slug: '',
-  code: '',
-  name: '',
-  description: '',
-  default_unit: '',
-  default_calculation_type: 'fixed',
-  is_recurring_allowed: true,
-  is_active: true,
-  sort_order: '0',
-};
-
-export default function ProjectCostTypesPage() {
-  const t = useTranslations('operations.ProjectCostTypesPage');
-  const commonT = useTranslations('operations.Common');
-  const { request, showToastHandler, currentLocaleCode } = useApp();
-  const access = useOperationsAccess();
-
-  const [search, setSearch] = useState('');
-  const [categoryFilter, setCategoryFilter] = useState<string>('all');
-  const [calcTypeFilter, setCalcTypeFilter] = useState<string>('all');
-  const [page, setPage] = useState(1);
-  const [pageSize, setPageSize] = useState(12);
-  const [viewMode, setViewMode] = useState<'table' | 'cards'>(() => {
-    if (typeof window === 'undefined') return 'table';
-    const saved = window.localStorage.getItem(
-      'operations-project-cost-types-view-mode'
-    );
-    return saved === 'cards' ? 'cards' : 'table';
-  });
-  const [isSheetOpen, setIsSheetOpen] = useState(false);
-  const [isSaving, setIsSaving] = useState(false);
-  const [editingItem, setEditingItem] = useState<ProjectCostType | null>(null);
-  const [form, setForm] = useState<CostTypeFormState>(EMPTY_FORM);
-  const [deleteTarget, setDeleteTarget] = useState<ProjectCostType | null>(
-    null
-  );
-  const [isDeleting, setIsDeleting] = useState(false);
-
-  const { data: categoriesRaw } = useQuery<ProjectCostCategory[]>({
-    queryKey: ['operations-project-cost-categories-all', currentLocaleCode],
-    enabled: access.isDirector,
-    queryFn: () =>
-      listProjectCostCategories(request, {
-        pageSize: '200',
-      }) as Promise<ProjectCostCategory[]>,
-  });
-
-  // The API may return a paginated response or a flat array.
-  const categories: ProjectCostCategory[] = Array.isArray(categoriesRaw)
-    ? categoriesRaw
-    : ((categoriesRaw as PaginatedResponse<ProjectCostCategory> | undefined)
-        ?.data ?? []);
-
-  const {
-    data: response,
-    isLoading,
-    refetch,
-  } = useQuery<PaginatedResponse<ProjectCostType>>({
-    queryKey: [
-      'operations-project-cost-types',
-      currentLocaleCode,
-      search,
-      categoryFilter,
-      calcTypeFilter,
-      page,
-      pageSize,
-    ],
-    enabled: access.isDirector,
-    queryFn: () => {
-      const params: Record<string, string> = {
-        page: String(page),
-        pageSize: String(pageSize),
-      };
-      if (search.trim()) params.search = search.trim();
-      if (categoryFilter !== 'all') params.category_id = categoryFilter;
-      if (calcTypeFilter !== 'all') params.default_calculation_type = calcTypeFilter;
-      return listProjectCostTypes(request, params) as Promise<
-        PaginatedResponse<ProjectCostType>
-      >;
-    },
-    placeholderData: (previous) => previous,
-  });
-
-  const items = response?.data ?? [];
-
-  const statsCards = useMemo(
-    () => [
-      {
-        key: 'total',
-        title: t('cards.total'),
-        value: response?.total ?? items.length,
-        icon: Layers,
-      },
-      {
-        key: 'active',
-        title: t('cards.active'),
-        value: items.filter((i) => i.is_active).length,
-        icon: Layers,
-      },
-      {
-        key: 'inactive',
-        title: t('cards.inactive'),
-        value: items.filter((i) => !i.is_active).length,
-        icon: Layers,
-      },
-    ],
-    [items, response?.total, t]
-  );
-
-  const updateForm = <K extends keyof CostTypeFormState>(
-    field: K,
-    value: CostTypeFormState[K]
-  ) => {
-    setForm((current) => ({ ...current, [field]: value }));
-  };
-
-  const openCreateSheet = () => {
-    setEditingItem(null);
-    setForm(EMPTY_FORM);
-    setIsSheetOpen(true);
-  };
-
-  const openEditSheet = (item: ProjectCostType) => {
-    setEditingItem(item);
-    setForm({
-      category_id: item.category_id ? String(item.category_id) : 'none',
-      slug: item.slug ?? '',
-      code: item.code ?? '',
-      name: item.name ?? '',
-      description: item.description ?? '',
-      default_unit: item.default_unit ?? '',
-      default_calculation_type: item.default_calculation_type ?? 'fixed',
-      is_recurring_allowed: item.is_recurring_allowed ?? true,
-      is_active: item.is_active ?? true,
-      sort_order: String(item.sort_order ?? 0),
-    });
-    setIsSheetOpen(true);
-  };
-
-  const saveItem = async () => {
-    if (!form.name.trim() || !form.code.trim()) {
-      showToastHandler?.('error', t('messages.requiredFields'));
-      return;
-    }
-
-    setIsSaving(true);
-    try {
-      const payload = {
-        category_id:
-          form.category_id !== 'none' ? Number(form.category_id) : null,
-        slug: form.slug.trim() || null,
-        code: form.code.trim(),
-        name: form.name.trim(),
-        description: form.description.trim() || null,
-        default_unit: form.default_unit.trim() || null,
-        default_calculation_type: form.default_calculation_type,
-        is_recurring_allowed: form.is_recurring_allowed,
-        is_active: form.is_active,
-        sort_order: parseInt(form.sort_order, 10) || 0,
-      };
-
-      if (editingItem) {
-        await updateProjectCostType(request, editingItem.id, payload);
-      } else {
-        await createProjectCostType(request, payload);
-      }
-
-      showToastHandler?.('success', t('messages.saveSuccess'));
-      setIsSheetOpen(false);
-      setEditingItem(null);
-      setForm(EMPTY_FORM);
-      await refetch();
-    } catch {
-      showToastHandler?.('error', t('messages.saveError'));
-    } finally {
-      setIsSaving(false);
-    }
-  };
-
-  const confirmDelete = async () => {
-    if (!deleteTarget) return;
-    setIsDeleting(true);
-    try {
-      await deleteProjectCostType(request, deleteTarget.id);
-      showToastHandler?.('success', t('messages.deleteSuccess'));
-      setDeleteTarget(null);
-      await refetch();
-    } catch {
-      showToastHandler?.('error', t('messages.deleteError'));
-    } finally {
-      setIsDeleting(false);
-    }
-  };
-
-  const handleViewModeChange = (value: string) => {
-    if (value !== 'table' && value !== 'cards') return;
-    setViewMode(value as 'table' | 'cards');
-    if (typeof window !== 'undefined') {
-      window.localStorage.setItem(
-        'operations-project-cost-types-view-mode',
-        value
-      );
-    }
-  };
-
-  const getCategoryName = (id?: number) => {
-    if (!id) return null;
-    return categories.find((c) => c.id === id)?.name ?? null;
-  };
-
-  const getCategoryColor = (id?: number) => {
-    if (!id) return undefined;
-    return categories.find((c) => c.id === id)?.color;
-  };
-
-  const getItemCategoryId = (item: ProjectCostType) => item.category_id;
-
-  const calculationTypeLabel = (value: string) => {
-    const map: Record<string, string> = {
-      fixed: t('calculationType.fixed'),
-      unit: t('calculationType.unit'),
-      hourly: t('calculationType.hourly'),
-      monthly: t('calculationType.monthly'),
-      percentage: t('calculationType.percentage'),
-    };
-    return map[value] ?? formatEnumLabel(value);
-  };
-
-  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">{commonT('actions.back')}</Link>
-            </Button>
-          }
-        />
-        <EmptyState
-          icon={<Layers 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">{commonT('actions.back')}</Link>
-            </Button>
-            <Button size="sm" onClick={openCreateSheet}>
-              {commonT('actions.create')}
-            </Button>
-          </div>
-        }
-      />
-
-      <KpiCardsGrid items={statsCards} columns={3} />
-
-      <div className="flex min-w-0 flex-col gap-4 xl:flex-row xl:items-center">
-        <div className="flex flex-1 flex-wrap items-center gap-3">
-          <div className="flex-1">
-            <SearchBar
-              searchQuery={search}
-              onSearchChange={(value) => {
-                setSearch(value);
-                setPage(1);
-              }}
-              showSearchButton={false}
-              debounceMs={500}
-              placeholder={t('searchPlaceholder')}
-            />
-          </div>
-          <Select
-            value={categoryFilter}
-            onValueChange={(value) => {
-              setCategoryFilter(value);
-              setPage(1);
-            }}
-          >
-            <SelectTrigger className="w-52">
-              <SelectValue placeholder={t('filters.allCategories')} />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="all">{t('filters.allCategories')}</SelectItem>
-              {categories.map((cat) => (
-                <SelectItem key={cat.id} value={String(cat.id)}>
-                  {cat.name}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-          <Select
-            value={calcTypeFilter}
-            onValueChange={(value) => {
-              setCalcTypeFilter(value);
-              setPage(1);
-            }}
-          >
-            <SelectTrigger className="w-44">
-              <SelectValue placeholder={t('filters.allCalculationTypes')} />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="all">{t('filters.allCalculationTypes')}</SelectItem>
-              {CALCULATION_TYPE_OPTIONS.map((ct) => (
-                <SelectItem key={ct} value={ct}>
-                  {calculationTypeLabel(ct)}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-        </div>
-        <div className="shrink-0">
-          <ToggleGroup
-            type="single"
-            value={viewMode}
-            onValueChange={handleViewModeChange}
-          >
-            <ToggleGroupItem value="table" aria-label={t('viewModeTable')}>
-              <List className="size-4" />
-            </ToggleGroupItem>
-            <ToggleGroupItem value="cards" aria-label={t('viewModeCards')}>
-              <LayoutGrid className="size-4" />
-            </ToggleGroupItem>
-          </ToggleGroup>
-        </div>
-      </div>
-
-      {isLoading ? (
-        <div className="flex h-40 items-center justify-center text-muted-foreground">
-          {commonT('states.loading')}
-        </div>
-      ) : items.length === 0 ? (
-        <EmptyState
-          icon={<Layers className="size-12" />}
-          title={commonT('states.emptyTitle')}
-          description={t('emptyDescription')}
-          actionLabel={commonT('actions.create')}
-          onAction={openCreateSheet}
-        />
-      ) : viewMode === 'table' ? (
-        <div className="overflow-hidden rounded-xl border bg-card shadow-sm">
-          <Table>
-            <TableHeader>
-              <TableRow>
-                <TableHead>{t('columns.code')}</TableHead>
-                <TableHead>{t('columns.name')}</TableHead>
-                <TableHead>{t('columns.category')}</TableHead>
-                <TableHead>{t('columns.defaultCalculationType')}</TableHead>
-                <TableHead>{t('columns.active')}</TableHead>
-                <TableHead className="text-right">
-                  {commonT('labels.actions')}
-                </TableHead>
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              {items.map((item) => (
-                <TableRow
-                  key={item.id}
-                  className="cursor-pointer"
-                  onClick={() => openEditSheet(item)}
-                >
-                  <TableCell>
-                    <code className="rounded bg-muted px-1.5 py-0.5 text-xs font-mono">
-                      {item.code}
-                    </code>
-                  </TableCell>
-                  <TableCell className="font-medium">{item.name}</TableCell>
-                  <TableCell>
-                    {getItemCategoryId(item) ? (
-                      <Badge
-                        variant="outline"
-                        className="gap-1.5"
-                        style={{
-                          borderColor: getCategoryColor(
-                            getItemCategoryId(item)
-                          ),
-                        }}
-                      >
-                        {getCategoryColor(getItemCategoryId(item)) ? (
-                          <span
-                            className="inline-block size-2 rounded-full"
-                            style={{
-                              backgroundColor: getCategoryColor(
-                                getItemCategoryId(item)
-                              ),
-                            }}
-                          />
-                        ) : null}
-                        {item.category?.name ??
-                          getCategoryName(getItemCategoryId(item)) ??
-                          '-'}
-                      </Badge>
-                    ) : (
-                      <span className="text-muted-foreground">-</span>
-                    )}
-                  </TableCell>
-                  <TableCell>
-                    <Badge variant="secondary">
-                      {calculationTypeLabel(item.default_calculation_type)}
-                    </Badge>
-                  </TableCell>
-                  <TableCell>
-                    <Badge
-                      variant={item.is_active ? 'default' : 'secondary'}
-                      className={
-                        item.is_active
-                          ? 'bg-emerald-500/15 text-emerald-700'
-                          : ''
-                      }
-                    >
-                      {item.is_active
-                        ? t('columns.activeYes')
-                        : t('columns.activeNo')}
-                    </Badge>
-                  </TableCell>
-                  <TableCell
-                    className="text-right"
-                    onClick={(e) => e.stopPropagation()}
-                  >
-                    <div className="flex justify-end gap-1">
-                      <Button
-                        variant="ghost"
-                        size="icon"
-                        className="size-8"
-                        onClick={() => openEditSheet(item)}
-                      >
-                        <Pencil className="size-3.5" />
-                      </Button>
-                      <Button
-                        variant="ghost"
-                        size="icon"
-                        className="size-8 text-destructive hover:text-destructive"
-                        onClick={() => setDeleteTarget(item)}
-                      >
-                        <Trash2 className="size-3.5" />
-                      </Button>
-                    </div>
-                  </TableCell>
-                </TableRow>
-              ))}
-            </TableBody>
-          </Table>
-        </div>
-      ) : (
-        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
-          {items.map((item) => (
-            <Card
-              key={item.id}
-              className="cursor-pointer transition-shadow hover:shadow-md"
-              onClick={() => openEditSheet(item)}
-            >
-              <CardContent className="p-4">
-                <div className="flex items-start justify-between gap-2">
-                  <div className="min-w-0">
-                    <div className="flex items-center gap-2">
-                      <code className="rounded bg-muted px-1.5 py-0.5 text-xs font-mono">
-                        {item.code}
-                      </code>
-                      <Badge
-                        variant={item.is_active ? 'default' : 'secondary'}
-                        className={
-                          item.is_active
-                            ? 'bg-emerald-500/15 text-emerald-700'
-                            : ''
-                        }
-                      >
-                        {item.is_active
-                          ? t('columns.activeYes')
-                          : t('columns.activeNo')}
-                      </Badge>
-                    </div>
-                    <p className="mt-1 font-medium">{item.name}</p>
-                    {getItemCategoryId(item) ? (
-                      <Badge
-                        variant="outline"
-                        className="mt-1 gap-1.5"
-                        style={{
-                          borderColor: getCategoryColor(
-                            getItemCategoryId(item)
-                          ),
-                        }}
-                      >
-                        {getCategoryColor(getItemCategoryId(item)) ? (
-                          <span
-                            className="inline-block size-2 rounded-full"
-                            style={{
-                              backgroundColor: getCategoryColor(
-                                getItemCategoryId(item)
-                              ),
-                            }}
-                          />
-                        ) : null}
-                        {item.category?.name ??
-                          getCategoryName(getItemCategoryId(item)) ??
-                          '-'}
-                      </Badge>
-                    ) : null}
-                    <Badge variant="secondary" className="mt-1">
-                      {calculationTypeLabel(item.default_calculation_type)}
-                    </Badge>
-                  </div>
-                  <div className="flex shrink-0 gap-1">
-                    <Button
-                      variant="ghost"
-                      size="icon"
-                      className="size-8"
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        openEditSheet(item);
-                      }}
-                    >
-                      <Pencil className="size-3.5" />
-                    </Button>
-                    <Button
-                      variant="ghost"
-                      size="icon"
-                      className="size-8 text-destructive hover:text-destructive"
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        setDeleteTarget(item);
-                      }}
-                    >
-                      <Trash2 className="size-3.5" />
-                    </Button>
-                  </div>
-                </div>
-              </CardContent>
-            </Card>
-          ))}
-        </div>
-      )}
-
-      {response && response.lastPage > 1 ? (
-        <PaginationFooter
-          page={page}
-          pageSize={pageSize}
-          total={response.total}
-          lastPage={response.lastPage}
-          onPageChange={setPage}
-          onPageSizeChange={(size) => {
-            setPageSize(size);
-            setPage(1);
-          }}
-        />
-      ) : null}
-
-      {/* Create / Edit Sheet */}
-      <Sheet open={isSheetOpen} onOpenChange={setIsSheetOpen}>
-        <SheetContent className="flex w-full flex-col overflow-hidden sm:max-w-lg">
-          <SheetHeader>
-            <SheetTitle>
-              {editingItem ? t('sheet.editTitle') : t('sheet.createTitle')}
-            </SheetTitle>
-            <SheetDescription>{t('sheet.description')}</SheetDescription>
-          </SheetHeader>
-
-          <div className="flex-1 space-y-4 overflow-y-auto px-4 py-4">
-            <div className="space-y-1.5">
-              <Label htmlFor="ct-category">{t('form.category')}</Label>
-              <Select
-                value={form.category_id}
-                onValueChange={(value) => updateForm('category_id', value)}
-              >
-                <SelectTrigger id="ct-category" className="w-full">
-                  <SelectValue placeholder={t('form.categoryPlaceholder')} />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="none">{t('form.categoryNone')}</SelectItem>
-                  {categories.map((cat) => (
-                    <SelectItem key={cat.id} value={String(cat.id)}>
-                      {cat.name}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-            </div>
-
-            <div className="grid grid-cols-2 gap-4">
-              <div className="space-y-1.5">
-                <Label htmlFor="ct-code">
-                  {t('form.code')} <span className="text-destructive">*</span>
-                </Label>
-                <Input
-                  id="ct-code"
-                  value={form.code}
-                  onChange={(e) => updateForm('code', e.target.value)}
-                  placeholder={t('form.codePlaceholder')}
-                />
-              </div>
-              <div className="space-y-1.5">
-                <Label htmlFor="ct-slug">{t('form.slug')}</Label>
-                <Input
-                  id="ct-slug"
-                  value={form.slug}
-                  onChange={(e) => updateForm('slug', e.target.value)}
-                  placeholder={t('form.slugPlaceholder')}
-                />
-              </div>
-            </div>
-
-            <div className="space-y-1.5">
-              <Label htmlFor="ct-name">
-                {t('form.name')} <span className="text-destructive">*</span>
-              </Label>
-              <Input
-                id="ct-name"
-                value={form.name}
-                onChange={(e) => updateForm('name', e.target.value)}
-                placeholder={t('form.namePlaceholder')}
-              />
-            </div>
-
-            <div className="space-y-1.5">
-              <Label htmlFor="ct-description">{t('form.description')}</Label>
-              <Textarea
-                id="ct-description"
-                value={form.description}
-                onChange={(e) => updateForm('description', e.target.value)}
-                placeholder={t('form.descriptionPlaceholder')}
-                rows={3}
-              />
-            </div>
-
-            <div className="space-y-1.5">
-              <Label htmlFor="ct-default-unit">{t('form.defaultUnit')}</Label>
-              <Input
-                id="ct-default-unit"
-                value={form.default_unit}
-                onChange={(e) => updateForm('default_unit', e.target.value)}
-                placeholder={t('form.defaultUnitPlaceholder')}
-              />
-            </div>
-
-            <div className="space-y-1.5">
-              <Label htmlFor="ct-calc-type">
-                {t('form.defaultCalculationType')}
-              </Label>
-              <Select
-                value={form.default_calculation_type}
-                onValueChange={(value) =>
-                  updateForm('default_calculation_type', value)
-                }
-              >
-                <SelectTrigger id="ct-calc-type" className="w-full">
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  {CALCULATION_TYPE_OPTIONS.map((ct) => (
-                    <SelectItem key={ct} value={ct}>
-                      {calculationTypeLabel(ct)}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-            </div>
-
-            <div className="flex items-center gap-3">
-              <Switch
-                id="ct-is-recurring-allowed"
-                checked={form.is_recurring_allowed}
-                onCheckedChange={(checked) =>
-                  updateForm('is_recurring_allowed', checked)
-                }
-              />
-              <Label htmlFor="ct-is-recurring-allowed">
-                {t('form.isRecurringAllowed')}
-              </Label>
-            </div>
-
-            <div className="space-y-1.5">
-              <Label htmlFor="ct-sort-order">{t('form.sortOrder')}</Label>
-              <Input
-                id="ct-sort-order"
-                type="number"
-                min="0"
-                step="1"
-                value={form.sort_order}
-                onChange={(e) => updateForm('sort_order', e.target.value)}
-              />
-            </div>
-
-            <div className="flex items-center gap-3">
-              <Switch
-                id="ct-is-active"
-                checked={form.is_active}
-                onCheckedChange={(checked) => updateForm('is_active', checked)}
-              />
-              <Label htmlFor="ct-is-active">{t('form.isActive')}</Label>
-            </div>
-          </div>
-
-          <div className="flex justify-end gap-2 border-t p-4">
-            <Button
-              variant="outline"
-              onClick={() => setIsSheetOpen(false)}
-              disabled={isSaving}
-            >
-              {commonT('actions.cancel')}
-            </Button>
-            <Button onClick={saveItem} disabled={isSaving}>
-              {isSaving ? t('messages.saving') : commonT('actions.save')}
-            </Button>
-          </div>
-        </SheetContent>
-      </Sheet>
-
-      {/* Delete Confirmation */}
-      <AlertDialog
-        open={deleteTarget !== null}
-        onOpenChange={(open) => {
-          if (!open) setDeleteTarget(null);
-        }}
-      >
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>{t('deleteDialog.title')}</AlertDialogTitle>
-            <AlertDialogDescription>
-              {t('deleteDialog.description')}
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel disabled={isDeleting}>
-              {commonT('actions.cancel')}
-            </AlertDialogCancel>
-            <AlertDialogAction
-              onClick={confirmDelete}
-              disabled={isDeleting}
-              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
-            >
-              {isDeleting ? t('messages.deleting') : commonT('actions.delete')}
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
-    </Page>
-  );
-}