@hed-hog/operations 0.0.322 → 0.0.325

package/hedhog/frontend/app/project-cost-types/page.tsx.ejs

@@ -0,0 +1,845 @@
+'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
+          currentPage={page}
+          pageSize={pageSize}
+          totalItems={response.total}
+          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>
+  );
+}