fix: admin error handling, login page, add Arabic i18n support

Aymanseif · Aymanseif · commit 05cd1bc0df21 · 2026-05-16T07:55:59.000+03:00
diff --git a/app/admin/page.tsx b/app/admin/page.tsx
@@ -5,23 +5,50 @@ import { isAdminEmail } from "@/lib/access";
 import { listUsers } from "@/lib/db";
 
 export default async function AdminPage() {
-  const session = await getServerSession(authOptions);
+  let session;
+  try {
+    session = await getServerSession(authOptions);
+  } catch {
+    return (
+      <div className="min-h-screen bg-[#09090f] text-white p-8 flex items-center justify-center">
+        <div className="text-center max-w-md">
+          <h1 className="text-xl font-bold text-red-400 mb-3">Configuration Error</h1>
+          <p className="text-zinc-400 text-sm">
+            AUTH_SECRET / NEXTAUTH_SECRET must be set in environment variables.
+          </p>
+        </div>
+      </div>
+    );
+  }
 
   if (!isAdminEmail(session?.user?.email)) {
     redirect("/dashboard");
   }
 
-  // Fetch users from our updated db utility
-  const users = await listUsers();
+  let users: any[] = [];
+  try {
+    users = await listUsers();
+  } catch {
+    return (
+      <div className="min-h-screen bg-[#09090f] text-white p-8 flex items-center justify-center">
+        <div className="text-center max-w-md">
+          <h1 className="text-xl font-bold text-red-400 mb-3">Database Error</h1>
+          <p className="text-zinc-400 text-sm">
+            Could not connect to database. Check DATABASE_URL.
+          </p>
+        </div>
+      </div>
+    );
+  }
 
-  const totalMRR = users.reduce((sum, user) => {
+  const totalMRR = users.reduce((sum: number, user: any) => {
     if (user.plan === "agency") return sum + 99;
     if (user.plan === "pro") return sum + 29;
     return sum;
   }, 0);
 
-  const activeUsers = users.filter((user) => user.plan !== "starter").length;
-  const trialUsers = users.filter((user) => user.plan === "starter").length;
+  const activeUsers = users.filter((user: any) => user.plan !== "free").length;
+  const trialUsers = users.filter((user: any) => user.plan === "free").length;
 
   return (
     <main className="min-h-screen bg-[#09090f] p-6 text-white">
@@ -30,26 +57,21 @@ export default async function AdminPage() {
           Admin
         </div>
         <h1 className="text-4xl font-semibold">Admin dashboard</h1>
-        <p className="mt-2 text-zinc-400">Operational snapshot for X-Teos Pro</p>
+        <p className="mt-2 text-zinc-400">Operational snapshot for Teos AI Engine</p>
       </header>
 
       <div className="mx-auto mb-8 grid max-w-7xl grid-cols-1 gap-4 md:grid-cols-4">
-        <div className="rounded-3xl border border-white/10 bg-white/5 p-5">
-          <div className="text-sm text-zinc-400">Monthly MRR</div>
-          <div className="mt-2 text-3xl font-semibold text-violet-300">${totalMRR}</div>
-        </div>
-        <div className="rounded-3xl border border-white/10 bg-white/5 p-5">
-          <div className="text-sm text-zinc-400">Active users</div>
-          <div className="mt-2 text-3xl font-semibold text-emerald-300">{activeUsers}</div>
-        </div>
-        <div className="rounded-3xl border border-white/10 bg-white/5 p-5">
-          <div className="text-sm text-zinc-400">Trials</div>
-          <div className="mt-2 text-3xl font-semibold text-amber-300">{trialUsers}</div>
-        </div>
-        <div className="rounded-3xl border border-white/10 bg-white/5 p-5">
-          <div className="text-sm text-zinc-400">Total users</div>
-          <div className="mt-2 text-3xl font-semibold text-cyan-300">{users.length}</div>
-        </div>
+        {[
+          { label: "Monthly MRR", value: `$${totalMRR}`, color: "text-violet-300" },
+          { label: "Active users", value: activeUsers, color: "text-emerald-300" },
+          { label: "Trials", value: trialUsers, color: "text-amber-300" },
+          { label: "Total users", value: users.length, color: "text-cyan-300" },
+        ].map(s => (
+          <div key={s.label} className="rounded-3xl border border-white/10 bg-white/5 p-5">
+            <div className="text-sm text-zinc-400">{s.label}</div>
+            <div className={`mt-2 text-3xl font-semibold ${s.color}`}>{s.value}</div>
+          </div>
+        ))}
       </div>
 
       <div className="mx-auto max-w-7xl overflow-hidden rounded-3xl border border-white/10 bg-white/5">
@@ -64,24 +86,28 @@ export default async function AdminPage() {
             </tr>
           </thead>
           <tbody>
-            {(users as any[]).map((user) => (
-              <tr key={user.id} className="border-t border-white/5">
-                <td className="px-4 py-4">
-                  <div className="font-medium">{user.name}</div>
-                  <div className="text-sm text-zinc-400">{user.email}</div>
-                </td>
-                <td className="px-4 py-4 capitalize">{user.plan}</td>
-                <td className="px-4 py-4 capitalize">
-                  {user.plan === "starter" ? "trial" : "active"}
-                </td>
-                <td className="px-4 py-4 text-sm text-zinc-400">
-                  {new Date(user.createdAt).toLocaleDateString()}
-                </td>
-                <td className="px-4 py-4 text-sm text-zinc-400">
-                  {user.posts?.length ?? 0}
-                </td>
-              </tr>
-            ))}
+            {users.length === 0 ? (
+              <tr><td colSpan={5} className="text-center p-8 text-zinc-500">No users yet</td></tr>
+            ) : (
+              users.map((user: any) => (
+                <tr key={user.id} className="border-t border-white/5">
+                  <td className="px-4 py-4">
+                    <div className="font-medium">{user.name || "—"}</div>
+                    <div className="text-sm text-zinc-400">{user.email}</div>
+                  </td>
+                  <td className="px-4 py-4 capitalize">{user.plan}</td>
+                  <td className="px-4 py-4 capitalize">
+                    {user.plan === "free" ? "trial" : "active"}
+                  </td>
+                  <td className="px-4 py-4 text-sm text-zinc-400">
+                    {user.createdAt ? new Date(user.createdAt).toLocaleDateString() : "—"}
+                  </td>
+                  <td className="px-4 py-4 text-sm text-zinc-400">
+                    {user.posts?.length ?? user.totalPostsUsed ?? 0}
+                  </td>
+                </tr>
+              ))
+            )}
           </tbody>
         </table>
       </div>
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import "./globals.css";
 import Providers from "@/components/Providers";
+import LocaleProvider from "@/components/LocaleProvider";
 
 const siteUrl = process.env.NEXT_PUBLIC_APP_URL || "https://teos-ai-engine.vercel.app";
 
@@ -94,17 +95,21 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-    <html lang="en" className="scroll-smooth">
+    <html lang="en" className="scroll-smooth" dir="ltr" suppressHydrationWarning>
       <head>
         <link rel="preconnect" href="https://fonts.googleapis.com" />
         <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
         <link
-          href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Playfair+Display:wght@500;600;700&family=JetBrains+Mono:wght@400;500&display=swap"
+          href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Playfair+Display:wght@500;600;700&family=JetBrains+Mono:wght@400;500&family=Noto+Kufi+Arabic:wght@400;500;600;700&display=swap"
           rel="stylesheet"
         />
       </head>
       <body className="min-h-screen bg-bg antialiased">
-        <Providers>{children}</Providers>
+        <Providers>
+          <LocaleProvider>
+            {children}
+          </LocaleProvider>
+        </Providers>
       </body>
     </html>
   );
diff --git a/app/login/page.tsx b/app/login/page.tsx
@@ -8,7 +8,6 @@ import Link from "next/link";
 export default function LoginPage() {
   const router = useRouter();
   const [email, setEmail] = useState("");
-  const [password, setPassword] = useState("");
   const [error, setError] = useState("");
   const [loading, setLoading] = useState(false);
 
@@ -25,19 +24,19 @@ export default function LoginPage() {
       });
 
       if (res?.error) {
-        setError("Login failed. Check your credentials.");
+        setError(res.error);
       } else {
         router.push("/dashboard");
       }
     } catch {
-      setError("An unexpected error occurred.");
+      setError("Connection error. Please try again.");
     } finally {
       setLoading(false);
     }
   }
 
   return (
-    <div className="min-h-screen bg-bg flex items-center justify-center p-4">
+    <div className="min-h-screen bg-bg flex items-center justify-center p-4" dir="ltr">
       <div className="w-full max-w-sm">
         <div className="text-center mb-8">
           <Link href="/" className="inline-flex items-center gap-2 mb-6">
@@ -55,24 +54,17 @@ export default function LoginPage() {
             value={email}
             onChange={e => setEmail(e.target.value)}
             required
-            className="w-full rounded-xl border border-white/[0.1] bg-white/[0.03] px-4 py-3 text-sm text-[#e8e6f0] placeholder-[#5a5870] outline-none focus:border-gold-500/40"
-          />
-          <input
-            type="password"
-            placeholder="Password"
-            value={password}
-            onChange={e => setPassword(e.target.value)}
-            required
+            autoFocus
             className="w-full rounded-xl border border-white/[0.1] bg-white/[0.03] px-4 py-3 text-sm text-[#e8e6f0] placeholder-[#5a5870] outline-none focus:border-gold-500/40"
           />
 
           {error && (
             <div className="p-3 rounded-xl text-sm bg-red-500/10 border border-red-500/20 text-red-400">{error}</div>
           )}
 
-          <button type="submit" disabled={loading}
+          <button type="submit" disabled={loading || !email.trim()}
             className="btn-primary w-full text-sm py-3 disabled:opacity-40">
-            {loading ? "Signing in..." : "Sign in"}
+            {loading ? "Signing in..." : "Sign in with email"}
           </button>
         </form>
 
diff --git a/components/LocaleProvider.tsx b/components/LocaleProvider.tsx
@@ -0,0 +1,66 @@
+"use client";
+
+import { createContext, useContext, useState, useEffect, useCallback, type ReactNode } from "react";
+import type { Locale } from "@/lib/i18n";
+import { translations } from "@/lib/i18n";
+
+interface LocaleContextType {
+  locale: Locale;
+  setLocale: (l: Locale) => void;
+  t: (key: string) => string;
+  dir: "ltr" | "rtl";
+}
+
+const LocaleContext = createContext<LocaleContextType>({
+  locale: "en",
+  setLocale: () => {},
+  t: (k: string) => k,
+  dir: "ltr",
+});
+
+export function useLocale() {
+  return useContext(LocaleContext);
+}
+
+const COOKIE = "teos_locale";
+
+function getCookie(name: string): string | null {
+  if (typeof document === "undefined") return null;
+  const match = document.cookie.match(new RegExp(`(^| )${name}=([^;]+)`));
+  return match ? decodeURIComponent(match[2]) : null;
+}
+
+function setCookie(name: string, value: string) {
+  document.cookie = `${name}=${encodeURIComponent(value)};path=/;max-age=31536000;SameSite=Lax`;
+}
+
+export default function LocaleProvider({ children }: { children: ReactNode }) {
+  const [locale, setLocaleState] = useState<Locale>("en");
+
+  useEffect(() => {
+    const saved = getCookie(COOKIE) as Locale | null;
+    if (saved === "en" || saved === "ar") {
+      setLocaleState(saved);
+    }
+  }, []);
+
+  const setLocale = useCallback((l: Locale) => {
+    setLocaleState(l);
+    setCookie(COOKIE, l);
+    document.documentElement.dir = l === "ar" ? "rtl" : "ltr";
+    document.documentElement.lang = l;
+  }, []);
+
+  const t = useCallback(
+    (key: string) => translations[locale]?.[key] ?? key,
+    [locale]
+  );
+
+  const dir: "ltr" | "rtl" = locale === "ar" ? "rtl" : "ltr";
+
+  return (
+    <LocaleContext.Provider value={{ locale, setLocale, t, dir }}>
+      {children}
+    </LocaleContext.Provider>
+  );
+}
diff --git a/components/LocaleSwitcher.tsx b/components/LocaleSwitcher.tsx
@@ -0,0 +1,17 @@
+"use client";
+
+import { useLocale } from "./LocaleProvider";
+
+export default function LocaleSwitcher() {
+  const { locale, setLocale } = useLocale();
+
+  return (
+    <button
+      onClick={() => setLocale(locale === "en" ? "ar" : "en")}
+      className="text-xs text-[#5a5870] hover:text-[#e8e6f0] transition-colors duration-200 px-2 py-1 rounded-md border border-white/[0.06] hover:border-white/[0.15]"
+      title={locale === "en" ? "Switch to Arabic" : "التبديل إلى الإنجليزية"}
+    >
+      {locale === "en" ? "AR" : "EN"}
+    </button>
+  );
+}
diff --git a/components/landing/Navigation.tsx b/components/landing/Navigation.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { useState, useEffect } from "react";
+import LocaleSwitcher from "@/components/LocaleSwitcher";
 
 const navLinks = [
   { label: "Features", href: "#features" },
@@ -35,7 +36,7 @@ export default function Navigation() {
           </span>
         </a>
 
-        <nav className="hidden md:flex items-center gap-8">
+        <nav className="hidden md:flex items-center gap-6">
           {navLinks.map((link) => (
             <a
               key={link.href}
@@ -45,7 +46,8 @@ export default function Navigation() {
               {link.label}
             </a>
           ))}
-          <a href="/admin" className="text-[10px] text-[#5a5870] hover:text-[#8a88a0] transition-colors duration-200" title="Admin">
+          <LocaleSwitcher />
+          <a href="/admin" className="text-xs text-[#5a5870] hover:text-[#8a88a0] transition-colors duration-200" title="Admin">
             ⚙
           </a>
           <a href="/login" className="btn-teal text-xs px-5 py-2.5">
@@ -89,6 +91,7 @@ export default function Navigation() {
                 {link.label}
               </a>
             ))}
+            <LocaleSwitcher />
             <a
               href="/admin"
               onClick={() => setMobileOpen(false)}
diff --git a/lib/i18n.ts b/lib/i18n.ts
