@hed-hog/core 0.0.298 → 0.0.299

package/hedhog/frontend/app/dashboard/components/widgets/finance.receivable-30d-kpi.tsx.ejs

@@ -0,0 +1,73 @@
+'use client';
+
+import { Card, CardContent } from '@/components/ui/card';
+import { useWidgetData } from '@/hooks/use-widget-data';
+import { TrendingUp } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { WidgetWrapper } from '../widget-wrapper';
+
+interface Receivable30dKpiProps {
+  widget?: { name?: string };
+  onRemove?: () => void;
+}
+
+interface FinanceData {
+  kpis?: {
+    aReceber30dias: number;
+    aReceber7dias: number;
+  };
+}
+
+export default function Receivable30dKpi({
+  widget,
+  onRemove,
+}: Receivable30dKpiProps) {
+  const t = useTranslations('finance.DashboardPage');
+
+  const { data, isLoading, isAccessDenied, isError } =
+    useWidgetData<FinanceData>({
+      endpoint: '/finance/data',
+      queryKey: 'finance-kpi-receivable-30d',
+    });
+
+  const value = data?.kpis?.aReceber30dias ?? 0;
+  const sevenDays = data?.kpis?.aReceber7dias ?? 0;
+  const formatted = new Intl.NumberFormat('pt-BR', {
+    style: 'currency',
+    currency: 'BRL',
+  }).format(value);
+
+  return (
+    <WidgetWrapper
+      isLoading={isLoading}
+      isAccessDenied={isAccessDenied}
+      isError={isError}
+      widgetName={widget?.name || t('kpis.receivable30.title')}
+      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-4">
+          <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-green-50">
+            <TrendingUp className="h-5 w-5 text-green-600" />
+          </div>
+          <div className="flex min-w-0 flex-col">
+            <span className="text-[10px] font-medium uppercase tracking-wider text-muted-foreground">
+              {t('kpis.receivable30.title')}
+            </span>
+            <span className="truncate text-lg font-bold tracking-tight text-foreground">
+              {formatted}
+            </span>
+            <span className="text-[10px] text-muted-foreground">
+              {t('kpis.receivable30.sevenDays', {
+                value: new Intl.NumberFormat('pt-BR', {
+                  style: 'currency',
+                  currency: 'BRL',
+                }).format(sevenDays),
+              })}
+            </span>
+          </div>
+        </CardContent>
+      </Card>
+    </WidgetWrapper>
+  );
+}

package/hedhog/frontend/app/dashboard/components/widgets/finance.upcoming-payable.tsx.ejs

@@ -0,0 +1,123 @@
+'use client';
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { Money } from '@/components/ui/money';
+import { StatusBadge } from '@/components/ui/status-badge';
+import { useWidgetData } from '@/hooks/use-widget-data';
+import { ArrowDownRight } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import Link from 'next/link';
+import { WidgetWrapper } from '../widget-wrapper';
+
+interface FinanceData {
+  titulosPagar?: Array<{
+    id: string;
+    status: string;
+    documento: string;
+    fornecedorId?: string;
+    parcelas: Array<{
+      status: string;
+      vencimento: string;
+      valor: number;
+    }>;
+  }>;
+  pessoas?: Array<{
+    id: string;
+    nome: string;
+  }>;
+}
+
+interface UpcomingPayableProps {
+  widget?: { name?: string };
+  onRemove?: () => void;
+}
+
+function formatDate(value: string) {
+  return new Date(value).toLocaleDateString('pt-BR');
+}
+
+export default function UpcomingPayable({
+  widget,
+  onRemove,
+}: UpcomingPayableProps) {
+  const t = useTranslations('finance.DashboardPage');
+
+  const { data, isLoading, isAccessDenied, isError } =
+    useWidgetData<FinanceData>({
+      endpoint: '/finance/data',
+      queryKey: 'finance-upcoming-payable',
+    });
+
+  const getPersonById = (id?: string) =>
+    (data?.pessoas || []).find((p) => p.id === id);
+
+  const approvedPayables = (data?.titulosPagar || []).filter(
+    (titulo) => titulo.status !== 'rascunho' && titulo.status !== 'cancelado'
+  );
+
+  const rows = approvedPayables
+    .flatMap((titulo) =>
+      titulo.parcelas
+        .filter((p) => p.status === 'aberto' || p.status === 'vencido')
+        .map((parcela) => ({
+          tituloId: titulo.id,
+          documento: titulo.documento,
+          person: getPersonById(titulo.fornecedorId)?.nome || '',
+          dueDate: parcela.vencimento,
+          value: parcela.valor,
+          status: parcela.status,
+        }))
+    )
+    .slice(0, 3);
+
+  return (
+    <WidgetWrapper
+      isLoading={isLoading}
+      isAccessDenied={isAccessDenied}
+      isError={isError}
+      widgetName={widget?.name || t('upcoming.payable')}
+      onRemove={onRemove}
+    >
+      <Card className="h-full">
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2 text-base">
+            <ArrowDownRight className="h-4 w-4 text-red-500" />
+            {t('upcoming.payable')}
+          </CardTitle>
+          <CardDescription>{t('upcoming.nextDueDates')}</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-4">
+            {rows.map((item, index) => (
+              <Link
+                key={index}
+                href={`/finance/accounts-payable/installments/${item.tituloId}`}
+                className="-m-2 flex cursor-pointer items-center justify-between rounded-md p-2 transition-colors hover:bg-muted/50 active:bg-muted"
+              >
+                <div className="space-y-1">
+                  <p className="text-sm font-medium">{item.documento}</p>
+                  <p className="text-xs text-muted-foreground">{item.person}</p>
+                </div>
+                <div className="text-right">
+                  <p className="text-sm font-medium">
+                    <Money value={item.value} />
+                  </p>
+                  <p className="text-xs text-muted-foreground">
+                    {formatDate(item.dueDate)}
+                  </p>
+                </div>
+                <StatusBadge status={item.status as any} />
+              </Link>
+            ))}
+          </div>
+        </CardContent>
+      </Card>
+    </WidgetWrapper>
+  );
+}

