@hed-hog/core 0.0.361 → 0.0.364

package/hedhog/frontend/app/configurations/[slug]/components/setting-field.tsx.ejs

@@ -87,6 +87,7 @@ function getLocalizedIntegrationName(
   );
 }
 
+const MAIL_INTEGRATION_PROFILE_SETTING_SLUG = 'mail-integration-profile-id';
 const DAILY_REPORT_EMAIL_INTEGRATION_SETTING_SLUG =
   'operations.daily-report.email-integration-profile-id';
 const DAILY_REPORT_WHATSAPP_INTEGRATION_SETTING_SLUG =
@@ -635,7 +636,10 @@ export const SettingField = ({ setting, className }: SettingFieldProps) => {
         setting.slug
       );
 
-      if (setting.slug === 'file-storage-profile-id') {
+      if (
+        setting.slug === 'file-storage-profile-id' ||
+        setting.slug === 'lms-bulk-upload-storage-profile-id'
+      ) {
         const loadStorageTypeId = async () => {
           const typesResponse = await request<IntegrationTypeOption[]>({
             url: '/integration-profile/types',
@@ -972,10 +976,113 @@ export const SettingField = ({ setting, className }: SettingFieldProps) => {
         );
       }
 
-      if (
-        setting.slug !== 'mail-integration-profile-id' &&
-        !dailyReportIntegrationTypeSlug
-      ) {
+      if (setting.slug === MAIL_INTEGRATION_PROFILE_SETTING_SLUG) {
+        return (
+          <>
+            <div className="flex w-full min-w-0 items-center gap-2 md:max-w-72">
+              <EntityPicker<IntegrationProfileOption & Record<string, unknown>>
+                placeholder={t('selectMailProfile')}
+                emptyStateDescription={t('mailProfileEmptyState')}
+                value={parsedValue ? Number(parsedValue) : null}
+                onChange={(id, option) => {
+                  setStorageProfileSelectedLabel(option?.name ?? '');
+                  handleChangeValue(id != null ? String(id) : '', true);
+                }}
+                valueType="number"
+                initialSelectedLabel={storageProfileSelectedLabel}
+                showCreateButton={false}
+                clearable={false}
+                loadOptions={async ({ page, pageSize, search }) => {
+                  const qs = new URLSearchParams({
+                    page: String(page),
+                    pageSize: String(pageSize),
+                    typeSlug: 'email',
+                  });
+                  if (search) qs.set('search', search);
+                  const response = await request<
+                    ApiPaginated<
+                      IntegrationProfileOption & Record<string, unknown>
+                    >
+                  >({
+                    url: `/integration-profile?${qs}`,
+                    method: 'GET',
+                  });
+                  const paged = response.data;
+                  return {
+                    items: paged?.data ?? [],
+                    hasMore: (paged?.page ?? 0) < (paged?.lastPage ?? 0),
+                  };
+                }}
+                getOptionValue={(opt) => opt.id}
+                getOptionLabel={(opt) => String(opt.name ?? '')}
+                getOptionDescription={(opt) => {
+                  const providerSlug = String(
+                    opt.integration_provider?.slug ?? ''
+                  );
+                  const providerName = getLocalizedIntegrationName(
+                    opt.integration_provider?.integration_provider_locale,
+                    currentLocaleCode
+                  );
+                  return [providerName || providerSlug, opt.slug]
+                    .filter(Boolean)
+                    .join(' • ');
+                }}
+                className={cn('flex-1 min-w-0', className)}
+              />
+
+              <Button
+                type="button"
+                variant="outline"
+                size="icon"
+                className="h-10 w-10 shrink-0"
+                onClick={() => {
+                  setStorageProfileEditingId(
+                    parsedValue ? Number(parsedValue) : null
+                  );
+                  setIsStorageProfileSheetOpen(true);
+                }}
+                disabled={!parsedValue}
+                aria-label="Editar perfil de email"
+                title="Editar perfil de email"
+              >
+                <Pencil className="h-4 w-4" />
+              </Button>
+
+              <Button
+                type="button"
+                variant="outline"
+                size="icon"
+                className="h-10 w-10 shrink-0"
+                onClick={() => {
+                  setStorageProfileEditingId(null);
+                  setIsStorageProfileSheetOpen(true);
+                }}
+                aria-label="Criar perfil de email"
+                title="Criar perfil de email"
+              >
+                <Plus className="h-4 w-4" />
+              </Button>
+            </div>
+
+            <IntegrationProfileSheet
+              open={isStorageProfileSheetOpen}
+              onOpenChange={(nextOpen) => {
+                setIsStorageProfileSheetOpen(nextOpen);
+                if (!nextOpen) setStorageProfileEditingId(null);
+              }}
+              profileId={storageProfileEditingId}
+              initialTypeSlug="email"
+              lockedTypeSlug="email"
+              onSaved={(profile: IntegrationProfileSheetSavedProfile) => {
+                setStorageProfileSelectedLabel(profile.name ?? '');
+                handleChangeValue(String(profile.id), true);
+              }}
+            />
+          </>
+        );
+      }
+
+      if (!dailyReportIntegrationTypeSlug) {
         return (
           <Input
             type="text"

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

@@ -17,6 +17,12 @@ import {
   CardHeader,
   CardTitle,
 } from '@/components/ui/card';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
 import { KpiCardsGrid } from '@/components/ui/kpi-cards-grid';
 import { Skeleton } from '@/components/ui/skeleton';
 import {
@@ -53,12 +59,6 @@ import {
 import { useTranslations } from 'next-intl';
 import { useEffect, useMemo, useState } from 'react';
 import { UserSheet } from './user-sheet';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
 
 const USER_VIEW_STORAGE_KEY = 'core-user-view-mode';
 type UserViewMode = 'table' | 'cards';
@@ -366,7 +366,7 @@ export default function UserPage() {
           viewMode === 'cards' ? (
             <div className="grid gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
               {Array.from({ length: 6 }).map((_, i) => (
-                <Card key={i} className="overflow-hidden py-0">
+                <Card key={i} className="overflow-hidden">
                   <CardContent className="space-y-3 p-4">
                     <div className="flex items-center gap-3">
                       <Skeleton className="h-12 w-12 rounded-full" />

package/hedhog/frontend/app/users/permissions.tsx.ejs

@@ -1,11 +1,23 @@
 'use client';
 
 import { EmptyState } from '@/components/entity-list';
+import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
-import { Card, CardContent } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
 import { Switch } from '@/components/ui/switch';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
 import { Role } from '@hed-hog/api-types';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
 import { CheckCheck, Eye, Loader2, Search, ShieldCheck, X } from 'lucide-react';
@@ -167,36 +179,50 @@ export function PermissionsSection({
           />
         </div>
         {hasUnassigned && (
-          <Button
-            variant="outline"
-            size="sm"
-            className="shrink-0 gap-1.5"
-            onClick={handleAssignAll}
-            disabled={isDisabled}
-          >
-            {isBulkLoading ? (
-              <Loader2 className="h-4 w-4 animate-spin" />
-            ) : (
-              <CheckCheck className="h-4 w-4" />
-            )}
-            {t('addAllRoles')}
-          </Button>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                variant="outline"
+                size="icon"
+                className="h-8 w-8 shrink-0"
+                onClick={handleAssignAll}
+                disabled={isDisabled}
+                aria-label={t('addAllRoles')}
+              >
+                {isBulkLoading ? (
+                  <Loader2 className="h-4 w-4 animate-spin" />
+                ) : (
+                  <CheckCheck className="h-4 w-4" />
+                )}
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>{t('addAllRoles')}</p>
+            </TooltipContent>
+          </Tooltip>
         )}
         {hasAssigned && (
-          <Button
-            variant="outline"
-            size="sm"
-            className="shrink-0 gap-1.5"
-            onClick={handleRemoveAll}
-            disabled={isDisabled}
-          >
-            {isBulkLoading ? (
-              <Loader2 className="h-4 w-4 animate-spin" />
-            ) : (
-              <X className="h-4 w-4" />
-            )}
-            {t('removeAllRoles')}
-          </Button>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                variant="outline"
+                size="icon"
+                className="h-8 w-8 shrink-0"
+                onClick={handleRemoveAll}
+                disabled={isDisabled}
+                aria-label={t('removeAllRoles')}
+              >
+                {isBulkLoading ? (
+                  <Loader2 className="h-4 w-4 animate-spin" />
+                ) : (
+                  <X className="h-4 w-4" />
+                )}
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>{t('removeAllRoles')}</p>
+            </TooltipContent>
+          </Tooltip>
         )}
         <Button
           variant="outline"
@@ -215,61 +241,89 @@ export function PermissionsSection({
           <p className="text-sm text-muted-foreground">{t('noRolesMatch')}</p>
         </div>
       ) : (
-        <div className="space-y-2">
-          {filteredRoles.map((role, index) => {
-            const isToggling = togglingRoleId === role.id;
+        <div className="overflow-hidden rounded-lg border border-border/70 bg-background">
+          <Table className="table-fixed">
+            <TableHeader className="bg-muted/20">
+              <TableRow className="hover:bg-transparent">
+                <TableHead className="h-8 px-2 text-[11px] font-medium text-muted-foreground">
+                  Cargo
+                </TableHead>
+                <TableHead className="h-8 w-37.5 px-2 text-[11px] font-medium text-muted-foreground">
+                  Slug
+                </TableHead>
+                <TableHead className="h-8 w-19.5 px-2 text-right text-[11px] font-medium text-muted-foreground">
+                  Acesso
+                </TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {filteredRoles.map((role, index) => {
+                const isToggling = togglingRoleId === role.id;
 
-            return (
-              <Card
-                key={role.id ?? `role-${index}`}
-                className={`transition-all py-4 ${
-                  role.isAssigned
-                    ? 'border-primary bg-primary/5'
-                    : 'border-border hover:border-primary/50'
-                }`}
-              >
-                <CardContent className="flex items-center justify-between px-4">
-                  <div className="flex items-center gap-2 flex-1">
-                    <div
-                      className={`rounded-md p-2 ${
-                        role.isAssigned ? 'bg-primary/10' : 'bg-muted'
-                      }`}
-                    >
-                      <ShieldCheck
-                        className={`h-5 w-5 ${
-                          role.isAssigned
-                            ? 'text-primary'
-                            : 'text-muted-foreground'
-                        }`}
-                      />
-                    </div>
-                    <div className="flex-1">
-                      <Label
-                        htmlFor={`role-${role.id}`}
-                        className="text-sm font-medium cursor-pointer"
-                      >
-                        {role.name} ({role.slug})
-                      </Label>
-                      {role.description && (
-                        <p className="text-xs text-muted-foreground">
-                          {role.description}
-                        </p>
-                      )}
-                    </div>
-                  </div>
-                  <Switch
-                    id={`role-${role.id}`}
-                    checked={role.isAssigned}
-                    disabled={isToggling || isDisabled}
-                    onCheckedChange={() =>
-                      handleToggleRole(role.id!, role.isAssigned)
+                return (
+                  <TableRow
+                    key={role.id ?? `role-${index}`}
+                    className={
+                      role.isAssigned
+                        ? 'bg-primary/5 hover:bg-primary/5'
+                        : 'hover:bg-muted/20'
                     }
-                    className="ml-4"
-                  />
-                </CardContent>
-              </Card>
-            );
-          })}
+                  >
+                    <TableCell className="px-2 py-1.5 align-middle">
+                      <div className="flex min-w-0 items-start gap-1.5">
+                        <div
+                          className={`mt-0.5 rounded-md p-0.5 ${
+                            role.isAssigned ? 'bg-primary/10' : 'bg-muted/70'
+                          }`}
+                        >
+                          <ShieldCheck
+                            className={`h-3.5 w-3.5 ${
+                              role.isAssigned
+                                ? 'text-primary'
+                                : 'text-muted-foreground'
+                            }`}
+                          />
+                        </div>
+                        <div className="min-w-0 flex-1">
+                          <div className="truncate text-[13px] font-semibold leading-4 text-foreground">
+                            {role.name}
+                          </div>
+                          {role.description && (
+                            <p className="truncate text-[11px] leading-3 text-muted-foreground">
+                              {role.description}
+                            </p>
+                          )}
+                        </div>
+                      </div>
+                    </TableCell>
+                    <TableCell className="px-2 py-1.5 align-middle">
+                      {role.slug ? (
+                        <Badge
+                          variant="outline"
+                          className="h-4 rounded-sm border-border/70 bg-muted/40 px-1 font-mono text-[9px] font-medium lowercase leading-none tracking-[0.02em] text-muted-foreground"
+                        >
+                          {role.slug}
+                        </Badge>
+                      ) : null}
+                    </TableCell>
+                    <TableCell className="px-2 py-1.5 align-middle">
+                      <div className="flex justify-end">
+                        <Switch
+                          id={`role-${role.id}`}
+                          checked={role.isAssigned}
+                          disabled={isToggling || isDisabled}
+                          onCheckedChange={() =>
+                            handleToggleRole(role.id!, role.isAssigned)
+                          }
+                          className="scale-90 origin-center"
+                        />
+                      </div>
+                    </TableCell>
+                  </TableRow>
+                );
+              })}
+            </TableBody>
+          </Table>
         </div>
       )}
 

package/hedhog/frontend/app/users/user-access-sheet.tsx.ejs

@@ -203,32 +203,34 @@ export function UserAccessSheet({
         <div className="w-full border-t" />
 
         <Tabs defaultValue="menu" className="px-6 pt-4">
-          <TabsList className="w-full mb-4">
-            <TabsTrigger
-              value="menu"
-              className="flex-1 flex items-center gap-2"
-            >
-              <Menu className="h-4 w-4" />
-              {t('accessTabMenu')}
-              {!loadingMenus && (
-                <Badge variant="secondary" className="ml-1 text-xs">
-                  {menus.length}
-                </Badge>
-              )}
-            </TabsTrigger>
-            <TabsTrigger
-              value="routes"
-              className="flex-1 flex items-center gap-2"
-            >
-              <Globe className="h-4 w-4" />
-              {t('accessTabRoutes')}
-              {!loadingRoutes && (
-                <Badge variant="secondary" className="ml-1 text-xs">
-                  {routes.length}
-                </Badge>
-              )}
-            </TabsTrigger>
-          </TabsList>
+          <div className="sticky top-0 z-20 -mx-6 bg-background/95 px-6 backdrop-blur supports-backdrop-filter:bg-background/80">
+            <TabsList className="mb-4 w-full">
+              <TabsTrigger
+                value="menu"
+                className="flex-1 flex items-center gap-2"
+              >
+                <Menu className="h-4 w-4" />
+                {t('accessTabMenu')}
+                {!loadingMenus && (
+                  <Badge variant="secondary" className="ml-1 text-xs">
+                    {menus.length}
+                  </Badge>
+                )}
+              </TabsTrigger>
+              <TabsTrigger
+                value="routes"
+                className="flex-1 flex items-center gap-2"
+              >
+                <Globe className="h-4 w-4" />
+                {t('accessTabRoutes')}
+                {!loadingRoutes && (
+                  <Badge variant="secondary" className="ml-1 text-xs">
+                    {routes.length}
+                  </Badge>
+                )}
+              </TabsTrigger>
+            </TabsList>
+          </div>
 
           <TabsContent value="menu" className="mt-0">
             {loadingMenus ? (