@hed-hog/core 0.0.390 → 0.0.393

package/hedhog/frontend/app/mail/template/page.tsx.ejs

@@ -33,6 +33,12 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@/components/ui/dialog';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import {
@@ -46,6 +52,7 @@ import { ResizableSheetContent } from '@/components/ui/resizable-sheet-content';
 import {
   Sheet,
   SheetDescription,
+  SheetFooter,
   SheetHeader,
   SheetTitle,
 } from '@/components/ui/sheet';
@@ -63,6 +70,7 @@ import { formatDate } from '@/lib/format-date';
 import { useApp } from '@hed-hog/next-app-provider';
 import {
   AlertCircle,
+  ChevronDown,
   Database,
   Download,
   FileDown,
@@ -932,72 +940,97 @@ export default function EmailTemplatesPage() {
       />
 
       <Sheet open={isDialogOpen} onOpenChange={setIsDialogOpen}>
-        <ResizableSheetContent sheetId="mail-template-editor" defaultWidth={1152}>
-          <SheetHeader>
-            <SheetTitle>
-              {editMode ? t('editTemplate') : t('newTemplateTitle')}
-            </SheetTitle>
-            <SheetDescription>
-              {editMode
-                ? t('editTemplateDescription')
-                : t('newTemplateDescription')}
-            </SheetDescription>
+        <ResizableSheetContent
+          sheetId="mail-template-editor"
+          defaultWidth={1152}
+          minWidth={760}
+          maxWidth={1440}
+          className="flex h-full min-h-0 w-full flex-col gap-0 overflow-hidden p-0"
+        >
+          <SheetHeader className="shrink-0 border-b px-4 py-4 text-left sm:px-6">
+            {/* pr-8: o botão de fechar do Radix fica em absolute top-4 right-4 */}
+            <div className="flex items-start gap-3 pr-8">
+              <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-primary/10 text-primary">
+                <MailIcon className="h-5 w-5" />
+              </div>
+              <div className="min-w-0 space-y-1">
+                <SheetTitle>
+                  {editMode ? t('editTemplate') : t('newTemplateTitle')}
+                </SheetTitle>
+                <SheetDescription>
+                  {editMode
+                    ? t('editTemplateDescription')
+                    : t('newTemplateDescription')}
+                </SheetDescription>
+              </div>
+            </div>
           </SheetHeader>
-          <form onSubmit={handleSubmit} className="space-y-6">
-            <div className="grid grid-cols-3 gap-6">
-              <div className="space-y-4 overflow-y-auto max-h-[calc(90vh-200px)] pr-4">
-                <div className="space-y-2">
-                  <Label htmlFor="slug">{t('slugLabel')}</Label>
-                  <Input
-                    id="slug"
-                    value={formData.slug}
-                    onChange={(e) =>
-                      setFormData({ ...formData, slug: e.target.value })
-                    }
-                    placeholder={t('slugPlaceholder')}
-                    required
-                  />
-                </div>
 
-                <div className="space-y-2">
-                  <Label htmlFor="subject">{t('subjectLabel')}</Label>
-                  <Input
-                    id="subject"
-                    value={formData.subject}
-                    onChange={(e) =>
-                      setFormData({ ...formData, subject: e.target.value })
-                    }
-                    placeholder={t('subjectPlaceholder')}
-                    required
-                  />
-                </div>
+          <form onSubmit={handleSubmit} className="flex min-h-0 flex-1 flex-col">
+            <div className="grid min-h-0 flex-1 grid-cols-1 overflow-y-auto lg:grid-cols-[minmax(260px,320px)_1fr] lg:overflow-hidden">
+              <div className="space-y-5 border-b px-4 py-4 sm:px-6 lg:min-h-0 lg:overflow-y-auto lg:border-b-0 lg:border-r">
+                <section className="space-y-3">
+                  <h3 className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                    {t('sectionIdentification')}
+                  </h3>
+
+                  <div className="space-y-1.5">
+                    <Label htmlFor="slug">{t('slugLabel')}</Label>
+                    <Input
+                      id="slug"
+                      value={formData.slug}
+                      onChange={(e) =>
+                        setFormData({ ...formData, slug: e.target.value })
+                      }
+                      placeholder={t('slugPlaceholder')}
+                      className="font-mono text-sm"
+                      required
+                    />
+                  </div>
 
-                <div className="space-y-2">
-                  <Label htmlFor="variables">{t('variablesLabel')}</Label>
-                  <TagsInput
-                    id="variables"
-                    value={formData.variables}
-                    onChange={(val) =>
-                      setFormData({ ...formData, variables: val })
-                    }
-                    placeholder={t('variablesPlaceholder')}
-                  />
-                  <p className="text-xs text-muted-foreground">
-                    {t('variablesHelp')}
-                  </p>
-                </div>
+                  <div className="space-y-1.5">
+                    <Label htmlFor="subject">{t('subjectLabel')}</Label>
+                    <Input
+                      id="subject"
+                      value={formData.subject}
+                      onChange={(e) =>
+                        setFormData({ ...formData, subject: e.target.value })
+                      }
+                      placeholder={t('subjectPlaceholder')}
+                      required
+                    />
+                  </div>
+                </section>
+
+                <section className="space-y-3">
+                  <h3 className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                    {t('variablesLabel')}
+                  </h3>
+
+                  <div className="space-y-1.5">
+                    <TagsInput
+                      id="variables"
+                      value={formData.variables}
+                      onChange={(val) =>
+                        setFormData({ ...formData, variables: val })
+                      }
+                      placeholder={t('variablesPlaceholder')}
+                    />
+                    <p className="text-xs text-muted-foreground">
+                      {t('variablesHelp')}
+                    </p>
+                  </div>
 
-                {formData.variables.length > 0 && (
-                  <div className="space-y-2">
-                    <h4 className="text-sm font-semibold">
-                      {t('availableVariables')}
-                    </h4>
-                    <div className="space-y-2">
+                  {formData.variables.length > 0 && (
+                    <div className="space-y-2 rounded-lg border bg-muted/30 p-3">
+                      <p className="text-xs font-medium text-muted-foreground">
+                        {t('availableVariables')}
+                      </p>
                       {formData.variables.map((v, idx) => (
                         <div key={idx} className="flex items-center gap-2">
                           <Badge
                             variant="outline"
-                            className="font-mono min-w-30"
+                            className="w-32 shrink-0 justify-center bg-background font-mono"
                           >
                             {'{{' + v + '}}'}
                           </Badge>
@@ -1010,105 +1043,130 @@ export default function EmailTemplatesPage() {
                                 [v]: e.target.value,
                               })
                             }
-                            className="flex-1"
+                            className="h-9 min-w-0 flex-1 bg-background"
                           />
                         </div>
                       ))}
                     </div>
-                  </div>
-                )}
+                  )}
+                </section>
               </div>
 
