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>
           )}