feat: 3.01 header logos+nav, 3.09 dynamic contact types, 3.10 hot-desk window, 3.11 vault email+link

src/modules/address-book/components/address-book-module.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useMemo } from "react";
 import {
   Plus,
   Pencil,
@@ -46,7 +46,7 @@ import { useTags } from "@/core/tagging";
 import { downloadVCard } from "../services/vcard-export";
 import { useRegistry } from "@/modules/registratura/hooks/use-registry";
 
-const TYPE_LABELS: Record<ContactType, string> = {
+const DEFAULT_TYPE_LABELS: Record<string, string> = {
   client: "Client",
   supplier: "Furnizor",
   institution: "Instituție",
@@ -54,6 +54,11 @@ const TYPE_LABELS: Record<ContactType, string> = {
   internal: "Intern",
 };
 
+/** Get a label for any contact type, including custom ones */
+function getTypeLabel(type: string): string {
+  return DEFAULT_TYPE_LABELS[type] ?? type;
+}
+
 type ViewMode = "list" | "add" | "edit";
 
 export function AddressBookModule() {
@@ -75,6 +80,17 @@ export function AddressBookModule() {
     null,
   );
 
+  // Collect all contact types (defaults + custom ones from existing contacts)
+  const allTypes = useMemo(() => {
+    const types = { ...DEFAULT_TYPE_LABELS };
+    for (const c of allContacts) {
+      if (c.type && !types[c.type]) {
+        types[c.type] = c.type; // custom type — label is the type itself
+      }
+    }
+    return types;
+  }, [allContacts]);
+
   const handleSubmit = async (
     data: Omit<AddressContact, "id" | "createdAt" | "updatedAt">,
   ) => {
@@ -97,18 +113,20 @@ export function AddressBookModule() {
             <p className="text-2xl font-bold">{allContacts.length}</p>
           </CardContent>
         </Card>
-        {(Object.keys(TYPE_LABELS) as ContactType[]).slice(0, 4).map((type) => (
+        {Object.keys(DEFAULT_TYPE_LABELS)
-          <Card key={type}>
+          .slice(0, 4)
-            <CardContent className="p-4">
+          .map((type) => (
-              <p className="text-xs text-muted-foreground">
+            <Card key={type}>
-                {TYPE_LABELS[type]}
+              <CardContent className="p-4">
-              </p>
+                <p className="text-xs text-muted-foreground">
-              <p className="text-2xl font-bold">
+                  {getTypeLabel(type)}
-                {allContacts.filter((c) => c.type === type).length}
+                </p>
-              </p>
+                <p className="text-2xl font-bold">
-            </CardContent>
+                  {allContacts.filter((c) => c.type === type).length}
-          </Card>
+                </p>
-        ))}
+              </CardContent>
+            </Card>
+          ))}
       </div>
 
       {viewMode === "list" && (
@@ -134,9 +152,9 @@ export function AddressBookModule() {
               </SelectTrigger>
               <SelectContent>
                 <SelectItem value="all">Toate tipurile</SelectItem>
-                {(Object.keys(TYPE_LABELS) as ContactType[]).map((t) => (
+                {Object.keys(allTypes).map((t) => (
                   <SelectItem key={t} value={t}>
-                    {TYPE_LABELS[t]}
+                    {allTypes[t]}
                   </SelectItem>
                 ))}
               </SelectContent>
@@ -269,7 +287,7 @@ function ContactCard({
                 </p>
               )}
               <Badge variant="outline" className="text-[10px]">
-                {TYPE_LABELS[contact.type]}
+                {getTypeLabel(contact.type)}
               </Badge>
               {contact.department && (
                 <Badge variant="secondary" className="text-[10px]">
@@ -380,7 +398,7 @@ function ContactDetailDialog({
         <DialogHeader>
           <DialogTitle className="flex items-center gap-3">
             <span>{contact.name}</span>
-            <Badge variant="outline">{TYPE_LABELS[contact.type]}</Badge>
+            <Badge variant="outline">{getTypeLabel(contact.type)}</Badge>
           </DialogTitle>
         </DialogHeader>
 
@@ -565,6 +583,99 @@ function ContactDetailDialog({
   );
 }
 
+// ── Creatable Type Select ──
+
+function CreatableTypeSelect({
+  value,
+  onChange,
+}: {
+  value: string;
+  onChange: (v: string) => void;
+}) {
+  const [isCreating, setIsCreating] = useState(false);
+  const [customValue, setCustomValue] = useState("");
+
+  if (isCreating) {
+    return (
+      <div className="mt-1 flex gap-1.5">
+        <Input
+          value={customValue}
+          onChange={(e) => setCustomValue(e.target.value)}
+          placeholder="Tip nou (ex: Colaborator Extern)"
+          className="flex-1"
+          autoFocus
+          onKeyDown={(e) => {
+            if (e.key === "Enter" && customValue.trim()) {
+              e.preventDefault();
+              onChange(customValue.trim());
+              setIsCreating(false);
+              setCustomValue("");
+            }
+            if (e.key === "Escape") {
+              setIsCreating(false);
+              setCustomValue("");
+            }
+          }}
+        />
+        <Button
+          type="button"
+          size="sm"
+          onClick={() => {
+            if (customValue.trim()) {
+              onChange(customValue.trim());
+            }
+            setIsCreating(false);
+            setCustomValue("");
+          }}
+        >
+          OK
+        </Button>
+        <Button
+          type="button"
+          variant="ghost"
+          size="sm"
+          onClick={() => {
+            setIsCreating(false);
+            setCustomValue("");
+          }}
+        >
+          <X className="h-3.5 w-3.5" />
+        </Button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="mt-1 flex gap-1.5">
+      <Select value={value} onValueChange={onChange}>
+        <SelectTrigger className="flex-1">
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent>
+          {Object.entries(DEFAULT_TYPE_LABELS).map(([k, label]) => (
+            <SelectItem key={k} value={k}>
+              {label}
+            </SelectItem>
+          ))}
+          {/* Show current custom value if not in defaults */}
+          {value && !DEFAULT_TYPE_LABELS[value] && (
+            <SelectItem value={value}>{value}</SelectItem>
+          )}
+        </SelectContent>
+      </Select>
+      <Button
+        type="button"
+        variant="outline"
+        size="icon"
+        onClick={() => setIsCreating(true)}
+        title="Adaugă tip nou"
+      >
+        <Plus className="h-3.5 w-3.5" />
+      </Button>
+    </div>
+  );
+}
+
 // ── Contact Form ──
 
 function ContactForm({
@@ -675,18 +786,7 @@ function ContactForm({
         </div>
         <div>
           <Label>Tip</Label>
-          <Select value={type} onValueChange={(v) => setType(v as ContactType)}>
+          <CreatableTypeSelect value={type} onChange={(v) => setType(v)} />
-            <SelectTrigger className="mt-1">
-              <SelectValue />
-            </SelectTrigger>
-            <SelectContent>
-              {(Object.keys(TYPE_LABELS) as ContactType[]).map((t) => (
-                <SelectItem key={t} value={t}>
-                  {TYPE_LABELS[t]}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
         </div>
       </div>
 

src/modules/address-book/types.ts

@@ -1,6 +1,12 @@
-import type { Visibility } from '@/core/module-registry/types';
+import type { Visibility } from "@/core/module-registry/types";
 
-export type ContactType = 'client' | 'supplier' | 'institution' | 'collaborator' | 'internal';
+export type ContactType =
+  | "client"
+  | "supplier"
+  | "institution"
+  | "collaborator"
+  | "internal"
+  | string;
 
 /** A contact person within an organization/entity */
 export interface ContactPerson {

src/modules/hot-desk/components/desk-room-layout.tsx

@@ -20,16 +20,26 @@ export function DeskRoomLayout({
     <div className="flex flex-col items-center gap-3">
       {/* Room container — styled like a top-down floor plan */}
       <div className="relative w-full max-w-[340px] rounded-xl border border-border/60 bg-muted/20 p-5">
-        {/* Window indicator — top edge */}
+        {/* Window indicator — LEFT wall (landmark for orientation) */}
-        <div className="absolute top-0 left-4 right-4 h-1.5 rounded-b-sm bg-muted-foreground/15" />
+        <div className="absolute top-4 bottom-4 left-0 w-1.5 rounded-r-sm bg-sky-300/30 dark:bg-sky-500/20" />
-        <div className="absolute top-0 left-6 right-6 flex justify-between">
+        <div className="absolute top-6 bottom-6 left-0 flex flex-col justify-between">
-          {Array.from({ length: 8 }).map((_, i) => (
+          {Array.from({ length: 6 }).map((_, i) => (
             <div
               key={i}
-              className="mt-0.5 h-0.5 w-3 rounded-full bg-muted-foreground/10"
+              className="ml-0.5 h-3 w-0.5 rounded-full bg-sky-400/25 dark:bg-sky-400/15"
             />
           ))}
         </div>
+        {/* Window label */}
+        <div className="absolute left-1.5 top-1/2 -translate-y-1/2 -rotate-90 text-[9px] font-medium text-muted-foreground/40 tracking-widest uppercase select-none">
+          Fereastră
+        </div>
+
+        {/* Door indicator — RIGHT wall */}
+        <div className="absolute top-[60%] right-0 h-8 w-1.5 rounded-l-sm bg-amber-400/25 dark:bg-amber-500/15" />
+        <div className="absolute top-[60%] right-1.5 translate-y-1 text-[8px] text-muted-foreground/30 select-none">
+          Ușă
+        </div>
 
         {/* Central table */}
         <div className="mx-auto mt-4 mb-4 flex flex-col items-center">

src/modules/password-vault/components/password-vault-module.tsx

@@ -267,6 +267,11 @@ export function PasswordVaultModule() {
                       </div>
                       <p className="text-xs text-muted-foreground">
                         {entry.username}
+                        {entry.email && (
+                          <span className="ml-2 text-muted-foreground/70">
+                            ({entry.email})
+                          </span>
+                        )}
                       </p>
                       <div className="flex items-center gap-2">
                         <code className="text-xs">
@@ -301,9 +306,19 @@ export function PasswordVaultModule() {
                         )}
                       </div>
                       {entry.url && (
-                        <p className="flex items-center gap-1 text-xs text-muted-foreground">
+                        <a
+                          href={
+                            entry.url.startsWith("http")
+                              ? entry.url
+                              : `https://${entry.url}`
+                          }
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="flex items-center gap-1 text-xs text-primary hover:underline"
+                          onClick={(e) => e.stopPropagation()}
+                        >
                           <ExternalLink className="h-3 w-3" /> {entry.url}
-                        </p>
+                        </a>
                       )}
                       {entry.customFields && entry.customFields.length > 0 && (
                         <div className="mt-1 flex flex-wrap gap-1">
@@ -408,6 +423,7 @@ function VaultForm({
 }) {
   const [label, setLabel] = useState(initial?.label ?? "");
   const [username, setUsername] = useState(initial?.username ?? "");
+  const [email, setEmail] = useState(initial?.email ?? "");
   const [password, setPassword] = useState(initial?.password ?? "");
   const [url, setUrl] = useState(initial?.url ?? "");
   const [category, setCategory] = useState<VaultEntryCategory>(
@@ -468,6 +484,7 @@ function VaultForm({
         onSubmit({
           label,
           username,
+          email,
           password,
           url,
           category,
@@ -539,6 +556,16 @@ function VaultForm({
           />
         </div>
       </div>
+      <div>
+        <Label>Email</Label>
+        <Input
+          type="email"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          className="mt-1"
+          placeholder="utilizator@exemplu.ro"
+        />
+      </div>
       <div>
         <Label>Parolă</Label>
         <div className="mt-1 flex gap-1.5">

src/modules/password-vault/types.ts

@@ -19,6 +19,7 @@ export interface VaultEntry {
   id: string;
   label: string;
   username: string;
+  email: string;
   password: string;
   url: string;
   category: VaultEntryCategory;

src/shared/components/layout/sidebar.tsx

@@ -3,7 +3,7 @@
 import Image from "next/image";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { useMemo } from "react";
+import { useMemo, useState, useCallback, useEffect } from "react";
 import * as Icons from "lucide-react";
 import { buildNavigation } from "@/config/navigation";
 import { COMPANIES } from "@/config/companies";
@@ -64,24 +64,61 @@ function NavItem({
   );
 }
 
-function SidebarLogo() {
+const LOGO_COMPANIES = ["studii-de-teren", "urban-switch"] as const;
-  const sdt = COMPANIES["studii-de-teren"];
 
-  const logoSrc = sdt.logo?.light ?? null;
+function SidebarLogos() {
+  const [clickCount, setClickCount] = useState(0);
+  const [shuffled, setShuffled] = useState(false);
 
-  if (!logoSrc) {
+  const handleLogoClick = useCallback(() => {
-    return <Icons.LayoutDashboard className="h-5 w-5 text-primary" />;
+    setClickCount((prev) => {
-  }
+      const next = prev + 1;
+      if (next >= 3) {
+        setShuffled((s) => !s);
+        return 0;
+      }
+      return next;
+    });
+  }, []);
+
+  // Reset click count after 2 seconds of inactivity
+  useEffect(() => {
+    if (clickCount === 0) return;
+    const timer = setTimeout(() => setClickCount(0), 2000);
+    return () => clearTimeout(timer);
+  }, [clickCount]);
+
+  const logos = shuffled ? [...LOGO_COMPANIES].reverse() : [...LOGO_COMPANIES];
 
   return (
-    <Image
+    <div className="flex items-center gap-1.5">
-      src={logoSrc}
+      {logos.map((companyId) => {
-      alt={sdt.shortName}
+        const company = COMPANIES[companyId];
-      width={28}
+        const logoSrc = company?.logo?.light;
-      height={28}
+        if (!logoSrc) return null;
-      className="h-7 w-7 shrink-0"
+        return (
-      suppressHydrationWarning
+          <button
-    />
+            key={companyId}
+            type="button"
+            onClick={handleLogoClick}
+            className={cn(
+              "relative shrink-0 rounded-md p-0.5 transition-all duration-300 hover:scale-110 focus:outline-none",
+              shuffled && "animate-pulse",
+            )}
+            title={company.shortName}
+          >
+            <Image
+              src={logoSrc}
+              alt={company.shortName}
+              width={36}
+              height={36}
+              className="h-9 w-9 object-contain"
+              suppressHydrationWarning
+            />
+          </button>
+        );
+      })}
+    </div>
   );
 }
 
@@ -91,10 +128,14 @@ export function Sidebar() {
 
   return (
     <aside className="flex h-full w-64 shrink-0 flex-col border-r bg-card">
-      <div className="flex h-14 items-center gap-2 border-b px-4">
+      <Link
-        <SidebarLogo />
+        href="/"
+        className="flex h-14 items-center gap-2.5 border-b px-4 transition-colors hover:bg-accent/30"
+        title="Panou principal"
+      >
+        <SidebarLogos />
         <span className="text-lg font-semibold">ArchiTools</span>
-      </div>
+      </Link>
 
       <ScrollArea className="flex-1 px-3 py-3">
         <Link