@hed-hog/core 0.0.386 → 0.0.390

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

@@ -0,0 +1,514 @@
+'use client';
+
+import {
+  EmptyState,
+  Page,
+  PageHeader,
+  PaginationFooter,
+  SearchBar,
+  ViewModeToggle,
+  type SearchBarControl,
+} from '@/components/entity-list';
+import { Badge } from '@/components/ui/badge';
+import { Card, CardContent } from '@/components/ui/card';
+import { KpiCardsGrid } from '@/components/ui/kpi-cards-grid';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { useDebounce } from '@/hooks/use-debounce';
+import { usePersistedPageSize } from '@/hooks/use-persisted-page-size';
+import { usePersistedViewMode } from '@/hooks/use-persisted-view-mode';
+import { listLibraries } from '@/lib/pages-manifest';
+import { cn } from '@/lib/utils';
+import {
+  FileCode,
+  Layers,
+  LayoutTemplate,
+  Link2,
+  Menu as MenuIcon,
+  Plus,
+  ShieldCheck,
+  Trash2,
+} from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useMemo, useState } from 'react';
+import {
+  PageDeleteDialog,
+  type MenuRemoval,
+} from './_components/page-delete-dialog';
+import { PageDetailSheet } from './_components/page-detail-sheet';
+import { PageWizardSheet } from './_components/page-wizard-sheet';
+import type { SystemPage } from './_components/system-page-types';
+import { useSystemPages } from './_components/use-system-pages';
+
+const PAGE_SIZE_OPTIONS = [12, 24, 48, 96] as const;
+const VIEW_MODES = ['list', 'cards'] as const;
+const ALL = 'all';
+
+type MenuStatusFilter = 'all' | 'linked' | 'orphan' | 'residue';
+
+export default function SystemPagesPage() {
+  const t = useTranslations('core.SystemPagesPage');
+
+  const { pages, menus, isLoading, resolveEndpoints, refetchMenus } =
+    useSystemPages();
+
+  const [searchInput, setSearchInput] = useState('');
+  const debouncedSearch = useDebounce(searchInput, 300);
+  const [libraryFilter, setLibraryFilter] = useState<string>(ALL);
+  const [menuStatusFilter, setMenuStatusFilter] =
+    useState<MenuStatusFilter>(ALL);
+  const [page, setPage] = useState(1);
+  const [selectedPage, setSelectedPage] = useState<SystemPage | null>(null);
+  const [detailOpen, setDetailOpen] = useState(false);
+  const [wizardOpen, setWizardOpen] = useState(false);
+  const [pageToDelete, setPageToDelete] = useState<SystemPage | null>(null);
+  const [deleteOpen, setDeleteOpen] = useState(false);
+
+  const [pageSize, setPageSize] = usePersistedPageSize({
+    storageKey: 'pagination:core-system-pages:pageSize',
+    defaultValue: 24,
+    allowedValues: PAGE_SIZE_OPTIONS,
+  });
+
+  const [viewMode, setViewMode] = usePersistedViewMode({
+    storageKey: 'core-system-pages-view-mode',
+    defaultValue: 'list',
+    allowedValues: VIEW_MODES,
+  });
+
+  const libraries = useMemo(() => listLibraries(pages), [pages]);
+
+  const filteredPages = useMemo(() => {
+    const query = debouncedSearch.trim().toLowerCase();
+
+    return pages.filter((entry) => {
+      if (libraryFilter !== ALL && entry.library !== libraryFilter) {
+        return false;
+      }
+
+      if (menuStatusFilter === 'linked' && !entry.menu) {
+        return false;
+      }
+
+      if (menuStatusFilter === 'orphan' && entry.menu) {
+        return false;
+      }
+
+      if (menuStatusFilter === 'residue' && !entry.isResidue) {
+        return false;
+      }
+
+      if (!query) {
+        return true;
+      }
+
+      return [entry.route, entry.file, entry.library, entry.menuLabel ?? '']
+        .join(' ')
+        .toLowerCase()
+        .includes(query);
+    });
+  }, [debouncedSearch, libraryFilter, menuStatusFilter, pages]);
+
+  const totalPages = Math.max(1, Math.ceil(filteredPages.length / pageSize));
+  // Paginação client-side: a página válida é derivada no render, sem efeito de
+  // correção — filtrar nunca deixa o usuário preso numa página inexistente.
+  const safePage = Math.min(page, totalPages);
+
+  const visiblePages = useMemo(
+    () => filteredPages.slice((safePage - 1) * pageSize, safePage * pageSize),
+    [filteredPages, safePage, pageSize]
+  );
+
+  const stats = useMemo(() => {
+    const residue = pages.filter((entry) => entry.isResidue).length;
+    const withoutI18n = pages.filter(
+      (entry) => entry.i18nNamespaces.length === 0
+    ).length;
+
+    return {
+      total: pages.length,
+      libraries: libraries.length,
+      residue,
+      withoutI18n,
+    };
+  }, [libraries.length, pages]);
+
+  const statsCards = [
+    {
+      key: 'total',
+      title: t('statsTotal'),
+      value: stats.total,
+      icon: FileCode,
+      accentClassName: 'from-slate-500/20 via-slate-400/10 to-transparent',
+      iconContainerClassName: 'bg-slate-100 text-slate-700',
+    },
+    {
+      key: 'libraries',
+      title: t('statsLibraries'),
+      value: stats.libraries,
+      icon: Layers,
+      accentClassName: 'from-blue-500/20 via-cyan-500/10 to-transparent',
+      iconContainerClassName: 'bg-blue-50 text-blue-600',
+    },
+    {
+      key: 'residue',
+      title: t('statsResidue'),
+      value: stats.residue,
+      icon: Trash2,
+      accentClassName: 'from-amber-500/20 via-orange-500/10 to-transparent',
+      iconContainerClassName: 'bg-amber-50 text-amber-600',
+    },
+    {
+      key: 'withoutI18n',
+      title: t('statsWithoutI18n'),
+      value: stats.withoutI18n,
+      icon: LayoutTemplate,
+      accentClassName: 'from-rose-500/20 via-red-500/10 to-transparent',
+      iconContainerClassName: 'bg-rose-50 text-rose-600',
+    },
+  ];
+
+  const searchControls: SearchBarControl[] = [
+    {
+      id: 'library-filter',
+      type: 'select',
+      value: libraryFilter,
+      onChange: (value) => {
+        setLibraryFilter(value);
+        setPage(1);
+      },
+      placeholder: t('filterByLibrary'),
+      options: [
+        { value: ALL, label: t('allLibraries') },
+        ...libraries.map((library) => ({ value: library, label: library })),
+      ],
+    },
+    {
+      id: 'menu-status-filter',
+      type: 'select',
+      value: menuStatusFilter,
+      onChange: (value) => {
+        setMenuStatusFilter(value as MenuStatusFilter);
+        setPage(1);
+      },
+      placeholder: t('filterByMenuStatus'),
+      options: [
+        { value: ALL, label: t('allMenuStatuses') },
+        { value: 'linked', label: t('menuStatusLinked') },
+        { value: 'orphan', label: t('menuStatusOrphan') },
+        { value: 'residue', label: t('menuStatusResidue') },
+      ],
+    },
+  ];
+
+  const openDetail = (entry: SystemPage) => {
+    setSelectedPage(entry);
+    setDetailOpen(true);
+  };
+
+  const isDevelopment = process.env.NODE_ENV === 'development';
+
+  // O menu só sai do banco quando não tem submenus — remover um pai órfã os
+  // filhos. Nesse caso avisamos e deixamos apenas os arquivos serem apagados.
+  const deleteMenuHasChildren = pageToDelete?.menu
+    ? menus.some((menu) => menu.menu_id === pageToDelete.menu?.id)
+    : false;
+
+  const deleteMenuRemoval: MenuRemoval | null =
+    pageToDelete?.menu && !deleteMenuHasChildren
+      ? {
+          id: pageToDelete.menu.id,
+          slug: pageToDelete.menu.slug,
+          labelPt: pageToDelete.menuLabel ?? pageToDelete.menu.slug,
+        }
+      : null;
+
+  const requestDelete = (entry: SystemPage) => {
+    setPageToDelete(entry);
+    setDeleteOpen(true);
+  };
+
+  const handleDeleted = () => {
+    setDetailOpen(false);
+    void refetchMenus();
+  };
+
+  return (
+    <Page>
+      <PageHeader
+        breadcrumbs={[
+          { label: t('breadcrumbHome'), href: '/' },
+          { label: t('breadcrumbManagement') },
+          { label: t('title') },
+        ]}
+        title={t('title')}
+        description={t('description')}
+        actions={
+          isDevelopment
+            ? [
+                {
+                  label: t('newPage'),
+                  onClick: () => setWizardOpen(true),
+                  icon: <Plus className="h-4 w-4" />,
+                },
+              ]
+            : []
+        }
+      />
+
+      <KpiCardsGrid items={statsCards} />
+
+      <div className="flex flex-col gap-4 xl:flex-row xl:items-center">
+        <div className="flex-1">
+          <SearchBar
+            searchQuery={searchInput}
+            onSearchChange={(value) => {
+              setSearchInput(value);
+              setPage(1);
+            }}
+            onSearch={() => setPage(1)}
+            placeholder={t('searchPlaceholder')}
+            controls={searchControls}
+          />
+        </div>
+
+        <div className="flex items-center justify-between gap-3 sm:justify-start xl:justify-end">
+          <span className="text-xs font-medium text-muted-foreground">
+            {t('viewMode')}
+          </span>
+          <ViewModeToggle
+            viewMode={viewMode}
+            onViewModeChange={setViewMode}
+            listLabel={t('viewModeTable')}
+            cardsLabel={t('viewModeCards')}
+          />
+        </div>
+      </div>
+
+      {filteredPages.length === 0 ? (
+        <EmptyState
+          icon={<FileCode className="h-12 w-12" />}
+          title={t('emptyStateTitle')}
+          description={
+            isLoading ? t('emptyStateLoading') : t('emptyStateDescription')
+          }
+        />
+      ) : (
+        <>
+          {viewMode === 'list' ? (
+            <div className="overflow-x-auto">
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead>{t('columnRoute')}</TableHead>
+                    <TableHead>{t('columnLibrary')}</TableHead>
+                    <TableHead>{t('columnTemplate')}</TableHead>
+                    <TableHead>{t('columnMenu')}</TableHead>
+                    <TableHead>{t('columnRoles')}</TableHead>
+                    <TableHead>{t('columnReferences')}</TableHead>
+                    <TableHead>{t('columnEndpoints')}</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {visiblePages.map((entry) => (
+                    <TableRow
+                      key={entry.route}
+                      className="cursor-pointer"
+                      onClick={() => openDetail(entry)}
+                    >
+                      <TableCell>
+                        <div className="min-w-0">
+                          <div className="truncate font-mono text-sm font-medium">
+                            {entry.route}
+                          </div>
+                          <div className="truncate text-xs text-muted-foreground">
+                            {entry.file}
+                          </div>
+                        </div>
+                      </TableCell>
+                      <TableCell>
+                        <Badge
+                          variant="secondary"
+                          className="rounded-full px-2 py-0.5"
+                        >
+                          {entry.library}
+                        </Badge>
+                      </TableCell>
+                      <TableCell className="text-sm text-muted-foreground">
+                        {t(`template_${entry.template}` as never)}
+                      </TableCell>
+                      <TableCell>
+                        {entry.menu ? (
+                          <span className="flex items-center gap-1.5 text-sm">
+                            <MenuIcon className="h-3.5 w-3.5 text-muted-foreground" />
+                            {entry.menuLabel}
+                          </span>
+                        ) : entry.isResidue ? (
+                          <Badge
+                            variant="outline"
+                            className="rounded-full border-amber-500/30 bg-amber-500/10 px-2 py-0.5 text-amber-600"
+                          >
+                            <Trash2 className="mr-1 h-3 w-3" />
+                            {t('residueBadge')}
+                          </Badge>
+                        ) : (
+                          <Badge
+                            variant="outline"
+                            className="rounded-full px-2 py-0.5 text-muted-foreground"
+                          >
+                            {t('orphanBadge')}
+                          </Badge>
+                        )}
+                      </TableCell>
+                      <TableCell>
+                        <Badge
+                          variant="outline"
+                          className={cn(
+                            'rounded-full px-2 py-0 text-[10px]',
+                            entry.menuRoleCount > 0
+                              ? 'border-primary/30 bg-primary/5 text-primary'
+                              : 'text-muted-foreground'
+                          )}
+                        >
+                          <ShieldCheck className="mr-1 h-3 w-3" />
+                          {entry.menuRoleCount}
+                        </Badge>
+                      </TableCell>
+                      <TableCell>
+                        <span
+                          className={cn(
+                            'flex items-center gap-1 text-sm',
+                            entry.referencedBy.length === 0
+                              ? 'text-amber-600'
+                              : 'text-muted-foreground'
+                          )}
+                        >
+                          <Link2 className="h-3.5 w-3.5" />
+                          {entry.referencedBy.length}
+                        </span>
+                      </TableCell>
+                      <TableCell className="text-sm text-muted-foreground">
+                        {entry.endpoints.length}
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </div>
+          ) : (
+            <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
+              {visiblePages.map((entry) => (
+                <Card
+                  key={entry.route}
+                  className="group h-full cursor-pointer overflow-hidden border-border/70 py-0 transition-colors hover:border-border hover:shadow-md"
+                  onClick={() => openDetail(entry)}
+                >
+                  <CardContent className="flex h-full flex-col gap-3 p-4">
+                    <div className="flex flex-wrap gap-1.5">
+                      <Badge
+                        variant="secondary"
+                        className="rounded-full px-2 py-0.5 text-[11px]"
+                      >
+                        {entry.library}
+                      </Badge>
+                      <Badge
+                        variant="outline"
+                        className="rounded-full px-2 py-0.5 text-[11px]"
+                      >
+                        {t(`template_${entry.template}` as never)}
+                      </Badge>
+                      {entry.isResidue ? (
+                        <Badge
+                          variant="outline"
+                          className="rounded-full border-amber-500/30 bg-amber-500/10 px-2 py-0.5 text-[11px] text-amber-600"
+                        >
+                          <Trash2 className="mr-1 h-3 w-3" />
+                          {t('residueBadge')}
+                        </Badge>
+                      ) : !entry.menu ? (
+                        <Badge
+                          variant="outline"
+                          className="rounded-full px-2 py-0.5 text-[11px] text-muted-foreground"
+                        >
+                          {t('orphanBadge')}
+                        </Badge>
+                      ) : null}
+                    </div>
+
+                    <div className="min-w-0">
+                      <h3 className="truncate font-mono text-sm font-semibold">
+                        {entry.route}
+                      </h3>
+                      <p className="truncate text-xs text-muted-foreground">
+                        {entry.menuLabel ?? entry.file}
+                      </p>
+                    </div>
+
+                    <div className="mt-auto flex items-center gap-3 border-t pt-2 text-xs text-muted-foreground">
+                      <span className="flex items-center gap-1">
+                        <ShieldCheck className="h-3.5 w-3.5" />
+                        {entry.menuRoleCount}
+                      </span>
+                      <span
+                        className={cn(
+                          'flex items-center gap-1',
+                          entry.referencedBy.length === 0 && 'text-amber-600'
+                        )}
+                      >
+                        <Link2 className="h-3.5 w-3.5" />
+                        {entry.referencedBy.length}
+                      </span>
+                      <span>
+                        {t('cardEndpoints', { count: entry.endpoints.length })}
+                      </span>
+                    </div>
+                  </CardContent>
+                </Card>
+              ))}
+            </div>
+          )}
+
+          <PaginationFooter
+            currentPage={safePage}
+            pageSize={pageSize}
+            totalItems={filteredPages.length}
+            onPageChange={setPage}
+            onPageSizeChange={(nextPageSize) => {
+              setPageSize(nextPageSize);
+              setPage(1);
+            }}
+            pageSizeOptions={PAGE_SIZE_OPTIONS}
+          />
+        </>
+      )}
+
+      <PageDetailSheet
+        page={selectedPage}
+        open={detailOpen}
+        onOpenChange={setDetailOpen}
+        resolveEndpoints={resolveEndpoints}
+        onRequestDelete={isDevelopment ? requestDelete : undefined}
+      />
+
+      {isDevelopment ? (
+        <>
+          <PageWizardSheet open={wizardOpen} onOpenChange={setWizardOpen} />
+          <PageDeleteDialog
+            page={pageToDelete}
+            open={deleteOpen}
+            onOpenChange={setDeleteOpen}
+            menuRemoval={deleteMenuRemoval}
+            menuHasChildrenWarning={deleteMenuHasChildren}
+            onDeleted={handleDeleted}
+          />
+        </>
+      ) : null}
+    </Page>
+  );
+}