From eb96af3e4b59b38374b16a869ea91d8aa09e5379 Mon Sep 17 00:00:00 2001
From: AI Assistant <ai@architools.local>
Date: Tue, 10 Mar 2026 08:21:54 +0200
Subject: [PATCH] feat(registratura): add best practices popover + contextual
 tooltips on form fields
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- "Bune practici" button in registry header opens a popover with internal rules
  (numerotare, completare, termene, atașamente, închidere)
- Info tooltips on form labels: Direcție, Tip document, Subiect, Expeditor,
  Destinatar, Atașamente (consistent with existing pattern on Data document)
- Install shadcn/ui Popover component

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../components/registratura-module.tsx        | 75 +++++++++++++-
 .../components/registry-entry-form.tsx        | 99 ++++++++++++++++++-
 src/shared/components/ui/popover.tsx          | 89 +++++++++++++++++
 3 files changed, 254 insertions(+), 9 deletions(-)
 create mode 100644 src/shared/components/ui/popover.tsx

diff --git a/src/modules/registratura/components/registratura-module.tsx b/src/modules/registratura/components/registratura-module.tsx
index 9028763..a1a7067 100644
--- a/src/modules/registratura/components/registratura-module.tsx
+++ b/src/modules/registratura/components/registratura-module.tsx
@@ -1,7 +1,13 @@
 "use client";
 
 import { useState, useMemo, useCallback } from "react";
