rl-core-front 0.16.5 → 0.16.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rl-core-front",
-  "version": "0.16.5",
+  "version": "0.16.6",
   "description": "Telas e componentes Next.js do core: login com 2FA, usuários, RBAC, auditoria, logs e listagens com filtro dinâmico",
   "author": "Rodrigo Liberti",
   "license": "MIT",

package/src/components/ui/date-picker.tsx

@@ -38,6 +38,18 @@ export interface DatePickerProps {
   /** Descreve o campo para quem usa leitor de tela. */
   label?: string;
   placeholder?: string;
+  /**
+   * O primeiro dia escolhível (`"yyyy-MM-dd"`) — os anteriores ficam apagados
+   * no calendário e o digitado é recusado.
+   *
+   * Existe porque avisar depois não serve para data: o vencimento anterior à
+   * compra e o pagamento anterior ao lançamento são erros que a pessoa comete
+   * sem perceber, e descobrir no botão Salvar é refazer o caminho. Aqui o dia
+   * simplesmente não se deixa escolher.
+   */
+  minDay?: string;
+  /** O último dia escolhível, pela mesma razão. */
+  maxDay?: string;
 }
 
 /**
@@ -69,6 +81,8 @@ export function DatePicker({
   disabled,
   label,
   placeholder,
+  minDay,
+  maxDay,
 }: DatePickerProps): JSX.Element {
   const { t, locale } = useI18n();
   const [open, setOpen] = useState(false);
@@ -104,8 +118,24 @@ export function DatePicker({
     caret.current = null;
   });
 
+  /**
+   * O dia está dentro da faixa permitida?
+   *
+   * Comparação de texto ISO, e não de `Date`: `2026-09-03 < 2026-09-08` é
+   * verdade em ordem alfabética porque o formato é fixo, e assim não há
+   * conversão de fuso no meio para transformar o dia 1º no dia 30.
+   */
+  const dayAllowed = (iso: string): boolean =>
+    (!minDay || iso >= minDay) && (!maxDay || iso <= maxDay);
+
   const pickDay = (day: Date): void => {
-    onChange(toIsoDay(day));
+    const iso = toIsoDay(day);
+
+    if (!dayAllowed(iso)) {
+      return;
+    }
+
+    onChange(iso);
     setTyped(null);
     setOpen(false);
   };
@@ -129,7 +159,9 @@ export function DatePicker({
       (selected ?? today()).getFullYear(),
     );
 
-    if (iso) {
+    // Digitar é o outro caminho para o mesmo campo: sem esta guarda, o dia que
+    // o calendário recusa entraria pelo teclado.
+    if (iso && dayAllowed(iso)) {
       onChange(iso);
       setMonth(fromIsoDay(iso) ?? month);
     }
@@ -180,6 +212,11 @@ export function DatePicker({
   };
 
   const dayClass = (day: Date): string => {
+    if (!dayAllowed(toIsoDay(day))) {
+      // Continua desenhado, e não escondido: o calendário sem os dias 1 a 7
+      // pareceria quebrado, e é o cinza que diz "existe, mas não aqui".
+      return "text-muted-foreground/30 line-through";
+    }
     if (selected && isSameDay(day, selected)) {
       return "bg-primary text-primary-foreground font-semibold";
     }
@@ -285,9 +322,13 @@ export function DatePicker({
             <button
               key={day.toISOString()}
               type="button"
+              disabled={!dayAllowed(toIsoDay(day))}
               onClick={() => pickDay(day)}
               className={cn(
-                "flex h-8 w-8 items-center justify-center rounded-full text-sm transition-colors hover:bg-accent",
+                "flex h-8 w-8 items-center justify-center rounded-full text-sm transition-colors",
+                dayAllowed(toIsoDay(day))
+                  ? "hover:bg-accent"
+                  : "cursor-not-allowed hover:bg-transparent",
                 dayClass(day),
               )}
             >

package/src/features/rbac/panels/roles-panel.tsx

@@ -19,6 +19,7 @@ import {
   DialogHeader,
   DialogTitle,
   Field,
+  HoverTip,
   Input,
   Label,
 } from "#core/components/ui";
@@ -151,23 +152,29 @@ export function RolesPanel(): JSX.Element {
                 {canManage && (
                   <div className="flex">
                     {hasPermission("roles:update:any") && (
-                      <Button
-                        variant="ghost"
-                        size="icon"
-                        onClick={() => openEdit(role)}
-                      >
-                        <Pencil className="h-4 w-4" />
-                      </Button>
+                      <HoverTip label={t("common.edit")}>
+                        <Button
+                          aria-label={t("common.edit")}
+                          variant="ghost"
+                          size="icon"
+                          onClick={() => openEdit(role)}
+                        >
+                          <Pencil className="h-4 w-4" />
+                        </Button>
+                      </HoverTip>
                     )}
                     {hasPermission("roles:delete:any") && (
-                      <Button
-                        variant="ghost"
-                        size="icon"
-                        className="text-destructive"
-                        onClick={() => remove(role)}
-                      >
-                        <Trash2 className="h-4 w-4" />
-                      </Button>
+                      <HoverTip label={t("common.delete")}>
+                        <Button
+                          aria-label={t("common.delete")}
+                          variant="ghost"
+                          size="icon"
+                          className="text-destructive"
+                          onClick={() => remove(role)}
+                        >
+                          <Trash2 className="h-4 w-4" />
+                        </Button>
+                      </HoverTip>
                     )}
                   </div>
                 )}