@hed-hog/core 0.0.387 → 0.0.393

package/hedhog/frontend/app/pages/_components/page-detail-sheet.tsx.ejs

@@ -0,0 +1,438 @@
+'use client';
+
+import { CopyButton } from '@/components/copy-button';
+import { FileTypeIcon } from '@/components/file-type-icon';
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { ResizableSheetContent } from '@/components/ui/resizable-sheet-content';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import {
+  Sheet,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { mirrorPathForPage } from '@/lib/pages-manifest';
+import { cn } from '@/lib/utils';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import {
+  ExternalLink,
+  Link2,
+  Menu as MenuIcon,
+  ShieldCheck,
+  Trash2,
+} from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import Link from 'next/link';
+import { useMemo, type ReactNode } from 'react';
+import type {
+  PaginatedResponse,
+  ResolvedEndpoint,
+  RoleSummary,
+  SystemPage,
+} from './system-page-types';
+import { getMenuLabel, getRoleLabel } from './use-system-pages';
+
+type PageDetailSheetProps = {
+  page: SystemPage | null;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  resolveEndpoints: (page: SystemPage) => ResolvedEndpoint[];
+  /** Presente só em desenvolvimento; abre o fluxo de exclusão. */
+  onRequestDelete?: (page: SystemPage) => void;
+};
+
+function InfoRow({ label, children }: { label: string; children: ReactNode }) {
+  return (
+    <div className="flex flex-col gap-1 rounded-xl border border-border/70 bg-muted/25 p-3">
+      <span className="text-[10px] font-semibold tracking-[0.14em] text-muted-foreground uppercase">
+        {label}
+      </span>
+      <div className="min-w-0 text-sm break-all">{children}</div>
+    </div>
+  );
+}
+
+function FileRow({ path }: { path: string }) {
+  const filename = path.split('/').pop() ?? path;
+
+  return (
+    <div className="flex items-center gap-2 rounded-lg border bg-background/80 p-2.5">
+      <FileTypeIcon filename={filename} />
+      <span className="min-w-0 flex-1 truncate font-mono text-xs">{path}</span>
+      <CopyButton value={path} />
+    </div>
+  );
+}
+
+export function PageDetailSheet({
+  page,
+  open,
+  onOpenChange,
+  resolveEndpoints,
+  onRequestDelete,
+}: PageDetailSheetProps) {
+  const t = useTranslations('core.SystemPagesPage');
+  const { request, currentLocaleCode } = useApp();
+
+  const menuId = page?.menu?.id ?? null;
+
+  const { data: menuRoles = [] } = useQuery<RoleSummary[]>({
+    queryKey: ['system-page-menu-roles', menuId, currentLocaleCode],
+    queryFn: async () => {
+      const response = await request<PaginatedResponse<RoleSummary>>({
+        url: `/menu/${menuId}/role?pageSize=10000`,
+        method: 'GET',
+      });
+
+      return (response.data?.data ?? []).filter((role) =>
+        Boolean(role.role_menu?.length)
+      );
+    },
+    enabled: open && menuId != null,
+    placeholderData: (previous) => previous ?? [],
+  });
+
+  const endpoints = useMemo(
+    () => (page ? resolveEndpoints(page) : []),
+    [page, resolveEndpoints]
+  );
+
+  const mirrorPath = useMemo(
+    () => (page ? mirrorPathForPage(page) : null),
+    [page]
+  );
+
+  if (!page) {
+    return null;
+  }
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <ResizableSheetContent
+        sheetId="system-page-detail"
+        defaultWidth={720}
+        className="flex flex-col gap-0 p-0"
+      >
+        <SheetHeader className="border-b">
+          <SheetTitle className="flex items-center gap-2 font-mono text-base">
+            {page.route}
+          </SheetTitle>
+          <SheetDescription>{page.file}</SheetDescription>
+          <div className="flex flex-wrap gap-1.5 pt-1">
+            <Badge variant="secondary" className="rounded-full px-2 py-0.5">
+              {page.library}
+            </Badge>
+            <Badge variant="outline" className="rounded-full px-2 py-0.5">
+              {t(`template_${page.template}` as never)}
+            </Badge>
+            {page.menu ? (
+              <Badge
+                variant="outline"
+                className="rounded-full border-primary/30 bg-primary/5 px-2 py-0.5 text-primary"
+              >
+                <ShieldCheck className="mr-1 h-3 w-3" />
+                {page.menuRoleCount}
+              </Badge>
+            ) : (
+              <Badge
+                variant="outline"
+                className="rounded-full border-amber-500/30 bg-amber-500/10 px-2 py-0.5 text-amber-600"
+              >
+                {t('orphanBadge')}
+              </Badge>
+            )}
+          </div>
+        </SheetHeader>
+
+        <Tabs defaultValue="overview" className="flex min-h-0 flex-1 flex-col">
+          <TabsList className="mx-4 mt-3 w-auto self-start">
+            <TabsTrigger value="overview">{t('tabOverview')}</TabsTrigger>
+            <TabsTrigger value="menu">{t('tabMenu')}</TabsTrigger>
+            <TabsTrigger value="permissions">{t('tabPermissions')}</TabsTrigger>
+            <TabsTrigger value="files">{t('tabFiles')}</TabsTrigger>
+          </TabsList>
+
+          <ScrollArea className="min-h-0 flex-1">
+            <div className="p-4">
+              <TabsContent value="overview" className="mt-0 space-y-3">
+                <div className="grid gap-3 sm:grid-cols-2">
+                  <InfoRow label={t('fieldRoute')}>
+                    <span className="font-mono">{page.route}</span>
+                  </InfoRow>
+                  <InfoRow label={t('fieldLibrary')}>{page.library}</InfoRow>
+                  <InfoRow label={t('fieldTemplate')}>
+                    {t(`template_${page.template}` as never)}
+                  </InfoRow>
+                  <InfoRow label={t('fieldLoc')}>{page.loc}</InfoRow>
+                </div>
+
+                <InfoRow label={t('fieldFile')}>
+                  <span className="font-mono text-xs">{page.file}</span>
+                </InfoRow>
+
+                <InfoRow label={t('fieldNamespaces')}>
+                  {page.i18nNamespaces.length === 0 ? (
+                    <span className="text-muted-foreground">
+                      {t('noNamespaces')}
+                    </span>
+                  ) : (
+                    <div className="flex flex-wrap gap-1.5">
+                      {page.i18nNamespaces.map((namespace) => (
+                        <Badge
+                          key={namespace}
+                          variant="secondary"
+                          className="rounded-full px-2 py-0 font-mono text-[10px]"
+                        >
+                          {namespace}
+                        </Badge>
+                      ))}
+                    </div>
+                  )}
+                </InfoRow>
+
+                <InfoRow label={t('fieldFeatures')}>
+                  <div className="flex flex-wrap gap-1.5">
+                    {Object.entries(page.features).map(([feature, enabled]) => (
+                      <Badge
+                        key={feature}
+                        variant="outline"
+                        className={cn(
+                          'rounded-full px-2 py-0 text-[10px]',
+                          enabled
+                            ? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-600'
+                            : 'text-muted-foreground'
+                        )}
+                      >
+                        {t(`feature_${feature}` as never)}
+                      </Badge>
+                    ))}
+                  </div>
+                </InfoRow>
+
+                <InfoRow label={t('fieldReferencedBy')}>
+                  {page.referencedBy.length === 0 ? (
+                    <span className="flex items-center gap-1.5 text-amber-600">
+                      <Link2 className="h-3.5 w-3.5" />
+                      {t('noReferences')}
+                    </span>
+                  ) : (
+                    <div className="space-y-1">
+                      {page.referencedBy.map((file) => (
+                        <div
+                          key={file}
+                          className="flex items-center gap-2 rounded-lg border bg-background/80 p-1.5"
+                        >
+                          <FileTypeIcon filename={file.split('/').pop() ?? file} />
+                          <span className="min-w-0 flex-1 truncate font-mono text-xs">
+                            {file}
+                          </span>
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                </InfoRow>
+              </TabsContent>
+
+              <TabsContent value="menu" className="mt-0 space-y-3">
+                {page.menu ? (
+                  <>
+                    <div className="grid gap-3 sm:grid-cols-2">
+                      <InfoRow label={t('menuName')}>
+                        {getMenuLabel(page.menu)}
+                      </InfoRow>
+                      <InfoRow label={t('menuSlug')}>
+                        <span className="font-mono text-xs">
+                          {page.menu.slug}
+                        </span>
+                      </InfoRow>
+                      <InfoRow label={t('menuUrl')}>
+                        <span className="font-mono text-xs">
+                          {page.menu.url}
+                        </span>
+                      </InfoRow>
+                      <InfoRow label={t('menuIcon')}>
+                        {page.menu.icon || '-'}
+                      </InfoRow>
+                      <InfoRow label={t('menuParent')}>
+                        {page.menuParent
+                          ? getMenuLabel(page.menuParent)
+                          : t('menuRoot')}
+                      </InfoRow>
+                      <InfoRow label={t('menuOrder')}>
+                        {page.menu.order ?? '-'}
+                      </InfoRow>
+                    </div>
+
+                    <Button asChild variant="outline" size="sm">
+                      <Link href="/core/menu">
+                        <MenuIcon className="h-4 w-4" />
+                        {t('openMenuManager')}
+                        <ExternalLink className="h-3.5 w-3.5" />
+                      </Link>
+                    </Button>
+                  </>
+                ) : (
+                  <Alert>
+                    <AlertTitle>{t('orphanTitle')}</AlertTitle>
+                    <AlertDescription>
+                      {t('orphanDescription', { route: page.route })}
+                    </AlertDescription>
+                  </Alert>
+                )}
+              </TabsContent>
+
+              <TabsContent value="permissions" className="mt-0 space-y-4">
+                <div>
+                  <h4 className="flex items-center gap-2 text-sm font-semibold">
+                    <ShieldCheck className="h-4 w-4" />
+                    {t('menuRolesTitle')}
+                  </h4>
+                  <p className="mt-0.5 text-xs text-muted-foreground">
+                    {t('menuRolesDescription')}
+                  </p>
+
+                  <div className="mt-2 flex flex-wrap gap-1.5">
+                    {!page.menu ? (
+                      <span className="text-xs text-muted-foreground">
+                        {t('orphanBadge')}
+                      </span>
+                    ) : menuRoles.length === 0 ? (
+                      <span className="text-xs text-muted-foreground">
+                        {t('noRoles')}
+                      </span>
+                    ) : (
+                      menuRoles.map((role) => (
+                        <Badge
+                          key={role.id}
+                          variant="outline"
+                          className="rounded-full border-primary/30 bg-primary/5 px-2 py-0.5 text-primary"
+                        >
+                          {getRoleLabel(role)}
+                        </Badge>
+                      ))
+                    )}
+                  </div>
+                </div>
+
+                <div>
+                  <h4 className="text-sm font-semibold">
+                    {t('endpointsTitle')}
+                  </h4>
+                  <p className="mt-0.5 text-xs text-muted-foreground">
+                    {t('endpointsDescription')}
+                  </p>
+
+                  {endpoints.length === 0 ? (
+                    <p className="mt-2 text-xs text-muted-foreground">
+                      {t('noEndpoints')}
+                    </p>
+                  ) : (
+                    <div className="mt-2 overflow-x-auto">
+                      <Table>
+                        <TableHeader>
+                          <TableRow>
+                            <TableHead>{t('columnMethod')}</TableHead>
+                            <TableHead>{t('columnEndpoint')}</TableHead>
+                            <TableHead>{t('columnEndpointRoles')}</TableHead>
+                          </TableRow>
+                        </TableHeader>
+                        <TableBody>
+                          {endpoints.map((endpoint) => (
+                            <TableRow key={`${endpoint.method} ${endpoint.url}`}>
+                              <TableCell>
+                                <Badge
+                                  variant="outline"
+                                  className="rounded-full px-2 py-0 font-mono text-[10px]"
+                                >
+                                  {endpoint.method}
+                                </Badge>
+                              </TableCell>
+                              <TableCell className="font-mono text-xs">
+                                {endpoint.url}
+                              </TableCell>
+                              <TableCell>
+                                {!endpoint.route ? (
+                                  <span className="text-xs text-amber-600">
+                                    {t('endpointNotRegistered')}
+                                  </span>
+                                ) : endpoint.roles.length === 0 ? (
+                                  <span className="text-xs text-muted-foreground">
+                                    {t('noRoles')}
+                                  </span>
+                                ) : (
+                                  <div className="flex flex-wrap gap-1">
+                                    {endpoint.roles.map((role) => (
+                                      <Badge
+                                        key={role}
+                                        variant="secondary"
+                                        className="rounded-full px-2 py-0 text-[10px]"
+                                      >
+                                        {role}
+                                      </Badge>
+                                    ))}
+                                  </div>
+                                )}
+                              </TableCell>
+                            </TableRow>
+                          ))}
+                        </TableBody>
+                      </Table>
+                    </div>
+                  )}
+                </div>
+              </TabsContent>
+
+              <TabsContent value="files" className="mt-0 space-y-2">
+                <FileRow path={page.file} />
+                {page.components.length === 0 ? (
+                  <p className="px-1 text-xs text-muted-foreground">
+                    {t('noComponents')}
+                  </p>
+                ) : (
+                  page.components.map((component) => (
+                    <FileRow key={component} path={component} />
+                  ))
+                )}
+                {mirrorPath ? <FileRow path={mirrorPath} /> : null}
+                <FileRow path={`apps/admin/messages/${page.library}/en.json`} />
+                <FileRow path={`apps/admin/messages/${page.library}/pt.json`} />
+                <p className="px-1 pt-1 text-xs text-muted-foreground">
+                  {t('filesHint')}
+                </p>
+              </TabsContent>
+            </div>
+          </ScrollArea>
+        </Tabs>
+
+        {onRequestDelete ? (
+          <div className="flex items-center justify-between gap-3 border-t p-4">
+            <p className="text-xs text-muted-foreground">
+              {page.isResidue
+                ? t('deleteHintResidue')
+                : t('deleteHintReferenced', { count: page.referencedBy.length })}
+            </p>
+            <Button
+              variant="outline"
+              className="shrink-0 border-red-500/40 text-red-600 hover:bg-red-500/10 hover:text-red-700"
+              onClick={() => onRequestDelete(page)}
+            >
+              <Trash2 className="h-4 w-4" />
+              {t('deletePage')}
+            </Button>
+          </div>
+        ) : null}
+      </ResizableSheetContent>
+    </Sheet>
+  );
+}