From 2a4cf1d20bca3f67093d8f511ca6ffe28728d4b4 Mon Sep 17 00:00:00 2001
From: "soroush.asadi" <soroush.asadi@aliasaas.com>
Date: Thu, 11 Jun 2026 23:10:38 +0330
Subject: [PATCH] feat(dashboard): Jalali date pickers + mobile/tablet
 responsive shell
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Full Persian calendar:
- New JalaliDateField — Shamsi popover picker (Saturday-first weeks,
  Persian digits, امروز shortcut); wire format stays ISO Gregorian
  YYYY-MM-DD. Falls back to the native input for the en locale.
- Replaces all 5 native type="date" inputs (Gregorian-only pickers):
  reservations, expenses from/to, reports from/to.
- Reservations list date now renders Jalali instead of the raw ISO
  string; branches purge timestamp now formats with fa-IR.

Responsive shell (mobile + tablet):
- New MobileNav: hamburger in the topbar (< md) opening an RTL-aware
  slide-over drawer with all nav destinations, permission-filtered,
  Escape/backdrop close and body scroll lock.
- Desktop sidebar hidden below md; header center cluster (clock/plan)
  hidden below md; language switcher hidden below sm.
- Main content padding scales p-3 → p-4 → p-6.
- Verified at 375px and 768px: no horizontal overflow, drawer and
  Jalali picker fully functional.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../src/app/[locale]/(dashboard)/layout.tsx   |   2 +-
 .../components/branches/branches-screen.tsx   |   2 +-
 .../components/expenses/expenses-screen.tsx   |  22 +-
 .../layout/header-center-cluster.tsx          |   2 +-
 .../src/components/layout/mobile-nav.tsx      | 187 +++++++++++++++
 .../src/components/layout/sidebar.tsx         |   3 +-
 .../src/components/layout/topbar.tsx          |  14 +-
 .../src/components/reports/reports-screen.tsx |  24 +-
 .../reservations/reservations-screen.tsx      |  15 +-
 .../src/components/ui/jalali-date-field.tsx   | 221 ++++++++++++++++++
 10 files changed, 439 insertions(+), 53 deletions(-)
 create mode 100644 web/dashboard/src/components/layout/mobile-nav.tsx
 create mode 100644 web/dashboard/src/components/ui/jalali-date-field.tsx

