@hed-hog/core 0.0.185 → 0.0.190

package/hedhog/frontend/app/dashboard/management/tabs/components-tab.tsx.ejs

@@ -0,0 +1,753 @@
+'use client';
+
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
+import { Button } from '@/components/ui/button';
+import { Checkbox } from '@/components/ui/checkbox';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { useDebounce } from '@/hooks/use-debounce';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import * as TablerIcons from '@tabler/icons-react';
+import {
+  IconChevronLeft,
+  IconChevronRight,
+  IconChevronsLeft,
+  IconChevronsRight,
+  IconEdit,
+  IconGlobe,
+  IconPlus,
+  IconTrash,
+} from '@tabler/icons-react';
+import { useTranslations } from 'next-intl';
+import { useState } from 'react';
+import { toast } from 'sonner';
+
+interface Component {
+  id: number;
+  slug: string;
+  path: string;
+  min_width: number | null;
+  max_width: number | null;
+  min_height: number | null;
+  max_height: number | null;
+  width: number;
+  height: number;
+  is_resizable: boolean;
+  stat_key?: string;
+  icon?: string;
+  color?: string;
+  dashboard_component_locale: Array<{
+    locale: { code: string };
+    name: string;
+    description?: string;
+  }>;
+}
+
+export function ComponentsTab() {
+  const t = useTranslations('core.DashboardManagement');
+  const { request, locales, currentLocaleCode } = useApp();
+  const [open, setOpen] = useState(false);
+  const [selectedComponent, setSelectedComponent] = useState<any | null>(null);
+  const [isNew, setIsNew] = useState(false);
+  const [selectedLocale, setSelectedLocale] = useState(currentLocaleCode);
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [componentToDelete, setComponentToDelete] = useState<number | null>(
+    null
+  );
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(10);
+  const [searchQuery, setSearchQuery] = useState('');
+  const debouncedSearch = useDebounce(searchQuery, 500);
+
+  const renderIcon = (iconName?: string) => {
+    if (!iconName) {
+      return <TablerIcons.IconBox className="h-4 w-4" />;
+    }
+
+    const toPascalCase = (str: string) =>
+      str.replace(/(^\w|-\w)/g, (match) =>
+        match.replace('-', '').toUpperCase()
+      );
+
+    const pascalName = toPascalCase(String(iconName));
+
+    let IconComponent = (TablerIcons as any)[`Icon${pascalName}`];
+    if (!IconComponent) {
+      IconComponent = (TablerIcons as any)[`Icon${pascalName}Filled`];
+    }
+    if (!IconComponent) {
+      IconComponent = (TablerIcons as any)[`Icon${pascalName}Circle`];
+    }
+
+    if (IconComponent) {
+      return <IconComponent className="h-4 w-4" />;
+    }
+
+    return <TablerIcons.IconBox className="h-4 w-4" />;
+  };
+
+  const {
+    data: paginatedData,
+    isLoading,
+    refetch,
+  } = useQuery<{ data: Component[]; total: number }>({
+    queryKey: [
+      'dashboard-components',
+      page,
+      pageSize,
+      debouncedSearch,
+      currentLocaleCode,
+    ],
+    queryFn: async () => {
+      const params = new URLSearchParams();
+      params.set('page', String(page));
+      params.set('pageSize', String(pageSize));
+      if (debouncedSearch) params.set('search', debouncedSearch);
+
+      const response = await request<{ data: Component[]; total: number }>({
+        url: `/dashboard-component?${params.toString()}`,
+        method: 'GET',
+      });
+      return response.data;
+    },
+  });
+
+  const components = paginatedData?.data ?? [];
+  const total = paginatedData?.total ?? 0;
+  const totalPages = Math.ceil(total / pageSize);
+
+  const handleNew = () => {
+    const newComponent: any = {
+      slug: '',
+      path: '',
+      min_width: 2,
+      max_width: 6,
+      min_height: 1,
+      max_height: 2,
+      width: 3,
+      height: 2,
+      is_resizable: true,
+      stat_key: '',
+      icon: '',
+      color: '#3b82f6',
+      locale: {},
+    };
+
+    locales.forEach((locale: any) => {
+      newComponent.locale[locale.code] = { name: '', description: '' };
+    });
+
+    setSelectedComponent(newComponent);
+    setIsNew(true);
+    setSelectedLocale(currentLocaleCode);
+    setOpen(true);
+  };
+
+  const handleEdit = async (component: Component) => {
+    try {
+      const { data } = await request<any>({
+        url: `/dashboard-component/${component.id}`,
+        method: 'GET',
+      });
+
+      const localeData: Record<string, { name: string; description?: string }> =
+        {};
+      if (
+        data.dashboard_component_locale &&
+        Array.isArray(data.dashboard_component_locale)
+      ) {
+        data.dashboard_component_locale.forEach((dl: any) => {
+          const localeCode = locales.find(
+            (l: any) => l.code === dl.locale?.code
+          )?.code;
+          if (localeCode) {
+            localeData[localeCode] = {
+              name: dl.name || '',
+              description: dl.description || '',
+            };
+          }
+        });
+      }
+
+      locales.forEach((locale: any) => {
+        if (!localeData[locale.code]) {
+          localeData[locale.code] = { name: '', description: '' };
+        }
+      });
+
+      setSelectedComponent({
+        ...data,
+        locale: localeData,
+      });
+      setIsNew(false);
+      setSelectedLocale(currentLocaleCode);
+      setOpen(true);
+    } catch (error) {
+      console.error('Erro ao carregar componente:', error);
+      toast.error('Erro ao carregar componente');
+    }
+  };
+
+  const handleSave = async () => {
+    if (!selectedComponent || !selectedComponent.locale) return;
+
+    const payload = {
+      slug: selectedComponent.slug,
+      path: selectedComponent.path,
+      min_width: selectedComponent.min_width || null,
+      max_width: selectedComponent.max_width || null,
+      min_height: selectedComponent.min_height || null,
+      max_height: selectedComponent.max_height || null,
+      width: selectedComponent.width,
+      height: selectedComponent.height,
+      is_resizable: selectedComponent.is_resizable ?? true,
+      stat_key: selectedComponent.stat_key || null,
+      icon: selectedComponent.icon || null,
+      color: selectedComponent.color || null,
+      locale: selectedComponent.locale,
+    };
+
+    try {
+      if (selectedComponent.id) {
+        await request({
+          url: `/dashboard-component/${selectedComponent.id}`,
+          method: 'PATCH',
+          data: payload,
+        });
+        toast.success(t('componentUpdated'));
+      } else {
+        await request({
+          url: '/dashboard-component',
+          method: 'POST',
+          data: payload,
+        });
+        toast.success(t('componentCreated'));
+      }
+
+      setOpen(false);
+      setSelectedComponent(null);
+      refetch();
+    } catch (error) {
+      console.error('Erro ao salvar componente:', error);
+      toast.error('Erro ao salvar componente');
+    }
+  };
+
+  const handleDeleteClick = (id: number) => {
+    setComponentToDelete(id);
+    setDeleteDialogOpen(true);
+  };
+
+  const handleDeleteConfirm = async () => {
+    if (!componentToDelete) return;
+
+    try {
+      await request({
+        url: `/dashboard-component/${componentToDelete}`,
+        method: 'DELETE',
+      });
+      toast.success(t('componentDeleted'));
+      setPage(1);
+      refetch();
+    } catch (error) {
+      console.error('Erro ao excluir componente:', error);
+      toast.error('Erro ao excluir componente');
+    } finally {
+      setDeleteDialogOpen(false);
+      setComponentToDelete(null);
+    }
+  };
+
+  return (
+    <div className="space-y-4">
+      <div className="flex justify-between items-center">
+        <div>
+          <h2 className="text-lg font-semibold">{t('componentsTab')}</h2>
+          <p className="text-muted-foreground text-sm">
+            {t('manageComponents')}
+          </p>
+        </div>
+        <Dialog open={open} onOpenChange={setOpen}>
+          <DialogTrigger asChild>
+            <Button size="sm" className="gap-2" onClick={handleNew}>
+              <IconPlus className="size-4" />
+              {t('newComponent')}
+            </Button>
+          </DialogTrigger>
+          <DialogContent className="max-w-4xl max-h-[95vh] overflow-y-auto">
+            <DialogHeader>
+              <DialogTitle>
+                {isNew ? t('newComponent') : t('editComponent')}
+              </DialogTitle>
+              <DialogDescription>{t('fillComponentData')}</DialogDescription>
+            </DialogHeader>
+            {selectedComponent && (
+              <div className="space-y-4">
+                {!isNew && (
+                  <div className="flex items-center gap-2">
+                    <IconGlobe className="size-4" />
+                    <Select
+                      value={selectedLocale}
+                      onValueChange={setSelectedLocale}
+                    >
+                      <SelectTrigger className="w-[200px]">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {locales.map((locale: any) => (
+                          <SelectItem key={locale.code} value={locale.code}>
+                            {locale.name}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                )}
+                <div className="space-y-2">
+                  <Label htmlFor="slug">{t('slug')}</Label>
+                  <Input
+                    id="slug"
+                    placeholder="total-users"
+                    value={selectedComponent.slug || ''}
+                    onChange={(e) =>
+                      setSelectedComponent({
+                        ...selectedComponent,
+                        slug: e.target.value,
+                      })
+                    }
+                  />
+                </div>
+
+                <div className="space-y-2">
+                  <Label htmlFor="name">{t('name')}</Label>
+                  <Input
+                    id="name"
+                    placeholder="Total de Usuários"
+                    value={
+                      selectedComponent.locale?.[selectedLocale]?.name || ''
+                    }
+                    onChange={(e) =>
+                      setSelectedComponent({
+                        ...selectedComponent,
+                        locale: {
+                          ...selectedComponent.locale,
+                          [selectedLocale]: {
+                            ...selectedComponent.locale?.[selectedLocale],
+                            name: e.target.value,
+                          },
+                        },
+                      })
+                    }
+                  />
+                </div>
+
+                <div className="space-y-2">
+                  <Label htmlFor="description">{t('descriptionLabel')}</Label>
+                  <Input
+                    id="description"
+                    placeholder={t('descriptionPlaceholder')}
+                    value={
+                      selectedComponent.locale?.[selectedLocale]?.description ||
+                      ''
+                    }
+                    onChange={(e) =>
+                      setSelectedComponent({
+                        ...selectedComponent,
+                        locale: {
+                          ...selectedComponent.locale,
+                          [selectedLocale]: {
+                            ...selectedComponent.locale?.[selectedLocale],
+                            description: e.target.value,
+                          },
+                        },
+                      })
+                    }
+                  />
+                </div>
+
+                <div className="rounded-md border p-4 bg-muted/50">
+                  <h4 className="text-sm font-medium mb-3">
+                    {t('dimensions')}
+                  </h4>
+                  <div className="grid grid-cols-2 gap-4 mb-4">
+                    <div className="space-y-2">
+                      <Label htmlFor="width">{t('defaultWidth')}</Label>
+                      <Input
+                        id="width"
+                        type="number"
+                        min="1"
+                        max="12"
+                        value={selectedComponent.width || 3}
+                        onChange={(e) =>
+                          setSelectedComponent({
+                            ...selectedComponent,
+                            width: parseInt(e.target.value) || 3,
+                          })
+                        }
+                      />
+                    </div>
+                    <div className="space-y-2">
+                      <Label htmlFor="height">{t('defaultHeight')}</Label>
+                      <Input
+                        id="height"
+                        type="number"
+                        min="1"
+                        value={selectedComponent.height || 2}
+                        onChange={(e) =>
+                          setSelectedComponent({
+                            ...selectedComponent,
+                            height: parseInt(e.target.value) || 2,
+                          })
+                        }
+                      />
+                    </div>
+                  </div>
+
+                  <div className="grid grid-cols-4 gap-4 mb-4">
+                    <div className="space-y-2">
+                      <Label htmlFor="min_width">{t('minWidth')}</Label>
+                      <Input
+                        id="min_width"
+                        type="number"
+                        min="1"
+                        max="12"
+                        value={selectedComponent.min_width || ''}
+                        onChange={(e) =>
+                          setSelectedComponent({
+                            ...selectedComponent,
+                            min_width: e.target.value
+                              ? parseInt(e.target.value)
+                              : null,
+                          })
+                        }
+                      />
+                    </div>
+                    <div className="space-y-2">
+                      <Label htmlFor="max_width">{t('maxWidth')}</Label>
+                      <Input
+                        id="max_width"
+                        type="number"
+                        min="1"
+                        max="12"
+                        value={selectedComponent.max_width || ''}
+                        onChange={(e) =>
+                          setSelectedComponent({
+                            ...selectedComponent,
+                            max_width: e.target.value
+                              ? parseInt(e.target.value)
+                              : null,
+                          })
+                        }
+                      />
+                    </div>
+                    <div className="space-y-2">
+                      <Label htmlFor="min_height">{t('minHeight')}</Label>
+                      <Input
+                        id="min_height"
+                        type="number"
+                        min="1"
+                        value={selectedComponent.min_height || ''}
+                        onChange={(e) =>
+                          setSelectedComponent({
+                            ...selectedComponent,
+                            min_height: e.target.value
+                              ? parseInt(e.target.value)
+                              : null,
+                          })
+                        }
+                      />
+                    </div>
+                    <div className="space-y-2">
+                      <Label htmlFor="max_height">{t('maxHeight')}</Label>
+                      <Input
+                        id="max_height"
+                        type="number"
+                        min="1"
+                        value={selectedComponent.max_height || ''}
+                        onChange={(e) =>
+                          setSelectedComponent({
+                            ...selectedComponent,
+                            max_height: e.target.value
+                              ? parseInt(e.target.value)
+                              : null,
+                          })
+                        }
+                      />
+                    </div>
+                  </div>
+
+                  <div className="flex items-center gap-2 mb-3">
+                    <Checkbox
+                      id="is_resizable"
+                      checked={selectedComponent.is_resizable ?? true}
+                      onCheckedChange={(checked) =>
+                        setSelectedComponent({
+                          ...selectedComponent,
+                          is_resizable: checked === true,
+                        })
+                      }
+                    />
+                    <Label
+                      htmlFor="is_resizable"
+                      className="text-sm font-normal cursor-pointer"
+                    >
+                      {t('resizableLabel')}
+                    </Label>
+                  </div>
+
+                  <div className="mt-4 p-3 rounded-md bg-background border">
+                    <p className="text-xs text-muted-foreground mb-2">
+                      {t('sizePreview')}
+                    </p>
+                    <div className="grid grid-cols-12 gap-1 h-32">
+                      {Array.from({ length: 12 }).map((_, i) => (
+                        <div
+                          key={i}
+                          className={`border border-dashed ${
+                            i < (selectedComponent.width || 3)
+                              ? 'bg-primary/20 border-primary'
+                              : 'border-muted'
+                          }`}
+                        />
+                      ))}
+                    </div>
+                    <p className="text-xs text-muted-foreground mt-2">
+                      {t('sizeLabel')} {selectedComponent.width || 3} x{' '}
+                      {selectedComponent.height || 2}
+                      {selectedComponent.min_width &&
+                        ` (${t('minWidth')}: ${selectedComponent.min_width})`}
+                      {selectedComponent.max_width &&
+                        ` (${t('maxWidth')}: ${selectedComponent.max_width})`}
+                    </p>
+                  </div>
+                </div>
+              </div>
+            )}
+            <DialogFooter>
+              <Button onClick={handleSave}>{t('save')}</Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+      </div>
+
+      <div className="flex items-center gap-2 mb-4">
+        <Input
+          placeholder={`${t('searchPlaceholder') || 'Buscar'}...`}
+          value={searchQuery}
+          onChange={(e) => {
+            setSearchQuery(e.target.value);
+            setPage(1);
+          }}
+          className="max-w-sm"
+        />
+      </div>
+
+      <div className="rounded-md border">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>{t('slug')}</TableHead>
+              <TableHead>{t('name')}</TableHead>
+              <TableHead>{t('descriptionLabel')}</TableHead>
+              <TableHead>{t('size')}</TableHead>
+              <TableHead>{t('resizable')}</TableHead>
+              <TableHead className="w-[100px]">{t('actions')}</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {isLoading ? (
+              <TableRow>
+                <TableCell colSpan={7} className="text-center">
+                  {t('loading')}
+                </TableCell>
+              </TableRow>
+            ) : components && components.length > 0 ? (
+              components.map((component) => {
+                const name =
+                  component.dashboard_component_locale.find(
+                    (l) => l.locale.code === currentLocaleCode
+                  )?.name || component.slug;
+
+                const description = component.dashboard_component_locale.find(
+                  (l) => l.locale.code === currentLocaleCode
+                )?.description;
+
+                return (
+                  <TableRow key={component.id}>
+                    <TableCell className="font-mono">
+                      {component.slug}
+                    </TableCell>
+                    <TableCell>{name}</TableCell>
+                    <TableCell>{description}</TableCell>
+                    <TableCell>
+                      {component.width}x{component.height}
+                    </TableCell>
+                    <TableCell>
+                      {component.is_resizable ? t('yes') : t('no')}
+                    </TableCell>
+                    <TableCell>
+                      <div className="flex gap-2">
+                        <Button
+                          size="icon"
+                          variant="ghost"
+                          onClick={() => handleEdit(component)}
+                        >
+                          <IconEdit className="size-4" />
+                        </Button>
+                        <Button
+                          size="icon"
+                          variant="ghost"
+                          onClick={() => handleDeleteClick(component.id)}
+                        >
+                          <IconTrash className="size-4" />
+                        </Button>
+                      </div>
+                    </TableCell>
+                  </TableRow>
+                );
+              })
+            ) : (
+              <TableRow>
+                <TableCell colSpan={7} className="text-center">
+                  {t('noComponents')}
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+
+      {/* Paginação */}
+      {totalPages > 1 && (
+        <div className="flex items-center justify-between px-2">
+          <div className="text-muted-foreground text-sm">
+            {t('showingResults', {
+              from: (page - 1) * pageSize + 1,
+              to: Math.min(page * pageSize, total),
+              total: total,
+            })}
+          </div>
+          <div className="flex items-center gap-2">
+            <div className="flex items-center gap-2">
+              <Label htmlFor="pageSize" className="text-sm">
+                {t('itemsPerPage')}
+              </Label>
+              <Select
+                value={String(pageSize)}
+                onValueChange={(value) => {
+                  setPageSize(Number(value));
+                  setPage(1);
+                }}
+              >
+                <SelectTrigger className="w-20" id="pageSize">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {[10, 20, 30, 50].map((size) => (
+                    <SelectItem key={size} value={String(size)}>
+                      {size}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="text-sm">
+              {t('pageOf', { page: page, total: totalPages })}
+            </div>
+            <div className="flex gap-1">
+              <Button
+                variant="outline"
+                size="icon"
+                className="size-8"
+                onClick={() => setPage(1)}
+                disabled={page === 1}
+              >
+                <IconChevronsLeft className="size-4" />
+              </Button>
+              <Button
+                variant="outline"
+                size="icon"
+                className="size-8"
+                onClick={() => setPage((p) => Math.max(1, p - 1))}
+                disabled={page === 1}
+              >
+                <IconChevronLeft className="size-4" />
+              </Button>
+              <Button
+                variant="outline"
+                size="icon"
+                className="size-8"
+                onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
+                disabled={page === totalPages}
+              >
+                <IconChevronRight className="size-4" />
+              </Button>
+              <Button
+                variant="outline"
+                size="icon"
+                className="size-8"
+                onClick={() => setPage(totalPages)}
+                disabled={page === totalPages}
+              >
+                <IconChevronsRight className="size-4" />
+              </Button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>{t('confirmDelete')}</AlertDialogTitle>
+            <AlertDialogDescription>
+              {t('deleteDescription')}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>{t('cancel')}</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={handleDeleteConfirm}
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+            >
+              {t('delete')}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  );
+}