@hed-hog/core 0.0.298 → 0.0.300

package/hedhog/frontend/{app/dashboard/components/widgets → widgets}/account-security.tsx.ejs

@@ -1,6 +1,4 @@
 'use client';
-
-import { Button } from '@/components/ui/button';
 import {
   Card,
   CardContent,
@@ -25,7 +23,7 @@ import { useEffect, useState } from 'react';
 
 import type { AccountSecurityData } from '@/types/widget-data';
 import { useRouter } from 'next/navigation';
-import { WidgetWrapper } from '../widget-wrapper';
+import { WidgetWrapper } from '@/app/(app)/(libraries)/core/dashboard/components';
 
 const ICON_MAP: Record<string, React.ElementType> = {
   password: Lock,
@@ -34,6 +32,13 @@ const ICON_MAP: Record<string, React.ElementType> = {
   sessions: AlertTriangle,
 };
 
+const CHECK_ROUTE_MAP: Record<string, string> = {
+  password: '/core/account/password',
+  '2fa': '/core/account/2fa',
+  email: '/core/account/email',
+  sessions: '/core/account/sessions',
+};
+
 function AccountSecurityContent({ data }: { data: AccountSecurityData }) {
   const t = useTranslations('core.DashboardPage.accountSecurity');
   const router = useRouter();
@@ -60,60 +65,66 @@ function AccountSecurityContent({ data }: { data: AccountSecurityData }) {
 
   return (
     <Card className="flex h-full min-h-0 flex-col overflow-hidden">
-      <CardHeader className="shrink-0 pb-3">
+      <CardHeader className="shrink-0 px-4 pb-2 pt-4 sm:px-5">
         <div className="flex items-center gap-2">
           <ShieldCheck className="h-5 w-5 text-emerald-600 dark:text-emerald-400" />
           <div>
             <CardTitle className="text-base font-semibold">
               {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 flex-col overflow-auto pt-0">
-        <div className="mb-4 flex flex-col items-center gap-2.5 rounded-xl bg-muted/50 p-3 sm:mb-5 sm:gap-3 sm:p-5">
+      <CardContent className="flex min-h-0 flex-1 flex-col overflow-auto px-4 pb-3 pt-0 sm:px-5 sm:pb-4">
+        <div className="mb-2 flex flex-col items-center gap-1.5 rounded-xl bg-muted/50 p-2 sm:mb-3 sm:gap-2 sm:p-3">
           <div className="flex items-baseline gap-1">
             <span
-              className={`text-4xl font-bold tracking-tight sm:text-5xl ${scoreColor}`}
+              className={`text-2xl font-bold tracking-tight sm:text-3xl ${scoreColor}`}
             >
               {score}
             </span>
-            <span className="text-base text-muted-foreground sm:text-lg">
+            <span className="text-xs text-muted-foreground sm:text-sm">
               /100
             </span>
           </div>
           <Progress
             value={score}
-            className="h-2.5 w-full max-w-xs"
+            className="h-1.5 w-full max-w-70"
             style={
               {
                 '--progress-foreground': progressColor,
               } as any
             }
           />
-          <p className="text-[11px] text-muted-foreground sm:text-xs">
+          <p className="text-[10px] text-muted-foreground sm:text-[11px]">
             {score >= 80 ? t('wellProtected') : t('recommendProtections')}
           </p>
         </div>
 
-        <div className="flex flex-col gap-1.5">
+        <div className="flex flex-col gap-1">
           {data.checks.map((item) => {
             const Icon = ICON_MAP[item.id] ?? ShieldCheck;
             return (
-              <div
+              <button
+                type="button"
                 key={item.id}
-                className="group flex flex-wrap items-start gap-2.5 rounded-lg p-2.5 transition-colors hover:bg-muted/50 sm:items-center sm:gap-3 sm:p-3"
+                onClick={() =>
+                  router.push(CHECK_ROUTE_MAP[item.id] ?? '/core/account')
+                }
+                className="group flex w-full cursor-pointer flex-wrap items-start gap-2 rounded-lg p-2 text-left transition-colors hover:bg-muted/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring sm:items-center sm:gap-2.5 sm:p-2.5"
               >
                 <div
-                  className={`flex h-8 w-8 shrink-0 items-center justify-center rounded-lg sm:h-9 sm:w-9 ${
+                  className={`flex h-7 w-7 shrink-0 items-center justify-center rounded-lg sm:h-8 sm:w-8 ${
                     item.enabled
                       ? 'bg-emerald-50 dark:bg-emerald-950/40'
                       : 'bg-muted'
                   }`}
                 >
                   <Icon
-                    className={`h-3.5 w-3.5 sm:h-4 sm:w-4 ${
+                    className={`h-3.5 w-3.5 ${
                       item.enabled
                         ? 'text-emerald-600 dark:text-emerald-400'
                         : 'text-muted-foreground'
@@ -122,7 +133,7 @@ function AccountSecurityContent({ data }: { data: AccountSecurityData }) {
                 </div>
                 <div className="flex min-w-0 flex-1 flex-col">
                   <div className="flex flex-wrap items-center gap-2">
-                    <span className="wrap-break-word text-[13px] font-medium text-foreground sm:text-sm">
+                    <span className="wrap-break-word text-[12px] font-medium text-foreground sm:text-[13px]">
                       {t(`labels.${item.labelKey}` as any) || item.labelKey}
                     </span>
                     {item.enabled ? (
@@ -131,23 +142,16 @@ function AccountSecurityContent({ data }: { data: AccountSecurityData }) {
                       <AlertTriangle className="h-3.5 w-3.5 text-amber-500" />
                     )}
                   </div>
-                  <span className="text-[11px] text-muted-foreground sm:text-xs">
+                  <span className="text-[10px] text-muted-foreground sm:text-[11px]">
                     {t(`descriptions.${item.descriptionKey}` as any) ||
                       item.descriptionKey}
                   </span>
                 </div>
-                {!item.enabled && (
-                  <Button
-                    variant="ghost"
-                    size="sm"
-                    onClick={() => router.push('/core/account/2fa')}
-                    className="mt-1 w-full shrink-0 gap-1 text-xs sm:mt-0 sm:w-auto"
-                  >
-                    {t('activate')}
-                    <ChevronRight className="h-3 w-3" />
-                  </Button>
-                )}
-              </div>
+                <div className="mt-0.5 flex w-full shrink-0 items-center justify-end gap-1 text-[11px] font-medium text-foreground sm:mt-0 sm:w-auto sm:text-xs">
+                  {!item.enabled && <span>{t('activate')}</span>}
+                  <ChevronRight className="h-3 w-3" />
+                </div>
+              </button>
             );
           })}
         </div>

package/hedhog/frontend/{app/dashboard/components/widgets → widgets}/active-users-card.tsx.ejs

@@ -1,8 +1,8 @@
 import { useWidgetData } from '@/hooks/use-widget-data';
 import { Users } from 'lucide-react';
 import { useTranslations } from 'next-intl';
-import StatCard from '../stats';
-import { WidgetWrapper } from '../widget-wrapper';
+import StatCard from '@/app/(app)/(libraries)/core/dashboard/components/stats';
+import { WidgetWrapper } from '@/app/(app)/(libraries)/core/dashboard/components';
 
 interface ActiveUsersProps {
   widget?: any;

package/hedhog/frontend/{app/dashboard/components/widgets → widgets}/activity-timeline.tsx.ejs

@@ -21,7 +21,7 @@ import {
   UserCheck,
 } from 'lucide-react';
 import { useTranslations } from 'next-intl';
-import { WidgetWrapper } from '../widget-wrapper';
+import { WidgetWrapper } from '@/app/(app)/(libraries)/core/dashboard/components';
 
 const typeIconMap: Record<string, React.ElementType> = {
   login: LogIn,

package/hedhog/frontend/{app/dashboard/components/widgets → widgets}/email-notifications.tsx.ejs

@@ -20,7 +20,7 @@ import type {
 import { Mail, MailCheck, MailWarning, MailX } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts';
-import { WidgetWrapper } from '../widget-wrapper';
+import { WidgetWrapper } from '@/app/(app)/(libraries)/core/dashboard/components';
 
 const defaultEmailNotificationsData: EmailNotificationsData = {
   cards: {

package/hedhog/frontend/{app/dashboard/components/widgets → widgets}/locale-config.tsx.ejs

@@ -15,7 +15,7 @@ import type {
 } from '@/types/widget-data';
 import { Calendar, Clock, Globe, Languages } from 'lucide-react';
 import { useTranslations } from 'next-intl';
-import { WidgetWrapper } from '../widget-wrapper';
+import { WidgetWrapper } from '@/app/(app)/(libraries)/core/dashboard/components';
 
 const defaultLocaleConfigData: LocaleConfigWidgetData = {
   status: {

package/hedhog/frontend/{app/dashboard/components/widgets → widgets}/login-history-chart.tsx.ejs

@@ -17,7 +17,7 @@ import type { AllWidgetsData, LoginDay } from '@/types/widget-data';
 import { LogIn } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from 'recharts';
-import { WidgetWrapper } from '../widget-wrapper';
+import { WidgetWrapper } from '@/app/(app)/(libraries)/core/dashboard/components';
 
 function LoginChart({ data }: { data: LoginDay[] }) {
   const t = useTranslations('core.DashboardPage.loginHistory');

package/hedhog/frontend/{app/dashboard/components/widgets → widgets}/mail-config.tsx.ejs

@@ -15,7 +15,7 @@ import type {
 } from '@/types/widget-data';
 import { CheckCircle2, Mail, Send, Server } from 'lucide-react';
 import { useTranslations } from 'next-intl';
-import { WidgetWrapper } from '../widget-wrapper';
+import { WidgetWrapper } from '@/app/(app)/(libraries)/core/dashboard/components';
 
 const defaultMailConfigData: MailConfigWidgetData = {
   status: {

package/hedhog/frontend/{app/dashboard/components/widgets → widgets}/mail-sent-card.tsx.ejs

@@ -1,8 +1,8 @@
 import { useWidgetData } from '@/hooks/use-widget-data';
 import { Mail } from 'lucide-react';
 import { useTranslations } from 'next-intl';
-import StatCard from '../stats';
-import { WidgetWrapper } from '../widget-wrapper';
+import StatCard from '@/app/(app)/(libraries)/core/dashboard/components/stats';
+import { WidgetWrapper } from '@/app/(app)/(libraries)/core/dashboard/components';
 
 interface MailSentProps {
   widget?: any;

package/hedhog/frontend/{app/dashboard/components/widgets → widgets}/mail-sent-chart.tsx.ejs

@@ -19,7 +19,7 @@ import {
   XAxis,
   YAxis,
 } from 'recharts';
-import { WidgetWrapper } from '../widget-wrapper';
+import { WidgetWrapper } from '@/app/(app)/(libraries)/core/dashboard/components';
 
 function CustomTooltip({
   active,

package/hedhog/frontend/{app/dashboard/components/widgets → widgets}/menus-card.tsx.ejs

@@ -1,8 +1,8 @@
 import { useWidgetData } from '@/hooks/use-widget-data';
 import { LayoutList } from 'lucide-react';
 import { useTranslations } from 'next-intl';
-import StatCard from '../stats';
-import { WidgetWrapper } from '../widget-wrapper';
+import StatCard from '@/app/(app)/(libraries)/core/dashboard/components/stats';
+import { WidgetWrapper } from '@/app/(app)/(libraries)/core/dashboard/components';
 
 interface MenusCardProps {
   widget?: any;

package/hedhog/frontend/{app/dashboard/components/widgets → widgets}/oauth-config.tsx.ejs

@@ -15,7 +15,7 @@ import type {
 } from '@/types/widget-data';
 import { CheckCircle2, KeyRound, XCircle } from 'lucide-react';
 import { useTranslations } from 'next-intl';
-import { WidgetWrapper } from '../widget-wrapper';
+import { WidgetWrapper } from '@/app/(app)/(libraries)/core/dashboard/components';
 
 const defaultOAuthConfigData: OAuthConfigWidgetData = {
   status: {

package/hedhog/frontend/{app/dashboard/components/widgets → widgets}/permissions-card.tsx.ejs

@@ -1,8 +1,8 @@
 import { useWidgetData } from '@/hooks/use-widget-data';
 import { Shield } from 'lucide-react';
 import { useTranslations } from 'next-intl';
-import StatCard from '../stats';
-import { WidgetWrapper } from '../widget-wrapper';
+import StatCard from '@/app/(app)/(libraries)/core/dashboard/components/stats';
+import { WidgetWrapper } from '@/app/(app)/(libraries)/core/dashboard/components';
 
 interface PermissionsCardProps {
   widget?: any;

package/hedhog/frontend/{app/dashboard/components/widgets → widgets}/permissions-chart.tsx.ejs

@@ -11,7 +11,7 @@ import { useWidgetData } from '@/hooks/use-widget-data';
 import { IconGripVertical } from '@tabler/icons-react';
 import { useTranslations } from 'next-intl';
 import { Cell, Pie, PieChart, ResponsiveContainer, Tooltip } from 'recharts';
-import { WidgetWrapper } from '../widget-wrapper';
+import { WidgetWrapper } from '@/app/(app)/(libraries)/core/dashboard/components';
 
 function CustomTooltip({
   active,

package/hedhog/frontend/{app/dashboard/components/widgets → widgets}/profile-card.tsx.ejs

@@ -21,7 +21,7 @@ import {
 } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { useRouter } from 'next/navigation';
-import { WidgetWrapper } from '../widget-wrapper';
+import { WidgetWrapper } from '@/app/(app)/(libraries)/core/dashboard/components';
 
 function getInitials(name: string): string {
   return name

package/hedhog/frontend/{app/dashboard/components/widgets → widgets}/routes-card.tsx.ejs

@@ -1,8 +1,8 @@
 import { useWidgetData } from '@/hooks/use-widget-data';
 import { Route } from 'lucide-react';
 import { useTranslations } from 'next-intl';
-import StatCard from '../stats';
-import { WidgetWrapper } from '../widget-wrapper';
+import StatCard from '@/app/(app)/(libraries)/core/dashboard/components/stats';
+import { WidgetWrapper } from '@/app/(app)/(libraries)/core/dashboard/components';
 
 interface RoutesCardProps {
   widget?: any;

package/hedhog/frontend/{app/dashboard/components/widgets → widgets}/session-activity-chart.tsx.ejs

@@ -19,7 +19,7 @@ import {
   XAxis,
   YAxis,
 } from 'recharts';
-import { WidgetWrapper } from '../widget-wrapper';
+import { WidgetWrapper } from '@/app/(app)/(libraries)/core/dashboard/components';
 
 function CustomTooltip({
   active,

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

@@ -1,8 +1,8 @@
 import { useWidgetData } from '@/hooks/use-widget-data';
 import { Activity } from 'lucide-react';
 import { useTranslations } from 'next-intl';
-import StatCard from '../stats';
-import { WidgetWrapper } from '../widget-wrapper';
+import StatCard from '@/app/(app)/(libraries)/core/dashboard/components/stats';
+import { WidgetWrapper } from '@/app/(app)/(libraries)/core/dashboard/components';
 
 interface SessionsTodayProps {
   widget?: any;

package/hedhog/frontend/{app/dashboard/components/widgets → widgets}/stat-access-level.tsx.ejs

@@ -5,7 +5,7 @@ import { useWidgetData } from '@/hooks/use-widget-data';
 import type { AllWidgetsData } from '@/types/widget-data';
 import { Zap } from 'lucide-react';
 import { useTranslations } from 'next-intl';
-import { WidgetWrapper } from '../widget-wrapper';
+import { WidgetWrapper } from '@/app/(app)/(libraries)/core/dashboard/components';
 
 interface StatAccessLevelProps {
   widget?: { name?: string };

package/hedhog/frontend/{app/dashboard/components/widgets → widgets}/stat-actions-today.tsx.ejs

@@ -5,7 +5,7 @@ import { useWidgetData } from '@/hooks/use-widget-data';
 import type { AllWidgetsData } from '@/types/widget-data';
 import { MousePointerClick } from 'lucide-react';
 import { useTranslations } from 'next-intl';
-import { WidgetWrapper } from '../widget-wrapper';
+import { WidgetWrapper } from '@/app/(app)/(libraries)/core/dashboard/components';
 
 interface StatActionsTodayProps {
   widget?: { name?: string };

package/hedhog/frontend/{app/dashboard/components/widgets → widgets}/stat-consecutive-days.tsx.ejs

@@ -5,7 +5,7 @@ import { useWidgetData } from '@/hooks/use-widget-data';
 import type { AllWidgetsData } from '@/types/widget-data';
 import { CalendarDays } from 'lucide-react';
 import { useTranslations } from 'next-intl';
-import { WidgetWrapper } from '../widget-wrapper';
+import { WidgetWrapper } from '@/app/(app)/(libraries)/core/dashboard/components';
 
 interface StatConsecutiveDaysProps {
   widget?: { name?: string };

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

@@ -5,7 +5,7 @@ import { useWidgetData } from '@/hooks/use-widget-data';
 import type { AllWidgetsData } from '@/types/widget-data';
 import { Clock } from 'lucide-react';
 import { useTranslations } from 'next-intl';
-import { WidgetWrapper } from '../widget-wrapper';
+import { WidgetWrapper } from '@/app/(app)/(libraries)/core/dashboard/components';
 
 interface StatOnlineTimeProps {
   widget?: { name?: string };

package/hedhog/frontend/{app/dashboard/components/widgets → widgets}/storage-config.tsx.ejs

@@ -15,7 +15,7 @@ import type {
 } from '@/types/widget-data';
 import { CheckCircle2, HardDrive } from 'lucide-react';
 import { useTranslations } from 'next-intl';
-import { WidgetWrapper } from '../widget-wrapper';
+import { WidgetWrapper } from '@/app/(app)/(libraries)/core/dashboard/components';
 
 const defaultStorageConfigData: StorageConfigWidgetData = {
   status: {

package/hedhog/frontend/{app/dashboard/components/widgets → widgets}/theme-config.tsx.ejs

@@ -15,7 +15,7 @@ import type {
 } from '@/types/widget-data';
 import { Palette } from 'lucide-react';
 import { useTranslations } from 'next-intl';
-import { WidgetWrapper } from '../widget-wrapper';
+import { WidgetWrapper } from '@/app/(app)/(libraries)/core/dashboard/components';
 
 const emptyPaletteMode = {
   primary: null,

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

@@ -19,7 +19,7 @@ import {
   XAxis,
   YAxis,
 } from 'recharts';
-import { WidgetWrapper } from '../widget-wrapper';
+import { WidgetWrapper } from '@/app/(app)/(libraries)/core/dashboard/components';
 
 function CustomTooltip({
   active,

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

@@ -12,7 +12,7 @@ import { useWidgetData } from '@/hooks/use-widget-data';
 import type { AllWidgetsData, RoleData } from '@/types/widget-data';
 import { Crown, ShieldCheck } from 'lucide-react';
 import { useTranslations } from 'next-intl';
-import { WidgetWrapper } from '../widget-wrapper';
+import { WidgetWrapper } from '@/app/(app)/(libraries)/core/dashboard/components';
 
 const levelStyles = [
   {

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

@@ -29,7 +29,7 @@ import {
 } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { useRouter } from 'next/navigation';
-import { WidgetWrapper } from '../widget-wrapper';
+import { WidgetWrapper } from '@/app/(app)/(libraries)/core/dashboard/components';
 
 function detectDeviceType(ua: string): 'desktop' | 'mobile' | 'tablet' {
   const u = ua.toLowerCase();
@@ -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.yaml

@@ -1,11 +1,17 @@
 columns:
   - type: pk
   - type: slug
+  - name: icon
+    length: 255
+    isNullable: true
   - name: name
     type: locale_varchar
     length: 255
     locale:
       en: Name
       pt: Nome
+  - name: is_template
+    type: boolean
+    default: false
   - type: created_at
   - type: updated_at

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hed-hog/core",
-  "version": "0.0.298",
+  "version": "0.0.300",
   "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-pagination": "0.0.7",
+    "@hed-hog/api-mail": "0.0.9",
     "@hed-hog/api": "0.0.6",
-    "@hed-hog/api-prisma": "0.0.6",
-    "@hed-hog/api-types": "0.0.1",
     "@hed-hog/api-locale": "0.0.14",
-    "@hed-hog/api-pagination": "0.0.7",
-    "@hed-hog/api-mail": "0.0.9"
+    "@hed-hog/api-prisma": "0.0.6",
+    "@hed-hog/api-types": "0.0.1"
   },
   "exports": {
     ".": {

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

@@ -2,21 +2,26 @@ 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,
+    Query,
+    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()
@@ -33,8 +38,20 @@ export class DashboardComponentController {
   }
 
   @Get('user')
-  getAllComponentsByUserRole(@Pagination() paginationParams, @User() { id }) {
-    return this.dashboardComponentService.getAllComponentsByUserRole(paginationParams, id);
+  getAllComponentsByUserRole(
+    @Pagination() paginationParams,
+    @User() { id },
+    @Query('librarySlug') librarySlug?: string,
+    @Query('exclude') exclude?: string,
+  ) {
+    return this.dashboardComponentService.getAllComponentsByUserRole(
+      {
+        ...paginationParams,
+        librarySlug,
+        exclude,
+      },
+      id,
+    );
   }
 
   @Get(':id')
@@ -64,4 +81,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);
+  }
 }