@hed-hog/core 0.0.279 → 0.0.286

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

@@ -1,6 +1,7 @@
 'use client';
 
 import {
+  EmptyState,
   Page,
   PageHeader,
   PaginationFooter,
@@ -115,7 +116,7 @@ export default function AiAgentPage() {
     },
   });
 
-  const { data, isLoading, refetch } = useQuery<PaginatedResponse<Agent>>({
+  const { data, isLoading, refetch } = useQuery<PaginatedResponse<Agent>>({
     queryKey: ['ai-agents', page, pageSize, debouncedSearch],
     queryFn: async () => {
       const params = new URLSearchParams();
@@ -130,14 +131,14 @@ export default function AiAgentPage() {
 
       return response.data;
     },
-  });
-  const agentList = data ?? {
-    data: [],
-    total: 0,
-    page: 1,
-    pageSize: 10,
-    totalPages: 1,
-  };
+  });
+  const agentList = data ?? {
+    data: [],
+    total: 0,
+    page: 1,
+    pageSize: 10,
+    totalPages: 1,
+  };
 
   useEffect(() => {
     if (editingAgent) {
@@ -261,69 +262,75 @@ export default function AiAgentPage() {
         placeholder={t('searchPlaceholder')}
       />
 
-      <Card>
-        <CardContent className="p-0">
-          <Table>
-            <TableHeader>
-              <TableRow>
-                <TableHead>Slug</TableHead>
-                <TableHead>{t('columnProvider')}</TableHead>
-                <TableHead>{t('columnModel')}</TableHead>
-                <TableHead>{t('columnExternalId')}</TableHead>
-                <TableHead className="text-right">
-                  {t('columnActions')}
-                </TableHead>
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              {isLoading ? (
+      {isLoading || agentList.data.length > 0 ? (
+        <Card>
+          <CardContent className="p-0">
+            <Table>
+              <TableHeader>
                 <TableRow>
-                  <TableCell colSpan={5}>{t('loading')}</TableCell>
+                  <TableHead>Slug</TableHead>
+                  <TableHead>{t('columnProvider')}</TableHead>
+                  <TableHead>{t('columnModel')}</TableHead>
+                  <TableHead>{t('columnExternalId')}</TableHead>
+                  <TableHead className="text-right">
+                    {t('columnActions')}
+                  </TableHead>
                 </TableRow>
-              ) : agentList.data.length === 0 ? (
-                <TableRow>
-                  <TableCell colSpan={5}>{t('empty')}</TableCell>
-                </TableRow>
-              ) : (
-                agentList.data.map((agent) => (
-                  <TableRow key={agent.id}>
-                    <TableCell>{agent.slug}</TableCell>
-                    <TableCell className="uppercase">
-                      {agent.provider}
-                    </TableCell>
-                    <TableCell>{agent.model || '-'}</TableCell>
-                    <TableCell>{agent.external_agent_id || '-'}</TableCell>
-                    <TableCell className="text-right">
-                      <div className="flex items-center justify-end gap-2">
-                        <Button
-                          variant="outline"
-                          size="icon"
-                          onClick={() => handleOpenEdit(agent)}
-                        >
-                          <Pencil className="h-4 w-4" />
-                        </Button>
-                        <Button
-                          variant="destructive"
-                          size="icon"
-                          onClick={() => setAgentToDelete(agent)}
-                        >
-                          <Trash2 className="h-4 w-4" />
-                        </Button>
-                      </div>
-                    </TableCell>
+              </TableHeader>
+              <TableBody>
+                {isLoading ? (
+                  <TableRow>
+                    <TableCell colSpan={5}>{t('loading')}</TableCell>
                   </TableRow>
-                ))
-              )}
-            </TableBody>
-          </Table>
-        </CardContent>
-      </Card>
+                ) : (
+                  agentList.data.map((agent) => (
+                    <TableRow key={agent.id}>
+                      <TableCell>{agent.slug}</TableCell>
+                      <TableCell className="uppercase">
+                        {agent.provider}
+                      </TableCell>
+                      <TableCell>{agent.model || '-'}</TableCell>
+                      <TableCell>{agent.external_agent_id || '-'}</TableCell>
+                      <TableCell className="text-right">
+                        <div className="flex items-center justify-end gap-2">
+                          <Button
+                            variant="outline"
+                            size="icon"
+                            onClick={() => handleOpenEdit(agent)}
+                          >
+                            <Pencil className="h-4 w-4" />
+                          </Button>
+                          <Button
+                            variant="destructive"
+                            size="icon"
+                            onClick={() => setAgentToDelete(agent)}
+                          >
+                            <Trash2 className="h-4 w-4" />
+                          </Button>
+                        </div>
+                      </TableCell>
+                    </TableRow>
+                  ))
+                )}
+              </TableBody>
+            </Table>
+          </CardContent>
+        </Card>
+      ) : (
+        <EmptyState
+          icon={<Bot className="h-12 w-12" />}
+          title={t('empty')}
+          description={t('description')}
+          actionLabel={t('newAgent')}
+          onAction={handleOpenCreate}
+        />
+      )}
 
       <PaginationFooter
         currentPage={page}
         pageSize={pageSize}
-        totalItems={agentList.total}
-        onPageChange={setPage}
+        totalItems={agentList.total}
+        onPageChange={setPage}
         onPageSizeChange={(value) => {
           setPageSize(value);
           setPage(1);

package/hedhog/frontend/app/configurations/[slug]/components/setting-field.tsx.ejs

@@ -50,98 +50,7 @@ export const SettingField = ({ setting, className }: SettingFieldProps) => {
 
       const newSettings = response.data?.setting || {};
       localStorage.setItem('settings', JSON.stringify(newSettings));
-
-      const root = document.documentElement;
-      const themeMode = newSettings['theme-mode'] || 'system';
-      let currentTheme: 'light' | 'dark' = 'light';
-
-      if (themeMode === 'system') {
-        const prefersDark = window.matchMedia(
-          '(prefers-color-scheme: dark)'
-        ).matches;
-        currentTheme = prefersDark ? 'dark' : 'light';
-      } else {
-        currentTheme = themeMode as 'light' | 'dark';
-      }
-
-      root.classList.remove('light', 'dark');
-      root.classList.add(currentTheme);
-
-      const existingStyle = document.getElementById('theme-custom-styles');
-      if (existingStyle) {
-        existingStyle.remove();
-      }
-
-      const styleTag = document.createElement('style');
-      styleTag.id = 'theme-custom-styles';
-      let cssRules = '';
-
-      const addRule = (varName: string, settingKey: string) => {
-        const hexColor = newSettings[settingKey];
-        if (
-          hexColor &&
-          typeof hexColor === 'string' &&
-          hexColor.startsWith('#')
-        ) {
-          cssRules += `    ${varName}: ${hexColor} !important;\n`;
-        }
-      };
-
-      if (currentTheme === 'light') {
-        cssRules += '@supports (color: lab(0% 0 0)) {\n';
-        cssRules += '  html.light, .light, :root.light {\n';
-        addRule('--primary', 'theme-primary-light');
-        addRule('--bprogress-color', 'theme-primary-light');
-        addRule('--primary-foreground', 'theme-primary-foreground-light');
-        addRule('--secondary', 'theme-secondary-light');
-        addRule('--secondary-foreground', 'theme-secondary-foreground-light');
-        addRule('--accent', 'theme-accent-light');
-        addRule('--accent-foreground', 'theme-accent-foreground-light');
-        addRule('--muted', 'theme-muted-light');
-        addRule('--muted-foreground', 'theme-muted-foreground-light');
-        addRule('--background', 'theme-background-light');
-        addRule('--foreground', 'theme-background-foreground-light');
-        addRule('--card', 'theme-card-light');
-        addRule('--card-foreground', 'theme-card-foreground-light');
-      } else {
-        cssRules += '@supports (color: lab(0% 0 0)) {\n';
-        cssRules += '  html.dark, .dark, :root.dark {\n';
-        addRule('--primary', 'theme-primary-dark');
-        addRule('--bprogress-color', 'theme-primary-dark');
-        addRule('--primary-foreground', 'theme-primary-foreground-dark');
-        addRule('--secondary', 'theme-secondary-dark');
-        addRule('--secondary-foreground', 'theme-secondary-foreground-dark');
-        addRule('--accent', 'theme-accent-dark');
-        addRule('--accent-foreground', 'theme-accent-foreground-dark');
-        addRule('--muted', 'theme-muted-dark');
-        addRule('--muted-foreground', 'theme-muted-foreground-dark');
-        addRule('--background', 'theme-background-dark');
-        addRule('--foreground', 'theme-background-foreground-dark');
-        addRule('--card', 'theme-card-dark');
-        addRule('--card-foreground', 'theme-card-foreground-dark');
-      }
-
-      if (newSettings['theme-radius']) {
-        cssRules += `    --radius: ${newSettings['theme-radius']}rem !important;\n`;
-      }
-      if (newSettings['theme-text-size']) {
-        cssRules += `    font-size: ${newSettings['theme-text-size']}rem !important;\n`;
-      }
-
-      cssRules += '  }\n';
-      cssRules += '}\n';
-
-      if (newSettings['theme-font']) {
-        cssRules += `:root {\n`;
-        cssRules += `  --font-sans: ${newSettings['theme-font']} !important;\n`;
-        cssRules += `}\n`;
-        cssRules += `html {\n`;
-        cssRules += `  font-family: ${newSettings['theme-font']} !important;\n`;
-        cssRules += `}\n`;
-      }
-
-      styleTag.textContent = cssRules;
-      document.head.appendChild(styleTag);
+      window.dispatchEvent(new CustomEvent('hedhog:settings-change'));
     } catch (error) {
       console.error('Error applying theme settings:', error);
     }

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

@@ -12,10 +12,10 @@ export default function DashboardRedirectPage() {
   const { data: dashboardData, isLoading } = useQuery<Dashboard | null>({
     queryKey: ['dashboard-home-redirect', currentLocaleCode],
     queryFn: async () => {
-      const response = await request<Dashboard | null>({
+      const response = await request<Dashboard>({
         url: '/dashboard-core/home',
       });
-      return response.data;
+      return response.data ?? null;
     },
   });
 

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

@@ -1,6 +1,12 @@
 'use client';
 
-import { PageHeader, PaginationFooter } from '@/components/entity-list';
+import {
+  EmptyState,
+  Page,
+  PageHeader,
+  PaginationFooter,
+  SearchBar,
+} from '@/components/entity-list';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
@@ -11,14 +17,13 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@/components/ui/dialog';
-import { Input } from '@/components/ui/input';
 import { ScrollArea } from '@/components/ui/scroll-area';
 import { useDebounce } from '@/hooks/use-debounce';
 import { formatDate } from '@/lib/format-date';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
-import { Clock, Mail, Search, User } from 'lucide-react';
+import { Clock, Mail, User } from 'lucide-react';
 import { useTranslations } from 'next-intl';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 
 type PaginationResult<T> = {
   data: T[];
@@ -42,7 +47,6 @@ type MailSent = {
 
 export default function MailLogPage() {
   const t = useTranslations('core.MailLog');
-  const [logs, setLogs] = useState<MailSent[]>([]);
   const [selectedLog, setSelectedLog] = useState<MailSent | null>(null);
   const [isDetailDialogOpen, setIsDetailDialogOpen] = useState(false);
   const [searchTerm, setSearchTerm] = useState('');
@@ -51,9 +55,9 @@ export default function MailLogPage() {
   const [pageSize, setPageSize] = useState(10);
   const { request, getSettingValue } = useApp();
 
-  const { data: logsResult, refetch: refetchLogs } = useQuery<
-    PaginationResult<MailSent>
-  >({
+  const { data: logsResult, refetch: refetchLogs } = useQuery<
+    PaginationResult<MailSent>
+  >({
     queryKey: ['mail-sent', debouncedSearch, page, pageSize],
     queryFn: async () => {
       const response = await request({
@@ -66,14 +70,8 @@ export default function MailLogPage() {
       });
       return response.data as PaginationResult<MailSent>;
     },
-  });
-  const { data = [], total = 0 } = logsResult ?? {};
-
-  useEffect(() => {
-    if (data) {
-      setLogs(data);
-    }
-  }, [data]);
+  });
+  const { data: logs = [], total = 0 } = logsResult ?? {};
 
   const handleViewDetails = (log: MailSent): void => {
     setSelectedLog(log);
@@ -92,12 +90,8 @@ export default function MailLogPage() {
       : text;
   };
 
-  useEffect(() => {
-    refetchLogs();
-  }, [debouncedSearch, page, pageSize]);
-
   return (
-    <div className="flex flex-col h-screen px-4">
+    <Page>
       <PageHeader
         breadcrumbs={[
           { label: t('breadcrumbHome'), href: '/' },
@@ -141,29 +135,30 @@ export default function MailLogPage() {
         </Card>
       </div>
 
-      <div className="relative my-4">
-        <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
-        <Input
-          placeholder={t('searchPlaceholder')}
-          value={searchTerm}
-          onChange={(e) => handleSearchChange(e.target.value)}
-          className="pl-10"
-        />
-      </div>
+      <SearchBar
+        searchQuery={searchTerm}
+        onSearchChange={handleSearchChange}
+        onSearch={() => setPage(1)}
+        placeholder={t('searchPlaceholder')}
+      />
 
       <div className="space-y-3 mb-4">
         {logs.length === 0 ? (
-          <Card>
-            <CardContent className="flex flex-col items-center justify-center p-12">
-              <Mail className="mb-4 h-12 w-12 text-muted-foreground" />
-              <p className="text-lg font-medium text-muted-foreground">
-                {t('noLogsFound')}
-              </p>
-              <p className="text-sm text-muted-foreground">
-                {searchTerm ? t('adjustSearch') : t('noEmailsSent')}
-              </p>
-            </CardContent>
-          </Card>
+          <EmptyState
+            icon={<Mail className="h-12 w-12" />}
+            title={t('noLogsFound')}
+            description={searchTerm ? t('adjustSearch') : t('noEmailsSent')}
+            actionLabel={searchTerm ? t('clearSearch') : t('refreshList')}
+            onAction={() => {
+              if (searchTerm) {
+                setSearchTerm('');
+                setPage(1);
+                return;
+              }
+
+              refetchLogs();
+            }}
+          />
         ) : (
           logs.map((log) => (
             <Card
@@ -301,6 +296,6 @@ export default function MailLogPage() {
           </DialogContent>
         </Dialog>
       )}
-    </div>
+    </Page>
   );
 }