@hed-hog/core 0.0.278 → 0.0.285

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

@@ -2,7 +2,13 @@
 
 import type React from 'react';
 
-import { PageHeader } from '@/components/entity-list';
+import {
+  EmptyState,
+  Page,
+  PageHeader,
+  PaginationFooter,
+  SearchBar,
+} from '@/components/entity-list';
 import { RichTextEditor } from '@/components/rich-text-editor';
 import {
   AlertDialog,
@@ -33,6 +39,13 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
 import {
   Table,
   TableBody,
@@ -82,7 +95,17 @@ interface ImportResponse {
 export default function EmailTemplatesPage() {
   const { locales, request, currentLocaleCode, getSettingValue } = useApp();
   const t = useTranslations('core.MailPage');
-  const { items, refetch } = usePagination({ url: '/mail' });
+  const {
+    items,
+    refetch,
+    page,
+    setPage,
+    pageSize,
+    setPageSize,
+    totalItems,
+    search,
+    setSearch,
+  } = usePagination({ url: '/mail' });
   const [templates, setTemplates] = useState<Mail[]>([]);
   const [isDialogOpen, setIsDialogOpen] = useState(false);
   const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
@@ -689,7 +712,7 @@ export default function EmailTemplatesPage() {
   };
 
   return (
-    <div className="flex flex-col h-screen px-4">
+    <Page>
       <PageHeader
         breadcrumbs={[
           { label: t('breadcrumbHome'), href: '/' },
@@ -720,118 +743,154 @@ export default function EmailTemplatesPage() {
         description={t('description')}
       />
 
-      <Table>
-        <TableHeader>
-          <TableRow>
-            <TableHead className="w-12">
-              <Checkbox
-                checked={
-                  selectedTemplates.size === templates.length &&
-                  templates.length > 0
-                }
-                onCheckedChange={handleToggleAll}
-              />
-            </TableHead>
-            <TableHead>{t('tableSlug')}</TableHead>
-            <TableHead>{t('tableSubject')}</TableHead>
-            <TableHead>{t('tableVariables')}</TableHead>
-            <TableHead>{t('tableUpdated')}</TableHead>
-            <TableHead className="text-right">{t('tableActions')}</TableHead>
-          </TableRow>
-        </TableHeader>
-        <TableBody>
-          {templates.map((template) => (
-            <TableRow
-              key={template.id}
-              onDoubleClick={() => handleEdit(template)}
-              className="cursor-pointer"
-            >
-              <TableCell onClick={(e) => e.stopPropagation()}>
-                <Checkbox
-                  checked={selectedTemplates.has(
-                    template.mail_id || template.id
-                  )}
-                  onCheckedChange={() =>
-                    handleToggleTemplate(template.mail_id || template.id)
-                  }
-                />
-              </TableCell>
-              <TableCell className="font-mono text-sm">
-                {template.slug}
-              </TableCell>
-              <TableCell>{template.subject}</TableCell>
-              <TableCell>
-                <div className="flex flex-wrap gap-1">
-                  {template.mail_var.map((v, index) => (
-                    <Badge
-                      key={`${template.id}-${v.id}-${index}`}
-                      variant="secondary"
-                      className="text-xs"
-                    >
-                      {v.name}
-                    </Badge>
-                  ))}
-                </div>
-              </TableCell>
-              <TableCell className="text-muted-foreground">
-                {formatDate(
-                  template.updated_at,
-                  getSettingValue,
-                  currentLocaleCode
-                )}
-              </TableCell>
-              <TableCell className="text-right">
-                <div className="flex justify-end gap-2">
-                  <Button
-                    variant="ghost"
-                    size="icon"
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      handleDownloadHTML(template);
-                    }}
-                    title={t('downloadHTML')}
-                  >
-                    <FileDown className="h-4 w-4" />
-                  </Button>
-                  <Button
-                    variant="ghost"
-                    size="icon"
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      handleEdit(template);
-                    }}
-                  >
-                    <Pencil className="h-4 w-4" />
-                  </Button>
-                  <Button
-                    variant="ghost"
-                    size="icon"
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      handleDelete(Number(template.mail_id || template.id));
-                    }}
-                  >
-                    <Trash2 className="h-4 w-4 text-destructive" />
-                  </Button>
-                </div>
-              </TableCell>
-            </TableRow>
-          ))}
-        </TableBody>
-      </Table>
-
-      <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
-        <DialogContent className="max-h-[90vh] max-w-[95vw] overflow-y-auto">
-          <DialogHeader>
-            <DialogTitle>
+      <SearchBar
+        searchQuery={search}
+        onSearchChange={(value) => {
+          setSearch(value);
+          setPage(1);
+        }}
+        onSearch={() => setPage(1)}
+        placeholder={t('searchPlaceholder')}
+      />
+
+      {templates.length === 0 ? (
+        <EmptyState
+          icon={<MailIcon className="h-12 w-12" />}
+          title={t('noTemplatesFound')}
+          description={t('noTemplatesHint')}
+          actionLabel={t('newTemplate')}
+          onAction={handleCreate}
+        />
+      ) : (
+        <div className="rounded-md border">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead className="w-12">
+                  <Checkbox
+                    checked={
+                      selectedTemplates.size === templates.length &&
+                      templates.length > 0
+                    }
+                    onCheckedChange={handleToggleAll}
+                  />
+                </TableHead>
+                <TableHead>{t('tableSlug')}</TableHead>
+                <TableHead>{t('tableSubject')}</TableHead>
+                <TableHead>{t('tableVariables')}</TableHead>
+                <TableHead>{t('tableUpdated')}</TableHead>
+                <TableHead className="text-right">{t('tableActions')}</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {templates.map((template) => (
+                <TableRow
+                  key={template.id}
+                  onDoubleClick={() => handleEdit(template)}
+                  className="cursor-pointer"
+                >
+                  <TableCell onClick={(e) => e.stopPropagation()}>
+                    <Checkbox
+                      checked={selectedTemplates.has(
+                        template.mail_id || template.id
+                      )}
+                      onCheckedChange={() =>
+                        handleToggleTemplate(template.mail_id || template.id)
+                      }
+                    />
+                  </TableCell>
+                  <TableCell className="font-mono text-sm">
+                    {template.slug}
+                  </TableCell>
+                  <TableCell>{template.subject}</TableCell>
+                  <TableCell>
+                    <div className="flex flex-wrap gap-1">
+                      {template.mail_var.map((v, index) => (
+                        <Badge
+                          key={`${template.id}-${v.id}-${index}`}
+                          variant="secondary"
+                          className="text-xs"
+                        >
+                          {v.name}
+                        </Badge>
+                      ))}
+                    </div>
+                  </TableCell>
+                  <TableCell className="text-muted-foreground">
+                    {formatDate(
+                      template.updated_at,
+                      getSettingValue,
+                      currentLocaleCode
+                    )}
+                  </TableCell>
+                  <TableCell className="text-right">
+                    <div className="flex justify-end gap-2">
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          handleDownloadHTML(template);
+                        }}
+                        title={t('downloadHTML')}
+                      >
+                        <FileDown className="h-4 w-4" />
+                      </Button>
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          handleEdit(template);
+                        }}
+                      >
+                        <Pencil className="h-4 w-4" />
+                      </Button>
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          handleDelete(Number(template.mail_id || template.id));
+                        }}
+                      >
+                        <Trash2 className="h-4 w-4 text-destructive" />
+                      </Button>
+                    </div>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
+      )}
+
+      <PaginationFooter
+        currentPage={page}
+        pageSize={pageSize}
+        totalItems={totalItems}
+        onPageChange={setPage}
+        onPageSizeChange={(newSize) => {
+          setPageSize(newSize);
+          setPage(1);
+        }}
+      />
+
+      <Sheet open={isDialogOpen} onOpenChange={setIsDialogOpen}>
+        <SheetContent
+          side="right"
+          className="w-full max-w-[95vw] overflow-y-auto sm:max-w-6xl"
+        >
+          <SheetHeader>
+            <SheetTitle>
               {editMode ? t('editTemplate') : t('newTemplateTitle')}
