@hed-hog/catalog 0.0.293 → 0.0.295

package/hedhog/data/menu.yaml

@@ -28,6 +28,23 @@
       - where:
           slug: admin-catalog
 
+- menu_id:
+    where:
+      slug: /catalog
+  icon: folders
+  url: /catalog/categories
+  name:
+    en: Categories
+    pt: Categorias
+  slug: /catalog/categories
+  order: 72
+  relations:
+    role:
+      - where:
+          slug: admin
+      - where:
+          slug: admin-catalog
+
 - menu_id:
     where:
       slug: /catalog
@@ -37,7 +54,7 @@
     en: Brands
     pt: Marcas
   slug: /catalog/brands
-  order: 72
+  order: 73
   relations:
     role:
       - where:
@@ -54,7 +71,7 @@
     en: Sites
     pt: Sites
   slug: /catalog/sites
-  order: 73
+  order: 74
   relations:
     role:
       - where:
@@ -71,7 +88,7 @@
     en: Products
     pt: Produtos
   slug: /catalog/products
-  order: 74
+  order: 75
   relations:
     role:
       - where:
@@ -88,7 +105,7 @@
     en: Attribute Groups
     pt: Grupos de atributos
   slug: /catalog/attribute-groups
-  order: 75
+  order: 76
   relations:
     role:
       - where:
@@ -105,7 +122,24 @@
     en: Attributes
     pt: Atributos
   slug: /catalog/attributes
-  order: 76
+  order: 77
+  relations:
+    role:
+      - where:
+          slug: admin
+      - where:
+          slug: admin-catalog
+
+- menu_id:
+    where:
+      slug: /catalog
+  icon: list-filter
+  url: /catalog/attribute-options
+  name:
+    en: Attribute Options
+    pt: Opcoes de atributos
+  slug: /catalog/attribute-options
+  order: 78
   relations:
     role:
       - where:
@@ -122,7 +156,7 @@
     en: Category Attributes
     pt: Atributos por categoria
   slug: /catalog/category-attributes
-  order: 77
+  order: 79
   relations:
     role:
       - where:
@@ -139,7 +173,7 @@
     en: Comparisons
     pt: Comparacoes
   slug: /catalog/comparisons
-  order: 78
+  order: 80
   relations:
     role:
       - where:
@@ -156,7 +190,7 @@
     en: Offers
     pt: Ofertas
   slug: /catalog/offers
-  order: 79
+  order: 81
   relations:
     role:
       - where:
@@ -173,7 +207,7 @@
     en: Merchants
     pt: Lojistas
   slug: /catalog/merchants
-  order: 80
+  order: 82
   relations:
     role:
       - where:
@@ -190,7 +224,7 @@
     en: Affiliate Programs
     pt: Programas de afiliacao
   slug: /catalog/affiliate-programs
-  order: 81
+  order: 83
   relations:
     role:
       - where:
@@ -207,7 +241,7 @@
     en: SEO Rules
     pt: Regras de SEO
   slug: /catalog/seo-rules
-  order: 82
+  order: 84
   relations:
     role:
       - where:
@@ -224,7 +258,7 @@
     en: Import Sources
     pt: Fontes de importacao
   slug: /catalog/import-sources
-  order: 83
+  order: 85
   relations:
     role:
       - where:

package/hedhog/data/role.yaml

@@ -1,7 +1,7 @@
-- slug: admin-catalog
-  name:
-    en: Catalog Administrator
-    pt: Administrador de Catálogo
-  description:
-    en: Administrator with access to catalog, comparisons, offers and SEO rules.
-    pt: Administrador com acesso ao catálogo, comparações, ofertas e regras de SEO.
+- slug: admin-catalog
+  name:
+    en: Catalog Administrator
+    pt: Administrador de Catálogo
+  description:
+    en: Administrator with access to catalog, comparisons, offers and SEO rules.
+    pt: Administrador com acesso ao catálogo, comparações, ofertas e regras de SEO.

package/hedhog/data/route.yaml

@@ -54,3 +54,67 @@
           slug: admin
       - where:
           slug: admin-catalog
