@hed-hog/core 0.0.298 → 0.0.299

package/hedhog/frontend/widgets/theme-config.tsx.ejs

@@ -0,0 +1,213 @@
+'use client';
+
+import { Badge } from '@/components/ui/badge';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { useWidgetData } from '@/hooks/use-widget-data';
+import type {
+  DashboardCoreConfigOverviewData,
+  ThemeConfigWidgetData,
+} from '@/types/widget-data';
+import { Palette } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { WidgetWrapper } from '../widget-wrapper';
+
+const emptyPaletteMode = {
+  primary: null,
+  primaryForeground: null,
+  secondary: null,
+  secondaryForeground: null,
+  accent: null,
+  accentForeground: null,
+  muted: null,
+  mutedForeground: null,
+  background: null,
+  backgroundForeground: null,
+  card: null,
+  cardForeground: null,
+};
+
+const defaultThemeConfigData: ThemeConfigWidgetData = {
+  status: {
+    isConfigured: false,
+    configuredTokenCount: 0,
+  },
+  branding: {
+    systemName: null,
+    systemSlogan: null,
+    iconUrl: null,
+    imageUrl: null,
+  },
+  presentation: {
+    mode: null,
+    font: null,
+    textSize: null,
+    radius: null,
+  },
+  palette: {
+    light: emptyPaletteMode,
+    dark: emptyPaletteMode,
+  },
+};
+
+interface ThemeConfigProps {
+  widget?: { name?: string };
+  onRemove?: () => void;
+}
+
+export default function ThemeConfig({ widget, onRemove }: ThemeConfigProps) {
+  const t = useTranslations('core.DashboardPage.themeConfig');
+
+  const { data, isLoading, isError, isAccessDenied } = useWidgetData<
+    DashboardCoreConfigOverviewData,
+    ThemeConfigWidgetData
+  >({
+    endpoint: '/dashboard-core/config/overview',
+    queryKey: 'dashboard-core-config-overview',
+    select: (d) => d.themeConfig,
+  });
+
+  const themeData = data ?? defaultThemeConfigData;
+
+  return (
+    <WidgetWrapper
+      isLoading={isLoading}
+      isError={isError}
+      isAccessDenied={isAccessDenied}
+      widgetName={widget?.name ?? t('title')}
+      onRemove={onRemove}
+    >
+      <Card className="flex h-full min-h-0 flex-col overflow-hidden">
+        <CardHeader className="shrink-0">
+          <div className="flex items-center justify-between gap-3">
+            <div className="flex items-center gap-3">
+              <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-rose-50">
+                <Palette className="h-5 w-5 text-rose-600" />
+              </div>
+              <div>
+                <CardTitle className="text-base">{t('title')}</CardTitle>
+                <CardDescription>{t('description')}</CardDescription>
+              </div>
+            </div>
+            <Badge
+              variant="secondary"
+              className={
+                themeData.status.isConfigured
+                  ? 'bg-emerald-50 text-emerald-700'
+                  : 'bg-amber-50 text-amber-700'
+              }
+            >
+              {themeData.status.isConfigured ? t('configured') : t('pending')}
+            </Badge>
+          </div>
+        </CardHeader>
+        <CardContent className="flex min-h-0 flex-1 flex-col gap-4 overflow-hidden pt-0">
+          <div className="rounded-lg border bg-muted/30 p-4">
+            <div className="flex items-center gap-3 rounded-lg border bg-background p-3">
+              <div
+                className="flex h-10 w-10 items-center justify-center rounded-lg text-sm font-bold text-white"
+                style={{
+                  backgroundColor: themeData.palette.light.primary || '#64748b',
+                }}
+              >
+                {(themeData.branding.systemName || 'S').charAt(0).toUpperCase()}
+              </div>
+              <div className="min-w-0">
+                <p className="truncate text-sm font-semibold">
+                  {themeData.branding.systemName || t('notSet')}
+                </p>
+                <p className="truncate text-xs text-muted-foreground">
+                  {themeData.branding.systemSlogan || t('notSet')}
+                </p>
+              </div>
+              <Badge variant="outline" className="ml-auto text-[10px]">
+                {themeData.presentation.mode || t('notSet')}
+              </Badge>
+            </div>
+          </div>
+
+          <div className="grid grid-cols-2 gap-2 sm:grid-cols-4">
+            <div className="rounded-lg border p-3 text-center">
+              <p className="text-[11px] text-muted-foreground">{t('tokens')}</p>
+              <p className="mt-1 text-lg font-semibold">
+                {themeData.status.configuredTokenCount}
+              </p>
+            </div>
+            <div className="rounded-lg border p-3 text-center">
+              <p className="text-[11px] text-muted-foreground">{t('font')}</p>
+              <p className="mt-1 truncate text-sm font-medium">
+                {themeData.presentation.font || t('notSet')}
+              </p>
+            </div>
+            <div className="rounded-lg border p-3 text-center">
+              <p className="text-[11px] text-muted-foreground">
+                {t('textSize')}
+              </p>
+              <p className="mt-1 truncate text-sm font-medium">
+                {themeData.presentation.textSize || t('notSet')}
+              </p>
+            </div>
+            <div className="rounded-lg border p-3 text-center">
+              <p className="text-[11px] text-muted-foreground">{t('radius')}</p>
+              <p className="mt-1 truncate text-sm font-medium">
+                {themeData.presentation.radius || t('notSet')}
+              </p>
+            </div>
+          </div>
+
+          <div className="grid gap-2 sm:grid-cols-2">
+            <div className="rounded-lg border p-3">
+              <div className="mb-2 flex items-center justify-between">
+                <p className="text-xs text-muted-foreground">
+                  {t('lightPalette')}
+                </p>
+                <Badge variant="outline" className="text-[10px]">
+                  {themeData.palette.light.primary || t('notSet')}
+                </Badge>
+              </div>
+              <div className="flex items-center gap-2">
+                <span
+                  className="h-5 w-5 rounded-full border"
+                  style={{
+                    backgroundColor:
+                      themeData.palette.light.primary || 'transparent',
+                  }}
+                />
+                <span className="text-xs text-muted-foreground">
+                  {t('primary')}
+                </span>
+              </div>
+            </div>
+            <div className="rounded-lg border p-3">
+              <div className="mb-2 flex items-center justify-between">
+                <p className="text-xs text-muted-foreground">
+                  {t('darkPalette')}
+                </p>
+                <Badge variant="outline" className="text-[10px]">
+                  {themeData.palette.dark.primary || t('notSet')}
+                </Badge>
+              </div>
+              <div className="flex items-center gap-2">
+                <span
+                  className="h-5 w-5 rounded-full border"
+                  style={{
+                    backgroundColor:
+                      themeData.palette.dark.primary || 'transparent',
+                  }}
+                />
+                <span className="text-xs text-muted-foreground">
+                  {t('primary')}
+                </span>
+              </div>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </WidgetWrapper>
+  );
+}

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/widgets/user-roles.tsx.ejs

