@devvistatech/devvista-kit 0.0.12 → 0.0.13

package/app/blog/[id]/page.tsx

@@ -1,15 +1,16 @@
-'use client';
+"use client";
 
-import React, { useState, useEffect } from 'react';
-import { useRouter } from 'next/navigation';
-import { Card, CardContent } from '@/components/other/card';
-import { BackButton, EditToggleButton, UpdateButton } from '@/components/other/button';
-import { ArrowLeft, Calendar } from 'lucide-react';
-import { useAuth, useUser } from '@clerk/nextjs';
-import { useStrapiAuth } from '@/lib/auth-context';
-import BlogSidebar from '@/components/addOns/functional/blogSections/BlogSidebar';
-import ClassList from '@/components/addOns/functional/ClassList';
-import Spinner from '@/components/addOns/non-functional/spinner';
+import React, { useState, useEffect } from "react";
+import { useRouter } from "next/navigation";
+import { Card, CardContent } from "@/components/other/card";
+import { BackButton, EditToggleButton, UpdateButton } from "@/components/other/button";
+import { ArrowLeft, Calendar } from "lucide-react";
+import { useAuth, useUser } from "@clerk/nextjs";
+import { useStrapiAuth } from "@/lib/auth/auth-context";
+import BlogSidebar from "@/components/addOns/functional/blogSections/BlogSidebar";
+import ClassList from "@/components/addOns/functional/ClassList";
+import Spinner from "@/components/addOns/non-functional/spinner";
+import { isAdminUser } from "@/lib/auth/auth-utils";
 
 interface BlogPost {
   id: number;
@@ -25,8 +26,8 @@ interface BlogPostPageProps {
 }
 
 export default function BlogPostPage({ params }: BlogPostPageProps) {
-  const resolvedParams = React.use(params); 
-  const id = resolvedParams.id; 
+  const resolvedParams = React.use(params);
+  const id = resolvedParams.id;
   const router = useRouter();
   const { user, authLoading, checkSession } = useStrapiAuth();
   const { getToken, isSignedIn } = useAuth();
@@ -36,23 +37,41 @@ export default function BlogPostPage({ params }: BlogPostPageProps) {
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const [isEditing, setIsEditing] = useState(false);
-  const [editTitle, setEditTitle] = useState('');
-  const [editDescription, setEditDescription] = useState('');
+  const [editTitle, setEditTitle] = useState("");
+  const [editDescription, setEditDescription] = useState("");
   const [titleCharCount, setTitleCharCount] = useState(0);
   const [titleWordCount, setTitleWordCount] = useState(0);
   const [descriptionCharCount, setDescriptionCharCount] = useState(0);
   const [descriptionWordCount, setDescriptionWordCount] = useState(0);
+  const [isAdmin, setIsAdmin] = useState(false);
 
-  const isAdmin = isSignedIn && !!user?.businessAdminId;
+  useEffect(() => {
+    let isMounted = true;
+    const checkAdmin = async () => {
+      if (!isSignedIn || !user?.authId) {
+        if (isMounted) setIsAdmin(false);
+        return;
+      }
+
+      const adminStatus = await isAdminUser(isSignedIn, user);
+      if (isMounted) {
+        setIsAdmin(adminStatus);
+      }
+    };
+    checkAdmin();
+    return () => {
+      isMounted = false;
+    };
+  }, [isSignedIn, user]);
 
   useEffect(() => {
     const handleLogin = () => checkSession();
     const handleLogout = () => checkSession();
-    window.addEventListener('user-login', handleLogin);
-    window.addEventListener('user-logout', handleLogout);
+    window.addEventListener("user-login", handleLogin);
+    window.addEventListener("user-logout", handleLogout);
     return () => {
-      window.removeEventListener('user-login', handleLogin);
-      window.removeEventListener('user-logout', handleLogout);
+      window.removeEventListener("user-login", handleLogin);
+      window.removeEventListener("user-logout", handleLogout);
     };
   }, [checkSession]);
 
@@ -60,34 +79,34 @@ export default function BlogPostPage({ params }: BlogPostPageProps) {
     const fetchPost = async () => {
       setIsLoading(true);
       try {
-        const headers: HeadersInit = { 'Content-Type': 'application/json' };
+        const headers: HeadersInit = { "Content-Type": "application/json" };
         if (isSignedIn) {
           const token = await getToken();
-          if (token) headers['Authorization'] = `Bearer ${token}`;
+          if (token) headers["Authorization"] = `Bearer ${token}`;
         }
 
-        const response = await fetch('/api/blog', { headers, cache: 'no-store' });
+        const response = await fetch("/api/blog", { headers, cache: "no-store" });
         if (!response.ok) {
           const errorData = await response.json();
-          throw new Error(errorData.error || 'Failed to fetch blog posts');
+          throw new Error(errorData.error || "Failed to fetch blog posts");
         }
         const { data } = await response.json();
         const blogPosts = data.blogPosts.map((p: BlogPost) => ({
           ...p,
-          title: p.title.length > 50 ? p.title.substring(0, 50) + '...' : p.title,
-          description: p.description.length > 1500 ? p.description.substring(0, 1500) + '...' : p.description,
+          title: p.title.length > 50 ? p.title.substring(0, 50) + "..." : p.title,
+          description: p.description.length > 1500 ? p.description.substring(0, 1500) + "..." : p.description,
           publishedAt: new Date(p.publishedAt).toISOString(),
         }));
 
         const parsedId = parseInt(id);
         if (isNaN(parsedId)) {
-          router.push('/404');
+          router.push("/404");
           return;
         }
 
         const foundPost = blogPosts.find((p: BlogPost) => p.id === parsedId);
         if (!foundPost) {
-          router.push('/404');
+          router.push("/404");
           return;
         }
 
@@ -100,7 +119,7 @@ export default function BlogPostPage({ params }: BlogPostPageProps) {
         setDescriptionCharCount(foundPost.description.length);
         setDescriptionWordCount(foundPost.description.trim().split(/\s+/).filter(Boolean).length);
       } catch (err) {
-        router.push('/404');
+        router.push("/404");
       } finally {
         setIsLoading(false);
       }
@@ -126,16 +145,16 @@ export default function BlogPostPage({ params }: BlogPostPageProps) {
     try {
       const token = await getToken();
       if (!token) {
-        throw new Error('Unauthorized: No token provided');
+        throw new Error("Unauthorized: No token provided");
       }
       if (!post?.documentId) {
-        throw new Error('Missing documentId for update');
+        throw new Error("Missing documentId for update");
       }
 
-      const response = await fetch('/api/blog', {
-        method: 'PUT',
+      const response = await fetch("/api/blog", {
+        method: "PUT",
         headers: {
-          'Content-Type': 'application/json',
+          "Content-Type": "application/json",
           Authorization: `Bearer ${token}`,
         },
         body: JSON.stringify({
@@ -151,36 +170,36 @@ export default function BlogPostPage({ params }: BlogPostPageProps) {
 
       if (!response.ok) {
         const errorData = await response.json();
-        throw new Error(errorData.error || 'Failed to update post');
+        throw new Error(errorData.error || "Failed to update post");
       }
 
-      const fetchResponse = await fetch('/api/blog', {
+      const fetchResponse = await fetch("/api/blog", {
         headers: {
-          'Content-Type': 'application/json',
+          "Content-Type": "application/json",
           Authorization: `Bearer ${token}`,
         },
-        cache: 'no-store',
+        cache: "no-store",
       });
       if (!fetchResponse.ok) {
         const errorData = await fetchResponse.json();
-        throw new Error(errorData.error || 'Failed to fetch blog posts');
+        throw new Error(errorData.error || "Failed to fetch blog posts");
       }
       const { data } = await fetchResponse.json();
       const blogPosts = data.blogPosts.map((p: BlogPost) => ({
         ...p,
-        title: p.title.length > 50 ? p.title.substring(0, 50) + '...' : p.title,
-        description: p.description.length > 1500 ? p.description.substring(0, 1500) + '...' : p.description,
+        title: p.title.length > 50 ? p.title.substring(0, 50) + "..." : p.title,
+        description: p.description.length > 1500 ? p.description.substring(0, 1500) + "..." : p.description,
         publishedAt: new Date(p.publishedAt).toISOString(),
       }));
       const updatedPost = blogPosts.find((p: BlogPost) => p.documentId === post.documentId);
       if (!updatedPost) {
-        throw new Error('Updated post not found');
+        throw new Error("Updated post not found");
       }
       setPost(updatedPost);
       setPosts(blogPosts);
       setIsEditing(false);
     } catch (err) {
-      setError(err instanceof Error ? err.message : 'An unknown error occurred');
+      setError(err instanceof Error ? err.message : "An unknown error occurred");
     }
   };
 
@@ -195,7 +214,7 @@ export default function BlogPostPage({ params }: BlogPostPageProps) {
   }
 
   if (!post) {
-    router.push('/404');
+    router.push("/404");
     return null;
   }
 
@@ -204,11 +223,11 @@ export default function BlogPostPage({ params }: BlogPostPageProps) {
       <div className="max-w-7xl mx-auto">
         {isAdmin && (
           <div className="mb-4 flex gap-4">
-            <BackButton onClick={() => router.push('/blog')}>
+            <BackButton onClick={() => router.push("/blog")}>
               <ArrowLeft size={16} /> Blog Dashboard
             </BackButton>
             <EditToggleButton onClick={() => setIsEditing(!isEditing)}>
-              {isEditing ? 'Cancel' : 'Edit Post'}
+              {isEditing ? "Cancel" : "Edit Post"}
             </EditToggleButton>
           </div>
         )}
@@ -259,16 +278,16 @@ export default function BlogPostPage({ params }: BlogPostPageProps) {
                   <div className="flex items-center gap-2 text-sm text-gray-400 mb-4">
                     <Calendar className="w-5 h-5 text-blue-400" />
                     <span className="text-blue-400/90">
-                      By {post.author} |{' '}
-                      {new Date(post.publishedAt).toLocaleDateString('en-US', {
-                        year: 'numeric',
-                        month: 'long',
-                        day: 'numeric',
+                      By {post.author} |{" "}
+                      {new Date(post.publishedAt).toLocaleDateString("en-US", {
+                        year: "numeric",
+                        month: "long",
+                        day: "numeric",
                       })}
                     </span>
                   </div>
                   <div className="text-black/90 leading-relaxed break-words">
-                    {post.description.split('\n').map((paragraph, index) => (
+                    {post.description.split("\n").map((paragraph, index) => (
                       <p key={index} className="mb-4 last:mb-0">
                         {paragraph}
                       </p>

package/app/blog/page.tsx

@@ -1,12 +1,10 @@
 "use client";
 
 import { useState, useEffect } from "react";
-import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/other/card";
-import { Button } from "@/components/other/button";
 import { AlertCircle } from "lucide-react";
-import { Alert, AlertDescription } from "@/components/other/alert";
 import { useAuth, useUser } from "@clerk/nextjs";
-import { useStrapiAuth } from "@/lib/auth-context";
+import { useStrapiAuth } from "@/lib/auth/auth-context";
+import { isAdminUser } from "@/lib/auth/auth-utils"; 
 import Spinner from "@/components/addOns/non-functional/spinner";
 import BlogDashboard from "@/components/addOns/functional/blogSections/BlogDashboard";
 import BlogFormPopUp from "@/components/addOns/functional/blogSections/BlogFormPopUp";
@@ -36,11 +34,10 @@ export default function BlogPage() {
     documentId: "",
     title: "",
     description: "",
-    author: user?.firstName && user?.lastName ? `${user.firstName} ${user.lastName}` : "",
+    author: user?.username || "",
     publishedAt: "",
   });
-
-  const isAdmin = isSignedIn && !!user?.businessAdminId;
+  const [isAdmin, setIsAdmin] = useState(false); 
 
   const timeoutPromise = (promise: Promise<any>, timeout: number) => {
     return Promise.race([
@@ -65,13 +62,49 @@ export default function BlogPage() {
   }, [checkSession]);
 
   useEffect(() => {
-    if (isModalOpen && !formData.id && user?.firstName && user?.lastName) {
+    if (isModalOpen && !formData.id && user?.username) {
       setFormData({
         ...formData,
-        author: `${user.firstName} ${user.lastName}`,
+        author: user.username,
       });
     }
-  }, [isModalOpen, formData.id, user?.firstName, user?.lastName]);
+  }, [isModalOpen, formData.id, user?.username]);
+
+  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);
+            setError(null);
+          }
+          return;
+        } catch (error) {
+          console.error("BlogPage: 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);
+            setError("Failed to verify admin status");
+          }
+        }
+      }
+    };
+    checkAdmin();
+    return () => {
+      isMounted = false;
+    };
+  }, [isSignedIn, user]);
 
   const fetchData = async () => {
     if (!isSignedIn || !clerkUser?.id) {

package/app/gallery/page.tsx

@@ -1,15 +1,14 @@
-// src/pages/gallery.tsx
 "use client";
 
 import { useState, useEffect, useCallback } from "react";
-import { ImageDescCarousel } from "@/components/addOns/functional/ImageDescCarousel";
+import { ImageDescCarousel } from "@/components/addOns/functional/carousels/ImageDescCarousel";
 import { GallerySection } from "@/components/addOns/functional/galleries/GalleryComplex";
 import Spinner from "@/components/addOns/non-functional/spinner";
 import { motion } from "framer-motion";
-import { useStrapiAuth } from "@/lib/auth-context";
+import { useStrapiAuth } from "@/lib/auth/auth-context";
 import { useAuth } from "@clerk/nextjs";
 import { GALLERY_PAGE } from "../../lib/constants/gallery";
-import { StrapiUser, UploadedImage, Category  } from "@/components/types";
+import { StrapiUser, UploadedImage, Category } from "@/lib/types";
 
 export default function GalleryPage() {
   const { user, authLoading, checkSession } = useStrapiAuth();
@@ -64,11 +63,26 @@ export default function GalleryPage() {
       }
       const { data: images, meta } = await imagesResponse.json();
 
+      const mappedImages: UploadedImage[] = images.map((item: any) => ({
+        id: Number(item.id) || 0,
+        documentId: item.documentId || "",
+        title: item.title || "",
+        description: item.description || "",
+        url: item.url || "",
+        createdAt: item.createdAt || new Date().toISOString(),
+        category: item.category || "none",
+        subCategory: item.subCategory || "",
+        favorite: item.favorite ?? false,
+        banner: item.banner ?? false,
+        startDate: item.startDate || undefined,
+        endDate: item.endDate || undefined,
+      }));
+
       if (meta?.pagination?.total > 100) {
         setError(GALLERY_PAGE.ERRORS.PAGINATION_WARNING);
       }
 
-      setUploadedImages(images || []);
+      setUploadedImages(mappedImages || []);
     } catch (err) {
       console.error("GalleryPage: Fetch error", err);
       setError(err instanceof Error ? err.message : GALLERY_PAGE.ERRORS.FETCH_ERROR);
@@ -86,7 +100,9 @@ export default function GalleryPage() {
     file: File | null,
     title: string,
     description: string,
-    category: Category
+    category: Category,
+    subCategory: string,
+    favorite: boolean
   ) => {
     e.preventDefault();
     if (!file) {
@@ -119,6 +135,11 @@ export default function GalleryPage() {
       formData.append("title", title || `Image ${new Date().toISOString()}`);
       formData.append("description", description || "");
       formData.append("category", category);
+      formData.append("subCategory", subCategory || "");
+      formData.append("favorite", String(favorite));
+      formData.append("banner", String(false)); 
+      formData.append("startDate", "");
+      formData.append("endDate", "");
 
       const response = await fetch("/api/gallery-data", {
         method: "POST",

package/app/layout.tsx

@@ -1,13 +1,10 @@
+// app/layout.tsx for devvistakit
 import './globals.css';
 import type { Metadata } from 'next';
 import { Inter } from 'next/font/google';
 import { ClerkProvider } from '@clerk/nextjs';
-import { ThemeProvider } from '@/components/theme-provider';
-import { AuthProvider } from '@/lib/auth-context';
-import Navbar from '@/components/navBars/navbar';
-import { Toaster } from '@/components/other/toaster';
-import Footer from '@/components/footers/footer';
-import IconBubble from '@/components/addOns/non-functional/IconBubble';
+import GoogleAnalyticsTracking from '@/lib/google/google-analytics-tracking';
+import ClientLayout from './ClientLayout';
 
 const inter = Inter({ subsets: ['latin'], preload: true });
 
@@ -17,8 +14,8 @@ export const metadata: Metadata = {
   description: 'Your kit To a new website',
   openGraph: {
     title: 'DevVista Kit',
-    description: '',
-    url: 'https://devvistatech.com/',
+    description: 'Your kit To a new website',
+    url: 'https://devvistakit.devvistatech.com/',
     images: [{ url: '/images/test.png' }],
   },
 };
@@ -26,86 +23,38 @@ export const metadata: Metadata = {
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   const clerkKey = process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY;
 
-  // If clerkKey is not defined, log a warning and render without ClerkProvider
+  const HtmlShell = (
+    <html lang="en" className="h-full" suppressHydrationWarning>
+      <head>
+        <GoogleAnalyticsTracking />
+      </head>
+      <body className={`${inter.className} h-full bg-background text-foreground antialiased`}>
+        <ClientLayout>{children}</ClientLayout>
+      </body>
+    </html>
+  );
+
   if (!clerkKey) {
     console.warn(
-      'NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY is not defined. Clerk authentication will be disabled. ' +
-      'Please set this environment variable in a .env.local file or your deployment environment to enable Clerk functionality.'
-    );
-    return (
-      <html lang="en" className="h-full" suppressHydrationWarning>
-        <head>
-          {/* Conditionally load Google Analytics script if NEXT_PUBLIC_GA_MEASUREMENT_ID is defined */}
-          {process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID && (
-            <script async src={`https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID}`}></script>
-          )}
-          <script
-            dangerouslySetInnerHTML={{
-              __html: `
-                window.dataLayer = window.dataLayer || [];
-                function gtag(){dataLayer.push(arguments);}
-                gtag('js', new Date());
-                ${process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID ? `gtag('config', '${process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID}');` : ''}
-              `,
-            }}
-          />
-        </head>
-        <body className={`${inter.className} h-full bg-gray-900 text-gray-700 antialiased`}>
-          <ThemeProvider
-            attribute="class"
-            defaultTheme="dark"
-            enableSystem={false}
-            disableTransitionOnChange
-          >
-            <AuthProvider>
-              <Navbar />
-              <main className="min-h-screen w-full">{children}</main>
-              <Toaster />
-              <Footer />
-              <IconBubble />
-            </AuthProvider>
-          </ThemeProvider>
-        </body>
-      </html>
+      'NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY is not defined. Clerk authentication will be disabled.'
     );
+    return HtmlShell;
   }
 
-  // If clerkKey is defined, render with ClerkProvider
   return (
-    <ClerkProvider publishableKey={clerkKey}>
-      <html lang="en" className="h-full" suppressHydrationWarning>
-        <head>
-          {process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID && (
-            <script async src={`https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID}`}></script>
-          )}
-          <script
-            dangerouslySetInnerHTML={{
-              __html: `
-                window.dataLayer = window.dataLayer || [];
-                function gtag(){dataLayer.push(arguments);}
-                gtag('js', new Date());
-                ${process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID ? `gtag('config', '${process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID}');` : ''}
-              `,
-            }}
-          />
-        </head>
-        <body className={`${inter.className} h-full bg-gray-900 text-gray-700 antialiased`}>
-          <ThemeProvider
-            attribute="class"
-            defaultTheme="dark"
-            enableSystem={false}
-            disableTransitionOnChange
-          >
-            <AuthProvider>
-              <Navbar />
-              <main className="min-h-screen w-full">{children}</main>
-              <Toaster />
-              <Footer />
-              <IconBubble />
-            </AuthProvider>
-          </ThemeProvider>
-        </body>
-      </html>
+    <ClerkProvider
+      publishableKey={clerkKey}
+      appearance={{
+        baseTheme: undefined,
+        variables: { colorPrimary: '#3498db' },
+      }}
+      allowedRedirectOrigins={[
+        'https://devvistakit.devvistatech.com',
+        'https://devvista-kit.netlify.app',
+        'http://localhost:3000',
+      ]}
+    >
+      {HtmlShell}
     </ClerkProvider>
   );
 }