Enhance frontend documentation and UI components; update frontend-shadcn.mdc to include UI patterns reference; improve navigation structure in AppSidebar by categorizing items; refactor DataTableCard to support empty states with EmptyState component; implement ConfirmDialog for delete actions in DnsRecordsTable and GroupsPage; add search functionality in CertificatesPage and GroupsPage for better user experience; update ServiceEditSheet to utilize tabs for organization.

apps/web/src/components/data-table-card.tsx

@@ -1,3 +1,5 @@
+import { InboxIcon, type LucideIcon } from 'lucide-react'
+import { EmptyState } from '@/components/empty-state'
 import {
   Card,
   CardContent,
@@ -10,8 +12,11 @@ interface DataTableCardProps {
   title: string
   description?: string
   children: React.ReactNode
+  toolbar?: React.ReactNode
   emptyTitle?: string
   emptyDescription?: string
+  emptyIcon?: LucideIcon
+  emptyAction?: React.ReactNode
   isEmpty?: boolean
 }
 
@@ -19,8 +24,11 @@ export function DataTableCard({
   title,
   description,
   children,
+  toolbar,
   emptyTitle,
   emptyDescription,
+  emptyIcon: EmptyIcon = InboxIcon,
+  emptyAction,
   isEmpty,
 }: DataTableCardProps) {
   return (
@@ -29,12 +37,17 @@ export function DataTableCard({
         <CardTitle>{title}</CardTitle>
         {description && <CardDescription>{description}</CardDescription>}
       </CardHeader>
+      {toolbar && !isEmpty && (
+        <div className="flex items-center gap-2 px-6 pb-4">{toolbar}</div>
+      )}
       <CardContent className="p-0">
         {isEmpty && emptyTitle ? (
-          <div className="flex flex-col gap-1 p-6 text-sm text-muted-foreground">
-            <p className="font-medium text-foreground">{emptyTitle}</p>
-            {emptyDescription && <p>{emptyDescription}</p>}
-          </div>
+          <EmptyState
+            icon={EmptyIcon}
+            title={emptyTitle}
+            description={emptyDescription}
+            action={emptyAction}
+          />
         ) : (
           children
         )}