@devvistatech/devvista-kit 0.0.1

package/app/gallery/page.tsx

@@ -0,0 +1,320 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+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 { useAuth } from "@clerk/nextjs"; 
+import { GALLERY_PAGE } from "../constants/gallery"; 
+
+interface StrapiUser {
+  id: number;
+  username: string;
+  email: string;
+  businessAdminId?: string;
+}
+
+interface UploadedImage {
+  id: number;
+  documentId: string;
+  title?: string;
+  description?: string;
+  url: string;
+  createdAt: string;
+  category?: "none" | "indoor" | "outdoor" | "commercial";
+}
+
+export default function GalleryPage() {
+  const { user, authLoading, checkSession } = useStrapiAuth();
+  const { isSignedIn, getToken } = useAuth(); 
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [currentUploadedImages, setUploadedImages] = useState<UploadedImage[]>([]);
+  const [galleryUser, setUser] = useState<StrapiUser | null>(null);
+  const isAdmin = isSignedIn && !!user?.businessAdminId;
+
+  useEffect(() => {
+    setUser(user);
+  }, [user]);
+
+  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]);
+
+  const fetchInitialData = useCallback(async () => {
+    try {
+      setIsLoading(true);
+
+      const headers: HeadersInit = { "Content-Type": "application/json" };
+      if (isSignedIn) {
+        const token = await getToken();
+        if (!token) {
+          throw new Error(GALLERY_PAGE.ERRORS.NO_AUTH_TOKEN);
+        }
+        headers.Authorization = `Bearer ${token}`;
+      }
+
+      const imagesResponse = await fetch("/api/gallery-data", {
+        headers,
+      });
+      if (!imagesResponse.ok) {
+        const errorText = await imagesResponse.text();
+        console.error("GalleryPage: Fetch images failed", { status: imagesResponse.status, errorText });
+        throw new Error(GALLERY_PAGE.ERRORS.FETCH_IMAGES_FAILED.replace("${errorText}", errorText));
+      }
+      const { data: images, meta } = await imagesResponse.json();
+
+      if (meta?.pagination?.total > 100) {
+        setError(GALLERY_PAGE.ERRORS.PAGINATION_WARNING);
+      }
+
+      setUploadedImages(images || []);
+    } catch (err) {
+      console.error("GalleryPage: Fetch error", err);
+      setError(err instanceof Error ? err.message : GALLERY_PAGE.ERRORS.FETCH_ERROR);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [isSignedIn, getToken]); 
+
+  useEffect(() => {
+    fetchInitialData();
+  }, [fetchInitialData]);
+
+  const handleImageUpload = async (
+    e: React.FormEvent<HTMLFormElement>,
+    file: File | null,
+    title: string,
+    description: string,
+    category: "none" | "indoor" | "outdoor" | "commercial"
+  ) => {
+    e.preventDefault();
+    if (!file) {
+      setError(GALLERY_PAGE.ERRORS.NO_FILE_SELECTED);
+      return;
+    }
+    if (!["image/jpeg", "image/png", "image/gif"].includes(file.type)) {
+      setError(GALLERY_PAGE.ERRORS.INVALID_FILE_TYPE);
+      return;
+    }
+    if (!isAdmin) {
+      console.error("GalleryPage: Unauthorized upload attempt", {
+        isSignedIn,
+        businessAdminId: user?.businessAdminId,
+      });
+      setError(GALLERY_PAGE.ERRORS.UNAUTHORIZED_UPLOAD);
+      return;
+    }
+
+    try {
+      setIsLoading(true);
+      const token = await getToken();
+      if (!token) {
+        setError(GALLERY_PAGE.ERRORS.AUTHENTICATION_ERROR);
+        return;
+      }
+
+      const formData = new FormData();
+      formData.append("file", file);
+      formData.append("title", title || `Image ${new Date().toISOString()}`);
+      formData.append("description", description || "");
+      formData.append("category", category);
+
+      const response = await fetch("/api/gallery-data", {
+        method: "POST",
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+        body: formData,
+      });
+
+      if (!response.ok) {
+        const errorData = await response.json();
+        console.error("GalleryPage: Upload failed", { status: response.status, errorData });
+        if (response.status === 401) {
+          setError(GALLERY_PAGE.ERRORS.AUTHENTICATION_ERROR);
+          return;
+        }
+        throw new Error(errorData.error || GALLERY_PAGE.ERRORS.UPLOAD_IMAGE_FAILED.replace("${response.status}", response.status.toString()));
+      }
+
+      const { data } = await response.json();
+      setUploadedImages(data || []);
+      setError(null);
+    } catch (err) {
+      console.error("GalleryPage: Upload Error", err);
+      setError(err instanceof Error ? err.message : GALLERY_PAGE.ERRORS.UPLOAD_IMAGE_ERROR);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleDeleteImage = async (documentId: string) => {
+    if (!isAdmin) {
+      console.error("GalleryPage: Unauthorized delete attempt", {
+        isSignedIn,
+        businessAdminId: user?.businessAdminId,
+      });
+      setError(GALLERY_PAGE.ERRORS.UNAUTHORIZED_DELETE);
+      return;
+    }
+
+    try {
+      setIsLoading(true);
+      const token = await getToken();
+      if (!token) {
+        setError(GALLERY_PAGE.ERRORS.AUTHENTICATION_ERROR);
+        return;
+      }
+
+      const response = await fetch("/api/gallery-data", {
+        method: "DELETE",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${token}`,
+        },
+        body: JSON.stringify({ documentId }),
+      });
+
+      if (!response.ok) {
+        const errorData = await response.json();
+        console.error("GalleryPage: Delete failed", { status: response.status, errorData });
+        if (response.status === 401) {
+          setError(GALLERY_PAGE.ERRORS.AUTHENTICATION_ERROR);
+          return;
+        }
+        throw new Error(errorData.error || GALLERY_PAGE.ERRORS.DELETE_IMAGE_FAILED.replace("${response.status}", response.status.toString()));
+      }
+
+      const { data } = await response.json();
+      setUploadedImages(data || []);
+      setError(null);
+    } catch (err) {
+      console.error("GalleryPage: Delete Error", err);
+      setError(err instanceof Error ? err.message : GALLERY_PAGE.ERRORS.DELETE_IMAGE_ERROR);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  if (isLoading || authLoading) {
+    return <Spinner />;
+  }
+
+  return (
+    <div className="min-h-screen w-full bg-[#F7F7F7] relative overflow-hidden flex flex-col">
+      {error && <div className="text-red-500 text-center p-4">{error}</div>}
+      <style jsx>{`
+        @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800;900&display=swap");
+
+        :root {
+          --jubilee: #F47C7C;
+          --natural-white: #F7F7F7;
+          --caviar: #2D2D2D;
+          --storm-cloud: #4A636E;
+          --exuberant-blue: #FF54B4;
+          --modern-purple: #D946EF;
+        }
+
+        * {
+          font-family: "Inter", system-ui, sans-serif;
+        }
+
+        .gradient-text {
+          background: linear-gradient(135deg, var(--exuberant-blue), var(--jubilee), var(--modern-purple));
+          -webkit-background-clip: text;
+          background-clip: text;
+          color: transparent;
+          text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
+        }
+
+        @media (max-width: 1024px) {
+          .container-padding {
+            padding-left: 1.5rem;
+            padding-right: 1.5rem;
+            padding-top: 5rem;
+            padding-bottom: 5rem;
+          }
+
+          .main-heading {
+            font-size: 3rem;
+            margin-bottom: 3rem;
+          }
+
+          .content-text {
+            font-size: 1.25rem;
+          }
+        }
+
+        @media (max-width: 640px) {
+          .container-padding {
+            padding-left: 0.5rem;
+            padding-right: 0.5rem;
+            padding-top: 4rem;
+            padding-bottom: 4rem;
+          }
+
+          .main-heading {
+            font-size: 2.5rem;
+          }
+
+          .content-text {
+            font-size: 1rem;
+          }
+        }
+      `}</style>
+      <div
+        className="w-full px-6 py-20 lg:px-12 lg:py-40 flex-grow relative z-10 container-padding bg-white"
+      >
+        <motion.h1
+          initial={{ opacity: 0, y: -50 }}
+          animate={{ opacity: 1, y: 0 }}
+          className="text-4xl sm:text-5xl lg:text-7xl font-black mb-20 lg:mb-20 gradient-text text-center uppercase drop-shadow-lg main-heading pt-36 sm:pt-32"
+        >
+          {GALLERY_PAGE.UI.MAIN_HEADING}
+        </motion.h1>
+        {/* Admin Status Feedback, matching GallerySection */}
+        <div className="mb-4 text-center">
+          {authLoading || isLoading ? (
+            <p className="text-gray-400 text-sm font-medium">{GALLERY_PAGE.UI.LOADING_TEXT}</p>
+          ) : isAdmin ? (
+            <p className="text-gray-400 text-sm font-medium">
+              {GALLERY_PAGE.UI.ADMIN_LOGGED_IN_MESSAGE}
+            </p>
+          ) : user ? (
+            <p className="text-gray-400 text-sm font-medium">
+            </p>
+          ) : (
+            <p className="text-gray-400 text-sm font-medium">
+            </p>
+          )}
+        </div>
+        <GallerySection
+          user={galleryUser}
+          setUser={setUser}
+          authLoading={authLoading}
+          uploadedImages={currentUploadedImages}
+          setUploadedImages={setUploadedImages}
+          error={error}
+          setError={setError}
+          isLoading={isLoading}
+          setIsLoading={setIsLoading}
+          handleImageUpload={handleImageUpload}
+          handleDeleteImage={handleDeleteImage}
+        />
+      </div>
+    </div>
+  );
+}

package/app/globals.css

@@ -0,0 +1,58 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* CSS Variables - Light mode only */
+:root {
+  --foreground-rgb: 0, 0, 0;
+  --background-start-rgb: 214, 219, 220;
+  --background-end-rgb: 255, 255, 255;
+
+  --background: 0 0% 100%;
+  --foreground: 0 0% 0%;
+  --card: 0 0% 100%;
+  --card-foreground: 0 0% 0%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 0 0% 0%;
+  --primary: 0 0% 9%;
+  --primary-foreground: 0 0% 98%;
+  --secondary: 0 0% 96.1%;
+  --secondary-foreground: 0 0% 9%;
+  --muted: 0 0% 96.1%;
+  --muted-foreground: 0 0% 45.1%;
+  --accent: 0 0% 96.1%;
+  --accent-foreground: 0 0% 9%;
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 0 0% 98%;
+  --border: 0 0% 89.8%;
+  --input: 0 0% 89.8%;
+  --ring: 0 0% 3.9%;
+  --chart-1: 12 76% 61%;
+  --chart-2: 173 58% 39%;
+  --chart-3: 197 37% 24%;
+  --chart-4: 43 74% 66%;
+  --chart-5: 27 87% 67%;
+  --radius: 0.5rem;
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+
+.clip-diagonal-left {
+  clip-path: polygon(0 0, 100% 0, 0 100%);
+} 
+
+.clip-diagonal-right {
+  clip-path: polygon(100% 0, 0% 100%, 100% 100%);
+} 
+
+.align-items-start {
+  align-items: start;
+}

package/app/layout.tsx

@@ -0,0 +1,62 @@
+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';
+
+const inter = Inter({ subsets: ['latin'], preload: true });
+
+export const metadata: Metadata = {
+  metadataBase: new URL(process.env.NEXT_PUBLIC_BASE_URL || 'http://localhost:3000'),
+  title: "DevVista Kit",
+  description: 'Your 24/7 fitness destination',
+  openGraph: {
+    title: "DevVista Kit",
+    description: '',
+    url: 'https://devvistatech.com/',
+    images: [{ url: '/images/FitStop.png' }],
+  },
+};
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <ClerkProvider>
+      <html lang="en" className="h-full" suppressHydrationWarning>
+        <head>
+          <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());
+                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>
+  );
+}