@devvistatech/devvista-kit 0.0.1

package/dist/components/addOns/functional/ImageDescCarousel.jsx

@@ -0,0 +1,464 @@
+// ImageDescCarousel.tsx
+"use client";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { useState, useEffect, useRef } from "react";
+import { ActionButton, EditIconButton, TrashIconButton, CloseButton, SubmitButton, CancelButton, NextButton, PrevButton, FilterButton, DeleteButton, } from "@/components/other/button";
+import { Card } from "@/components/other/card";
+import Image from "next/image";
+import { Upload, ChevronRight, X } from "lucide-react";
+import { motion, useScroll, useTransform } from "framer-motion";
+var Slideshow = function (_a) {
+    var images = _a.images, altPrefix = _a.altPrefix, currentSlide = _a.currentSlide, setCurrentSlide = _a.setCurrentSlide, isAdmin = _a.isAdmin, handleImageClick = _a.handleImageClick, handleEditImage = _a.handleEditImage, handleDeleteImage = _a.handleDeleteImage;
+    var _b = useState(false), isPaused = _b[0], setIsPaused = _b[1];
+    var slideshowRef = useRef(null);
+    useEffect(function () {
+        if (isPaused || images.length <= 1)
+            return;
+        var interval = setInterval(function () {
+            setCurrentSlide(function (prev) { return (prev + 1) % images.length; });
+        }, 5000);
+        return function () { return clearInterval(interval); };
+    }, [isPaused, images.length, setCurrentSlide]);
+    var goToPrev = function () { return setCurrentSlide(function (prev) { return (prev - 1 + images.length) % images.length; }); };
+    var goToNext = function () { return setCurrentSlide(function (prev) { return (prev + 1) % images.length; }); };
+    if (!images.length || !images[currentSlide]) {
+        return (<Card className="relative h-[40vh] min-h-[400px] sm:h-[50vh] lg:h-[600px] rounded-[1.5rem] overflow-hidden glassmorphism w-full mx-auto max-w-3xl md:max-w-none md:mx-0 flex items-center justify-center" ref={slideshowRef}>
+        <p className="text-gray-600 text-lg">No images available</p>
+      </Card>);
+    }
+    return (<div className="relative h-[40vh] min-h-[400px] sm:h-[50vh] lg:h-[600px] rounded-[1.5rem] overflow-hidden glassmorphism w-full mx-auto max-w-3xl md:max-w-none md:mx-0" ref={slideshowRef} onMouseEnter={function () { return setIsPaused(true); }} onMouseLeave={function () { return setIsPaused(false); }}>
+      <div className="relative w-full h-full cursor-pointer" onClick={function () { return handleImageClick(images[currentSlide]); }}>
+        <Image src={images[currentSlide].url} alt={images[currentSlide].title || altPrefix} fill className="object-cover rounded-[1rem] transition-transform duration-700 hover:scale-110" sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw" loading="lazy" quality={85}/>
+        <div className="absolute inset-0 bg-gradient-to-t from-black/40 to-transparent opacity-0 hover:opacity-100 transition-opacity duration-500"></div>
+        <div className="absolute bottom-4 left-4 text-white opacity-90 transition-opacity duration-500">
+          <span className="text-lg sm:text-xl lg:text-2xl font-semibold drop-shadow-md">
+            {altPrefix}
+          </span>
+        </div>
+        {isAdmin && (<div className="absolute top-2 right-2 flex space-x-2">
+            <EditIconButton onClick={function (e) {
+                e.stopPropagation();
+                handleEditImage(images[currentSlide]);
+            }}/>
+            <TrashIconButton onClick={function (e) {
+                e.stopPropagation();
+                handleDeleteImage(images[currentSlide].documentId);
+            }}/>
+          </div>)}
+      </div>
+      {images.length > 1 && (<>
+          <PrevButton size="icon" onClick={function (e) {
+                e.stopPropagation();
+                goToPrev();
+            }} className="absolute left-4 top-1/2 transform -translate-y-1/2 bg-black/50 hover:bg-black/70 text-white rounded-full w-12 h-12 flex items-center justify-center z-0"/>
+          <NextButton size="icon" onClick={function (e) {
+                e.stopPropagation();
+                goToNext();
+            }} className="absolute right-4 top-1/2 transform -translate-y-1/2 bg-black/50 hover:bg-black/70 text-white rounded-full w-12 h-12 flex items-center justify-center z-0">
+            <ChevronRight className="h-6 w-6"/>
+          </NextButton>
+        </>)}
+    </div>);
+};
+export function ImageDescCarousel(_a) {
+    var _this = this;
+    var _b;
+    var user = _a.user, uploadedImages = _a.uploadedImages, setUploadedImages = _a.setUploadedImages, error = _a.error, setError = _a.setError, isLoading = _a.isLoading, setIsLoading = _a.setIsLoading, handleImageUpload = _a.handleImageUpload, handleDeleteImage = _a.handleDeleteImage;
+    var _c = useState("indoor"), activeTab = _c[0], setActiveTab = _c[1];
+    var _d = useState(0), currentSlide = _d[0], setCurrentSlide = _d[1];
+    var _e = useState(false), isUploadModalOpen = _e[0], setIsUploadModalOpen = _e[1];
+    var _f = useState(false), isEditModalOpen = _f[0], setIsEditModalOpen = _f[1];
+    var _g = useState(false), isConfirmDeleteOpen = _g[0], setIsConfirmDeleteOpen = _g[1];
+    var _h = useState(null), documentIdToDelete = _h[0], setDocumentIdToDelete = _h[1];
+    var _j = useState(null), selectedImage = _j[0], setSelectedImage = _j[1];
+    var _k = useState({ file: null, title: "", description: "", category: "indoor" }), uploadForm = _k[0], setUploadForm = _k[1];
+    var _l = useState({ id: 0, documentId: "", title: "", description: "", category: "indoor", file: null }), editForm = _l[0], setEditForm = _l[1];
+    var _m = useState(false), isSubmitting = _m[0], setIsSubmitting = _m[1];
+    var containerRef = useRef(null);
+    var scrollYProgress = useScroll({
+        target: containerRef,
+        offset: ["start end", "end start"],
+    }).scrollYProgress;
+    var parallaxY = useTransform(scrollYProgress, [0, 1], [0, -50]);
+    var isAdmin = !!(user === null || user === void 0 ? void 0 : user.businessAdminId);
+    var filteredImages = uploadedImages.filter(function (img) { return (img.category || "none") === activeTab; });
+    var handleImageClick = function (image) {
+        setSelectedImage(image);
+        window.dispatchEvent(new CustomEvent("modalStateChange", { detail: { isOpen: true } }));
+    };
+    var handleCloseModal = function () {
+        setSelectedImage(null);
+        window.dispatchEvent(new CustomEvent("modalStateChange", { detail: { isOpen: false } }));
+    };
+    var openEditModal = function (image) {
+        var _a;
+        setEditForm({
+            id: image.id,
+            documentId: image.documentId,
+            title: ((_a = image.title) === null || _a === void 0 ? void 0 : _a.trim()) || "",
+            description: image.description || "",
+            category: image.category && image.category !== "none" ? image.category : "indoor",
+            file: null,
+        });
+        setIsEditModalOpen(true);
+    };
+    var handleCloseEditModal = function () {
+        setIsEditModalOpen(false);
+        setEditForm({ id: 0, documentId: "", title: "", description: "", category: "indoor", file: null });
+    };
+    var handleCloseUploadModal = function () {
+        setIsUploadModalOpen(false);
+        setUploadForm({ file: null, title: "", description: "", category: "indoor" });
+    };
+    var openConfirmDelete = function (documentId) {
+        setDocumentIdToDelete(documentId);
+        setIsConfirmDeleteOpen(true);
+    };
+    var handleConfirmDelete = function () { return __awaiter(_this, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!(documentIdToDelete !== null)) return [3 /*break*/, 2];
+                    return [4 /*yield*/, handleDeleteImage(documentIdToDelete)];
+                case 1:
+                    _a.sent();
+                    setIsConfirmDeleteOpen(false);
+                    setDocumentIdToDelete(null);
+                    _a.label = 2;
+                case 2: return [2 /*return*/];
+            }
+        });
+    }); };
+    var handleCancelDelete = function () {
+        setIsConfirmDeleteOpen(false);
+        setDocumentIdToDelete(null);
+    };
+    var handleEditImage = function (e) { return __awaiter(_this, void 0, void 0, function () {
+        var token, imageId, formData, uploadResponse, uploadResult, payload, response, data, err_1;
+        var _a;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    e.preventDefault();
+                    if (!isAdmin) {
+                        setError("Unauthorized: Only admins can edit images");
+                        return [2 /*return*/];
+                    }
+                    _b.label = 1;
+                case 1:
+                    _b.trys.push([1, 7, 8, 9]);
+                    setIsLoading(true);
+                    setIsSubmitting(true);
+                    token = localStorage.getItem("jwt");
+                    if (!token) {
+                        throw new Error("Unauthorized: No token provided");
+                    }
+                    imageId = void 0;
+                    if (!editForm.file) return [3 /*break*/, 4];
+                    formData = new FormData();
+                    formData.append("file", editForm.file);
+                    return [4 /*yield*/, fetch("/api/gallery-data", {
+                            method: "POST",
+                            headers: { Authorization: "Bearer ".concat(token) },
+                            credentials: "include",
+                            body: formData,
+                        })];
+                case 2:
+                    uploadResponse = _b.sent();
+                    if (!uploadResponse.ok) {
+                        throw new Error("Failed to upload new image");
+                    }
+                    return [4 /*yield*/, uploadResponse.json()];
+                case 3:
+                    uploadResult = _b.sent();
+                    imageId = (_a = uploadResult.data[0]) === null || _a === void 0 ? void 0 : _a.id;
+                    _b.label = 4;
+                case 4:
+                    payload = __assign({ documentId: editForm.documentId, title: editForm.title, description: editForm.description, category: editForm.category }, (imageId && { image: imageId }));
+                    return [4 /*yield*/, fetch("/api/gallery-data", {
+                            method: "PUT",
+                            headers: {
+                                "Content-Type": "application/json",
+                                Authorization: "Bearer ".concat(token),
+                            },
+                            credentials: "include",
+                            body: JSON.stringify(payload),
+                        })];
+                case 5:
+                    response = _b.sent();
+                    if (response.status === 401) {
+                        setError("Session expired. Please log in again.");
+                        localStorage.removeItem("jwt");
+                        setUploadedImages([]);
+                        return [2 /*return*/];
+                    }
+                    if (!response.ok) {
+                        throw new Error("Failed to update image");
+                    }
+                    return [4 /*yield*/, response.json()];
+                case 6:
+                    data = (_b.sent()).data;
+                    setUploadedImages(data);
+                    setIsEditModalOpen(false);
+                    setEditForm({ id: 0, documentId: "", title: "", description: "", category: "indoor", file: null });
+                    return [3 /*break*/, 9];
+                case 7:
+                    err_1 = _b.sent();
+                    setError(err_1 instanceof Error ? err_1.message : "Failed to update image");
+                    return [3 /*break*/, 9];
+                case 8:
+                    setIsLoading(false);
+                    setIsSubmitting(false);
+                    return [7 /*endfinally*/];
+                case 9: return [2 /*return*/];
+            }
+        });
+    }); };
+    var sectionVariants = {
+        hidden: { opacity: 0 },
+        visible: {
+            opacity: 1,
+            transition: { duration: 0.8, ease: [0.16, 1, 0.3, 1], staggerChildren: 0.1 },
+        },
+    };
+    var modalVariants = {
+        hidden: { opacity: 0, y: "100vh" },
+        visible: { opacity: 1, y: 0, transition: { duration: 0.5, ease: [0.16, 1, 0.3, 1] } },
+        exit: { opacity: 0, y: "100vh", transition: { duration: 0.3, ease: "easeIn" } },
+    };
+    return (<div className="w-full">
+      <style jsx>{"\n        :root {\n          --jubilee: #F47C7C;\n          --exuberant-blue: #FF69B4;\n          --modern-purple: #D946EF;\n          --green-primary: #1a3c34;\n        }\n\n        .glassmorphism {\n          background: rgba(255, 255, 255, 0.08);\n          backdrop-filter: blur(10px);\n          border: 2px solid transparent;\n          border-image: linear-gradient(45deg, var(--exuberant-blue), var(--jubilee), var(--modern-purple)) 1;\n          box-shadow: 0 16px 48px rgba(0, 0, 0, 0.1);\n        }\n\n        .modal-form input,\n        .modal-form textarea,\n        .modal-form select {\n          font-size: 0.875rem;\n          padding: 0.5rem;\n          border-radius: 0.375rem;\n          background: #374151;\n          color: #f3f4f6;\n          border: 1px solid #4b5563;\n        }\n\n        .modal-form input:focus,\n        .modal-form textarea:focus,\n        .modal-form select:focus {\n          outline: none;\n          ring: 2px solid #3b82f6;\n        }\n\n        .modal-form button {\n          padding: 0.5rem 1rem;\n          font-size: 0.875rem;\n          border-radius: 0.375rem;\n        }\n\n        .modal-form label {\n          font-size: 0.875rem;\n          color: #d1d5db;\n        }\n\n        @supports not (backdrop-filter: blur(10px)) {\n          .glassmorphism {\n            background: rgba(255, 255, 255, 0.2);\n          }\n        }\n\n        @media (max-width: 768px) {\n          .glassmorphism {\n            backdrop-filter: none;\n            background: rgba(255, 255, 255, 0.2);\n          }\n\n          .modal-form input,\n          .modal-form textarea,\n          .modal-form select {\n            font-size: 0.875rem;\n            padding: 0.5rem;\n            border-radius: 0.375rem;\n          }\n\n          .modal-form button {\n            padding: 0.5rem 1rem;\n            font-size: 0.875rem;\n            border-radius: 0.375rem;\n          }\n\n          .modal-form label {\n            font-size: 0.875rem;\n          }\n\n          .modal-form .flex {\n            flex-direction: column;\n            gap: 0.5rem;\n          }\n\n          .modal-form textarea {\n            min-height: 80px;\n          }\n        }\n\n        @media (max-width: 320px) {\n          .modal-form input,\n          .modal-form textarea,\n          .modal-form select {\n            font-size: 0.75rem;\n            padding: 0.5rem;\n          }\n\n          .modal-form button {\n            padding: 0.5rem 0.75rem;\n            font-size: 0.75rem;\n          }\n\n          .modal-form label {\n            font-size: 0.75rem;\n          }\n        }\n      "}</style>
+
+      {/* Gallery Section */}
+      <motion.section variants={sectionVariants} initial="hidden" whileInView="visible" viewport={{ once: true }} className="relative py-12 sm:py-16 lg:pb-24 w-full bg-gray-50/50 backdrop-blur-sm">
+        <div className="relative z-10 w-full px-4 sm:px-6 lg:px-8">
+          {error && <p className="text-red-600 text-lg text-center mb-8">{error}</p>}
+          {user && !isAdmin && (<p className="text-yellow-600 text-lg text-center mb-8">
+              You are logged in but do not have admin privileges.
+            </p>)}
+          {isAdmin && (<div className="flex justify-center mb-12">
+              <ActionButton onClick={function () { return setIsUploadModalOpen(true); }} className="flex items-center">
+                <Upload className="mr-2 h-4 w-4"/>
+                Upload New Image
+              </ActionButton>
+            </div>)}
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6 sm:gap-8 lg:gap-12 items-start">
+            <div className="h-auto min-h-[600px] glassmorphism p-6 sm:p-8 lg:p-10 rounded-[1.5rem] flex flex-col space-y-4 sm:space-y-6 order-2 max-w-3xl mx-auto md:max-w-none md:mx-0 md:order-1">
+              <h2 className="text-2xl sm:text-3xl lg:text-4xl font-extrabold text-gray-900">
+                {((_b = filteredImages[currentSlide]) === null || _b === void 0 ? void 0 : _b.title) || "Image Gallery"}
+              </h2>
+              <div className="text-sm sm:text-base lg:text-lg text-gray-700">
+                {filteredImages.length > 0 && currentSlide >= 0 && currentSlide < filteredImages.length ? ((filteredImages[currentSlide].description || "")
+            .split("\n")
+            .filter(function (paragraph) { return paragraph.trim() !== ""; })
+            .map(function (paragraph, index) { return (<p key={index} className="mb-4">
+                        {paragraph}
+                      </p>); }) || <p className="mb-4">No description available.</p>) : (<p className="mb-4">No description available.</p>)}
+              </div>
+            </div>
+            <div className="order-1 md:order-2">
+              <Slideshow images={filteredImages} altPrefix="Image Gallery" currentSlide={currentSlide} setCurrentSlide={setCurrentSlide} isAdmin={isAdmin} handleImageClick={handleImageClick} handleEditImage={openEditModal} handleDeleteImage={openConfirmDelete}/>
+              <div className="flex flex-wrap justify-center gap-2 sm:gap-4 mt-6 z-20">
+                {["indoor", "outdoor", "commercial"].map(function (tab) { return (<FilterButton key={tab} isActive={activeTab === tab} onClick={function () {
+                setActiveTab(tab);
+                setCurrentSlide(0);
+            }}>
+                    {tab.charAt(0).toUpperCase() + tab.slice(1)}
+                  </FilterButton>); })}
+              </div>
+            </div>
+          </div>
+        </div>
+      </motion.section>
+
+      {/* Upload Modal */}
+      {isAdmin && isUploadModalOpen && (<motion.div variants={modalVariants} initial="hidden" animate="visible" exit="exit" className="fixed inset-0 bg-black/90 flex items-center justify-center z-[10000] p-4 isolate" onClick={handleCloseUploadModal} aria-modal="true" role="dialog">
+          <div className="relative max-w-5xl w-full mx-4 p-6 bg-gray-800/50 border border-gray-700/50 rounded-lg shadow-lg max-h-[90vh] overflow-y-auto" onClick={function (e) { return e.stopPropagation(); }}>
+            <CloseButton onClick={handleCloseUploadModal}>
+              <X className="h-6 w-6 sm:h-8 sm:w-8"/>
+            </CloseButton>
+
+            <h3 className="text-xl font-bold text-white mb-4">Upload Image</h3>
+            <form onSubmit={function (e) {
+                setIsSubmitting(true);
+                handleImageUpload(e, uploadForm.file, uploadForm.title, uploadForm.description, uploadForm.category).then(function () {
+                    handleCloseUploadModal();
+                    setIsSubmitting(false);
+                });
+            }} className="space-y-4 modal-form">
+              <div>
+                <label htmlFor="image-upload" className="block text-sm font-medium text-gray-300 mb-1">
+                  Choose Image
+                </label>
+                <input type="file" accept="image/jpeg,image/png,image/gif" onChange={function (e) { var _a; return setUploadForm(__assign(__assign({}, uploadForm), { file: ((_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0]) || null })); }} className="w-full p-2 rounded bg-gray-700 text-white border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm" id="image-upload"/>
+                {uploadForm.file && (<p className="mt-2 text-gray-300 text-sm">Selected: {uploadForm.file.name}</p>)}
+              </div>
+              <div>
+                <label htmlFor="image-title" className="block text-sm font-medium text-gray-300 mb-1">
+                  Image Title (optional)
+                </label>
+                <input id="image-title" value={uploadForm.title} onChange={function (e) { return setUploadForm(__assign(__assign({}, uploadForm), { title: e.target.value })); }} placeholder="Enter image title" className="w-full p-2 rounded bg-gray-700 text-white border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"/>
+              </div>
+              <div>
+                <label htmlFor="image-description" className="block text-sm font-medium text-gray-300 mb-1">
+                  Image Description (optional)
+                </label>
+                <textarea id="image-description" value={uploadForm.description} onChange={function (e) { return setUploadForm(__assign(__assign({}, uploadForm), { description: e.target.value })); }} placeholder="Enter image description" className="w-full p-2 rounded bg-gray-700 text-white border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm min-h-[80px]"/>
+              </div>
+              <div>
+                <label htmlFor="image-category" className="block text-sm font-medium text-gray-300 mb-1">
+                  Category
+                </label>
+                <select id="image-category" value={uploadForm.category} onChange={function (e) {
+                return setUploadForm(__assign(__assign({}, uploadForm), { category: e.target.value }));
+            }} className="w-full p-2 rounded bg-gray-700 text-white border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm">
+                  <option value="indoor">Indoor</option>
+                  <option value="outdoor">Outdoor</option>
+                  <option value="commercial">Commercial</option>
+                </select>
+              </div>
+              <div className="flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-3">
+                <SubmitButton type="submit" disabled={isSubmitting || !uploadForm.file}>
+                  {isSubmitting ? "Uploading..." : "Upload"}
+                </SubmitButton>
+                <CancelButton onClick={handleCloseUploadModal}/>
+              </div>
+              {error && <p className="text-red-400 text-sm font-medium">{error}</p>}
+            </form>
+          </div>
+        </motion.div>)}
+
+      {/* Edit Modal */}
+      {isAdmin && isEditModalOpen && (<motion.div variants={modalVariants} initial="hidden" animate="visible" exit="exit" className="fixed inset-0 bg-black/90 flex items-center justify-center z-[10000] p-4 isolate" onClick={handleCloseEditModal} aria-modal="true" role="dialog">
+          <div className="relative max-w-5xl w-full mx-4 p-6 bg-gray-800/50 border border-gray-700/50 rounded-lg shadow-lg max-h-[90vh] overflow-y-auto" onClick={function (e) { return e.stopPropagation(); }}>
+            <CloseButton onClick={handleCloseEditModal}>
+              <X className="h-6 w-6 sm:h-8 sm:w-8"/>
+            </CloseButton>
+            <h3 className="text-xl font-bold text-white mb-4">Edit Image</h3>
+            <form onSubmit={handleEditImage} className="space-y-4 modal-form">
+              <div>
+                <label htmlFor="edit-image" className="block text-sm font-medium text-gray-300 mb-1">
+                  Replace Image (optional)
+                </label>
+                <input id="edit-image" type="file" accept="image/jpeg,image/png,image/gif" onChange={function (e) { var _a; return setEditForm(__assign(__assign({}, editForm), { file: ((_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0]) || null })); }} className="w-full p-2 rounded bg-gray-700 text-white border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"/>
+                {editForm.file && (<p className="mt-2 text-gray-300 text-sm">Selected: {editForm.file.name}</p>)}
+              </div>
+              <div>
+                <label htmlFor="edit-title" className="block text-sm font-medium text-gray-300 mb-1">
+                  Image Title (optional)
+                </label>
+                <input id="edit-title" value={editForm.title} onChange={function (e) { return setEditForm(__assign(__assign({}, editForm), { title: e.target.value })); }} placeholder="Enter image title" className="w-full p-2 rounded bg-gray-700 text-white border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"/>
+              </div>
+              <div>
+                <label htmlFor="edit-description" className="block text-sm font-medium text-gray-300 mb-1">
+                  Image Description (optional)
+                </label>
+                <textarea id="edit-description" value={editForm.description} onChange={function (e) { return setEditForm(__assign(__assign({}, editForm), { description: e.target.value })); }} placeholder="Enter image description" className="w-full p-2 rounded bg-gray-700 text-white border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm min-h-[80px]"/>
+              </div>
+              <div>
+                <label htmlFor="edit-category" className="block text-sm font-medium text-gray-300 mb-1">
+                  Category
+                </label>
+                <select id="edit-category" value={editForm.category} onChange={function (e) {
+                return setEditForm(__assign(__assign({}, editForm), { category: e.target.value }));
+            }} className="w-full p-2 rounded bg-gray-700 text-white border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm">
+                  <option value="indoor">Indoor</option>
+                  <option value="outdoor">Outdoor</option>
+                  <option value="commercial">Commercial</option>
+                </select>
+              </div>
+              <div className="flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-3">
+                <SubmitButton type="submit" disabled={isSubmitting}>
+                  {isSubmitting ? "Saving..." : "Save"}
+                </SubmitButton>
+                <CancelButton onClick={handleCloseEditModal}/>
+              </div>
+              {error && <p className="text-red-400 text-sm font-medium">{error}</p>}
+            </form>
+          </div>
+        </motion.div>)}
+
+      {/* Delete Confirmation Modal */}
+      {isAdmin && isConfirmDeleteOpen && (<motion.div variants={modalVariants} initial="hidden" animate="visible" exit="exit" className="fixed inset-0 bg-black/90 flex items-center justify-center z-[10000] p-4 isolate" onClick={handleCancelDelete} aria-modal="true" role="dialog">
+          <div className="relative max-w-sm w-full mx-4 p-6 bg-gray-800/50 border border-gray-700/50 rounded-lg shadow-lg max-h-[90vh] overflow-y-auto" onClick={function (e) { return e.stopPropagation(); }}>
+            <CloseButton onClick={handleCancelDelete}>
+              <X className="h-6 w-6 sm:h-8 sm:w-8"/>
+            </CloseButton>
+            <h3 className="text-xl font-bold text-white mb-4">Confirm Deletion</h3>
+            <p className="text-gray-300 mb-6">Are you sure you want to delete this image?</p>
+            <div className="flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-3">
+              <DeleteButton onClick={handleConfirmDelete} disabled={isSubmitting}>
+                {isSubmitting ? "Deleting..." : "Delete"}
+              </DeleteButton>
+              <CancelButton onClick={handleCancelDelete}/>
+            </div>
+          </div>
+        </motion.div>)}
+
+      {/* View Image Modal */}
+      {selectedImage && (<motion.div variants={modalVariants} initial="hidden" animate="visible" exit="exit" className="fixed inset-0 bg-black/90 flex items-center justify-center z-[10001] p-2 sm:p-4 isolate" onClick={handleCloseModal} role="dialog" aria-modal="true" aria-labelledby="modal-image">
+          <div className="relative max-w-5xl w-full mx-2 sm:mx-4 max-h-[90vh] bg-gray-800/50 border border-gray-700/50 rounded-2xl shadow-lg overflow-hidden" onClick={function (e) { return e.stopPropagation(); }}>
+            <CloseButton variant="close-form" onClick={handleCloseModal}>
+              <X className="h-6 w-6 sm:h-8 sm:w-8"/>
+            </CloseButton>
+            <div className="relative w-full h-[70vh] sm:h-[80vh]">
+              <Image src={selectedImage.url} alt={selectedImage.title || "Gallery image"} fill className="object-contain rounded-2xl" quality={85}/>
+              {(selectedImage.title || selectedImage.description) && (<div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-3 sm:p-4">
+                  {selectedImage.title && (<h3 className="text-lg sm:text-xl md:text-2xl font-bold text-white drop-shadow-lg">
+                      {selectedImage.title}
+                    </h3>)}
+                  {selectedImage.description && (<p className="text-xs sm:text-sm md:text-base text-gray-200 drop-shadow-md line-clamp-2">
+                      {selectedImage.description}
+                    </p>)}
+                </div>)}
+            </div>
+          </div>
+        </motion.div>)}
+    </div>);
+}

