Add Oudelaa dashboard API integration

oudelaa_dashboard/app/(auth)/login/page.tsx

@@ -0,0 +1,151 @@
+"use client";
+
+import Image from "next/image";
+import { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+import { Eye, EyeOff, Lock, Mail } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { useToast } from "@/components/ui/toast";
+import { loginSuperAdmin } from "@/lib/auth/client";
+import { getSuperAdminSession } from "@/lib/api/superadmin";
+
+function OudelaaMark() {
+  return (
+    <div className="flex items-center justify-center">
+      <Image
+        src="/logo.png"
+        alt="Oudelaa Logo"
+        width={144}
+        height={144}
+        priority
+        className="h-36 w-36 object-contain drop-shadow-[0_14px_30px_rgba(0,0,0,0.25)]"
+      />
+    </div>
+  );
+}
+
+export default function LoginPage() {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [showPassword, setShowPassword] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const { toast } = useToast();
+  const router = useRouter();
+
+  useEffect(() => {
+    void getSuperAdminSession()
+      .then(() => {
+        router.replace("/dashboard");
+      })
+      .catch(() => {});
+  }, [router]);
+
+  const onSubmit = async (event: React.FormEvent) => {
+    event.preventDefault();
+    setLoading(true);
+    try {
+      await loginSuperAdmin(email, password);
+      toast({ title: "تم تسجيل الدخول", description: "مرحبًا بك في لوحة SuperAdmin.", variant: "success" });
+      router.replace("/dashboard");
+    } catch (error) {
+      toast({ title: "فشل تسجيل الدخول", description: String(error), variant: "danger" });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="login-shell login-theme flex min-h-screen items-center justify-center p-6">
+      <div className="grid w-full max-w-5xl gap-8 lg:grid-cols-[1.05fr_0.95fr]">
+        <Card className="login-card order-2 lg:order-1">
+          <CardContent className="space-y-7 p-9 text-right">
+            <div className="space-y-2">
+              <p className="text-xs uppercase tracking-[0.35em] text-muted-foreground">Oudelaa SuperAdmin</p>
+              <h1 className="font-heading text-3xl font-bold text-[rgb(88,61,36)]">بوابة الإدارة العليا</h1>
+              <p className="text-xm text-muted-foreground">
+                تحكم فخم في التجربة الموسيقية. ادخل لإدارة المستخدمين، المحتوى، والقرارات الحساسة بأمان.
+              </p>
+            </div>
+            <div className="gold-divider" />
+            <form className="space-y-4" onSubmit={onSubmit}>
+              <div className="space-y-2">
+                <label className="text-xm text-muted-foreground">البريد الإلكتروني</label>
+                <div className="relative">
+                  <Mail className="pointer-events-none absolute right-3 top-3 h-4 w-4 text-muted-foreground" />
+                  <Input
+                    className="pr-9"
+                    type="email"
+                    placeholder="superadmin@oudelaa.com"
+                    value={email}
+                    onChange={(event) => setEmail(event.target.value)}
+                  />
+                </div>
+              </div>
+              <div className="space-y-2">
+                <label className="text-xm text-muted-foreground">كلمة المرور</label>
+                <div className="relative">
+                  <Lock className="pointer-events-none absolute right-3 top-3 h-4 w-4 text-muted-foreground" />
+                  <Input
+                    type={showPassword ? "text" : "password"}
+                    className="pr-9 pl-10"
+                    value={password}
+                    onChange={(event) => setPassword(event.target.value)}
+                  />
+                  <button
+                    type="button"
+                    className="absolute left-3 top-3 text-muted-foreground hover:text-foreground"
+                    onClick={() => setShowPassword((prev) => !prev)}
+                    aria-label={showPassword ? "إخفاء كلمة المرور" : "إظهار كلمة المرور"}
+                  >
+                    {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+                  </button>
+                </div>
+              </div>
+              <div className="flex items-center justify-between text-xs text-muted-foreground">
+                <span>تسجيل دخول آمن بتوثيق SuperAdmin</span>
+                <span>{new Intl.DateTimeFormat("ar-SA", { dateStyle: "medium" }).format(new Date())}</span>
+              </div>
+              <Button className="w-full text-base" type="submit" disabled={loading}>
+                {loading ? "جارٍ التحقق..." : "دخول اللوحة"}
+              </Button>
+            </form>
+          </CardContent>
+        </Card>
+
+        <div className="login-card order-1 flex flex-col justify-between p-9 lg:order-2">
+          <div className="space-y-5">
+            <OudelaaMark />
+            <div className="text-center">
+              <h2 className="font-heading text-2xl font-bold text-[rgb(88,61,36)]">
+                <b>Oudelaa</b>
+              </h2>
+              <p className="text-sm text-muted-foreground">Heritage Music Command Suite</p>
+            </div>
+          </div>
+          <div className="space-y-4 text-sm text-muted-foreground">
+            <div className="rounded-2xl border border-border/70 bg-secondary/50 p-4">
+              <p className="text-xl uppercase tracking-[0.2em] text-primary">
+                <b>جلسة إشراف</b>
+              </p>
+              <p className="mt-2 text-sm text-foreground">بوابة الإدارة العليا مخصصة للعمليات الحساسة ومراجعة المنصة بالكامل.</p>
+              <p className="mt-1 text-xs">استخدم حساب SuperAdmin الصحيح دون بيانات افتراضية محفوظة داخل الواجهة.</p>
+            </div>
+            <div className="grid gap-3 sm:grid-cols-2">
+              <div className="rounded-2xl border border-border/70 bg-secondary/30 p-3">
+                <p className="text-xm text-muted-foreground">البيئة</p>
+                <p className="mt-1 text-sm text-foreground">Connected API</p>
+              </div>
+              <div className="rounded-2xl border border-border/70 bg-secondary/30 p-3">
+                <p className="text-xm text-muted-foreground">الحالة</p>
+                <p className="mt-1 text-sm text-foreground">Secure</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}