@hed-hog/core 0.0.298 → 0.0.299

package/hedhog/frontend/app/dashboard/components/add-widget-selector-dialog.tsx.ejs

@@ -1,5 +1,7 @@
 'use client';
 
+import { PaginationFooter } from '@/components/entity-list/pagination-footer';
+import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import {
   Card,
@@ -22,11 +24,20 @@ import {
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
 import { ScrollArea } from '@/components/ui/scroll-area';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
 import { Skeleton } from '@/components/ui/skeleton';
 import { cn } from '@/lib/utils';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
 import {
   IconArrowsRightLeft,
+  IconLayoutDashboard,
   IconPlus,
   IconSettings,
 } from '@tabler/icons-react';
@@ -37,6 +48,7 @@ import { useState } from 'react';
 interface DashboardComponent {
   id: number;
   slug: string;
+  library_slug?: string;
   path: string;
   min_width: number;
   max_width?: number;
@@ -66,14 +78,93 @@ interface Dashboard {
 
 interface AddWidgetSelectorDialogProps {
   availableComponents: DashboardComponent[];
+  totalItems: number;
+  currentPage: number;
+  pageSize: number;
   isLoading: boolean;
-  onAdd: (slug: string) => void;
+  onPageChange: (page: number) => void;
+  onPageSizeChange: (pageSize: number) => void;
+  onAdd: (slugs: string[]) => Promise<void> | void;
   currentSlug?: string;
 }
 
+const getWidgetLookupKey = (slug: string, librarySlug?: string): string => {
+  const parts = slug.split('.');
+  const baseSlug = parts[parts.length - 1] || slug;
+
+  if (librarySlug) {
+    return `${librarySlug}.${baseSlug}`;
+  }
+
+  return slug;
+};
+
+const getWidgetPreviewSlug = (slug: string): string => {
+  const parts = slug.split('.');
+  return parts[parts.length - 1] || slug;
+};
+
+function WidgetPreview({
+  name,
+  slug,
+  width,
+  height,
+  isResizable,
+  resizableLabel,
+  fixedLabel,
+}: {
+  name: string;
+  slug: string;
+  width: number;
+  height: number;
+  isResizable: boolean;
+  resizableLabel: string;
+  fixedLabel: string;
+}) {
+  const previewSlug = getWidgetPreviewSlug(slug);
+  const previewUrl = `/libraries/core/dashboard-previews/${previewSlug}.png`;
+
+  return (
+    <div className="h-44 overflow-hidden rounded-xl border bg-background p-3">
+      <div className="flex h-full flex-col rounded-lg border border-dashed bg-muted/20 p-3">
+        <img
+          src={previewUrl}
+          alt={name}
+          className="mb-2 h-full w-full rounded-md border object-cover"
+          onError={(e) => {
+            e.currentTarget.style.display = 'none';
+          }}
+        />
+        <div className="mb-2 flex items-center gap-2">
+          <div className="size-2 rounded-full bg-primary/70" />
+          <div className="h-2.5 w-20 rounded bg-muted" />
+        </div>
+        <div className="h-3 w-2/3 rounded bg-muted" />
+        <div className="mt-2 h-2.5 w-1/2 rounded bg-muted" />
+        <div className="mt-auto flex items-center gap-2">
+          <Badge variant="secondary" className="text-[10px]">
+            {width}x{height}
+          </Badge>
+          <Badge variant="outline" className="text-[10px]">
+            {isResizable ? resizableLabel : fixedLabel}
+          </Badge>
+        </div>
+        <p className="mt-2 truncate text-[10px] text-muted-foreground">
+          {name}
+        </p>
+      </div>
+    </div>
+  );
+}
+
 export function AddWidgetSelectorDialog({
   availableComponents,
+  totalItems,
+  currentPage,
+  pageSize,
   isLoading,
+  onPageChange,
+  onPageSizeChange,
   onAdd,
   currentSlug = 'default',
 }: AddWidgetSelectorDialogProps) {
@@ -84,7 +175,10 @@ export function AddWidgetSelectorDialog({
 
   const [openWidgets, setOpenWidgets] = useState(false);
   const [openDashboards, setOpenDashboards] = useState(false);
-  const [selectedWidget, setSelectedWidget] = useState<string | null>(null);
+  const [selectedWidgets, setSelectedWidgets] = useState<Set<string>>(
+    new Set()
+  );
+  const [isAdding, setIsAdding] = useState(false);
   const [selectedDashboard, setSelectedDashboard] = useState<string | null>(
     null
   );
@@ -103,11 +197,27 @@ export function AddWidgetSelectorDialog({
     },
   });
 
-  const handleAdd = () => {
-    if (selectedWidget) {
-      onAdd(selectedWidget);
-      setSelectedWidget(null);
+  const toggleSelectedWidget = (slug: string) => {
+    setSelectedWidgets((prev) => {
+      const next = new Set(prev);
+      if (next.has(slug)) {
+        next.delete(slug);
+      } else {
+        next.add(slug);
+      }
+      return next;
+    });
+  };
+
+  const handleAdd = async () => {
+    if (selectedWidgets.size === 0 || isAdding) return;
+    setIsAdding(true);
+    try {
+      await onAdd(Array.from(selectedWidgets));
+      setSelectedWidgets(new Set());
       setOpenWidgets(false);
+    } finally {
+      setIsAdding(false);
     }
   };
 
@@ -138,98 +248,169 @@ export function AddWidgetSelectorDialog({
         </DropdownMenuContent>
       </DropdownMenu>
 
-      {/* Diálogo de Adicionar Widgets */}
-      <Dialog open={openWidgets} onOpenChange={setOpenWidgets}>
-        <DialogContent className="sm:max-w-[600px]">
-          <DialogHeader>
-            <DialogTitle>{tWidget('title')}</DialogTitle>
-            <DialogDescription>{tWidget('description')}</DialogDescription>
-          </DialogHeader>
-          <ScrollArea className="max-h-[400px] pr-4">
-            {isLoading ? (
-              <div className="grid gap-3">
-                <Skeleton className="h-24 w-full" />
-                <Skeleton className="h-24 w-full" />
-                <Skeleton className="h-24 w-full" />
-              </div>
-            ) : (
-              <div className="grid gap-3">
-                {availableComponents.length === 0 ? (
-                  <div className="flex min-h-[200px] flex-col items-center justify-center text-center">
-                    <p className="text-muted-foreground text-sm">
-                      {tWidget('noComponentsAvailable')}
-                    </p>
+      {/* Sheet de Adicionar Widgets */}
+      <Sheet
+        open={openWidgets}
+        onOpenChange={(open) => {
+          setOpenWidgets(open);
+          if (!open) {
+            setSelectedWidgets(new Set());
+          }
+        }}
+      >
+        <SheetContent side="right" className="w-full p-0 sm:max-w-4xl">
+          <div className="flex h-full flex-col">
+            <SheetHeader className="border-b px-6 py-5 text-left">
+              <SheetTitle>{tWidget('title')}</SheetTitle>
+              <SheetDescription>
+                {tWidget('selectedOfTotal', {
+                  selected: selectedWidgets.size,
+                  total: totalItems,
+                })}
+              </SheetDescription>
+            </SheetHeader>
+
+            <div className="grid min-h-0 flex-1 gap-4 p-4">
+              <ScrollArea className="min-h-0 pr-4">
+                {isLoading ? (
+                  <div className="grid gap-3">
+                    <Skeleton className="h-28 w-full" />
+                    <Skeleton className="h-28 w-full" />
+                    <Skeleton className="h-28 w-full" />
                   </div>
                 ) : (
-                  availableComponents.map((component) => {
-                    const name =
-                      component.dashboard_component_locale?.[0]?.name ||
-                      component.slug;
-                    return (
-                      <Card
-                        key={component.slug}
-                        className={cn(
-                          'cursor-pointer py-4 transition-colors hover:bg-accent',
-                          selectedWidget === component.slug &&
-                            'border-primary bg-accent'
-                        )}
-                        onClick={() => setSelectedWidget(component.slug)}
-                      >
-                        <CardHeader>
-                          <div className="flex items-start gap-3">
-                            <div className="bg-primary/10 flex size-10 items-center justify-center rounded-lg">
-                              <IconPlus className="text-primary size-5" />
-                            </div>
-                            <div className="flex-1">
-                              <CardTitle className="text-base">
-                                {name}
-                              </CardTitle>
-                              <CardDescription className="text-sm">
-                                {tWidget('dimensions')}: {component.width}x
-                                {component.height} |
-                                {component.is_resizable
-                                  ? ` ${tWidget('resizable')}`
-                                  : ` ${tWidget('fixedSize')}`}
-                              </CardDescription>
+                  <div className="grid gap-3">
+                    {availableComponents.length === 0 ? (
+                      <div className="flex min-h-55 flex-col items-center justify-center rounded-xl border border-dashed text-center">
+                        <p className="text-sm text-muted-foreground">
+                          {tWidget('noComponentsAvailable')}
+                        </p>
+                      </div>
+                    ) : (
+                      availableComponents.map((component) => {
+                        const name =
+                          component.dashboard_component_locale?.[0]?.name ||
+                          component.slug;
+                        const selectionKey = getWidgetLookupKey(
+                          component.slug,
+                          component.library_slug
+                        );
+
+                        return (
+                          <Card
+                            key={selectionKey}
+                            className={cn(
+                              'cursor-pointer border p-4 transition-all hover:border-primary/40 hover:bg-accent/40',
+                              selectedWidgets.has(selectionKey) &&
+                                'border-primary bg-accent/50'
+                            )}
+                            onClick={() => toggleSelectedWidget(selectionKey)}
+                          >
+                            <div className="grid gap-3 lg:grid-cols-[minmax(0,1fr)_220px]">
+                              <div className="flex items-start gap-3">
+                                <div className="bg-primary/10 text-primary flex size-10 items-center justify-center rounded-xl">
+                                  <IconLayoutDashboard className="size-5" />
+                                </div>
+                                <div className="min-w-0 flex-1">
+                                  <CardTitle className="truncate text-base">
+                                    {name}
+                                  </CardTitle>
+                                  <CardDescription className="mt-1 text-xs">
+                                    {selectionKey}
+                                  </CardDescription>
+                                  <div className="mt-3 flex flex-wrap items-center gap-2">
+                                    <Badge
+                                      variant="secondary"
+                                      className="text-[11px]"
+                                    >
+                                      {tWidget('dimensions')}: {component.width}
+                                      x{component.height}
+                                    </Badge>
+                                    <Badge
+                                      variant="outline"
+                                      className="text-[11px]"
+                                    >
+                                      {component.is_resizable
+                                        ? tWidget('resizable')
+                                        : tWidget('fixedSize')}
+                                    </Badge>
+                                  </div>
+                                  <div className="mt-3">
+                                    <Button
+                                      type="button"
+                                      size="sm"
+                                      className="cursor-pointer"
+                                      onClick={(event) => {
+                                        event.stopPropagation();
+                                        toggleSelectedWidget(selectionKey);
+                                      }}
+                                    >
+                                      {selectedWidgets.has(selectionKey)
+                                        ? tWidget('selected')
+                                        : tWidget('select')}
+                                    </Button>
+                                  </div>
+                                </div>
+                              </div>
+                              <div className="hidden lg:block">
+                                <WidgetPreview
+                                  name={name}
+                                  slug={component.slug}
+                                  width={component.width}
+                                  height={component.height}
+                                  isResizable={component.is_resizable}
+                                  resizableLabel={tWidget('resizable')}
+                                  fixedLabel={tWidget('fixedSize')}
+                                />
+                              </div>
                             </div>
-                          </div>
-                        </CardHeader>
-                      </Card>
-                    );
-                  })
+                          </Card>
+                        );
+                      })
+                    )}
+                  </div>
                 )}
+              </ScrollArea>
+            </div>
+
+            <SheetFooter className="border-t px-6 py-4">
+              <div className="flex w-full flex-col gap-4">
+                <PaginationFooter
+                  currentPage={currentPage}
+                  pageSize={pageSize}
+                  totalItems={totalItems}
+                  selectedCount={selectedWidgets.size}
+                  onPageChange={onPageChange}
+                  onPageSizeChange={onPageSizeChange}
+                />
+                <div className="flex justify-end">
+                  <Button
+                    type="button"
+                    className="cursor-pointer"
+                    onClick={handleAdd}
+                    disabled={
+                      selectedWidgets.size === 0 || isLoading || isAdding
+                    }
+                  >
+                    {tWidget('add')}
+                  </Button>
+                </div>
               </div>
-            )}
-          </ScrollArea>
-          <DialogFooter>
-            <Button
-              type="button"
-              variant="outline"
-              onClick={() => setOpenWidgets(false)}
-            >
-              {tWidget('cancel')}
-            </Button>
-            <Button
-              type="button"
-              onClick={handleAdd}
-              disabled={!selectedWidget || isLoading}
-            >
-              {tWidget('add')}
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
+            </SheetFooter>
+          </div>
+        </SheetContent>
+      </Sheet>
 
       {/* Diálogo de Trocar Dashboard */}
       <Dialog open={openDashboards} onOpenChange={setOpenDashboards}>
-        <DialogContent className="sm:max-w-[600px]">
+        <DialogContent className="sm:max-w-150">
           <DialogHeader>
             <DialogTitle>{tMenu('selectDashboardTitle')}</DialogTitle>
             <DialogDescription>
               {tMenu('selectDashboardDescription')}
             </DialogDescription>
           </DialogHeader>
-          <ScrollArea className="max-h-[400px] pr-4">
+          <ScrollArea className="max-h-100 pr-4">
             {isLoadingDashboards ? (
               <div className="grid gap-3">
                 <Skeleton className="h-24 w-full" />
@@ -239,7 +420,7 @@ export function AddWidgetSelectorDialog({
             ) : (
               <div className="grid gap-3">
                 {!userDashboards || userDashboards.length === 0 ? (
-                  <div className="flex min-h-[200px] flex-col items-center justify-center text-center">
+                  <div className="flex min-h-50 flex-col items-center justify-center text-center">
                     <p className="text-muted-foreground text-sm">
                       {tMenu('noDashboardsAvailable')}
                     </p>

package/hedhog/frontend/app/dashboard/components/widgets/core..gitkeep.ejs

@@ -0,0 +1,11 @@
+Reserved for widget templates contributed directly by this library.
+
+Expected naming convention:
+- core widgets: <slug>.tsx.ejs (legacy-compatible)
+- cross-library-safe widgets: <library>.<slug>.tsx.ejs
+
+The Hedhog CLI should copy these templates to:
+apps/admin/src/app/(app)/(libraries)/core/dashboard/components/widgets/
+
+Optional static previews can follow the same namespaced slug and be copied to:
+apps/admin/public/libraries/core/dashboard-previews/

package/hedhog/frontend/app/dashboard/components/widgets/core.account-security.tsx.ejs

@@ -0,0 +1,192 @@
+'use client';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { Progress } from '@/components/ui/progress';
+import { useWidgetData } from '@/hooks/use-widget-data';
+import type { AllWidgetsData } from '@/types/widget-data';
+import {
+  AlertTriangle,
+  CheckCircle2,
+  ChevronRight,
+  Lock,
+  Mail,
+  ShieldCheck,
+  Smartphone,
+} from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useEffect, useState } from 'react';
+
+import type { AccountSecurityData } from '@/types/widget-data';
+import { useRouter } from 'next/navigation';
+import { WidgetWrapper } from '../widget-wrapper';
+
+const ICON_MAP: Record<string, React.ElementType> = {
+  password: Lock,
+  '2fa': Smartphone,
+  email: Mail,
+  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();
+  const [score, setScore] = useState(0);
+
+  useEffect(() => {
+    const timer = setTimeout(() => setScore(data.score), 300);
+    return () => clearTimeout(timer);
+  }, [data.score]);
+
+  const scoreColor =
+    score >= 80
+      ? 'text-emerald-600'
+      : score >= 50
+        ? 'text-amber-600'
+        : 'text-red-600';
+
+  const progressColor =
+    score >= 80
+      ? 'hsl(160, 84%, 39%)'
+      : score >= 50
+        ? 'hsl(38, 92%, 50%)'
+        : 'hsl(0, 84%, 60%)';
+
+  return (
+    <Card className="flex h-full min-h-0 flex-col overflow-hidden">
+      <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 className="text-xs sm:text-sm">
+              {t('description')}
+            </CardDescription>
+          </div>
+        </div>
+      </CardHeader>
+      <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-2xl font-bold tracking-tight sm:text-3xl ${scoreColor}`}
+            >
+              {score}
+            </span>
+            <span className="text-xs text-muted-foreground sm:text-sm">
+              /100
+            </span>
+          </div>
+          <Progress
+            value={score}
+            className="h-1.5 w-full max-w-70"
+            style={
+              {
+                '--progress-foreground': progressColor,
+              } as any
+            }
+          />
+          <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">
+          {data.checks.map((item) => {
+            const Icon = ICON_MAP[item.id] ?? ShieldCheck;
+            return (
+              <button
+                type="button"
+                key={item.id}
+                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-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 ${
+                      item.enabled
+                        ? 'text-emerald-600 dark:text-emerald-400'
+                        : 'text-muted-foreground'
+                    }`}
+                  />
+                </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-[12px] font-medium text-foreground sm:text-[13px]">
+                      {t(`labels.${item.labelKey}` as any) || item.labelKey}
+                    </span>
+                    {item.enabled ? (
+                      <CheckCircle2 className="h-3.5 w-3.5 text-emerald-500" />
+                    ) : (
+                      <AlertTriangle className="h-3.5 w-3.5 text-amber-500" />
+                    )}
+                  </div>
+                  <span className="text-[10px] text-muted-foreground sm:text-[11px]">
+                    {t(`descriptions.${item.descriptionKey}` as any) ||
+                      item.descriptionKey}
+                  </span>
+                </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>
+      </CardContent>
+    </Card>
+  );
+}
+
+interface AccountSecurityProps {
+  widget?: { name?: string };
+  onRemove?: () => void;
+}
+
+export default function AccountSecurity({
+  widget,
+  onRemove,
+}: AccountSecurityProps) {
+  const { data, isLoading, isError, isAccessDenied } = useWidgetData<
+    AllWidgetsData,
+    AccountSecurityData
+  >({
+    endpoint: '/dashboard-core/widgets/me',
+    queryKey: 'widget-me',
+    select: (d) => d.accountSecurity,
+  });
+
+  return (
+    <WidgetWrapper
+      isLoading={isLoading}
+      isError={isError}
+      isAccessDenied={isAccessDenied}
+      widgetName={widget?.name ?? 'account-security'}
+      onRemove={onRemove}
+    >
+      {data && <AccountSecurityContent data={data} />}
+    </WidgetWrapper>
+  );
+}