feat(frontend): add shared client libraries and UI primitives

Introduce API helpers, types, hooks, design-system components, and the authenticated app shell.

frontend/src/components/ui/avatar.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import * as React from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import { cn } from "@/lib/utils";
+
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn("relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full", className)}
+    {...props}
+  />
+));
+Avatar.displayName = "Avatar";
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image ref={ref} className={cn("aspect-square h-full w-full", className)} {...props} />
+));
+AvatarImage.displayName = "AvatarImage";
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn(
+      "flex h-full w-full items-center justify-center rounded-full bg-primary text-sm font-bold text-primary-foreground",
+      className
+    )}
+    {...props}
+  />
+));
+AvatarFallback.displayName = "AvatarFallback";
+
+export { Avatar, AvatarImage, AvatarFallback };

frontend/src/components/ui/badge.tsx

@@ -0,0 +1,32 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+
+const badgeVariants = cva(
+  "inline-flex items-center gap-1 rounded border px-2 py-0.5 text-xs font-semibold transition-colors",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary/15 text-primary",
+        secondary: "border-transparent bg-muted text-muted-foreground",
+        success: "border-transparent bg-success/15 text-success",
+        destructive: "border-transparent bg-destructive/15 text-destructive",
+        gold: "border-transparent bg-gold/15 text-gold",
+        accent: "border-transparent bg-accent/15 text-accent",
+        cyan: "border-transparent bg-secondary/15 text-secondary",
+        outline: "border-border text-foreground",
+      },
+    },
+    defaultVariants: { variant: "default" },
+  }
+);
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return <div className={cn(badgeVariants({ variant }), className)} {...props} />;
+}
+
+export { Badge, badgeVariants };

frontend/src/components/ui/button.tsx

@@ -0,0 +1,45 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg border font-sans text-sm font-bold transition-all duration-300 ease-[var(--ease-soft)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 cursor-pointer select-none active:translate-y-px active:shadow-none",
+  {
+    variants: {
+      variant: {
+        default: "border-primary bg-primary text-primary-foreground shadow-offset hover:-translate-y-0.5",
+        gradient: "border-primary bg-primary text-primary-foreground shadow-offset hover:-translate-y-0.5",
+        secondary: "border-secondary bg-secondary text-secondary-foreground hover:bg-secondary/90",
+        outline: "border-2 border-input bg-card text-foreground shadow-offset-sm hover:bg-muted",
+        ghost: "border-transparent hover:bg-muted text-foreground",
+        destructive: "border-destructive bg-destructive text-destructive-foreground shadow-offset-sm hover:-translate-y-0.5",
+        success: "border-success bg-success text-success-foreground shadow-offset-sm hover:-translate-y-0.5",
+        link: "border-transparent text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-10 rounded-lg px-4 py-2",
+        sm: "h-8 rounded-lg px-3 text-xs",
+        lg: "h-[3.25rem] rounded-2xl px-7 text-base",
+        icon: "h-10 w-10 rounded-xl",
+      },
+    },
+    defaultVariants: { variant: "default", size: "default" },
+  }
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />;
+  }
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };

frontend/src/components/ui/card.tsx

@@ -0,0 +1,53 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(
+        "rounded-xl border border-border bg-card text-card-foreground shadow-soft",
+        className,
+      )}
+      {...props}
+    />
+  )
+);
+Card.displayName = "Card";
+
+const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("flex flex-col space-y-1.5 p-6", className)} {...props} />
+  )
+);
+CardHeader.displayName = "CardHeader";
+
+const CardTitle = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("text-xl font-semibold leading-none", className)} {...props} />
+  )
+);
+CardTitle.displayName = "CardTitle";
+
+const CardDescription = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
+  )
+);
+CardDescription.displayName = "CardDescription";
+
+const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+  )
+);
+CardContent.displayName = "CardContent";
+
+const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("flex items-center p-6 pt-0", className)} {...props} />
+  )
+);
+CardFooter.displayName = "CardFooter";
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };

frontend/src/components/ui/dialog.tsx

@@ -0,0 +1,97 @@
+"use client";
+
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+const Dialog = DialogPrimitive.Root;
+const DialogTrigger = DialogPrimitive.Trigger;
+const DialogPortal = DialogPrimitive.Portal;
+const DialogClose = DialogPrimitive.Close;
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      "fixed inset-0 z-50 bg-black/60 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 duration-300",
+      className
+    )}
+    {...props}
+  />
+));
+DialogOverlay.displayName = "DialogOverlay";
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border border-border bg-popover p-6 shadow-md rounded-md duration-300 sm:max-w-lg data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="absolute end-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none">
+        <X className="h-4 w-4" />
+        <span className="sr-only">بستن</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+));
+DialogContent.displayName = "DialogContent";
+
+const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("flex flex-col space-y-1.5 text-center sm:text-start", className)} {...props} />
+);
+DialogHeader.displayName = "DialogHeader";
+
+const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)} {...props} />
+);
+DialogFooter.displayName = "DialogFooter";
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold leading-none tracking-tight", className)}
+    {...props}
+  />
+));
+DialogTitle.displayName = "DialogTitle";
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
+DialogDescription.displayName = "DialogDescription";
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogTrigger,
+  DialogClose,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+};

