@hed-hog/core 0.0.278 → 0.0.285

package/hedhog/frontend/app/dashboard/components/widgets/stat-online-time.tsx.ejs

@@ -34,24 +34,24 @@ export default function StatOnlineTime({
       widgetName={widget?.name ?? 'stat-online-time'}
       onRemove={onRemove}
     >
-      <Card className="h-full overflow-hidden transition-all duration-300 hover:shadow-md">
-        <CardContent className="flex h-full items-center gap-3 p-3 md:gap-4 md:p-4">
-          <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-blue-50 dark:bg-blue-950/40 md:h-11 md:w-11">
-            <Clock className="h-4 w-4 text-blue-600 dark:text-blue-400 md:h-5 md:w-5" />
-          </div>
-          <div className="flex min-w-0 flex-col">
-            <span className="text-[11px] font-medium uppercase tracking-wider text-muted-foreground">
-              {t('onlineTime')}
-            </span>
-            <span className="truncate text-xl font-bold tracking-tight text-foreground md:text-2xl">
-              {data ?? '—'}
-            </span>
-            <span className="hidden text-[11px] text-muted-foreground sm:block">
-              {t('onlineTimeSubtitle')}
-            </span>
-          </div>
-        </CardContent>
-      </Card>
+      <Card className="h-full overflow-hidden transition-all duration-300 hover:shadow-md">
+        <CardContent className="flex h-full items-center gap-2.5 p-2.5 sm:gap-3 sm:p-3 md:gap-4 md:p-4">
+          <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-xl bg-blue-50 dark:bg-blue-950/40 sm:h-9 sm:w-9 md:h-11 md:w-11">
+            <Clock className="h-3.5 w-3.5 text-blue-600 dark:text-blue-400 sm:h-4 sm:w-4 md:h-5 md:w-5" />
+          </div>
+          <div className="flex min-w-0 flex-col">
+            <span className="text-[10px] font-medium uppercase tracking-wider text-muted-foreground sm:text-[11px]">
+              {t('onlineTime')}
+            </span>
+            <span className="truncate text-lg font-bold tracking-tight text-foreground sm:text-xl md:text-2xl">
+              {data ?? '—'}
+            </span>
+            <span className="truncate text-[10px] text-muted-foreground sm:text-[11px]">
+              {t('onlineTimeSubtitle')}
+            </span>
+          </div>
+        </CardContent>
+      </Card>
     </WidgetWrapper>
   );
 }

package/hedhog/frontend/app/dashboard/components/widgets/user-roles.tsx.ejs

