@hed-hog/contact-us 0.0.279 → 0.0.286

package/README.md

@@ -1,3 +1,4 @@
+```markdown
 # @hed-hog/contact-us
 
 ## 1. Visão geral do módulo
@@ -417,3 +418,4 @@ Resposta: objeto da mensagem excluída.
 ---
 
 Este módulo integra-se com os módulos `@hed-hog/api-locale`, `@hed-hog/api-prisma`, `@hed-hog/api-pagination` e `@hed-hog/core` para funcionalidades de localização, acesso ao banco de dados, paginação e envio de e-mails.
+```

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

@@ -1,6 +1,13 @@
 'use client';
 
-import { PageHeader, SearchBar } from '@/components/entity-list';
+import {
+  EmptyState,
+  Page,
+  PageHeader,
+  PaginationFooter,
+  SearchBar,
+  StatsCards,
+} from '@/components/entity-list';
 import {
   AlertDialog,
   AlertDialogAction,
@@ -31,6 +38,14 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
 import { Textarea } from '@/components/ui/textarea';
 import { useDebounce } from '@/hooks/use-debounce';
 import { formatDateTime } from '@/lib/format-date';
@@ -94,7 +109,7 @@ interface ContactUs {
   user_contact_us_user_idTouser?: User;
 }
 
-export default function Page() {
+export default function ContactUsPage() {
   const t = useTranslations('contact-us.ContactUs');
 
   const statusOptions = [
@@ -113,6 +128,8 @@ export default function Page() {
   const [searchTerm, setSearchTerm] = useState('');
   const debouncedSearch = useDebounce(searchTerm);
   const [statusFilter, setStatusFilter] = useState('all');
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(10);
   const [loadingRespond, setLoadingRespond] = useState(false);
 
   const { request, currentLocaleCode, getSettingValue } = useApp();
@@ -127,30 +144,32 @@ export default function Page() {
     },
   });
 
-  const { data: contacts, refetch: refetchList } = useQuery<
-    PaginationResult<ContactUs>
-  >({
-    queryKey: ['contact-us'],
+  const { data: contacts, refetch: refetchList } = useQuery<
+    PaginationResult<ContactUs>
+  >({
+    queryKey: ['contact-us', debouncedSearch, statusFilter, page, pageSize],
     queryFn: async () => {
       const response = await request({
         url: '/contact-us',
         params: {
+          page,
+          pageSize,
           search: debouncedSearch,
-          status: statusFilter,
+          status: statusFilter === 'all' ? undefined : statusFilter,
         },
       });
       return response.data as PaginationResult<ContactUs>;
     },
-  });
-  const contactList = contacts ?? {
-    data: [],
-    total: 0,
-    page: 1,
-    pageSize: 10,
-    lastPage: 1,
-    prev: null,
-    next: null,
-  };
+  });
+  const contactList = contacts ?? {
+    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);
@@ -219,105 +238,89 @@ export default function Page() {
 
   useEffect(() => {
     refetchList();
-  }, [debouncedSearch, statusFilter]);
+  }, [debouncedSearch, statusFilter, page, pageSize]);
+
+  const statsCards = [
+    {
+      title: t('totalContacts'),
+      value: stats?.total ?? 0,
+      icon: <MessageSquare className="h-5 w-5" />,
+      iconBgColor: 'bg-blue-50',
+      iconColor: 'text-blue-600',
+    },
+    {
+      title: t('new'),
+      value: stats?.totalNew ?? 0,
+      icon: <Clock className="h-5 w-5" />,
+      iconBgColor: 'bg-orange-50',
+      iconColor: 'text-orange-600',
+    },
+    {
+      title: t('responded'),
+      value: stats?.totalResponded ?? 0,
+      icon: <Reply className="h-5 w-5" />,
+      iconBgColor: 'bg-green-50',
+      iconColor: 'text-green-600',
+    },
+    {
+      title: t('inProgress'),
+      value: stats?.totalProgress ?? 0,
+      icon: <UserIcon className="h-5 w-5" />,
+      iconBgColor: 'bg-purple-50',
+      iconColor: 'text-purple-600',
+    },
+  ];
+
+  const searchControls = [
+    {
+      id: 'status',
+      type: 'select' as const,
+      value: statusFilter,
+      onChange: (value: string) => {
+        setStatusFilter(value);
+        setPage(1);
+      },
+      placeholder: t('status'),
+      options: [
+        { value: 'all', label: t('allStatus') },
+        ...statusOptions.map((status) => ({
+          value: status.value,
+          label: status.label,
+        })),
+      ],
+    },
+  ];
 
   return (
-    <div className="flex flex-col h-screen px-4">
+    <Page>
       <PageHeader
-        breadcrumbs={[
-          { label: 'Home', href: '/' },
-          { label: t('description') },
-        ]}
+        breadcrumbs={[{ label: 'Home', href: '/' }, { label: t('title') }]}
         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>
+      <StatsCards stats={statsCards} />
 
-        <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">
+      <div className="mb-2 mt-2">
         <SearchBar
           searchQuery={searchTerm}
-          onSearchChange={setSearchTerm}
-          onSearch={() => refetchList()}
+          onSearchChange={(value) => {
+            setSearchTerm(value);
+            setPage(1);
+          }}
+          onSearch={() => {
+            setPage(1);
+            refetchList();
+          }}
           placeholder={t('searchPlaceholder')}
+          controls={searchControls}
         />
-        <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">
-        {contactList.data.length > 0 ? (
-          <div className="grid gap-4">
-            {contactList.data.map((contact) => (
+        {contactList.data.length > 0 ? (
+          <div className="grid gap-4">
+            {contactList.data.map((contact) => (
               <Card
                 key={contact.id}
                 className="overflow-hidden transition-all duration-200 hover:border-primary/20 hover:shadow-md"
@@ -462,34 +465,30 @@ export default function Page() {
             ))}
           </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>
+          <EmptyState
+            icon={<MessageSquare className="h-12 w-12" />}
+            title={t('noContactsFound')}
+            description={t('adjustFiltersSearch')}
+            actionLabel={t('clearFilters')}
+            onAction={() => {
+              setSearchTerm('');
+              setStatusFilter('all');
+              setPage(1);
+              refetchList();
+            }}
+          />
         )}
+
+        <PaginationFooter
+          currentPage={contactList.page || page}
+          pageSize={contactList.pageSize || pageSize}
+          totalItems={contactList.total}
+          onPageChange={setPage}
+          onPageSizeChange={(nextPageSize) => {
+            setPageSize(nextPageSize);
+            setPage(1);
+          }}
+        />
       </div>
 
       <Dialog open={isViewDialogOpen} onOpenChange={setIsViewDialogOpen}>
@@ -587,17 +586,25 @@ export default function Page() {
         </DialogContent>
       </Dialog>
 
-      <Dialog open={isReplyDialogOpen} onOpenChange={setIsReplyDialogOpen}>
-        <DialogContent className="max-w-2xl">
-          <DialogHeader className="mb-2">
-            <DialogTitle>{t('replyContact')}</DialogTitle>
-            <DialogDescription>
+      <Sheet
+        open={isReplyDialogOpen}
+        onOpenChange={(open) => {
+          setIsReplyDialogOpen(open);
+          if (!open) {
+            setReplyMessage('');
+          }
+        }}
+      >
+        <SheetContent className="w-full overflow-y-auto sm:max-w-2xl">
+          <SheetHeader className="mb-2">
+            <SheetTitle>{t('replyContact')}</SheetTitle>
+            <SheetDescription>
               {t('sendResponseTo', { name: String(selectedContact?.name) })}
-            </DialogDescription>
-          </DialogHeader>
+            </SheetDescription>
+          </SheetHeader>
 
           {selectedContact && (
-            <div className="space-y-4">
+            <div className="space-y-4 px-4">
               <div className="rounded-md border bg-muted/50 p-3">
                 <div className="mb-2 text-sm font-medium">
                   {t('originalMessage')}
@@ -622,21 +629,11 @@ export default function Page() {
             </div>
           )}
 
-          <DialogFooter className="mt-2">
-            <Button
-              variant="outline"
-              onClick={() => {
-                setIsReplyDialogOpen(false);
-                setReplyMessage('');
-              }}
-            >
-              <X className="mr-2 h-4 w-4" />
-              {t('cancel')}
-            </Button>
+          <SheetFooter>
             <Button
               onClick={handleSendReply}
               disabled={!replyMessage.trim() || loadingRespond}
-              className="transition-colors hover:bg-primary/90"
+              className="w-full transition-colors hover:bg-primary/90"
             >
               {loadingRespond ? (
                 <>
@@ -650,9 +647,9 @@ export default function Page() {
                 </>
               )}
             </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-    </div>
+          </SheetFooter>
+        </SheetContent>
+      </Sheet>
+    </Page>
   );
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hed-hog/contact-us",
-  "version": "0.0.279",
+  "version": "0.0.286",
   "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.13",
+    "@hed-hog/core": "0.0.286",
+    "@hed-hog/api-pagination": "0.0.6",
     "@hed-hog/api-prisma": "0.0.5",
-    "@hed-hog/core": "0.0.279",
-    "@hed-hog/api": "0.0.4",
-    "@hed-hog/api-pagination": "0.0.6"
+    "@hed-hog/api-locale": "0.0.13",
+    "@hed-hog/api": "0.0.4"
   },
   "exports": {
     ".": {