@hed-hog/core 0.0.297 → 0.0.299

package/hedhog/frontend/widgets/user-growth-chart.tsx.ejs

@@ -0,0 +1,210 @@
+'use client';
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { useWidgetData } from '@/hooks/use-widget-data';
+import { IconGripVertical } from '@tabler/icons-react';
+import { useTranslations } from 'next-intl';
+import {
+  Area,
+  AreaChart,
+  CartesianGrid,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from 'recharts';
+import { WidgetWrapper } from '../widget-wrapper';
+
+function CustomTooltip({
+  active,
+  payload,
+  label,
+}: {
+  active?: boolean;
+  payload?: Array<{ value: number; dataKey: string }>;
+  label?: string;
+}) {
+  const t = useTranslations('core.Dashboard');
+  if (!active || !payload?.length) return null;
+
+  return (
+    <div className="rounded-lg border bg-card px-3 py-2 shadow-xl">
+      <p className="mb-1 text-xs font-medium text-card-foreground">{label}</p>
+      {payload.map((entry) => (
+        <p key={entry.dataKey} className="text-xs text-muted-foreground">
+          <span
+            className="mr-1.5 inline-block h-2 w-2 rounded-full"
+            style={{
+              backgroundColor:
+                entry.dataKey === 'users' ? '#6366f1' : '#10b981',
+            }}
+          />
+          {entry.dataKey === 'users' ? t('users') : t('sessions')}:{' '}
+          {entry.value.toLocaleString('pt-BR')}
+        </p>
+      ))}
+    </div>
+  );
+}
+
+interface UserGrowthChartProps {
+  widget?: any;
+  onRemove?: () => void;
+}
+
+interface UserStatsData {
+  charts?: {
+    userGrowth?: Array<{
+      month: string;
+      users: number;
+      sessions: number;
+    }>;
+  };
+}
+
+export default function UserGrowthChart({
+  widget,
+  onRemove,
+}: UserGrowthChartProps) {
+  const t = useTranslations('core.Dashboard');
+
+  const {
+    data: statsData,
+    isLoading,
+    isAccessDenied,
+    isError,
+  } = useWidgetData<UserStatsData>({
+    endpoint: '/dashboard-core/stats/overview/users',
+    queryKey: 'dashboard-stats-users',
+  });
+
+  const data = statsData?.charts?.userGrowth || [];
+
+  return (
+    <WidgetWrapper
+      isLoading={isLoading}
+      isAccessDenied={isAccessDenied}
+      isError={isError}
+      widgetName={widget?.name || t('userGrowthTitle')}
+      onRemove={onRemove}
+    >
+      <Card className="h-full flex flex-col group">
+        <div
+          className="drag-handle absolute top-3 left-4 z-10"
+          style={{ cursor: 'grab' }}
+        >
+          <IconGripVertical className="text-muted-foreground/50 size-4 shrink-0" />
+        </div>
+        <CardHeader className="flex flex-row items-center justify-between pb-2 pt-4">
+          <div className="pl-6">
+            <CardTitle className="text-base font-semibold">
+              {t('userGrowthTitle')}
+            </CardTitle>
+            <CardDescription>{t('userGrowthDescription')}</CardDescription>
+          </div>
+        </CardHeader>
+        <CardContent className="flex-1 pt-0">
+          <div className="h-[280px] w-full">
+            <ResponsiveContainer width="100%" height="100%">
+              <AreaChart
+                data={data}
+                margin={{ top: 5, right: 10, left: -20, bottom: 0 }}
+              >
+                <defs>
+                  <linearGradient
+                    id="gradientUsuarios"
+                    x1="0"
+                    y1="0"
+                    x2="0"
+                    y2="1"
+                  >
+                    <stop offset="0%" stopColor="#6366f1" stopOpacity={0.5} />
+                    <stop
+                      offset="100%"
+                      stopColor="#6366f1"
+                      stopOpacity={0.05}
+                    />
+                  </linearGradient>
+                  <linearGradient
+                    id="gradientSessoes"
+                    x1="0"
+                    y1="0"
+                    x2="0"
+                    y2="1"
+                  >
+                    <stop offset="0%" stopColor="#10b981" stopOpacity={0.4} />
+                    <stop
+                      offset="100%"
+                      stopColor="#10b981"
+                      stopOpacity={0.05}
+                    />
+                  </linearGradient>
+                </defs>
+                <CartesianGrid
+                  strokeDasharray="3 3"
+                  stroke="currentColor"
+                  opacity={0.1}
+                />
+                <XAxis
+                  dataKey="month"
+                  tick={{ fill: 'hsl(var(--muted-foreground))', fontSize: 12 }}
+                  axisLine={false}
+                  tickLine={false}
+                />
+                <YAxis
+                  tick={{ fill: 'hsl(var(--muted-foreground))', fontSize: 12 }}
+                  axisLine={false}
+                  tickLine={false}
+                />
+                <Tooltip content={<CustomTooltip />} />
+                <Area
+                  type="monotone"
+                  dataKey="sessions"
+                  stroke="#10b981"
+                  strokeWidth={2.5}
+                  fill="url(#gradientSessoes)"
+                  animationDuration={1500}
+                />
+                <Area
+                  type="monotone"
+                  dataKey="users"
+                  stroke="#6366f1"
+                  strokeWidth={2.5}
+                  fill="url(#gradientUsuarios)"
+                  animationDuration={1500}
+                  animationBegin={200}
+                />
+              </AreaChart>
+            </ResponsiveContainer>
+          </div>
+          <div className="mt-3 flex items-center justify-center gap-6">
+            <div className="flex items-center gap-2">
+              <div
+                className="h-2.5 w-2.5 rounded-full"
+                style={{ backgroundColor: '#6366f1' }}
+              />
+              <span className="text-xs text-muted-foreground">
+                {t('users')}
+              </span>
+            </div>
+            <div className="flex items-center gap-2">
+              <div
+                className="h-2.5 w-2.5 rounded-full"
+                style={{ backgroundColor: '#10b981' }}
+              />
+              <span className="text-xs text-muted-foreground">
+                {t('sessions')}
+              </span>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </WidgetWrapper>
+  );
+}

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

@@ -53,46 +53,44 @@ function RolesContent({ roles }: { roles: RoleData[] }) {
 
   return (
     <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-4 w-4 text-amber-600 dark:text-amber-400 sm:h-5 sm:w-5" />
+      <CardHeader className="shrink-0 space-y-1 pb-2">
+        <div className="flex items-center gap-1.5">
+          <Crown className="h-4 w-4 text-amber-600 dark:text-amber-400" />
           <div>
-            <CardTitle className="text-sm font-semibold sm:text-base">
+            <CardTitle className="text-sm font-semibold">
               {t('title')}
             </CardTitle>
-            <CardDescription className="text-xs sm:text-sm">
+            <CardDescription className="text-xs leading-tight">
               {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">
+        <div className="grid content-start items-start grid-cols-1 gap-1.5 md:grid-cols-2">
           {roles.map((role, index) => {
             const style = levelStyles[index % levelStyles.length]!;
             return (
               <div
                 key={role.id}
-                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}`}
+                className={`flex h-fit self-start items-center gap-2 rounded-lg border p-2 transition-all duration-200 hover:shadow-sm ${style.border} ${style.bg}`}
               >
                 <div
-                  className={`flex h-8 w-8 shrink-0 items-center justify-center rounded-lg sm:h-9 sm:w-9 ${style.iconBg}`}
+                  className={`flex h-7 w-7 shrink-0 items-center justify-center rounded-md ${style.iconBg}`}
                 >
-                  <ShieldCheck
-                    className={`h-3.5 w-3.5 sm:h-4 sm:w-4 ${style.iconColor}`}
-                  />
+                  <ShieldCheck className={`h-3.5 w-3.5 ${style.iconColor}`} />
                 </div>
                 <div className="flex min-w-0 flex-1 flex-col gap-0.5">
-                  <span className="truncate text-[13px] font-medium text-foreground sm:text-sm">
+                  <span className="truncate text-xs font-medium text-foreground sm:text-[13px]">
                     {role.name}
                   </span>
-                  <span className="truncate text-[11px] text-muted-foreground sm:text-xs">
+                  <span className="truncate text-[10px] text-muted-foreground sm:text-[11px]">
                     {role.slug}
                   </span>
                 </div>
                 <Badge
                   variant="secondary"
-                  className={`shrink-0 text-[10px] ${style.badge}`}
+                  className={`shrink-0 px-1.5 py-0 text-[10px] ${style.badge}`}
                 >
                   {t('active')}
                 </Badge>

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

@@ -112,7 +112,7 @@ function SessionsContent({ sessions }: { sessions: SessionData[] }) {
         </div>
       </CardHeader>
       <CardContent className="flex min-h-0 flex-1 overflow-auto pt-0">
-        <div className="flex flex-col gap-2">
+        <div className="grid w-full items-start grid-cols-[repeat(auto-fill,minmax(260px,1fr))] gap-2 sm:gap-3">
           {sessions.map((session, index) => {
             const ua = session.user_agent ?? '';
             const deviceType = detectDeviceType(ua);

package/hedhog/table/dashboard_component.yaml

@@ -4,6 +4,13 @@ columns:
     locale:
       en: Slug
       pt: Slug
+  - name: library_slug
+    type: varchar
+    length: 120
+    default: core
+    locale:
+      en: Library Slug
+      pt: Slug da Library
   - name: min_width
     type: int
     default: 1

package/hedhog/table/mail_sent_user.yaml

@@ -0,0 +1,75 @@
+columns:
+  - type: pk
+  - name: mail_sent_id
+    type: fk
+    isNullable: true
+    references:
+      table: mail_sent
+      column: id
+      onDelete: SET NULL
+      onUpdate: CASCADE
+  - name: mail_id
+    type: fk
+    references:
+      table: mail
+      column: id
+      onDelete: CASCADE
+      onUpdate: CASCADE
+  - name: user_id
+    type: fk
+    references:
+      table: user
+      column: id
+      onDelete: CASCADE
+      onUpdate: CASCADE
+  - name: user_identifier_id
+    type: fk
+    isNullable: true
+    references:
+      table: user_identifier
+      column: id
+      onDelete: SET NULL
+      onUpdate: CASCADE
+  - name: recipient_email
+    type: varchar
+    length: 255
+  - name: status
+    type: enum
+    values:
+      - received
+      - read
+      - error
+    default: received
+  - name: read_at
+    type: datetime
+    isNullable: true
+  - name: error_code
+    type: varchar
+    length: 128
+    isNullable: true
+  - name: error_message
+    type: text
+    isNullable: true
+  - type: created_at
+  - type: updated_at
+indices:
+  - columns:
+      - mail_sent_id
+      - user_id
+    isUnique: true
+  - columns:
+      - user_id
+      - created_at
+  - columns:
+      - user_id
+      - status
+      - created_at
+  - columns:
+      - user_id
+      - read_at
+  - columns:
+      - mail_id
+  - columns:
+      - user_identifier_id
+  - columns:
+      - status

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hed-hog/core",
-  "version": "0.0.297",
+  "version": "0.0.299",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "dependencies": {
@@ -30,12 +30,12 @@
     "sharp": "^0.34.2",
     "speakeasy": "^2.0.0",
     "uuid": "^11.1.0",
-    "@hed-hog/api-locale": "0.0.14",
     "@hed-hog/api": "0.0.6",
+    "@hed-hog/api-types": "0.0.1",
     "@hed-hog/api-pagination": "0.0.7",
+    "@hed-hog/api-locale": "0.0.14",
     "@hed-hog/api-mail": "0.0.9",
-    "@hed-hog/api-prisma": "0.0.6",
-    "@hed-hog/api-types": "0.0.1"
+    "@hed-hog/api-prisma": "0.0.6"
   },
   "exports": {
     ".": {

package/src/dashboard/dashboard-component/dashboard-component.controller.ts

@@ -2,21 +2,25 @@ import { Role, User } from '@hed-hog/api';
 import { Locale } from '@hed-hog/api-locale';
 import { Pagination } from '@hed-hog/api-pagination';
 import {
-  Body,
-  Controller,
-  Delete,
-  Get,
-  Inject,
-  Param,
-  ParseIntPipe,
-  Patch,
-  Post,
-  forwardRef
+    BadRequestException,
+    Body,
+    Controller,
+    Delete,
+    Get,
+    Inject,
+    Param,
+    ParseIntPipe,
+    Patch,
+    Post,
+    UploadedFile,
+    UseInterceptors,
+    forwardRef
 } from '@nestjs/common';
+import { FileInterceptor } from '@nestjs/platform-express';
 import { DashboardComponentService } from './dashboard-component.service';
 import {
-  CreateDashboardComponentDTO,
-  UpdateDashboardComponentDTO,
+    CreateDashboardComponentDTO,
+    UpdateDashboardComponentDTO,
 } from './dto';
 
 @Role()
@@ -64,4 +68,24 @@ export class DashboardComponentController {
   deleteComponent(@Param('id', ParseIntPipe) id: number, @Locale() locale: string) {
     return this.dashboardComponentService.deleteComponent(id, locale);
   }
+
+  @Post(':id/preview')
+  @UseInterceptors(
+    FileInterceptor('file', {
+      fileFilter: (req, file, cb) => {
+        if (!file?.mimetype?.startsWith('image/')) {
+          return cb(new BadRequestException('Invalid image file'), false);
+        }
+
+        cb(null, true);
+      },
+    }),
+  )
+  savePreview(
+    @Param('id', ParseIntPipe) id: number,
+    @UploadedFile() file: MulterFile,
+    @Locale() locale: string,
+  ) {
+    return this.dashboardComponentService.savePreview(id, file, locale);
+  }
 }

package/src/dashboard/dashboard-component/dashboard-component.service.ts

@@ -2,11 +2,15 @@ import { getLocaleText } from '@hed-hog/api-locale';
 import { PaginationDTO, PaginationService } from '@hed-hog/api-pagination';
 import { PrismaService } from '@hed-hog/api-prisma';
 import {
+  BadRequestException,
+  ForbiddenException,
   forwardRef,
   Inject,
   Injectable,
   NotFoundException
 } from '@nestjs/common';
+import { existsSync, promises as fs } from 'fs';
+import { join, resolve } from 'path';
 import {
   CreateDashboardComponentDTO,
   UpdateDashboardComponentDTO,
@@ -21,7 +25,7 @@ export class DashboardComponentService {
   ) {}
 
   async getAllComponents(paginationParams: PaginationDTO) {
-    const fields = ['slug']
+    const fields = ['slug', 'library_slug']
     const OR = this.prismaService.createInsensitiveSearch(
       fields,
       paginationParams,
@@ -83,6 +87,42 @@ export class DashboardComponentService {
 
     const userRoleIds = userRoles.map((ur) => ur.role_id);
 
+    if (userRoleIds.length === 0) {
+      return this.paginationService.paginate(
+        this.prismaService.dashboard_component,
+        paginationParams,
+        {
+          include: {
+            dashboard_component_locale: {
+              include: {
+                locale: true,
+              },
+            },
+            dashboard_component_role: {
+              include: {
+                role: {
+                  include: {
+                    role_locale: {
+                      include: {
+                        locale: true,
+                      },
+                    },
+                  },
+                },
+              },
+            },
+          },
+          where: {
+            id: -1,
+          },
+          orderBy: {
+            created_at: 'desc',
+          },
+        },
+        'dashboardComponent',
+      );
+    }
+
     const fields = ['slug']
     const OR = this.prismaService.createInsensitiveSearch(
       fields,
@@ -221,9 +261,15 @@ export class DashboardComponentService {
   }
 
   async createComponent(data: CreateDashboardComponentDTO, locale: string) {
+    const normalized = this.normalizeComponentIdentity(
+      data.slug,
+      data.library_slug,
+    );
+
     const component = await this.prismaService.dashboard_component.create({
       data: {
-        slug: data.slug,
+        slug: normalized.slug,
+        library_slug: normalized.library_slug,
         min_width: data.min_width,
         max_width: data.max_width,
         min_height: data.min_height,
@@ -257,10 +303,18 @@ export class DashboardComponentService {
   }
 
   async updateComponent(id: number, data: UpdateDashboardComponentDTO, locale: string) {
+    const normalized = data.slug
+      ? this.normalizeComponentIdentity(data.slug, data.library_slug)
+      : {
+          slug: undefined,
+          library_slug: data.library_slug,
+        };
+
    await this.prismaService.dashboard_component.update({
       where: { id },
       data: {
-        slug: data.slug,
+        slug: normalized.slug,
+        library_slug: normalized.library_slug,
         min_width: data.min_width,
         max_width: data.max_width,
         min_height: data.min_height,
@@ -312,4 +366,97 @@ export class DashboardComponentService {
       where: { id },
     });
   }
+
+  private normalizeComponentIdentity(slug: string, librarySlug?: string | null) {
+    const slugParts = slug.split('.').filter(Boolean);
+    const baseSlug =
+      slugParts.length > 0 ? slugParts[slugParts.length - 1]! : slug;
+    const resolvedLibrarySlug =
+      librarySlug || (slugParts.length > 1 ? slugParts[0]! : 'core');
+
+    return {
+      slug: baseSlug,
+      library_slug: resolvedLibrarySlug,
+    };
+  }
+
+  private buildWidgetAssetSlug(slug: string, librarySlug?: string | null) {
+    const normalized = this.normalizeComponentIdentity(slug, librarySlug);
+
+    return normalized.slug;
+  }
+
+  private resolvePreviewDirectory(): string {
+    const cwd = process.cwd();
+    const candidates = [
+      resolve(cwd, 'libraries/core/hedhog/frontend/public/dashboard-previews'),
+      resolve(cwd, '../libraries/core/hedhog/frontend/public/dashboard-previews'),
+      resolve(cwd, '../../libraries/core/hedhog/frontend/public/dashboard-previews'),
+    ];
+
+    for (const candidate of candidates) {
+      const parentDirectory = resolve(candidate, '..');
+      if (existsSync(parentDirectory)) {
+        return candidate;
+      }
+    }
+
+    return candidates[0];
+  }
+
+  async savePreview(id: number, file: MulterFile, locale: string) {
+    const isDevelopment = process.env.NODE_ENV !== 'production';
+    if (!isDevelopment) {
+      throw new ForbiddenException(
+        getLocaleText('dashboardPreviewOnlyInDevelopment', locale, 'Preview capture is only available in development environment'),
+      );
+    }
+
+    if (!file || !file.buffer) {
+      throw new BadRequestException(
+        getLocaleText('dashboardPreviewFileRequired', locale, 'Preview image file is required'),
+      );
+    }
+
+    if (!file.mimetype?.startsWith('image/')) {
+      throw new BadRequestException(
+        getLocaleText('dashboardPreviewInvalidFileType', locale, 'Preview file must be an image'),
+      );
+    }
+
+    const component = await this.prismaService.dashboard_component.findUnique({
+      where: { id },
+      select: {
+        id: true,
+        slug: true,
+        library_slug: true,
+      },
+    });
+
+    if (!component) {
+      throw new NotFoundException(
+        getLocaleText('dashboardComponentNotFound', locale, 'Dashboard component not found'),
+      );
+    }
+
+    const previewDirectory = this.resolvePreviewDirectory();
+    await fs.mkdir(previewDirectory, { recursive: true });
+
+    const assetSlug = this.buildWidgetAssetSlug(
+      component.slug,
+      component.library_slug,
+    );
+    const fileName = `${assetSlug}.png`;
+    const outputPath = join(previewDirectory, fileName);
+    await fs.writeFile(outputPath, file.buffer);
+
+    return {
+      success: true,
+      componentId: component.id,
+      slug: component.slug,
+      library_slug: component.library_slug,
+      fileName,
+      relativeUrl: `/libraries/${component.library_slug}/dashboard-previews/${fileName}`,
+    };
+  }
 }

package/src/dashboard/dashboard-component/dto/create.dto.ts

@@ -5,6 +5,10 @@ export class CreateDTO {
   @IsString({ message: (args) => getLocaleText('validation.stringRequired', args.value) })
   slug: string;
 
+  @IsOptional()
+  @IsString({ message: (args) => getLocaleText('validation.stringRequired', args.value) })
+  library_slug?: string;
+
   @IsOptional()
   @IsNumber({}, { message: (args) => getLocaleText('validation.numberRequired', args.value) })
   min_width?: number;

package/src/dashboard/dashboard-component/dto/update.dto.ts

@@ -6,6 +6,10 @@ export class UpdateDTO {
   @IsString({ message: (args) => getLocaleText('validation.stringRequired', args.value) })
   slug?: string;
 
+  @IsOptional()
+  @IsString({ message: (args) => getLocaleText('validation.stringRequired', args.value) })
+  library_slug?: string;
+
   @IsOptional()
   @IsNumber({}, { message: (args) => getLocaleText('validation.numberRequired', args.value) })
   min_width?: number;

package/src/dashboard/dashboard-core/dashboard-core.controller.ts

@@ -28,6 +28,11 @@ export class DashboardCoreController {
     return this.dashboardCoreService.getSystemStatistics();
   }
 
+  @Get('config/overview')
+  getConfigOverview() {
+    return this.dashboardCoreService.getConfigOverview();
+  }
+
   @Get('widgets/me')
   getWidgetsData(@User() user, @Locale() locale: string) {
     return this.dashboardCoreService.getWidgetsData(user.id, locale);