@hed-hog/core 0.0.185 → 0.0.190

package/hedhog/frontend/app/configurations/layout.tsx.ejs

@@ -0,0 +1,316 @@
+'use client';
+
+import { PageHeader } from '@/components/entity-list';
+import { Button } from '@/components/ui/button';
+import { Checkbox } from '@/components/ui/checkbox';
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { cn } from '@/lib/utils';
+import { PaginatedResult } from '@hed-hog/api-pagination';
+import { SettingGroup } from '@hed-hog/api-types';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import { Download, MenuIcon, Upload } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { useCallback, useRef, useState } from 'react';
+
+interface SettingsValidation {
+  totalSettings: number;
+  validSettings: number;
+  invalidSlugs: string[];
+  validSlugs: string[];
+  fileData: any[];
+}
+
+interface IProps {
+  children: React.ReactNode;
+}
+
+export default function ConfigurationsLayout({ children }: IProps) {
+  const t = useTranslations('core.Configurations');
+  const pathname = usePathname();
+  const { request, currentLocaleCode, showToastHandler } = useApp();
+
+  const { data: settingGroups, refetch } = useQuery<
+    PaginatedResult<SettingGroup>
+  >({
+    queryKey: ['setting-groups', currentLocaleCode],
+    queryFn: async () => {
+      const response = await request<PaginatedResult<SettingGroup>>({
+        url: '/setting/group',
+      });
+      return response.data;
+    },
+  });
+
+  const [exportDialogOpen, setExportDialogOpen] = useState(false);
+  const [includeSecrets, setIncludeSecrets] = useState(false);
+  const [importDialogOpen, setImportDialogOpen] = useState(false);
+  const [importData, setImportData] = useState<SettingsValidation | null>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleExport = (includeSecrets: boolean) => {
+    request({
+      url: `/setting/export?secrets=${includeSecrets}`,
+      responseType: 'blob',
+    })
+      .then((response) => {
+        const blob = new Blob([response.data], {
+          type: 'application/octet-stream',
+        });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = 'settings.hedhog';
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        URL.revokeObjectURL(url);
+      })
+      .catch(() => {
+        showToastHandler('error', t('exportFailed'));
+      });
+  };
+
+  const handleImportValidate = async (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    const file = event.target.files?.[0];
+    if (!file) return;
+
+    event.target.value = '';
+    const formData = new FormData();
+    formData.append('file', file);
+
+    try {
+      const response = await request<{
+        totalSettings: number;
+        validSettings: number;
+        invalidSlugs: string[];
+        validSlugs: string[];
+        fileData: any[];
+      }>({
+        url: '/setting/import',
+        method: 'POST',
+        data: formData,
+        headers: {
+          'Content-Type': 'multipart/form-data',
+        },
+      });
+
+      setImportData(response.data);
+      setImportDialogOpen(true);
+    } catch (error) {
+      showToastHandler('error', t('importValidateFailed'));
+    }
+  };
+
+  const handleConfirmImport = useCallback(async () => {
+    if (!importData) return;
+
+    try {
+      await request({
+        url: '/setting/import/confirm',
+        method: 'POST',
+        data: {
+          settings: importData.fileData,
+        },
+      });
+      refetch().then(() => {
+        showToastHandler('success', t('importSuccess'));
+        setImportDialogOpen(false);
+        setImportData(null);
+        if (typeof window !== 'undefined') {
+          window.location.reload();
+        }
+      });
+    } catch (error) {
+      showToastHandler('error', t('importFailed'));
+    }
+  }, [importData, request, refetch, showToastHandler, t]);
+
+  return (
+    <div className="flex flex-col h-screen px-4">
+      <PageHeader
+        breadcrumbs={[
+          { label: t('breadcrumbHome'), href: '/' },
+          { label: t('breadcrumbTitle') },
+        ]}
+        title={t('title')}
+        description={t('description')}
+        extraContent={
+          <>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="outline" size="icon">
+                  <MenuIcon />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                <DropdownMenuItem onClick={() => setExportDialogOpen(true)}>
+                  <span className="flex items-center gap-2">
+                    <Download size={16} /> {t('menuExport')}
+                  </span>
+                </DropdownMenuItem>
+                <DropdownMenuItem onClick={() => fileInputRef.current?.click()}>
+                  <span className="flex items-center gap-2">
+                    <Upload size={16} /> {t('menuImport')}
+                  </span>
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+
+            <Dialog open={exportDialogOpen} onOpenChange={setExportDialogOpen}>
+              <DialogContent className="max-w-sm">
+                <DialogHeader>
+                  <DialogTitle>{t('exportDialogTitle')}</DialogTitle>
+                  <DialogDescription>
+                    {t('exportDialogDescription')}
+                  </DialogDescription>
+                </DialogHeader>
+                <div className="flex flex-col gap-4 py-4">
+                  <label className="flex items-center gap-2">
+                    <Checkbox
+                      checked={includeSecrets}
+                      onCheckedChange={(checked) =>
+                        setIncludeSecrets(checked === true)
+                      }
+                    />
+                    {t('exportIncludeSecrets')}
+                  </label>
+                </div>
+                <DialogFooter>
+                  <DialogClose asChild>
+                    <Button variant="outline">{t('exportCancel')}</Button>
+                  </DialogClose>
+                  <Button
+                    onClick={() => {
+                      setExportDialogOpen(false);
+                      handleExport(includeSecrets);
+                    }}
+                  >
+                    {t('exportButton')}
+                  </Button>
+                </DialogFooter>
+              </DialogContent>
+            </Dialog>
+
+            <Dialog open={importDialogOpen} onOpenChange={setImportDialogOpen}>
+              <DialogContent className="max-w-md">
+                <DialogHeader>
+                  <DialogTitle>{t('importDialogTitle')}</DialogTitle>
+                  <DialogDescription>
+                    {t('importDialogDescription')}
+                  </DialogDescription>
+                </DialogHeader>
+                {importData && (
+                  <div className="flex flex-col gap-4 py-4">
+                    <div className="rounded-lg border p-4 space-y-2">
+                      <div className="flex justify-between">
+                        <span className="text-sm font-medium">
+                          {t('importTotalSettings')}
+                        </span>
+                        <span className="text-sm">
+                          {importData.totalSettings}
+                        </span>
+                      </div>
+                      <div className="flex justify-between">
+                        <span className="text-sm font-medium text-green-600">
+                          {t('importValidSettings')}
+                        </span>
+                        <span className="text-sm text-green-600">
+                          {importData.validSettings}
+                        </span>
+                      </div>
+                      {importData.invalidSlugs.length > 0 && (
+                        <div className="flex justify-between">
+                          <span className="text-sm font-medium text-orange-600">
+                            {t('importInvalidSettings')}
+                          </span>
+                          <span className="text-sm text-orange-600">
+                            {importData.invalidSlugs.length}
+                          </span>
+                        </div>
+                      )}
+                    </div>
+
+                    {importData.invalidSlugs.length > 0 && (
+                      <div className="rounded-lg border border-orange-200 bg-orange-50 dark:border-orange-700 dark:bg-orange-900 p-4 space-y-2">
+                        <p className="text-sm font-medium text-orange-900 dark:text-orange-200">
+                          {t('importInvalidSettingsLabel')}
+                        </p>
+                        <div className="max-h-32 overflow-y-auto">
+                          <ul className="text-xs text-orange-800 dark:text-orange-100 space-y-1">
+                            {importData.invalidSlugs.map((slug) => (
+                              <li key={slug} className="font-mono">
+                                • {slug}
+                              </li>
+                            ))}
+                          </ul>
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                )}
+                <DialogFooter>
+                  <DialogClose asChild>
+                    <Button variant="outline">{t('importCancel')}</Button>
+                  </DialogClose>
+                  <Button onClick={handleConfirmImport}>
+                    {t('importButton')}
+                  </Button>
+                </DialogFooter>
+              </DialogContent>
+            </Dialog>
+          </>
+        }
+      />
+
+      <div className="border-b border-border mb-6">
+        <nav className="flex gap-6" aria-label="Configuration tabs">
+          {(settingGroups?.data || []).map((item: SettingGroup) => {
+            const isActive = pathname === `/configurations/${item.slug}`;
+            return (
+              <Link
+                key={item.slug}
+                href={item.slug}
+                className={cn(
+                  'pb-3 px-1 text-sm font-medium border-b-2 transition-colors',
+                  isActive
+                    ? 'border-primary text-primary'
+                    : 'border-transparent text-muted-foreground hover:text-foreground hover:border-muted-foreground'
+                )}
+              >
+                {item.name}
+              </Link>
+            );
+          })}
+        </nav>
+      </div>
+
+      <div className="pb-[100px]">{children}</div>
+
+      <input
+        ref={fileInputRef}
+        type="file"
+        accept=".hedhog"
+        className="hidden"
+        onChange={handleImportValidate}
+      />
+    </div>
+  );
+}

package/hedhog/frontend/app/configurations/page.tsx.ejs

@@ -0,0 +1,35 @@
+'use client';
+
+import { Loading } from '@/components/loading';
+import { PaginatedResult } from '@hed-hog/api-pagination';
+import { SettingGroup } from '@hed-hog/api-types';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import { useRouter } from 'next/navigation';
+import { useEffect } from 'react';
+
+export default function Page() {
+  const router = useRouter();
+  const { request, currentLocaleCode } = useApp();
+
+  const { data: settingGroups } = useQuery<PaginatedResult<SettingGroup>>({
+    queryKey: ['setting-groups', currentLocaleCode],
+    queryFn: async () => {
+      const response = await request<PaginatedResult<SettingGroup>>({
+        url: '/setting/group',
+      });
+      return response.data;
+    },
+  });
+
+  useEffect(() => {
+    if ((settingGroups?.data || []).length > 0) {
+      router.push(`/configurations/${settingGroups.data[0].slug}`);
+    }
+  }, [settingGroups]);
+
+  return (
+    <div className="flex h-full w-full items-center justify-center">
+      <Loading />
+    </div>
+  );
+}

package/hedhog/frontend/app/dashboard/[slug]/dashboard-content.tsx.ejs

@@ -0,0 +1,351 @@
+'use client';
+
+import {
+  AddWidgetSelectorDialog,
+  DraggableGrid,
+  LayoutItem,
+} from '@/components/dashboard';
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from '@/components/ui/breadcrumb';
+import { Button } from '@/components/ui/button';
+import { Separator } from '@/components/ui/separator';
+import { SidebarTrigger } from '@/components/ui/sidebar';
+import { Skeleton } from '@/components/ui/skeleton';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import { IconDeviceFloppy } from '@tabler/icons-react';
+import { useTranslations } from 'next-intl';
+import { useRouter } from 'next/navigation';
+import { useCallback, useEffect, useState } from 'react';
+import '../dashboard.css';
+import {
+  DashboardAccessResponse,
+  DashboardComponent,
+  WidgetLayout,
+} from './types';
+import { WidgetRenderer } from './widget-renderer';
+
+interface DashboardContentProps {
+  dashboardSlug: string;
+}
+
+export const DashboardContent = ({ dashboardSlug }: DashboardContentProps) => {
+  const t = useTranslations('core.DashboardPage');
+  const { request } = useApp();
+  const router = useRouter();
+
+  const [layout, setLayout] = useState<LayoutItem[]>([]);
+  const [widgets, setWidgets] = useState<WidgetLayout[]>([]);
+  const [hasChanges, setHasChanges] = useState(false);
+  const [isSaving, setIsSaving] = useState(false);
+
+  const { data: dashboardAccess, isLoading: isCheckingAccess } =
+    useQuery<DashboardAccessResponse>({
+      queryKey: ['dashboard-access', dashboardSlug],
+      queryFn: async () => {
+        const { data } = await request<DashboardAccessResponse>({
+          url: `/dashboard-core/access/${dashboardSlug}`,
+          method: 'GET',
+        });
+        return data;
+      },
+    });
+
+  useEffect(() => {
+    if (dashboardAccess && !dashboardAccess.hasAccess) {
+      router.replace('/dashboard/default');
+    }
+  }, [dashboardAccess, router]);
+
+  const {
+    data: availableComponents,
+    isLoading: isLoadingComponents,
+    refetch: refetchComponents,
+  } = useQuery<any>({
+    queryKey: ['dashboard-components'],
+    queryFn: async () => {
+      const { data } = await request<any>({
+        url: '/dashboard-component/user',
+        method: 'GET',
+      });
+      return data.data;
+    },
+    enabled: dashboardAccess?.hasAccess ?? false,
+  });
+
+  const {
+    data: userLayout,
+    isLoading: isLoadingLayout,
+    refetch: refetchLayout,
+  } = useQuery<WidgetLayout[]>({
+    queryKey: ['dashboard-layout', dashboardSlug],
+    queryFn: async () => {
+      const { data } = await request<WidgetLayout[]>({
+        url: `/dashboard-core/layout/${dashboardSlug}`,
+        method: 'GET',
+      });
+      return data;
+    },
+    enabled: dashboardAccess?.hasAccess ?? false,
+  });
+
+  useEffect(() => {
+    if (userLayout) {
+      if (userLayout.length > 0) {
+        const gridLayout = userLayout.map((item) => ({
+          i: item.i,
+          x: item.x,
+          y: item.y,
+          w: item.w,
+          h: item.h,
+          minW: item.minW || 1,
+          maxW: item.maxW || 12,
+          minH: item.minH || 1,
+          maxH: item.maxH || 10,
+          static: false,
+        }));
+
+        setLayout(gridLayout);
+        setWidgets(userLayout);
+      } else {
+        setLayout([]);
+        setWidgets([]);
+      }
+      setHasChanges(false);
+    }
+  }, [userLayout]);
+
+  const componentsToFilter = availableComponents?.data?.length
+    ? availableComponents.data
+    : availableComponents || [];
+
+  const filteredComponents =
+    componentsToFilter.filter(
+      (component: DashboardComponent) =>
+        !widgets.some((widget) => widget.slug === component.slug)
+    ) || [];
+
+  const handleLayoutChange = useCallback((newLayout: LayoutItem[]) => {
+    setLayout((prevLayout) => {
+      const hasRealChange =
+        JSON.stringify(prevLayout) !== JSON.stringify(newLayout);
+      if (hasRealChange) {
+        setHasChanges(true);
+        return newLayout;
+      }
+      return prevLayout;
+    });
+  }, []);
+
+  const handleSaveLayout = async () => {
+    setIsSaving(true);
+    try {
+      await request({
+        url: `/dashboard-core/layout/${dashboardSlug}`,
+        method: 'POST',
+        data: { layout },
+      });
+      setHasChanges(false);
+    } catch (error) {
+      console.error('❌ Erro ao salvar layout:', error);
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const handleAddWidget = async (slug: string) => {
+    try {
+      await request({
+        url: `/dashboard-core/widget/${dashboardSlug}`,
+        method: 'POST',
+        data: { componentSlug: slug },
+      });
+
+      await new Promise((resolve) => setTimeout(resolve, 300));
+      await Promise.all([refetchLayout(), refetchComponents()]);
+      setHasChanges(false);
+    } catch (error) {
+      console.error('Erro ao adicionar widget:', error);
+    }
+  };
+
+  const handleRemoveWidget = async (widgetId: string) => {
+    try {
+      await request({
+        url: `/dashboard-core/widget/${dashboardSlug}/${widgetId}`,
+        method: 'DELETE',
+      });
+      await Promise.all([refetchLayout(), refetchComponents()]);
+      setHasChanges(false);
+    } catch (error) {
+      console.error('Erro ao remover widget:', error);
+    }
+  };
+
+  const renderWidget = (widget: WidgetLayout) => {
+    return (
+      <WidgetRenderer
+        widget={widget}
+        onRemove={() => handleRemoveWidget(widget.i)}
+      />
+    );
+  };
+
+  if (isCheckingAccess || isLoadingLayout) {
+    return (
+      <>
+        <header className="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12">
+          <div className="flex w-full items-center justify-between gap-2 px-4">
+            <div className="flex items-center gap-2">
+              <SidebarTrigger className="-ml-1" />
+              <Separator
+                orientation="vertical"
+                className="mr-2 data-[orientation=vertical]:h-4"
+              />
+              <Breadcrumb>
+                <BreadcrumbList>
+                  <BreadcrumbItem className="hidden md:block">
+                    <BreadcrumbLink href="#">{t('dashboard')}</BreadcrumbLink>
+                  </BreadcrumbItem>
+                  <BreadcrumbSeparator className="hidden md:block" />
+                  <BreadcrumbItem>
+                    <BreadcrumbPage>{t('overview')}</BreadcrumbPage>
+                  </BreadcrumbItem>
+                </BreadcrumbList>
+              </Breadcrumb>
+            </div>
+          </div>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4 pt-0">
+          <Skeleton className="h-32 w-full" />
+          <Skeleton className="h-32 w-full" />
+          <Skeleton className="h-64 w-full" />
+        </div>
+      </>
+    );
+  }
+
+  if (!dashboardAccess?.hasAccess) {
+    return (
+      <>
+        <header className="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12">
+          <div className="flex w-full items-center justify-between gap-2 px-4">
+            <div className="flex items-center gap-2">
+              <SidebarTrigger className="-ml-1" />
+              <Separator
+                orientation="vertical"
+                className="mr-2 data-[orientation=vertical]:h-4"
+              />
+              <Breadcrumb>
+                <BreadcrumbList>
+                  <BreadcrumbItem className="hidden md:block">
+                    <BreadcrumbLink href="#">{t('dashboard')}</BreadcrumbLink>
+                  </BreadcrumbItem>
+                  <BreadcrumbSeparator className="hidden md:block" />
+                  <BreadcrumbItem>
+                    <BreadcrumbPage>{t('accessDenied')}</BreadcrumbPage>
+                  </BreadcrumbItem>
+                </BreadcrumbList>
+              </Breadcrumb>
+            </div>
+          </div>
+        </header>
+        <div className="flex flex-1 flex-col items-center justify-center gap-4 p-4 pt-0">
+          <div className="text-center">
+            <h2 className="text-2xl font-bold">{t('accessDenied')}</h2>
+            <p className="text-muted-foreground mt-2">
+              {t('noAccessToDashboard')}
+            </p>
+          </div>
+        </div>
+      </>
+    );
+  }
+
+  const dashboardName = dashboardAccess?.dashboard?.name || dashboardSlug;
+
+  return (
+    <>
+      <header className="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12">
+        <div className="flex w-full items-center justify-between gap-2 px-4">
+          <div className="flex items-center gap-2">
+            <SidebarTrigger className="-ml-1" />
+            <Separator
+              orientation="vertical"
+              className="mr-2 data-[orientation=vertical]:h-4"
+            />
+            <Breadcrumb>
+              <BreadcrumbList>
+                <BreadcrumbItem className="hidden md:block">
+                  <BreadcrumbLink href="#">{t('dashboard')}</BreadcrumbLink>
+                </BreadcrumbItem>
+                <BreadcrumbSeparator className="hidden md:block" />
+                <BreadcrumbItem>
+                  <BreadcrumbPage>{dashboardName}</BreadcrumbPage>
+                </BreadcrumbItem>
+              </BreadcrumbList>
+            </Breadcrumb>
+          </div>
+          <div className="flex items-center gap-2">
+            {hasChanges && (
+              <Button
+                size="sm"
+                variant="default"
+                className="gap-2"
+                onClick={handleSaveLayout}
+                disabled={isSaving}
+              >
+                <IconDeviceFloppy className="size-4" />
+                {isSaving ? t('saving') : t('saveLayout')}
+              </Button>
+            )}
+            <AddWidgetSelectorDialog
+              availableComponents={filteredComponents}
+              isLoading={isLoadingComponents}
+              onAdd={handleAddWidget}
+              currentSlug={dashboardSlug}
+            />
+          </div>
+        </div>
+      </header>
+      <div className="flex flex-1 flex-col gap-4 overflow-auto p-4 pt-0">
+        {widgets.length > 0 ? (
+          <div className="min-h-[600px]">
+            <DraggableGrid
+              layout={layout}
+              onLayoutChange={handleLayoutChange}
+              cols={12}
+              rowHeight={80}
+              isDraggable={true}
+              isResizable={true}
+            >
+              {widgets.map((widget) => (
+                <div key={widget.i}>{renderWidget(widget)}</div>
+              ))}
+            </DraggableGrid>
+          </div>
+        ) : (
+          <div className="flex min-h-[400px] flex-col items-center justify-center rounded-lg border border-dashed p-8 text-center">
+            <h3 className="text-lg font-semibold">{t('noWidgetAdded')}</h3>
+            <p className="text-muted-foreground mt-2 text-sm">
+              {t('startAddingWidgets')}
+            </p>
+            <div className="mt-4">
+              <AddWidgetSelectorDialog
+                availableComponents={filteredComponents}
+                isLoading={isLoadingComponents}
+                onAdd={handleAddWidget}
+                currentSlug={dashboardSlug}
+              />
+            </div>
+          </div>
+        )}
+      </div>
+    </>
+  );
+};