@hed-hog/faq 0.0.185 → 0.0.190

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

@@ -0,0 +1,552 @@
+'use client';
+
+import {
+  PageHeader,
+  PaginationFooter,
+  SearchBar,
+} from '@/components/entity-list';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from '@/components/ui/alert-dialog';
+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 {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Textarea } from '@/components/ui/textarea';
+import { useDebounce } from '@/hooks/use-debounce';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import { Edit, Globe, HelpCircle, Plus, Save, Trash2, X } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useEffect, useState } from 'react';
+import { toast } from 'sonner';
+
+type PaginationResult<T> = {
+  data: T[];
+  total: number;
+  page: number;
+  pageSize: number;
+};
+
+type Locale = {
+  code: string;
+  name: string;
+};
+
+type FaqLocale = {
+  question: string;
+  answer: string;
+};
+
+type Faq = {
+  question: string;
+  answer: string;
+  faq_id?: number;
+  id?: number;
+  locale?: Record<string, FaqLocale>;
+  available_locales?: Array<{ code: string; name: string }>;
+};
+
+type FaqDetail = {
+  faq_id: number;
+  id: number;
+  faq_locale?: Array<{
+    question: string;
+    answer: string;
+    locale?: {
+      code: string;
+    };
+  }>;
+};
+
+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);
+  const [searchTerm, setSearchTerm] = useState('');
+  const debouncedSearch = useDebounce(searchTerm);
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(10);
+  const [selectedLocale, setSelectedLocale] = useState<string>('');
+  const { request, locales, currentLocaleCode } = useApp();
+
+  useEffect(() => {
+    if (currentLocaleCode && !selectedLocale) {
+      setSelectedLocale(currentLocaleCode);
+    }
+  }, [currentLocaleCode]);
+
+  const {
+    data: { data, total },
+    refetch: refetchFaq,
+  } = useQuery<PaginationResult<Faq>>({
+    queryKey: ['faq', debouncedSearch, page, pageSize],
+    queryFn: async () => {
+      const response = await request({
+        url: '/faq',
+        params: {
+          search: debouncedSearch,
+          page,
+          pageSize,
+        },
+      });
+      return response.data as PaginationResult<Faq>;
+    },
+    initialData: {
+      data: [],
+      total: 0,
+      page: 1,
+      pageSize: 10,
+    },
+  });
+
+  const { data: statsData, refetch: refetchStats } = useQuery<any>({
+    queryKey: ['faq-stats'],
+    queryFn: async () => {
+      const response = await request({
+        url: '/faq/stats',
+      });
+      return response.data;
+    },
+  });
+
+  useEffect(() => {
+    if (data) {
+      setFAQs(data);
+    }
+  }, [data]);
+
+  const handleNewFAQ = (): void => {
+    const newFAQ: any = {
+      locale: {},
+    };
+
+    locales.forEach((locale: Locale) => {
+      newFAQ.locale[locale.code] = {
+        question: '',
+        answer: '',
+      };
+    });
+
+    setSelectedFAQ(newFAQ);
+    setIsNewFAQ(true);
+    setIsEditDialogOpen(true);
+  };
+
+  const handleEditFAQ = async (faq: Faq): Promise<void> => {
+    try {
+      const response = await request({
+        url: `/faq/${faq.faq_id}`,
+        method: 'GET',
+      });
+
+      const fullFaq = response.data as FaqDetail;
+      const localeData: Record<string, FaqLocale> = {};
+      if (fullFaq.faq_locale && Array.isArray(fullFaq.faq_locale)) {
+        fullFaq.faq_locale.forEach((fl: any) => {
+          const localeCode = locales.find(
+            (l: Locale) => l.code === fl.locale?.code
+          )?.code;
+          if (localeCode) {
+            localeData[localeCode] = {
+              question: fl.question || '',
+              answer: fl.answer || '',
+            };
+          }
+        });
+      }
+
+      locales.forEach((locale: Locale) => {
+        if (!localeData[locale.code]) {
+          localeData[locale.code] = {
+            question: '',
+            answer: '',
+          };
+        }
+      });
+
+      setSelectedFAQ({
+        ...fullFaq,
+        locale: localeData,
+      });
+      setIsNewFAQ(false);
+      setIsEditDialogOpen(true);
+    } catch (error) {
+      console.error(error);
+      toast.error(t('errorLoading'));
+    }
+  };
+
+  const handleSaveFAQ = async () => {
+    if (!selectedFAQ || !selectedFAQ.locale) return;
+
+    const payload = {
+      locale: selectedFAQ.locale,
+    };
+
+    try {
+      if (selectedFAQ.id || selectedFAQ.faq_id) {
+        await request({
+          url: `/faq/${selectedFAQ.faq_id || selectedFAQ.id}`,
+          method: 'PATCH',
+          data: payload,
+        });
+        toast.success(t('successUpdate'));
+      } else {
+        await request({
+          url: `/faq`,
+          method: 'POST',
+          data: payload,
+        });
+        toast.success(t('successCreate'));
+      }
+
+      setIsEditDialogOpen(false);
+      await refetchFaq();
+      await refetchStats();
+    } catch (error) {
+      console.error(error);
+      toast.error(t('errorSave'));
+    }
+  };
+
+  const handleDeleteFAQ = async (faqId: number): Promise<void> => {
+    try {
+      await request({
+        url: `/faq/${faqId}`,
+        method: 'DELETE',
+      });
+      toast.success(t('successDelete'));
+      await refetchFaq();
+      await refetchStats();
+    } catch (error) {
+      console.error(error);
+      toast.error(t('errorDelete'));
+    }
+  };
+
+  const handleSearchChange = (value: string): void => {
+    setSearchTerm(value);
+  };
+
+  useEffect(() => {
+    refetchFaq();
+    refetchStats();
+  }, [isEditDialogOpen, debouncedSearch, page, pageSize]);
+
+  return (
+    <div className="flex flex-col h-screen px-4">
+      <PageHeader
+        breadcrumbs={[{ label: 'Home', href: '/' }, { label: t('title') }]}
+        actions={[
+          {
+            label: t('newQuestion'),
+            onClick: () => handleNewFAQ(),
+            variant: 'default',
+          },
+        ]}
+        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>
+
+      <div className="space-y-4">
+        {faqs.length > 0 ? (
+          <div className="space-y-4">
+            {faqs.map((faq) => (
+              <Card
+                key={faq.id}
+                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>
+                      </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"
+                          >
+                            <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>
+                  </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>
+        )}
+
+        <PaginationFooter
+          currentPage={page}
+          pageSize={pageSize}
+          totalItems={total}
+          onPageChange={setPage}
+          onPageSizeChange={setPageSize}
+          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">
+              <Edit className="h-5 w-5" />
+              <span>
+                {isNewFAQ ? t('newQuestionTitle') : t('editQuestion')}
+              </span>
+            </DialogTitle>
+            <DialogDescription>
+              {isNewFAQ ? t('createDescription') : t('editDescription')}
+            </DialogDescription>
+          </DialogHeader>
+
+          {selectedFAQ && (
+            <div className="space-y-6">
+              {isEditDialogOpen && !isNewFAQ && (
+                <div className="space-y-2">
+                  <Label
+                    htmlFor="locale-select"
+                    className="flex items-center gap-2"
+                  >
+                    <Globe className="h-4 w-4" />
+                    {t('language')}
+                  </Label>
+                  <Select
+                    value={selectedLocale}
+                    onValueChange={setSelectedLocale}
+                  >
+                    <SelectTrigger id="locale-select">
+                      <SelectValue placeholder={t('selectLanguage')} />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {locales.map((locale: Locale) => (
+                        <SelectItem key={locale.code} value={locale.code}>
+                          {locale.name}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+              )}
+
+              {selectedLocale && selectedFAQ.locale?.[selectedLocale] && (
+                <div className="space-y-4">
+                  <div className="space-y-2">
+                    <Label htmlFor="question">{t('question')}</Label>
+                    <Input
+                      id="question"
+                      placeholder={t('questionPlaceholder')}
+                      value={selectedFAQ.locale[selectedLocale].question || ''}
+                      onChange={(e) =>
+                        setSelectedFAQ({
+                          ...selectedFAQ,
+                          locale: {
+                            ...selectedFAQ.locale,
+                            [selectedLocale]: {
+                              ...selectedFAQ.locale[selectedLocale],
+                              question: e.target.value,
+                            },
+                          },
+                        })
+                      }
+                    />
+                  </div>
+
+                  <div className="space-y-2">
+                    <Label htmlFor="answer">{t('answer')}</Label>
+                    <Textarea
+                      id="answer"
+                      placeholder={t('answerPlaceholder')}
+                      value={selectedFAQ.locale[selectedLocale].answer || ''}
+                      onChange={(e) =>
+                        setSelectedFAQ({
+                          ...selectedFAQ,
+                          locale: {
+                            ...selectedFAQ.locale,
+                            [selectedLocale]: {
+                              ...selectedFAQ.locale[selectedLocale],
+                              answer: e.target.value,
+                            },
+                          },
+                        })
+                      }
+                      rows={6}
+                      className="resize-none"
+                    />
+                  </div>
+                </div>
+              )}
+            </div>
+          )}
+
+          <DialogFooter className="mt-4">
+            <Button
+              variant="outline"
+              onClick={() => {
+                setIsEditDialogOpen(false);
+                setSelectedFAQ(null);
+                setIsNewFAQ(false);
+              }}
+            >
+              <X className="mr-2 h-4 w-4" />
+              {t('cancel')}
+            </Button>
+            <Button
+              onClick={handleSaveFAQ}
+              disabled={
+                !selectedFAQ?.locale ||
+                !Object.values(selectedFAQ.locale).some(
+                  (l: any) => l.question && l.answer
+                )
+              }
+              className="transition-colors hover:bg-primary/90"
+            >
+              <Save className="mr-2 h-4 w-4" />
+              {isNewFAQ ? t('createQuestionButton') : t('saveChanges')}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}

package/hedhog/frontend/messages/en.json

@@ -0,0 +1,35 @@
+{
+  "Faq": {
+    "title": "Frequently Asked Questions",
+    "description": "Manage all system FAQs",
+    "newQuestion": "New Question",
+    "totalFaqs": "Total FAQs",
+    "searchPlaceholder": "Search for question or answer...",
+    "noQuestionsFound": "No questions found",
+    "adjustFilters": "Try adjusting the filters or create a new question.",
+    "createFirstQuestion": "Create First Question",
+    "edit": "Edit",
+    "delete": "Delete",
+    "confirmDelete": "Confirm Deletion",
+    "deleteDescription": "Are you sure you want to delete this FAQ? This action cannot be undone.",
+    "cancel": "Cancel",
+    "editQuestion": "Edit FAQ",
+    "newQuestionTitle": "New FAQ",
+    "editDescription": "Edit the FAQ information",
+    "createDescription": "Create a new FAQ",
+    "language": "Language",
+    "selectLanguage": "Select a language",
+    "question": "Question",
+    "questionPlaceholder": "Enter the question",
+    "answer": "Answer",
+    "answerPlaceholder": "Enter the detailed answer",
+    "createQuestionButton": "Create Question",
+    "saveChanges": "Save Changes",
+    "errorLoading": "Error loading FAQ data.",
+    "successUpdate": "FAQ updated successfully!",
+    "successCreate": "FAQ created successfully!",
+    "errorSave": "Error saving FAQ.",
+    "successDelete": "FAQ deleted successfully!",
+    "errorDelete": "Error deleting FAQ."
+  }
+}

package/hedhog/frontend/messages/pt.json

@@ -0,0 +1,35 @@
+{
+  "Faq": {
+    "title": "Perguntas Frequentes",
+    "description": "Gerencie todas as perguntas frequentes do sistema",
+    "newQuestion": "Nova Pergunta",
+    "totalFaqs": "Total de FAQs",
+    "searchPlaceholder": "Buscar por pergunta ou resposta...",
+    "noQuestionsFound": "Nenhuma pergunta encontrada",
+    "adjustFilters": "Tente ajustar os filtros ou criar uma nova pergunta.",
+    "createFirstQuestion": "Criar Primeira Pergunta",
+    "edit": "Editar",
+    "delete": "Excluir",
+    "confirmDelete": "Confirmar Exclusão",
+    "deleteDescription": "Tem certeza que deseja excluir esta pergunta frequente? Esta ação não pode ser desfeita.",
+    "cancel": "Cancelar",
+    "editQuestion": "Editar Pergunta Frequente",
+    "newQuestionTitle": "Nova Pergunta Frequente",
+    "editDescription": "Edite as informações da pergunta frequente",
+    "createDescription": "Crie uma nova pergunta frequente",
+    "language": "Idioma",
+    "selectLanguage": "Selecione um idioma",
+    "question": "Pergunta",
+    "questionPlaceholder": "Digite a pergunta",
+    "answer": "Resposta",
+    "answerPlaceholder": "Digite a resposta detalhada",
+    "createQuestionButton": "Criar Pergunta",
+    "saveChanges": "Salvar Alterações",
+    "errorLoading": "Erro ao carregar os dados do FAQ.",
+    "successUpdate": "FAQ atualizado com sucesso!",
+    "successCreate": "FAQ criado com sucesso!",
+    "errorSave": "Erro ao salvar o FAQ.",
+    "successDelete": "FAQ excluído com sucesso!",
+    "errorDelete": "Erro ao excluir o FAQ."
+  }
+}

package/package.json

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