package/hedhog/frontend/app/dashboard/components/widgets/finance.upcoming-receivable.tsx.ejs

@@ -0,0 +1,118 @@
+'use client';
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { Money } from '@/components/ui/money';
+import { StatusBadge } from '@/components/ui/status-badge';
+import { useWidgetData } from '@/hooks/use-widget-data';
+import { ArrowUpRight } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import Link from 'next/link';
+import { WidgetWrapper } from '../widget-wrapper';
+
+interface FinanceData {
+  titulosReceber?: Array<{
+    id: string;
+    documento: string;
+    clienteId?: string;
+    parcelas: Array<{
+      status: string;
+      vencimento: string;
+      valor: number;
+    }>;
+  }>;
+  pessoas?: Array<{
+    id: string;
+    nome: string;
+  }>;
+}
+
+interface UpcomingReceivableProps {
+  widget?: { name?: string };
+  onRemove?: () => void;
+}
+
+function formatDate(value: string) {
+  return new Date(value).toLocaleDateString('pt-BR');
+}
+
+export default function UpcomingReceivable({
+  widget,
+  onRemove,
+}: UpcomingReceivableProps) {
+  const t = useTranslations('finance.DashboardPage');
+
+  const { data, isLoading, isAccessDenied, isError } =
+    useWidgetData<FinanceData>({
+      endpoint: '/finance/data',
+      queryKey: 'finance-upcoming-receivable',
+    });
+
+  const getPersonById = (id?: string) =>
+    (data?.pessoas || []).find((p) => p.id === id);
+
+  const rows = (data?.titulosReceber || [])
+    .flatMap((titulo) =>
+      titulo.parcelas
+        .filter((p) => p.status === 'aberto' || p.status === 'vencido')
+        .map((parcela) => ({
+          tituloId: titulo.id,
+          documento: titulo.documento,
+          person: getPersonById(titulo.clienteId)?.nome || '',
+          dueDate: parcela.vencimento,
+          value: parcela.valor,
+          status: parcela.status,
+        }))
+    )
+    .slice(0, 3);
+
+  return (
+    <WidgetWrapper
+      isLoading={isLoading}
+      isAccessDenied={isAccessDenied}
+      isError={isError}
+      widgetName={widget?.name || t('upcoming.receivable')}
+      onRemove={onRemove}
+    >
+      <Card className="h-full">
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2 text-base">
+            <ArrowUpRight className="h-4 w-4 text-green-500" />
+            {t('upcoming.receivable')}
+          </CardTitle>
+          <CardDescription>{t('upcoming.nextDueDates')}</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-4">
+            {rows.map((item, index) => (
+              <Link
+                key={index}
+                href={`/finance/accounts-receivable/installments/${item.tituloId}`}
+                className="-m-2 flex cursor-pointer items-center justify-between rounded-md p-2 transition-colors hover:bg-muted/50 active:bg-muted"
+              >
+                <div className="space-y-1">
+                  <p className="text-sm font-medium">{item.documento}</p>
+                  <p className="text-xs text-muted-foreground">{item.person}</p>
+                </div>
+                <div className="text-right">
+                  <p className="text-sm font-medium">
+                    <Money value={item.value} />
+                  </p>
+                  <p className="text-xs text-muted-foreground">
+                    {formatDate(item.dueDate)}
+                  </p>
+                </div>
+                <StatusBadge status={item.status as any} />
+              </Link>
+            ))}
+          </div>
+        </CardContent>
+      </Card>
+    </WidgetWrapper>
+  );
+}