package/dist/components/addOns/functional/NewUserAnalytics.jsx

@@ -0,0 +1,71 @@
+// components/ui/new-users-chart.tsx
+"use client";
+import { Line } from "react-chartjs-2";
+import { Chart as ChartJS, CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend } from "chart.js";
+ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend);
+var formatMonth = function (date) {
+    var year = date.slice(0, 4);
+    var month = parseInt(date.slice(4, 6), 10);
+    return new Date(parseInt(year), month - 1).toLocaleDateString("en-US", { month: "short", year: "numeric" });
+};
+export function NewUsersChart(_a) {
+    var data = _a.data, currentYear = _a.currentYear;
+    var chartData = {
+        labels: data.map(function (row) { return formatMonth(row.date); }),
+        datasets: [
+            {
+                label: "New Users",
+                data: data.map(function (row) { return row.newUsers; }),
+                borderColor: "#34D399",
+                backgroundColor: "rgba(52, 211, 153, 0.5)",
+                tension: 0.1,
+                pointRadius: 3,
+                borderWidth: 2,
+            },
+        ],
+    };
+    var chartOptions = {
+        responsive: true,
+        maintainAspectRatio: false,
+        plugins: {
+            legend: {
+                position: "top",
+                labels: {
+                    color: "#9CA3AF",
+                },
+            },
+            title: {
+                display: false,
+            },
+            tooltip: {
+                backgroundColor: "#1F2937",
+                titleColor: "#E5E7EB",
+                bodyColor: "#E5E7EB",
+            },
+        },
+        scales: {
+            x: {
+                grid: {
+                    display: false,
+                },
+                ticks: {
+                    color: "#9CA3AF",
+                },
+            },
+            y: {
+                grid: {
+                    color: "rgba(255, 255, 255, 0.1)",
+                },
+                ticks: {
+                    color: "#9CA3AF",
+                },
+            },
+        },
+    };
+    return (<section className="bg-gray-800/50 backdrop-blur-md rounded-2xl shadow-lg p-6 border border-gray-700/50 hover:border-blue-500/50 transition-colors">
+      <h2 className="text-2xl font-bold text-blue-200 mb-6">New Users by Month ({currentYear})</h2>
+      {data.length === 0 ? (<p className="text-gray-400 text-center py-4">No data available</p>) : (<div className="h-[300px]">
+          <Line data={chartData} options={chartOptions}/>
+        </div>)}
+    </section>);
+}

