feat: username/password authentication for admin and merchant panels

- Add PasswordHasher utility (PBKDF2/SHA-256, 100k iterations)
- Add Username + PasswordHash fields to Employee and SystemAdmin entities
- EF migration: AddPasswordLogin (nullable columns on both tables)
- Meezi.API: POST /api/auth/login (employee password login, CHOOSE_CAFE support)
- Meezi.API: PUT/DELETE /api/cafes/{id}/employees/{id}/credentials (Owner/Manager only)
- Meezi.Admin.API: POST /api/admin/auth/login + PUT /api/admin/auth/password
- Dashboard login page: OTP / Password tabs
- Admin login page: OTP / Password tabs
- HR screen: new Credentials tab for setting employee username/password
- PlatformDataSeeder: ensure system admin + integration settings in production
- Trial countdown banner: updated deadline to 1 Tir 1405 (Jun 22)
- i18n: fa/en/ar updated for all new UI strings

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

web/dashboard/src/app/[locale]/login/page.tsx

@@ -12,14 +12,24 @@ import { LabeledField } from "@/components/ui/labeled-field";
 import { OtpInput } from "@/components/ui/otp-input";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 
+type LoginTab = "otp" | "password";
+
 export default function LoginPage() {
   const t = useTranslations("auth");
   const router = useRouter();
   const setAuth = useAuthStore((s) => s.setAuth);
 
+  const [tab, setTab] = useState<LoginTab>("otp");
+
+  // OTP state
   const [phone, setPhone] = useState("09121234567");
   const [code, setCode] = useState("");
-  const [step, setStep] = useState<"phone" | "otp">("phone");
+  const [otpStep, setOtpStep] = useState<"phone" | "otp">("phone");
+
+  // Password state
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
@@ -32,6 +42,9 @@ export default function LoginPage() {
           return t("smsFailed");
         case "INVALID_OTP":
           return t("invalidOtp");
+        case "INVALID_TOKEN":
+        case "NOT_FOUND":
+          return tab === "password" ? t("invalidCredentials") : t("notFound");
         default:
           return err.message;
       }
@@ -44,7 +57,7 @@ export default function LoginPage() {
     setError(null);
     try {
       await apiPost("/api/auth/send-otp", { phone });
-      setStep("otp");
+      setOtpStep("otp");
     } catch (e) {
       if (e instanceof ApiClientError && e.code === "NOT_FOUND") {
         // No account → take them to register with phone pre-filled
@@ -74,6 +87,34 @@ export default function LoginPage() {
     }
   };
 
+  const loginWithPassword = async () => {
+    if (!username.trim() || !password) {
+      setError(t("invalidCredentials"));
+      return;
+    }
+    setLoading(true);
+    setError(null);
+    try {
+      const data = await apiPost<AuthTokenResponse>("/api/auth/login", {
+        username: username.trim(),
+        password,
+      });
+      setAuth(data);
+      router.push("/pos");
+    } catch (e) {
+      setError(authErrorMessage(e));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const switchTab = (next: LoginTab) => {
+    setTab(next);
+    setError(null);
+    setOtpStep("phone");
+    setCode("");
+  };
+
   return (
     <div className="flex min-h-screen items-center justify-center bg-muted/30 p-4">
       <Card className="w-full max-w-md">
@@ -81,8 +122,36 @@ export default function LoginPage() {
           <CardTitle className="text-center text-primary">{t("title")}</CardTitle>
           <p className="text-center text-sm text-muted-foreground">{t("subtitle")}</p>
         </CardHeader>
-        <CardContent className="space-y-4">
-          {step === "phone" ? (
+
+        {/* Tab switcher */}
+        <div className="flex border-b px-6">
+          <button
+            type="button"
+            className={`flex-1 py-2 text-sm font-medium transition-colors cursor-pointer ${
+              tab === "otp"
+                ? "border-b-2 border-primary text-primary"
+                : "text-muted-foreground hover:text-foreground"
+            }`}
+            onClick={() => switchTab("otp")}
+          >
+            {t("tabOtp")}
+          </button>
+          <button
+            type="button"
+            className={`flex-1 py-2 text-sm font-medium transition-colors cursor-pointer ${
+              tab === "password"
+                ? "border-b-2 border-primary text-primary"
+                : "text-muted-foreground hover:text-foreground"
+            }`}
+            onClick={() => switchTab("password")}
+          >
+            {t("tabPassword")}
+          </button>
+        </div>
+
+        <CardContent className="space-y-4 pt-4">
+          {/* ───── OTP tab ───── */}
+          {tab === "otp" && otpStep === "phone" && (
             <form
               className="space-y-4"
               onSubmit={(e) => {
@@ -105,7 +174,9 @@ export default function LoginPage() {
                 {loading ? "..." : t("sendOtp")}
               </Button>
             </form>
-          ) : (
+          )}
+
+          {tab === "otp" && otpStep === "otp" && (
             <form
               className="space-y-4"
               onSubmit={(e) => {
@@ -128,12 +199,60 @@ export default function LoginPage() {
                 type="button"
                 variant="ghost"
                 className="w-full"
-                onClick={() => setStep("phone")}
+                onClick={() => {
+                  setOtpStep("phone");
+                  setCode("");
+                  setError(null);
+                }}
               >
                 {t("resend")}
               </Button>
             </form>
           )}
+
+          {/* ───── Password tab ───── */}
+          {tab === "password" && (
+            <form
+              className="space-y-4"
+              onSubmit={(e) => {
+                e.preventDefault();
+                if (!loading) void loginWithPassword();
+              }}
+            >
+              <LabeledField label={t("username")} htmlFor="login-username">
+                <Input
+                  id="login-username"
+                  value={username}
+                  onChange={(e) => setUsername(e.target.value)}
+                  placeholder={t("usernamePlaceholder")}
+                  dir="ltr"
+                  className="text-start"
+                  autoComplete="username"
+                  autoFocus
+                />
+              </LabeledField>
+              <LabeledField label={t("password")} htmlFor="login-password">
+                <Input
+                  id="login-password"
+                  type="password"
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  placeholder={t("passwordPlaceholder")}
+                  dir="ltr"
+                  className="text-start"
+                  autoComplete="current-password"
+                />
+              </LabeledField>
+              <Button
+                type="submit"
+                className="w-full"
+                disabled={loading || !username.trim() || !password}
+              >
+                {loading ? "..." : t("verify")}
+              </Button>
+            </form>
+          )}
+
           {error && (
             <p className="text-center text-sm text-destructive">{error}</p>
           )}

web/dashboard/src/components/hr/employee-credentials-panel.tsx

@@ -0,0 +1,168 @@
+"use client";
+
+import { useState } from "react";
+import { useMutation } from "@tanstack/react-query";
+import { useTranslations } from "next-intl";
+import { apiPut, apiDelete, ApiClientError } from "@/lib/api/client";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { LabeledField } from "@/components/ui/labeled-field";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+
+interface Employee {
+  id: string;
+  name: string;
+  phone: string;
+  role: string;
+}
+
+interface Props {
+  cafeId: string;
+  employees: Employee[];
+}
+
+export function EmployeeCredentialsPanel({ cafeId, employees }: Props) {
+  const t = useTranslations("hr.credentials");
+
+  const [selectedId, setSelectedId] = useState<string>("");
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [feedback, setFeedback] = useState<{ ok: boolean; msg: string } | null>(null);
+
+  const setMutation = useMutation({
+    mutationFn: () =>
+      apiPut(`/api/cafes/${cafeId}/employees/${selectedId}/credentials`, {
+        username,
+        password,
+      }),
+    onSuccess: () => {
+      setFeedback({ ok: true, msg: t("saved") });
+      setPassword("");
+    },
+    onError: (err) => {
+      if (err instanceof ApiClientError && err.code === "USERNAME_TAKEN") {
+        setFeedback({ ok: false, msg: t("usernameTaken") });
+      } else {
+        setFeedback({ ok: false, msg: err instanceof Error ? err.message : String(err) });
+      }
+    },
+  });
+
+  const removeMutation = useMutation({
+    mutationFn: () =>
+      apiDelete(`/api/cafes/${cafeId}/employees/${selectedId}/credentials`),
+    onSuccess: () => {
+      setFeedback({ ok: true, msg: t("removed") });
+      setUsername("");
+      setPassword("");
+    },
+    onError: (err) => {
+      setFeedback({ ok: false, msg: err instanceof Error ? err.message : String(err) });
+    },
+  });
+
+  const handleRemove = () => {
+    if (!window.confirm(t("removeConfirm"))) return;
+    setFeedback(null);
+    removeMutation.mutate();
+  };
+
+  const isPending = setMutation.isPending || removeMutation.isPending;
+
+  return (
+    <div className="space-y-4">
+      <div>
+        <p className="text-sm text-muted-foreground mb-3">{t("subtitle")}</p>
+      </div>
+
+      {/* Employee selector */}
+      <div className="grid gap-2 sm:grid-cols-2 lg:grid-cols-3">
+        {employees.map((emp) => (
+          <button
+            key={emp.id}
+            type="button"
+            onClick={() => {
+              setSelectedId(emp.id);
+              setUsername("");
+              setPassword("");
+              setFeedback(null);
+            }}
+            className={`rounded-lg border p-3 text-start transition-colors cursor-pointer ${
+              selectedId === emp.id
+                ? "border-primary bg-primary/5"
+                : "border-border hover:border-primary/50"
+            }`}
+          >
+            <p className="font-medium text-sm">{emp.name}</p>
+            <p className="text-xs text-muted-foreground" dir="ltr">{emp.phone}</p>
+          </button>
+        ))}
+      </div>
+
+      {/* Form */}
+      {selectedId && (
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-base">
+              {employees.find((e) => e.id === selectedId)?.name}
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <LabeledField label={t("username")} htmlFor="cred-username">
+              <Input
+                id="cred-username"
+                value={username}
+                onChange={(e) => setUsername(e.target.value)}
+                placeholder={t("usernamePlaceholder")}
+                dir="ltr"
+                className="text-start"
+                autoComplete="off"
+              />
+            </LabeledField>
+            <LabeledField label={t("password")} htmlFor="cred-password">
+              <Input
+                id="cred-password"
+                type="password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                placeholder={t("passwordPlaceholder")}
+                dir="ltr"
+                className="text-start"
+                autoComplete="new-password"
+              />
+            </LabeledField>
+
+            {feedback && (
+              <p className={`text-sm ${feedback.ok ? "text-green-600" : "text-destructive"}`}>
+                {feedback.msg}
+              </p>
+            )}
+
+            <div className="flex flex-wrap gap-2">
+              <Button
+                onClick={() => {
+                  setFeedback(null);
+                  setMutation.mutate();
+                }}
+                disabled={isPending || !username.trim() || password.length < 8}
+              >
+                {isPending ? "..." : t("set")}
+              </Button>
+              <Button
+                variant="outline"
+                onClick={handleRemove}
+                disabled={isPending}
+              >
+                {t("remove")}
+              </Button>
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
+      {!selectedId && (
+        <p className="text-sm text-muted-foreground">{t("selectEmployee")}</p>
+      )}
+    </div>
+  );
+}

web/dashboard/src/components/hr/hr-screen.tsx

@@ -12,6 +12,7 @@ import { LabeledField } from "@/components/ui/labeled-field";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { BranchAccessPanel } from "@/components/hr/branch-access-panel";
+import { EmployeeCredentialsPanel } from "@/components/hr/employee-credentials-panel";
 
 interface Employee {
   id: string;
@@ -47,7 +48,7 @@ interface Salary {
   isPaid: boolean;
 }
 
-type Tab = "attendance" | "leave" | "payroll" | "access";
+type Tab = "attendance" | "leave" | "payroll" | "access" | "credentials";
 
 export function HrScreen() {
   const t = useTranslations("hr");
@@ -122,8 +123,8 @@ export function HrScreen() {
       <h2 className="text-xl font-bold">{t("title")}</h2>
 
       <div className="flex flex-wrap gap-2">
-        {((["attendance", "leave", "payroll", "access"] as Tab[]).filter(
-          (key) => key !== "access" || canManageAccess
+        {((["attendance", "leave", "payroll", "access", "credentials"] as Tab[]).filter(
+          (key) => (key !== "access" && key !== "credentials") || canManageAccess
         )).map((key) => (
           <Button
             key={key}
@@ -230,6 +231,10 @@ export function HrScreen() {
       )}
 
       {tab === "access" && canManageAccess && <BranchAccessPanel cafeId={cafeId} />}
+
+      {tab === "credentials" && canManageAccess && (
+        <EmployeeCredentialsPanel cafeId={cafeId} employees={employees} />
+      )}
     </div>
   );
 }

web/dashboard/src/components/layout/trial-countdown-banner.tsx

@@ -5,8 +5,8 @@ import { useLocale } from "next-intl";
 import { useRouter } from "@/i18n/routing";
 import { Clock, X, Zap } from "lucide-react";
 
-// 14 Khordad 1405 = June 4, 2026  (Tehran UTC+3:30)
-const DEADLINE = new Date("2026-06-04T00:00:00+03:30");
+// 1 Tir 1405 = June 22, 2026  (Tehran IRDT UTC+4:30)
+const DEADLINE = new Date("2026-06-22T00:00:00+04:30");
 const STORAGE_KEY = "meezi_trial_banner_v1";
 
 interface TimeLeft {
@@ -78,11 +78,11 @@ export function TrialCountdownBanner() {
 
   const textFa = expired
     ? "دوره آزمایشی میزی به پایان رسید. برای ادامه پلن انتخاب کنید."
-    : "دوره آزمایشی رایگان تا ۱۴ خرداد ۱۴۰۵";
+    : "دوره آزمایشی رایگان تا ۱ تیر ۱۴۰۵";
 
   const textEn = expired
     ? "Your Meezi trial has ended. Choose a plan to continue."
-    : "Free trial ends 14 Khordad 1405 (Jun 4)";
+    : "Free trial ends 1 Tir 1405 (Jun 22)";
 
   const Digit = ({ value, label }: { value: number; label: string }) => (
     <div className="flex flex-col items-center">