package/hedhog/frontend/messages/en.json

@@ -904,10 +904,13 @@
   "AddWidgetDialog": {
     "title": "Select Dashboard Components",
     "description": "Choose the components you want to display on your dashboard.",
+    "selectedOfTotal": "{selected} selected of {total}",
     "noComponentsAvailable": "No components available at the moment.",
     "dimensions": "Dimensions",
     "resizable": "Resizable",
     "fixedSize": "Fixed size",
+    "select": "Select",
+    "selected": "Selected",
     "cancel": "Cancel",
     "add": "Add"
   },

package/hedhog/frontend/messages/pt.json

@@ -907,10 +907,13 @@
   "AddWidgetDialog": {
     "title": "Selecionar Componentes do Dashboard",
     "description": "Escolha os componentes que deseja exibir no seu dashboard.",
+    "selectedOfTotal": "{selected} selecionados de {total}",
     "noComponentsAvailable": "Nenhum componente disponível no momento.",
     "dimensions": "Dimensões",
     "resizable": "Redimensionável",
     "fixedSize": "Tamanho fixo",
+    "select": "Selecionar",
+    "selected": "Selecionado",
     "cancel": "Cancelar",
     "add": "Adicionar"
   },

package/hedhog/frontend/public/dashboard-previews/.gitkeep

@@ -0,0 +1,12 @@
+# Dashboard Widget Previews
+#
+# Place one .webp file per dashboard component, named exactly by the component slug.
+# Example: active-users-card.webp, user-sessions.webp
+#
+# These files are copied by `hedhog add` / `hedhog dev apply` to:
+#   apps/admin/public/libraries/core/dashboard-previews/<slug>.webp
+#
+# The admin selector loads them as:
+#   /libraries/core/dashboard-previews/<slug>.webp
+#
+# If a file is missing, the selector card falls back gracefully (image hidden).

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,
@@ -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/widgets/active-users-card.tsx.ejs

@@ -0,0 +1,58 @@
+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';
+
+interface ActiveUsersProps {
+  widget?: any;
+  onRemove?: () => void;
+}
+
+interface UserStatsData {
+  cards?: {
+    activeUsers?: {
+      value: number;
+      change: number | null;
+    };
+  };
+}
+
+export default function ActiveUsers({ widget, onRemove }: ActiveUsersProps) {
+  const t = useTranslations('core.Dashboard');
+
+  const { data, isLoading, isAccessDenied, isError } =
+    useWidgetData<UserStatsData>({
+      endpoint: '/dashboard-core/stats/overview/users',
+      queryKey: 'dashboard-stats-users',
+    });
+
+  const value = data?.cards?.activeUsers?.value?.toLocaleString('pt-BR') || '0';
+  const change = data?.cards?.activeUsers?.change;
+  const changeType =
+    change !== null && change !== undefined && change >= 0 ? 'up' : 'down';
+
+  return (
+    <WidgetWrapper
+      isLoading={isLoading}
+      isAccessDenied={isAccessDenied}
+      isError={isError}
+      widgetName={widget?.name || t('activeUsers')}
+      onRemove={onRemove}
+    >
+      <StatCard
+        title={t('activeUsers')}
+        value={value}
+        change={
+          change !== null && change !== undefined
+            ? `${change > 0 ? '+' : ''}${change}%`
+            : undefined
+        }
+        changeType={changeType}
+        icon={<Users className="h-6 w-6 text-blue-500" />}
+        iconBg="bg-blue-500/10"
+        delay={50}
+      />
+    </WidgetWrapper>
+  );
+}