@@ -52,37 +52,41 @@ function RolesContent({ roles }: { roles: RoleData[] }) {
   const t = useTranslations('core.DashboardPage.userRoles');
 
   return (
-    <Card className="flex h-full min-h-0 flex-col overflow-hidden">
+    <Card className="flex h-full min-h-0 flex-col overflow-hidden">
       <CardHeader className="shrink-0 pb-3">
         <div className="flex items-center gap-2">
-          <Crown className="h-5 w-5 text-amber-600 dark:text-amber-400" />
+          <Crown className="h-4 w-4 text-amber-600 dark:text-amber-400 sm:h-5 sm:w-5" />
           <div>
-            <CardTitle className="text-base font-semibold">
+            <CardTitle className="text-sm font-semibold sm:text-base">
               {t('title')}
             </CardTitle>
-            <CardDescription>{t('description')}</CardDescription>
+            <CardDescription className="text-xs sm:text-sm">
+              {t('description')}
+            </CardDescription>
           </div>
         </div>
       </CardHeader>
-      <CardContent className="flex min-h-0 flex-1 overflow-auto pt-0">
-        <div className="grid grid-cols-1 gap-2 md:grid-cols-2">
+      <CardContent className="flex min-h-0 flex-1 overflow-auto pt-0">
+        <div className="grid grid-cols-1 gap-2 md:grid-cols-2">
           {roles.map((role, index) => {
             const style = levelStyles[index % levelStyles.length]!;
             return (
               <div
                 key={role.id}
-                className={`flex items-center gap-3 rounded-xl border p-3 transition-all duration-200 hover:shadow-sm ${style.border} ${style.bg}`}
+                className={`flex items-center gap-2.5 rounded-xl border p-2.5 transition-all duration-200 hover:shadow-sm sm:gap-3 sm:p-3 ${style.border} ${style.bg}`}
               >
                 <div
-                  className={`flex h-9 w-9 shrink-0 items-center justify-center rounded-lg ${style.iconBg}`}
+                  className={`flex h-8 w-8 shrink-0 items-center justify-center rounded-lg sm:h-9 sm:w-9 ${style.iconBg}`}
                 >
-                  <ShieldCheck className={`h-4 w-4 ${style.iconColor}`} />
+                  <ShieldCheck
+                    className={`h-3.5 w-3.5 sm:h-4 sm:w-4 ${style.iconColor}`}
+                  />
                 </div>
                 <div className="flex min-w-0 flex-1 flex-col gap-0.5">
-                  <span className="text-sm font-medium text-foreground">
+                  <span className="truncate text-[13px] font-medium text-foreground sm:text-sm">
                     {role.name}
                   </span>
-                  <span className="text-xs text-muted-foreground">
+                  <span className="truncate text-[11px] text-muted-foreground sm:text-xs">
                     {role.slug}
                   </span>
                 </div>

package/hedhog/frontend/app/dashboard/components/widgets/user-sessions.tsx.ejs

@@ -86,31 +86,33 @@ function SessionsContent({ sessions }: { sessions: SessionData[] }) {
   const router = useRouter();
 
   return (
-    <Card className="flex h-full min-h-0 flex-col overflow-hidden">
-      <CardHeader className="shrink-0 pb-3">
-        <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
-          <div className="flex min-w-0 items-center gap-2">
-            <Globe className="h-5 w-5 text-blue-600" />
-            <div className="min-w-0">
-              <CardTitle className="text-base font-semibold">
-                {t('title')}
-              </CardTitle>
-              <CardDescription>{t('description')}</CardDescription>
-            </div>
-          </div>
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={() => router.push('/core/account/sessions')}
-            className="w-full shrink-0 sm:w-auto"
-          >
-            <Info className="h-3.5 w-3.5" />
-            {t('moreInfo')}
-          </Button>
-        </div>
-      </CardHeader>
-      <CardContent className="flex min-h-0 flex-1 overflow-auto pt-0">
-        <div className="flex flex-col gap-2">
+    <Card className="flex h-full min-h-0 flex-col overflow-hidden">
+      <CardHeader className="shrink-0 pb-3">
+        <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+          <div className="flex min-w-0 items-center gap-2">
+            <Globe className="h-4 w-4 text-blue-600 sm:h-5 sm:w-5" />
+            <div className="min-w-0">
+              <CardTitle className="text-sm font-semibold sm:text-base">
+                {t('title')}
+              </CardTitle>
+              <CardDescription className="text-xs sm:text-sm">
+                {t('description')}
+              </CardDescription>
+            </div>
+          </div>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => router.push('/core/account/sessions')}
+            className="h-8 w-full shrink-0 gap-1.5 px-2.5 text-xs sm:h-9 sm:w-auto sm:text-sm"
+          >
+            <Info className="h-3.5 w-3.5" />
+            {t('moreInfo')}
+          </Button>
+        </div>
+      </CardHeader>
+      <CardContent className="flex min-h-0 flex-1 overflow-auto pt-0">
+        <div className="flex flex-col gap-2">
           {sessions.map((session, index) => {
             const ua = session.user_agent ?? '';
             const deviceType = detectDeviceType(ua);
@@ -135,42 +137,42 @@ function SessionsContent({ sessions }: { sessions: SessionData[] }) {
             return (
               <div
                 key={session.id}
-                className={`group flex items-center gap-3 rounded-xl border p-3.5 transition-all duration-200 hover:shadow-sm ${
+                className={`group flex items-center gap-2.5 rounded-xl border p-3 transition-all duration-200 hover:shadow-sm sm:gap-3 sm:p-3.5 ${
                   isCurrent
                     ? 'border-emerald-200 bg-emerald-50/50 dark:border-emerald-800 dark:bg-emerald-950/30'
                     : 'bg-card hover:bg-muted/30'
                 }`}
               >
                 <div
-                  className={`flex h-10 w-10 shrink-0 items-center justify-center rounded-lg ${
+                  className={`flex h-8 w-8 shrink-0 items-center justify-center rounded-lg sm:h-10 sm:w-10 ${
                     isCurrent
                       ? 'bg-emerald-100 dark:bg-emerald-900/50'
                       : 'bg-muted'
                   }`}
                 >
                   <DeviceIcon
-                    className={`h-5 w-5 ${
+                    className={`h-4 w-4 sm:h-5 sm:w-5 ${
                       isCurrent
                         ? 'text-emerald-600 dark:text-emerald-400'
                         : 'text-muted-foreground'
                     }`}
                   />
                 </div>
-                <div className="flex min-w-0 flex-1 flex-col gap-0.5">
-                  <div className="flex flex-wrap items-center gap-2">
-                    <span className="min-w-0 break-words text-sm font-medium text-foreground">
-                      {device}
-                    </span>
+                <div className="flex min-w-0 flex-1 flex-col gap-0.5">
+                  <div className="flex flex-wrap items-center gap-2">
+                    <span className="min-w-0 wrap-break-word text-[13px] font-medium text-foreground sm:text-sm">
+                      {device}
+                    </span>
                     {isCurrent && (
                       <Badge className="bg-emerald-100 text-[10px] text-emerald-700 hover:bg-emerald-100 dark:bg-emerald-900/50 dark:text-emerald-400 dark:hover:bg-emerald-900/50">
                         {t('thisSession')}
                       </Badge>
                     )}
                   </div>
-                  <span className="break-words text-xs text-muted-foreground">
-                    {browser} &middot; {ip}
-                  </span>
-                  <div className="flex flex-wrap items-center gap-3 text-[11px] text-muted-foreground/70">
+                  <span className="wrap-break-word text-[11px] text-muted-foreground sm:text-xs">
+                    {browser} &middot; {ip}
+                  </span>
+                  <div className="flex flex-wrap items-center gap-2 text-[10px] text-muted-foreground/70 sm:gap-3 sm:text-[11px]">
                     <span className="flex items-center gap-1">
                       <Clock className="h-3 w-3" />
                       {relativeTime}

package/hedhog/frontend/app/dashboard/dashboard.css.ejs

@@ -34,8 +34,12 @@
   opacity: 0.45;
 }
 
-.dashboard-grid .react-grid-item:hover > .react-resizable-handle.react-resizable-handle-se,
-.dashboard-grid .react-grid-item.resizing > .react-resizable-handle.react-resizable-handle-se {
+.dashboard-grid
+  .react-grid-item:hover
+  > .react-resizable-handle.react-resizable-handle-se,
+.dashboard-grid
+  .react-grid-item.resizing
+  > .react-resizable-handle.react-resizable-handle-se {
   opacity: 1;
 }
 
@@ -43,11 +47,15 @@
   display: none;
 }
 
-.dashboard-grid .react-grid-item > .react-resizable-handle:not(.react-resizable-handle-se) {
+.dashboard-grid
+  .react-grid-item
+  > .react-resizable-handle:not(.react-resizable-handle-se) {
   display: none;
 }
 
-.dashboard-grid .react-grid-item > .react-resizable-handle.react-resizable-handle-se {
+.dashboard-grid
+  .react-grid-item
+  > .react-resizable-handle.react-resizable-handle-se {
   bottom: 0;
   right: 0;
   cursor: se-resize;
@@ -102,3 +110,11 @@
 .dashboard-widget > [data-slot='card'] > [data-slot='card-header'] {
   padding-top: 0;
 }
+
+@media (max-width: 639px) {
+  .dashboard-widget > [data-slot='card'] {
+    gap: 0.625rem;
+    padding-top: 0.625rem;
+    padding-bottom: 0.625rem;
+  }
+}

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,10 +55,9 @@ export default function MailLogPage() {
   const [pageSize, setPageSize] = useState(10);
   const { request, getSettingValue } = useApp();
 
-  const {
-    data: { data, total },
-    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({
@@ -67,19 +70,8 @@ export default function MailLogPage() {
       });
       return response.data as PaginationResult<MailSent>;
     },
-    initialData: {
-      data: [],
-      total: 0,
-      page: 1,
-      pageSize: 10,
-    },
   });
-
-  useEffect(() => {
-    if (data) {
-      setLogs(data);
-    }
-  }, [data]);
+  const { data: logs = [], total = 0 } = logsResult ?? {};
 
   const handleViewDetails = (log: MailSent): void => {
     setSelectedLog(log);
@@ -98,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: '/' },
@@ -147,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
@@ -307,6 +296,6 @@ export default function MailLogPage() {
           </DialogContent>
         </Dialog>
       )}
-    </div>
+    </Page>
   );
 }