@hed-hog/catalog 0.0.278 → 0.0.285

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

@@ -1,684 +1,648 @@
-'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>
-  );
-}
+'use client';
+import {
+  catalogResourceMap,
+  type CatalogFieldDefinition,
+  type CatalogFilterOptionDefinition,
+  getCatalogLocalizedText,
+  getCatalogRecordLabel,
+} from '../_lib/catalog-resources';
+import { CatalogResourceFormSheet } from '../_components/catalog-resource-form-sheet';
+import {
+  EmptyState,
+  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 { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { useDebounce } from '@/hooks/use-debounce';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import { Eye, Pencil, Plus, Search, Trash2 } from 'lucide-react';
+import Link from 'next/link';
+import { useParams } from 'next/navigation';
+import { useTranslations } from 'next-intl';
+import { 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 { accessToken, 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 [sheetOpen, setSheetOpen] = useState(false);
+  const [deleteId, setDeleteId] = useState<number | null>(null);
+  const [editingRecordId, setEditingRecordId] = useState<number | null>(null);
+  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]
+  );
+  const isAppReady = accessToken.trim().length > 0;
+  const translatableValueFields = useMemo(
+    () =>
+      new Set([
+        'status',
+        'comparison_status',
+        'availability_status',
+        'site_type',
+        'merchant_type',
+        'network_type',
+        'commission_type',
+        'page_type',
+        'canonical_strategy',
+        'source_type',
+        'data_type',
+        'comparison_mode',
+        'facet_mode',
+      ]),
+    []
+  );
+
+  const { data: stats } = useQuery<ResourceStats>({
+    queryKey: [
+      'catalog-resource-stats',
+      resource,
+      accessToken,
+      currentLocaleCode,
+    ],
+    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,
+      };
+    },
+    enabled: Boolean(resource && config && isAppReady),
+  });
+  const resourceStats = (stats ?? { total: 0 }) as ResourceStats;
+
+  const { data, refetch } = useQuery<PaginationResult<CatalogRecord>>({
+    queryKey: [
+        'catalog-resource',
+        resource,
+        accessToken,
+        currentLocaleCode,
+        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),
+      };
+    },
+    enabled: Boolean(resource && config && isAppReady),
+  });
+  const resourceData = (data ?? {
+    data: [],
+    total: 0,
+    page: 1,
+    pageSize: 12,
+  }) as PaginationResult<CatalogRecord>;
+
+  const safeTranslate = (key: string, fallback: string) => {
+    const translated = t(key);
+
+    if (translated === key) {
+      return fallback;
+    }
+
+    return translated;
+  };
+
+  const resolveDynamicValueLabel = (fieldKey: string, value: string) => {
+    if (!translatableValueFields.has(fieldKey)) {
+      return value;
+    }
+
+    return safeTranslate(
+      `resource.valueLabels.${fieldKey}.${value}`,
+      humanizeValue(value)
+    );
+  };
+
+  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 field?.key ? resolveDynamicValueLabel(field.key, value) : 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') },
+          ]}
+        />
+        <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 = () => {
+    setEditingRecordId(null);
+    setSheetOpen(true);
+  };
+
+  const openEdit = (record: CatalogRecord) => {
+    setEditingRecordId(Number(record.id));
+    setSheetOpen(true);
+  };
+
+  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: getCatalogLocalizedText(
+              config.createActionLabel,
+              currentLocaleCode
+            ),
+            onClick: () => {
+              openCreate();
+            },
+            icon: <Plus className="size-4" />,
+          },
+        ]}
+      />
+
+      <div className="min-w-0 space-y-4 overflow-x-hidden">
+        <StatsCards stats={statsCards} className="sm:grid-cols-3" />
+
+        <div className="min-w-0 space-y-4">
+          <SearchBar
+            searchQuery={search}
+            onSearchChange={(value) => {
+              setSearch(value);
+              setPage(1);
+            }}
+            onSearch={() => {
+              setPage(1);
+              void refetch();
+            }}
+            placeholder={t('searchPlaceholder')}
+            className="min-w-0"
+            filters={{
+              value: filterValue,
+              options: filterOptions,
+              onChange: (value) => {
+                setFilterValue(value);
+                setPage(1);
+              },
+              placeholder: t(`resource.filters.${config.primaryFilterField}`),
+            }}
+          />
+
+          {resourceData.data.length === 0 ? (
+            <EmptyState
+              icon={
+                ResourceIcon ? (
+                  <ResourceIcon className="h-12 w-12" />
+                ) : (
+                  <Search className="h-12 w-12" />
+                )
+              }
+              title={t('resource.emptyStateTitle')}
+              description={t('resource.emptyStateDescription')}
+              actionLabel={t('resource.emptyStateAction')}
+              actionIcon={<Plus className="mr-2 size-4" />}
+              onAction={openCreate}
+            />
+          ) : 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>
+          )}
+        </div>
+        <CatalogResourceFormSheet
+          open={sheetOpen}
+          onOpenChange={(open) => {
+            setSheetOpen(open);
+            if (!open) {
+              setEditingRecordId(null);
+            }
+          }}
+          resource={resource}
+          resourceConfig={config}
+          resourceTitle={resourceTitle}
+          resourceDescription={resourceDescription}
+          recordId={editingRecordId}
+          onSuccess={async () => {
+            setEditingRecordId(null);
+            await refetch();
+          }}
+        />
+
+        <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>
+  );
+}