@hed-hog/lms 0.0.304 → 0.0.306

package/hedhog/frontend/app/certificates/models/page.tsx.ejs

@@ -0,0 +1,883 @@
+'use client';
+
+import { createDefaultTemplate } from '@/app/(app)/(libraries)/lms/_lib/editor/types';
+import {
+  EmptyState,
+  Page,
+  PageHeader,
+  PaginationFooter,
+  SearchBar,
+} from '@/components/entity-list';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent } from '@/components/ui/card';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { Input } from '@/components/ui/input';
+import { KpiCardsGrid, type KpiCardItem } from '@/components/ui/kpi-cards-grid';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import { Skeleton } from '@/components/ui/skeleton';
+import { Textarea } from '@/components/ui/textarea';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import { zodResolver } from '@hookform/resolvers/zod';
+import {
+  AlertTriangle,
+  CircleCheckBig,
+  CircleDashed,
+  CircleOff,
+  FileEdit,
+  FilePlus2,
+  Files,
+  Loader2,
+  MoreHorizontal,
+  Pencil,
+  Trash2,
+} from 'lucide-react';
+import { useLocale, useTranslations } from 'next-intl';
+import { useRouter } from 'next/navigation';
+import { useEffect, useMemo, useState } from 'react';
+import { Controller, useForm } from 'react-hook-form';
+import { toast } from 'sonner';
+import { z } from 'zod';
+
+type TemplateStatus = 'draft' | 'active' | 'inactive';
+type StatusFilter = 'all' | TemplateStatus;
+
+type CertificateTemplate = {
+  id: number;
+  name: string;
+  slug: string;
+  description: string | null;
+  templateContent: string;
+  status: TemplateStatus;
+  updatedAt?: string;
+  updated_at?: string;
+};
+
+type CertificateTemplatesResponse = {
+  total: number;
+  page: number;
+  pageSize: number;
+  lastPage: number;
+  data: CertificateTemplate[];
+};
+
+type CreateCertificateTemplatePayload = {
+  name: string;
+  description?: string;
+  templateContent: string;
+  status: TemplateStatus;
+};
+
+type UpdateCertificateTemplatePayload = {
+  name: string;
+  description?: string;
+};
+
+const PAGE_SIZES = [6, 12, 24];
+
+const createTemplateSchema = (t: (key: string) => string) =>
+  z.object({
+    name: z.string().trim().min(1, t('sheet.validation.required')),
+    description: z.string().trim().optional(),
+    status: z.enum(['draft', 'active', 'inactive']),
+  });
+
+const updateTemplateSchema = (t: (key: string) => string) =>
+  z.object({
+    name: z.string().trim().min(1, t('editSheet.validation.required')),
+    description: z.string().trim().optional(),
+  });
+
+type CreateTemplateFormValues = z.infer<
+  ReturnType<typeof createTemplateSchema>
+>;
+
+type UpdateTemplateFormValues = z.infer<
+  ReturnType<typeof updateTemplateSchema>
+>;
+
+type Locale = {
+  id?: number;
+  code: string;
+  name: string;
+};
+
+function resolveUpdatedAt(template: CertificateTemplate) {
+  return template.updatedAt ?? template.updated_at ?? null;
+}
+
+export default function ModelsPage() {
+  const t = useTranslations('lms.CertificateTemplatesPage');
+  const locale = useLocale();
+  const router = useRouter();
+  const { request } = useApp();
+
+  const [searchInput, setSearchInput] = useState('');
+  const [searchQuery, setSearchQuery] = useState('');
+  const [statusFilter, setStatusFilter] = useState<StatusFilter>('all');
+  const [currentPage, setCurrentPage] = useState(1);
+  const [pageSize, setPageSize] = useState(12);
+  const [isSheetOpen, setIsSheetOpen] = useState(false);
+  const [isEditSheetOpen, setIsEditSheetOpen] = useState(false);
+  const [isCreating, setIsCreating] = useState(false);
+  const [isUpdating, setIsUpdating] = useState(false);
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [templateToDelete, setTemplateToDelete] =
+    useState<CertificateTemplate | null>(null);
+  const [deletingTemplateId, setDeletingTemplateId] = useState<number | null>(
+    null
+  );
+  const [editingTemplateId, setEditingTemplateId] = useState<number | null>(
+    null
+  );
+
+  const form = useForm<CreateTemplateFormValues>({
+    resolver: zodResolver(createTemplateSchema(t)),
+    defaultValues: {
+      name: '',
+      description: '',
+      status: 'draft',
+    },
+  });
+
+  const editForm = useForm<UpdateTemplateFormValues>({
+    resolver: zodResolver(updateTemplateSchema(t)),
+    defaultValues: {
+      name: '',
+      description: '',
+    },
+  });
+
+  useEffect(() => {
+    const timeoutId = setTimeout(() => {
+      setSearchQuery(searchInput.trim());
+    }, 350);
+
+    return () => clearTimeout(timeoutId);
+  }, [searchInput]);
+
+  useEffect(() => {
+    setCurrentPage(1);
+  }, [searchQuery, statusFilter]);
+
+  const {
+    data: templatesResponse,
+    isLoading,
+    isFetching,
+    refetch,
+  } = useQuery<CertificateTemplatesResponse>({
+    queryKey: [
+      'lms-certificate-templates',
+      currentPage,
+      pageSize,
+      searchQuery,
+      statusFilter,
+    ],
+    queryFn: async () => {
+      const response = await request<CertificateTemplatesResponse>({
+        url: '/lms/certificates/templates',
+        method: 'GET',
+        params: {
+          page: currentPage,
+          pageSize,
+          ...(searchQuery ? { search: searchQuery } : {}),
+          ...(statusFilter !== 'all' ? { status: statusFilter } : {}),
+        },
+      });
+
+      return response.data;
+    },
+    placeholderData: (old) => old,
+  });
+
+  const templates = templatesResponse?.data ?? [];
+  const totalItems = templatesResponse?.total ?? 0;
+  const totalPages = Math.max(templatesResponse?.lastPage ?? 1, 1);
+  const loading = isLoading && !templatesResponse;
+  const isRefreshing = isFetching && !isLoading;
+
+  useEffect(() => {
+    if (currentPage > totalPages) {
+      setCurrentPage(totalPages);
+    }
+  }, [currentPage, totalPages]);
+
+  const hasActiveFilters =
+    searchInput.trim().length > 0 || statusFilter !== 'all';
+
+  const dateFormatter = useMemo(
+    () =>
+      new Intl.DateTimeFormat(locale.startsWith('pt') ? 'pt-BR' : 'en-US', {
+        dateStyle: 'medium',
+      }),
+    [locale]
+  );
+
+  const stats = useMemo<KpiCardItem[]>(() => {
+    const activeCount = templates.filter(
+      (item) => item.status === 'active'
+    ).length;
+    const draftCount = templates.filter(
+      (item) => item.status === 'draft'
+    ).length;
+    const inactiveCount = templates.filter(
+      (item) => item.status === 'inactive'
+    ).length;
+
+    return [
+      {
+        key: 'total',
+        title: t('kpis.total'),
+        value: totalItems,
+        description: t('kpis.totalSub'),
+        icon: Files,
+        accentClassName: 'from-sky-500/20 via-cyan-500/10 to-transparent',
+        iconContainerClassName: 'bg-sky-500/10 text-sky-700',
+      },
+      {
+        key: 'active',
+        title: t('kpis.active'),
+        value: activeCount,
+        description: t('kpis.onPageSub'),
+        icon: CircleCheckBig,
+        accentClassName: 'from-emerald-500/20 via-teal-500/10 to-transparent',
+        iconContainerClassName: 'bg-emerald-500/10 text-emerald-700',
+      },
+      {
+        key: 'draft',
+        title: t('kpis.draft'),
+        value: draftCount,
+        description: t('kpis.onPageSub'),
+        icon: CircleDashed,
+        accentClassName: 'from-amber-500/20 via-yellow-500/10 to-transparent',
+        iconContainerClassName: 'bg-amber-500/10 text-amber-700',
+      },
+      {
+        key: 'inactive',
+        title: t('kpis.inactive'),
+        value: inactiveCount,
+        description: t('kpis.onPageSub'),
+        icon: CircleOff,
+        accentClassName: 'from-slate-500/20 via-zinc-500/10 to-transparent',
+        iconContainerClassName: 'bg-slate-500/10 text-slate-700',
+      },
+    ];
+  }, [t, templates, totalItems]);
+
+  function resetForm() {
+    form.reset({
+      name: '',
+      description: '',
+      status: 'draft',
+    });
+  }
+
+  function resetEditForm() {
+    editForm.reset({
+      name: '',
+      description: '',
+    });
+    setEditingTemplateId(null);
+  }
+
+  function clearFilters() {
+    setSearchInput('');
+    setSearchQuery('');
+    setStatusFilter('all');
+    setCurrentPage(1);
+  }
+
+  function openCreateSheet() {
+    resetForm();
+    setIsSheetOpen(true);
+  }
+
+  function openEditSheet(template: CertificateTemplate) {
+    setEditingTemplateId(template.id);
+    editForm.reset({
+      name: template.name,
+      description: template.description ?? '',
+    });
+    setIsEditSheetOpen(true);
+  }
+
+  function formatDate(value: string | null) {
+    if (!value) {
+      return '-';
+    }
+
+    const parsed = new Date(value);
+    if (Number.isNaN(parsed.getTime())) {
+      return '-';
+    }
+
+    return dateFormatter.format(parsed);
+  }
+
+  function renderStatusBadge(status: TemplateStatus) {
+    if (status === 'active') {
+      return <Badge variant="default">{t('status.active')}</Badge>;
+    }
+
+    if (status === 'inactive') {
+      return <Badge variant="outline">{t('status.inactive')}</Badge>;
+    }
+
+    return <Badge variant="secondary">{t('status.draft')}</Badge>;
+  }
+
+  async function onSubmit(values: CreateTemplateFormValues) {
+    const name = values.name.trim();
+
+    if (!name) {
+      toast.error(t('sheet.validation.required'));
+      return;
+    }
+
+    const initialTemplate = createDefaultTemplate();
+    initialTemplate.name = name;
+
+    const payload: CreateCertificateTemplatePayload = {
+      name,
+      description: values.description?.trim() || undefined,
+      status: values.status,
+      templateContent: JSON.stringify(initialTemplate),
+    };
+
+    try {
+      setIsCreating(true);
+
+      const response = await request<CertificateTemplate>({
+        url: '/lms/certificates/templates',
+        method: 'POST',
+        data: payload,
+      });
+
+      setIsSheetOpen(false);
+      resetForm();
+      toast.success(t('sheet.success'));
+
+      const createdId = response.data?.id;
+      if (createdId) {
+        router.push(`/lms/certificates/models/editor?templateId=${createdId}`);
+      }
+    } catch {
+      toast.error(t('sheet.error'));
+    } finally {
+      setIsCreating(false);
+    }
+  }
+
+  async function onSubmitEdit(values: UpdateTemplateFormValues) {
+    if (!editingTemplateId) {
+      return;
+    }
+
+    const name = values.name.trim();
+    if (!name) {
+      toast.error(t('editSheet.validation.required'));
+      return;
+    }
+
+    const payload: UpdateCertificateTemplatePayload = {
+      name,
+      description: values.description?.trim() || undefined,
+    };
+
+    try {
+      setIsUpdating(true);
+      await request({
+        url: `/lms/certificates/templates/${editingTemplateId}`,
+        method: 'PATCH',
+        data: payload,
+      });
+
+      setIsEditSheetOpen(false);
+      resetEditForm();
+      toast.success(t('editSheet.success'));
+      await refetch();
+    } catch {
+      toast.error(t('editSheet.error'));
+    } finally {
+      setIsUpdating(false);
+    }
+  }
+
+  async function onDeleteTemplate(template: CertificateTemplate) {
+    setTemplateToDelete(template);
+    setDeleteDialogOpen(true);
+  }
+
+  async function confirmDeleteTemplate() {
+    if (!templateToDelete) {
+      return;
+    }
+
+    try {
+      setDeletingTemplateId(templateToDelete.id);
+      await request({
+        url: `/lms/certificates/templates/${templateToDelete.id}`,
+        method: 'DELETE',
+      });
+      toast.success(t('cards.actions.deleteSuccess'));
+      setDeleteDialogOpen(false);
+      setTemplateToDelete(null);
+      await refetch();
+    } catch {
+      toast.error(t('cards.actions.deleteError'));
+    } finally {
+      setDeletingTemplateId(null);
+    }
+  }
+
+  const { locales } = useApp();
+
+  const handleNewModel = (): void => {
+    const nextLocaleData: Record<string, { name: string }> = {};
+    locales.forEach((locale: Locale) => {
+      nextLocaleData[locale.code] = {
+        name: '',
+      };
+    });
+    void nextLocaleData;
+    openCreateSheet();
+  };
+
+  return (
+    <Page>
+      <PageHeader
+        title={t('title')}
+        description={t('description')}
+        breadcrumbs={[
+          { label: t('breadcrumbs.home'), href: '/' },
+          { label: t('breadcrumbs.certificates') },
+          { label: t('breadcrumbs.models') },
+        ]}
+        actions={[
+          {
+            label: t('actions.newTemplate'),
+            onClick: () => handleNewModel(),
+            variant: 'default',
+          },
+        ]}
+      />
+
+      <div className="space-y-6">
+        <KpiCardsGrid items={stats} columns={4} />
+
+        <div className="space-y-2">
+          <SearchBar
+            searchQuery={searchInput}
+            onSearchChange={setSearchInput}
+            onSearch={() => setSearchQuery(searchInput.trim())}
+            placeholder={t('filters.searchPlaceholder')}
+            controls={[
+              {
+                id: 'status-filter',
+                type: 'select',
+                value: statusFilter,
+                onChange: (value) => setStatusFilter(value as StatusFilter),
+                placeholder: t('filters.status'),
+                options: [
+                  { value: 'all', label: t('filters.allStatuses') },
+                  { value: 'draft', label: t('status.draft') },
+                  { value: 'active', label: t('status.active') },
+                  { value: 'inactive', label: t('status.inactive') },
+                ],
+              },
+            ]}
+          />
+
+          <div className="flex items-center justify-between gap-3">
+            <p className="text-sm text-muted-foreground">
+              {totalItems}{' '}
+              {totalItems === 1 ? t('results.single') : t('results.plural')}
+            </p>
+            <div className="flex items-center gap-2">
+              {hasActiveFilters ? (
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="sm"
+                  onClick={clearFilters}
+                >
+                  {t('filters.clear')}
+                </Button>
+              ) : null}
+
+              {isRefreshing ? (
+                <Loader2 className="size-4 animate-spin text-muted-foreground" />
+              ) : null}
+            </div>
+          </div>
+        </div>
+
+        {loading ? (
+          <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+            {Array.from({ length: 6 }).map((_, index) => (
+              <Card
+                key={index}
+                className="overflow-hidden border-border/70 py-0"
+              >
+                <div className="h-1 w-full bg-linear-to-r from-slate-300/70 via-slate-200 to-transparent" />
+                <CardContent className="space-y-4 p-5">
+                  <div className="flex items-center gap-2">
+                    <Skeleton className="h-6 w-24 rounded-full" />
+                    <Skeleton className="h-6 w-20 rounded-full" />
+                  </div>
+                  <div>
+                    <Skeleton className="mb-2 h-5 w-3/4" />
+                    <Skeleton className="h-4 w-1/2" />
+                  </div>
+                  <div className="grid grid-cols-2 gap-3">
+                    <Skeleton className="h-14 w-full rounded-xl" />
+                    <Skeleton className="h-14 w-full rounded-xl" />
+                  </div>
+                  <Skeleton className="h-9 w-36 rounded-md" />
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        ) : totalItems === 0 ? (
+          <EmptyState
+            icon={<Files className="size-12 text-muted-foreground/40" />}
+            title={t('empty.title')}
+            description={t('empty.description')}
+            actionLabel={t('empty.action')}
+            actionIcon={<FilePlus2 className="mr-2 size-4" />}
+            onAction={openCreateSheet}
+            className="py-20"
+          />
+        ) : (
+          <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+            {templates.map((template) => (
+              <Card
+                key={template.id}
+                className="overflow-hidden border-border/70 py-0 shadow-sm transition-shadow duration-300 hover:shadow-md"
+              >
+                <div className="h-1 w-full bg-linear-to-r from-sky-400/70 via-cyan-300/50 to-transparent" />
+                <CardContent className="space-y-4 p-5">
+                  <div className="flex items-start justify-between gap-2">
+                    {renderStatusBadge(template.status)}
+                    <div className="flex items-center gap-1">
+                      <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                          <Button
+                            type="button"
+                            variant="ghost"
+                            size="icon"
+                            className="size-8"
+                            aria-label={t('cards.actions.menuLabel')}
+                          >
+                            <MoreHorizontal className="size-4" />
+                          </Button>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent align="end" className="w-48">
+                          <DropdownMenuItem
+                            onClick={() => openEditSheet(template)}
+                          >
+                            <Pencil className="mr-2 size-4" />
+                            {t('cards.actions.editTemplate')}
+                          </DropdownMenuItem>
+                          <DropdownMenuSeparator />
+                          <DropdownMenuItem
+                            className="text-destructive focus:text-destructive"
+                            onClick={() => onDeleteTemplate(template)}
+                            disabled={deletingTemplateId === template.id}
+                          >
+                            <Trash2 className="mr-2 size-4" />
+                            {t('cards.actions.deleteTemplate')}
+                          </DropdownMenuItem>
+                        </DropdownMenuContent>
+                      </DropdownMenu>
+                    </div>
+                  </div>
+
+                  <div className="space-y-1">
+                    <h3 className="line-clamp-2 text-base font-semibold leading-snug text-foreground">
+                      {template.name}
+                    </h3>
+                    <p className="line-clamp-1 font-mono text-xs text-muted-foreground">
+                      {template.slug}
+                    </p>
+                    <p className="line-clamp-1 text-sm text-muted-foreground">
+                      {template.description || t('cards.noDescription')}
+                    </p>
+                  </div>
+
+                  <div className="grid grid-cols-2 gap-3">
+                    <div className="rounded-xl border bg-background p-3">
+                      <p className="mb-1 text-xs text-muted-foreground">
+                        {t('cards.status')}
+                      </p>
+                      <p className="text-sm font-medium text-foreground">
+                        {t(`status.${template.status}`)}
+                      </p>
+                    </div>
+                    <div className="rounded-xl border bg-background p-3">
+                      <p className="mb-1 text-xs text-muted-foreground">
+                        {t('cards.updatedAt')}
+                      </p>
+                      <p className="text-sm font-medium text-foreground">
+                        {formatDate(resolveUpdatedAt(template))}
+                      </p>
+                    </div>
+                  </div>
+
+                  <Button
+                    type="button"
+                    variant="outline"
+                    size="sm"
+                    className="gap-2 w-full"
+                    onClick={() =>
+                      router.push(
+                        `/lms/certificates/models/editor?templateId=${template.id}`
+                      )
+                    }
+                  >
+                    <FileEdit className="size-4" />
+                    {t('cards.actions.editTemplate')}
+                  </Button>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        )}
+
+        {!loading && totalItems > 0 ? (
+          <PaginationFooter
+            currentPage={currentPage}
+            pageSize={pageSize}
+            totalItems={totalItems}
+            onPageChange={setCurrentPage}
+            onPageSizeChange={(value) => {
+              setPageSize(value);
+              setCurrentPage(1);
+            }}
+            pageSizeOptions={PAGE_SIZES}
+          />
+        ) : null}
+      </div>
+
+      <Sheet open={isSheetOpen} onOpenChange={setIsSheetOpen}>
+        <SheetContent
+          side="right"
+          className="flex w-full flex-col sm:max-w-lg overflow-y-auto"
+        >
+          <SheetHeader>
+            <SheetTitle>{t('sheet.title')}</SheetTitle>
+            <SheetDescription>{t('sheet.description')}</SheetDescription>
+          </SheetHeader>
+
+          <form
+            className="space-y-4 p-4"
+            onSubmit={form.handleSubmit(onSubmit)}
+            noValidate
+          >
+            <div className="space-y-2">
+              <label className="text-sm font-medium" htmlFor="template-name">
+                {t('sheet.fields.name')}
+              </label>
+              <Input
+                id="template-name"
+                className="mt-1"
+                {...form.register('name')}
+                placeholder={t('sheet.placeholders.name')}
+              />
+            </div>
+
+            <div className="space-y-2">
+              <label
+                className="text-sm font-medium"
+                htmlFor="template-description"
+              >
+                {t('sheet.fields.description')}
+              </label>
+              <Textarea
+                id="template-description"
+                className="mt-1"
+                {...form.register('description')}
+                rows={4}
+                placeholder={t('sheet.placeholders.description')}
+              />
+            </div>
+
+            <div className="space-y-2">
+              <p className="text-sm font-medium">{t('sheet.fields.status')}</p>
+              <Controller
+                name="status"
+                control={form.control}
+                render={({ field }) => (
+                  <Select value={field.value} onValueChange={field.onChange}>
+                    <SelectTrigger className="w-full">
+                      <SelectValue placeholder={t('sheet.fields.status')} />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="draft">{t('status.draft')}</SelectItem>
+                      <SelectItem value="active">
+                        {t('status.active')}
+                      </SelectItem>
+                      <SelectItem value="inactive">
+                        {t('status.inactive')}
+                      </SelectItem>
+                    </SelectContent>
+                  </Select>
+                )}
+              />
+            </div>
+
+            {form.formState.errors.name?.message ? (
+              <p className="text-sm text-destructive">
+                {form.formState.errors.name.message}
+              </p>
+            ) : null}
+
+            <SheetFooter className="px-0">
+              <Button type="submit" className="gap-2" disabled={isCreating}>
+                {isCreating ? (
+                  <Loader2 className="size-4 animate-spin" />
+                ) : (
+                  <FilePlus2 className="size-4" />
+                )}
+                {t('sheet.submit')}
+              </Button>
+            </SheetFooter>
+          </form>
+        </SheetContent>
+      </Sheet>
+
+      <Sheet
+        open={isEditSheetOpen}
+        onOpenChange={(open) => {
+          setIsEditSheetOpen(open);
+          if (!open) {
+            resetEditForm();
+          }
+        }}
+      >
+        <SheetContent className="sm:max-w-xl">
+          <SheetHeader>
+            <SheetTitle>{t('editSheet.title')}</SheetTitle>
+            <SheetDescription>{t('editSheet.description')}</SheetDescription>
+          </SheetHeader>
+
+          <form
+            className="space-y-4 p-4"
+            onSubmit={editForm.handleSubmit(onSubmitEdit)}
+            noValidate
+          >
+            <div className="space-y-2">
+              <label
+                className="text-sm font-medium"
+                htmlFor="edit-template-name"
+              >
+                {t('editSheet.fields.name')}
+              </label>
+              <Input
+                id="edit-template-name"
+                className="mt-1"
+                {...editForm.register('name')}
+                placeholder={t('editSheet.placeholders.name')}
+              />
+            </div>
+
+            <div className="space-y-2">
+              <label
+                className="text-sm font-medium"
+                htmlFor="edit-template-description"
+              >
+                {t('editSheet.fields.description')}
+              </label>
+              <Textarea
+                id="edit-template-description"
+                className="mt-1"
+                {...editForm.register('description')}
+                rows={4}
+                placeholder={t('editSheet.placeholders.description')}
+              />
+            </div>
+
+            {editForm.formState.errors.name?.message ? (
+              <p className="text-sm text-destructive">
+                {editForm.formState.errors.name.message}
+              </p>
+            ) : null}
+
+            <SheetFooter className="px-0">
+              <Button type="submit" className="gap-2" disabled={isUpdating}>
+                {isUpdating ? (
+                  <Loader2 className="size-4 animate-spin" />
+                ) : (
+                  <Pencil className="size-4" />
+                )}
+                {t('editSheet.submit')}
+              </Button>
+            </SheetFooter>
+          </form>
+        </SheetContent>
+      </Sheet>
+
+      <Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
+        <DialogContent className="max-w-3xl">
+          <DialogHeader>
+            <DialogTitle className="flex items-center gap-2">
+              <AlertTriangle className="size-5 text-destructive" />
+              {t('deleteDialog.title')}
+            </DialogTitle>
+            <DialogDescription>
+              {t('deleteDialog.description')}{' '}
+              <strong>{templateToDelete?.name}</strong>?
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter className="gap-2">
+            <Button
+              variant="outline"
+              onClick={() => {
+                setDeleteDialogOpen(false);
+                setTemplateToDelete(null);
+              }}
+            >
+              {t('deleteDialog.actions.cancel')}
+            </Button>
+            <Button
+              variant="destructive"
+              onClick={confirmDeleteTemplate}
+              className="gap-2"
+              disabled={deletingTemplateId === templateToDelete?.id}
+            >
+              <Trash2 className="size-4" /> {t('deleteDialog.actions.delete')}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </Page>
+  );
+}