@devvistatech/devvista-kit 0.0.10 → 0.0.13

package/app/admin-profile/page.tsx

@@ -0,0 +1,123 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { useUser } from "@clerk/nextjs";
+import { useStrapiAuth } from "@/lib/auth/auth-context";
+import { isAdminUser } from "@/lib/auth/auth-utils"; 
+import Spinner from "@/components/addOns/non-functional/spinner";
+import { ADMIN_PROFILE_PAGE } from "@/lib/constants/admin-profile";
+import { BannerDashboard } from "@/components/addOns/functional/banner/BannerDashboard";
+import Banner from "@/components/addOns/functional/banner/Banner";
+
+export default function AdminProfile() {
+  const { user, authLoading, checkSession } = useStrapiAuth();
+  const { isSignedIn } = useUser();
+  const [isAdmin, setIsAdmin] = useState(false);
+
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, []);
+
+  useEffect(() => {
+    const handleLogin = () => checkSession();
+    const handleLogout = () => checkSession();
+    window.addEventListener("user-login", handleLogin);
+    window.addEventListener("user-logout", handleLogout);
+    return () => {
+      window.removeEventListener("user-login", handleLogin);
+      window.removeEventListener("user-logout", handleLogout);
+    };
+  }, [checkSession]);
+
+  useEffect(() => {
+    let isMounted = true;
+    const checkAdmin = async (retries = 3, delay = 1000) => {
+      if (!isSignedIn || !user?.authId) {
+        if (isMounted) setIsAdmin(false);
+        return;
+      }
+      for (let attempt = 1; attempt <= retries; attempt++) {
+        try {
+          const adminStatus = await isAdminUser(isSignedIn, user);
+          if (isMounted) {
+            setIsAdmin(adminStatus);
+          }
+          return;
+        } catch (error) {
+          console.error("AdminProfile: Admin check failed:", {
+            error: error instanceof Error ? error.message : "Unknown error",
+            attempt,
+            timestamp: new Date().toISOString(),
+          });
+          if (attempt < retries) {
+            await new Promise(resolve => setTimeout(resolve, delay));
+          } else if (isMounted) {
+            setIsAdmin(false);
+          }
+        }
+      }
+    };
+    checkAdmin();
+    return () => {
+      isMounted = false;
+    };
+  }, [isSignedIn, user]);
+
+  if (authLoading || isSignedIn === undefined) {
+    return (
+      <div className="min-h-screen bg-gray-900 text-gray-200 py-32 px-4 sm:px-6 lg:px-8 pt-48 lg:pt-56">
+        <div className="max-w-7xl mx-auto text-center">
+          <Spinner />
+        </div>
+      </div>
+    );
+  }
+
+  if (!isSignedIn || !user) {
+    return (
+      <div className="min-h-screen bg-gray-900 text-gray-200 flex items-center justify-center">
+        <div className="text-center">
+          <h1 className="text-3xl font-bold text-gray-400">{ADMIN_PROFILE_PAGE.UI.NOT_AUTHENTICATED_HEADING}</h1>
+          <p className="mt-4 text-gray-500">{ADMIN_PROFILE_PAGE.UI.NOT_AUTHENTICATED_MESSAGE}</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (!isAdmin) {
+    return (
+      <div className="min-h-screen bg-gray-900 text-gray-200 flex items-center justify-center">
+        <div className="text-center">
+          <h1 className="text-3xl font-bold text-gray-400">{ADMIN_PROFILE_PAGE.UI.UNAUTHORIZED_HEADING}</h1>
+          <p className="mt-4 text-gray-500">{ADMIN_PROFILE_PAGE.UI.UNAUTHORIZED_MESSAGE}</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-900 text-gray-200 py-32 px-4 sm:px-6 lg:px-8 pt-48 lg:pt-56">
+      <Banner />
+      <div className="max-w-7xl mx-auto">
+        <header className="mb-12 relative">
+          <div className="absolute inset-0 bg-gradient-to-r from-blue-500/10 to-gray-800/20 rounded-full blur-3xl"></div>
+          <h1 className="text-4xl sm:text-5xl font-extrabold tracking-tight bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-gray-300 p-2">
+            {ADMIN_PROFILE_PAGE.UI.DASHBOARD_HEADING}
+          </h1>
+          <p className="mt-2 text-sm sm:text-base text-gray-400">
+            {ADMIN_PROFILE_PAGE.UI.DASHBOARD_SUBHEADING}
+          </p>
+        </header>
+
+        <div className="text-center">
+          <p className="text-lg text-gray-300">{ADMIN_PROFILE_PAGE.UI.WELCOME_MESSAGE}</p>
+          <p className="mt-4 text-gray-400">{ADMIN_PROFILE_PAGE.UI.CONTENT_MESSAGE}</p>
+        </div>
+
+        <div className="mt-8">
+          <BannerDashboard />
+        </div>
+      </div>
+    </div>
+  );
+}