@devvistatech/devvista-kit 0.0.12 → 0.0.13

package/components/addOns/functional/{ScheduleCarousel.tsx → carousels/ScheduleCarousel.tsx}

@@ -1,33 +1,82 @@
+// src/components/addOns/functional/carousels/ScheduleCarousel.tsx
 "use client";
 
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef } from "react";
+import { motion } from "framer-motion";
 import { Card } from "@/components/other/card";
+import Spinner from "@/components/addOns/non-functional/spinner";
+import { SCHEDULE_CAROUSEL } from "@/components/addOns/functional/carousels/constants.ts/scheduleCarousel";
 
 interface ScheduleClass {
   name: string;
   startTime: string;
   endTime: string;
+  id?: string;
 }
 
 interface WeeklySchedule {
   [key: string]: ScheduleClass[];
 }
 
-interface ScheduleCarouselProps {
-  weeklySchedule: WeeklySchedule;
-  backgroundImages: string[];
-  error?: string | null;
-}
-
-export function ScheduleCarousel({
-  weeklySchedule,
-  backgroundImages,
-  error,
-}: ScheduleCarouselProps) {
+export function ScheduleCarousel() {
+  const [weeklySchedule, setWeeklySchedule] = useState<WeeklySchedule>({
+    Monday: [], Tuesday: [], Wednesday: [], Thursday: [], Friday: [], Saturday: [], Sunday: [],
+  });
   const [currentDayIndex, setCurrentDayIndex] = useState(0);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const hasFetched = useRef(false);
+
+  const numberToDayKey: { [key: number]: string } = {
+    1: "Monday", 2: "Tuesday", 3: "Wednesday", 4: "Thursday", 5: "Friday", 6: "Saturday", 7: "Sunday",
+  };
+
+  // Fetch schedule data
+  useEffect(() => {
+    if (hasFetched.current) return;
+    hasFetched.current = true;
+
+    const fetchSchedule = async () => {
+      setIsLoading(true);
+      try {
+        const response = await fetch(`/api/schedule?t=${Date.now()}`, {
+          headers: { "Content-Type": "application/json" },
+          cache: "no-store",
+        });
+        if (response.ok) {
+          const result = await response.json();
+          const updatedSchedule: WeeklySchedule = {
+            Monday: [], Tuesday: [], Wednesday: [], Thursday: [], Friday: [], Saturday: [], Sunday: [],
+          };
+          (result.data || []).forEach((event: any) => {
+            event.daysOfWeek.forEach((dayNum: number) => {
+              const dayKey = numberToDayKey[dayNum];
+              if (dayKey && updatedSchedule[dayKey]) {
+                updatedSchedule[dayKey].push({
+                  name: event.title || "Untitled",
+                  startTime: event.startTime || "00:00",
+                  endTime: event.endTime || "00:00",
+                  id: event.id,
+                });
+              }
+            });
+          });
+          setWeeklySchedule(updatedSchedule);
+        } else {
+          throw new Error(SCHEDULE_CAROUSEL.ERRORS.FETCH_SCHEDULE_FAILED);
+        }
+      } catch (err) {
+        setError(err instanceof Error ? err.message : SCHEDULE_CAROUSEL.ERRORS.FETCH_ERROR);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    fetchSchedule();
+  }, []);
 
+  // Preload background images and set up carousel interval
   useEffect(() => {
-    backgroundImages.forEach((image) => {
+    SCHEDULE_CAROUSEL.UI.BACKGROUND_IMAGES.forEach((image) => {
       const img = new Image();
       img.src = image;
     });
@@ -37,41 +86,52 @@ export function ScheduleCarousel({
       setCurrentDayIndex((prev) => (prev === days.length - 1 ? 0 : prev + 1));
     }, 5000);
     return () => clearInterval(interval);
-  }, [weeklySchedule, backgroundImages]);
+  }, [weeklySchedule]);
+
+  const sectionVariants = {
+    hidden: { opacity: 0, y: 20 },
+    visible: { opacity: 1, y: 0, transition: { duration: 0.5, ease: "easeOut" } },
+  };
 
   return (
     <div className="w-full bg-black z-0">
-      <section className="w-full py-16 sm:py-24 px-4 sm:px-8 relative">
-        <style jsx>{`
-          .schedule-background {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background-size: cover;
-            background-position: center;
-            transition: opacity 0.5s ease-in-out;
-            opacity: 0;
-          }
-
-          .schedule-background.active {
-            opacity: 1;
-          }
-
-          .schedule-overlay {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background: rgba(0, 0, 0, 0.3);
-            z-index: 1;
-          }
-        `}</style>
-
+      <style jsx>{`
+        :root {
+          --jubilee: #F47C7C;
+          --exuberant-blue: #FF69B4;
+        }
+        .schedule-background {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          background-size: cover;
+          background-position: center;
+          transition: opacity 0.5s ease-in-out;
+          opacity: 0;
+        }
+        .schedule-background.active {
+          opacity: 1;
+        }
+        .schedule-overlay {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          background: rgba(0, 0, 0, 0.3);
+          z-index: 1;
+        }
+      `}</style>
+      <motion.section
+        variants={sectionVariants}
+        initial="hidden"
+        animate="visible"
+        className="w-full py-16 sm:py-24 px-4 sm:px-8 relative"
+      >
         <div className="absolute inset-0 z-0 w-full h-full">
-          {backgroundImages.map((image, index) => (
+          {SCHEDULE_CAROUSEL.UI.BACKGROUND_IMAGES.map((image, index) => (
             <div
               key={index}
               className={`schedule-background ${index === currentDayIndex ? "active" : ""}`}
@@ -80,9 +140,10 @@ export function ScheduleCarousel({
           ))}
           <div className="schedule-overlay" />
         </div>
-
         <div className="relative z-10 h-[600px] sm:h-[800px] overflow-hidden">
-          {error ? (
+          {isLoading ? (
+            <Spinner />
+          ) : error ? (
             <div
               className="text-center !text-white text-4xl sm:text-5xl font-semibold h-full flex items-center justify-center max-w-full"
               style={{ textShadow: "2px 2px 4px rgba(0, 0, 0, 0.5)" }}
@@ -111,12 +172,11 @@ export function ScheduleCarousel({
                   >
                     {day}
                   </h3>
-
                   <ul className="space-y-6 font-semibold text-center mt-8 max-w-full">
                     {classes.length > 0 ? (
                       classes.map((cls) => (
                         <li
-                          key={`${cls.startTime}-${cls.endTime}`}
+                          key={`${cls.id || `${cls.startTime}-${cls.endTime}`}`}
                           className="text-2xl sm:text-3xl md:text-4xl text-white break-words"
                           style={{
                             textShadow: `
@@ -157,7 +217,7 @@ export function ScheduleCarousel({
                           fontSize: "clamp(1.5rem, 6vw, 2.5rem)",
                         }}
                       >
-                        No classes
+                        {SCHEDULE_CAROUSEL.UI.NO_CLASSES_TEXT}
                       </li>
                     )}
                   </ul>
@@ -166,7 +226,7 @@ export function ScheduleCarousel({
             })()
           )}
         </div>
-      </section>
+      </motion.section>
     </div>
   );
 }

package/components/addOns/functional/carousels/constants.ts/productDescCarousel.ts

@@ -0,0 +1,197 @@
+// constants.ts
+export const ABOUT_PAGE = {
+  UI: {
+    MAIN_HEADING: "About Milton Supply",
+    SUCCESS_STORY_HEADING: "Lorem Ipsum",
+    SUCCESS_STORY_TEXT: `
+      Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
+    `,
+    ADMIN_LOGGED_IN_MESSAGE: "You are logged in as an admin",
+    MODAL_HEADING: "Edit Bio Section",
+    TITLE_LABEL: "Bio Title",
+    TITLE_PLACEHOLDER: "Enter the bio title",
+    IMAGE_LABEL: "Update Image (optional)",
+    SELECTED_IMAGE_TEXT: "Selected: ${formImage.name}",
+    DESCRIPTION_LABEL: "Update Description",
+    DESCRIPTION_PLACEHOLDER: "Enter the bio description",
+    NO_IMAGE_AVAILABLE: "No image available",
+    NO_DESCRIPTION_AVAILABLE: "No bio description available",
+  },
+  BUTTONS: {
+    UPDATE_BUTTON: "Update",
+    SAVING_BUTTON: "Saving...",
+    CANCEL_BUTTON: "Cancel",
+    READ_MORE_BUTTON: "Read More",
+    READ_LESS_BUTTON: "Read Less",
+  },
+  ERRORS: {
+    FETCH_BIO_FAILED: "Failed to fetch bio data: ${response.status}",
+    BIO_NOT_FOUND: "Bio data not found",
+    FETCH_BIO_ERROR: "An error occurred while fetching bio data",
+    UNAUTHORIZED_UPDATE: "Unauthorized: Only admin can update bio data",
+    INVALID_IMAGE_TYPE: "Only JPEG, PNG, or GIF images are allowed",
+    NO_AUTH_TOKEN: "No authentication token available",
+    UPDATE_BIO_FAILED: "Failed to update bio data: ${response.status}",
+    UPDATE_BIO_ERROR: "Failed to update bio data",
+  },
+};
+
+export const ABOUT_SECTION = {
+  UI: {
+    FALLBACK_TITLE: "About Us",
+    FALLBACK_DESCRIPTION: "Welcome to Milton Supply Co. Learn more about our story and mission.",
+    NO_IMAGE_AVAILABLE: "No image available",
+    NO_DESCRIPTION_AVAILABLE: "No description available",
+    ADMIN_LOGGED_IN_MESSAGE: "You are logged in as an admin",
+    MODAL_HEADING: "Edit About Section",
+    TITLE_LABEL: "About Title",
+    TITLE_PLACEHOLDER: "Enter the about title",
+    IMAGE_LABEL: "Update Image (optional)",
+    SELECTED_IMAGE_TEXT: "Selected: ${formImage.name}",
+    DESCRIPTION_LABEL: "Update Description",
+    DESCRIPTION_PLACEHOLDER: "Enter the about description",
+  },
+  BUTTONS: {
+    UPDATE_BUTTON: "Update",
+    SAVING_BUTTON: "Saving...",
+    CANCEL_BUTTON: "Cancel",
+    READ_MORE_BUTTON: "Read More",
+    READ_LESS_BUTTON: "Read Less",
+  },
+  ERRORS: {
+    FETCH_FAILED: "Failed to fetch about data: ${response.status}",
+    FETCH_ERROR: "An error occurred while fetching about data",
+    UNAUTHORIZED_UPDATE: "Unauthorized: Only admin can update about data",
+    INVALID_IMAGE_TYPE: "Only JPEG, PNG, or GIF images are allowed",
+    NO_AUTH_TOKEN: "No authentication token available",
+    UPDATE_FAILED: "Failed to update about data: ${response.status}",
+    UPDATE_ERROR: "Failed to update about data",
+  },
+};
+
+export const GALLERY_PAGE = {
+  UI: {
+    MAIN_HEADING: "Project Gallery",
+    LOADING_MESSAGE: "Loading...",
+    ADMIN_LOGGED_IN_MESSAGE: "You are logged in as an admin.",
+    NO_IMAGES_MESSAGE: "No images available at this time.",
+  },
+  ERRORS: {
+    NO_AUTH_TOKEN: "No authentication token available",
+    FETCH_IMAGES_FAILED: "Failed to load images: ${errorText}",
+    PAGINATION_WARNING: "Warning: Only the first 100 images are displayed. Contact support to view all images.",
+    FETCH_ERROR: "An error occurred while fetching data",
+    NO_FILE_SELECTED: "No file selected",
+    INVALID_FILE_TYPE: "Only JPEG, PNG, or GIF images are allowed",
+    UNAUTHORIZED_UPLOAD: "Unauthorized: Only admins can upload images",
+    AUTHENTICATION_ERROR: "Authentication error. Please log in again.",
+    UPLOAD_IMAGE_FAILED: "Failed to upload image: ${response.status}",
+    UPLOAD_IMAGE_ERROR: "Failed to upload image",
+    UNAUTHORIZED_DELETE: "Unauthorized: Only admins can delete images",
+    DELETE_IMAGE_FAILED: "Failed to delete image: ${response.status}",
+    DELETE_IMAGE_ERROR: "Failed to delete image",
+    ADMIN_CHECK_FAILED: "Failed to verify admin status after multiple attempts",
+  },
+};
+
+export const GALLERY_COMPLEX = {
+  UI: {
+    PHOTOS_TAB: "Photos",
+    VIDEOS_TAB: "Videos",
+    ALL_SUB_TAB: "All",
+    CATEGORY_NONE: "None",
+    CATEGORY_INDOOR: "Indoor",
+    CATEGORY_OUTDOOR: "Outdoor",
+    CATEGORY_COMMERCIAL: "Commercial",
+    CATEGORY_LANDSCAPE_BOULDERS: "Landscape Boulders",
+    CATEGORY_STONE_VENEER: "Stone Veneer",
+    CATEGORY_STONE_CUTTING_TREADS: "Stone Cutting Treads",
+    CATEGORY_MASONRY_TOOLS: "Masonry Tools",
+    CATEGORY_PATIO_STONE: "Patio Stone",
+    CATEGORY_PAVERS_SLABS: "Pavers & Slabs",
+    CATEGORY_BAGGED_CEMENT: "Bagged Cement Products",
+    CATEGORY_SEALERS_ADDITIVES: "Sealers & Additives",
+    CATEGORY_LANDSCAPING_ACCESSORIES: "Landscaping Accessories",
+    CATEGORY_GRAVEL_SAND: "Gravel & Sand",
+    NO_IMAGES_MESSAGE: "No images available for this category.",
+    LOADING_MESSAGE: "Loading gallery data...",
+    ADMIN_LOGGED_IN_MESSAGE: "You are logged in as an admin",
+    DEFAULT_IMAGE_ALT: "Gallery Image",
+    UPLOAD_MODAL_HEADING: "Upload New Image",
+    EDIT_MODAL_HEADING: "Edit Image",
+    DELETE_MODAL_HEADING: "Confirm Delete",
+    DELETE_CONFIRMATION_MESSAGE: "Are you sure you want to delete this image? This action cannot be undone.",
+    CHOOSE_IMAGE_TEXT: "Choose an image",
+    TITLE_PLACEHOLDER: "Enter image title",
+    DESCRIPTION_PLACEHOLDER: "Enter image description",
+  },
+  BUTTONS: {
+    UPLOAD_IMAGE_BUTTON: "Upload Image",
+    LOAD_MORE_BUTTON: "Load More",
+    UPLOAD_BUTTON: "Upload",
+    UPLOADING_BUTTON: "Uploading...",
+    SAVE_BUTTON: "Save",
+    SAVING_BUTTON: "Saving...",
+    DELETE_BUTTON: "Delete",
+    DELETING_BUTTON: "Deleting...",
+    CANCEL_BUTTON: "Cancel",
+  },
+  ERRORS: {
+    UNAUTHORIZED_EDIT: "Unauthorized: Only admins can edit images",
+    UNAUTHORIZED_UPLOAD: "Unauthorized: Only admins can upload images",
+    UNAUTHORIZED_DELETE: "Unauthorized: Only admins can delete images",
+    AUTHENTICATION_ERROR: "Authentication failed. Please log in again.",
+    EDIT_FAILED: "Failed to edit image",
+    EDIT_FAILED_STATUS: "Failed to edit image: ${response.status}",
+    UPLOAD_FAILED: "Failed to upload image",
+    DELETE_FAILED: "Failed to delete image",
+  },
+};
+
+export const PRODUCT_DESC = {
+  UI: {
+    FALLBACK_TITLE: "Product Gallery",
+    NO_IMAGES_MESSAGE: "No images available",
+    NO_DESCRIPTION_MESSAGE: "No description available.",
+    NON_ADMIN_MESSAGE: "You are logged in but do not have admin privileges.",
+    DEFAULT_IMAGE_ALT: "Product Image",
+    UPLOAD_MODAL_HEADING: "Upload New Product Image",
+    EDIT_MODAL_HEADING: "Edit Product Image",
+    DELETE_MODAL_HEADING: "Confirm Deletion",
+    DELETE_CONFIRMATION_MESSAGE: "Are you sure you want to delete this product image?",
+    CHOOSE_IMAGE_LABEL: "Choose Image",
+    SELECTED_IMAGE_TEXT: "Selected: ${formImage.name}",
+    TITLE_LABEL: "Image Title",
+    TITLE_PLACEHOLDER: "Enter image title",
+    DESCRIPTION_LABEL: "Image Description",
+    DESCRIPTION_PLACEHOLDER: "Enter image description",
+    CATEGORY_LABEL: "Category",
+    CATEGORY_NONE: "None",
+    SUBCATEGORY_LABEL: "Subcategory",
+    SUBCATEGORY_PLACEHOLDER: "Enter subcategory (e.g., play-sand)",
+    REPLACE_IMAGE_LABEL: "Replace Image (optional)",
+  },
+  BUTTONS: {
+    UPLOAD_IMAGE_BUTTON: "Upload New Product Image",
+    UPLOAD_BUTTON: "Upload",
+    UPLOADING_BUTTON: "Uploading...",
+    SAVE_BUTTON: "Save",
+    SAVING_BUTTON: "Saving...",
+    DELETE_BUTTON: "Delete",
+    DELETING_BUTTON: "Deleting...",
+    CANCEL_BUTTON: "Cancel",
+  },
+  ERRORS: {
+    NO_AUTH_TOKEN: "Unauthorized: No token provided",
+    AUTHENTICATION_ERROR: "Unauthorized: Session expired. Please log in again.",
+    UNAUTHORIZED_EDIT: "Unauthorized: Only admins can edit images",
+    UNAUTHORIZED_DELETE: "Unauthorized: Only admins can delete images",
+    EDIT_FAILED: "Failed to update image",
+    EDIT_FAILED_STATUS: "Failed to update image (Status: ${response.status})",
+    UPLOAD_FAILED: "Failed to upload image",
+    SUBCATEGORY_EMPTY: "Subcategory cannot be empty",
+    SUBCATEGORY_TOO_LONG: "Subcategory name is too long (max 50 characters)",
+    SUBCATEGORY_INVALID: "Subcategory can only contain letters, numbers, spaces, or hyphens",
+    ADMIN_CHECK_FAILED: "Failed to verify admin status after multiple attempts",
+  },
+};

package/components/addOns/functional/carousels/constants.ts/scheduleCarousel.ts

@@ -0,0 +1,20 @@
+// src/components/addOns/functional/carousels/constants.ts/scheduleCarousel.ts
+export const SCHEDULE_CAROUSEL = {
+  UI: {
+    NO_CLASSES_TEXT: "No classes scheduled for this day",
+    CAROUSEL_TITLE: "Weekly Schedule",
+    BACKGROUND_IMAGES: [
+      "/images/test.png",
+      "/images/test.png",
+      "/images/test.png",
+      "/images/test.png",
+      "/images/test.png",
+      "/images/test.png",
+      "/images/test.png",
+    ],
+  },
+  ERRORS: {
+    FETCH_SCHEDULE_FAILED: "Failed to fetch schedule data",
+    FETCH_ERROR: "An error occurred while fetching the schedule",
+  },
+};

package/components/addOns/functional/contactsDashboard/ContactsDashboard.tsx

@@ -5,7 +5,7 @@ import { Card } from "@/components/other/card";
 import Spinner from "@/components/addOns/non-functional/spinner";
 import { motion } from "framer-motion";
 import { useAuth as useClerkAuth, useSession } from "@clerk/nextjs";
-import { useStrapiAuth } from "@/lib/auth-context";
+import { useStrapiAuth } from "@/lib/auth/auth-context";
 import { Bar } from "react-chartjs-2";
 import {
   Chart as ChartJS,