+- url: /catalog/categories/tree
+  method: GET
+  relations:
+    role:
+      - where:
+          slug: admin
+      - where:
+          slug: admin-catalog
+- url: /catalog/categories/:id/attributes
+  method: GET
+  relations:
+    role:
+      - where:
+          slug: admin
+      - where:
+          slug: admin-catalog
+- url: /catalog/products/:id/attributes
+  method: GET
+  relations:
+    role:
+      - where:
+          slug: admin
+      - where:
+          slug: admin-catalog
+- url: /catalog/products/:id/structured
+  method: GET
+  relations:
+    role:
+      - where:
+          slug: admin
+      - where:
+          slug: admin-catalog
+- url: /catalog/products/:id/comparison-payload
+  method: GET
+  relations:
+    role:
+      - where:
+          slug: admin
+      - where:
+          slug: admin-catalog
+- url: /catalog/forms/:resource/ai-assist
+  method: POST
+  relations:
+    role:
+      - where:
+          slug: admin
+      - where:
+          slug: admin-catalog
+- url: /catalog/products/:id/attributes
+  method: PUT
+  relations:
+    role:
+      - where:
+          slug: admin
+      - where:
+          slug: admin-catalog
+- url: /catalog/products/:id/materialize-snapshots
+  method: POST
+  relations:
+    role:
+      - where:
+          slug: admin
+      - where:
+          slug: admin-catalog

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

