@hed-hog/catalog 0.0.276

package/hedhog/frontend/app/_components/catalog-nav.tsx.ejs

@@ -0,0 +1,85 @@
+'use client';
+
+import { Badge } from '@/components/ui/badge';
+import { cn } from '@/lib/utils';
+import Link from 'next/link';
+import { useTranslations } from 'next-intl';
+import {
+  catalogDashboardHref,
+  catalogModuleIcon,
+  catalogResources,
+} from '../_lib/catalog-resources';
+
+type CatalogNavProps = {
+  currentHref: string;
+};
+
+export function CatalogNav({ currentHref }: CatalogNavProps) {
+  const t = useTranslations('catalog');
+  const ModuleIcon = catalogModuleIcon;
+
+  const items = [
+    {
+      href: catalogDashboardHref,
+      label: t('dashboard.title'),
+      description: t('dashboard.subtitle'),
+      icon: ModuleIcon,
+    },
+    ...catalogResources.map((resource) => ({
+      href: resource.href,
+      label: t(`resources.${resource.translationKey}.title`),
+      description: t(`resources.${resource.translationKey}.description`),
+      icon: resource.icon,
+    })),
+  ];
+
+  return (
+    <div className="min-w-0">
+      <div className="flex gap-2 overflow-x-auto pb-2 md:pb-1 lg:grid lg:grid-cols-2 lg:overflow-visible xl:grid-cols-3 2xl:grid-cols-4">
+        {items.map((item) => {
+          const active = currentHref === item.href;
+          const Icon = item.icon;
+
+          return (
+            <Link
+              key={item.href}
+              href={item.href}
+              className={cn(
+                'group flex w-[280px] max-w-[85vw] shrink-0 snap-start items-start gap-3 rounded-2xl border px-4 py-3 transition-all lg:min-w-0 lg:max-w-none lg:w-full',
+                active
+                  ? 'border-orange-300 bg-orange-50 text-orange-950 shadow-sm'
+                  : 'border-border/70 bg-card hover:-translate-y-0.5 hover:border-orange-200 hover:bg-orange-50/40'
+              )}
+            >
+              <div
+                className={cn(
+                  'mt-0.5 rounded-xl p-2 transition-colors',
+                  active
+                    ? 'bg-orange-500 text-white'
+                    : 'bg-muted text-muted-foreground group-hover:bg-orange-100 group-hover:text-orange-700'
+                )}
+              >
+                <Icon className="size-4" />
+              </div>
+              <div className="min-w-0 space-y-1">
+                <div className="flex min-w-0 items-center gap-2">
+                  <span className="truncate text-sm font-semibold">
+                    {item.label}
+                  </span>
+                  {active ? (
+                    <Badge className="rounded-full bg-orange-500 px-2 py-0 text-[10px] text-white hover:bg-orange-500">
+                      {t('navigation.current')}
+                    </Badge>
+                  ) : null}
+                </div>
+                <p className="line-clamp-2 text-xs text-muted-foreground">
+                  {item.description}
+                </p>
+              </div>
+            </Link>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

package/hedhog/frontend/app/_lib/catalog-resources.tsx.ejs

@@ -0,0 +1,569 @@
+import type { LucideIcon } from 'lucide-react';
+import {
+  BadgePercent,
+  Boxes,
+  Building2,
+  Eye,
+  Factory,
+  Globe2,
+  Layers3,
+  ListFilter,
+  PackageSearch,
+  PackagePlus,
+  Scale,
+  SearchCode,
+  ShoppingCart,
+  Store,
+  Tags,
+} from 'lucide-react';
+
+type CatalogListVariant = 'cards' | 'table';
+
+type CatalogFieldDisplayType = 'text' | 'boolean' | 'currency';
+
+export type CatalogFieldDefinition = {
+  key: string;
+  labelKey: string;
+  type?: CatalogFieldDisplayType;
+};
+
+export type CatalogFilterOptionDefinition = {
+  value: string;
+  labelKey: string;
+};
+
+export type CatalogContextualKpiDefinition = {
+  translationKey: string;
+  icon: LucideIcon;
+  count: (records: Record<string, unknown>[]) => number;
+};
+
+export type CatalogResourceDefinition = {
+  resource: string;
+  translationKey: string;
+  icon: LucideIcon;
+  href: string;
+  colorClass: string;
+  glowClass: string;
+  featured?: boolean;
+  hasActiveStats?: boolean;
+  template: Record<string, unknown>;
+  listVariant: CatalogListVariant;
+  primaryFilterField: string;
+  primaryFilterOptions: CatalogFilterOptionDefinition[];
+  titleFields: string[];
+  descriptionFields: string[];
+  badgeFields: string[];
+  cardMetadata: CatalogFieldDefinition[];
+  tableColumns?: CatalogFieldDefinition[];
+  contextualKpi: CatalogContextualKpiDefinition;
+};
+
+const statusFilterOptions: CatalogFilterOptionDefinition[] = [
+  { value: 'active', labelKey: 'active' },
+  { value: 'inactive', labelKey: 'inactive' },
+  { value: 'draft', labelKey: 'draft' },
+  { value: 'published', labelKey: 'published' },
+];
+
+const availabilityFilterOptions: CatalogFilterOptionDefinition[] = [
+  { value: 'in_stock', labelKey: 'inStock' },
+  { value: 'out_of_stock', labelKey: 'outOfStock' },
+  { value: 'preorder', labelKey: 'preorder' },
+];
+
+const dataTypeFilterOptions: CatalogFilterOptionDefinition[] = [
+  { value: 'text', labelKey: 'text' },
+  { value: 'number', labelKey: 'number' },
+  { value: 'boolean', labelKey: 'boolean' },
+  { value: 'json', labelKey: 'json' },
+];
+
+const facetModeFilterOptions: CatalogFilterOptionDefinition[] = [
+  { value: 'default', labelKey: 'default' },
+  { value: 'range', labelKey: 'range' },
+  { value: 'select', labelKey: 'select' },
+];
+
+export const catalogResources: CatalogResourceDefinition[] = [
+  {
+    resource: 'brands',
+    translationKey: 'brands',
+    icon: Factory,
+    href: '/catalog/brands',
+    colorClass: 'from-orange-500/20 via-amber-500/10 to-transparent',
+    glowClass: 'bg-orange-500/10 text-orange-700',
+    featured: true,
+    hasActiveStats: true,
+    listVariant: 'cards',
+    primaryFilterField: 'status',
+    primaryFilterOptions: statusFilterOptions,
+    titleFields: ['name', 'slug'],
+    descriptionFields: ['normalized_name', 'website_url'],
+    badgeFields: ['status'],
+    cardMetadata: [
+      { key: 'slug', labelKey: 'slug' },
+      { key: 'normalized_name', labelKey: 'normalizedName' },
+      { key: 'website_url', labelKey: 'websiteUrl' },
+    ],
+    contextualKpi: {
+      translationKey: 'visible',
+      icon: Eye,
+      count: (records) => records.length,
+    },
+    template: {
+      slug: '',
+      name: '',
+      normalized_name: '',
+      logo_file_id: null,
+      status: 'active',
+      website_url: '',
+    },
+  },
+  {
+    resource: 'sites',
+    translationKey: 'sites',
+    icon: Globe2,
+    href: '/catalog/sites',
+    colorClass: 'from-sky-500/20 via-cyan-500/10 to-transparent',
+    glowClass: 'bg-sky-500/10 text-sky-700',
+    hasActiveStats: true,
+    listVariant: 'cards',
+    primaryFilterField: 'status',
+    primaryFilterOptions: statusFilterOptions,
+    titleFields: ['name', 'domain', 'slug'],
+    descriptionFields: ['domain', 'slug'],
+    badgeFields: ['status', 'site_type'],
+    cardMetadata: [
+      { key: 'slug', labelKey: 'slug' },
+      { key: 'domain', labelKey: 'domain' },
+      { key: 'default_locale_id', labelKey: 'defaultLocaleId' },
+    ],
+    contextualKpi: {
+      translationKey: 'visible',
+      icon: Eye,
+      count: (records) => records.length,
+    },
+    template: {
+      slug: '',
+      name: '',
+      domain: '',
+      status: 'active',
+      site_type: 'portal',
+      default_locale_id: 1,
+      theme_settings_json: {},
+      seo_defaults_json: {},
+    },
+  },
+  {
+    resource: 'products',
+    translationKey: 'products',
+    icon: PackageSearch,
+    href: '/catalog/products',
+    colorClass: 'from-emerald-500/20 via-green-500/10 to-transparent',
+    glowClass: 'bg-emerald-500/10 text-emerald-700',
+    featured: true,
+    hasActiveStats: true,
+    listVariant: 'cards',
+    primaryFilterField: 'status',
+    primaryFilterOptions: statusFilterOptions,
+    titleFields: ['name', 'model_name', 'slug'],
+    descriptionFields: ['model_name', 'sku', 'slug'],
+    badgeFields: ['status', 'comparison_status', 'is_active'],
+    cardMetadata: [
+      { key: 'slug', labelKey: 'slug' },
+      { key: 'sku', labelKey: 'sku' },
+      { key: 'brand_id', labelKey: 'brandId' },
+      { key: 'category_id', labelKey: 'categoryId' },
+    ],
+    contextualKpi: {
+      translationKey: 'activeInSlice',
+      icon: PackageSearch,
+      count: (records) =>
+        records.filter((record) => record.is_active === true).length,
+    },
+    template: {
+      brand_id: 1,
+      category_id: 1,
+      slug: '',
+      name: '',
+      status: 'draft',
+      comparison_status: 'draft',
+      is_active: true,
+    },
+  },
+  {
+    resource: 'attribute-groups',
+    translationKey: 'attributeGroups',
+    icon: Layers3,
+    href: '/catalog/attribute-groups',
+    colorClass: 'from-violet-500/20 via-fuchsia-500/10 to-transparent',
+    glowClass: 'bg-violet-500/10 text-violet-700',
+    hasActiveStats: true,
+    listVariant: 'table',
+    primaryFilterField: 'status',
+    primaryFilterOptions: statusFilterOptions,
+    titleFields: ['name', 'slug'],
+    descriptionFields: ['slug'],
+    badgeFields: ['status'],
+    cardMetadata: [
+      { key: 'slug', labelKey: 'slug' },
+      { key: 'status', labelKey: 'status' },
+    ],
+    tableColumns: [
+      { key: 'id', labelKey: 'id' },
+      { key: 'name', labelKey: 'name' },
+      { key: 'slug', labelKey: 'slug' },
+      { key: 'status', labelKey: 'status' },
+    ],
+    contextualKpi: {
+      translationKey: 'visible',
+      icon: Eye,
+      count: (records) => records.length,
+    },
+    template: {
+      slug: '',
+      name: '',
+      status: 'active',
+    },
+  },
+  {
+    resource: 'attributes',
+    translationKey: 'attributes',
+    icon: Tags,
+    href: '/catalog/attributes',
+    colorClass: 'from-indigo-500/20 via-blue-500/10 to-transparent',
+    glowClass: 'bg-indigo-500/10 text-indigo-700',
+    listVariant: 'table',
+    primaryFilterField: 'data_type',
+    primaryFilterOptions: dataTypeFilterOptions,
+    titleFields: ['label', 'slug'],
+    descriptionFields: ['description', 'slug'],
+    badgeFields: ['data_type', 'comparison_mode'],
+    cardMetadata: [
+      { key: 'group_id', labelKey: 'groupId' },
+      { key: 'is_filterable', labelKey: 'isFilterable', type: 'boolean' },
+      {
+        key: 'is_required_for_comparison',
+        labelKey: 'requiredForComparison',
+        type: 'boolean',
+      },
+    ],
+    tableColumns: [
+      { key: 'id', labelKey: 'id' },
+      { key: 'label', labelKey: 'label' },
+      { key: 'slug', labelKey: 'slug' },
+      { key: 'data_type', labelKey: 'dataType' },
+      { key: 'comparison_mode', labelKey: 'comparisonMode' },
+    ],
+    contextualKpi: {
+      translationKey: 'filterableInSlice',
+      icon: ListFilter,
+      count: (records) =>
+        records.filter((record) => record.is_filterable === true).length,
+    },
+    template: {
+      group_id: 1,
+      slug: '',
+      label: '',
+      data_type: 'text',
+      comparison_mode: 'neutral',
+      is_filterable: true,
+      is_sortable: false,
+      is_required_for_comparison: false,
+      normalization_rule_json: {},
+      display_order: 0,
+    },
+  },
+  {
+    resource: 'category-attributes',
+    translationKey: 'categoryAttributes',
+    icon: BadgePercent,
+    href: '/catalog/category-attributes',
+    colorClass: 'from-pink-500/20 via-rose-500/10 to-transparent',
+    glowClass: 'bg-pink-500/10 text-pink-700',
+    listVariant: 'table',
+    primaryFilterField: 'facet_mode',
+    primaryFilterOptions: facetModeFilterOptions,
+    titleFields: ['attribute_id', 'category_id'],
+    descriptionFields: ['facet_mode'],
+    badgeFields: ['facet_mode', 'is_required', 'is_highlighted'],
+    cardMetadata: [
+      { key: 'category_id', labelKey: 'categoryId' },
+      { key: 'attribute_id', labelKey: 'attributeId' },
+      { key: 'weight', labelKey: 'weight' },
+    ],
+    tableColumns: [
+      { key: 'id', labelKey: 'id' },
+      { key: 'category_id', labelKey: 'categoryId' },
+      { key: 'attribute_id', labelKey: 'attributeId' },
+      { key: 'facet_mode', labelKey: 'facetMode' },
+      { key: 'is_required', labelKey: 'isRequired', type: 'boolean' },
+      { key: 'is_highlighted', labelKey: 'isHighlighted', type: 'boolean' },
+    ],
+    contextualKpi: {
+      translationKey: 'requiredInSlice',
+      icon: BadgePercent,
+      count: (records) =>
+        records.filter((record) => record.is_required === true).length,
+    },
+    template: {
+      category_id: 1,
+      attribute_id: 1,
+      is_required: false,
+      is_highlighted: true,
+      display_order: 0,
+      weight: 1,
+      facet_mode: 'default',
+    },
+  },
+  {
+    resource: 'comparisons',
+    translationKey: 'comparisons',
+    icon: Scale,
+    href: '/catalog/comparisons',
+    colorClass: 'from-amber-500/20 via-yellow-500/10 to-transparent',
+    glowClass: 'bg-amber-500/10 text-amber-700',
+    hasActiveStats: true,
+    listVariant: 'cards',
+    primaryFilterField: 'status',
+    primaryFilterOptions: statusFilterOptions,
+    titleFields: ['title', 'slug'],
+    descriptionFields: ['summary', 'slug'],
+    badgeFields: ['status', 'comparison_type', 'generation_mode'],
+    cardMetadata: [
+      { key: 'slug', labelKey: 'slug' },
+      { key: 'site_id', labelKey: 'siteId' },
+      { key: 'category_id', labelKey: 'categoryId' },
+    ],
+    contextualKpi: {
+      translationKey: 'publishedInSlice',
+      icon: Scale,
+      count: (records) =>
+        records.filter((record) =>
+          ['active', 'published'].includes(String(record.status ?? ''))
+        ).length,
+    },
+    template: {
+      category_id: 1,
+      site_id: 1,
+      slug: '',
+      comparison_type: 'manual',
+      generation_mode: 'manual',
+      status: 'draft',
+      title: '',
+      summary: '',
+      intro: '',
+      verdict: '',
+    },
+  },
+  {
+    resource: 'offers',
+    translationKey: 'offers',
+    icon: ShoppingCart,
+    href: '/catalog/offers',
+    colorClass: 'from-red-500/20 via-orange-500/10 to-transparent',
+    glowClass: 'bg-red-500/10 text-red-700',
+    featured: true,
+    listVariant: 'cards',
+    primaryFilterField: 'availability_status',
+    primaryFilterOptions: availabilityFilterOptions,
+    titleFields: ['title', 'external_offer_id'],
+    descriptionFields: ['external_offer_id', 'affiliate_url'],
+    badgeFields: ['availability_status', 'is_featured'],
+    cardMetadata: [
+      { key: 'price_amount', labelKey: 'priceAmount', type: 'currency' },
+      { key: 'merchant_id', labelKey: 'merchantId' },
+      { key: 'product_id', labelKey: 'productId' },
+    ],
+    contextualKpi: {
+      translationKey: 'inStockInSlice',
+      icon: ShoppingCart,
+      count: (records) =>
+        records.filter((record) => record.availability_status === 'in_stock')
+          .length,
+    },
+    template: {
+      product_id: 1,
+      merchant_id: 1,
+      title: '',
+      price_amount: 0,
+      price_currency: 'BRL',
+      availability_status: 'in_stock',
+      priority_score: 0,
+      is_featured: false,
+    },
+  },
+  {
+    resource: 'merchants',
+    translationKey: 'merchants',
+    icon: Store,
+    href: '/catalog/merchants',
+    colorClass: 'from-lime-500/20 via-green-500/10 to-transparent',
+    glowClass: 'bg-lime-500/10 text-lime-700',
+    featured: true,
+    hasActiveStats: true,
+    listVariant: 'cards',
+    primaryFilterField: 'status',
+    primaryFilterOptions: statusFilterOptions,
+    titleFields: ['name', 'slug'],
+    descriptionFields: ['slug'],
+    badgeFields: ['status', 'merchant_type'],
+    cardMetadata: [
+      { key: 'slug', labelKey: 'slug' },
+      { key: 'merchant_type', labelKey: 'merchantType' },
+      { key: 'logo_file_id', labelKey: 'logoFileId' },
+    ],
+    contextualKpi: {
+      translationKey: 'visible',
+      icon: Eye,
+      count: (records) => records.length,
+    },
+    template: {
+      slug: '',
+      name: '',
+      status: 'active',
+      merchant_type: 'retailer',
+    },
+  },
+  {
+    resource: 'affiliate-programs',
+    translationKey: 'affiliatePrograms',
+    icon: Building2,
+    href: '/catalog/affiliate-programs',
+    colorClass: 'from-cyan-500/20 via-teal-500/10 to-transparent',
+    glowClass: 'bg-cyan-500/10 text-cyan-700',
+    hasActiveStats: true,
+    listVariant: 'cards',
+    primaryFilterField: 'status',
+    primaryFilterOptions: statusFilterOptions,
+    titleFields: ['name', 'slug'],
+    descriptionFields: ['slug', 'network_type'],
+    badgeFields: ['status', 'network_type', 'commission_type'],
+    cardMetadata: [
+      { key: 'merchant_id', labelKey: 'merchantId' },
+      { key: 'commission_type', labelKey: 'commissionType' },
+      {
+        key: 'default_commission_value',
+        labelKey: 'defaultCommissionValue',
+        type: 'currency',
+      },
+    ],
+    contextualKpi: {
+      translationKey: 'visible',
+      icon: Eye,
+      count: (records) => records.length,
+    },
+    template: {
+      merchant_id: 1,
+      slug: '',
+      name: '',
+      network_type: 'direct',
+      commission_type: 'percentage',
+      default_commission_value: 0,
+      status: 'active',
+    },
+  },
+  {
+    resource: 'seo-rules',
+    translationKey: 'seoRules',
+    icon: SearchCode,
+    href: '/catalog/seo-rules',
+    colorClass: 'from-slate-500/20 via-zinc-500/10 to-transparent',
+    glowClass: 'bg-slate-500/10 text-slate-700',
+    featured: true,
+    hasActiveStats: true,
+    listVariant: 'cards',
+    primaryFilterField: 'status',
+    primaryFilterOptions: statusFilterOptions,
+    titleFields: ['rule_slug', 'page_type'],
+    descriptionFields: ['page_type', 'canonical_strategy'],
+    badgeFields: ['status', 'page_type', 'canonical_strategy'],
+    cardMetadata: [
+      { key: 'site_id', labelKey: 'siteId' },
+      { key: 'category_id', labelKey: 'categoryId' },
+      { key: 'priority', labelKey: 'priority' },
+    ],
+    contextualKpi: {
+      translationKey: 'visible',
+      icon: Eye,
+      count: (records) => records.length,
+    },
+    template: {
+      site_id: 1,
+      page_type: 'comparison',
+      rule_slug: '',
+      status: 'active',
+      generation_query_json: {},
+      min_product_count: 2,
+      min_attribute_coverage: 1,
+      canonical_strategy: 'self',
+      priority: 0,
+      template_json: {},
+    },
+  },
+  {
+    resource: 'import-sources',
+    translationKey: 'importSources',
+    icon: PackagePlus,
+    href: '/catalog/import-sources',
+    colorClass: 'from-stone-500/20 via-neutral-500/10 to-transparent',
+    glowClass: 'bg-stone-500/10 text-stone-700',
+    featured: true,
+    hasActiveStats: true,
+    listVariant: 'cards',
+    primaryFilterField: 'status',
+    primaryFilterOptions: statusFilterOptions,
+    titleFields: ['name', 'slug'],
+    descriptionFields: ['slug', 'source_type'],
+    badgeFields: ['status', 'source_type'],
+    cardMetadata: [
+      { key: 'slug', labelKey: 'slug' },
+      { key: 'source_type', labelKey: 'sourceType' },
+      { key: 'status', labelKey: 'status' },
+    ],
+    contextualKpi: {
+      translationKey: 'visible',
+      icon: Eye,
+      count: (records) => records.length,
+    },
+    template: {
+      slug: '',
+      name: '',
+      source_type: 'api',
+      config_json: {},
+      status: 'active',
+    },
+  },
+];
+
+export const catalogResourceMap = new Map(
+  catalogResources.map((resource) => [resource.resource, resource])
+);
+
+export const catalogDashboardHref = '/catalog/dashboard';
+
+export const catalogQuickActionResources = catalogResources.filter(
+  (resource) => resource.featured
+);
+
+export const catalogKpiResources = [
+  'products',
+  'brands',
+  'offers',
+  'merchants',
+];
+
+export function getCatalogRecordLabel(record: Record<string, unknown>) {
+  return (
+    record.name ||
+    record.title ||
+    record.label ||
+    record.slug ||
+    record.rule_slug ||
+    record.external_offer_id ||
+    `#${record.id}`
+  );
+}
+
+export const catalogModuleIcon = Boxes;