package/dist/components/addOns/functional/ScheduleCarousel.jsx

@@ -0,0 +1,68 @@
+"use client";
+import { useState, useEffect } from "react";
+import { Card } from "@/components/other/card";
+export function ScheduleCarousel(_a) {
+    var weeklySchedule = _a.weeklySchedule, backgroundImages = _a.backgroundImages, error = _a.error;
+    var _b = useState(0), currentDayIndex = _b[0], setCurrentDayIndex = _b[1];
+    useEffect(function () {
+        backgroundImages.forEach(function (image) {
+            var img = new Image();
+            img.src = image;
+        });
+        var days = Object.keys(weeklySchedule);
+        var interval = setInterval(function () {
+            setCurrentDayIndex(function (prev) { return (prev === days.length - 1 ? 0 : prev + 1); });
+        }, 5000);
+        return function () { return clearInterval(interval); };
+    }, [weeklySchedule, backgroundImages]);
+    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>{"\n          .schedule-background {\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            background-size: cover;\n            background-position: center;\n            transition: opacity 0.5s ease-in-out;\n            opacity: 0;\n          }\n\n          .schedule-background.active {\n            opacity: 1;\n          }\n\n          .schedule-overlay {\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            background: rgba(0, 0, 0, 0.3);\n            z-index: 1;\n          }\n        "}</style>
+
+        <div className="absolute inset-0 z-0 w-full h-full">
+          {backgroundImages.map(function (image, index) { return (<div key={index} className={"schedule-background ".concat(index === currentDayIndex ? "active" : "")} style={{ backgroundImage: "url(".concat(image, ")") }}/>); })}
+          <div className="schedule-overlay"/>
+        </div>
+
+        <div className="relative z-10 h-[600px] sm:h-[800px] overflow-hidden">
+          {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)" }}>
+              {error}
+            </div>) : ((function () {
+            var days = Object.entries(weeklySchedule);
+            var _a = days[currentDayIndex], day = _a[0], classes = _a[1];
+            return (<Card className="w-full max-w-full p-6 sm:p-10 md:p-16 flex flex-col items-center justify-center h-full overflow-hidden bg-transparent border-none">
+                  <h3 className="text-5xl sm:text-6xl md:text-8xl font-bold text-white text-center tracking-tight" style={{
+                    textShadow: "\n                        -1px -1px 0 #000,\n                        1px -1px 0 #000,\n                        -1px 1px 0 #000,\n                        1px 1px 0 #000,\n                        0 2px 4px rgba(0, 0, 0, 0.4)\n                      ",
+                    fontSize: "clamp(2.5rem, 10vw, 5rem)",
+                }}>
+                    {day}
+                  </h3>
+
+                  <ul className="space-y-6 font-semibold text-center mt-8 max-w-full">
+                    {classes.length > 0 ? (classes.map(function (cls) { return (<li key={"".concat(cls.startTime, "-").concat(cls.endTime)} className="text-2xl sm:text-3xl md:text-4xl text-white break-words" style={{
+                        textShadow: "\n                              -1px -1px 0 #000,\n                              1px -1px 0 #000,\n                              -1px 1px 0 #000,\n                              1px 1px 0 #000,\n                              0 2px 4px rgba(0, 0, 0, 0.4),\n                              2px 2px 10px rgba(0, 0, 0, 0.6)\n                            ",
+                        fontSize: "clamp(1.5rem, 6vw, 2.5rem)",
+                    }}>
+                          <span className="font-semibold text-[#FF69B4]">{cls.name}</span> -{" "}
+                          {new Date("2023-01-01 ".concat(cls.startTime)).toLocaleTimeString("en-US", {
+                        hour: "numeric",
+                        minute: "2-digit",
+                    })}{" "}
+                          to{" "}
+                          {new Date("2023-01-01 ".concat(cls.endTime)).toLocaleTimeString("en-US", {
+                        hour: "numeric",
+                        minute: "2-digit",
+                    })}
+                        </li>); })) : (<li className="text-2xl sm:text-3xl md:text-4xl text-white font-semibold" style={{
+                        textShadow: "\n                            -1px -1px 0 #000,\n                            1px -1px 0 #000,\n                            -1px 1px 0 #000,\n                            1px 1px 0 #000,\n                            0 2px 4px rgba(0, 0, 0, 0.4),\n                            2px 2px 10px rgba(0, 0, 0, 0.6)\n                          ",
+                        fontSize: "clamp(1.5rem, 6vw, 2.5rem)",
+                    }}>
+                        No classes
+                      </li>)}
+                  </ul>
+                </Card>);
+        })())}
+        </div>
+      </section>
+    </div>);
+}