-              <div className="col-span-2 space-y-4">
-                <div className="absolute top-4 right-8 space-y-2">
-                  <Label htmlFor="locale-select">{t('localeLabel')}</Label>
-                  <Select
-                    value={selectedLocaleCode}
-                    onValueChange={handleLocaleChange}
-                  >
-                    <SelectTrigger id="locale-select" className="bg-background">
-                      <SelectValue />
-                    </SelectTrigger>
-                    <SelectContent>
-                      {locales.map((locale) => (
-                        <SelectItem key={locale.code} value={locale.code}>
-                          {locale.name}
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
+              <div className="flex min-h-0 flex-col gap-3 px-4 py-4 sm:px-6">
+                <div className="flex flex-wrap items-end justify-between gap-3">
+                  <Label htmlFor="body">{t('bodyLabel')}</Label>
+                  <div className="flex items-center gap-2">
+                    <Label
+                      htmlFor="locale-select"
+                      className="text-xs font-normal text-muted-foreground"
+                    >
+                      {t('localeLabel')}
+                    </Label>
+                    <Select
+                      value={selectedLocaleCode}
+                      onValueChange={handleLocaleChange}
+                    >
+                      <SelectTrigger
+                        id="locale-select"
+                        className="h-9 w-45 bg-background"
+                      >
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {locales.map((locale) => (
+                          <SelectItem key={locale.code} value={locale.code}>
+                            {locale.name}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
                 </div>
 
-                <div className="space-y-2">
-                  <Label htmlFor="body">{t('bodyLabel')}</Label>
-                  <HtmlContentEditor
-                    key={selectedLocaleCode}
-                    value={formData.body}
-                    onChange={(value) =>
-                      setFormData({ ...formData, body: value })
-                    }
-                    variables={editorVariables}
-                    previewHtml={previewHtml}
-                    previewLoading={previewLoading}
-                    zoomStorageKey="mail-template-html-editor-zoom"
-                    className="h-[calc(90vh-260px)]"
-                    warnings={
-                      bodyBypassesLayout ? (
-                        <div className="flex items-start gap-2 rounded-lg border border-amber-400/30 bg-amber-50 p-2.5 text-xs text-amber-800 dark:bg-amber-950/30 dark:text-amber-300">
-                          <AlertCircle className="mt-0.5 h-3.5 w-3.5 shrink-0" />
-                          <span>
-                            <span className="font-medium">
-                              {t('fullDocumentWarningTitle')}
-                            </span>
-                            {' — '}
-                            {t('fullDocumentWarningDesc')}
+                <HtmlContentEditor
+                  key={selectedLocaleCode}
+                  value={formData.body}
+                  onChange={(value) => setFormData({ ...formData, body: value })}
+                  variables={editorVariables}
+                  previewHtml={previewHtml}
+                  previewLoading={previewLoading}
+                  zoomStorageKey="mail-template-html-editor-zoom"
+                  className="min-h-100 flex-1"
+                  warnings={
+                    bodyBypassesLayout ? (
+                      <div className="flex items-start gap-2 rounded-lg border border-amber-400/30 bg-amber-50 p-2.5 text-xs text-amber-800 dark:bg-amber-950/30 dark:text-amber-300">
+                        <AlertCircle className="mt-0.5 h-3.5 w-3.5 shrink-0" />
+                        <span>
+                          <span className="font-medium">
+                            {t('fullDocumentWarningTitle')}
                           </span>
-                        </div>
-                      ) : null
-                    }
-                  />
-                </div>
+                          {' — '}
+                          {t('fullDocumentWarningDesc')}
+                        </span>
+                      </div>
+                    ) : null
+                  }
+                />
               </div>
             </div>
 
-            <div className="flex justify-between items-center pt-4 border-t">
-              <div className="flex gap-2">
+            <SheetFooter className="sticky bottom-0 shrink-0 flex-row flex-wrap items-center justify-between gap-3 border-t bg-background/95 px-4 py-3 backdrop-blur sm:justify-between sm:px-6">
+              <div className="flex items-center gap-2">
                 <Button
                   type="button"
                   variant="outline"
                   size="sm"
-                  onClick={() => {
-                    if (selectedTemplate) {
-                      downloadYAML(selectedTemplate);
-                    }
-                  }}
+                  onClick={handleSendTestEmail}
+                  disabled={!formData.subject.trim() || !formData.body.trim()}
                 >
-                  <Download className="mr-2 h-4 w-4" />
-                  {t('downloadYAML')}
+                  <MailIcon className="mr-2 h-4 w-4" />
+                  {t('sendTestEmail')}
                 </Button>
+
+                {/* Baixar YAML e Gerar Migration dependem de um template salvo. */}
+                <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                    <Button type="button" variant="outline" size="sm">
+                      {t('moreActions')}
+                      <ChevronDown className="ml-2 h-4 w-4" />
+                    </Button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="start">
+                    <DropdownMenuItem
+                      disabled={!selectedTemplate}
+                      onSelect={() => {
+                        if (selectedTemplate) {
+                          downloadYAML(selectedTemplate);
+                        }
+                      }}
+                    >
+                      <Download className="mr-2 h-4 w-4" />
+                      {t('downloadYAML')}
+                    </DropdownMenuItem>
+                    <DropdownMenuItem
+                      disabled={!selectedTemplate}
+                      onSelect={handleGenerateMigration}
+                    >
+                      <Database className="mr-2 h-4 w-4" />
+                      {t('generateMigration')}
+                    </DropdownMenuItem>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </div>
+
+              <div className="flex items-center gap-2">
                 <Button
                   type="button"
                   variant="outline"
-                  size="sm"
-                  onClick={handleGenerateMigration}
+                  onClick={() => setIsDialogOpen(false)}
                 >
-                  <Database className="mr-2 h-4 w-4" />
-                  {t('generateMigration')}
+                  {t('cancel')}
                 </Button>
-                <Button
-                  type="button"
-                  variant="outline"
-                  size="sm"
-                  onClick={handleSendTestEmail}
-                >
-                  <MailIcon className="mr-2 h-4 w-4" />
-                  {t('sendTestEmail')}
+                <Button type="submit" className="min-w-32">
+                  {editMode ? t('saveChanges') : t('createTemplate')}
                 </Button>
               </div>
-              <Button type="submit" className="min-w-40">
-                {editMode ? t('saveChanges') : t('createTemplate')}
-              </Button>
-            </div>
+            </SheetFooter>
           </form>
         </ResizableSheetContent>
       </Sheet>

package/hedhog/frontend/app/users/active-session.tsx.ejs

@@ -2,7 +2,7 @@ import { Button } from '@/components/ui/button';
 import { formatDateTime } from '@/lib/format-date';
 import { User, UserSession } from '@hed-hog/api-types';
 import { useApp } from '@hed-hog/next-app-provider';
-import { Monitor } from 'lucide-react';
+import { Monitor, VenetianMask } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { toast } from 'sonner';
 
@@ -23,6 +23,16 @@ function parseUserAgent(ua: string) {
   return { os, browser };
 }
 
+/**
+ * Sessão aberta por um operador via simulação de acesso. Precisa ficar visível
+ * aqui: sem a marca, ela é indistinguível de um acesso genuíno do usuário.
+ */
+const isSimulated = (session: UserSession) =>
+  Boolean(session?.impersonator_user_id);
+
+const impersonatorName = (session: UserSession) =>
+  session?.impersonator?.name || `#${session?.impersonator_user_id}`;
+
 interface IProps {
   editingUser: User;
   refetch: () => void;
@@ -73,13 +83,28 @@ export function ActiveSessions({ editingUser, refetch }: IProps) {
       </div>
       <div className="space-y-2">
         {currentSession ? (
-          <div className="rounded-lg border p-3">
+          <div
+            className={`rounded-lg border p-3 ${isSimulated(currentSession) ? 'border-amber-300 bg-amber-50/40' : ''}`}
+          >
             <div className="flex items-center gap-3">
-              <div className="rounded-md bg-blue-50 p-2">
-                <Monitor className="h-5 w-5 text-blue-600" />
+              <div
+                className={`rounded-md p-2 ${isSimulated(currentSession) ? 'bg-amber-100' : 'bg-blue-50'}`}
+              >
+                {isSimulated(currentSession) ? (
+                  <VenetianMask className="h-5 w-5 text-amber-600" />
+                ) : (
+                  <Monitor className="h-5 w-5 text-blue-600" />
+                )}
               </div>
               <div className="flex-1">
                 <p className="text-sm font-medium">{t('currentSession')}</p>
+                {isSimulated(currentSession) && (
+                  <p className="text-xs font-medium text-amber-700">
+                    {t('simulatedBy', {
+                      name: impersonatorName(currentSession),
+                    })}
+                  </p>
+                )}
                 <p className="text-xs text-muted-foreground">
                   {parseUserAgent(currentSession.user_agent).os} ·{' '}
                   {parseUserAgent(currentSession.user_agent).browser} ·{' '}
@@ -99,9 +124,15 @@ export function ActiveSessions({ editingUser, refetch }: IProps) {
                   )}
                 </p>
               </div>
-              <span className="rounded-full bg-green-50 px-2 py-1 text-xs font-medium text-green-700">
-                {t('active')}
-              </span>
+              {isSimulated(currentSession) ? (
+                <span className="rounded-full bg-amber-100 px-2 py-1 text-xs font-medium text-amber-800">
+                  {t('simulatedSession')}
+                </span>
+              ) : (
+                <span className="rounded-full bg-green-50 px-2 py-1 text-xs font-medium text-green-700">
+                  {t('active')}
+                </span>
+              )}
             </div>
           </div>
         ) : (
@@ -116,13 +147,29 @@ export function ActiveSessions({ editingUser, refetch }: IProps) {
           ? otherSessions.map((session: UserSession) => {
               const { os, browser } = parseUserAgent(session.user_agent);
               return (
-                <div key={session.id} className="rounded-lg border p-3">
+                <div
+                  key={session.id}
+                  className={`rounded-lg border p-3 ${isSimulated(session) ? 'border-amber-300 bg-amber-50/40' : ''}`}
+                >
                   <div className="flex items-center gap-3">
-                    <div className="rounded-md bg-slate-50 p-2">
-                      <Monitor className="h-5 w-5 text-slate-600" />
+                    <div
+                      className={`rounded-md p-2 ${isSimulated(session) ? 'bg-amber-100' : 'bg-slate-50'}`}
+                    >
+                      {isSimulated(session) ? (
+                        <VenetianMask className="h-5 w-5 text-amber-600" />
+                      ) : (
+                        <Monitor className="h-5 w-5 text-slate-600" />
+                      )}
                     </div>
                     <div className="flex-1">
-                      <p className="text-sm font-medium">{t('otherSession')}</p>
+                      <p className="text-sm font-medium">
+                        {isSimulated(session) ? t('simulatedSession') : t('otherSession')}
+                      </p>
+                      {isSimulated(session) && (
+                        <p className="text-xs font-medium text-amber-700">
+                          {t('simulatedBy', { name: impersonatorName(session) })}
+                        </p>
+                      )}
                       <p className="text-xs text-muted-foreground">
                         {os} · {browser} · {t('lastActive')}{' '}
                         {formatDateTime(

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

@@ -59,9 +59,12 @@ import {
   ShieldCheck,
   UserPlus,
   Users,
+  VenetianMask,
 } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useImpersonationAccess } from '../_lib/hooks/use-impersonation-access';
+import { SimulateAccessDialog } from './simulate-access-dialog';
 import { UserSheet } from './user-sheet';
 
 const USER_VIEW_STORAGE_KEY = 'core-user-view-mode';
@@ -80,12 +83,15 @@ const DEFAULT_PAGE_SIZES = [6, 12, 24, 48, 96] as const;
 
 export default function UserPage() {
   const t = useTranslations('core.UserPage');
-  const { request, currentLocaleCode, getSettingValue } = useApp();
+  const simulationT = useTranslations('core.AccessSimulation');
+  const { request, currentLocaleCode, getSettingValue, user: appUser } = useApp();
 
   const [searchQuery, setSearchQuery] = useState('');
   const [isSheetOpen, setIsSheetOpen] = useState(false);
   const [selectedUserId, setSelectedUserId] = useState<number | null>(null);
   const [viewMode, setViewMode] = useState<UserViewMode>('table');
+  const [simulateTarget, setSimulateTarget] = useState<User | null>(null);
+  const { canSimulateAccess } = useImpersonationAccess();
 
   const [page, setPage] = useState(1);
   const { data: generalSettings } = useQuery<{
@@ -253,6 +259,19 @@ export default function UserPage() {
     [currentLocaleCode, getSettingValue]
   );
 
+  /**
+   * Esconde o botão nos dois casos que o backend recusaria de qualquer forma e
+   * que dá para saber daqui: o próprio usuário e conta desativada. Alvo com
+   * papel `admin` NÃO é filtrado aqui — o payload da listagem não traz papéis —,
+   * então essa recusa fica com o `POST /impersonation/start`.
+   */
+  const canSimulate = useCallback(
+    (user: User) =>
+      Number(user.id) !== Number((appUser as { id?: number } | null)?.id) &&
+      !(user as { deactivated_at?: string | null }).deactivated_at,
+    [appUser]
+  );
+
   const pageUserIds = useMemo(
     () =>
       ((paginate as PaginatedResult<User>)?.data ?? []).map((u) => Number(u.id)),
@@ -368,7 +387,22 @@ export default function UserPage() {
         id: 'actions',
         header: '',
         cell: ({ row }) => (
-          <div className="flex justify-end">
+          <div className="flex justify-end gap-1">
+            {canSimulateAccess && canSimulate(row.original) && (
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="h-8 w-8 text-amber-600 hover:text-amber-700"
+                    onClick={() => setSimulateTarget(row.original)}
+                  >
+                    <VenetianMask className="h-4 w-4" />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>{simulationT('action')}</TooltipContent>
+              </Tooltip>
+            )}
             <Tooltip>
               <TooltipTrigger asChild>
                 <Button
@@ -386,7 +420,7 @@ export default function UserPage() {
         ),
       },
     ],
-    [t, getLastLoginLabel, presenceMap]
+    [t, simulationT, getLastLoginLabel, presenceMap, canSimulateAccess, canSimulate]
   );
 
   const tableData = useMemo(
@@ -586,13 +620,30 @@ export default function UserPage() {
                       </div>
                     </div>
                     <div className="flex flex-col items-end gap-2">
-                      <Button
-                        variant="outline"
-                        size="sm"
-                        onClick={() => handleOpenEdit(user)}
-                      >
-                        {t('buttonEditUser')}
-                      </Button>
+                      <div className="flex items-center gap-1">
+                        {canSimulateAccess && canSimulate(user) && (
+                          <Tooltip>
+                            <TooltipTrigger asChild>
+                              <Button
+                                variant="outline"
+                                size="icon"
+                                className="h-8 w-8 text-amber-600 hover:text-amber-700"
+                                onClick={() => setSimulateTarget(user)}
+                              >
+                                <VenetianMask className="h-4 w-4" />
+                              </Button>
+                            </TooltipTrigger>
+                            <TooltipContent>{simulationT('action')}</TooltipContent>
+                          </Tooltip>
+                        )}
+                        <Button
+                          variant="outline"
+                          size="sm"
+                          onClick={() => handleOpenEdit(user)}
+                        >
+                          {t('buttonEditUser')}
+                        </Button>
+                      </div>
                       <div className="mt-1">
                         {user.suspended_until ? (
                           <Badge
@@ -745,6 +796,14 @@ export default function UserPage() {
           userId={selectedUserId}
           onSuccess={refetch}
         />
+
+        <SimulateAccessDialog
+          open={Boolean(simulateTarget)}
+          onOpenChange={(open) => {
+            if (!open) setSimulateTarget(null);
+          }}
+          user={simulateTarget}
+        />
       </div>
     </Page>
   );