@hed-hog/contact-us 0.0.185 → 0.0.190

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

@@ -0,0 +1,658 @@
+'use client';
+
+import { PageHeader, 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 { 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 { formatDateTime } from '@/lib/format-date';
+import { cn } from '@/lib/utils';
+import { User } from '@hed-hog/api-types';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import {
+  Calendar,
+  Clock,
+  Eye,
+  Loader2,
+  Mail,
+  MessageSquare,
+  Reply,
+  Send,
+  Trash2,
+  UserIcon,
+  X,
+} from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useEffect, useState } from 'react';
+import { toast } from 'sonner';
+
+interface Stats {
+  total: number;
+  totalNew: number;
+  totalResponded: number;
+  totalProgress: number;
+}
+
+enum ContactUsStatusEnum {
+  new = 'new',
+  progress = 'progress',
+  answered = 'answered',
+  archived = 'archived',
+}
+
+type PaginationResult<T> = {
+  total: number;
+  lastPage: number;
+  page: number;
+  pageSize: number;
+  prev: number | null;
+  next: number | null;
+  data: T[];
+};
+
+interface ContactUs {
+  id?: number;
+  name: string;
+  email: string;
+  message: string;
+  created_at?: string;
+  updated_at?: string;
+  status?: ContactUsStatusEnum;
+  response?: string;
+  response_at?: string;
+  response_id?: number;
+  user_id?: number;
+  user?: User;
+  user_contact_us_user_idTouser?: User;
+}
+
+export default function Page() {
+  const t = useTranslations('contact-us.ContactUs');
+
+  const statusOptions = [
+    { value: 'new', label: t('statusNew'), color: 'bg-blue-500' },
+    { value: 'progress', label: t('statusProgress'), color: 'bg-yellow-500' },
+    { value: 'answered', label: t('statusAnswered'), color: 'bg-green-500' },
+    { value: 'archived', label: t('statusArchived'), color: 'bg-gray-500' },
+  ];
+
+  const [selectedContact, setSelectedContact] = useState<ContactUs | null>(
+    null
+  );
+  const [isViewDialogOpen, setIsViewDialogOpen] = useState(false);
+  const [isReplyDialogOpen, setIsReplyDialogOpen] = useState(false);
+  const [replyMessage, setReplyMessage] = useState('');
+  const [searchTerm, setSearchTerm] = useState('');
+  const debouncedSearch = useDebounce(searchTerm);
+  const [statusFilter, setStatusFilter] = useState('all');
+  const [loadingRespond, setLoadingRespond] = useState(false);
+
+  const { request, currentLocaleCode, getSettingValue } = useApp();
+
+  const { data: stats, refetch: refetchStats } = useQuery<Stats>({
+    queryKey: ['contact-us-stats'],
+    queryFn: async () => {
+      const response = await request({
+        url: '/contact-us/stats',
+      });
+      return response.data as Stats;
+    },
+  });
+
+  const { data: contacts, refetch: refetchList } = useQuery<
+    PaginationResult<ContactUs>
+  >({
+    queryKey: ['contact-us'],
+    queryFn: async () => {
+      const response = await request({
+        url: '/contact-us',
+        params: {
+          search: debouncedSearch,
+          status: statusFilter,
+        },
+      });
+      return response.data as PaginationResult<ContactUs>;
+    },
+    initialData: {
+      data: [],
+      total: 0,
+      page: 1,
+      pageSize: 10,
+      lastPage: 1,
+      prev: null,
+      next: null,
+    },
+  });
+
+  const getStatusBadge = (status: ContactUsStatusEnum) => {
+    const statusOption = statusOptions.find((s) => s.value === status);
+    return statusOption || statusOptions[0];
+  };
+
+  const handleViewContact = (contact: ContactUs): void => {
+    setSelectedContact(contact);
+    setIsViewDialogOpen(true);
+  };
+
+  const handleReplyContact = (contact: ContactUs): void => {
+    setSelectedContact(contact);
+    setIsReplyDialogOpen(true);
+    setReplyMessage('');
+  };
+
+  const handleSendReply = (): void => {
+    if (selectedContact && replyMessage.trim()) {
+      setLoadingRespond(true);
+      request({
+        url: `/contact-us/response/${selectedContact.id}`,
+        method: 'POST',
+        data: {
+          response: replyMessage,
+        },
+      })
+        .then(() => {
+          toast.success(t('successResponse'));
+          setReplyMessage('');
+          setIsReplyDialogOpen(false);
+          setSelectedContact(null);
+          refetchList();
+          refetchStats();
+        })
+        .finally(() => {
+          setLoadingRespond(false);
+        });
+    }
+  };
+
+  const handleDeleteContact = (contactId: number): void => {
+    request({
+      url: `/contact-us/${contactId}`,
+      method: 'DELETE',
+    }).then(() => {
+      toast.success(t('successDelete'));
+      refetchList();
+      refetchStats();
+    });
+  };
+
+  const handleStatusChange = (contactId: number, newStatus: string): void => {
+    request({
+      url: `/contact-us/status/${contactId}`,
+      method: 'PATCH',
+      data: {
+        status: newStatus,
+      },
+    }).then(() => {
+      toast.success(t('successStatusUpdate'));
+      refetchList();
+      refetchStats();
+    });
+  };
+
+  useEffect(() => {
+    refetchList();
+  }, [debouncedSearch, statusFilter]);
+
+  return (
+    <div className="flex flex-col h-screen px-4">
+      <PageHeader
+        breadcrumbs={[
+          { label: 'Home', href: '/' },
+          { label: t('description') },
+        ]}
+        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-0">
+          <CardContent className="p-4">
+            <div className="flex items-center space-x-3">
+              <MessageSquare className="h-10 w-10 text-blue-500" />
+              <div>
+                <p className="text-sm font-medium text-muted-foreground">
+                  {t('totalContacts')}
+                </p>
+                <p className="text-2xl font-bold">{stats?.total}</p>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card className="transition-shadow hover:shadow-md p-0">
+          <CardContent className="p-4">
+            <div className="flex items-center space-x-3">
+              <Clock className="h-10 w-10 text-orange-500" />
+              <div>
+                <p className="text-sm font-medium text-muted-foreground">
+                  {t('new')}
+                </p>
+                <p className="text-2xl font-bold">{stats?.totalNew}</p>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card className="transition-shadow hover:shadow-md p-0">
+          <CardContent className="p-4">
+            <div className="flex items-center space-x-3">
+              <Reply className="h-10 w-10 text-green-500" />
+              <div>
+                <p className="text-sm font-medium text-muted-foreground">
+                  {t('responded')}
+                </p>
+                <p className="text-2xl font-bold">{stats?.totalResponded}</p>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card className="transition-shadow hover:shadow-md p-0">
+          <CardContent className="p-4">
+            <div className="flex items-center space-x-3">
+              <UserIcon className="h-10 w-10 text-purple-500" />
+              <div>
+                <p className="text-sm font-medium text-muted-foreground">
+                  {t('inProgress')}
+                </p>
+                <p className="text-2xl font-bold">{stats?.totalProgress}</p>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      <div className="mb-4 flex flex-col gap-4 md:flex-row mt-4">
+        <SearchBar
+          searchQuery={searchTerm}
+          onSearchChange={setSearchTerm}
+          onSearch={() => refetchList()}
+          placeholder={t('searchPlaceholder')}
+        />
+        <div className="flex gap-2 ">
+          <Select value={statusFilter} onValueChange={setStatusFilter}>
+            <SelectTrigger className="w-40">
+              <SelectValue placeholder={t('status')} />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">{t('allStatus')}</SelectItem>
+              {statusOptions.map((status) => (
+                <SelectItem key={status.value} value={status.value}>
+                  {status.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+      </div>
+
+      <div className="space-y-4">
+        {contacts.data.length > 0 ? (
+          <div className="grid gap-4">
+            {contacts.data.map((contact) => (
+              <Card
+                key={contact.id}
+                className="overflow-hidden transition-all duration-200 hover:border-primary/20 hover:shadow-md"
+              >
+                <CardContent className="p-6">
+                  <div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
+                    <div className="flex-1 space-y-3">
+                      <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
+                        <div className="flex items-center space-x-3">
+                          <div className="flex h-10 w-10 items-center justify-center rounded-full bg-primary/10">
+                            <UserIcon className="h-5 w-5 text-primary" />
+                          </div>
+                          <div>
+                            <h3 className="font-semibold">{contact.name}</h3>
+                            <div className="flex items-center space-x-1 text-sm text-muted-foreground">
+                              <Mail className="h-3 w-3" />
+                              <span>{contact.email}</span>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+
+                      <div className="space-y-2">
+                        <p className="line-clamp-2 text-sm text-muted-foreground">
+                          {contact.message}
+                        </p>
+                        <div className="flex items-center space-x-2 text-xs text-muted-foreground">
+                          {contact.status && (
+                            <Badge
+                              className={cn(
+                                'text-white',
+                                getStatusBadge(contact.status)?.color
+                              )}
+                            >
+                              {getStatusBadge(contact.status)?.label}
+                            </Badge>
+                          )}
+                          {contact.created_at && (
+                            <div className="flex items-center space-x-1 text-xs text-muted-foreground">
+                              <Calendar className="h-3 w-3" />
+                              <span>
+                                {formatDateTime(
+                                  contact.created_at,
+                                  getSettingValue,
+                                  currentLocaleCode
+                                )}
+                              </span>
+                            </div>
+                          )}
+                        </div>
+                      </div>
+                    </div>
+
+                    <div className="flex flex-wrap gap-2 lg:flex-col lg:items-end">
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => handleViewContact(contact)}
+                        className="transition-colors hover:border-primary/20 hover:bg-primary/10 hover:text-primary "
+                      >
+                        <Eye className="mr-1 h-4 w-4" />
+                        {t('view')}
+                      </Button>
+
+                      {contact.status !== 'answered' && (
+                        <Button
+                          variant="outline"
+                          size="sm"
+                          onClick={() => handleReplyContact(contact)}
+                          className="transition-colors hover:border-green-200 hover:bg-green-50 hover:text-green-600 dark:hover:bg-green-950"
+                        >
+                          <Reply className="mr-1 h-4 w-4" />
+                          {t('reply')}
+                        </Button>
+                      )}
+
+                      {contact.id && (
+                        <Select
+                          value={contact.status}
+                          onValueChange={(value) => {
+                            if (contact.id)
+                              handleStatusChange(contact.id, value);
+                          }}
+                        >
+                          <SelectTrigger className="h-8 w-32 text-xs">
+                            <SelectValue />
+                          </SelectTrigger>
+                          <SelectContent>
+                            {statusOptions.map((status) => (
+                              <SelectItem
+                                key={status.value}
+                                value={status.value}
+                              >
+                                {status.label}
+                              </SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                      )}
+
+                      <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', {
+                                name: contact.name,
+                              })}
+                            </AlertDialogDescription>
+                          </AlertDialogHeader>
+                          <AlertDialogFooter>
+                            <AlertDialogCancel>{t('cancel')}</AlertDialogCancel>
+                            <AlertDialogAction
+                              onClick={() => {
+                                if (contact.id) {
+                                  handleDeleteContact(contact.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">
+                <MessageSquare className="h-12 w-12 text-muted-foreground" />
+                <div>
+                  <h3 className="text-lg font-semibold">
+                    {t('noContactsFound')}
+                  </h3>
+                  <p className="text-muted-foreground">
+                    {t('adjustFiltersSearch')}
+                  </p>
+                </div>
+                {(searchTerm || statusFilter !== 'all') && (
+                  <Button
+                    variant="outline"
+                    onClick={() => {
+                      setSearchTerm('');
+                      setStatusFilter('');
+                      refetchList();
+                    }}
+                  >
+                    {t('clearFilters')}
+                  </Button>
+                )}
+              </div>
+            </CardContent>
+          </Card>
+        )}
+      </div>
+
+      <Dialog open={isViewDialogOpen} onOpenChange={setIsViewDialogOpen}>
+        <DialogContent className="max-w-2xl">
+          <DialogHeader className="mb-2">
+            <DialogTitle>{t('contactDetails')}</DialogTitle>
+            <DialogDescription>{t('viewAllInfo')}</DialogDescription>
+          </DialogHeader>
+
+          {selectedContact && (
+            <div className="space-y-4">
+              <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+                <div>
+                  <Label className="text-sm font-medium">{t('name')}</Label>
+                  <p className="text-sm text-muted-foreground">
+                    {selectedContact.name}
+                  </p>
+                </div>
+                <div>
+                  <Label className="text-sm font-medium">{t('email')}</Label>
+                  <p className="text-sm text-muted-foreground">
+                    {selectedContact.email}
+                  </p>
+                </div>
+                {selectedContact.status && (
+                  <div>
+                    <Label className="text-sm font-medium">{t('status')}</Label>
+                    <div>
+                      <Badge
+                        className={cn(
+                          'text-white',
+                          getStatusBadge(selectedContact.status)?.color
+                        )}
+                      >
+                        {getStatusBadge(selectedContact.status)?.label}
+                      </Badge>
+                    </div>
+                  </div>
+                )}
+                {selectedContact.created_at && (
+                  <div>
+                    <Label className="text-sm font-medium">
+                      {t('dateTime')}
+                    </Label>
+                    <p className="text-sm text-muted-foreground">
+                      {formatDateTime(
+                        selectedContact.created_at,
+                        getSettingValue,
+                        currentLocaleCode
+                      )}
+                    </p>
+                  </div>
+                )}
+              </div>
+
+              <div>
+                <Label className="text-sm font-medium">{t('message')}</Label>
+                <div className="mt-2 rounded-md border p-3 font-mono text-sm">
+                  {selectedContact.message}
+                </div>
+              </div>
+
+              {selectedContact.response && (
+                <div>
+                  <Label className="text-sm font-medium">{t('response')}</Label>
+                  <div className="mt-2 rounded-md border p-3 font-mono text-sm">
+                    {selectedContact.response}
+                  </div>
+                </div>
+              )}
+            </div>
+          )}
+
+          <DialogFooter className="mt-2">
+            <Button
+              variant="outline"
+              onClick={() => setIsViewDialogOpen(false)}
+            >
+              <X className="mr-2 h-4 w-4" />
+              {t('close')}
+            </Button>
+            {selectedContact && selectedContact?.status !== 'answered' && (
+              <Button
+                onClick={() => {
+                  setIsViewDialogOpen(false);
+                  handleReplyContact(selectedContact);
+                }}
+                className="transition-colors hover:bg-primary/90"
+              >
+                <Reply className="mr-2 h-4 w-4" />
+                {t('reply')}
+              </Button>
+            )}
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      <Dialog open={isReplyDialogOpen} onOpenChange={setIsReplyDialogOpen}>
+        <DialogContent className="max-w-2xl">
+          <DialogHeader className="mb-2">
+            <DialogTitle>{t('replyContact')}</DialogTitle>
+            <DialogDescription>
+              {t('sendResponseTo', { name: String(selectedContact?.name) })}
+            </DialogDescription>
+          </DialogHeader>
+
+          {selectedContact && (
+            <div className="space-y-4">
+              <div className="rounded-md border bg-muted/50 p-3">
+                <div className="mb-2 text-sm font-medium">
+                  {t('originalMessage')}
+                </div>
+                <div className="font-mono text-sm text-muted-foreground">
+                  {selectedContact.message}
+                </div>
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="reply">{t('yourResponse')}</Label>
+                <Textarea
+                  id="reply"
+                  placeholder={t('responsePlaceholder')}
+                  value={replyMessage}
+                  onChange={(e) => setReplyMessage(e.target.value)}
+                  rows={6}
+                  className="resize-none"
+                  autoFocus
+                />
+              </div>
+            </div>
+          )}
+
+          <DialogFooter className="mt-2">
+            <Button
+              variant="outline"
+              onClick={() => {
+                setIsReplyDialogOpen(false);
+                setReplyMessage('');
+              }}
+            >
+              <X className="mr-2 h-4 w-4" />
+              {t('cancel')}
+            </Button>
+            <Button
+              onClick={handleSendReply}
+              disabled={!replyMessage.trim() || loadingRespond}
+              className="transition-colors hover:bg-primary/90"
+            >
+              {loadingRespond ? (
+                <>
+                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />{' '}
+                  {t('sending')}
+                </>
+              ) : (
+                <>
+                  <Send className="mr-2 h-4 w-4" />
+                  {t('sendResponse')}
+                </>
+              )}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}

package/hedhog/frontend/messages/en.json

@@ -0,0 +1,45 @@
+{
+  "ContactUs": {
+    "title": "Contact Us",
+    "description": "Manage contact messages sent from the website",
+    "totalContacts": "Total Contacts",
+    "new": "New",
+    "responded": "Responded",
+    "inProgress": "In Progress",
+    "searchPlaceholder": "Search by name, email or message...",
+    "status": "Status",
+    "allStatus": "All Status",
+    "statusNew": "New",
+    "statusProgress": "In Progress",
+    "statusAnswered": "Answered",
+    "statusArchived": "Archived",
+    "view": "View",
+    "reply": "Reply",
+    "delete": "Delete",
+    "confirmDelete": "Confirm Deletion",
+    "deleteDescription": "Are you sure you want to delete the contact from {name}? This action cannot be undone.",
+    "cancel": "Cancel",
+    "noContactsFound": "No contacts found",
+    "adjustFiltersSearch": "Try adjusting the filters or search terms.",
+    "clearFilters": "Clear filters",
+    "contactDetails": "Contact Details",
+    "viewAllInfo": "View all contact information sent",
+    "name": "Name",
+    "email": "Email",
+    "dateTime": "Date/Time",
+    "message": "Message",
+    "response": "Response",
+    "close": "Close",
+    "replyContact": "Reply Contact",
+    "sendResponseTo": "Send a response to {name}",
+    "originalMessage": "Original message:",
+    "yourResponse": "Your response",
+    "responsePlaceholder": "Type your response here...",
+    "sendResponse": "Send Response",
+    "sending": "Sending...",
+    "at": "at",
+    "successResponse": "Response sent successfully",
+    "successDelete": "Contact deleted successfully",
+    "successStatusUpdate": "Status updated successfully"
+  }
+}

package/hedhog/frontend/messages/pt.json

@@ -0,0 +1,45 @@
+{
+  "ContactUs": {
+    "title": "Fale Conosco",
+    "description": "Gerencie as mensagens de contato enviadas pelo site",
+    "totalContacts": "Total de Contatos",
+    "new": "Novos",
+    "responded": "Respondidos",
+    "inProgress": "Em Andamento",
+    "searchPlaceholder": "Buscar por nome, email ou mensagem...",
+    "status": "Status",
+    "allStatus": "Todos os Status",
+    "statusNew": "Novo",
+    "statusProgress": "Em Andamento",
+    "statusAnswered": "Respondido",
+    "statusArchived": "Arquivado",
+    "view": "Ver",
+    "reply": "Responder",
+    "delete": "Excluir",
+    "confirmDelete": "Confirmar Exclusão",
+    "deleteDescription": "Tem certeza que deseja excluir o contato de {name}? Esta ação não pode ser desfeita.",
+    "cancel": "Cancelar",
+    "noContactsFound": "Nenhum contato encontrado",
+    "adjustFiltersSearch": "Tente ajustar os filtros ou termos de busca.",
+    "clearFilters": "Limpar filtros",
+    "contactDetails": "Detalhes do Contato",
+    "viewAllInfo": "Visualize todas as informações do contato enviado",
+    "name": "Nome",
+    "email": "Email",
+    "dateTime": "Data/Hora",
+    "message": "Mensagem",
+    "response": "Resposta",
+    "close": "Fechar",
+    "replyContact": "Responder Contato",
+    "sendResponseTo": "Envie uma resposta para {name}",
+    "originalMessage": "Mensagem original:",
+    "yourResponse": "Sua resposta",
+    "responsePlaceholder": "Digite sua resposta aqui...",
+    "sendResponse": "Enviar Resposta",
+    "sending": "Enviando...",
+    "at": "às",
+    "successResponse": "Resposta enviada com sucesso",
+    "successDelete": "Contato excluído com sucesso",
+    "successStatusUpdate": "Status atualizado com sucesso"
+  }
+}

package/package.json

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