@hed-hog/core 0.0.355 → 0.0.358

package/hedhog/frontend/app/setting-list/page.tsx.ejs

@@ -1,54 +1,55 @@
 'use client';
 
-import {
-  closestCenter,
-  DndContext,
-  type DragEndEvent,
-  PointerSensor,
-  useSensor,
-  useSensors,
-} from '@dnd-kit/core';
-import {
-  arrayMove,
-  SortableContext,
-  useSortable,
-  verticalListSortingStrategy,
-} from '@dnd-kit/sortable';
-import { CSS } from '@dnd-kit/utilities';
 import {
   EmptyState,
+  EntityCard,
   Page,
   PageHeader,
+  PaginationFooter,
   SearchBar,
+  ViewModeToggle,
 } from '@/components/entity-list';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from '@/components/ui/card';
+import { Card, CardContent } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
-import { KpiCardsGrid } from '@/components/ui/kpi-cards-grid';
+import { ResizableSheetContent } from '@/components/ui/resizable-sheet-content';
 import {
   Sheet,
   SheetDescription,
+  SheetFooter,
   SheetHeader,
   SheetTitle,
 } from '@/components/ui/sheet';
-import { ResizableSheetContent } from '@/components/ui/resizable-sheet-content';
 import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from '@/components/ui/tooltip';
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { usePersistedPageSize } from '@/hooks/use-persisted-page-size';
+import { usePersistedViewMode } from '@/hooks/use-persisted-view-mode';
 import { PaginatedResult } from '@/types/pagination-result';
+import {
+  closestCenter,
+  DndContext,
+  type DragEndEvent,
+  PointerSensor,
+  useSensor,
+  useSensors,
+} from '@dnd-kit/core';
+import {
+  arrayMove,
+  SortableContext,
+  useSortable,
+  verticalListSortingStrategy,
+} from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
 import {
   Setting,
   SettingComponentEnum,
-  SettingGroup,
   SettingSubgroup,
 } from '@hed-hog/api-types';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
@@ -57,9 +58,8 @@ import {
   ListTree,
   Pencil,
   Plus,
+  RefreshCw,
   Save,
-  Settings2,
-  SlidersHorizontal,
   Trash2,
 } from 'lucide-react';
 import { useTranslations } from 'next-intl';
@@ -75,14 +75,6 @@ type SettingWithList = Setting & {
   }>;
 };
 
-type SubgroupSection = {
-  key: string;
-  slug: string;
-  name: string;
-  description?: string;
-  settings: SettingWithList[];
-};
-
 type DraftOption = {
   id: string;
   value: string;
@@ -102,8 +94,17 @@ export default function CoreSettingListPage() {
   const t = useTranslations('core.SettingListPage');
   const { request, currentLocaleCode, showToastHandler } = useApp();
   const [search, setSearch] = useState('');
-  const [activeGroupSlug, setActiveGroupSlug] = useState<string>('all');
-  const [activeSubgroupSlug, setActiveSubgroupSlug] = useState<string>('all');
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = usePersistedPageSize({
+    storageKey: 'pagination:setting-list:pageSize',
+    defaultValue: 12,
+    allowedValues: [6, 12, 24, 48],
+  });
+  const [viewMode, setViewMode] = usePersistedViewMode({
+    storageKey: 'pagination:setting-list:viewMode',
+    defaultValue: 'list' as const,
+    allowedValues: ['list', 'cards'] as const,
+  });
   const [savingOptionBySettingId, setSavingOptionBySettingId] = useState<
     Record<number, boolean>
   >({});
@@ -123,57 +124,15 @@ export default function CoreSettingListPage() {
     })
   );
 