-            </DialogTitle>
-            <DialogDescription>
+            </SheetTitle>
+            <SheetDescription>
               {editMode
                 ? t('editTemplateDescription')
                 : t('newTemplateDescription')}
-            </DialogDescription>
-          </DialogHeader>
+            </SheetDescription>
+          </SheetHeader>
           <form onSubmit={handleSubmit} className="space-y-6">
             <div className="grid grid-cols-2 gap-6">
               <div className="space-y-4 overflow-y-auto max-h-[calc(90vh-200px)] pr-4">
@@ -987,22 +1046,13 @@ export default function EmailTemplatesPage() {
                   {t('sendTestEmail')}
                 </Button>
               </div>
-              <div className="flex gap-3">
-                <Button
-                  type="button"
-                  variant="outline"
-                  onClick={() => setIsDialogOpen(false)}
-                >
-                  {t('cancel')}
-                </Button>
-                <Button type="submit">
-                  {editMode ? t('saveChanges') : t('createTemplate')}
-                </Button>
-              </div>
+              <Button type="submit" className="min-w-40">
+                {editMode ? t('saveChanges') : t('createTemplate')}
+              </Button>
             </div>
           </form>
-        </DialogContent>
-      </Dialog>
+        </SheetContent>
+      </Sheet>
 
       <Dialog
         open={isTestEmailDialogOpen}
@@ -1172,6 +1222,6 @@ export default function EmailTemplatesPage() {
           </AlertDialogFooter>
         </AlertDialogContent>
       </AlertDialog>
-    </div>
+    </Page>
   );
 }

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

