@devvistatech/devvista-kit 0.0.10 → 0.0.13

package/components/addOns/functional/aboutSections/constants/aboutSection.ts

@@ -1,66 +1,71 @@
-// components/addOns/functional/aboutSections/constants/aboutSection.ts
-// Constants for hardcoded text in AboutSection.tsx, organized by purpose
-
-export const ABOUT_SECTION = {
-  // UI Text for AboutSection
-  UI: {
-    // Blockquote text
-    BLOCKQUOTE_TEXT: "“DevVista Kit is a modern, well-equipped facility with a friendly and vibrant atmosphere.”",
-    // Placeholder text when no image is available
-    NO_IMAGE_AVAILABLE: "No image available",
-    // Text when no description is available
-    NO_DESCRIPTION_AVAILABLE: "No about description available.",
-    // Message when logged in as admin
-    ADMIN_LOGGED_IN_MESSAGE: "You are logged in as an admin.",
-    // Modal heading
-    MODAL_HEADING: "Edit About",
-    // Form label for title input
-    TITLE_LABEL: "About Title",
-    // Placeholder for title input
-    TITLE_PLACEHOLDER: "Enter the about title",
-    // Form label for image input
-    IMAGE_LABEL: "Update Image (optional)",
-    // Text showing selected image name
-    SELECTED_IMAGE_TEXT: "Selected: ${formImage.name}",
-    // Form label for description textarea
-    DESCRIPTION_LABEL: "Update Description",
-    // Placeholder for description textarea
-    DESCRIPTION_PLACEHOLDER: "Enter the about description",
-  },
-  // Button Text for AboutSection
-  BUTTONS: {
-    // EditButton text
-    EDIT_BUTTON: "Edit",
-    // ReadMoreButton text when not expanded
-    READ_MORE_BUTTON: "Read More",
-    // ReadMoreButton text when expanded
-    READ_LESS_BUTTON: "Read Less",
-    // ActionButton text
-    GET_STARTED_BUTTON: "Get Started",
-    // UpdateButton text
-    UPDATE_BUTTON: "Update",
-    // UpdateButton text when submitting
-    SAVING_BUTTON: "Saving...",
-    // CancelButton text
-    CANCEL_BUTTON: "Cancel",
-  },
-  // Error Messages for AboutSection
-  ERRORS: {
-    // Error when no about data is returned
-    NO_DATA_FOUND: "About data not found",
-    // Error when fetch fails with status code
-    FETCH_FAILED: "Failed to fetch about data: ${response.status}",
-    // Generic error for fetch failure
-    FETCH_ERROR: "An error occurred while fetching about data",
-    // Error for non-admin update attempt
-    UNAUTHORIZED_UPDATE: "Unauthorized: Only admin can update about data",
-    // Error for invalid image type
-    INVALID_IMAGE_TYPE: "Only JPEG, PNG, or GIF images are allowed",
-    // Error when no authentication token is available
-    NO_AUTH_TOKEN: "No authentication token available",
-    // Error when update fails with status code
-    UPDATE_FAILED: "Failed to update about data: ${response.status}",
-    // Generic error for update failure
-    UPDATE_ERROR: "Failed to update about data",
-  },
+// components/addOns/functional/aboutSections/constants/aboutSection.ts
+// Constants for hardcoded text in AboutSection.tsx, organized by purpose
+
+export const ABOUT_SECTION = {
+  // UI Text for AboutSection
+  UI: {
+    // Blockquote text
+    BLOCKQUOTE_TEXT: "“Family Owned & Operated Since 1954.”",
+    // Placeholder text when no image is available
+    NO_IMAGE_AVAILABLE: "No image available",
+    // Text when no description is available
+    NO_DESCRIPTION_AVAILABLE: "No about description available.",
+    // Fallback title when no data is available
+    FALLBACK_TITLE: "About Milton Supply Co",
+    // Fallback description when no data is available
+    FALLBACK_DESCRIPTION:
+      "Welcome to Milton Supply Co, your one-stop source for masonry supplies near Syracuse, NY.",
+    // Message when logged in as admin
+    ADMIN_LOGGED_IN_MESSAGE: "You are logged in as an admin.",
+    // Modal heading for edit form
+    MODAL_HEADING: "Edit About Section",
+    // Form label for title input
+    TITLE_LABEL: "About Title",
+    // Placeholder for title input
+    TITLE_PLACEHOLDER: "Enter the about title",
+    // Form label for image input
+    IMAGE_LABEL: "Update Image (optional)",
+    // Text showing selected image name
+    SELECTED_IMAGE_TEXT: "Selected: ${formImage.name}",
+    // Form label for description textarea
+    DESCRIPTION_LABEL: "About Description",
+    // Placeholder for description textarea
+    DESCRIPTION_PLACEHOLDER: "Enter the about description",
+  },
+  // Button Text for AboutSection
+  BUTTONS: {
+    // EditButton text
+    EDIT_BUTTON: "Edit",
+    // ReadMoreButton text when not expanded
+    READ_MORE_BUTTON: "Read More",
+    // ReadMoreButton text when expanded
+    READ_LESS_BUTTON: "Read Less",
+    // ActionButton text
+    GET_STARTED_BUTTON: "Get Started",
+    // UpdateButton text
+    UPDATE_BUTTON: "Update",
+    // UpdateButton text when submitting
+    SAVING_BUTTON: "Saving...",
+    // CancelButton text
+    CANCEL_BUTTON: "Cancel",
+  },
+  // Error Messages for AboutSection
+  ERRORS: {
+    // Error when no about data is returned
+    NO_DATA_FOUND: "About data not found",
+    // Error when fetch fails with status code
+    FETCH_FAILED: "Failed to fetch about data: ${response.status}",
+    // Generic error for fetch failure
+    FETCH_ERROR: "An error occurred while fetching about data",
+    // Error for non-admin update attempt
+    UNAUTHORIZED_UPDATE: "Unauthorized: Only admin can update about data",
+    // Error for invalid image type
+    INVALID_IMAGE_TYPE: "Only JPEG, PNG, or GIF images are allowed",
+    // Error when no authentication token is available
+    NO_AUTH_TOKEN: "No authentication token available",
+    // Error when update fails with status code
+    UPDATE_FAILED: "Failed to update about data: ${response.status}",
+    // Generic error for update failure
+    UPDATE_ERROR: "Failed to update about data",
+  },
 };

package/components/addOns/functional/banner/Banner.tsx

@@ -0,0 +1,150 @@
+"use client";
+
+import { useState, useEffect, useRef } from "react";
+import { motion } from "framer-motion";
+import { X } from "lucide-react";
+import { UploadedImage } from "@/lib/types";
+import Spinner from "@/components/addOns/non-functional/spinner";
+
+export default function Banner() {
+  const [bannerData, setBannerData] = useState<UploadedImage | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isVisible, setIsVisible] = useState(true);
+  const bannerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const fetchBanner = async () => {
+      setIsLoading(true);
+      console.log("Fetching banner from /api/gallery-data...");
+      try {
+        const response = await fetch(`/api/gallery-data?t=${Date.now()}`, {
+          headers: { "Content-Type": "application/json" },
+          cache: "no-store",
+        });
+        console.log("API Response Status:", response.status);
+        if (response.ok) {
+          const result = await response.json();
+          console.log("API Response Data:", result);
+          const images = Array.isArray(result.data)
+            ? result.data.map((item: any) => ({
+                id: Number(item.id) || 0,
+                documentId: item.documentId || "",
+                title: item.title || "Untitled",
+                description: item.description || "",
+                url: item.image?.url
+                  ? item.image.url.startsWith("http")
+                    ? item.image.url
+                    : `${process.env.STRAPI_API_URL}${item.image.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,
+              }))
+            : [];
+          console.log("Mapped Images:", images);
+
+          const currentDate = new Date();
+          const banner = images.find((image: UploadedImage) => {
+            if (!image.banner) return false;
+            if (!image.startDate || !image.endDate) return false;
+            const start = new Date(image.startDate);
+            const end = new Date(image.endDate);
+            return start <= currentDate && currentDate <= end;
+          });
+          console.log("Selected Banner Data:", banner);
+          setBannerData(banner || null);
+        } else {
+          console.error("Banner: Gallery API Error", {
+            status: response.status,
+            statusText: response.statusText,
+          });
+        }
+      } catch (err) {
+        console.error("Banner: Fetch Error", err);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    fetchBanner();
+  }, []);
+
+  // Handle click outside to close the banner
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        bannerRef.current &&
+        !bannerRef.current.contains(event.target as Node) &&
+        isVisible
+      ) {
+        setIsVisible(false);
+        console.log("Banner: Closed by clicking outside");
+      }
+    };
+
+    if (isVisible) {
+      document.addEventListener("mousedown", handleClickOutside);
+    } else {
+      document.removeEventListener("mousedown", handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [isVisible]);
+
+  if (isLoading) {
+    console.log("Banner: Showing Spinner");
+    return <Spinner />;
+  }
+
+  if (!isVisible || !bannerData) {
+    console.log("Banner: Not rendering", { isVisible, bannerData });
+    return null;
+  }
+
+  console.log("Banner: Rendering with data", bannerData);
+
+  return (
+    <motion.div
+      ref={bannerRef}
+      className="fixed top-0 left-0 right-0 bg-blue-500/80 backdrop-blur-sm text-white py-3 sm:py-6 z-[1200] shadow-md"
+      style={{
+        maskImage: "linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%)",
+        WebkitMaskImage: "linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%)",
+      }}
+      initial={{ y: -100, opacity: 0 }}
+      animate={{ y: 0, opacity: 1 }}
+      exit={{ y: -100, opacity: 0 }}
+      transition={{ duration: 0.5, ease: "easeOut" }}
+    >
+      <div className="max-w-7xl mx-auto flex items-center justify-between relative pr-10 sm:pr-14">
+        <div className="p-4 sm:p-6">
+          <h3 className="text-sm sm:text-base md:text-lg font-bold text-center">
+            {bannerData.title?.trim() &&
+            !bannerData.title.match(/Image \d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z/)
+              ? bannerData.title
+              : "Banner"}
+          </h3>
+          {bannerData.description && (
+            <p className="text-xs sm:text-sm text-center mt-2">
+              {bannerData.description.length > 100
+                ? bannerData.description.slice(0, 100) + "..."
+                : bannerData.description}
+            </p>
+          )}
+        </div>
+        <button
+          onClick={() => setIsVisible(false)}
+          className="absolute right-2 sm:right-4 bg-blue-600/50 hover:bg-blue-700/70 text-white rounded-full p-1.5 sm:p-2 focus:outline-none focus:ring-2 focus:ring-blue-300 transition-colors"
+          aria-label="Close banner"
+        >
+          <X className="w-5 h-5 sm:w-8 sm:h-8" />
+        </button>
+      </div>
+    </motion.div>
+  );
+}

package/components/addOns/functional/banner/BannerDashboard.tsx

@@ -0,0 +1,283 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { useAuth } from "@clerk/nextjs";
+import { UploadedImage } from "@/lib/types";
+import { GALLERY_COMPLEX } from "../galleries/constants/galleryComplex";
+import Spinner from "@/components/addOns/non-functional/spinner";
+import { SubmitButton } from "@/components/other/button";
+
+interface BannerDashboardProps {
+  onUpdate?: (updatedImages: UploadedImage[]) => void;
+}
+
+export function BannerDashboard({ onUpdate }: BannerDashboardProps) {
+  const { getToken } = useAuth();
+  const [bannerData, setBannerData] = useState<UploadedImage | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [form, setForm] = useState({
+    title: "",
+    description: "",
+    startDate: "",
+    endDate: "",
+  });
+
+  useEffect(() => {
+    const fetchBanner = async () => {
+      setIsLoading(true);
+      try {
+        const response = await fetch(`/api/gallery-data?t=${Date.now()}`, {
+          headers: { "Content-Type": "application/json" },
+          cache: "no-store",
+        });
+        if (response.ok) {
+          const result = await response.json();
+          const images = Array.isArray(result.data)
+            ? result.data.map((item: any) => ({
+                id: Number(item.id) || 0,
+                documentId: item.documentId || "",
+                title: item.title || "Untitled",
+                description: item.description || "",
+                url: item.image?.url
+                  ? item.image.url.startsWith("http")
+                    ? item.image.url
+                    : `${process.env.STRAPI_API_URL}${item.image.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,
+              }))
+            : [];
+          const banner = images.find((image: UploadedImage) => image.banner);
+          setBannerData((prev) =>
+            JSON.stringify(prev) !== JSON.stringify(banner) ? banner : prev
+          );
+          if (banner) {
+            setForm({
+              title: banner.title || "",
+              description: banner.description || "",
+              startDate: banner.startDate
+                ? new Date(banner.startDate).toISOString().slice(0, 10)
+                : "",
+              endDate: banner.endDate
+                ? new Date(banner.endDate).toISOString().slice(0, 10)
+                : "",
+            });
+          }
+        } else {
+          setError("Failed to fetch banner data");
+        }
+      } catch (err) {
+        setError("Error fetching banner data");
+        console.error("BannerDashboard: Fetch Error", err);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    fetchBanner();
+  }, []);
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    if (!bannerData) {
+      setError("No banner image selected");
+      return;
+    }
+    if (!form.startDate || !form.endDate) {
+      setError("Both start date and end date are required");
+      return;
+    }
+    if (new Date(form.startDate) > new Date(form.endDate)) {
+      setError("End date must be after start date");
+      return;
+    }
+    setIsLoading(true);
+    try {
+      const token = await getToken();
+      if (!token) {
+        setError(GALLERY_COMPLEX.ERRORS.AUTHENTICATION_ERROR);
+        console.error("BannerDashboard: No authentication token available", {
+          timestamp: new Date().toISOString(),
+        });
+        return;
+      }
+
+      const formData = new FormData();
+      formData.append("documentId", bannerData.documentId);
+      formData.append("title", form.title);
+      formData.append("description", form.description);
+      formData.append("banner", String(bannerData.banner));
+      formData.append("startDate", new Date(form.startDate).toISOString());
+      formData.append("endDate", new Date(form.endDate).toISOString());
+
+      console.log("Submitting FormData:", Object.fromEntries(formData));
+
+      const response = await fetch("/api/gallery-data", {
+        method: "PUT",
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+        body: formData,
+      });
+
+      if (!response.ok) {
+        const errorData = await response.json();
+        console.error("BannerDashboard: Update failed", {
+          status: response.status,
+          errorData,
+          timestamp: new Date().toISOString(),
+        });
+        if (response.status === 401) {
+          setError(GALLERY_COMPLEX.ERRORS.AUTHENTICATION_ERROR);
+          return;
+        }
+        throw new Error(
+          errorData.error ||
+            GALLERY_COMPLEX.ERRORS.EDIT_FAILED_STATUS.replace(
+              "${response.status}",
+              response.status.toString()
+            )
+        );
+      }
+
+      const { data } = await response.json();
+      if (onUpdate) {
+        onUpdate(data || []);
+      }
+      setBannerData((prev) =>
+        prev
+          ? {
+              ...prev,
+              title: form.title,
+              description: form.description,
+              startDate: form.startDate
+                ? new Date(form.startDate).toISOString()
+                : undefined,
+              endDate: form.endDate
+                ? new Date(form.endDate).toISOString()
+                : undefined,
+              banner: prev.banner,
+            }
+          : prev
+      );
+      setError(null);
+    } catch (err) {
+      console.error("BannerDashboard: Update Error", {
+        error: err instanceof Error ? err.message : "Unknown error",
+        timestamp: new Date().toISOString(),
+      });
+      setError(
+        err instanceof Error ? err.message : GALLERY_COMPLEX.ERRORS.EDIT_FAILED
+      );
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  if (isLoading) {
+    return (
+      <div className="p-4 sm:p-6 bg-gray-800 rounded-lg min-h-[200px] flex items-center justify-center">
+        <Spinner />
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-4 sm:p-6 bg-gray-800 rounded-lg shadow-lg max-w-2xl mx-auto">
+      <h3 className="text-lg sm:text-xl font-bold text-white mb-4">Manage Banner</h3>
+      {error && <p className="text-red-500 text-sm mb-4">{error}</p>}
+      {bannerData ? (
+        <form onSubmit={handleSubmit} className="flex flex-col space-y-4">
+          <div>
+            <label
+              htmlFor="title"
+              className="block text-sm font-medium text-gray-300 mb-1"
+            >
+              Banner Title
+            </label>
+            <input
+              id="title"
+              type="text"
+              value={form.title}
+              onChange={(e) => setForm({ ...form, title: e.target.value })}
+              className="p-2 bg-gray-700 text-white rounded-lg w-full focus:ring-2 focus:ring-blue-500 focus:outline-none text-sm sm:text-base"
+              disabled={isLoading}
+              placeholder="Enter banner title"
+            />
+          </div>
+          <div>
+            <label
+              htmlFor="description"
+              className="block text-sm font-medium text-gray-300 mb-1"
+            >
+              Banner Description
+            </label>
+            <textarea
+              id="description"
+              value={form.description}
+              onChange={(e) => setForm({ ...form, description: e.target.value })}
+              className="p-2 bg-gray-700 text-white rounded-lg w-full focus:ring-2 focus:ring-blue-500 focus:outline-none text-sm sm:text-base"
+              disabled={isLoading}
+              placeholder="Enter banner description"
+              rows={4}
+            />
+          </div>
+          <div>
+            <label
+              htmlFor="start-date"
+              className="block text-sm font-medium text-gray-300 mb-1"
+            >
+              Start Date
+            </label>
+            <input
+              id="start-date"
+              type="date"
+              value={form.startDate}
+              onChange={(e) => setForm({ ...form, startDate: e.target.value })}
+              className="p-2 bg-gray-700 text-white rounded-lg w-full focus:ring-2 focus:ring-blue-500 focus:outline-none text-sm sm:text-base"
+              disabled={isLoading}
+              required
+            />
+          </div>
+          <div>
+            <label
+              htmlFor="end-date"
+              className="block text-sm font-medium text-gray-300 mb-1"
+            >
+              End Date
+            </label>
+            <input
+              id="end-date"
+              type="date"
+              value={form.endDate}
+              onChange={(e) => setForm({ ...form, endDate: e.target.value })}
+              className="p-2 bg-gray-700 text-white rounded-lg w-full focus:ring-2 focus:ring-blue-500 focus:outline-none text-sm sm:text-base"
+              disabled={isLoading}
+              required
+            />
+          </div>
+          <div className="flex justify-end">
+            <SubmitButton
+              type="submit"
+              disabled={isLoading}
+              className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:outline-none disabled:bg-blue-400 text-sm sm:text-base"
+            >
+              {isLoading
+                ? GALLERY_COMPLEX.BUTTONS.SAVING_BUTTON
+                : GALLERY_COMPLEX.BUTTONS.SAVE_BUTTON}
+            </SubmitButton>
+          </div>
+        </form>
+      ) : (
+        <p className="text-gray-400 text-sm sm:text-base">
+          No banner image found. Please upload an image with banner: true in the gallery.
+        </p>
+      )}
+    </div>
+  );
+}