@hed-hog/catalog 0.0.293 → 0.0.294

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

@@ -16,8 +16,8 @@ import {
   SearchBar,
   StatsCards,
 } from '@/components/entity-list';
-import {
-  AlertDialog,
+import {
+  AlertDialog,
   AlertDialogAction,
   AlertDialogCancel,
   AlertDialogContent,
@@ -25,11 +25,19 @@ import {
   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,
+} 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,
   TableCell,
   TableHead,
@@ -57,13 +65,327 @@ type ResourceStats = {
   active?: number;
 };
 
-type CatalogRecord = Record<string, unknown>;
-
-function humanizeValue(value: string) {
+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
     .replace(/[_-]+/g, ' ')
-    .replace(/\b\w/g, (char) => char.toUpperCase());
-}
+    .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 }>();
@@ -76,9 +398,10 @@ export default function CatalogResourcePage() {
   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 [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');
@@ -359,10 +682,14 @@ export default function CatalogResourcePage() {
     setSheetOpen(true);
   };
 
-  const openEdit = (record: CatalogRecord) => {
-    setEditingRecordId(Number(record.id));
-    setSheetOpen(true);
-  };
+  const openEdit = (record: CatalogRecord) => {
+    setEditingRecordId(Number(record.id));
+    setSheetOpen(true);
+  };
+
+  const openView = (record: CatalogRecord) => {
+    setViewingRecordId(Number(record.id));
+  };
 
   const handleDelete = async () => {
     if (!deleteId) {
@@ -526,11 +853,20 @@ export default function CatalogResourcePage() {
                           </TableCell>
                         ))}
                         <TableCell className="text-right">
-                          <div className="flex justify-end gap-2">
-                            <Button
-                              variant="outline"
-                              size="icon"
-                              onClick={() => openEdit(record)}
+                          <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"
+                              onClick={() => openEdit(record)}
                             >
                               <Pencil className="size-4" />
                             </Button>
@@ -573,11 +909,21 @@ export default function CatalogResourcePage() {
                     description={getCardDescription(record)}
                     badges={getBadges(record)}
                     metadata={getCardMetadata(record)}
-                    actions={[
-                      {
-                        label: t('edit'),
-                        onClick: () => openEdit(record),
-                        variant: 'outline',
+                    actions={[
+                      ...(resource === 'products'
+                        ? [
+                            {
+                              label: t('openResource'),
+                              onClick: () => openView(record),
+                              variant: 'outline' as const,
+                              icon: <Eye className="size-4" />,
+                            },
+                          ]
+                        : []),
+                      {
+                        label: t('edit'),
+                        onClick: () => openEdit(record),
+                        variant: 'outline',
                         icon: <Pencil className="size-4" />,
                       },
                       {
@@ -604,7 +950,7 @@ export default function CatalogResourcePage() {
             </div>
           )}
         </div>
-        <CatalogResourceFormSheet
+        <CatalogResourceFormSheet
           open={sheetOpen}
           onOpenChange={(open) => {
             setSheetOpen(open);
@@ -621,9 +967,21 @@ export default function CatalogResourcePage() {
             setEditingRecordId(null);
             await refetch();
           }}
-        />
-
-        <AlertDialog
+        />
+
+        {resource === 'products' ? (
+          <CatalogProductPreviewDialog
+            open={viewingRecordId !== null}
+            onOpenChange={(open) => {
+              if (!open) {
+                setViewingRecordId(null);
+              }
+            }}
+            productId={viewingRecordId}
+          />
+        ) : null}
+
+        <AlertDialog
           open={deleteId !== null}
           onOpenChange={(open) => !open && setDeleteId(null)}
         >