frontend/src/components/ui/dropdown-menu.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import * as React from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { cn } from "@/lib/utils";
+
+const DropdownMenu = DropdownMenuPrimitive.Root;
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 8, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 min-w-44 overflow-hidden rounded-lg border border-border bg-popover p-1.5 text-popover-foreground shadow-md",
+        className
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+));
+DropdownMenuContent.displayName = "DropdownMenuContent";
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-pointer select-none items-center gap-2 rounded-md px-2.5 py-2 text-sm outline-none transition-colors focus:bg-muted data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  />
+));
+DropdownMenuItem.displayName = "DropdownMenuItem";
+
+export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem };

frontend/src/components/ui/input.tsx

@@ -0,0 +1,48 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+const LATIN_INPUT_TYPES = new Set(["password", "email", "url", "tel"]);
+
+function wantsLatinDigits(props: React.InputHTMLAttributes<HTMLInputElement>): boolean {
+  const type = props.type ?? "text";
+  if (LATIN_INPUT_TYPES.has(type)) return true;
+  if (props.dir === "ltr") return true;
+  const ac = (props.autoComplete ?? "").toLowerCase();
+  if (
+    ac === "username" ||
+    ac === "email" ||
+    ac.includes("password") ||
+    ac === "one-time-code" ||
+    ac === "tel" ||
+    ac === "url"
+  ) {
+    return true;
+  }
+  const id = `${props.id ?? ""} ${props.name ?? ""}`.toLowerCase();
+  if (id.includes("captcha") || id.includes("password") || id.includes("username") || id.includes("email")) {
+    return true;
+  }
+  return false;
+}
+
+const Input = React.forwardRef<HTMLInputElement, React.InputHTMLAttributes<HTMLInputElement>>(
+  ({ className, type, ...props }, ref) => {
+    const latin = wantsLatinDigits({ type, ...props });
+    return (
+      <input
+        type={type}
+        className={cn(
+          // Fixed height + symmetric vertical padding; avoid clipping Vazirmatn descenders.
+          "box-border h-11 w-full rounded-lg border border-input bg-card px-3.5 py-0 font-sans text-sm font-medium leading-none outline-none transition-colors placeholder:font-sans placeholder:font-medium placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+          latin && "font-latin placeholder:font-latin",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Input.displayName = "Input";
+
+export { Input };

frontend/src/components/ui/jalali-datetime-picker.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import { useMemo } from "react";
+import DatePicker, { DateObject } from "react-multi-date-picker";
+import TimePicker from "react-multi-date-picker/plugins/time_picker";
+import persian from "react-date-object/calendars/persian";
+import persian_fa from "react-date-object/locales/persian_fa";
+import { cn } from "@/lib/utils";
+
+type Props = {
+  value?: string;
+  onChange: (iso: string) => void;
+  disabled?: boolean;
+  className?: string;
+  id?: string;
+  /** Accessible label for the input */
+  "aria-label"?: string;
+};
+
+function toDateObject(iso: string | undefined): DateObject | undefined {
+  if (!iso) return undefined;
+  const d = new Date(iso);
+  if (Number.isNaN(d.getTime())) return undefined;
+  return new DateObject({ date: d, calendar: persian, locale: persian_fa });
+}
+
+function toIso(obj: DateObject | null | undefined): string {
+  if (!obj) return "";
+  const js = obj.toDate();
+  if (Number.isNaN(js.getTime())) return "";
+  return js.toISOString();
+}
+
+/** Jalali calendar + time; value/onChange use ISO UTC strings for the API. */
+export function JalaliDateTimePicker({ value, onChange, disabled, className, id, "aria-label": ariaLabel }: Props) {
+  const selected = useMemo(() => toDateObject(value), [value]);
+
+  return (
+    <DatePicker
+      id={id}
+      value={selected}
+      onChange={(date) => {
+        if (Array.isArray(date)) {
+          onChange(toIso(date[0] ?? null));
+          return;
+        }
+        onChange(toIso(date));
+      }}
+      calendar={persian}
+      locale={persian_fa}
+      format="YYYY/MM/DD HH:mm"
+      plugins={[<TimePicker key="time" position="bottom" hideSeconds />]}
+      calendarPosition="bottom-right"
+      disabled={disabled}
+      editable={false}
+      inputClass={cn(
+        "box-border h-11 w-full rounded-lg border border-input bg-card px-3.5 py-0 font-sans text-sm font-medium leading-none outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      containerClassName="w-full"
+      aria-label={ariaLabel}
+    />
+  );
+}
+
+/** True when both ISO strings parse and end >= start. */
+export function isValidIsoRange(startsAt: string, endsAt: string): boolean {
+  if (!startsAt || !endsAt) return false;
+  const a = new Date(startsAt).getTime();
+  const b = new Date(endsAt).getTime();
+  if (Number.isNaN(a) || Number.isNaN(b)) return false;
+  return b >= a;
+}

frontend/src/components/ui/label.tsx

@@ -0,0 +1,20 @@
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { cn } from "@/lib/utils";
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(
+      "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+      className
+    )}
+    {...props}
+  />
+));
+Label.displayName = "Label";
+
+export { Label };

frontend/src/components/ui/password-input.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import * as React from "react";
+import { Eye, EyeOff } from "lucide-react";
+import { Input } from "@/components/ui/input";
+import { cn } from "@/lib/utils";
+
+const PasswordInput = React.forwardRef<
+  HTMLInputElement,
+  Omit<React.InputHTMLAttributes<HTMLInputElement>, "type">
+>(({ className, dir, autoComplete, ...props }, ref) => {
+  const [visible, setVisible] = React.useState(false);
+  // Default LTR for real passwords; callers can pass dir="rtl" for Persian secrets (e.g. security answer).
+  const resolvedDir = dir ?? "ltr";
+  const isRtl = resolvedDir === "rtl";
+
+  return (
+    <div className="relative">
+      <Input
+        ref={ref}
+        {...props}
+        type={visible ? "text" : "password"}
+        dir={resolvedDir}
+        autoComplete={autoComplete ?? "current-password"}
+        className={cn(
+          // Physical padding/toggle side so RTL page chrome cannot flip the eye away from the gutter.
+          "font-latin placeholder:font-latin pr-11",
+          isRtl ? "text-right" : "text-left",
+          className,
+        )}
+      />
+      <button
+        type="button"
+        onClick={() => setVisible((v) => !v)}
+        aria-label={visible ? "مخفی کردن رمز" : "نمایش رمز"}
+        aria-pressed={visible}
+        className="absolute right-1.5 top-1/2 grid h-8 w-8 -translate-y-1/2 place-items-center rounded-md text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+      >
+        {visible ? <EyeOff className="h-4 w-4" aria-hidden /> : <Eye className="h-4 w-4" aria-hidden />}
+      </button>
+    </div>
+  );
+});
+PasswordInput.displayName = "PasswordInput";
+
+export { PasswordInput };

frontend/src/components/ui/progress.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+interface ProgressProps extends React.HTMLAttributes<HTMLDivElement> {
+  value?: number;
+  gradient?: boolean;
+  /** Softer fill motion for verified-watch / long jumps. */
+  smooth?: boolean;
+}
+
+const Progress = React.forwardRef<HTMLDivElement, ProgressProps>(
+  ({ className, value = 0, gradient, smooth, ...props }, ref) => {
+    const pct = Math.min(100, Math.max(0, value));
+    return (
+      <div
+        ref={ref}
+        className={cn("relative h-2.5 w-full overflow-hidden rounded-full bg-muted", className)}
+        {...props}
+      >
+        <div
+          className={cn(
+            "h-full rounded-full will-change-[width] rtl:me-auto",
+            gradient ? "bg-primary" : "bg-primary",
+            smooth
+              ? "transition-[width] duration-1000 ease-[cubic-bezier(0.22,1,0.36,1)]"
+              : "transition-[width] duration-300 ease-out"
+          )}
+          style={{ width: `${pct}%` }}
+        />
+      </div>
+    );
+  }
+);
+Progress.displayName = "Progress";
+
+export { Progress };

frontend/src/components/ui/skeleton.tsx

@@ -0,0 +1,13 @@
+import { cn } from "@/lib/utils";
+
+export function Skeleton({ className }: { className?: string }) {
+  return <div aria-hidden className={cn("skeleton", className)} />;
+}
+
+export function SkeletonText({ className }: { className?: string }) {
+  return <Skeleton className={cn("h-4 rounded-md", className)} />;
+}
+
+export function SkeletonAvatar({ className }: { className?: string }) {
+  return <Skeleton className={cn("h-10 w-10 shrink-0 rounded-xl", className)} />;
+}

frontend/src/components/ui/switch.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import * as React from "react";
+import * as SwitchPrimitives from "@radix-ui/react-switch";
+import { cn } from "@/lib/utils";
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    dir="ltr"
+    className={cn(
+      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-muted",
+      className
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        "pointer-events-none block h-5 w-5 rounded-full bg-white shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
+      )}
+    />
+  </SwitchPrimitives.Root>
+));
+Switch.displayName = "Switch";
+
+export { Switch };

frontend/src/components/ui/tabs.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import * as React from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import { cn } from "@/lib/utils";
+
+const Tabs = TabsPrimitive.Root;
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
+      className
+    )}
+    {...props}
+  />
+));
+TabsList.displayName = "TabsList";
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "inline-flex items-center justify-center gap-1.5 whitespace-nowrap rounded-md px-3 py-1.5 text-sm font-medium transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:border data-[state=active]:border-border",
+      className
+    )}
+    {...props}
+  />
+));
+TabsTrigger.displayName = "TabsTrigger";
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn("mt-4 focus-visible:outline-none", className)}
+    {...props}
+  />
+));
+TabsContent.displayName = "TabsContent";
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };

frontend/src/components/ui/textarea.tsx

@@ -0,0 +1,19 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+const Textarea = React.forwardRef<
+  HTMLTextAreaElement,
+  React.TextareaHTMLAttributes<HTMLTextAreaElement>
+>(({ className, ...props }, ref) => (
+  <textarea
+    className={cn(
+      "flex min-h-[120px] w-full rounded-lg border border-input bg-card px-3.5 py-2.5 font-sans text-sm font-medium leading-normal outline-none transition-colors placeholder:font-sans placeholder:font-medium placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+      className,
+    )}
+    ref={ref}
+    {...props}
+  />
+));
+Textarea.displayName = "Textarea";
+
+export { Textarea };

frontend/src/components/ui/user-avatar.tsx

@@ -0,0 +1,75 @@
+"use client";
+
+import BoringAvatar from "boring-avatars";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { cn } from "@/lib/utils";
+
+const AVATAR_COLORS = ["#7d6df2", "#0f9b8e", "#16a34a", "#d97706", "#9333ea", "#0891b2", "#65a30d", "#f59e0b"];
+export { AVATAR_COLORS };
+
+export type AvatarVariantName = "marble" | "beam" | "pixel" | "sunset" | "ring" | "bauhaus";
+
+export const AVATAR_VARIANTS: { name: AvatarVariantName; label: string }[] = [
+  { name: "marble", label: "مرمر" },
+  { name: "beam", label: "بیم" },
+  { name: "pixel", label: "پیکسلی" },
+  { name: "sunset", label: "غروب" },
+  { name: "ring", label: "حلقه" },
+  { name: "bauhaus", label: "باهاوس" },
+];
+
+export function avatarPaletteOf(raw?: string): string[] {
+  if (!raw || !raw.startsWith("[")) return AVATAR_COLORS;
+  try {
+    const v = JSON.parse(raw);
+    if (Array.isArray(v) && v.length >= 2 && v.every((c) => typeof c === "string")) return v.slice(0, 6);
+  } catch {}
+  return AVATAR_COLORS;
+}
+
+type AvatarOwner = {
+  avatarVariant?: AvatarVariantName;
+  avatarPalette?: string;
+  avatarPhoto?: string;
+} | null | undefined;
+
+export function avatarPropsOf(u: AvatarOwner): { src: string | null; variant: AvatarVariantName; palette: string[] } {
+  return {
+    src: u?.avatarPhoto ?? null,
+    variant: u?.avatarVariant ?? "beam",
+    palette: avatarPaletteOf(u?.avatarPalette),
+  };
+}
+
+export function UserAvatar({
+  name,
+  src,
+  variant = "beam",
+  palette,
+  className,
+}: {
+  name: string;
+  src?: string | null;
+  variant?: AvatarVariantName;
+  palette?: string[];
+  className?: string;
+}) {
+  if (src) {
+    return (
+      <Avatar className={cn("ring-1 ring-black/5 dark:ring-white/10", className)}>
+        <AvatarImage src={src} alt={name} />
+        <AvatarFallback />
+      </Avatar>
+    );
+  }
+  return (
+    <span
+      className={cn(
+        "inline-grid shrink-0 place-items-center overflow-hidden rounded-full bg-background ring-1 ring-black/5 dark:ring-white/10",
+        className
+      )}
+    >
+      <BoringAvatar name={name} variant={variant} colors={palette ?? AVATAR_COLORS} size="100%" title={false} />
+    </span>
+  );
+}