diff --git a/web/dashboard/src/app/[locale]/(dashboard)/layout.tsx b/web/dashboard/src/app/[locale]/(dashboard)/layout.tsx
index c327a3c..c232527 100644
--- a/web/dashboard/src/app/[locale]/(dashboard)/layout.tsx
+++ b/web/dashboard/src/app/[locale]/(dashboard)/layout.tsx
@@ -37,7 +37,7 @@ export default function DashboardLayout({
   const mainColumn = (
     <div className="flex min-h-0 min-w-0 flex-1 flex-col">
       <Topbar />
-      <main className="min-h-0 flex-1 overflow-auto p-6 bg-background">
+      <main className="min-h-0 flex-1 overflow-auto bg-background p-3 sm:p-4 lg:p-6">
         <RouteGuard>{children}</RouteGuard>
       </main>
     </div>
diff --git a/web/dashboard/src/components/branches/branches-screen.tsx b/web/dashboard/src/components/branches/branches-screen.tsx
index 0e4e5ce..ea9f764 100644
--- a/web/dashboard/src/components/branches/branches-screen.tsx
+++ b/web/dashboard/src/components/branches/branches-screen.tsx
@@ -191,7 +191,7 @@ export function BranchesScreen() {
                       </p>
                       {b.scheduledPermanentDeleteAt ? (
                         <p className="text-[10px] text-muted-foreground" dir="ltr">
-                          {new Date(b.scheduledPermanentDeleteAt).toLocaleString()}
+                          {new Date(b.scheduledPermanentDeleteAt).toLocaleString("fa-IR")}
                         </p>
                       ) : null}
                     </div>
diff --git a/web/dashboard/src/components/expenses/expenses-screen.tsx b/web/dashboard/src/components/expenses/expenses-screen.tsx
index 871a0ee..8d45e7e 100644
--- a/web/dashboard/src/components/expenses/expenses-screen.tsx
+++ b/web/dashboard/src/components/expenses/expenses-screen.tsx
@@ -11,6 +11,7 @@ import { isoTodayTehran } from "@/lib/reports/analytics";
 import { PageHeader } from "@/components/layout/page-header";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
+import { JalaliDateField } from "@/components/ui/jalali-date-field";
 import { LabeledField } from "@/components/ui/labeled-field";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 type Branch = { id: string; name: string };
@@ -172,27 +173,10 @@ export function ExpensesScreen() {
             </select>
           </LabeledField>
           <LabeledField label={t("fromDate")} htmlFor="exp-from">
-            <Input
-              id="exp-from"
-              type="date"
-              dir="ltr"
-              className="w-40 text-end"
-              value={from}
-              max={to}
-              onChange={(e) => setFrom(e.target.value)}
-            />
+            <JalaliDateField id="exp-from" className="w-40" value={from} onChange={setFrom} />
           </LabeledField>
           <LabeledField label={t("toDate")} htmlFor="exp-to">
-            <Input
-              id="exp-to"
-              type="date"
-              dir="ltr"
-              className="w-40 text-end"
-              value={to}
-              min={from}
-              max={today}
-              onChange={(e) => setTo(e.target.value)}
-            />
+            <JalaliDateField id="exp-to" className="w-40" value={to} onChange={setTo} />
           </LabeledField>
           <div className="ms-auto text-end">
             <p className="text-[11px] font-medium uppercase tracking-[0.06em] text-muted-foreground">
diff --git a/web/dashboard/src/components/layout/header-center-cluster.tsx b/web/dashboard/src/components/layout/header-center-cluster.tsx
index ca5b158..cf76757 100644
--- a/web/dashboard/src/components/layout/header-center-cluster.tsx
+++ b/web/dashboard/src/components/layout/header-center-cluster.tsx
@@ -50,7 +50,7 @@ export function HeaderCenterCluster() {
 
   return (
     <div
-      className="pointer-events-none absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 items-center"
+      className="pointer-events-none absolute left-1/2 top-1/2 hidden -translate-x-1/2 -translate-y-1/2 items-center md:flex"
       aria-live="polite"
     >
       <div
diff --git a/web/dashboard/src/components/layout/mobile-nav.tsx b/web/dashboard/src/components/layout/mobile-nav.tsx
new file mode 100644
index 0000000..23eca2d
--- /dev/null
+++ b/web/dashboard/src/components/layout/mobile-nav.tsx
@@ -0,0 +1,187 @@
+"use client";
+
+// Mobile/tablet navigation: hamburger button + slide-over drawer (< md screens).
+// Shows the same destinations as the desktop sidebar — flat main items, then the
+// collapsible groups rendered as plain titled sections (everything visible, the
+// drawer itself scrolls), then the footer utility links.
+
+import { useEffect, useMemo, useState } from "react";
+import { createPortal } from "react-dom";
+import { Menu, X } from "lucide-react";
+import { useLocale, useTranslations } from "next-intl";
+import { Link, usePathname } from "@/i18n/routing";
+import { canSeeNavItem } from "@/lib/auth-permissions";
+import { permissionsOf } from "@/lib/permissions";
+import { FOOTER_NAV, NAV_GROUPS, type NavItemDef } from "@/lib/sidebar-nav";
+import { useAuthStore } from "@/lib/stores/auth.store";
+import { cn } from "@/lib/utils";
+
+function DrawerLink({
+  item,
+  label,
+  active,
+  onNavigate,
+}: {
+  item: NavItemDef;
+  label: string;
+  active: boolean;
+  onNavigate: () => void;
+}) {
+  const Icon = item.icon;
+  return (
+    <Link
+      href={item.href}
+      onClick={onNavigate}
+      className={cn(
+        "flex min-h-[44px] items-center gap-3 rounded-xl px-3 text-sm transition-colors cursor-pointer",
+        active
+          ? "bg-accent font-medium text-accent-foreground"
+          : "text-muted-foreground hover:bg-accent/50 hover:text-foreground"
+      )}
+    >
+      <Icon className={cn("h-5 w-5 shrink-0", active && "text-primary")} aria-hidden />
+      <span className="min-w-0 truncate">{label}</span>
+    </Link>
+  );
+}
+
+export function MobileNav() {
+  const t = useTranslations("nav");
+  const tGroups = useTranslations("nav.groups");
+  const tBrand = useTranslations("brand");
+  const locale = useLocale();
+  const pathname = usePathname();
+  const user = useAuthStore((s) => s.user);
+  const role = user?.role;
+  const branchId = user?.branchId ?? null;
+  const permissions = useMemo(() => permissionsOf(user), [user]);
+  const [open, setOpen] = useState(false);
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => setMounted(true), []);
+
+  // Close on Escape; lock body scroll while open.
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("keydown", onKey);
+    const prevOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.removeEventListener("keydown", onKey);
+      document.body.style.overflow = prevOverflow;
+    };
+  }, [open]);
+
+  const close = () => setOpen(false);
+  const isRtl = locale !== "en";
+
+  const visible = (items: NavItemDef[]) =>
+    items.filter((item) => canSeeNavItem(item.key, role, branchId, permissions));
+
+  const isActive = (item: NavItemDef) =>
+    item.href === "/"
+      ? pathname === "/"
+      : pathname === item.href || pathname.startsWith(`${item.href}/`);
+
+  return (
+    <>
+      <button
+        type="button"
+        onClick={() => setOpen(true)}
+        aria-label={t("aria")}
+        className="flex h-10 w-10 shrink-0 cursor-pointer items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-accent hover:text-foreground md:hidden"
+      >
+        <Menu className="h-5 w-5" aria-hidden />
+      </button>
+
+      {mounted &&
+        open &&
+        createPortal(
+          <div className="fixed inset-0 z-50 md:hidden" dir={isRtl ? "rtl" : "ltr"}>
+            {/* Backdrop */}
+            <button
+              type="button"
+              aria-label={t("aria")}
+              onClick={close}
+              className="absolute inset-0 bg-black/40 backdrop-blur-[2px]"
+            />
+            {/* Panel */}
+            <div className="absolute inset-y-0 start-0 flex w-[280px] max-w-[85vw] flex-col bg-background shadow-2xl">
+              <div className="flex h-14 shrink-0 items-center justify-between border-b border-border px-4">
+                <span className="text-sm font-bold tracking-tight">{tBrand("name")}</span>
+                <button
+                  type="button"
+                  onClick={close}
+                  aria-label={t("collapseSidebar")}
+                  className="flex h-10 w-10 cursor-pointer items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
+                >
+                  <X className="h-5 w-5" aria-hidden />
+                </button>
+              </div>
+
+              <nav className="flex-1 overflow-y-auto p-3" aria-label={t("aria")}>
+                {NAV_GROUPS.map((group) => {
+                  const items = visible(group.items);
+                  if (items.length === 0) return null;
+                  return (
+                    <div key={group.id} className="mb-3">
+                      {!group.flat && (
+                        <p className="mb-1 px-3 text-[10px] font-semibold uppercase tracking-[0.08em] text-muted-foreground/70">
+                          {tGroups(group.id)}
+                        </p>
+                      )}
+                      <div className="space-y-0.5">
+                        {items.map((item) => (
+                          <DrawerLink
+                            key={item.key}
+                            item={item}
+                            label={t(item.key)}
+                            active={isActive(item)}
+                            onNavigate={close}
+                          />
+                        ))}
+                      </div>
+                    </div>
+                  );
+                })}
+
+                {visible(FOOTER_NAV).length > 0 && (
+                  <div className="border-t border-border/60 pt-2">
+                    <div className="space-y-0.5">
+                      {visible(FOOTER_NAV).map((item) => (
+                        <DrawerLink
+                          key={item.key}
+                          item={item}
+                          label={t(item.key)}
+                          active={isActive(item)}
+                          onNavigate={close}
+                        />
+                      ))}
+                    </div>
+                  </div>
+                )}
+              </nav>
+
+              {user && (
+                <div className="flex shrink-0 items-center gap-2 border-t border-border px-4 py-3">
+                  <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-primary/10">
+                    <span className="text-xs font-semibold text-primary">
+                      {(user.actor ?? user.role).charAt(0).toUpperCase()}
+                    </span>
+                  </div>
+                  <div className="min-w-0 flex-1">
+                    <p className="truncate text-xs font-medium">{user.actor ?? user.userId}</p>
+                    <p className="truncate text-[10px] text-muted-foreground">{user.role}</p>
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>,
+          document.body
+        )}
+    </>
+  );
+}
diff --git a/web/dashboard/src/components/layout/sidebar.tsx b/web/dashboard/src/components/layout/sidebar.tsx
index ea08798..e2652e3 100644
--- a/web/dashboard/src/components/layout/sidebar.tsx
+++ b/web/dashboard/src/components/layout/sidebar.tsx
@@ -283,7 +283,8 @@ export function Sidebar({ side }: { side: "left" | "right" }) {
   return (
     <aside
       className={cn(
-        "flex shrink-0 flex-col bg-background overflow-hidden",
+        // Hidden below md — mobile/tablet use the MobileNav drawer instead.
+        "hidden shrink-0 flex-col bg-background overflow-hidden md:flex",
         "transition-[width] duration-200 ease-in-out",
         collapsed ? "w-14" : "w-56",
         "border-border",
diff --git a/web/dashboard/src/components/layout/topbar.tsx b/web/dashboard/src/components/layout/topbar.tsx
index 8e4da40..d92883b 100644
--- a/web/dashboard/src/components/layout/topbar.tsx
+++ b/web/dashboard/src/components/layout/topbar.tsx
@@ -15,6 +15,7 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { HeaderCenterCluster } from "@/components/layout/header-center-cluster";
 import { BranchSwitcher } from "@/components/layout/branch-switcher";
+import { MobileNav } from "@/components/layout/mobile-nav";
 import { NotificationCenter } from "@/components/notifications/notification-center";
 import { SyncStatusIndicator } from "@/components/layout/sync-status-indicator";
 
@@ -36,7 +37,10 @@ export function Topbar() {
   };
 
   return (
-    <header className="relative flex h-14 items-center gap-3 border-b border-border bg-background px-4 sm:px-6">
+    <header className="relative flex h-14 items-center gap-2 border-b border-border bg-background px-2 sm:gap-3 sm:px-4 lg:px-6">
+      {/* Hamburger — mobile/tablet only */}
+      <MobileNav />
+
       {/* Cafe name */}
       <div className="flex min-w-0 flex-1 items-center gap-2">
         {showNameSkeleton ? (
@@ -67,10 +71,14 @@ export function Topbar() {
         <SyncStatusIndicator />
         <NotificationCenter />
 
-        {/* Language switcher */}
+        {/* Language switcher — hidden on phones to save header space */}
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
-            <Button variant="ghost" size="sm" className="h-8 gap-1 px-2.5 text-xs cursor-pointer">
+            <Button
+              variant="ghost"
+              size="sm"
+              className="hidden h-8 gap-1 px-2.5 text-xs cursor-pointer sm:inline-flex"
+            >
               {t(`languages.${locale}`)}
             </Button>
           </DropdownMenuTrigger>
diff --git a/web/dashboard/src/components/reports/reports-screen.tsx b/web/dashboard/src/components/reports/reports-screen.tsx
index a2f08ce..9b53c7f 100644
--- a/web/dashboard/src/components/reports/reports-screen.tsx
+++ b/web/dashboard/src/components/reports/reports-screen.tsx
@@ -25,6 +25,7 @@ import {
 import { PageHeader } from "@/components/layout/page-header";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
+import { JalaliDateField } from "@/components/ui/jalali-date-field";
 import { LabeledField } from "@/components/ui/labeled-field";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { cn } from "@/lib/utils";
@@ -222,30 +223,19 @@ export function ReportsScreen() {
           </div>
 
           <LabeledField label={t("fromDate")} htmlFor="report-from">
-            <Input
+            <JalaliDateField
               id="report-from"
-              type="date"
-              dir="ltr"
-              className="w-40 text-end"
+              className="w-40"
               value={range.from}
-              max={range.to}
-              onChange={(e) =>
-                setRange((r) => ({ ...r, from: e.target.value, preset: "custom" }))
-              }
+              onChange={(iso) => setRange((r) => ({ ...r, from: iso, preset: "custom" }))}
             />
           </LabeledField>
           <LabeledField label={t("toDate")} htmlFor="report-to">
-            <Input
+            <JalaliDateField
               id="report-to"
-              type="date"
-              dir="ltr"
-              className="w-40 text-end"
+              className="w-40"
               value={range.to}
-              min={range.from}
-              max={isoTodayTehran()}
-              onChange={(e) =>
-                setRange((r) => ({ ...r, to: e.target.value, preset: "custom" }))
-              }
+              onChange={(iso) => setRange((r) => ({ ...r, to: iso, preset: "custom" }))}
             />
           </LabeledField>
 
diff --git a/web/dashboard/src/components/reservations/reservations-screen.tsx b/web/dashboard/src/components/reservations/reservations-screen.tsx
index a83243f..d6113e2 100644
--- a/web/dashboard/src/components/reservations/reservations-screen.tsx
+++ b/web/dashboard/src/components/reservations/reservations-screen.tsx
@@ -2,7 +2,7 @@
 
 import { useState } from "react";
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
-import { useTranslations } from "next-intl";
+import { useLocale, useTranslations } from "next-intl";
 import { Link } from "@/i18n/routing";
 import { Trash2 } from "lucide-react";
 import { apiDelete, apiGet, apiPatch, apiPost } from "@/lib/api/client";
@@ -13,6 +13,7 @@ import { useAuthStore } from "@/lib/stores/auth.store";
 import { formatNumber } from "@/lib/format";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
+import { JalaliDateField, formatIsoDateJalali } from "@/components/ui/jalali-date-field";
 import { LabeledField } from "@/components/ui/labeled-field";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
@@ -50,6 +51,7 @@ const statusStyle: Record<ReservationStatus, string> = {
 export function ReservationsScreen() {
   const t = useTranslations("reservations");
   const tCommon = useTranslations("common");
+  const locale = useLocale();
   const apiError = useApiError();
   const cafeId = useAuthStore((s) => s.user?.cafeId);
   const queryClient = useQueryClient();
@@ -160,14 +162,7 @@ export function ReservationsScreen() {
             </select>
           </LabeledField>
           <LabeledField label={t("date")} htmlFor="res-date">
-            <Input
-              id="res-date"
-              type="date"
-              value={date}
-              onChange={(e) => setDate(e.target.value)}
-              dir="ltr"
-              className="text-end"
-            />
+            <JalaliDateField id="res-date" value={date} onChange={setDate} />
           </LabeledField>
           <LabeledField label={t("time")} htmlFor="res-time">
             <Input
@@ -222,7 +217,7 @@ export function ReservationsScreen() {
                   <div>
                     <p className="font-medium">{r.guestName}</p>
                     <p className="text-[11px] text-muted-foreground">
-                      {r.date} {r.time.slice(0, 5)} · {formatNumber(r.partySize)} {t("party")}
+                      {formatIsoDateJalali(r.date, locale)} {r.time.slice(0, 5)} · {formatNumber(r.partySize)} {t("party")}
                       {r.tableNumber ? ` · ${t("tableNumber", { number: r.tableNumber })}` : ""}
                     </p>
                     <p className="text-[11px] text-muted-foreground">{r.guestPhone}</p>
diff --git a/web/dashboard/src/components/ui/jalali-date-field.tsx b/web/dashboard/src/components/ui/jalali-date-field.tsx
new file mode 100644
index 0000000..3a17926
--- /dev/null
+++ b/web/dashboard/src/components/ui/jalali-date-field.tsx
@@ -0,0 +1,221 @@
+"use client";
+
+// Jalali (Shamsi) date picker. The `value`/`onChange` wire format stays the ISO
+// Gregorian `YYYY-MM-DD` the API expects — only the UI is Persian-calendar.
+// For the `en` locale it falls back to the native Gregorian date input.
+
+import { useEffect, useMemo, useRef, useState } from "react";
+import { useLocale } from "next-intl";
+import {
+  addMonths,
+  eachDayOfInterval,
+  endOfMonth,
+  endOfWeek,
+  format as formatJalali,
+  isSameDay,
+  isSameMonth,
+  parseISO,
+  startOfMonth,
+  startOfWeek,
+} from "date-fns-jalali";
+import { faIR } from "date-fns-jalali/locale/fa-IR";
+import { CalendarDays, ChevronLeft, ChevronRight } from "lucide-react";
+import { Input } from "@/components/ui/input";
+import { cn } from "@/lib/utils";
+
+const FA_DIGITS = "۰۱۲۳۴۵۶۷۸۹";
+const AR_DIGITS = "٠١٢٣٤٥٦٧٨٩";
+
+function localizeDigits(s: string, locale: string): string {
+  if (locale === "en") return s;
+  const digits = locale === "ar" ? AR_DIGITS : FA_DIGITS;
+  return s.replace(/\d/g, (d) => digits[Number(d)]!);
+}
+
+/** Gregorian ISO date (YYYY-MM-DD) from a local Date — no UTC shift. */
+function toIsoDate(d: Date): string {
+  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(
+    d.getDate()
+  ).padStart(2, "0")}`;
+}
+
+/** Saturday-first week, the Iranian convention. */
+const WEEK_STARTS_ON = 6 as const;
+const FA_WEEKDAYS = ["ش", "ی", "د", "س", "چ", "پ", "ج"];
+
+export function JalaliDateField({
+  id,
+  value,
+  onChange,
+  className,
+  placeholder,
+}: {
+  id?: string;
+  /** ISO Gregorian date string (YYYY-MM-DD) or "". */
+  value: string;
+  onChange: (iso: string) => void;
+  className?: string;
+  placeholder?: string;
+}) {
+  const locale = useLocale();
+  const [open, setOpen] = useState(false);
+  const selected = useMemo(() => (value ? parseISO(value) : null), [value]);
+  const [viewDate, setViewDate] = useState<Date>(() => selected ?? new Date());
+  const rootRef = useRef<HTMLDivElement>(null);
+
+  // Keep the visible month in sync when the value changes externally.
+  useEffect(() => {
+    if (selected) setViewDate(selected);
+  }, [selected]);
+
+  useEffect(() => {
+    if (!open) return;
+    const onDown = (e: MouseEvent) => {
+      if (rootRef.current && !rootRef.current.contains(e.target as Node)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", onDown);
+    return () => document.removeEventListener("mousedown", onDown);
+  }, [open]);
+
+  // English UI keeps the familiar native Gregorian picker.
+  if (locale === "en") {
+    return (
+      <Input
+        id={id}
+        type="date"
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        dir="ltr"
+        className={cn("text-end", className)}
+      />
+    );
+  }
+
+  const days = eachDayOfInterval({
+    start: startOfWeek(startOfMonth(viewDate), { weekStartsOn: WEEK_STARTS_ON }),
+    end: endOfWeek(endOfMonth(viewDate), { weekStartsOn: WEEK_STARTS_ON }),
+  });
+  const today = new Date();
+  const label = selected
+    ? localizeDigits(formatJalali(selected, "yyyy/MM/dd"), locale)
+    : (placeholder ?? "");
+  const monthTitle = localizeDigits(
+    formatJalali(viewDate, "MMMM yyyy", { locale: faIR }),
+    locale
+  );
+
+  return (
+    <div ref={rootRef} className="relative">
+      <button
+        id={id}
+        type="button"
+        onClick={() => setOpen((v) => !v)}
+        aria-haspopup="dialog"
+        aria-expanded={open}
+        className={cn(
+          "flex h-10 w-full cursor-pointer items-center justify-between gap-2 rounded-md border border-input bg-background px-3 py-2 text-sm transition-colors",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          !selected && "text-muted-foreground",
+          className
+        )}
+      >
+        <span className="truncate">{label || "—"}</span>
+        <CalendarDays className="h-4 w-4 shrink-0 text-muted-foreground" aria-hidden />
+      </button>
+
+      {open && (
+        <div
+          role="dialog"
+          className="absolute z-50 mt-1 w-64 rounded-xl border border-border bg-popover p-2 shadow-lg start-0"
+        >
+          {/* Month header */}
+          <div className="mb-1 flex items-center justify-between">
+            <button
+              type="button"
+              onClick={() => setViewDate((d) => addMonths(d, -1))}
+              aria-label="ماه قبل"
+              className="flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
+            >
+              <ChevronRight className="h-4 w-4 rtl:block ltr:hidden" aria-hidden />
+              <ChevronLeft className="h-4 w-4 rtl:hidden ltr:block" aria-hidden />
+            </button>
+            <span className="text-sm font-semibold">{monthTitle}</span>
+            <button
+              type="button"
+              onClick={() => setViewDate((d) => addMonths(d, 1))}
+              aria-label="ماه بعد"
+              className="flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
+            >
+              <ChevronLeft className="h-4 w-4 rtl:block ltr:hidden" aria-hidden />
+              <ChevronRight className="h-4 w-4 rtl:hidden ltr:block" aria-hidden />
+            </button>
+          </div>
+
+          {/* Weekday header */}
+          <div className="grid grid-cols-7 text-center">
+            {FA_WEEKDAYS.map((w) => (
+              <span key={w} className="py-1 text-[10px] font-semibold text-muted-foreground">
+                {w}
+              </span>
+            ))}
+          </div>
+
+          {/* Day grid */}
+          <div className="grid grid-cols-7">
+            {days.map((day) => {
+              const inMonth = isSameMonth(day, viewDate);
+              const isSelected = selected ? isSameDay(day, selected) : false;
+              const isToday = isSameDay(day, today);
+              return (
+                <button
+                  key={day.getTime()}
+                  type="button"
+                  onClick={() => {
+                    onChange(toIsoDate(day));
+                    setOpen(false);
+                  }}
+                  className={cn(
+                    "flex h-8 cursor-pointer items-center justify-center rounded-lg text-xs transition-colors",
+                    inMonth ? "text-foreground" : "text-muted-foreground/40",
+                    isSelected
+                      ? "bg-primary font-bold text-primary-foreground"
+                      : isToday
+                        ? "border border-primary/50 font-semibold text-primary hover:bg-accent"
+                        : "hover:bg-accent"
+                  )}
+                >
+                  {localizeDigits(formatJalali(day, "d"), locale)}
+                </button>
+              );
+            })}
+          </div>
+
+          {/* Today shortcut */}
+          <button
+            type="button"
+            onClick={() => {
+              onChange(toIsoDate(today));
+              setViewDate(today);
+              setOpen(false);
+            }}
+            className="mt-1 w-full cursor-pointer rounded-lg py-1.5 text-center text-xs font-medium text-primary transition-colors hover:bg-accent"
+          >
+            امروز
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}
+
+/** Format an ISO Gregorian date string as a Jalali date for display. */
+export function formatIsoDateJalali(iso: string, locale: string): string {
+  if (locale === "en") return iso;
+  try {
+    return localizeDigits(formatJalali(parseISO(iso), "yyyy/MM/dd"), locale);
+  } catch {
+    return iso;
+  }
+}