@@ -0,0 +1,132 @@
+'use client';
+
+import { Badge } from '@/components/ui/badge';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+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';
+
+const levelStyles = [
+  {
+    border: 'border-blue-200 dark:border-blue-800',
+    bg: 'bg-blue-50/50 dark:bg-blue-950/30',
+    iconBg: 'bg-blue-100 dark:bg-blue-900/50',
+    iconColor: 'text-blue-600 dark:text-blue-400',
+    badge: 'bg-blue-50 text-blue-700 dark:bg-blue-950/40 dark:text-blue-400',
+  },
+  {
+    border: 'border-indigo-200 dark:border-indigo-800',
+    bg: 'bg-indigo-50/30 dark:bg-indigo-950/20',
+    iconBg: 'bg-indigo-100 dark:bg-indigo-900/50',
+    iconColor: 'text-indigo-600 dark:text-indigo-400',
+    badge:
+      'bg-indigo-50 text-indigo-700 dark:bg-indigo-950/40 dark:text-indigo-400',
+  },
+  {
+    border: 'border-emerald-200 dark:border-emerald-800',
+    bg: 'bg-emerald-50/30 dark:bg-emerald-950/20',
+    iconBg: 'bg-emerald-100 dark:bg-emerald-900/50',
+    iconColor: 'text-emerald-600 dark:text-emerald-400',
+    badge:
+      'bg-emerald-50 text-emerald-700 dark:bg-emerald-950/40 dark:text-emerald-400',
+  },
+  {
+    border: 'border-amber-200 dark:border-amber-800',
+    bg: 'bg-amber-50/30 dark:bg-amber-950/20',
+    iconBg: 'bg-amber-100 dark:bg-amber-900/50',
+    iconColor: 'text-amber-600 dark:text-amber-400',
+    badge:
+      'bg-amber-50 text-amber-700 dark:bg-amber-950/40 dark:text-amber-400',
+  },
+];
+
+function RolesContent({ roles }: { roles: RoleData[] }) {
+  const t = useTranslations('core.DashboardPage.userRoles');
+
+  return (
+    <Card className="flex h-full min-h-0 flex-col overflow-hidden">
+      <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">
+              {t('title')}
+            </CardTitle>
+            <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 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 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-7 w-7 shrink-0 items-center justify-center rounded-md ${style.iconBg}`}
+                >
+                  <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-xs font-medium text-foreground sm:text-[13px]">
+                    {role.name}
+                  </span>
+                  <span className="truncate text-[10px] text-muted-foreground sm:text-[11px]">
+                    {role.slug}
+                  </span>
+                </div>
+                <Badge
+                  variant="secondary"
+                  className={`shrink-0 px-1.5 py-0 text-[10px] ${style.badge}`}
+                >
+                  {t('active')}
+                </Badge>
+              </div>
+            );
+          })}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+interface UserRolesProps {
+  widget?: { name?: string };
+  onRemove?: () => void;
+}
+
+export default function UserRoles({ widget, onRemove }: UserRolesProps) {
+  const { data, isLoading, isError, isAccessDenied } = useWidgetData<
+    AllWidgetsData,
+    RoleData[]
+  >({
+    endpoint: '/dashboard-core/widgets/me',
+    queryKey: 'widget-me',
+    select: (d) => d.userRoles,
+  });
+
+  return (
+    <WidgetWrapper
+      isLoading={isLoading}
+      isError={isError}
+      isAccessDenied={isAccessDenied}
+      widgetName={widget?.name ?? 'user-roles'}
+      onRemove={onRemove}
+    >
+      {data && <RolesContent roles={data} />}
+    </WidgetWrapper>
+  );
+}

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

@@ -1,6 +1,6 @@
 {
   "name": "@hed-hog/core",
-  "version": "0.0.298",
+  "version": "0.0.299",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "dependencies": {
@@ -31,11 +31,11 @@
     "speakeasy": "^2.0.0",
     "uuid": "^11.1.0",
     "@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-locale": "0.0.14",
+    "@hed-hog/api-mail": "0.0.9",
+    "@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);
+  }
 }