@hed-hog/catalog 0.0.276 → 0.0.279

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

@@ -1,12 +1,12 @@
 'use client';
-
-import { CatalogNav } from '../_components/catalog-nav';
 import {
   catalogResourceMap,
   type CatalogFieldDefinition,
   type CatalogFilterOptionDefinition,
+  getCatalogLocalizedText,
   getCatalogRecordLabel,
 } from '../_lib/catalog-resources';
+import { CatalogResourceFormSheet } from '../_components/catalog-resource-form-sheet';
 import {
   EntityCard,
   Page,
@@ -25,24 +25,8 @@ 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,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog';
-import { Label } from '@/components/ui/label';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import {
   Table,
   TableBody,
@@ -51,15 +35,13 @@ import {
   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 { Eye, Pencil, Plus, 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 { useMemo, useState } from 'react';
 import { toast } from 'sonner';
 
 type PaginationResult<T> = {
@@ -87,24 +69,15 @@ export default function CatalogResourcePage() {
   const resource = params?.resource ?? '';
   const config = catalogResourceMap.get(resource);
   const t = useTranslations('catalog');
-  const { request, currentLocaleCode } = useApp();
+  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 [dialogOpen, setDialogOpen] = useState(false);
+  const [sheetOpen, setSheetOpen] = 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 [editingRecordId, setEditingRecordId] = useState<number | null>(null);
   const resourceTitle = config
     ? t(`resources.${config.translationKey}.title`)
     : t('unsupportedResource');
@@ -122,17 +95,34 @@ export default function CatalogResourcePage() {
       }),
     [currentLocaleCode]
   );
-
-  useEffect(() => {
-    setPayload(initialPayload);
-  }, [initialPayload]);
-
-  useEffect(() => {
-    setPage(1);
-  }, [debouncedSearch, filterValue]);
+  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],
+    queryKey: [
+      'catalog-resource-stats',
+      resource,
+      accessToken,
+      currentLocaleCode,
+    ],
     queryFn: async () => {
       if (!resource || !config) {
         return { total: 0 };
@@ -152,17 +142,19 @@ export default function CatalogResourcePage() {
           statsData.active !== undefined ? Number(statsData.active) : undefined,
       };
     },
-    initialData: { total: 0 },
+    enabled: Boolean(resource && config && isAppReady),
   });
-  const resourceStats = stats as ResourceStats;
+  const resourceStats = (stats ?? { total: 0 }) as ResourceStats;
 
   const { data, refetch } = useQuery<PaginationResult<CatalogRecord>>({
     queryKey: [
-      'catalog-resource',
-      resource,
-      debouncedSearch,
-      filterValue,
-      page,
+        'catalog-resource',
+        resource,
+        accessToken,
+        currentLocaleCode,
+        debouncedSearch,
+        filterValue,
+        page,
       pageSize,
     ],
     queryFn: async () => {
@@ -199,16 +191,34 @@ export default function CatalogResourcePage() {
         pageSize: Number(responseData.pageSize ?? pageSize),
       };
     },
-    initialData: { data: [], total: 0, page: 1, pageSize: 12 },
+    enabled: Boolean(resource && config && isAppReady),
   });
-  const resourceData = data as PaginationResult<CatalogRecord>;
+  const resourceData = (data ?? {
+    data: [],
+    total: 0,
+    page: 1,
+    pageSize: 12,
+  }) as PaginationResult<CatalogRecord>;
 
   const safeTranslate = (key: string, fallback: string) => {
-    try {
-      return t(key);
-    } catch {
+    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[]) => {
@@ -246,10 +256,7 @@ export default function CatalogResourcePage() {
     }
 
     if (typeof value === 'string') {
-      return safeTranslate(
-        `resource.valueLabels.${field?.key}.${value}`,
-        humanizeValue(value)
-      );
+      return field?.key ? resolveDynamicValueLabel(field.key, value) : value;
     }
 
     return String(value);
@@ -329,7 +336,6 @@ export default function CatalogResourcePage() {
             { label: t('resource.notFound') },
           ]}
         />
-        <CatalogNav currentHref="/catalog/dashboard" />
         <Card>
           <CardHeader>
             <CardTitle>{t('unsupportedResource')}</CardTitle>
@@ -348,46 +354,13 @@ export default function CatalogResourcePage() {
   }
 
   const openCreate = () => {
-    setEditingRecord(null);
-    setPayload(initialPayload);
-    setDialogOpen(true);
+    setEditingRecordId(null);
+    setSheetOpen(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);
-    }
+    setEditingRecordId(Number(record.id));
+    setSheetOpen(true);
   };
 
   const handleDelete = async () => {
@@ -473,191 +446,170 @@ export default function CatalogResourcePage() {
         ]}
         actions={[
           {
-            label: t('refresh'),
+            label: getCatalogLocalizedText(
+              config.createActionLabel,
+              currentLocaleCode
+            ),
             onClick: () => {
-              void refetch();
+              openCreate();
             },
-            variant: 'outline',
-            icon: <RefreshCcw className="size-4" />,
+            icon: <Plus 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 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 ? (
+            <div className="rounded-lg border border-dashed px-6 py-12 text-center text-sm text-muted-foreground">
+              {t('resource.emptyState')}
             </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.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) => (
-                          <TableHead key={column.key}>
-                            {t(`resource.fields.${column.labelKey}`)}
-                          </TableHead>
+                          <TableCell key={`${record.id}-${column.key}`}>
+                            {formatFieldValue(record[column.key], column)}
+                          </TableCell>
                         ))}
-                        <TableHead className="w-[110px] text-right">
-                          {t('resource.fields.actions')}
-                        </TableHead>
+                        <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>
-                    </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);
-                  }}
-                />
+                    ))}
+                  </TableBody>
+                </Table>
               </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);
-                  }}
-                />
+
+              <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>
-            )}
-          </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"
+              <PaginationFooter
+                currentPage={page}
+                pageSize={pageSize}
+                totalItems={resourceData.total}
+                onPageChange={setPage}
+                onPageSizeChange={(nextPageSize) => {
+                  setPageSize(nextPageSize);
+                  setPage(1);
+                }}
               />
-              <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>
+          )}
+        </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}