@@ -26,8 +26,16 @@ import {
   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,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
 import {
   Table,
   TableBody,
@@ -58,6 +66,20 @@ type ResourceStats = {
 };
 
 type CatalogRecord = Record<string, unknown>;
+type ProductAttributePayload = {
+  groups?: Array<{
+    id: number | null;
+    name: string;
+    slug: string;
+    attributes: Array<
+      CatalogRecord & {
+        options?: CatalogRecord[];
+        value?: CatalogRecord | null;
+        category_attribute?: CatalogRecord;
+      }
+    >;
+  }>;
+};
 
 function humanizeValue(value: string) {
   return value
@@ -65,6 +87,306 @@ function humanizeValue(value: string) {
     .replace(/\b\w/g, (char) => char.toUpperCase());
 }
 
+function CatalogProductPreviewDialog({
+  open,
+  onOpenChange,
+  productId,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  productId: number | null;
+}) {
+  const { request, currentLocaleCode } = useApp();
+  const t = useTranslations('catalog');
+  const isPt = currentLocaleCode?.startsWith('pt');
+  const { data: product, isLoading: isLoadingProduct } = useQuery<CatalogRecord | null>({
+    queryKey: ['catalog-product-preview', productId],
+    queryFn: async () => {
+      if (!productId) {
+        return null;
+      }
+
+      const response = await request({
+        url: `/catalog/products/${productId}`,
+      });
+
+      return (response.data ?? null) as CatalogRecord | null;
+    },
+    enabled: open && Boolean(productId),
+  });
+  const { data: attributes, isLoading: isLoadingAttributes } =
+    useQuery<ProductAttributePayload | null>({
+      queryKey: ['catalog-product-preview-attributes', productId],
+      queryFn: async () => {
+        if (!productId) {
+          return null;
+        }
+
+        const response = await request({
+          url: `/catalog/products/${productId}/attributes`,
+        });
+
+        return (response.data ?? null) as ProductAttributePayload | null;
+      },
+      enabled: open && Boolean(productId),
+    });
+
+  const formatAttributeValue = (attribute: CatalogRecord & {
+    options?: CatalogRecord[];
+    value?: CatalogRecord | null;
+  }) => {
+    const value = (attribute.value ?? null) as CatalogRecord | null;
+
+    if (!value) {
+      return '-';
+    }
+
+    const dataType = String(attribute.data_type ?? 'text');
+
+    if (dataType === 'option') {
+      const option = (attribute.options ?? []).find(
+        (item) => Number(item.id ?? 0) === Number(value.attribute_option_id ?? 0),
+      );
+      return String(option?.label ?? option?.option_value ?? value.value_text ?? '-');
+    }
+
+    if (dataType === 'number') {
+      const numberValue =
+        value.value_number === null || value.value_number === undefined
+          ? null
+          : Number(value.value_number);
+
+      if (numberValue === null) {
+        return '-';
+      }
+
+      const unit = String(value.value_unit ?? attribute.unit ?? '').trim();
+      return unit ? `${numberValue} ${unit}` : String(numberValue);
+    }
+
+    if (dataType === 'boolean') {
+      if (value.value_boolean === null || value.value_boolean === undefined) {
+        return '-';
+      }
+
+      return value.value_boolean
+        ? t('resource.booleans.true')
+        : t('resource.booleans.false');
+    }
+
+    return String(value.value_text ?? '-');
+  };
+
+  const renderJsonBlock = (value: unknown) => {
+    if (!value || (typeof value === 'object' && Object.keys(value as object).length === 0)) {
+      return null;
+    }
+
+    return (
+      <pre className="overflow-x-auto rounded-md border bg-muted/30 p-3 text-xs">
+        {JSON.stringify(value, null, 2)}
+      </pre>
+    );
+  };
+
+  const specSnapshotBlock = renderJsonBlock(product?.spec_snapshot_json);
+  const comparisonSnapshotBlock = renderJsonBlock(product?.comparison_snapshot_json);
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-h-[90vh] overflow-y-auto sm:max-w-4xl">
+        <DialogHeader>
+          <DialogTitle>
+            {String(product?.name ?? (isPt ? 'Visualizar produto' : 'View product'))}
+          </DialogTitle>
+          <DialogDescription>
+            {isPt
+              ? 'Dados básicos, atributos técnicos por grupo, imagens e snapshots secundários.'
+              : 'Basic data, technical attributes by group, images, and secondary snapshots.'}
+          </DialogDescription>
+        </DialogHeader>
+
+        {isLoadingProduct || isLoadingAttributes ? (
+          <div className="flex items-center gap-2 text-sm text-muted-foreground">
+            <Eye className="size-4" />
+            {isPt ? 'Carregando visualização do produto...' : 'Loading product preview...'}
+          </div>
+        ) : !product ? (
+          <p className="text-sm text-muted-foreground">
+            {isPt ? 'Produto não encontrado.' : 'Product not found.'}
+          </p>
+        ) : (
+          <div className="space-y-6">
+            <Card>
+              <CardHeader>
+                <CardTitle>{isPt ? 'Dados básicos do produto' : 'Product basics'}</CardTitle>
+              </CardHeader>
+              <CardContent className="grid gap-4 sm:grid-cols-2">
+                <div>
+                  <div className="text-xs text-muted-foreground">
+                    {t('resource.fields.brandId')}
+                  </div>
+                  <div className="font-medium">
+                    {String(product.brand_name ?? product.brand_id ?? '-')}
+                  </div>
+                </div>
+                <div>
+                  <div className="text-xs text-muted-foreground">
+                    {t('resource.fields.catalogCategoryId')}
+                  </div>
+                  <div className="font-medium">
+                    {String(product.category_name ?? product.catalog_category_id ?? '-')}
+                  </div>
+                </div>
+                <div>
+                  <div className="text-xs text-muted-foreground">{t('resource.fields.status')}</div>
+                  <div className="font-medium">
+                    {String(product.status ?? '-')}
+                  </div>
+                </div>
+                <div>
+                  <div className="text-xs text-muted-foreground">{t('resource.fields.isActive')}</div>
+                  <div className="font-medium">
+                    {product.is_active === true
+                      ? t('resource.booleans.true')
+                      : t('resource.booleans.false')}
+                  </div>
+                </div>
+                <div>
+                  <div className="text-xs text-muted-foreground">{t('resource.fields.sku')}</div>
+                  <div className="font-medium">{String(product.sku ?? '-')}</div>
+                </div>
+                <div>
+                  <div className="text-xs text-muted-foreground">GTIN</div>
+                  <div className="font-medium">{String(product.gtin ?? '-')}</div>
+                </div>
+              </CardContent>
+            </Card>
+
+            <Card>
+              <CardHeader>
+                <CardTitle>{isPt ? 'Atributos técnicos' : 'Technical attributes'}</CardTitle>
+                <CardDescription>
+                  {isPt
+                    ? 'Organizados pelos grupos configurados na categoria do produto.'
+                    : 'Organized by the groups configured for the product category.'}
+                </CardDescription>
+              </CardHeader>
+              <CardContent className="space-y-6">
+                {!(attributes?.groups?.length) ? (
+                  <p className="text-sm text-muted-foreground">
+                    {isPt
+                      ? 'Nenhum atributo técnico configurado para este produto.'
+                      : 'No technical attributes configured for this product.'}
+                  </p>
+                ) : (
+                  attributes.groups.map((group) => (
+                    <div key={`${group.slug}-${group.id ?? 'general'}`} className="space-y-3">
+                      <div className="text-sm font-semibold">{group.name}</div>
+                      <div className="grid gap-3 sm:grid-cols-2">
+                        {group.attributes.map((attribute) => {
+                          const relation = (attribute.category_attribute ?? {}) as CatalogRecord;
+                          const badges = [
+                            relation.is_highlight
+                              ? isPt
+                                ? 'Destaque'
+                                : 'Highlight'
+                              : null,
+                            relation.is_filter_visible
+                              ? isPt
+                                ? 'Filtro'
+                                : 'Filter'
+                              : null,
+                            relation.is_comparison_visible
+                              ? isPt
+                                ? 'Comparação'
+                                : 'Comparison'
+                              : null,
+                          ].filter((item): item is string => Boolean(item));
+
+                          return (
+                            <div key={String(attribute.id)} className="rounded-lg border p-3">
+                              <div className="flex items-start justify-between gap-3">
+                                <div className="space-y-1">
+                                  <div className="font-medium">
+                                    {String(attribute.name ?? attribute.label ?? attribute.slug)}
+                                  </div>
+                                  <div className="text-sm text-muted-foreground">
+                                    {formatAttributeValue(attribute)}
+                                  </div>
+                                </div>
+                                {badges.length ? (
+                                  <div className="flex flex-wrap justify-end gap-2">
+                                    {badges.map((badge) => (
+                                      <Badge key={`${attribute.id}-${badge}`} variant="secondary">
+                                        {badge}
+                                      </Badge>
+                                    ))}
+                                  </div>
+                                ) : null}
+                              </div>
+                            </div>
+                          );
+                        })}
+                      </div>
+                    </div>
+                  ))
+                )}
+              </CardContent>
+            </Card>
+
+            {Array.isArray(product.catalog_product_image) &&
+            product.catalog_product_image.length > 0 ? (
+              <Card>
+                <CardHeader>
+                  <CardTitle>{isPt ? 'Imagens do produto' : 'Product images'}</CardTitle>
+                </CardHeader>
+                <CardContent className="grid gap-3 sm:grid-cols-2">
+                  {product.catalog_product_image.map((image) => (
+                    <div
+                      key={String(image.id)}
+                      className="rounded-lg border p-3 text-sm"
+                    >
+                      <div className="font-medium">
+                        #{String(image.id)} · {String(image.role ?? 'gallery')}
+                      </div>
+                      <div className="text-muted-foreground">
+                        File #{String(image.file_id ?? '-')}
+                      </div>
+                    </div>
+                  ))}
+                </CardContent>
+              </Card>
+            ) : null}
+
+            <Card>
+              <CardHeader>
+                <CardTitle>{isPt ? 'Snapshots secundários' : 'Secondary snapshots'}</CardTitle>
+                <CardDescription>
+                  {isPt
+                    ? 'Mantidos como apoio para cache e leituras legadas.'
+                    : 'Kept as support for cache and legacy reads.'}
+                </CardDescription>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                {specSnapshotBlock}
+                {comparisonSnapshotBlock}
+                {!specSnapshotBlock && !comparisonSnapshotBlock ? (
+                  <p className="text-sm text-muted-foreground">
+                    {isPt
+                      ? 'Nenhum snapshot secundário disponível.'
+                      : 'No secondary snapshots available.'}
+                  </p>
+                ) : null}
+              </CardContent>
+            </Card>
+          </div>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}
+
 export default function CatalogResourcePage() {
   const params = useParams<{ resource: string }>();
   const resource = params?.resource ?? '';
@@ -79,6 +401,7 @@ export default function CatalogResourcePage() {
   const [sheetOpen, setSheetOpen] = useState(false);
   const [deleteId, setDeleteId] = useState<number | null>(null);
   const [editingRecordId, setEditingRecordId] = useState<number | null>(null);
+  const [viewingRecordId, setViewingRecordId] = useState<number | null>(null);
   const resourceTitle = config
     ? t(`resources.${config.translationKey}.title`)
     : t('unsupportedResource');
@@ -364,6 +687,10 @@ export default function CatalogResourcePage() {
     setSheetOpen(true);
   };
 
+  const openView = (record: CatalogRecord) => {
+    setViewingRecordId(Number(record.id));
+  };
+
   const handleDelete = async () => {
     if (!deleteId) {
       return;
@@ -527,6 +854,15 @@ export default function CatalogResourcePage() {
                         ))}
                         <TableCell className="text-right">
                           <div className="flex justify-end gap-2">
+                            {resource === 'products' ? (
+                              <Button
+                                variant="outline"
+                                size="icon"
+                                onClick={() => openView(record)}
+                              >
+                                <Eye className="size-4" />
+                              </Button>
+                            ) : null}
                             <Button
                               variant="outline"
                               size="icon"
@@ -574,6 +910,16 @@ export default function CatalogResourcePage() {
                     badges={getBadges(record)}
                     metadata={getCardMetadata(record)}
                     actions={[
+                      ...(resource === 'products'
+                        ? [
+                            {
+                              label: t('openResource'),
+                              onClick: () => openView(record),
+                              variant: 'outline' as const,
+                              icon: <Eye className="size-4" />,
+                            },
+                          ]
+                        : []),
                       {
                         label: t('edit'),
                         onClick: () => openEdit(record),
@@ -623,6 +969,18 @@ export default function CatalogResourcePage() {
           }}
         />
 
+        {resource === 'products' ? (
+          <CatalogProductPreviewDialog
+            open={viewingRecordId !== null}
+            onOpenChange={(open) => {
+              if (!open) {
+                setViewingRecordId(null);
+              }
+            }}
+            productId={viewingRecordId}
+          />
+        ) : null}
+
         <AlertDialog
           open={deleteId !== null}
           onOpenChange={(open) => !open && setDeleteId(null)}