@@ -1,12 +1,24 @@
 'use client';
 
 import {
+  EmptyState,
+            icon={<Menu className="h-12 w-12" />}
   PageHeader,
   PaginationFooter,
   SearchBar,
   StatsCards,
 } from '@/components/entity-list';
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import {
@@ -885,7 +897,7 @@ export default function MenuPage() {
   );
 
   return (
-    <div className="flex flex-col h-screen px-4">
+    <Page>
       <PageHeader
         breadcrumbs={[{ label: 'Home', href: '/' }, { label: t('menus') }]}
         actions={[
@@ -947,7 +959,13 @@ export default function MenuPage() {
 
         {!isLoading &&
         (!menusResponse?.data || menusResponse.data.length === 0) ? (
-          <p className="text-sm text-muted-foreground">{t('noMenusFound')}</p>
+          <EmptyState
+            icon={Menu}
+            title={t('noMenusFound')}
+            description={t('description')}
+            actionLabel={t('buttonAddMenu')}
+            onAction={() => setIsDialogOpen(true)}
+          />
         ) : (
           <div className="grid gap-4 grid-cols-1 lg:grid-cols-2 xl:grid-cols-3">
             {menusResponse?.data?.map((menu: MenuItem) => (
@@ -1022,19 +1040,18 @@ export default function MenuPage() {
           />
         </div>
 
-        <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
-          <DialogContent className="sm:max-w-lg">
-            <DialogHeader>
-              <DialogTitle>{t('dialogAddMenuTitle')}</DialogTitle>
-              <DialogDescription>
+        <Sheet open={isDialogOpen} onOpenChange={setIsDialogOpen}>
+          <SheetContent className="w-full sm:max-w-lg overflow-y-auto gap-0">
+            <SheetHeader>
+              <SheetTitle>{t('dialogAddMenuTitle')}</SheetTitle>
+              <SheetDescription>
                 {t('dialogAddMenuDescription')}
-              </DialogDescription>
-            </DialogHeader>
-            <div className="w-full border-t pt-1 mt-1" />
+              </SheetDescription>
+            </SheetHeader>
             <Form {...form}>
               <form
                 onSubmit={form.handleSubmit(onSubmit)}
-                className="space-y-4"
+                className="space-y-4 px-4 pt-2"
               >
                 <FormField
                   control={form.control}
@@ -1175,8 +1192,8 @@ export default function MenuPage() {
                 </Button>
               </form>
             </Form>
-          </DialogContent>
-        </Dialog>
+          </SheetContent>
+        </Sheet>
 
         {editingMenu && (
           <Sheet open={!!editingMenu} onOpenChange={() => setEditingMenu(null)}>
@@ -1399,33 +1416,22 @@ export default function MenuPage() {
           </Sheet>
         )}
 
-        <Dialog open={openDeleteModal} onOpenChange={setOpenDeleteModal}>
-          <DialogContent className="sm:max-w-lg">
-            <DialogHeader>
-              <DialogTitle>{t('dialogDeleteMenuTitle')}</DialogTitle>
-              <DialogDescription>
+        <AlertDialog open={openDeleteModal} onOpenChange={setOpenDeleteModal}>
+          <AlertDialogContent>
+            <AlertDialogHeader>
+              <AlertDialogTitle>{t('dialogDeleteMenuTitle')}</AlertDialogTitle>
+              <AlertDialogDescription>
                 {t('dialogDeleteMenuDescription')}
-              </DialogDescription>
-            </DialogHeader>
-            <hr className="mt-4" />
-            <div className="flex justify-end">
-              <Button
-                type="button"
-                className="px-4 w-28 h-12 py-2 bg-gray-300 text-black hover:bg-gray-300 hover:text-black rounded-sm mr-2 text-md"
-                onClick={() => setOpenDeleteModal(false)}
-              >
-                {t('deleteMenuCancel')}
-              </Button>
-              <Button
-                onClick={onDelete}
-                variant="destructive"
-                className="px-4 w-32 h-12 py-2 text-white hover:text-white rounded-sm text-md cursor-pointer"
-              >
+              </AlertDialogDescription>
+            </AlertDialogHeader>
+            <AlertDialogFooter>
+              <AlertDialogCancel>{t('deleteMenuCancel')}</AlertDialogCancel>
+              <AlertDialogAction onClick={onDelete}>
                 {t('deleteMenuConfirm')}
-              </Button>
-            </div>
-          </DialogContent>
-        </Dialog>
+              </AlertDialogAction>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialog>
 
         <MenuTreeDialog
           open={isTreeOpen}
@@ -1436,6 +1442,6 @@ export default function MenuPage() {
           }}
         />
       </div>
-    </div>
+    </Page>
   );
 }

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

@@ -1,12 +1,24 @@
 'use client';
 
 import {
+  EmptyState,
+            icon={<ShieldCheck className="h-12 w-12" />}
   PageHeader,
   PaginationFooter,
   SearchBar,
   StatsCards,
 } from '@/components/entity-list';
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
 import { Button } from '@/components/ui/button';
 import {
   Card,
@@ -15,13 +27,6 @@ import {
   CardHeader,
   CardTitle,
 } from '@/components/ui/card';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog';
 import {
   Form,
   FormControl,
@@ -367,7 +372,7 @@ export default function RolePage() {
   };
 
   return (
-    <div className="flex flex-col h-screen px-4">
+    <Page>
       <PageHeader
         breadcrumbs={[{ label: 'Home', href: '/' }, { label: t('roles') }]}
         actions={[
@@ -423,7 +428,13 @@ export default function RolePage() {
 
         {!isLoading &&
         (!rolesResponse?.data || rolesResponse.data.length === 0) ? (
-          <p className="text-sm text-muted-foreground">{t('noRolesFound')}</p>
+          <EmptyState
+            icon={ShieldCheck}
+            title={t('noRolesFound')}
+            description={t('description')}
+            actionLabel={t('buttonAddRole')}
+            onAction={() => setIsDialogOpen(true)}
+          />
         ) : (
           <div className="grid gap-4 grid-cols-1 lg:grid-cols-2 xl:grid-cols-3">
             {(rolesResponse?.data as (Role & { role_id: number })[])?.map(
@@ -504,19 +515,18 @@ export default function RolePage() {
           />
         </div>
 
-        <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
-          <DialogContent className="sm:max-w-lg">
-            <DialogHeader>
-              <DialogTitle>{t('dialogAddRoleTitle')}</DialogTitle>
-              <DialogDescription>
+        <Sheet open={isDialogOpen} onOpenChange={setIsDialogOpen}>
+          <SheetContent className="w-full sm:max-w-lg overflow-y-auto gap-0">
+            <SheetHeader>
+              <SheetTitle>{t('dialogAddRoleTitle')}</SheetTitle>
+              <SheetDescription>
                 {t('dialogAddRoleDescription')}
-              </DialogDescription>
-            </DialogHeader>
-            <div className="w-full border-t pt-1 mt-1" />
+              </SheetDescription>
+            </SheetHeader>
             <Form {...form}>
               <form
                 onSubmit={form.handleSubmit(onSubmit)}
-                className="space-y-4"
+                className="space-y-4 px-4 pt-2"
               >
                 <FormField
                   control={form.control}
@@ -586,8 +596,8 @@ export default function RolePage() {
                 </Button>
               </form>
             </Form>
-          </DialogContent>
-        </Dialog>
+          </SheetContent>
+        </Sheet>
 
         {editingRole && (
           <Sheet open={!!editingRole} onOpenChange={() => setEditingRole(null)}>
@@ -783,34 +793,23 @@ export default function RolePage() {
           </Sheet>
         )}
 
-        <Dialog open={openDeleteModal} onOpenChange={setOpenDeleteModal}>
-          <DialogContent className="sm:max-w-lg">
-            <DialogHeader>
-              <DialogTitle>{t('dialogDeleteRoleTitle')}</DialogTitle>
-              <DialogDescription>
+        <AlertDialog open={openDeleteModal} onOpenChange={setOpenDeleteModal}>
+          <AlertDialogContent>
+            <AlertDialogHeader>
+              <AlertDialogTitle>{t('dialogDeleteRoleTitle')}</AlertDialogTitle>
+              <AlertDialogDescription>
                 {t('dialogDeleteRoleDescription')}
-              </DialogDescription>
-            </DialogHeader>
-            <hr className="mt-4" />
-            <div className="flex justify-end">
-              <Button
-                type="button"
-                className="px-4 w-28 h-12 py-2 bg-gray-300 text-black hover:bg-gray-300 hover:text-black rounded-sm mr-2 text-md"
-                onClick={() => setOpenDeleteModal(false)}
-              >
-                {t('deleteRoleCancel')}
-              </Button>
-              <Button
-                onClick={onDelete}
-                variant="destructive"
-                className="px-4 w-32 h-12 py-2 text-white hover:text-white rounded-sm text-md cursor-pointer"
-              >
+              </AlertDialogDescription>
+            </AlertDialogHeader>
+            <AlertDialogFooter>
+              <AlertDialogCancel>{t('deleteRoleCancel')}</AlertDialogCancel>
+              <AlertDialogAction onClick={onDelete}>
                 {t('deleteRoleConfirm')}
-              </Button>
-            </div>
-          </DialogContent>
-        </Dialog>
+              </AlertDialogAction>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialog>
       </div>
-    </div>
+    </Page>
   );
 }