@hed-hog/faq 0.0.278 → 0.0.285

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

@@ -1,9 +1,12 @@
 'use client';
 
 import {
+  EmptyState,
+  Page,
   PageHeader,
   PaginationFooter,
   SearchBar,
+  StatsCards,
 } from '@/components/entity-list';
 import {
   AlertDialog,
@@ -19,14 +22,6 @@ import {
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import {
@@ -36,6 +31,13 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
 import { Textarea } from '@/components/ui/textarea';
 import { useDebounce } from '@/hooks/use-debounce';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
@@ -84,7 +86,6 @@ type FaqDetail = {
 
 export default function FAQPage() {
   const t = useTranslations('faq.Faq');
-  const [faqs, setFAQs] = useState<any[]>([]);
   const [selectedFAQ, setSelectedFAQ] = useState<any | null>(null);
   const [isEditDialogOpen, setIsEditDialogOpen] = useState(false);
   const [isNewFAQ, setIsNewFAQ] = useState(false);
@@ -101,10 +102,9 @@ export default function FAQPage() {
     }
   }, [currentLocaleCode]);
 
-  const {
-    data: { data, total },
-    refetch: refetchFaq,
-  } = useQuery<PaginationResult<Faq>>({
+  const { data: faqResult, refetch: refetchFaq } = useQuery<
+    PaginationResult<Faq>
+  >({
     queryKey: ['faq', debouncedSearch, page, pageSize],
     queryFn: async () => {
       const response = await request({
@@ -117,13 +117,8 @@ export default function FAQPage() {
       });
       return response.data as PaginationResult<Faq>;
     },
-    initialData: {
-      data: [],
-      total: 0,
-      page: 1,
-      pageSize: 10,
-    },
   });
+  const { data: faqs = [], total = 0 } = faqResult ?? {};
 
   const { data: statsData, refetch: refetchStats } = useQuery<any>({
     queryKey: ['faq-stats'],
@@ -135,12 +130,6 @@ export default function FAQPage() {
     },
   });
 
-  useEffect(() => {
-    if (data) {
-      setFAQs(data);
-    }
-  }, [data]);
-
   const handleNewFAQ = (): void => {
     const newFAQ: any = {
       locale: {},
@@ -252,15 +241,11 @@ export default function FAQPage() {
 
   const handleSearchChange = (value: string): void => {
     setSearchTerm(value);
+    setPage(1);
   };
 
-  useEffect(() => {
-    refetchFaq();
-    refetchStats();
-  }, [isEditDialogOpen, debouncedSearch, page, pageSize]);
-
   return (
-    <div className="flex flex-col h-screen px-4">
+    <Page>
       <PageHeader
         breadcrumbs={[{ label: 'Home', href: '/' }, { label: t('title') }]}
         actions={[
@@ -273,147 +258,126 @@ export default function FAQPage() {
         title={t('title')}
         description={t('description')}
       />
-      <div className="grid grid-cols-1 gap-4 md:grid-cols-4">
-        <Card className="transition-shadow hover:shadow-md p-2">
-          <CardContent className="p-4">
-            <div className="flex items-center space-x-3">
-              <div className="rounded-full bg-blue-100 p-2 dark:bg-blue-900">
-                <HelpCircle className="h-6 w-6 text-blue-600 dark:text-blue-400" />
-              </div>
-              <div>
-                <p className="text-sm font-medium text-muted-foreground">
-                  {t('totalFaqs')}
-                </p>
-                <p className="text-2xl font-bold">{statsData?.total}</p>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-      </div>
 
-      <div className="mb-4 flex flex-col gap-4 md:flex-row mt-4">
-        <SearchBar
-          searchQuery={searchTerm}
-          onSearchChange={handleSearchChange}
-          onSearch={() => refetchFaq()}
-          placeholder={t('searchPlaceholder')}
-        />
-      </div>
+      <StatsCards
+        stats={[
+          {
+            title: t('totalFaqs'),
+            value: String(statsData?.total || 0),
+            icon: <HelpCircle className="h-5 w-5" />,
+            iconBgColor: 'bg-blue-100 dark:bg-blue-900',
+            iconColor: 'text-blue-600 dark:text-blue-400',
+          },
+        ]}
+        className="grid-cols-1 md:grid-cols-4"
+      />
+
+      <SearchBar
+        searchQuery={searchTerm}
+        onSearchChange={handleSearchChange}
+        onSearch={() => setPage(1)}
+        placeholder={t('searchPlaceholder')}
+      />
 
       <div className="space-y-4">
         {faqs.length > 0 ? (
-          <div className="space-y-4">
-            {faqs.map((faq) => (
+          <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
+            {faqs.map((faq, index) => (
               <Card
-                key={faq.id}
+                key={`${faq.faq_id ?? faq.id ?? 'faq'}-${index}`}
                 onDoubleClick={() => handleEditFAQ(faq)}
                 className="cursor-pointer transition-all duration-200 hover:border-primary/20 hover:shadow-md"
               >
-                <CardContent className="p-6">
-                  <div className="flex items-start justify-between gap-4">
-                    <div className="flex-1 space-y-3">
-                      <div className="flex items-start space-x-3">
-                        <div className="mt-1 rounded-full bg-primary/10 p-2">
-                          <HelpCircle className="h-4 w-4 text-primary" />
-                        </div>
-                        <div className="flex-1 space-y-2">
-                          <div className="flex items-center gap-2 flex-wrap">
-                            <h3 className="text-lg font-semibold leading-tight">
-                              {faq.question}
-                            </h3>
-                            {faq.available_locales &&
-                              faq.available_locales.length > 0 && (
-                                <div className="flex gap-1 flex-wrap">
-                                  {faq.available_locales.map(
-                                    (locale: Locale) => (
-                                      <Badge
-                                        key={locale.code}
-                                        variant="outline"
-                                        className="text-xs"
-                                      >
-                                        <Globe className="mr-1 h-3 w-3" />
-                                        {locale.code.toUpperCase()}
-                                      </Badge>
-                                    )
-                                  )}
-                                </div>
-                              )}
-                          </div>
-                          <p className="line-clamp-2 text-sm text-muted-foreground">
-                            {faq.answer}
-                          </p>
-                        </div>
+                <CardContent className="p-4">
+                  <div className="flex items-start gap-3">
+                    <div className="mt-0.5 rounded-full bg-primary/10 p-2">
+                      <HelpCircle className="h-4 w-4 text-primary" />
+                    </div>
+                    <div className="min-w-0 flex-1 space-y-2">
+                      <div className="flex items-start gap-2 flex-wrap">
+                        <h3 className="line-clamp-2 text-base font-semibold leading-tight">
+                          {faq.question}
+                        </h3>
                       </div>
+
+                      {faq.available_locales &&
+                        faq.available_locales.length > 0 && (
+                          <div className="flex gap-1 flex-wrap">
+                            {faq.available_locales.map((locale: Locale) => (
+                              <Badge
+                                key={locale.code}
+                                variant="outline"
+                                className="text-xs"
+                              >
+                                <Globe className="mr-1 h-3 w-3" />
+                                {locale.code.toUpperCase()}
+                              </Badge>
+                            ))}
+                          </div>
+                        )}
+
+                      <p className="line-clamp-3 text-sm text-muted-foreground">
+                        {faq.answer}
+                      </p>
                     </div>
+                  </div>
 
-                    <div className="flex flex-col gap-2">
-                      <Button
-                        variant="outline"
-                        size="sm"
-                        onClick={() => handleEditFAQ(faq)}
-                        className="transition-colors hover:border-blue-200 hover:bg-blue-50 hover:text-blue-600 dark:hover:bg-blue-950"
-                      >
-                        <Edit className="mr-1 h-4 w-4" />
-                        {t('edit')}
-                      </Button>
-
-                      <AlertDialog>
-                        <AlertDialogTrigger asChild>
-                          <Button
-                            variant="outline"
-                            size="sm"
-                            className="bg-transparent transition-colors hover:border-red-200 hover:bg-red-50 hover:text-red-600 dark:hover:bg-red-950"
+                  <div className="mt-4 flex items-center justify-end gap-2">
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={() => handleEditFAQ(faq)}
+                      className="transition-colors hover:border-blue-200 hover:bg-blue-50 hover:text-blue-600 dark:hover:bg-blue-950"
+                    >
+                      <Edit className="mr-1 h-4 w-4" />
+                      {t('edit')}
+                    </Button>
+
+                    <AlertDialog>
+                      <AlertDialogTrigger asChild>
+                        <Button
+                          variant="outline"
+                          size="sm"
+                          className="bg-transparent transition-colors hover:border-red-200 hover:bg-red-50 hover:text-red-600 dark:hover:bg-red-950"
+                        >
+                          <Trash2 className="mr-1 h-4 w-4" />
+                          {t('delete')}
+                        </Button>
+                      </AlertDialogTrigger>
+                      <AlertDialogContent>
+                        <AlertDialogHeader>
+                          <AlertDialogTitle>
+                            {t('confirmDelete')}
+                          </AlertDialogTitle>
+                          <AlertDialogDescription>
+                            {t('deleteDescription')}
+                          </AlertDialogDescription>
+                        </AlertDialogHeader>
+                        <AlertDialogFooter>
+                          <AlertDialogCancel>{t('cancel')}</AlertDialogCancel>
+                          <AlertDialogAction
+                            onClick={() => handleDeleteFAQ(Number(faq.faq_id))}
+                            className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
                           >
-                            <Trash2 className="mr-1 h-4 w-4" />
                             {t('delete')}
-                          </Button>
-                        </AlertDialogTrigger>
-                        <AlertDialogContent>
-                          <AlertDialogHeader>
-                            <AlertDialogTitle>
-                              {t('confirmDelete')}
-                            </AlertDialogTitle>
-                            <AlertDialogDescription>
-                              {t('deleteDescription')}
-                            </AlertDialogDescription>
-                          </AlertDialogHeader>
-                          <AlertDialogFooter>
-                            <AlertDialogCancel>{t('cancel')}</AlertDialogCancel>
-                            <AlertDialogAction
-                              onClick={() =>
-                                handleDeleteFAQ(Number(faq.faq_id))
-                              }
-                              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
-                            >
-                              {t('delete')}
-                            </AlertDialogAction>
-                          </AlertDialogFooter>
-                        </AlertDialogContent>
-                      </AlertDialog>
-                    </div>
+                          </AlertDialogAction>
+                        </AlertDialogFooter>
+                      </AlertDialogContent>
+                    </AlertDialog>
                   </div>
                 </CardContent>
               </Card>
             ))}
           </div>
         ) : (
-          <Card>
-            <CardContent className="p-12 text-center">
-              <div className="flex flex-col items-center space-y-4">
-                <HelpCircle className="h-12 w-12 text-muted-foreground" />
-                <div>
-                  <h3 className="text-lg font-semibold">
-                    {t('noQuestionsFound')}
-                  </h3>
-                  <p className="text-muted-foreground">{t('adjustFilters')}</p>
-                </div>
-                <Button onClick={handleNewFAQ}>
-                  <Plus className="mr-2 h-4 w-4" />
-                  {t('createFirstQuestion')}
-                </Button>
-              </div>
-            </CardContent>
-          </Card>
+          <EmptyState
+            icon={<HelpCircle className="h-12 w-12" />}
+            title={t('noQuestionsFound')}
+            description={t('adjustFilters')}
+            actionLabel={t('createFirstQuestion')}
+            actionIcon={<Plus className="mr-2 h-4 w-4" />}
+            onAction={handleNewFAQ}
+          />
         )}
 
         <PaginationFooter
@@ -421,27 +385,33 @@ export default function FAQPage() {
           pageSize={pageSize}
           totalItems={total}
           onPageChange={setPage}
-          onPageSizeChange={setPageSize}
+          onPageSizeChange={(nextPageSize) => {
+            setPageSize(nextPageSize);
+            setPage(1);
+          }}
           pageSizeOptions={[10, 20, 30, 40, 50]}
         />
       </div>
 
-      <Dialog open={isEditDialogOpen} onOpenChange={setIsEditDialogOpen}>
-        <DialogContent className="max-h-[95vh] max-w-4xl overflow-y-auto">
-          <DialogHeader>
-            <DialogTitle className="flex items-center space-x-2">
+      <Sheet open={isEditDialogOpen} onOpenChange={setIsEditDialogOpen}>
+        <SheetContent
+          side="right"
+          className="max-h-[95vh] w-full max-w-5xl overflow-y-auto"
+        >
+          <SheetHeader>
+            <SheetTitle className="flex items-center space-x-2">
               <Edit className="h-5 w-5" />
               <span>
                 {isNewFAQ ? t('newQuestionTitle') : t('editQuestion')}
               </span>
-            </DialogTitle>
-            <DialogDescription>
+            </SheetTitle>
+            <SheetDescription>
               {isNewFAQ ? t('createDescription') : t('editDescription')}
-            </DialogDescription>
-          </DialogHeader>
+            </SheetDescription>
+          </SheetHeader>
 
           {selectedFAQ && (
-            <div className="space-y-6">
+            <div className="space-y-6 px-4">
               {isEditDialogOpen && !isNewFAQ && (
                 <div className="space-y-2">
                   <Label
@@ -519,7 +489,7 @@ export default function FAQPage() {
             </div>
           )}
 
-          <DialogFooter className="mt-4">
+          <div className="mt-4 flex justify-end gap-2">
             <Button
               variant="outline"
               onClick={() => {
@@ -544,9 +514,9 @@ export default function FAQPage() {
               <Save className="mr-2 h-4 w-4" />
               {isNewFAQ ? t('createQuestionButton') : t('saveChanges')}
             </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-    </div>
+          </div>
+        </SheetContent>
+      </Sheet>
+    </Page>
   );
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hed-hog/faq",
-  "version": "0.0.278",
+  "version": "0.0.285",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "dependencies": {
@@ -10,10 +10,10 @@
     "@nestjs/jwt": "^11",
     "@nestjs/mapped-types": "*",
     "@hed-hog/api-locale": "0.0.13",
+    "@hed-hog/api": "0.0.4",
     "@hed-hog/api-prisma": "0.0.5",
     "@hed-hog/api-pagination": "0.0.6",
-    "@hed-hog/core": "0.0.278",
-    "@hed-hog/api": "0.0.4"
+    "@hed-hog/core": "0.0.285"
   },
   "exports": {
     ".": {