-import { Plus } from "lucide-react";
+import { BookOpen, Plus } from "lucide-react";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/shared/components/ui/popover";
+import { ScrollArea } from "@/shared/components/ui/scroll-area";
 import { Button } from "@/shared/components/ui/button";
 import {
   Card,
@@ -305,9 +311,70 @@ export function RegistraturaModule() {
             <>
               <div className="flex items-center justify-between gap-4">
                 <RegistryFilters filters={filters} onUpdate={updateFilter} />
-                <Button onClick={() => setViewMode("add")} className="shrink-0">
-                  <Plus className="mr-1.5 h-4 w-4" /> Adaugă
-                </Button>
+                <div className="flex items-center gap-2 shrink-0">
+                  <Popover>
+                    <PopoverTrigger asChild>
+                      <Button variant="ghost" size="sm" className="text-muted-foreground">
+                        <BookOpen className="mr-1.5 h-4 w-4" />
+                        Bune practici
+                      </Button>
+                    </PopoverTrigger>
+                    <PopoverContent side="bottom" align="end" className="w-96 p-0">
+                      <ScrollArea className="h-[420px]">
+                        <div className="p-4 space-y-4 text-sm">
+                          <h4 className="font-semibold">Bune practici — Registratură</h4>
+
+                          <div className="space-y-1.5">
+                            <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">Numerotare</p>
+                            <ul className="text-xs text-muted-foreground space-y-1 list-disc pl-4">
+                              <li>Numerele se atribuie automat (BTG-2026-IN-00001)</li>
+                              <li>Nu modifica manual numărul de înregistrare</li>
+                              <li>Fiecare companie are propria secvență</li>
+                            </ul>
+                          </div>
+
+                          <div className="space-y-1.5">
+                            <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">Completare</p>
+                            <ul className="text-xs text-muted-foreground space-y-1 list-disc pl-4">
+                              <li>Subiectul: scurt, descriptiv, fără abrevieri ambigue</li>
+                              <li>Completează mereu expeditorul/destinatarul</li>
+                              <li>Folosește tipuri de document corecte (nu «Altele» dacă există opțiune potrivită)</li>
+                            </ul>
+                          </div>
+
+                          <div className="space-y-1.5">
+                            <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">Termene</p>
+                            <ul className="text-xs text-muted-foreground space-y-1 list-disc pl-4">
+                              <li>Setează termen pentru orice document care necesită răspuns</li>
+                              <li>Termenele legale se adaugă separat din tab-ul «Termene legale»</li>
+                              <li>Verifică termenele depășite zilnic</li>
+                            </ul>
+                          </div>
+
+                          <div className="space-y-1.5">
+                            <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">Atașamente</p>
+                            <ul className="text-xs text-muted-foreground space-y-1 list-disc pl-4">
+                              <li>Preferă căi NAS pentru fișiere mari (&gt;5MB)</li>
+                              <li>Denumește fișierele clar: «Aviz_ISU_ProiectX_2026.pdf»</li>
+                              <li>Nu atașa versiuni intermediare — doar versiunea finală</li>
+                            </ul>
+                          </div>
+
+                          <div className="space-y-1.5">
+                            <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">Închidere</p>
+                            <ul className="text-xs text-muted-foreground space-y-1 list-disc pl-4">
+                              <li>Închide dosarul doar când toate acțiunile sunt finalizate</li>
+                              <li>Adaugă motiv de închidere descriptiv</li>
+                            </ul>
+                          </div>
+                        </div>
+                      </ScrollArea>
+                    </PopoverContent>
+                  </Popover>
+                  <Button onClick={() => setViewMode("add")} className="shrink-0">
+                    <Plus className="mr-1.5 h-4 w-4" /> Adaugă
+                  </Button>
+                </div>
               </div>
 
               <RegistryTable
diff --git a/src/modules/registratura/components/registry-entry-form.tsx b/src/modules/registratura/components/registry-entry-form.tsx
index 2b13651..70c5705 100644
--- a/src/modules/registratura/components/registry-entry-form.tsx
+++ b/src/modules/registratura/components/registry-entry-form.tsx
@@ -526,7 +526,22 @@ export function RegistryEntryForm({
       {/* Row 1: Direction + Document type + Date */}
       <div className="grid gap-4 sm:grid-cols-3">
         <div>
-          <Label>Direcție</Label>
+          <Label className="flex items-center gap-1.5">
+            Direcție
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Info className="h-3.5 w-3.5 text-muted-foreground cursor-help" />
+                </TooltipTrigger>
+                <TooltipContent side="right" className="max-w-xs">
+                  <p className="text-xs">
+                    Intrat = document primit de la terți. Ieșit = document
+                    emis de noi către terți.
+                  </p>
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+          </Label>
           <div className="mt-1 flex rounded-lg border bg-muted/30 p-1">
             <button
               type="button"
@@ -557,7 +572,22 @@ export function RegistryEntryForm({
           </div>
         </div>
         <div>
-          <Label>Tip document</Label>
+          <Label className="flex items-center gap-1.5">
+            Tip document
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Info className="h-3.5 w-3.5 text-muted-foreground cursor-help" />
+                </TooltipTrigger>
+                <TooltipContent side="right" className="max-w-xs">
+                  <p className="text-xs">
+                    Alege tipul care descrie cel mai bine documentul. Poți
+                    adăuga tipuri noi cu câmpul de mai jos.
+                  </p>
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+          </Label>
           <div className="mt-1">
             <Select
               value={allDocTypes.has(documentType) ? documentType : "altele"}
@@ -635,7 +665,23 @@ export function RegistryEntryForm({
 
       {/* Subject */}
       <div>
-        <Label>Subiect *</Label>
+        <Label className="flex items-center gap-1.5">
+          Subiect *
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Info className="h-3.5 w-3.5 text-muted-foreground cursor-help" />
+              </TooltipTrigger>
+              <TooltipContent side="right" className="max-w-xs">
+                <p className="text-xs">
+                  Scurt și descriptiv: «Cerere CU nr. 123/2026 — Str.
+                  Exemplu» sau «Aviz ISU — Proiect X». Nu folosi prefixe de
+                  numerotare.
+                </p>
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        </Label>
         <Input
           value={subject}
           onChange={(e) => setSubject(e.target.value)}
@@ -648,7 +694,22 @@ export function RegistryEntryForm({
       <div className="grid gap-4 sm:grid-cols-2">
         {/* Sender */}
         <div className="relative">
-          <Label>Expeditor</Label>
+          <Label className="flex items-center gap-1.5">
+            Expeditor
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Info className="h-3.5 w-3.5 text-muted-foreground cursor-help" />
+                </TooltipTrigger>
+                <TooltipContent side="right" className="max-w-xs">
+                  <p className="text-xs">
+                    Cine a trimis documentul. Caută în Agenda de contacte sau
+                    creează rapid un contact nou.
+                  </p>
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+          </Label>
           <Input
             value={sender}
             onChange={(e) => {
@@ -674,7 +735,22 @@ export function RegistryEntryForm({
         </div>
         {/* Recipient */}
         <div className="relative">
-          <Label>Destinatar</Label>
+          <Label className="flex items-center gap-1.5">
+            Destinatar
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Info className="h-3.5 w-3.5 text-muted-foreground cursor-help" />
+                </TooltipTrigger>
+                <TooltipContent side="right" className="max-w-xs">
+                  <p className="text-xs">
+                    Cui trimitem documentul. Caută în Agenda de contacte sau
+                    creează rapid un contact nou.
+                  </p>
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+          </Label>
           <Input
             value={recipient}
             onChange={(e) => {
@@ -1179,6 +1255,19 @@ export function RegistryEntryForm({
         <div className="flex items-center justify-between">
           <Label className="flex items-center gap-1.5">
             Atașamente
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Info className="h-3.5 w-3.5 text-muted-foreground cursor-help" />
+                </TooltipTrigger>
+                <TooltipContent side="right" className="max-w-xs">
+                  <p className="text-xs">
+                    Atașează fișiere sau introdu căi de rețea NAS
+                    (\\newamun\...). Preferă NAS pentru fișiere mari (&gt;5MB).
+                  </p>
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
             {isUploading && (
               <span className="flex items-center gap-1 text-xs text-amber-600 dark:text-amber-400 font-normal">
                 <Loader2 className="h-3 w-3 animate-spin" />
diff --git a/src/shared/components/ui/popover.tsx b/src/shared/components/ui/popover.tsx
new file mode 100644
index 0000000..3ba599e
--- /dev/null
+++ b/src/shared/components/ui/popover.tsx
@@ -0,0 +1,89 @@
+"use client"
+
+import * as React from "react"
+import { Popover as PopoverPrimitive } from "radix-ui"
+
+import { cn } from "@/shared/lib/utils"
+
+function Popover({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />
+}
+
+function PopoverTrigger({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
+}
+
+function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        data-slot="popover-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+          className
+        )}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  )
+}
+
+function PopoverAnchor({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
+  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
+}
+
+function PopoverHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="popover-header"
+      className={cn("flex flex-col gap-1 text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function PopoverTitle({ className, ...props }: React.ComponentProps<"h2">) {
+  return (
+    <div
+      data-slot="popover-title"
+      className={cn("font-medium", className)}
+      {...props}
+    />
+  )
+}
+
+function PopoverDescription({
+  className,
+  ...props
+}: React.ComponentProps<"p">) {
+  return (
+    <p
+      data-slot="popover-description"
+      className={cn("text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+  PopoverAnchor,
+  PopoverHeader,
+  PopoverTitle,
+  PopoverDescription,
+}