-  const { data: groupsPage } = useQuery<PaginatedResult<SettingGroup>>({
-    queryKey: ['core-setting-list-groups', currentLocaleCode],
-    queryFn: async () => {
-      const response = await request<PaginatedResult<SettingGroup>>({
-        url: '/setting/group?page=1&pageSize=100',
-        method: 'GET',
-      });
-      return response.data;
-    },
-    placeholderData: (previous) =>
-      previous ?? createEmptyPage<SettingGroup>(100),
-  });
-
-  const groups = useMemo<SettingGroup[]>(
-    () => groupsPage?.data ?? [],
-    [groupsPage]
-  );
-
-  useEffect(() => {
-    if (!groups.length) return;
-
-    if (activeGroupSlug === 'all') {
-      return;
-    }
-
-    const groupExists = groups.some(
-      (group: SettingGroup) => group.slug === activeGroupSlug
-    );
-    if (!groupExists) {
-      setActiveGroupSlug('all');
-    }
-  }, [activeGroupSlug, groups]);
-
-  useEffect(() => {
-    setActiveSubgroupSlug('all');
-  }, [activeGroupSlug]);
-
   const {
     data: settingsPage,
     isLoading,
     refetch,
   } = useQuery<PaginatedResult<SettingWithList>>({
-    queryKey: ['core-setting-list-items', activeGroupSlug, currentLocaleCode],
+    queryKey: ['core-setting-list-items', currentLocaleCode],
     queryFn: async () => {
-      const url =
-        activeGroupSlug === 'all'
-          ? '/setting?page=1&pageSize=500'
-          : `/setting/group/${activeGroupSlug}?page=1&pageSize=200`;
-
       const response = await request<PaginatedResult<SettingWithList>>({
-        url,
+        url: '/setting?page=1&pageSize=500',
         method: 'GET',
       });
       return response.data;
@@ -191,62 +150,22 @@ export default function CoreSettingListPage() {
     () =>
       allSettings.filter((setting) => {
         const component = setting.component;
-        const isListComponent =
+        return (
           component === SettingComponentEnum.COMBOBOX ||
-          component === SettingComponentEnum.CHECKBOX;
-
-        return isListComponent;
+          component === SettingComponentEnum.CHECKBOX
+        );
       }),
     [allSettings]
   );
 
-  const subgroupOptions = useMemo(() => {
-    const map = new Map<
-      string,
-      { value: string; label: string; description?: string }
-    >();
-
-    listTypeSettings.forEach((setting) => {
-      const subgroup = setting.setting_subgroup;
-      if (!subgroup?.slug) {
-        return;
-      }
-
-      map.set(subgroup.slug, {
-        value: subgroup.slug,
-        label: subgroup.name?.toString() || subgroup.slug,
-        description: subgroup.description?.toString() || undefined,
-      });
-    });
-
-    return Array.from(map.values()).sort((left, right) =>
-      left.label.localeCompare(right.label)
-    );
-  }, [listTypeSettings]);
-
-  const visibleSettings = useMemo(() => {
-    if (activeSubgroupSlug === 'all') {
-      return listTypeSettings;
-    }
-
-    return listTypeSettings.filter(
-      (setting) => setting.setting_subgroup?.slug === activeSubgroupSlug
-    );
-  }, [activeSubgroupSlug, listTypeSettings]);
-
-  const currentGroup = useMemo(
-    () => groups.find((group) => group.slug === activeGroupSlug) ?? null,
-    [activeGroupSlug, groups]
-  );
-
   const filteredSettings = useMemo(() => {
     const normalizedQuery = search.trim().toLowerCase();
 
     if (!normalizedQuery) {
-      return visibleSettings;
+      return listTypeSettings;
     }
 
-    return visibleSettings.filter((setting: SettingWithList) => {
+    return listTypeSettings.filter((setting: SettingWithList) => {
       const options = (setting.setting_list ?? []).map(
         (option: { value: string }) => option.value
       );
@@ -264,94 +183,15 @@ export default function CoreSettingListPage() {
 
       return text.includes(normalizedQuery);
     });
-  }, [search, visibleSettings]);
-
-  const groupedSections = useMemo<SubgroupSection[]>(() => {
-    const sectionsMap = new Map<string, SubgroupSection>();
-
-    filteredSettings.forEach((setting) => {
-      const subgroup = setting.setting_subgroup ?? null;
-      const subgroupSlug = subgroup?.slug ?? '__ungrouped__';
-      const sectionKey = subgroupSlug;
-
-      if (!sectionsMap.has(sectionKey)) {
-        sectionsMap.set(sectionKey, {
-          key: sectionKey,
-          slug: subgroupSlug,
-          name:
-            subgroup?.name?.toString() ||
-            (subgroup ? subgroup.slug : t('sections.withoutSubgroup')),
-          description: subgroup?.description?.toString() || undefined,
-          settings: [],
-        });
-      }
-
-      sectionsMap.get(sectionKey)?.settings.push(setting);
-    });
+  }, [search, listTypeSettings]);
 
-    const sections = Array.from(sectionsMap.values());
-    sections.forEach((section) => {
-      section.settings.sort((left, right) =>
-        left.slug.localeCompare(right.slug)
-      );
-    });
-
-    sections.sort((left, right) => {
-      if (left.slug === '__ungrouped__') return 1;
-      if (right.slug === '__ungrouped__') return -1;
-      return left.name.localeCompare(right.name);
-    });
-
-    return sections;
-  }, [filteredSettings, t]);
+  useEffect(() => {
+    setPage(1);
+  }, [search]);
 
-  const settingsWithOptionsCount = useMemo(
-    () => listTypeSettings.length,
-    [listTypeSettings]
-  );
-
-  const totalOptions = useMemo(
-    () =>
-      listTypeSettings.reduce(
-        (acc: number, setting: SettingWithList) =>
-          acc + (setting.setting_list?.length ?? 0),
-        0
-      ),
-    [listTypeSettings]
-  );
-
-  const controls = useMemo(
-    () => [
-      {
-        id: 'group',
-        type: 'select' as const,
-        value: activeGroupSlug,
-        onChange: (value: string) => setActiveGroupSlug(value),
-        placeholder: t('filters.groupPlaceholder'),
-        options: [
-          { value: 'all', label: t('filters.allGroups') },
-          ...groups.map((group: SettingGroup) => ({
-            value: group.slug,
-            label: group.name || group.slug,
-          })),
-        ],
-      },
-      {
-        id: 'subgroup',
-        type: 'select' as const,
-        value: activeSubgroupSlug,
-        onChange: (value: string) => setActiveSubgroupSlug(value),
-        placeholder: t('filters.subgroupPlaceholder'),
-        options: [
-          { value: 'all', label: t('filters.allSubgroups') },
-          ...subgroupOptions.map((subgroup) => ({
-            value: subgroup.value,
-            label: subgroup.label,
-          })),
-        ],
-      },
-    ],
-    [activeGroupSlug, activeSubgroupSlug, groups, subgroupOptions, t]
+  const paginatedSettings = useMemo(
+    () => filteredSettings.slice((page - 1) * pageSize, page * pageSize),
+    [filteredSettings, page, pageSize]
   );
 
   const editingSetting = useMemo(
@@ -399,13 +239,7 @@ export default function CoreSettingListPage() {
 
   const saveSettingOptions = async (
     setting: SettingWithList,
-    overrideValues?: string[],
-    successMessageKey:
-      | 'optionsSavedSuccess'
-      | 'optionsClearedSuccess' = 'optionsSavedSuccess',
-    errorMessageKey:
-      | 'optionsSavedError'
-      | 'optionsClearedError' = 'optionsSavedError'
+    overrideValues?: string[]
   ) => {
     const settingId = setting.id;
     if (!settingId) {
@@ -431,10 +265,10 @@ export default function CoreSettingListPage() {
         },
       });
 
-      showToastHandler('success', t(successMessageKey));
+      showToastHandler('success', t('optionsSavedSuccess'));
       await refetch();
     } catch (_error) {
-      showToastHandler('error', t(errorMessageKey));
+      showToastHandler('error', t('optionsSavedError'));
     } finally {
       setSavingOptionBySettingId((previous) => ({
         ...previous,
@@ -454,15 +288,6 @@ export default function CoreSettingListPage() {
     setEditingSettingId(null);
   };
 
-  const handleClearOptions = async (setting: SettingWithList) => {
-    await saveSettingOptions(
-      setting,
-      [],
-      'optionsClearedSuccess',
-      'optionsClearedError'
-    );
-  };
-
   const addSheetOption = () => {
     setSheetDraftOptions((previous) => [...previous, createDraftOption('')]);
   };
@@ -491,74 +316,29 @@ export default function CoreSettingListPage() {
         ]}
         title={t('title')}
         description={t('description')}
-      />
-
-      <KpiCardsGrid
-        items={[
+        actions={[
           {
-            key: 'groups',
-            title: t('kpis.groups'),
-            value: groups.length,
-            icon: Settings2,
-            iconContainerClassName: 'bg-sky-50 text-sky-700',
-            accentClassName: 'from-sky-500/20 via-sky-500/10 to-transparent',
-          },
-          {
-            key: 'settings',
-            title: t('kpis.settingsTotal'),
-            value: settingsWithOptionsCount,
-            icon: ListTree,
-            iconContainerClassName: 'bg-emerald-50 text-emerald-700',
-            accentClassName:
-              'from-emerald-500/20 via-emerald-500/10 to-transparent',
-          },
-          {
-            key: 'subgroups',
-            title: t('kpis.subgroups'),
-            value: subgroupOptions.length,
-            icon: SlidersHorizontal,
-            iconContainerClassName: 'bg-amber-50 text-amber-700',
-            accentClassName:
-              'from-amber-500/20 via-amber-500/10 to-transparent',
-          },
-          {
-            key: 'options',
-            title: t('kpis.totalOptions'),
-            value: totalOptions,
-            icon: SlidersHorizontal,
-            iconContainerClassName: 'bg-violet-50 text-violet-700',
-            accentClassName:
-              'from-violet-500/20 via-violet-500/10 to-transparent',
+            label: t('actions.refresh'),
+            onClick: () => refetch(),
+            icon: <RefreshCw className="h-4 w-4" />,
+            iconOnly: true,
           },
         ]}
       />
 
-      <Card>
-        <CardContent className="flex flex-wrap items-center justify-between gap-3 py-3">
-          <div className="space-y-0.5">
-            <p className="text-sm font-medium text-foreground">
-              {activeGroupSlug === 'all'
-                ? t('filters.allGroups')
-                : currentGroup?.name || activeGroupSlug}
-            </p>
-            {activeGroupSlug !== 'all' && currentGroup?.description ? (
-              <p className="text-xs text-muted-foreground">
-                {currentGroup.description}
-              </p>
-            ) : null}
-          </div>
-          <Badge variant="secondary">
-            {t('kpis.options')}: {totalOptions}
-          </Badge>
-        </CardContent>
-      </Card>
-
       <SearchBar
         searchQuery={search}
-        onSearchChange={setSearch}
-        onSearch={() => undefined}
+        onSearchChange={(value) => setSearch(value)}
         placeholder={t('searchPlaceholder')}
-        controls={controls}
+        showSearchButton={false}
+        actions={
+          <ViewModeToggle
+            viewMode={viewMode}
+            onViewModeChange={setViewMode}
+            listLabel={t('viewMode.list')}
+            cardsLabel={t('viewMode.cards')}
+          />
+        }
       />
 
       {isLoading ? (
@@ -577,87 +357,137 @@ export default function CoreSettingListPage() {
               : t('emptyDescriptionFiltered')
           }
         />
+      ) : viewMode === 'list' ? (
+        <div className="rounded-md border">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>{t('columns.name')}</TableHead>
+                <TableHead>{t('columns.group')}</TableHead>
+                <TableHead>{t('columns.type')}</TableHead>
+                <TableHead className="text-right">
+                  {t('columns.items')}
+                </TableHead>
+                <TableHead className="w-30" />
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {paginatedSettings.map((setting: SettingWithList) => {
+                const isSaving =
+                  setting.id != null
+                    ? savingOptionBySettingId[setting.id] === true
+                    : false;
+
+                return (
+                  <TableRow
+                    key={setting.id}
+                    className="cursor-pointer"
+                    onDoubleClick={() => openSheetForSetting(setting)}
+                  >
+                    <TableCell>
+                      <p className="font-medium">
+                        {String(setting.name ?? setting.slug)}
+                      </p>
+                      <p className="text-xs text-muted-foreground">
+                        {setting.slug}
+                      </p>
+                    </TableCell>
+                    <TableCell className="text-muted-foreground">
+                      {setting.setting_group
+                        ? String(
+                            setting.setting_group.name ??
+                              setting.setting_group.slug
+                          )
+                        : '—'}
+                    </TableCell>
+                    <TableCell>
+                      <Badge variant="outline">{setting.component}</Badge>
+                    </TableCell>
+                    <TableCell className="text-right">
+                      <Badge variant="secondary">
+                        {t('itemCount', {
+                          count: setting.setting_list?.length ?? 0,
+                        })}
+                      </Badge>
+                    </TableCell>
+                    <TableCell>
+                      <Button
+                        size="sm"
+                        variant="outline"
+                        onClick={() => openSheetForSetting(setting)}
+                        disabled={setting.id == null || isSaving}
+                      >
+                        <Pencil className="mr-1 h-3.5 w-3.5" />
+                        {t('actions.editOptions')}
+                      </Button>
+                    </TableCell>
+                  </TableRow>
+                );
+              })}
+            </TableBody>
+          </Table>
+        </div>
       ) : (
-        <div className="grid gap-3">
-          {groupedSections.map((section) => (
-            <Card key={section.key}>
-              <CardHeader className="pb-3">
-                <CardTitle className="text-base">{section.name}</CardTitle>
-                {section.description ? (
-                  <CardDescription>{section.description}</CardDescription>
-                ) : null}
-              </CardHeader>
-
-              <CardContent className="space-y-4">
-                {section.settings.map((setting: SettingWithList) => {
-                  const settingId = setting.id;
-                  const isSaving =
-                    settingId != null
-                      ? savingOptionBySettingId[settingId] === true
-                      : false;
-                  const optionsCount = setting.setting_list?.length ?? 0;
-
-                  return (
-                    <div
-                      key={setting.id}
-                      className="flex items-center justify-between gap-3 border-b border-border/60 pb-3 last:border-0 last:pb-0"
-                    >
-                      <div className="min-w-0 flex-1">
-                        <p className="truncate text-sm font-semibold text-foreground">
-                          {setting.name}
-                        </p>
-                      </div>
-
-                      <div className="flex items-center gap-2">
-                        <Badge variant="secondary">
-                          {t('itemCount', { count: optionsCount })}
-                        </Badge>
-
-                        <Tooltip>
-                          <TooltipTrigger asChild>
-                            <Button
-                              type="button"
-                              size="icon"
-                              variant="ghost"
-                              onClick={() => openSheetForSetting(setting)}
-                              disabled={settingId == null || isSaving}
-                              aria-label={t('actions.editOptions')}
-                            >
-                              <Pencil className="h-4 w-4" />
-                            </Button>
-                          </TooltipTrigger>
-                          <TooltipContent>
-                            <p>{t('actions.editOptions')}</p>
-                          </TooltipContent>
-                        </Tooltip>
-
-                        <Tooltip>
-                          <TooltipTrigger asChild>
-                            <Button
-                              type="button"
-                              size="icon"
-                              variant="ghost"
-                              onClick={() => handleClearOptions(setting)}
-                              disabled={settingId == null || isSaving}
-                              aria-label={t('actions.clearOptions')}
-                            >
-                              <Trash2 className="h-4 w-4" />
-                            </Button>
-                          </TooltipTrigger>
-                          <TooltipContent>
-                            <p>{t('actions.clearOptions')}</p>
-                          </TooltipContent>
-                        </Tooltip>
-                      </div>
-                    </div>
-                  );
-                })}
-              </CardContent>
-            </Card>
+        <div className="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3">
+          {paginatedSettings.map((setting: SettingWithList) => (
+            <div
+              key={setting.id}
+              onDoubleClick={() => openSheetForSetting(setting)}
+            >
+              <EntityCard
+                title={String(setting.name ?? setting.slug)}
+                description={setting.slug}
+                badges={[
+                  ...(setting.setting_group
+                    ? [
+                        {
+                          label: String(
+                            setting.setting_group.name ??
+                              setting.setting_group.slug
+                          ),
+                          variant: 'secondary' as const,
+                        },
+                      ]
+                    : []),
+                  {
+                    label: String(setting.component ?? ''),
+                    variant: 'outline' as const,
+                  },
+                ]}
+                metadata={[
+                  {
+                    label: t('columns.items'),
+                    value: String(setting.setting_list?.length ?? 0),
+                  },
+                ]}
+                actions={[
+                  {
+                    label: t('actions.editOptions'),
+                    onClick: () => openSheetForSetting(setting),
+                    variant: 'outline',
+                    icon: <Pencil className="h-3.5 w-3.5" />,
+                  },
+                ]}
+              />
+            </div>
           ))}
         </div>
       )}
 
+      {!isLoading && filteredSettings.length > 0 && (
+        <PaginationFooter
+          currentPage={page}
+          pageSize={pageSize}
+          totalItems={filteredSettings.length}
+          onPageChange={setPage}
+          onPageSizeChange={(size) => {
+            setPageSize(size);
+            setPage(1);
+          }}
+          pageSizeOptions={[6, 12, 24, 48]}
+        />
+      )}
+
       <Sheet
         open={sheetOpen}
         onOpenChange={(open) => {
@@ -670,13 +500,17 @@ export default function CoreSettingListPage() {
       >
         <ResizableSheetContent
           sheetId="core-setting-list-options-sheet"
-          defaultWidth={768}
-          minWidth={520}
-          maxWidth={1100}
-          className="w-full overflow-y-auto sm:max-w-2xl"
+          defaultWidth={560}
+          minWidth={400}
+          maxWidth={900}
+          className="flex w-full flex-col overflow-hidden"
         >
-          <SheetHeader>
-            <SheetTitle>{t('sheet.title')}</SheetTitle>
+          <SheetHeader className="shrink-0">
+            <SheetTitle>
+              {editingSetting
+                ? String(editingSetting.name ?? editingSetting.slug)
+                : t('sheet.title')}
+            </SheetTitle>
             <SheetDescription>
               {editingSetting
                 ? t('sheet.description', { name: editingSetting.name ?? '' })
@@ -684,7 +518,7 @@ export default function CoreSettingListPage() {
             </SheetDescription>
           </SheetHeader>
 
-          <div className="mt-6 space-y-4">
+          <div className="mt-6 min-h-0 flex-1 space-y-4 overflow-y-auto px-4">
             <div className="flex items-center justify-between gap-2">
               <Badge variant="secondary">
                 {t('itemCount', { count: sheetDraftOptions.length })}
@@ -730,25 +564,25 @@ export default function CoreSettingListPage() {
                 </SortableContext>
               </DndContext>
             )}
-
-            <div className="flex justify-end">
-              <Button
-                type="button"
-                onClick={handleSaveSheet}
-                disabled={
-                  editingSettingId == null ||
-                  (editingSettingId != null &&
-                    savingOptionBySettingId[editingSettingId] === true)
-                }
-              >
-                <Save className="mr-1 h-3.5 w-3.5" />
-                {editingSettingId != null &&
-                savingOptionBySettingId[editingSettingId]
-                  ? t('actions.saving')
-                  : t('actions.saveOptions')}
-              </Button>
-            </div>
           </div>
+
+          <SheetFooter className="mt-6 shrink-0 px-4 pb-4">
+            <Button
+              type="button"
+              onClick={handleSaveSheet}
+              disabled={
+                editingSettingId == null ||
+                (editingSettingId != null &&
+                  savingOptionBySettingId[editingSettingId] === true)
+              }
+            >
+              <Save className="mr-1 h-3.5 w-3.5" />
+              {editingSettingId != null &&
+              savingOptionBySettingId[editingSettingId]
+                ? t('actions.saving')
+                : t('actions.saveOptions')}
+            </Button>
+          </SheetFooter>
         </ResizableSheetContent>
       </Sheet>
     </Page>