@hed-hog/lms 0.0.349 → 0.0.350

package/hedhog/frontend/app/achievements/page.tsx.ejs

@@ -0,0 +1,844 @@
+'use client';
+
+import {
+  EmptyState,
+  Page,
+  PageHeader,
+  PaginationFooter,
+  SearchBar,
+} from '@/components/entity-list';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Checkbox } from '@/components/ui/checkbox';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import { Skeleton } from '@/components/ui/skeleton';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { Textarea } from '@/components/ui/textarea';
+import { usePersistedPageSize } from '@/hooks/use-persisted-page-size';
+import { cn } from '@/lib/utils';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import { zodResolver } from '@hookform/resolvers/zod';
+import {
+  ImageIcon,
+  Loader2,
+  MoreHorizontal,
+  Pencil,
+  Plus,
+  Trophy,
+  Trash2,
+  Upload,
+  X,
+} from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import Image from 'next/image';
+import { useEffect, useRef, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { toast } from 'sonner';
+import * as z from 'zod';
+
+const ACHIEVEMENT_TYPE_VALUES = [
+  'course_completion',
+  'learning_path_completion',
+  'exam_approval',
+  'attendance',
+  'engagement',
+  'custom',
+] as const;
+
+type AchievementType = (typeof ACHIEVEMENT_TYPE_VALUES)[number];
+
+type Achievement = {
+  id: number;
+  name: string;
+  description?: string | null;
+  iconFileId?: number | null;
+  mainImageFileId?: number | null;
+  type: AchievementType;
+  bitCodesValue: number;
+  canReceiveMultipleTimes: boolean;
+};
+
+type AchievementPaginatedResult = {
+  data: Achievement[];
+  total: number;
+  page: number;
+  pageSize: number;
+  lastPage?: number;
+};
+
+const achievementSchema = (t: ReturnType<typeof useTranslations>) =>
+  z.object({
+    name: z
+      .string()
+      .min(1, t('form.validation.required'))
+      .max(255, t('form.validation.max255')),
+    description: z.string().optional(),
+    iconFileId: z.number().nullable(),
+    mainImageFileId: z.number().nullable(),
+    type: z.enum(ACHIEVEMENT_TYPE_VALUES),
+    bitCodesValue: z.coerce
+      .number()
+      .int(t('form.validation.integer'))
+      .min(0, t('form.validation.nonNegative')),
+    canReceiveMultipleTimes: z.boolean(),
+  });
+
+type AchievementFormValues = z.infer<ReturnType<typeof achievementSchema>>;
+
+function getFileUrl(fileId?: number | null) {
+  return fileId && process.env.NEXT_PUBLIC_API_BASE_URL
+    ? `${process.env.NEXT_PUBLIC_API_BASE_URL}/file/open/${fileId}`
+    : null;
+}
+
+function ImageUploadField({
+  label,
+  description,
+  fileId,
+  previewUrl,
+  uploading,
+  uploadLabel,
+  replaceLabel,
+  removeLabel,
+  onPick,
+  onRemove,
+  inputRef,
+}: {
+  label: string;
+  description: string;
+  fileId?: number | null;
+  previewUrl: string | null;
+  uploading: boolean;
+  uploadLabel: string;
+  replaceLabel: string;
+  removeLabel: string;
+  onPick: (event: React.ChangeEvent<HTMLInputElement>) => Promise<void>;
+  onRemove: () => void;
+  inputRef: React.RefObject<HTMLInputElement | null>;
+}) {
+  return (
+    <div className="space-y-2">
+      <FormLabel>{label}</FormLabel>
+      <div className="flex items-start gap-4">
+        {previewUrl ? (
+          <Image
+            src={previewUrl}
+            alt={label}
+            width={64}
+            height={64}
+            unoptimized
+            className="size-16 shrink-0 rounded-lg border object-cover"
+          />
+        ) : (
+          <div className="flex size-16 shrink-0 items-center justify-center rounded-lg border border-dashed bg-muted/40">
+            <ImageIcon className="size-6 text-muted-foreground/50" />
+          </div>
+        )}
+        <div className="flex flex-col gap-2">
+          <input
+            ref={inputRef}
+            type="file"
+            accept="image/*"
+            className="hidden"
+            onChange={(event) => void onPick(event)}
+          />
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            disabled={uploading}
+            onClick={() => inputRef.current?.click()}
+            className="gap-2"
+          >
+            {uploading ? (
+              <Loader2 className="size-3.5 animate-spin" />
+            ) : (
+              <Upload className="size-3.5" />
+            )}
+            {fileId ? replaceLabel : uploadLabel}
+          </Button>
+          {fileId ? (
+            <Button
+              type="button"
+              variant="ghost"
+              size="sm"
+              onClick={onRemove}
+              className="gap-2 text-destructive hover:text-destructive"
+            >
+              <X className="size-3.5" />
+              {removeLabel}
+            </Button>
+          ) : null}
+        </div>
+      </div>
+      <p className="text-xs text-muted-foreground">{description}</p>
+    </div>
+  );
+}
+
+function AchievementFormSheet({
+  open,
+  onOpenChange,
+  achievementToEdit,
+  onSaved,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  achievementToEdit: Achievement | null;
+  onSaved: () => void;
+}) {
+  const { request } = useApp();
+  const t = useTranslations('lms.AchievementsPage');
+  const [isSaving, setIsSaving] = useState(false);
+  const [iconUploading, setIconUploading] = useState(false);
+  const [mainImageUploading, setMainImageUploading] = useState(false);
+  const [iconPreviewUrl, setIconPreviewUrl] = useState<string | null>(null);
+  const [mainImagePreviewUrl, setMainImagePreviewUrl] = useState<string | null>(
+    null
+  );
+  const iconInputRef = useRef<HTMLInputElement>(null);
+  const mainImageInputRef = useRef<HTMLInputElement>(null);
+
+  const form = useForm<AchievementFormValues>({
+    resolver: zodResolver(achievementSchema(t)),
+    defaultValues: {
+      name: '',
+      description: '',
+      iconFileId: null,
+      mainImageFileId: null,
+      type: 'custom',
+      bitCodesValue: 0,
+      canReceiveMultipleTimes: false,
+    },
+  });
+
+  useEffect(() => {
+    if (!open) return;
+
+    form.reset({
+      name: achievementToEdit?.name ?? '',
+      description: achievementToEdit?.description ?? '',
+      iconFileId: achievementToEdit?.iconFileId ?? null,
+      mainImageFileId: achievementToEdit?.mainImageFileId ?? null,
+      type: achievementToEdit?.type ?? 'custom',
+      bitCodesValue: achievementToEdit?.bitCodesValue ?? 0,
+      canReceiveMultipleTimes:
+        achievementToEdit?.canReceiveMultipleTimes ?? false,
+    });
+
+    setIconPreviewUrl(getFileUrl(achievementToEdit?.iconFileId) ?? null);
+    setMainImagePreviewUrl(getFileUrl(achievementToEdit?.mainImageFileId) ?? null);
+  }, [achievementToEdit, form, open]);
+
+  async function uploadImage(file: File) {
+    const formData = new FormData();
+    formData.append('file', file);
+    const uploadRes = await request<{ id?: number }>({
+      url: '/file',
+      method: 'POST',
+      data: formData,
+      headers: { 'Content-Type': 'multipart/form-data' },
+    });
+    const fileId = uploadRes?.data?.id;
+    if (!fileId) throw new Error('invalid file id');
+    const openRes = await request<{ url?: string }>({
+      url: `/file/open/${fileId}`,
+      method: 'PUT',
+    });
+    return {
+      fileId,
+      url: openRes?.data?.url ?? getFileUrl(fileId),
+    };
+  }
+
+  async function handleIconPick(event: React.ChangeEvent<HTMLInputElement>) {
+    const file = event.target.files?.[0];
+    if (!file) return;
+    setIconUploading(true);
+    try {
+      const uploaded = await uploadImage(file);
+      form.setValue('iconFileId', uploaded.fileId, { shouldDirty: true });
+      setIconPreviewUrl(uploaded.url);
+    } catch {
+      toast.error(t('messages.uploadError'));
+    } finally {
+      setIconUploading(false);
+      if (iconInputRef.current) iconInputRef.current.value = '';
+    }
+  }
+
+  async function handleMainImagePick(
+    event: React.ChangeEvent<HTMLInputElement>
+  ) {
+    const file = event.target.files?.[0];
+    if (!file) return;
+    setMainImageUploading(true);
+    try {
+      const uploaded = await uploadImage(file);
+      form.setValue('mainImageFileId', uploaded.fileId, { shouldDirty: true });
+      setMainImagePreviewUrl(uploaded.url);
+    } catch {
+      toast.error(t('messages.uploadError'));
+    } finally {
+      setMainImageUploading(false);
+      if (mainImageInputRef.current) mainImageInputRef.current.value = '';
+    }
+  }
+
+  const onSubmit = async (values: AchievementFormValues) => {
+    try {
+      setIsSaving(true);
+
+      const payload = {
+        name: values.name,
+        description: values.description?.trim() || null,
+        iconFileId: values.iconFileId,
+        mainImageFileId: values.mainImageFileId,
+        type: values.type,
+        bitCodesValue: values.bitCodesValue,
+        canReceiveMultipleTimes: values.canReceiveMultipleTimes,
+      };
+
+      if (achievementToEdit) {
+        await request({
+          url: `/lms/achievements/${achievementToEdit.id}`,
+          method: 'PATCH',
+          data: payload,
+        });
+        toast.success(t('messages.updateSuccess'));
+      } else {
+        await request({
+          url: '/lms/achievements',
+          method: 'POST',
+          data: payload,
+        });
+        toast.success(t('messages.createSuccess'));
+      }
+
+      onSaved();
+      onOpenChange(false);
+    } catch {
+      toast.error(t('messages.saveError'));
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent className="w-full overflow-y-auto sm:max-w-2xl">
+        <SheetHeader>
+          <SheetTitle>
+            {achievementToEdit ? t('sheet.editTitle') : t('sheet.createTitle')}
+          </SheetTitle>
+        </SheetHeader>
+
+        <Form {...form}>
+          <form
+            onSubmit={form.handleSubmit(onSubmit)}
+            className="flex flex-col gap-5 px-4 py-4"
+          >
+            <FormField
+              control={form.control}
+              name="name"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>{t('form.name')}</FormLabel>
+                  <FormControl>
+                    <Input placeholder={t('form.namePlaceholder')} {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="description"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>{t('form.description')}</FormLabel>
+                  <FormControl>
+                    <Textarea
+                      rows={4}
+                      placeholder={t('form.descriptionPlaceholder')}
+                      {...field}
+                      value={field.value ?? ''}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <div className="grid gap-5 md:grid-cols-2">
+              <ImageUploadField
+                label={t('form.iconImage')}
+                description={t('form.iconImageDescription')}
+                fileId={form.watch('iconFileId')}
+                previewUrl={iconPreviewUrl}
+                uploading={iconUploading}
+                uploadLabel={t('form.imageUpload')}
+                replaceLabel={t('form.imageReplace')}
+                removeLabel={t('form.imageRemove')}
+                onPick={handleIconPick}
+                onRemove={() => {
+                  form.setValue('iconFileId', null, { shouldDirty: true });
+                  setIconPreviewUrl(null);
+                }}
+                inputRef={iconInputRef}
+              />
+
+              <ImageUploadField
+                label={t('form.mainImage')}
+                description={t('form.mainImageDescription')}
+                fileId={form.watch('mainImageFileId')}
+                previewUrl={mainImagePreviewUrl}
+                uploading={mainImageUploading}
+                uploadLabel={t('form.imageUpload')}
+                replaceLabel={t('form.imageReplace')}
+                removeLabel={t('form.imageRemove')}
+                onPick={handleMainImagePick}
+                onRemove={() => {
+                  form.setValue('mainImageFileId', null, { shouldDirty: true });
+                  setMainImagePreviewUrl(null);
+                }}
+                inputRef={mainImageInputRef}
+              />
+            </div>
+
+            <div className="grid gap-4 md:grid-cols-2">
+              <FormField
+                control={form.control}
+                name="type"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('form.type')}</FormLabel>
+                    <Select onValueChange={field.onChange} value={field.value}>
+                      <FormControl>
+                        <SelectTrigger className="w-full">
+                          <SelectValue
+                            placeholder={t('form.typePlaceholder')}
+                          />
+                        </SelectTrigger>
+                      </FormControl>
+                      <SelectContent>
+                        {ACHIEVEMENT_TYPE_VALUES.map((type) => (
+                          <SelectItem key={type} value={type}>
+                            {t(`types.${type}`)}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="bitCodesValue"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('form.bitCodesValue')}</FormLabel>
+                    <FormControl>
+                      <Input type="number" min="0" step="1" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+
+            <FormField
+              control={form.control}
+              name="canReceiveMultipleTimes"
+              render={({ field }) => (
+                <FormItem className="flex flex-row items-start gap-3 rounded-lg border p-4">
+                  <FormControl>
+                    <Checkbox
+                      checked={field.value}
+                      onCheckedChange={(checked) => field.onChange(Boolean(checked))}
+                    />
+                  </FormControl>
+                  <div className="space-y-1">
+                    <FormLabel className="cursor-pointer">
+                      {t('form.canReceiveMultipleTimes')}
+                    </FormLabel>
+                    <p className="text-sm text-muted-foreground">
+                      {t('form.canReceiveMultipleTimesDescription')}
+                    </p>
+                  </div>
+                </FormItem>
+              )}
+            />
+
+            <div className="flex justify-end gap-2 pt-2">
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => onOpenChange(false)}
+                disabled={isSaving}
+              >
+                {t('actions.cancel')}
+              </Button>
+              <Button type="submit" disabled={isSaving}>
+                {isSaving ? t('actions.saving') : t('actions.save')}
+              </Button>
+            </div>
+          </form>
+        </Form>
+      </SheetContent>
+    </Sheet>
+  );
+}
+
+export default function AchievementsPage() {
+  const { request } = useApp();
+  const t = useTranslations('lms.AchievementsPage');
+
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = usePersistedPageSize({
+    storageKey: 'pagination:lms-achievements:pageSize',
+    defaultValue: 12,
+    allowedValues: [12, 24, 48],
+  });
+  const [searchInput, setSearchInput] = useState('');
+  const [debouncedSearch, setDebouncedSearch] = useState('');
+  const [sheetOpen, setSheetOpen] = useState(false);
+  const [achievementToEdit, setAchievementToEdit] =
+    useState<Achievement | null>(null);
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [achievementToDelete, setAchievementToDelete] =
+    useState<Achievement | null>(null);
+  const [isDeleting, setIsDeleting] = useState(false);
+
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      setDebouncedSearch(searchInput.trim());
+      setPage(1);
+    }, 300);
+    return () => clearTimeout(timeout);
+  }, [searchInput]);
+
+  const {
+    data: paginate = {
+      data: [],
+      total: 0,
+      page: 1,
+      pageSize,
+      lastPage: 1,
+    },
+    isLoading,
+    refetch,
+  } = useQuery<AchievementPaginatedResult>({
+    queryKey: ['lms-achievements', page, pageSize, debouncedSearch],
+    queryFn: async () => {
+      const params = new URLSearchParams({
+        page: String(page),
+        pageSize: String(pageSize),
+      });
+      if (debouncedSearch) params.set('search', debouncedSearch);
+
+      const response = await request<AchievementPaginatedResult>({
+        url: `/lms/achievements?${params.toString()}`,
+        method: 'GET',
+      });
+      return response.data;
+    },
+    placeholderData: (prev) =>
+      prev ?? { data: [], total: 0, page: 1, pageSize, lastPage: 1 },
+  });
+
+  const totalPages = Math.max(
+    1,
+    (paginate.lastPage ?? Math.ceil((paginate.total || 0) / pageSize)) || 1
+  );
+
+  useEffect(() => {
+    if (page > totalPages) setPage(totalPages);
+  }, [page, totalPages]);
+
+  const handleDeleteConfirm = async () => {
+    if (!achievementToDelete) return;
+    try {
+      setIsDeleting(true);
+      await request({
+        url: `/lms/achievements/${achievementToDelete.id}`,
+        method: 'DELETE',
+      });
+      toast.success(t('messages.deleteSuccess'));
+      setDeleteDialogOpen(false);
+      setAchievementToDelete(null);
+      await refetch();
+    } catch {
+      toast.error(t('messages.deleteError'));
+    } finally {
+      setIsDeleting(false);
+    }
+  };
+
+  return (
+    <Page>
+      <PageHeader
+        breadcrumbs={[
+          { label: t('breadcrumbs.home'), href: '/' },
+          { label: t('breadcrumbs.lms'), href: '/lms' },
+          { label: t('breadcrumbs.current') },
+        ]}
+        title={t('title')}
+        description={t('description')}
+        actions={[
+          {
+            label: t('actions.create'),
+            onClick: () => {
+              setAchievementToEdit(null);
+              setSheetOpen(true);
+            },
+            icon: <Plus className="h-4 w-4" />,
+          },
+        ]}
+      />
+
+      <SearchBar
+        searchQuery={searchInput}
+        onSearchChange={(value) => setSearchInput(value)}
+        onSearch={() => setPage(1)}
+        placeholder={t('filters.searchPlaceholder')}
+      />
+
+      {isLoading ? (
+        <div className="space-y-3 p-4">
+          {Array.from({ length: 5 }).map((_, index) => (
+            <Skeleton key={index} className="h-16 w-full" />
+          ))}
+        </div>
+      ) : paginate.data.length === 0 ? (
+        <EmptyState
+          icon={<Trophy className="h-12 w-12" />}
+          title={t('empty.title')}
+          description={t('empty.description')}
+          actionLabel={t('actions.create')}
+          actionIcon={<Plus className="mr-2 h-4 w-4" />}
+          onAction={() => {
+            setAchievementToEdit(null);
+            setSheetOpen(true);
+          }}
+        />
+      ) : (
+        <div className="overflow-x-auto">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>{t('table.name')}</TableHead>
+                <TableHead>{t('table.type')}</TableHead>
+                <TableHead>{t('table.bitCodesValue')}</TableHead>
+                <TableHead>{t('table.repeatable')}</TableHead>
+                <TableHead>{t('table.images')}</TableHead>
+                <TableHead className="w-10" />
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {paginate.data.map((achievement) => {
+                const iconUrl = getFileUrl(achievement.iconFileId);
+                const mainImageUrl = getFileUrl(achievement.mainImageFileId);
+
+                return (
+                <TableRow
+                  key={achievement.id}
+                  className="cursor-pointer"
+                  onDoubleClick={() => {
+                    setAchievementToEdit(achievement);
+                    setSheetOpen(true);
+                  }}
+                >
+                  <TableCell>
+                    <div className="min-w-0">
+                      <div className="truncate font-medium">
+                        {achievement.name}
+                      </div>
+                      {achievement.description ? (
+                        <div className="truncate text-xs text-muted-foreground">
+                          {achievement.description}
+                        </div>
+                      ) : null}
+                    </div>
+                  </TableCell>
+                  <TableCell>
+                    <Badge variant="outline">{t(`types.${achievement.type}`)}</Badge>
+                  </TableCell>
+                  <TableCell>{achievement.bitCodesValue}</TableCell>
+                  <TableCell>
+                    <span
+                      className={cn(
+                        'text-sm font-medium',
+                        achievement.canReceiveMultipleTimes
+                          ? 'text-emerald-600'
+                          : 'text-muted-foreground'
+                      )}
+                    >
+                      {achievement.canReceiveMultipleTimes
+                        ? t('repeatable.yes')
+                        : t('repeatable.no')}
+                    </span>
+                  </TableCell>
+                  <TableCell>
+                    <div className="flex items-center gap-2">
+                      {iconUrl ? (
+                        <Image
+                          src={iconUrl}
+                          alt={achievement.name}
+                          width={32}
+                          height={32}
+                          unoptimized
+                          className="size-8 rounded-md border object-cover"
+                        />
+                      ) : (
+                        <div className="flex size-8 items-center justify-center rounded-md border border-dashed bg-muted/40">
+                          <ImageIcon className="size-4 text-muted-foreground/50" />
+                        </div>
+                      )}
+                      {mainImageUrl ? (
+                        <Image
+                          src={mainImageUrl}
+                          alt={achievement.name}
+                          width={48}
+                          height={32}
+                          unoptimized
+                          className="h-8 w-12 rounded-md border object-cover"
+                        />
+                      ) : (
+                        <div className="flex h-8 w-12 items-center justify-center rounded-md border border-dashed bg-muted/40">
+                          <ImageIcon className="size-4 text-muted-foreground/50" />
+                        </div>
+                      )}
+                    </div>
+                  </TableCell>
+                  <TableCell>
+                    <DropdownMenu>
+                      <DropdownMenuTrigger asChild>
+                        <Button variant="ghost" size="icon" className="h-8 w-8">
+                          <MoreHorizontal className="h-4 w-4" />
+                        </Button>
+                      </DropdownMenuTrigger>
+                      <DropdownMenuContent align="end">
+                        <DropdownMenuItem
+                          onClick={() => {
+                            setAchievementToEdit(achievement);
+                            setSheetOpen(true);
+                          }}
+                        >
+                          <Pencil className="mr-2 h-4 w-4" />
+                          {t('actions.edit')}
+                        </DropdownMenuItem>
+                        <DropdownMenuSeparator />
+                        <DropdownMenuItem
+                          className="text-red-600"
+                          onClick={() => {
+                            setAchievementToDelete(achievement);
+                            setDeleteDialogOpen(true);
+                          }}
+                        >
+                          <Trash2 className="mr-2 h-4 w-4" />
+                          {t('actions.delete')}
+                        </DropdownMenuItem>
+                      </DropdownMenuContent>
+                    </DropdownMenu>
+                  </TableCell>
+                </TableRow>
+                );
+              })}
+            </TableBody>
+          </Table>
+        </div>
+      )}
+
+      <PaginationFooter
+        currentPage={page}
+        pageSize={pageSize}
+        totalItems={paginate.total}
+        onPageChange={setPage}
+        onPageSizeChange={(nextPageSize) => {
+          setPageSize(nextPageSize);
+          setPage(1);
+        }}
+      />
+
+      <AchievementFormSheet
+        open={sheetOpen}
+        onOpenChange={setSheetOpen}
+        achievementToEdit={achievementToEdit}
+        onSaved={() => void refetch()}
+      />
+
+      <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>{t('deleteDialog.title')}</AlertDialogTitle>
+            <AlertDialogDescription>
+              {t('deleteDialog.description', {
+                name: achievementToDelete?.name ?? '',
+              })}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <div className="flex justify-end gap-2">
+            <AlertDialogCancel disabled={isDeleting}>
+              {t('actions.cancel')}
+            </AlertDialogCancel>
+            <AlertDialogAction
+              onClick={handleDeleteConfirm}
+              disabled={isDeleting}
+              className="bg-red-600 hover:bg-red-700"
+            >
+              {isDeleting ? t('actions.deleting') : t('actions.delete')}
+            </AlertDialogAction>
+          </div>
+        </AlertDialogContent>
+      </AlertDialog>
+    </Page>
+  );
+}