Add OTP login flow and multi-cafe role switching

Introduce an OTP input box on login/register, surface user roles and a
cafe chooser, add a dashboard switch button in the POS screen, and
register OTP validators explicitly to survive Docker layer caching.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

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

@@ -9,6 +9,7 @@ import { useAuthStore } from "@/lib/stores/auth.store";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { LabeledField } from "@/components/ui/labeled-field";
+import { OtpInput } from "@/components/ui/otp-input";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 
 export default function LoginPage() {
@@ -113,18 +114,14 @@ export default function LoginPage() {
               }}
             >
               <LabeledField label={t("otp")} htmlFor="login-otp">
-                <Input
-                  id="login-otp"
+                <OtpInput
                   value={code}
-                  onChange={(e) => setCode(e.target.value)}
-                  placeholder={t("otpPlaceholder")}
-                  maxLength={6}
-                  dir="ltr"
-                  className="text-center tracking-widest"
-                  autoComplete="one-time-code"
+                  onChange={setCode}
+                  autoFocus
+                  disabled={loading}
                 />
               </LabeledField>
-              <Button type="submit" className="w-full" disabled={loading}>
+              <Button type="submit" className="w-full" disabled={loading || code.length < 6}>
                 {loading ? "..." : t("verify")}
               </Button>
               <Button