@hed-hog/lms 0.0.365 → 0.0.370

package/hedhog/frontend/app/instructors/page.tsx.ejs

@@ -33,6 +33,12 @@ import {
   TableRow,
 } from '@/components/ui/table';
 import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
 import { usePersistedPageSize } from '@/hooks/use-persisted-page-size';
 import { cn } from '@/lib/utils';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
@@ -48,7 +54,7 @@ import {
   Users,
 } from 'lucide-react';
 import { useTranslations } from 'next-intl';
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { toast } from 'sonner';
 import { InstructorFormSheet } from './_components/instructor-form-sheet';
 import type {
@@ -95,10 +101,43 @@ export default function InstructorsPage() {
   const t = useTranslations('lms.InstructorsPage');
 
   const [page, setPage] = useState(1);
+  const { data: generalSettings } = useQuery<{
+    data: Array<{ slug: string; value: string }>;
+  }>({
+    queryKey: ['setting-group-general'],
+    queryFn: async () => {
+      const response = await request<{
+        data: Array<{ slug: string; value: string }>;
+      }>({
+        url: '/setting/group/general',
+        method: 'GET',
+      });
+      return response.data;
+    },
+    staleTime: 5 * 60 * 1000,
+  });
+
+  const pageSizeOptions = useMemo(() => {
+    const setting = generalSettings?.data?.find(
+      (s) => s.slug === 'pagination-page-sizes'
+    );
+    if (!setting?.value) return [6, 12, 24, 48, 96];
+    try {
+      const parsed = JSON.parse(setting.value) as string[];
+      const sizes = parsed
+        .map(Number)
+        .filter((n) => !isNaN(n) && n > 0)
+        .sort((a, b) => a - b);
+      return sizes.length > 0 ? sizes : [6, 12, 24, 48, 96];
+    } catch {
+      return [6, 12, 24, 48, 96];
+    }
+  }, [generalSettings]);
+
   const [pageSize, setPageSize] = usePersistedPageSize({
     storageKey: 'pagination:global:pageSize',
     defaultValue: 12,
-    allowedValues: [6, 12, 24, 48],
+    allowedValues: pageSizeOptions,
   });
   const [searchInput, setSearchInput] = useState('');
   const [debouncedSearch, setDebouncedSearch] = useState('');
@@ -329,50 +368,52 @@ export default function InstructorsPage() {
 
       <KpiCardsGrid items={statsCards} />
 
-      <div className="flex flex-col gap-4 xl:flex-row xl:items-center">
-        <div className="flex-1">
-          <SearchBar
-            searchQuery={searchInput}
-            onSearchChange={(value) => {
-              setSearchInput(value);
-            }}
-            onSearch={() => setPage(1)}
-            placeholder={t('search.placeholder')}
-            controls={searchControls}
-          />{' '}
-        </div>
-
-        <div className="flex items-center justify-between gap-3 sm:justify-start xl:justify-end">
-          <span className="text-xs font-medium text-muted-foreground">
-            {t('viewMode.label')}
-          </span>
-          <ToggleGroup
-            type="single"
-            value={viewMode}
-            onValueChange={handleViewModeChange}
-            variant="outline"
-            size="sm"
-            aria-label={t('viewMode.ariaLabel')}
-          >
-            <ToggleGroupItem
-              value="table"
-              className="gap-1.5 px-2.5"
-              aria-label={t('viewMode.tableAriaLabel')}
-            >
-              <List className="h-4 w-4" />
-              <span className="hidden sm:inline">{t('viewMode.table')}</span>
-            </ToggleGroupItem>
-            <ToggleGroupItem
-              value="cards"
-              className="gap-1.5 px-2.5"
-              aria-label={t('viewMode.cardsAriaLabel')}
+      <SearchBar
+        searchQuery={searchInput}
+        onSearchChange={(value) => {
+          setSearchInput(value);
+        }}
+        onSearch={() => setPage(1)}
+        placeholder={t('search.placeholder')}
+        controls={searchControls}
+        actions={
+          <TooltipProvider>
+            <ToggleGroup
+              type="single"
+              value={viewMode}
+              onValueChange={handleViewModeChange}
+              variant="outline"
+              size="sm"
+              aria-label={t('viewMode.ariaLabel')}
             >
-              <LayoutGrid className="h-4 w-4" />
-              <span className="hidden sm:inline">{t('viewMode.cards')}</span>
-            </ToggleGroupItem>
-          </ToggleGroup>
-        </div>
-      </div>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <ToggleGroupItem
+                    value="table"
+                    className="cursor-pointer"
+                    aria-label={t('viewMode.tableAriaLabel')}
+                  >
+                    <List className="h-4 w-4" />
+                  </ToggleGroupItem>
+                </TooltipTrigger>
+                <TooltipContent>{t('viewMode.table')}</TooltipContent>
+              </Tooltip>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <ToggleGroupItem
+                    value="cards"
+                    className="cursor-pointer"
+                    aria-label={t('viewMode.cardsAriaLabel')}
+                  >
+                    <LayoutGrid className="h-4 w-4" />
+                  </ToggleGroupItem>
+                </TooltipTrigger>
+                <TooltipContent>{t('viewMode.cards')}</TooltipContent>
+              </Tooltip>
+            </ToggleGroup>
+          </TooltipProvider>
+        }
+      />
 
       {isLoading ? (
         viewMode === 'cards' ? (
@@ -726,7 +767,7 @@ export default function InstructorsPage() {
           setPageSize(nextPageSize);
           setPage(1);
         }}
-        pageSizeOptions={[6, 12, 24]}
+        pageSizeOptions={pageSizeOptions}
       />
 
       <InstructorFormSheet