@hed-hog/catalog 0.0.276

package/hedhog/frontend/app/[resource]/page.tsx.ejs

@@ -0,0 +1,684 @@
+'use client';
+
+import { CatalogNav } from '../_components/catalog-nav';
+import {
+  catalogResourceMap,
+  type CatalogFieldDefinition,
+  type CatalogFilterOptionDefinition,
+  getCatalogRecordLabel,
+} from '../_lib/catalog-resources';
+import {
+  EntityCard,
+  Page,
+  PageHeader,
+  PaginationFooter,
+  SearchBar,
+  StatsCards,
+} from '@/components/entity-list';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Label } from '@/components/ui/label';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { Textarea } from '@/components/ui/textarea';
+import { useDebounce } from '@/hooks/use-debounce';
+import { cn } from '@/lib/utils';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import { Eye, Pencil, Plus, RefreshCcw, Search, Trash2 } from 'lucide-react';
+import Link from 'next/link';
+import { useParams } from 'next/navigation';
+import { useTranslations } from 'next-intl';
+import { useEffect, useMemo, useState } from 'react';
+import { toast } from 'sonner';
+
+type PaginationResult<T> = {
+  data: T[];
+  total: number;
+  page: number;
+  pageSize: number;
+};
+
+type ResourceStats = {
+  total: number;
+  active?: number;
+};
+
+type CatalogRecord = Record<string, unknown>;
+
+function humanizeValue(value: string) {
+  return value
+    .replace(/[_-]+/g, ' ')
+    .replace(/\b\w/g, (char) => char.toUpperCase());
+}
+
+export default function CatalogResourcePage() {
+  const params = useParams<{ resource: string }>();
+  const resource = params?.resource ?? '';
+  const config = catalogResourceMap.get(resource);
+  const t = useTranslations('catalog');
+  const { request, currentLocaleCode } = useApp();
+  const [search, setSearch] = useState('');
+  const debouncedSearch = useDebounce(search, 400);
+  const [filterValue, setFilterValue] = useState('all');
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(12);
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [deleteId, setDeleteId] = useState<number | null>(null);
+  const [editingRecord, setEditingRecord] = useState<CatalogRecord | null>(
+    null
+  );
+  const [payload, setPayload] = useState('{}');
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const initialPayload = useMemo(
+    () => JSON.stringify(config?.template ?? {}, null, 2),
+    [config]
+  );
+  const resourceTitle = config
+    ? t(`resources.${config.translationKey}.title`)
+    : t('unsupportedResource');
+  const resourceDescription = config
+    ? t(`resources.${config.translationKey}.description`)
+    : t('resource.unsupportedDescription');
+  const ResourceIcon = config?.icon;
+
+  const currencyFormatter = useMemo(
+    () =>
+      new Intl.NumberFormat(currentLocaleCode === 'pt' ? 'pt-BR' : 'en-US', {
+        style: 'currency',
+        currency: 'BRL',
+        maximumFractionDigits: 0,
+      }),
+    [currentLocaleCode]
+  );
+
+  useEffect(() => {
+    setPayload(initialPayload);
+  }, [initialPayload]);
+
+  useEffect(() => {
+    setPage(1);
+  }, [debouncedSearch, filterValue]);
+
+  const { data: stats } = useQuery<ResourceStats>({
+    queryKey: ['catalog-resource-stats', resource],
+    queryFn: async () => {
+      if (!resource || !config) {
+        return { total: 0 };
+      }
+
+      const response = await request({
+        url: `/catalog/${resource}/stats`,
+      });
+      const statsData = response.data as {
+        total?: number;
+        active?: number;
+      };
+
+      return {
+        total: Number(statsData.total ?? 0),
+        active:
+          statsData.active !== undefined ? Number(statsData.active) : undefined,
+      };
+    },
+    initialData: { total: 0 },
+  });
+  const resourceStats = stats as ResourceStats;
+
+  const { data, refetch } = useQuery<PaginationResult<CatalogRecord>>({
+    queryKey: [
+      'catalog-resource',
+      resource,
+      debouncedSearch,
+      filterValue,
+      page,
+      pageSize,
+    ],
+    queryFn: async () => {
+      if (!resource || !config) {
+        return { data: [], total: 0, page: 1, pageSize };
+      }
+
+      const params: Record<string, string | number> = {
+        page,
+        pageSize,
+      };
+
+      if (debouncedSearch.trim()) {
+        params.search = debouncedSearch.trim();
+      }
+
+      if (filterValue !== 'all') {
+        params[config.primaryFilterField] = filterValue;
+      }
+
+      const response = await request({
+        url: `/catalog/${resource}`,
+        params,
+      });
+
+      const responseData = response.data as Partial<
+        PaginationResult<CatalogRecord>
+      >;
+
+      return {
+        data: responseData.data ?? [],
+        total: Number(responseData.total ?? 0),
+        page: Number(responseData.page ?? page),
+        pageSize: Number(responseData.pageSize ?? pageSize),
+      };
+    },
+    initialData: { data: [], total: 0, page: 1, pageSize: 12 },
+  });
+  const resourceData = data as PaginationResult<CatalogRecord>;
+
+  const safeTranslate = (key: string, fallback: string) => {
+    try {
+      return t(key);
+    } catch {
+      return fallback;
+    }
+  };
+
+  const getFirstValue = (record: CatalogRecord, keys: string[]) => {
+    for (const key of keys) {
+      const value = record[key];
+
+      if (
+        value !== undefined &&
+        value !== null &&
+        String(value).trim() !== ''
+      ) {
+        return value;
+      }
+    }
+
+    return undefined;
+  };
+
+  const formatFieldValue = (
+    value: unknown,
+    field?: CatalogFieldDefinition | { key: string; type?: string }
+  ) => {
+    if (value === undefined || value === null || value === '') {
+      return '-';
+    }
+
+    if (field?.type === 'boolean') {
+      return value === true
+        ? t('resource.booleans.true')
+        : t('resource.booleans.false');
+    }
+
+    if (field?.type === 'currency' && typeof value === 'number') {
+      return currencyFormatter.format(value);
+    }
+
+    if (typeof value === 'string') {
+      return safeTranslate(
+        `resource.valueLabels.${field?.key}.${value}`,
+        humanizeValue(value)
+      );
+    }
+
+    return String(value);
+  };
+
+  const getCardDescription = (record: CatalogRecord) =>
+    config
+      ? config.descriptionFields
+          .map((key) => record[key])
+          .filter(
+            (value): value is string | number =>
+              value !== undefined &&
+              value !== null &&
+              String(value).trim() !== ''
+          )
+          .slice(0, 2)
+          .map((value, index) =>
+            formatFieldValue(value, {
+              key: config.descriptionFields[index] ?? '',
+            })
+          )
+          .join(' • ')
+      : '';
+
+  const getBadges = (record: CatalogRecord) =>
+    config
+      ? config.badgeFields
+          .map((key) => {
+            const value = record[key];
+
+            if (value === undefined || value === null || value === '') {
+              return null;
+            }
+
+            return {
+              label: formatFieldValue(value, { key }),
+              variant:
+                value === true || value === 'active' || value === 'published'
+                  ? ('default' as const)
+                  : ('secondary' as const),
+            };
+          })
+          .filter((badge): badge is NonNullable<typeof badge> => badge !== null)
+      : [];
+
+  const getCardMetadata = (record: CatalogRecord) =>
+    config
+      ? config.cardMetadata
+          .map((field) => {
+            const rawValue = record[field.key];
+
+            if (
+              rawValue === undefined ||
+              rawValue === null ||
+              rawValue === ''
+            ) {
+              return null;
+            }
+
+            return {
+              label: t(`resource.fields.${field.labelKey}`),
+              value: formatFieldValue(rawValue, field),
+            };
+          })
+          .filter((item): item is NonNullable<typeof item> => item !== null)
+      : [];
+
+  if (!config) {
+    return (
+      <Page>
+        <PageHeader
+          title={t('unsupportedResource')}
+          description={t('resource.unsupportedDescription')}
+          breadcrumbs={[
+            { label: t('breadcrumbs.home'), href: '/' },
+            { label: t('breadcrumbs.catalog'), href: '/catalog/dashboard' },
+            { label: t('resource.notFound') },
+          ]}
+        />
+        <CatalogNav currentHref="/catalog/dashboard" />
+        <Card>
+          <CardHeader>
+            <CardTitle>{t('unsupportedResource')}</CardTitle>
+            <CardDescription>
+              {t('resource.unsupportedDescription')}
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Button asChild variant="outline">
+              <Link href="/catalog/dashboard">{t('backToCatalog')}</Link>
+            </Button>
+          </CardContent>
+        </Card>
+      </Page>
+    );
+  }
+
+  const openCreate = () => {
+    setEditingRecord(null);
+    setPayload(initialPayload);
+    setDialogOpen(true);
+  };
+
+  const openEdit = (record: CatalogRecord) => {
+    setEditingRecord(record);
+    setPayload(JSON.stringify(record, null, 2));
+    setDialogOpen(true);
+  };
+
+  const submit = async () => {
+    try {
+      setIsSubmitting(true);
+      const body = JSON.parse(payload);
+
+      if (editingRecord?.id) {
+        await request({
+          url: `/catalog/${resource}/${editingRecord.id}`,
+          method: 'PATCH',
+          data: body,
+        });
+      } else {
+        await request({
+          url: `/catalog/${resource}`,
+          method: 'POST',
+          data: body,
+        });
+      }
+
+      toast.success(t('toasts.saveSuccess', { resource: resourceTitle }));
+      setDialogOpen(false);
+      await refetch();
+    } catch (error) {
+      toast.error(
+        error instanceof Error ? error.message : t('toasts.saveError')
+      );
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleDelete = async () => {
+    if (!deleteId) {
+      return;
+    }
+
+    try {
+      await request({
+        url: `/catalog/${resource}/${deleteId}`,
+        method: 'DELETE',
+      });
+      toast.success(t('toasts.deleteSuccess'));
+      setDeleteId(null);
+      await refetch();
+    } catch (error) {
+      toast.error(
+        error instanceof Error ? error.message : t('toasts.deleteError')
+      );
+    }
+  };
+
+  const filterOptions = [
+    {
+      label: t('resource.filters.all'),
+      value: 'all',
+    },
+    ...config.primaryFilterOptions.map(
+      (option: CatalogFilterOptionDefinition) => ({
+        label: t(
+          `resource.filterOptions.${config.primaryFilterField}.${option.labelKey}`
+        ),
+        value: option.value,
+      })
+    ),
+  ];
+
+  const contextualCount = config.contextualKpi.count(resourceData.data);
+
+  const statsCards = [
+    {
+      title: t('resource.kpis.total'),
+      value: resourceStats.total,
+      icon: ResourceIcon ? (
+        <ResourceIcon className="size-5" />
+      ) : (
+        <Search className="size-5" />
+      ),
+      iconBgColor: 'bg-orange-50',
+      iconColor: 'text-orange-600',
+    },
+    {
+      title:
+        typeof resourceStats.active === 'number'
+          ? t('resource.kpis.active')
+          : t('resource.kpis.visible'),
+      value:
+        typeof resourceStats.active === 'number'
+          ? resourceStats.active
+          : resourceData.data.length,
+      icon: <Eye className="size-5" />,
+      iconBgColor: 'bg-blue-50',
+      iconColor: 'text-blue-600',
+    },
+    {
+      title: t(`resource.kpis.${config.contextualKpi.translationKey}`),
+      value: contextualCount,
+      icon: <config.contextualKpi.icon className="size-5" />,
+      iconBgColor: 'bg-emerald-50',
+      iconColor: 'text-emerald-600',
+    },
+  ];
+
+  return (
+    <Page>
+      <PageHeader
+        title={resourceTitle}
+        description={resourceDescription}
+        breadcrumbs={[
+          { label: t('breadcrumbs.home'), href: '/' },
+          { label: t('breadcrumbs.catalog'), href: '/catalog/dashboard' },
+          { label: resourceTitle },
+        ]}
+        actions={[
+          {
+            label: t('refresh'),
+            onClick: () => {
+              void refetch();
+            },
+            variant: 'outline',
+            icon: <RefreshCcw className="size-4" />,
+          },
+        ]}
+      />
+
+      <div className="min-w-0 space-y-4 overflow-x-hidden">
+        <CatalogNav currentHref={config.href} />
+
+        <StatsCards stats={statsCards} className="sm:grid-cols-3" />
+
+        <Card className="min-w-0 overflow-hidden">
+          <CardHeader className="border-b pb-4">
+            <CardTitle>{t('resource.listTitle')}</CardTitle>
+            <CardDescription>{t('resource.listDescription')}</CardDescription>
+          </CardHeader>
+          <CardContent className="min-w-0 space-y-6 pt-6">
+            <div className="flex min-w-0 flex-col gap-3 xl:flex-row xl:items-center">
+              <SearchBar
+                searchQuery={search}
+                onSearchChange={setSearch}
+                onSearch={() => {
+                  setPage(1);
+                  void refetch();
+                }}
+                placeholder={t('searchPlaceholder')}
+                className="min-w-0 flex-1 flex-wrap"
+                filters={{
+                  value: filterValue,
+                  options: filterOptions,
+                  onChange: setFilterValue,
+                  placeholder: t(
+                    `resource.filters.${config.primaryFilterField}`
+                  ),
+                }}
+              />
+              <Button onClick={openCreate} className="w-full xl:w-auto">
+                <Plus className="mr-2 size-4" />
+                {t('newRecord')}
+              </Button>
+            </div>
+
+            {resourceData.data.length === 0 ? (
+              <div className="rounded-lg border border-dashed px-6 py-12 text-center text-sm text-muted-foreground">
+                {t('resource.emptyState')}
+              </div>
+            ) : config.listVariant === 'table' ? (
+              <div className="min-w-0 space-y-4">
+                <div className="overflow-x-auto rounded-md border">
+                  <Table>
+                    <TableHeader>
+                      <TableRow>
+                        {config.tableColumns?.map((column) => (
+                          <TableHead key={column.key}>
+                            {t(`resource.fields.${column.labelKey}`)}
+                          </TableHead>
+                        ))}
+                        <TableHead className="w-[110px] text-right">
+                          {t('resource.fields.actions')}
+                        </TableHead>
+                      </TableRow>
+                    </TableHeader>
+                    <TableBody>
+                      {resourceData.data.map((record) => (
+                        <TableRow key={String(record.id)}>
+                          {config.tableColumns?.map((column) => (
+                            <TableCell key={`${record.id}-${column.key}`}>
+                              {formatFieldValue(record[column.key], column)}
+                            </TableCell>
+                          ))}
+                          <TableCell className="text-right">
+                            <div className="flex justify-end gap-2">
+                              <Button
+                                variant="outline"
+                                size="icon"
+                                onClick={() => openEdit(record)}
+                              >
+                                <Pencil className="size-4" />
+                              </Button>
+                              <Button
+                                variant="destructive"
+                                size="icon"
+                                onClick={() => setDeleteId(Number(record.id))}
+                              >
+                                <Trash2 className="size-4" />
+                              </Button>
+                            </div>
+                          </TableCell>
+                        </TableRow>
+                      ))}
+                    </TableBody>
+                  </Table>
+                </div>
+
+                <PaginationFooter
+                  currentPage={page}
+                  pageSize={pageSize}
+                  totalItems={resourceData.total}
+                  onPageChange={setPage}
+                  onPageSizeChange={(nextPageSize) => {
+                    setPageSize(nextPageSize);
+                    setPage(1);
+                  }}
+                />
+              </div>
+            ) : (
+              <div className="min-w-0 space-y-4">
+                <div className="grid min-w-0 gap-4 md:grid-cols-2 2xl:grid-cols-3">
+                  {resourceData.data.map((record) => (
+                    <EntityCard
+                      key={String(record.id)}
+                      title={String(
+                        getFirstValue(record, config.titleFields) ??
+                          getCatalogRecordLabel(record)
+                      )}
+                      description={getCardDescription(record)}
+                      badges={getBadges(record)}
+                      metadata={getCardMetadata(record)}
+                      actions={[
+                        {
+                          label: t('edit'),
+                          onClick: () => openEdit(record),
+                          variant: 'outline',
+                          icon: <Pencil className="size-4" />,
+                        },
+                        {
+                          label: t('delete'),
+                          onClick: () => setDeleteId(Number(record.id)),
+                          variant: 'destructive',
+                          icon: <Trash2 className="size-4" />,
+                        },
+                      ]}
+                    />
+                  ))}
+                </div>
+
+                <PaginationFooter
+                  currentPage={page}
+                  pageSize={pageSize}
+                  totalItems={resourceData.total}
+                  onPageChange={setPage}
+                  onPageSizeChange={(nextPageSize) => {
+                    setPageSize(nextPageSize);
+                    setPage(1);
+                  }}
+                />
+              </div>
+            )}
+          </CardContent>
+        </Card>
+
+        <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
+          <DialogContent className="max-h-[90vh] max-w-3xl overflow-hidden">
+            <DialogHeader>
+              <DialogTitle>
+                {editingRecord ? t('editRecord') : t('newRecord')}
+              </DialogTitle>
+              <DialogDescription>{resourceDescription}</DialogDescription>
+            </DialogHeader>
+            <div className="min-w-0 space-y-2 overflow-hidden">
+              <Label htmlFor="payload">{t('payload')}</Label>
+              <Textarea
+                id="payload"
+                value={payload}
+                onChange={(event) => setPayload(event.target.value)}
+                className="min-h-[360px] font-mono text-xs"
+              />
+              <p className="text-sm text-muted-foreground">
+                {t('resource.payloadHintDescription')}
+              </p>
+            </div>
+            <DialogFooter>
+              <Button variant="outline" onClick={() => setDialogOpen(false)}>
+                {t('cancel')}
+              </Button>
+              <Button onClick={submit} disabled={isSubmitting}>
+                {t('save')}
+              </Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+
+        <AlertDialog
+          open={deleteId !== null}
+          onOpenChange={(open) => !open && setDeleteId(null)}
+        >
+          <AlertDialogContent>
+            <AlertDialogHeader>
+              <AlertDialogTitle>{t('confirmDelete')}</AlertDialogTitle>
+              <AlertDialogDescription>
+                {t('confirmDeleteDescription')}
+              </AlertDialogDescription>
+            </AlertDialogHeader>
+            <AlertDialogFooter>
+              <AlertDialogCancel>{t('cancel')}</AlertDialogCancel>
+              <AlertDialogAction onClick={handleDelete}>
+                {t('delete')}
+              </AlertDialogAction>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialog>
+      </div>
+    </Page>
+  );
+}