@hed-hog/lms 0.0.361 → 0.0.365

package/hedhog/frontend/app/xp/areas/page.tsx.ejs

@@ -0,0 +1,782 @@
+'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 {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { IconActionGroup } from '@/components/ui/icon-action-group';
+import { Input } from '@/components/ui/input';
+import { KpiCardsGrid } from '@/components/ui/kpi-cards-grid';
+import { ResizableSheetContent } from '@/components/ui/resizable-sheet-content';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Sheet, 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 {
+  CheckCircle2,
+  Layers,
+  Pencil,
+  Plus,
+  Trash2,
+  XCircle,
+} from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { toast } from 'sonner';
+import * as z from 'zod';
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+type XpArea = {
+  id: number;
+  slug: string;
+  status: 'active' | 'inactive';
+  sortOrder: number;
+  color: string | null;
+  iconSlug: string | null;
+  name: string;
+};
+
+type XpAreaDetail = {
+  id: number;
+  slug: string;
+  status: 'active' | 'inactive';
+  sortOrder: number;
+  color: string | null;
+  iconSlug: string | null;
+  translations: Record<string, { name: string; description: string | null }>;
+};
+
+type PaginatedResult<T> = {
+  data: T[];
+  total: number;
+  page: number;
+  pageSize: number;
+  lastPage?: number;
+};
+
+// ─── Zod schema ───────────────────────────────────────────────────────────────
+
+const createSchema = (t: ReturnType<typeof useTranslations>) =>
+  z.object({
+    slug: z
+      .string()
+      .min(1, t('form.validation.required'))
+      .max(100, t('form.validation.max100'))
+      .regex(/^[a-z0-9-]+$/, t('form.validation.slugPattern')),
+    namePt: z.string().min(1, t('form.validation.required')),
+    nameEn: z.string().min(1, t('form.validation.required')),
+    descriptionPt: z.string().optional(),
+    descriptionEn: z.string().optional(),
+    color: z.string().optional(),
+    iconSlug: z.string().max(100).optional(),
+    sortOrder: z.coerce.number().int().min(0).default(0),
+    status: z.enum(['active', 'inactive']),
+  });
+
+type AreaFormValues = z.infer<ReturnType<typeof createSchema>>;
+
+// ─── AreaFormSheet ─────────────────────────────────────────────────────────────
+
+interface AreaFormSheetProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  areaToEdit: XpArea | null;
+  onSaved: () => void;
+}
+
+function AreaFormSheet({
+  open,
+  onOpenChange,
+  areaToEdit,
+  onSaved,
+}: AreaFormSheetProps) {
+  const { request } = useApp();
+  const t = useTranslations('lms.XpAreasPage');
+  const [isSaving, setIsSaving] = useState(false);
+  const [isLoadingDetail, setIsLoadingDetail] = useState(false);
+
+  const form = useForm<AreaFormValues>({
+    resolver: zodResolver(createSchema(t)),
+    defaultValues: {
+      slug: '',
+      namePt: '',
+      nameEn: '',
+      descriptionPt: '',
+      descriptionEn: '',
+      color: '#3b82f6',
+      iconSlug: '',
+      sortOrder: 0,
+      status: 'active',
+    },
+  });
+
+  useEffect(() => {
+    if (!open) return;
+
+    if (areaToEdit) {
+      setIsLoadingDetail(true);
+      request<{ data: XpAreaDetail }>({
+        url: `/lms/xp/areas/${areaToEdit.id}`,
+        method: 'GET',
+      })
+        .then((res) => {
+          const d = res.data as unknown as XpAreaDetail;
+          form.reset({
+            slug: d.slug,
+            namePt: d.translations?.pt?.name ?? '',
+            nameEn: d.translations?.en?.name ?? '',
+            descriptionPt: d.translations?.pt?.description ?? '',
+            descriptionEn: d.translations?.en?.description ?? '',
+            color: d.color ?? '#3b82f6',
+            iconSlug: d.iconSlug ?? '',
+            sortOrder: d.sortOrder ?? 0,
+            status: d.status,
+          });
+        })
+        .catch(() => toast.error(t('messages.saveError')))
+        .finally(() => setIsLoadingDetail(false));
+    } else {
+      form.reset({
+        slug: '',
+        namePt: '',
+        nameEn: '',
+        descriptionPt: '',
+        descriptionEn: '',
+        color: '#3b82f6',
+        iconSlug: '',
+        sortOrder: 0,
+        status: 'active',
+      });
+    }
+  }, [open, areaToEdit]);
+
+  const onSubmit = async (values: AreaFormValues) => {
+    try {
+      setIsSaving(true);
+      const payload = {
+        slug: values.slug,
+        namePt: values.namePt,
+        nameEn: values.nameEn,
+        descriptionPt: values.descriptionPt || null,
+        descriptionEn: values.descriptionEn || null,
+        color: values.color || null,
+        iconSlug: values.iconSlug || null,
+        sortOrder: values.sortOrder,
+        status: values.status,
+      };
+
+      if (areaToEdit) {
+        await request({
+          url: `/lms/xp/areas/${areaToEdit.id}`,
+          method: 'PATCH',
+          data: payload,
+        });
+        toast.success(t('messages.updateSuccess'));
+      } else {
+        await request({
+          url: '/lms/xp/areas',
+          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}>
+      <ResizableSheetContent
+        sheetId="lms-xp-areas-form-sheet"
+        defaultWidth={620}
+        minWidth={420}
+        maxWidth={900}
+        className="overflow-y-auto"
+      >
+        <SheetHeader>
+          <SheetTitle>
+            {areaToEdit ? t('sheet.editTitle') : t('sheet.createTitle')}
+          </SheetTitle>
+        </SheetHeader>
+
+        {isLoadingDetail ? (
+          <div className="space-y-3 p-4">
+            {Array.from({ length: 5 }).map((_, i) => (
+              <Skeleton key={i} className="h-10 w-full" />
+            ))}
+          </div>
+        ) : (
+          <Form {...form}>
+            <form
+              onSubmit={form.handleSubmit(onSubmit)}
+              className="flex flex-col gap-4 px-4 py-4"
+            >
+              <div className="grid grid-cols-2 gap-4">
+                <FormField
+                  control={form.control}
+                  name="slug"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>{t('form.slug')}</FormLabel>
+                      <FormControl>
+                        <Input
+                          placeholder={t('form.slugPlaceholder')}
+                          {...field}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <FormField
+                  control={form.control}
+                  name="status"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>{t('form.status')}</FormLabel>
+                      <Select
+                        onValueChange={field.onChange}
+                        value={field.value}
+                      >
+                        <FormControl>
+                          <SelectTrigger className="w-full">
+                            <SelectValue
+                              placeholder={t('form.statusPlaceholder')}
+                            />
+                          </SelectTrigger>
+                        </FormControl>
+                        <SelectContent>
+                          <SelectItem value="active">
+                            {t('status.active')}
+                          </SelectItem>
+                          <SelectItem value="inactive">
+                            {t('status.inactive')}
+                          </SelectItem>
+                        </SelectContent>
+                      </Select>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              </div>
+
+              <div className="grid grid-cols-2 gap-4">
+                <FormField
+                  control={form.control}
+                  name="namePt"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>{t('form.namePt')}</FormLabel>
+                      <FormControl>
+                        <Input
+                          placeholder={t('form.namePtPlaceholder')}
+                          {...field}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <FormField
+                  control={form.control}
+                  name="nameEn"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>{t('form.nameEn')}</FormLabel>
+                      <FormControl>
+                        <Input
+                          placeholder={t('form.nameEnPlaceholder')}
+                          {...field}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              </div>
+
+              <div className="grid grid-cols-2 gap-4">
+                <FormField
+                  control={form.control}
+                  name="descriptionPt"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>{t('form.descriptionPt')}</FormLabel>
+                      <FormControl>
+                        <Textarea
+                          rows={3}
+                          placeholder={t('form.descriptionPtPlaceholder')}
+                          {...field}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <FormField
+                  control={form.control}
+                  name="descriptionEn"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>{t('form.descriptionEn')}</FormLabel>
+                      <FormControl>
+                        <Textarea
+                          rows={3}
+                          placeholder={t('form.descriptionEnPlaceholder')}
+                          {...field}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              </div>
+
+              <div className="grid grid-cols-2 gap-4">
+                <FormField
+                  control={form.control}
+                  name="color"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>{t('form.color')}</FormLabel>
+                      <FormControl>
+                        <div className="flex items-center gap-2">
+                          <input
+                            type="color"
+                            value={field.value || '#3b82f6'}
+                            onChange={(e) => field.onChange(e.target.value)}
+                            className="h-9 w-10 cursor-pointer rounded border p-0.5"
+                          />
+                          <Input
+                            placeholder="#3b82f6"
+                            {...field}
+                            className="flex-1"
+                          />
+                        </div>
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <FormField
+                  control={form.control}
+                  name="iconSlug"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>{t('form.iconSlug')}</FormLabel>
+                      <FormControl>
+                        <Input
+                          placeholder={t('form.iconSlugPlaceholder')}
+                          {...field}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              </div>
+
+              <FormField
+                control={form.control}
+                name="sortOrder"
+                render={({ field }) => (
+                  <FormItem className="max-w-[160px]">
+                    <FormLabel>{t('form.sortOrder')}</FormLabel>
+                    <FormControl>
+                      <Input type="number" min={0} {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </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>
+        )}
+      </ResizableSheetContent>
+    </Sheet>
+  );
+}
+
+// ─── Page ─────────────────────────────────────────────────────────────────────
+
+export default function XpAreasPage() {
+  const { request } = useApp();
+  const t = useTranslations('lms.XpAreasPage');
+
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = usePersistedPageSize({
+    storageKey: 'pagination:global:pageSize',
+    defaultValue: 12,
+    allowedValues: [6, 12, 24, 48],
+  });
+  const [searchInput, setSearchInput] = useState('');
+  const [debouncedSearch, setDebouncedSearch] = useState('');
+  const [sheetOpen, setSheetOpen] = useState(false);
+  const [areaToEdit, setAreaToEdit] = useState<XpArea | null>(null);
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [areaToDelete, setAreaToDelete] = useState<XpArea | null>(null);
+  const [isDeleting, setIsDeleting] = useState(false);
+
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      setDebouncedSearch(searchInput.trim());
+      setPage(1);
+    }, 300);
+    return () => clearTimeout(timeout);
+  }, [searchInput]);
+
+  const { data: statsData, refetch: refetchStats } = useQuery<{
+    total: number;
+    active: number;
+    inactive: number;
+  }>({
+    queryKey: ['lms-xp-areas-stats'],
+    queryFn: async () => {
+      const response = await request<{
+        total: number;
+        active: number;
+        inactive: number;
+      }>({
+        url: '/lms/xp/areas/stats',
+        method: 'GET',
+      });
+      return response.data;
+    },
+  });
+
+  const {
+    data: paginate = { data: [], total: 0, page: 1, pageSize, lastPage: 1 },
+    isLoading,
+    refetch: refetchList,
+  } = useQuery<PaginatedResult<XpArea>>({
+    queryKey: ['lms-xp-areas', 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<PaginatedResult<XpArea>>({
+        url: `/lms/xp/areas?${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 openCreateSheet = () => {
+    setAreaToEdit(null);
+    setSheetOpen(true);
+  };
+
+  const openEditSheet = (area: XpArea) => {
+    setAreaToEdit(area);
+    setSheetOpen(true);
+  };
+
+  const handleDeleteConfirm = async () => {
+    if (!areaToDelete) return;
+    try {
+      setIsDeleting(true);
+      await request({
+        url: `/lms/xp/areas/${areaToDelete.id}`,
+        method: 'DELETE',
+      });
+      toast.success(t('messages.deleteSuccess'));
+      setDeleteDialogOpen(false);
+      setAreaToDelete(null);
+      await Promise.all([refetchList(), refetchStats()]);
+    } 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.xp'), href: '/lms/xp' },
+          { label: t('breadcrumbs.current') },
+        ]}
+        title={t('title')}
+        description={t('description')}
+        actions={[
+          {
+            label: t('actions.create'),
+            onClick: openCreateSheet,
+            icon: <Plus className="h-4 w-4" />,
+          },
+        ]}
+      />
+
+      <KpiCardsGrid
+        columns={3}
+        items={[
+          {
+            key: 'total',
+            title: t('kpis.total.label'),
+            value: statsData?.total ?? 0,
+            description: t('kpis.total.description'),
+            icon: Layers,
+            accentClassName: 'from-sky-500/20 via-blue-400/10 to-transparent',
+            iconContainerClassName: 'bg-sky-50 text-sky-700',
+            layout: 'compact',
+          },
+          {
+            key: 'active',
+            title: t('kpis.active.label'),
+            value: statsData?.active ?? 0,
+            description: t('kpis.active.description'),
+            icon: CheckCircle2,
+            accentClassName:
+              'from-emerald-500/20 via-green-400/10 to-transparent',
+            iconContainerClassName: 'bg-emerald-50 text-emerald-700',
+            layout: 'compact',
+          },
+          {
+            key: 'inactive',
+            title: t('kpis.inactive.label'),
+            value: statsData?.inactive ?? 0,
+            description: t('kpis.inactive.description'),
+            icon: XCircle,
+            accentClassName:
+              'from-amber-500/20 via-orange-400/10 to-transparent',
+            iconContainerClassName: 'bg-amber-50 text-amber-700',
+            layout: 'compact',
+          },
+        ]}
+      />
+
+      <SearchBar
+        searchQuery={searchInput}
+        onSearchChange={setSearchInput}
+        onSearch={() => setPage(1)}
+        placeholder={t('filters.searchPlaceholder')}
+      />
+
+      {isLoading ? (
+        <div className="space-y-3 p-4">
+          {Array.from({ length: 6 }).map((_, i) => (
+            <Skeleton key={i} className="h-14 w-full" />
+          ))}
+        </div>
+      ) : paginate.data.length === 0 ? (
+        <EmptyState
+          icon={<Layers 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={openCreateSheet}
+        />
+      ) : (
+        <div className="overflow-x-auto">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead className="w-8">{t('table.color')}</TableHead>
+                <TableHead>{t('table.name')}</TableHead>
+                <TableHead>{t('table.slug')}</TableHead>
+                <TableHead>{t('table.status')}</TableHead>
+                <TableHead className="w-10" />
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {paginate.data.map((area) => (
+                <TableRow
+                  key={area.id}
+                  className="cursor-pointer"
+                  onDoubleClick={() => openEditSheet(area)}
+                >
+                  <TableCell>
+                    {area.color ? (
+                      <div
+                        className="h-5 w-5 rounded-full border border-border"
+                        style={{ backgroundColor: area.color }}
+                        title={area.color}
+                      />
+                    ) : (
+                      <div className="h-5 w-5 rounded-full border border-dashed border-muted-foreground/30" />
+                    )}
+                  </TableCell>
+                  <TableCell className="font-medium">{area.name}</TableCell>
+                  <TableCell>
+                    <span className="font-mono text-sm text-muted-foreground">
+                      {area.slug}
+                    </span>
+                  </TableCell>
+                  <TableCell>
+                    <Badge
+                      variant="outline"
+                      className={cn(
+                        'border px-2.5 py-1 text-xs font-medium',
+                        area.status === 'active'
+                          ? 'border-green-500/20 bg-green-500/10 text-green-600'
+                          : 'border-gray-500/20 bg-gray-500/10 text-gray-600'
+                      )}
+                    >
+                      {area.status === 'active'
+                        ? t('status.active')
+                        : t('status.inactive')}
+                    </Badge>
+                  </TableCell>
+                  <TableCell>
+                    <IconActionGroup
+                      className="ml-auto"
+                      actions={[
+                        {
+                          key: 'edit',
+                          label: t('actions.edit'),
+                          icon: <Pencil className="size-4" />,
+                          onClick: () => openEditSheet(area),
+                        },
+                        {
+                          key: 'delete',
+                          label: t('actions.delete'),
+                          icon: <Trash2 className="size-4" />,
+                          onClick: () => {
+                            setAreaToDelete(area);
+                            setDeleteDialogOpen(true);
+                          },
+                          destructive: true,
+                        },
+                      ]}
+                    />
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
+      )}
+
+      <PaginationFooter
+        currentPage={page}
+        pageSize={pageSize}
+        totalItems={paginate.total}
+        onPageChange={setPage}
+        onPageSizeChange={(next) => {
+          setPageSize(next);
+          setPage(1);
+        }}
+        pageSizeOptions={[6, 12, 24, 48]}
+      />
+
+      <AreaFormSheet
+        open={sheetOpen}
+        onOpenChange={setSheetOpen}
+        areaToEdit={areaToEdit}
+        onSaved={() => {
+          refetchList();
+          refetchStats();
+        }}
+      />
+
+      <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>{t('deleteDialog.title')}</AlertDialogTitle>
+            <AlertDialogDescription>
+              {t('deleteDialog.description', {
+                slug: areaToDelete?.slug ?? '',
+              })}
+            </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>
+  );
+}