feat(dashboard): Jalali date pickers + mobile/tablet responsive shell

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>

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>