@hed-hog/lms 0.0.304 → 0.0.306

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

@@ -0,0 +1,638 @@
+'use client';
+
+import { createDefaultTemplate } from '@/app/(app)/(libraries)/lms/_lib/editor/types';
+import {
+  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 { Input } from '@/components/ui/input';
+import { KpiCardsGrid } 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 {
+  Award,
+  BadgeCheck,
+  ExternalLink,
+  FileEdit,
+  FilePlus2,
+  Loader2,
+  Shapes,
+  UserRound,
+} from 'lucide-react';
+import { useLocale, useTranslations } from 'next-intl';
+import { useRouter } from 'next/navigation';
+import { useEffect, useMemo, useState } from 'react';
+import { toast } from 'sonner';
+
+type IssuedCertificate = {
+  id: number;
+  studentId: number;
+  studentName: string;
+  courseName: string;
+  templateId: number;
+  templateName: string;
+  templateStatus: string | null;
+  certificateType: 'course' | 'exam' | 'course_class_group' | 'learning_path';
+  workloadHours: number;
+  issuedAt: string;
+  completedAt: string;
+  finalScore: number | null;
+  verificationCode: string;
+  verificationUrl: string | null;
+  pdfUrl: string | null;
+  sourceTitle: string;
+  primaryColor: string | null;
+};
+
+type ApiIssuedCertificatesResponse = {
+  total: number;
+  page: number;
+  pageSize: number;
+  lastPage: number;
+  data: IssuedCertificate[];
+};
+
+type CertificateTemplateStatus = 'draft' | 'active' | 'inactive';
+
+type CreateCertificateTemplatePayload = {
+  name: string;
+  description?: string;
+  templateContent: string;
+  status: CertificateTemplateStatus;
+};
+
+type CertificateTemplate = {
+  id: number;
+  name: string;
+  slug: string;
+  description: string | null;
+  templateContent: string;
+  status: CertificateTemplateStatus;
+};
+
+const PAGE_SIZES = [6, 12, 24];
+
+export default function IssuedCertificatesPage() {
+  const t = useTranslations('lms.IssuedCertificatesPage');
+  const locale = useLocale();
+  const router = useRouter();
+  const { request } = useApp();
+
+  const [searchInput, setSearchInput] = useState('');
+  const [searchQuery, setSearchQuery] = useState('');
+  const [typeFilter, setTypeFilter] = useState('all');
+  const [currentPage, setCurrentPage] = useState(1);
+  const [pageSize, setPageSize] = useState(12);
+  const [isTemplateSheetOpen, setIsTemplateSheetOpen] = useState(false);
+  const [isCreatingTemplate, setIsCreatingTemplate] = useState(false);
+  const [templateName, setTemplateName] = useState('');
+  const [templateDescription, setTemplateDescription] = useState('');
+  const [templateStatus, setTemplateStatus] =
+    useState<CertificateTemplateStatus>('draft');
+
+  const {
+    data: certificatesResponse,
+    isLoading,
+    isFetching,
+  } = useQuery<ApiIssuedCertificatesResponse>({
+    queryKey: [
+      'lms-issued-certificates',
+      currentPage,
+      pageSize,
+      searchQuery,
+      typeFilter,
+    ],
+    queryFn: async () => {
+      const response = await request<ApiIssuedCertificatesResponse>({
+        url: '/lms/certificates/issued',
+        method: 'GET',
+        params: {
+          page: currentPage,
+          pageSize,
+          ...(searchQuery ? { search: searchQuery } : {}),
+          ...(typeFilter !== 'all' ? { type: typeFilter } : {}),
+        },
+      });
+
+      return response.data;
+    },
+    placeholderData: (old) => old,
+  });
+
+  useEffect(() => {
+    const timeoutId = setTimeout(() => {
+      setSearchQuery(searchInput.trim());
+    }, 350);
+
+    return () => clearTimeout(timeoutId);
+  }, [searchInput]);
+
+  useEffect(() => {
+    setCurrentPage(1);
+  }, [searchQuery, typeFilter]);
+
+  const certificates = certificatesResponse?.data ?? [];
+  const totalItems = certificatesResponse?.total ?? 0;
+  const totalPages = Math.max(certificatesResponse?.lastPage ?? 1, 1);
+  const loading = isLoading && !certificatesResponse;
+  const isRefreshing = isFetching && !isLoading;
+
+  useEffect(() => {
+    if (currentPage > totalPages) {
+      setCurrentPage(totalPages);
+    }
+  }, [currentPage, totalPages]);
+
+  const hasActiveFilters =
+    searchInput.trim().length > 0 || typeFilter !== 'all';
+
+  const statsData = useMemo(() => {
+    const activeTemplates = new Set<number>();
+    const uniqueStudents = new Set<number>();
+    let withPdf = 0;
+
+    for (const certificate of certificates) {
+      activeTemplates.add(certificate.templateId);
+      uniqueStudents.add(certificate.studentId);
+      if (certificate.pdfUrl) {
+        withPdf += 1;
+      }
+    }
+
+    return {
+      templates: activeTemplates.size,
+      students: uniqueStudents.size,
+      withPdf,
+      pageTotal: certificates.length,
+    };
+  }, [certificates]);
+
+  const dateFormatter = useMemo(
+    () =>
+      new Intl.DateTimeFormat(locale.startsWith('pt') ? 'pt-BR' : 'en-US', {
+        dateStyle: 'medium',
+      }),
+    [locale]
+  );
+
+  function clearFilters() {
+    setSearchInput('');
+    setSearchQuery('');
+    setTypeFilter('all');
+    setCurrentPage(1);
+  }
+
+  function resetTemplateForm() {
+    setTemplateName('');
+    setTemplateDescription('');
+    setTemplateStatus('draft');
+  }
+
+  async function createTemplate() {
+    const name = templateName.trim();
+
+    if (!name) {
+      toast.error(t('sheet.validation.required'));
+      return;
+    }
+
+    const initialTemplate = createDefaultTemplate();
+    initialTemplate.name = name;
+
+    const payload: CreateCertificateTemplatePayload = {
+      name,
+      description: templateDescription.trim() || undefined,
+      status: templateStatus,
+      templateContent: JSON.stringify(initialTemplate),
+    };
+
+    try {
+      setIsCreatingTemplate(true);
+      const response = await request<CertificateTemplate>({
+        url: '/lms/certificates/templates',
+        method: 'POST',
+        data: payload,
+      });
+
+      setIsTemplateSheetOpen(false);
+      resetTemplateForm();
+      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 {
+      setIsCreatingTemplate(false);
+    }
+  }
+
+  function formatDate(value: string) {
+    const parsed = new Date(value);
+
+    if (Number.isNaN(parsed.getTime())) {
+      return '-';
+    }
+
+    return dateFormatter.format(parsed);
+  }
+
+  function formatTypeLabel(
+    value: IssuedCertificate['certificateType'] | 'all'
+  ) {
+    if (value === 'course_class_group') {
+      return t('types.courseClassGroup');
+    }
+
+    if (value === 'learning_path') {
+      return t('types.learningPath');
+    }
+
+    return t(`types.${value}`);
+  }
+
+  return (
+    <Page>
+      <PageHeader
+        title={t('title')}
+        description={t('description')}
+        breadcrumbs={[
+          { label: t('breadcrumbs.home'), href: '/' },
+          { label: t('breadcrumbs.certificates') },
+          { label: t('breadcrumbs.issued') },
+        ]}
+      />
+
+      <KpiCardsGrid
+        items={[
+          {
+            key: 'total',
+            title: t('kpis.totalIssued'),
+            value: totalItems,
+            icon: Award,
+            accentClassName: 'from-sky-500/20 via-cyan-500/10 to-transparent',
+            iconContainerClassName: 'bg-sky-100 text-sky-700',
+          },
+          {
+            key: 'templates',
+            title: t('kpis.templatesOnPage'),
+            value: statsData.templates,
+            icon: Shapes,
+            accentClassName:
+              'from-amber-500/20 via-orange-500/10 to-transparent',
+            iconContainerClassName: 'bg-amber-100 text-amber-700',
+          },
+          {
+            key: 'students',
+            title: t('kpis.studentsOnPage'),
+            value: statsData.students,
+            icon: UserRound,
+            accentClassName:
+              'from-emerald-500/20 via-green-500/10 to-transparent',
+            iconContainerClassName: 'bg-emerald-100 text-emerald-700',
+          },
+          {
+            key: 'pdf',
+            title: t('kpis.pdfOnPage'),
+            value: statsData.withPdf,
+            icon: BadgeCheck,
+            accentClassName:
+              'from-violet-500/20 via-purple-500/10 to-transparent',
+            iconContainerClassName: 'bg-violet-100 text-violet-700',
+          },
+        ]}
+      />
+
+      <div className="flex flex-col gap-4 xl:flex-row xl:items-center">
+        <div className="flex-1">
+          <SearchBar
+            searchQuery={searchInput}
+            onSearchChange={setSearchInput}
+            onSearch={() => setSearchQuery(searchInput.trim())}
+            placeholder={t('filters.searchPlaceholder')}
+            controls={[
+              {
+                id: 'type-filter',
+                type: 'select',
+                value: typeFilter,
+                onChange: setTypeFilter,
+                placeholder: t('filters.type'),
+                options: [
+                  { value: 'all', label: t('filters.allTypes') },
+                  { value: 'course', label: t('types.course') },
+                  { value: 'exam', label: t('types.exam') },
+                  {
+                    value: 'course_class_group',
+                    label: t('types.courseClassGroup'),
+                  },
+                  {
+                    value: 'learning_path',
+                    label: t('types.learningPath'),
+                  },
+                ],
+              },
+            ]}
+          />
+        </div>
+
+        <div className="flex items-center gap-2 text-sm text-muted-foreground">
+          <span>
+            {totalItems}{' '}
+            {totalItems === 1 ? t('results.single') : t('results.plural')}
+          </span>
+          {hasActiveFilters ? (
+            <Button
+              type="button"
+              variant="ghost"
+              size="sm"
+              onClick={clearFilters}
+            >
+              {t('filters.clear')}
+            </Button>
+          ) : null}
+          {isRefreshing ? <Loader2 className="size-4 animate-spin" /> : null}
+        </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-20 rounded-full" />
+                  <Skeleton className="h-6 w-28 rounded-full" />
+                </div>
+                <div>
+                  <Skeleton className="mb-2 h-5 w-3/4" />
+                  <Skeleton className="h-4 w-1/2" />
+                </div>
+                <Skeleton className="h-16 w-full rounded-xl" />
+                <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>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      ) : totalItems === 0 ? (
+        <div className="flex flex-col items-center justify-center gap-3 py-12 text-center">
+          <Award className="h-12 w-12 text-muted-foreground" />
+          <h2 className="text-lg font-semibold text-foreground">
+            {t('empty.title')}
+          </h2>
+        </div>
+      ) : (
+        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+          {certificates.map((certificate) => (
+            <Card
+              key={certificate.id}
+              className="overflow-hidden border-border/70 py-0 shadow-sm transition-shadow duration-300 hover:shadow-md"
+            >
+              <div
+                className="h-1 w-full"
+                style={{
+                  backgroundColor: certificate.primaryColor || '#1D4ED8',
+                }}
+              />
+
+              <CardContent className="space-y-4 p-5">
+                <div className="flex flex-wrap items-center gap-2">
+                  <Badge variant="outline">
+                    {formatTypeLabel(certificate.certificateType)}
+                  </Badge>
+                  <Badge variant="secondary">#{certificate.id}</Badge>
+                </div>
+
+                <div className="space-y-1">
+                  <h3 className="line-clamp-2 text-base font-semibold leading-snug text-foreground">
+                    {certificate.studentName}
+                  </h3>
+                  <p className="line-clamp-2 text-sm text-muted-foreground">
+                    {certificate.sourceTitle || certificate.courseName}
+                  </p>
+                </div>
+
+                <div className="rounded-xl border bg-muted/30 p-3">
+                  <p className="mb-1 text-xs uppercase tracking-wide text-muted-foreground">
+                    {t('cards.template')}
+                  </p>
+                  <p className="text-sm font-medium text-foreground">
+                    {certificate.templateName || '-'}
+                  </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.issuedAt')}
+                    </p>
+                    <p className="text-sm font-medium text-foreground">
+                      {formatDate(certificate.issuedAt)}
+                    </p>
+                  </div>
+                  <div className="rounded-xl border bg-background p-3">
+                    <p className="mb-1 text-xs text-muted-foreground">
+                      {t('cards.workload')}
+                    </p>
+                    <p className="text-sm font-medium text-foreground">
+                      {certificate.workloadHours}h
+                    </p>
+                  </div>
+                </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.finalScore')}
+                    </p>
+                    <p className="text-sm font-medium text-foreground">
+                      {certificate.finalScore ?? '-'}
+                    </p>
+                  </div>
+                  <div className="rounded-xl border bg-background p-3">
+                    <p className="mb-1 text-xs text-muted-foreground">
+                      {t('cards.verificationCode')}
+                    </p>
+                    <p className="truncate font-mono text-xs font-medium text-foreground">
+                      {certificate.verificationCode}
+                    </p>
+                  </div>
+                </div>
+
+                <div className="flex flex-wrap gap-2 pt-1">
+                  <Button
+                    type="button"
+                    variant="outline"
+                    size="sm"
+                    className="gap-2"
+                    onClick={() =>
+                      router.push(
+                        `/lms/certificates/models/editor?templateId=${certificate.templateId}`
+                      )
+                    }
+                  >
+                    <FileEdit className="size-4" />
+                    {t('cards.actions.editTemplate')}
+                  </Button>
+
+                  {certificate.pdfUrl ? (
+                    <Button
+                      type="button"
+                      variant="outline"
+                      size="sm"
+                      className="gap-2"
+                      onClick={() =>
+                        window.open(certificate.pdfUrl ?? '', '_blank')
+                      }
+                    >
+                      <BadgeCheck className="size-4" />
+                      {t('cards.actions.openPdf')}
+                    </Button>
+                  ) : null}
+
+                  {certificate.verificationUrl ? (
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      size="sm"
+                      className="gap-2"
+                      onClick={() =>
+                        window.open(certificate.verificationUrl ?? '', '_blank')
+                      }
+                    >
+                      <ExternalLink className="size-4" />
+                      {t('cards.actions.verify')}
+                    </Button>
+                  ) : null}
+                </div>
+              </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}
+
+      <Sheet open={isTemplateSheetOpen} onOpenChange={setIsTemplateSheetOpen}>
+        <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>
+
+          <div className="space-y-4 p-4">
+            <div className="space-y-2">
+              <label className="text-sm font-medium" htmlFor="template-name">
+                {t('sheet.fields.name')}
+              </label>
+              <Input
+                id="template-name"
+                value={templateName}
+                onChange={(event) => setTemplateName(event.target.value)}
+                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"
+                value={templateDescription}
+                onChange={(event) => setTemplateDescription(event.target.value)}
+                rows={4}
+                placeholder={t('sheet.placeholders.description')}
+              />
+            </div>
+
+            <div className="space-y-2">
+              <p className="text-sm font-medium">{t('sheet.fields.status')}</p>
+              <Select
+                value={templateStatus}
+                onValueChange={(value) =>
+                  setTemplateStatus(value as CertificateTemplateStatus)
+                }
+              >
+                <SelectTrigger className="w-full">
+                  <SelectValue placeholder={t('sheet.fields.status')} />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="draft">
+                    {t('sheet.status.draft')}
+                  </SelectItem>
+                  <SelectItem value="active">
+                    {t('sheet.status.active')}
+                  </SelectItem>
+                  <SelectItem value="inactive">
+                    {t('sheet.status.inactive')}
+                  </SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+
+          <SheetFooter className="flex-row justify-end gap-2">
+            <Button
+              type="button"
+              className="gap-2"
+              disabled={isCreatingTemplate}
+              onClick={createTemplate}
+            >
+              {isCreatingTemplate ? (
+                <Loader2 className="size-4 animate-spin" />
+              ) : (
+                <FilePlus2 className="size-4" />
+              )}
+              {t('sheet.submit')}
+            </Button>
+          </SheetFooter>
+        </SheetContent>
+      </Sheet>
+    </Page>
+  );
+}