@hed-hog/contact 0.0.279 → 0.0.286

package/hedhog/frontend/app/contact-type/page.tsx.ejs

@@ -1,18 +1,31 @@
 'use client';
 
 import {
+  EmptyState,
+  Page,
   PageHeader,
   PaginationFooter,
   SearchBar,
 } from '@/components/entity-list';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
 import { Button } from '@/components/ui/button';
 import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog';
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -211,7 +224,7 @@ export default function ContactTypePage() {
   };
 
   return (
-    <div className="flex flex-col h-screen px-4">
+    <Page>
       <PageHeader
         breadcrumbs={[
           { label: t('breadcrumbContact'), href: '/contact/dashboard' },
@@ -238,31 +251,23 @@ export default function ContactTypePage() {
         />
       </div>
 
-      <div className="rounded-md border mb-4">
-        <Table>
-          <TableHeader>
-            <TableRow>
-              <TableHead>{t('tableSlug')}</TableHead>
-              <TableHead>{t('tableName')}</TableHead>
-              <TableHead>{t('tableCreatedAt')}</TableHead>
-              <TableHead className="w-[70px]"></TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {isLoading ? (
-              <TableRow>
-                <TableCell colSpan={5} className="text-center">
-                  {t('loading')}
-                </TableCell>
-              </TableRow>
-            ) : paginate.data.length === 0 ? (
+      {isLoading ? (
+        <div className="rounded-md border p-8 text-center text-sm text-muted-foreground">
+          {t('loading')}
+        </div>
+      ) : paginate.data.length > 0 ? (
+        <div className="rounded-md border mb-4">
+          <Table>
+            <TableHeader>
               <TableRow>
-                <TableCell colSpan={5} className="text-center">
-                  {t('noResults')}
-                </TableCell>
+                <TableHead>{t('tableSlug')}</TableHead>
+                <TableHead>{t('tableName')}</TableHead>
+                <TableHead>{t('tableCreatedAt')}</TableHead>
+                <TableHead className="w-[70px]"></TableHead>
               </TableRow>
-            ) : (
-              paginate.data.map((contactType) => (
+            </TableHeader>
+            <TableBody>
+              {paginate.data.map((contactType) => (
                 <TableRow
                   key={contactType.id}
                   onDoubleClick={() => handleEdit(contactType)}
@@ -316,11 +321,21 @@ export default function ContactTypePage() {
                     </DropdownMenu>
                   </TableCell>
                 </TableRow>
-              ))
-            )}
-          </TableBody>
-        </Table>
-      </div>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
+      ) : (
+        <div className="mb-4">
+          <EmptyState
+            icon={<Plus className="h-12 w-12" />}
+            title={t('noResults')}
+            description={t('emptyStateDescription')}
+            actionLabel={t('emptyStateAction')}
+            onAction={() => setIsDialogOpen(true)}
+          />
+        </div>
+      )}
 
       <PaginationFooter
         currentPage={page}
@@ -331,15 +346,18 @@ export default function ContactTypePage() {
         pageSizeOptions={[10, 20, 30, 40, 50]}
       />
 
-      <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
-        <DialogContent className="max-w-md">
-          <DialogHeader>
-            <DialogTitle>{t('dialogNewTitle')}</DialogTitle>
-            <DialogDescription>{t('dialogNewDescription')}</DialogDescription>
-          </DialogHeader>
+      <Sheet open={isDialogOpen} onOpenChange={setIsDialogOpen}>
+        <SheetContent className="w-full sm:max-w-md">
+          <SheetHeader>
+            <SheetTitle>{t('dialogNewTitle')}</SheetTitle>
+            <SheetDescription>{t('dialogNewDescription')}</SheetDescription>
+          </SheetHeader>
 
           <Form {...form}>
-            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+            <form
+              onSubmit={form.handleSubmit(onSubmit)}
+              className="space-y-4 px-4"
+            >
               <FormField
                 control={form.control}
                 name="code"
@@ -374,32 +392,34 @@ export default function ContactTypePage() {
                 )}
               />
 
-              <div className="flex justify-end gap-2">
-                <Button
-                  type="button"
-                  variant="outline"
-                  onClick={() => setIsDialogOpen(false)}
-                >
-                  {t('buttonCancel')}
-                </Button>
+              <SheetFooter className="px-0">
                 <Button type="submit">{t('buttonCreate')}</Button>
-              </div>
+              </SheetFooter>
             </form>
           </Form>
-        </DialogContent>
-      </Dialog>
-
-      <Dialog open={isEditDialogOpen} onOpenChange={setIsEditDialogOpen}>
-        <DialogContent className="max-w-md">
-          <DialogHeader>
-            <DialogTitle>{t('dialogEditTitle')}</DialogTitle>
-            <DialogDescription>{t('dialogEditDescription')}</DialogDescription>
-          </DialogHeader>
+        </SheetContent>
+      </Sheet>
+
+      <Sheet
+        open={isEditDialogOpen}
+        onOpenChange={(open) => {
+          setIsEditDialogOpen(open);
+          if (!open) {
+            setEditingContactType(null);
+            editForm.reset();
+          }
+        }}
+      >
+        <SheetContent className="w-full sm:max-w-md">
+          <SheetHeader>
+            <SheetTitle>{t('dialogEditTitle')}</SheetTitle>
+            <SheetDescription>{t('dialogEditDescription')}</SheetDescription>
+          </SheetHeader>
 
           <Form {...editForm}>
             <form
               onSubmit={editForm.handleSubmit(onEditSubmit)}
-              className="space-y-4"
+              className="space-y-4 px-4"
             >
               <FormField
                 control={editForm.control}
@@ -435,46 +455,40 @@ export default function ContactTypePage() {
                 )}
               />
 
-              <div className="flex justify-end gap-2">
-                <Button
-                  type="button"
-                  variant="outline"
-                  onClick={() => setIsEditDialogOpen(false)}
-                >
-                  {t('buttonCancel')}
-                </Button>
+              <SheetFooter className="px-0">
                 <Button type="submit">{t('buttonUpdate')}</Button>
-              </div>
+              </SheetFooter>
             </form>
           </Form>
-        </DialogContent>
-      </Dialog>
-
-      <Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
-        <DialogContent className="max-w-md">
-          <DialogHeader>
-            <DialogTitle>{t('dialogDeleteTitle')}</DialogTitle>
-            <DialogDescription>
+        </SheetContent>
+      </Sheet>
+
+      <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>{t('dialogDeleteTitle')}</AlertDialogTitle>
+            <AlertDialogDescription>
               {t('dialogDeleteDescription')}
-            </DialogDescription>
-          </DialogHeader>
-          <div className="flex justify-end gap-2 mt-4">
-            <Button
-              type="button"
-              variant="outline"
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel
               onClick={() => {
                 setDeleteDialogOpen(false);
                 setDeletingId(null);
               }}
             >
               {t('buttonCancel')}
-            </Button>
-            <Button type="button" variant="destructive" onClick={handleDelete}>
+            </AlertDialogCancel>
+            <AlertDialogAction
+              onClick={handleDelete}
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+            >
               {t('buttonDelete')}
-            </Button>
-          </div>
-        </DialogContent>
-      </Dialog>
-    </div>
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </Page>
   );
 }