@devvistatech/devvista-kit 0.0.1

package/dist/components/addOns/functional/blogSections/BlogSidebar.jsx

@@ -0,0 +1,35 @@
+"use client";
+import React from "react";
+import Link from "next/link";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/other/card";
+import { BLOG_SIDEBAR } from "./constants/blogSidebar";
+export default function BlogSidebar(_a) {
+    var posts = _a.posts, currentPostId = _a.currentPostId;
+    var otherPosts = posts
+        .filter(function (post) { return post.id !== currentPostId; })
+        .sort(function (a, b) { return new Date(b.publishedAt).getTime() - new Date(a.publishedAt).getTime(); })
+        .slice(0, 5);
+    return (<Card className="w-full max-w-xs min-h-[300px] rounded-2xl border border-gray-700/50 bg-gray-800/50 backdrop-blur-md shadow-lg hover:border-blue-500/50 transition-colors">
+      <CardHeader className="pb-4">
+        <CardTitle className="text-lg font-bold text-white">{BLOG_SIDEBAR.UI.CARD_TITLE}</CardTitle>
+      </CardHeader>
+      <CardContent className="p-6">
+        {otherPosts.length > 0 ? (<ul className="space-y-4">
+            {otherPosts.map(function (post) { return (<li key={post.id}>
+                <Link href={"/blog/".concat(post.id)} className="text-gray-200 hover:text-blue-400 transition-colors">
+                  <span className="font-medium text-blue-300 block truncate">
+                    {post.title}
+                  </span>
+                  <div className="text-sm text-white">
+                    {new Date(post.publishedAt).toLocaleDateString("en-US", {
+                    year: "numeric",
+                    month: "long",
+                    day: "numeric",
+                })}
+                  </div>
+                </Link>
+              </li>); })}
+          </ul>) : (<p className="text-gray-400 text-sm font-medium">{BLOG_SIDEBAR.UI.NO_POSTS_MESSAGE}</p>)}
+      </CardContent>
+    </Card>);
+}

package/dist/components/addOns/functional/blogSections/constants/blogDashboard.js

@@ -0,0 +1,28 @@
+// components/addOns/functional/blogSections/constants/blogDashboard.ts
+// Constants for hardcoded text in BlogDashboard.tsx, organized by purpose
+export var BLOG_DASHBOARD = {
+    // UI Text for BlogDashboard
+    UI: {
+        // Card title
+        CARD_TITLE: "Blog Posts",
+        // Card description
+        CARD_DESCRIPTION: "View and manage your recent blog posts",
+        // Success message for blog post submission
+        SUCCESS_MESSAGE: "Blog post submitted successfully!",
+        // Text when no blog posts exist
+        NO_POSTS_MESSAGE: "No blog posts yet",
+        // Subtext when no blog posts exist
+        NO_POSTS_SUBTEXT: "Submit your first blog post to get started",
+    },
+    // Button Text for BlogDashboard
+    BUTTONS: {
+        // AddButton text
+        ADD_BUTTON: "Add New Post",
+        // EditButton aria-label template
+        EDIT_BUTTON_ARIA: "Edit ${post.title}",
+        // TrashButton aria-label template
+        DELETE_BUTTON_ARIA: "Delete ${post.title}",
+    },
+    // Error Messages for BlogDashboard
+    ERRORS: {}, // No direct errors in JSX
+};

package/dist/components/addOns/functional/blogSections/constants/blogFormPopUp.js

@@ -0,0 +1,97 @@
+// components/addOns/functional/blogSections/constants/blogFormPopUp.ts
+// Constants for hardcoded text in BlogFormPopUp.tsx, organized by purpose
+export var BLOG_FORM_POP_UP = {
+    // UI Text for BlogFormPopUp
+    UI: {
+        // Modal heading when editing
+        EDIT_MODAL_HEADING: "Edit Blog Post",
+        // Modal heading when adding
+        ADD_MODAL_HEADING: "Add New Blog Post",
+        // Label for title input
+        TITLE_LABEL: "Title",
+        // Placeholder for title input
+        TITLE_PLACEHOLDER: "Enter post title",
+        // Title character and word count template
+        TITLE_COUNT_TEXT: "${titleCharCount}/50 characters, ${titleWordCount} words",
+        // Label for author input
+        AUTHOR_LABEL: "Author",
+        // Label for description textarea
+        DESCRIPTION_LABEL: "Description",
+        // Placeholder for description textarea
+        DESCRIPTION_PLACEHOLDER: "Enter post description",
+        // Description character and word count template
+        DESCRIPTION_COUNT_TEXT: "${descriptionCharCount}/1500 characters, ${descriptionWordCount} words",
+        // ToggleButton text when keywords are shown
+        HIDE_KEYWORDS_BUTTON: "Hide Keywords",
+        // ToggleButton text when keywords are hidden
+        SHOW_KEYWORDS_BUTTON: "Show SEO Keywords",
+        // SEO keywords for form
+        SEO_KEYWORDS: [
+            "fitness training",
+            "gym workout plans",
+            "strength exercises",
+            "cardio routines",
+            "weight loss tips",
+            "muscle building",
+            "home workouts",
+            "personal trainer",
+            "fitness motivation",
+            "healthy lifestyle",
+            "gym equipment",
+            "bodybuilding tips",
+            "HIIT workouts",
+            "nutrition for fitness",
+            "exercise routines",
+        ],
+        // Aria-label for keyword list items
+        KEYWORD_ARIA: "Insert keyword: ${keyword}",
+        // Chatbot heading
+        CHATBOT_HEADING: "AI Chatbot is coming soon!",
+        // Chatbot input placeholder
+        CHATBOT_PLACEHOLDER: "Ask for suggestions...",
+        // Delete confirmation modal heading
+        DELETE_MODAL_HEADING: "Confirm Deletion",
+        // Delete confirmation message
+        DELETE_CONFIRMATION_TEXT: "Are you sure you want to delete the post "${postToDelete.title}"? This action cannot be undone.",
+        // System prompt for chatbot
+        CHATBOT_SYSTEM_PROMPT: "You are an AI assistant helping with blog writing and SEO optimization. You are aware of the current blog post's title: \"${formData.title}\", description: \"${formData.description}\", and the following SEO keywords: ${seoKeywords.join(', ')}. Provide suggestions to improve the blog post's SEO, such as keyword usage, content structure, or meta descriptions. Respond concisely and relevantly to user queries.",
+    },
+    // Button Text for BlogFormPopUp
+    BUTTONS: {
+        // UpdateButton text when loading
+        SAVING_BUTTON: "Saving...",
+        // UpdateButton text when editing
+        UPDATE_BUTTON: "Update",
+        // UpdateButton text when adding
+        SUBMIT_BUTTON: "Submit",
+        // CancelButton text
+        CANCEL_BUTTON: "Cancel",
+        // ChatToggleButton aria-label when open
+        CLOSE_CHATBOT_ARIA: "Close AI chatbot",
+        // ChatToggleButton aria-label when closed
+        OPEN_CHATBOT_ARIA: "Open AI chatbot",
+        // DeleteButton text when loading
+        DELETING_BUTTON: "Deleting...",
+        // DeleteButton text
+        DELETE_BUTTON: "Delete",
+    },
+    // Error Messages for BlogFormPopUp
+    ERRORS: {
+        // Error when textarea is not initialized
+        TEXTAREA_NOT_INITIALIZED: "Text area not initialized",
+        // Error when authentication is loading
+        AUTH_LOADING: "Authentication is still loading, please wait...",
+        // Error when not signed in
+        NOT_SIGNED_IN: "You must be signed in to create or edit a blog post",
+        // Warning when business title is missing
+        NO_BUSINESS_TITLE: "Business title not found; using username or default author name",
+        // Error for incomplete form
+        REQUIRED_FIELDS: "Please fill in all required fields",
+        // Error when delete fails
+        DELETE_FAILED: "Failed to delete blog post",
+        // Generic error for delete and submit
+        UNKNOWN_ERROR: "An unknown error occurred",
+        // Error when submit fails
+        SUBMIT_FAILED: "Failed to submit blog post",
+    },
+};

package/dist/components/addOns/functional/blogSections/constants/blogList.js

@@ -0,0 +1,22 @@
+// components/addOns/functional/blogSections/constants/blogList.ts
+// Constants for hardcoded text in BlogList.tsx, organized by purpose
+export var BLOG_LIST = {
+    // UI Text for BlogList
+    UI: {
+        // Card title
+        CARD_TITLE: "Latest Blog Posts",
+        // Card header description
+        CARD_DESCRIPTION: "Discover our latest tips and updates",
+        // Text when no blog posts exist
+        NO_POSTS_MESSAGE: "No blog posts yet. Check back soon for new updates!",
+    },
+    // Button Text for BlogList
+    BUTTONS: {},
+    // Error Messages for BlogList
+    ERRORS: {
+        // Error when fetch fails
+        FETCH_FAILED: "Failed to fetch blog posts",
+        // Generic error for fetch
+        UNKNOWN_ERROR: "An unknown error occurred",
+    },
+};

package/dist/components/addOns/functional/blogSections/constants/blogSidebar.js

@@ -0,0 +1,15 @@
+// components/addOns/functional/blogSections/constants/blogSidebar.ts
+// Constants for hardcoded text in BlogSidebar.tsx, organized by purpose
+export var BLOG_SIDEBAR = {
+    // UI Text for BlogSidebar
+    UI: {
+        // Card title
+        CARD_TITLE: "Other Blog Posts",
+        // Text when no other posts exist
+        NO_POSTS_MESSAGE: "No other posts available.",
+    },
+    // Button Text for BlogSidebar
+    BUTTONS: {},
+    // Error Messages for BlogSidebar
+    ERRORS: {}, // No errors in JSX
+};

package/dist/components/addOns/functional/contactsDashboard/ContactsDashboard.jsx

@@ -0,0 +1,323 @@
+"use client";
+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 React, { useState, useEffect, useCallback } from "react";
+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 { Bar } from "react-chartjs-2";
+import { Chart as ChartJS, CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend, } from "chart.js";
+import { debounce } from "lodash";
+import { CONTACTS_DASHBOARD } from "./constants/contactsDashboard";
+ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend);
+var ContactsDashboard = function () {
+    var _a = useClerkAuth(), isSignedIn = _a.isSignedIn, userId = _a.userId;
+    var session = useSession().session;
+    var _b = useStrapiAuth(), user = _b.user, authLoading = _b.authLoading, authError = _b.error, checkSession = _b.checkSession;
+    var _c = useState([]), contacts = _c[0], setContacts = _c[1];
+    var _d = useState(true), isLoading = _d[0], setIsLoading = _d[1];
+    var _e = useState(null), error = _e[0], setError = _e[1];
+    var _f = useState(3), visibleRows = _f[0], setVisibleRows = _f[1];
+    var _g = useState("all"), selectedYear = _g[0], setSelectedYear = _g[1];
+    var _h = useState([]), availableYears = _h[0], setAvailableYears = _h[1];
+    var _j = useState(0), retryCount = _j[0], setRetryCount = _j[1];
+    var maxRetries = 3;
+    var contactsPerRow = 3;
+    var totalRows = Math.ceil(contacts.length / contactsPerRow);
+    var debouncedCheckSession = useCallback(debounce(function () { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, checkSession()];
+                case 1:
+                    _a.sent();
+                    return [2 /*return*/];
+            }
+        });
+    }); }, 3000), [checkSession]);
+    var fetchContacts = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var token, response, errorData, result, fetchedContacts, validContacts, sortedContacts, years, err_1;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    _a.trys.push([0, 6, 7, 8]);
+                    setIsLoading(true);
+                    return [4 /*yield*/, (session === null || session === void 0 ? void 0 : session.getToken())];
+                case 1:
+                    token = _a.sent();
+                    if (!token) {
+                        throw new Error(CONTACTS_DASHBOARD.ERRORS.NO_TOKEN);
+                    }
+                    return [4 /*yield*/, fetch("/api/contacts", {
+                            headers: {
+                                "Content-Type": "application/json",
+                                Authorization: "Bearer ".concat(token),
+                            },
+                        })];
+                case 2:
+                    response = _a.sent();
+                    if (!!response.ok) return [3 /*break*/, 4];
+                    return [4 /*yield*/, response.json()];
+                case 3:
+                    errorData = _a.sent();
+                    throw new Error(errorData.error || CONTACTS_DASHBOARD.ERRORS.FETCH_FAILED.replace("${response.status}", response.status.toString()));
+                case 4: return [4 /*yield*/, response.json()];
+                case 5:
+                    result = _a.sent();
+                    fetchedContacts = (result.data || []).map(function (contact) { return ({
+                        id: contact.id || 0,
+                        documentId: contact.documentId || "",
+                        name: contact.name || "Unknown",
+                        lastName: contact.lastName || "Unknown",
+                        email: contact.email || "N/A",
+                        phone: contact.phone || "N/A",
+                        subject: contact.subject || "No Subject",
+                        message: contact.message || "No Message",
+                        submissionDate: contact.submissionDate
+                            ? new Date(contact.submissionDate).toLocaleString("en-US", {
+                                dateStyle: "medium",
+                                timeStyle: "short",
+                            })
+                            : "N/A",
+                        rawSubmissionDate: contact.submissionDate || "",
+                    }); });
+                    validContacts = fetchedContacts.filter(function (contact) {
+                        return contact.name !== "Unknown" ||
+                            contact.lastName !== "Unknown" ||
+                            contact.email !== "N/A" ||
+                            contact.phone !== "N/A" ||
+                            contact.subject !== "No Subject" ||
+                            contact.message !== "No Message";
+                    });
+                    sortedContacts = validContacts.sort(function (a, b) {
+                        return b.rawSubmissionDate
+                            ? new Date(b.rawSubmissionDate).getTime() - new Date(a.rawSubmissionDate).getTime()
+                            : 0;
+                    });
+                    years = Array.from(new Set(validContacts
+                        .filter(function (contact) { return contact.rawSubmissionDate; })
+                        .map(function (contact) { return new Date(contact.rawSubmissionDate).getFullYear(); }))).sort(function (a, b) { return b - a; });
+                    setAvailableYears(years);
+                    setContacts(sortedContacts);
+                    if (validContacts.length === 0 && fetchedContacts.length > 0) {
+                        setError(CONTACTS_DASHBOARD.ERRORS.NO_VALID_CONTACTS);
+                    }
+                    return [3 /*break*/, 8];
+                case 6:
+                    err_1 = _a.sent();
+                    setError(err_1 instanceof Error ? err_1.message : CONTACTS_DASHBOARD.ERRORS.UNKNOWN_ERROR);
+                    console.error("ContactsDashboard: Fetch error", err_1);
+                    return [3 /*break*/, 8];
+                case 7:
+                    setIsLoading(false);
+                    return [7 /*endfinally*/];
+                case 8: return [2 /*return*/];
+            }
+        });
+    }); };
+    useEffect(function () {
+        var attemptFetch = function () { return __awaiter(void 0, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                if (authLoading) {
+                    return [2 /*return*/];
+                }
+                if (!isSignedIn || !user) {
+                    setError(authError || CONTACTS_DASHBOARD.ERRORS.UNAUTHORIZED);
+                    setIsLoading(false);
+                    if (retryCount < maxRetries) {
+                        setTimeout(function () {
+                            setRetryCount(function (prev) { return Math.min(prev + 1, maxRetries); });
+                            debouncedCheckSession();
+                        }, Math.min(Math.pow(2, retryCount) * 1000, 10000));
+                    }
+                    return [2 /*return*/];
+                }
+                setRetryCount(0);
+                fetchContacts();
+                return [2 /*return*/];
+            });
+        }); };
+        attemptFetch();
+    }, [isSignedIn, user, authLoading, authError, retryCount, debouncedCheckSession]);
+    var getChartData = function () {
+        var uniqueEmails = new Set();
+        var uniqueContacts = contacts.filter(function (contact) {
+            if (contact.email === "N/A" || uniqueEmails.has(contact.email)) {
+                return false;
+            }
+            uniqueEmails.add(contact.email);
+            return true;
+        });
+        var filteredContacts = selectedYear === "all"
+            ? uniqueContacts
+            : uniqueContacts.filter(function (contact) {
+                return contact.rawSubmissionDate &&
+                    new Date(contact.rawSubmissionDate).getFullYear() === selectedYear;
+            });
+        var leadsByMonth = Array(12).fill(0);
+        filteredContacts.forEach(function (contact) {
+            if (contact.rawSubmissionDate) {
+                var month = new Date(contact.rawSubmissionDate).getMonth();
+                leadsByMonth[month]++;
+            }
+        });
+        return {
+            labels: CONTACTS_DASHBOARD.UI.MONTH_LABELS,
+            datasets: [
+                {
+                    label: "New Leads",
+                    data: leadsByMonth,
+                    backgroundColor: "rgba(59, 130, 246, 0.5)",
+                    borderColor: "rgba(59, 130, 246, 1)",
+                    borderWidth: 1,
+                },
+            ],
+        };
+    };
+    var chartOptions = {
+        responsive: true,
+        plugins: {
+            legend: { position: "top" },
+            title: { display: true, text: CONTACTS_DASHBOARD.UI.CHART_TITLE },
+        },
+        scales: {
+            y: { beginAtZero: true, title: { display: true, text: CONTACTS_DASHBOARD.UI.Y_AXIS_TITLE } },
+            x: { title: { display: true, text: CONTACTS_DASHBOARD.UI.X_AXIS_TITLE } },
+        },
+    };
+    var handleShowMore = function () {
+        setVisibleRows(function (prev) { return prev + 3; });
+    };
+    var handleCloseAll = function () {
+        setVisibleRows(3);
+    };
+    if (authLoading || isLoading) {
+        return <Spinner />;
+    }
+    if (error || authError) {
+        return (<div className="bg-red-900/50 border-l-4 border-red-600 p-4 rounded-lg backdrop-blur-sm text-center">
+        <p className="text-red-300">{error || authError}</p>
+        <button onClick={function () { return __awaiter(void 0, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            setIsLoading(true);
+                            setError(null);
+                            setRetryCount(0);
+                            return [4 /*yield*/, debouncedCheckSession()];
+                        case 1:
+                            _a.sent();
+                            return [4 /*yield*/, fetchContacts()];
+                        case 2:
+                            _a.sent();
+                            return [2 /*return*/];
+                    }
+                });
+            }); }} className="mt-2 bg-blue-600 text-white px-3 py-1 rounded-lg hover:bg-blue-500">
+          {CONTACTS_DASHBOARD.BUTTONS.RETRY_BUTTON}
+        </button>
+      </div>);
+    }
+    return (<section className="bg-gradient-to-br from-blue-600/80 to-gray-800/80 backdrop-blur-md rounded-2xl shadow-lg p-6 border border-blue-500/30 hover:border-blue-400/50 transition-all">
+      <motion.h2 initial={{ opacity: 0, y: -20 }} animate={{ opacity: 1, y: 0 }} className="text-2xl font-bold text-blue-200 mb-6">
+        {CONTACTS_DASHBOARD.UI.SECTION_HEADING}
+      </motion.h2>
+
+      <div className="mb-8">
+        <div className="flex justify-between items-center mb-4">
+          <h3 className="text-lg font-semibold text-blue-200">{CONTACTS_DASHBOARD.UI.CHART_SUBHEADING}</h3>
+          <div>
+            <label htmlFor="yearFilter" className="text-gray-200 mr-2">
+              {CONTACTS_DASHBOARD.UI.YEAR_FILTER_LABEL}
+            </label>
+            <select id="yearFilter" value={selectedYear} onChange={function (e) { return setSelectedYear(e.target.value === "all" ? "all" : Number(e.target.value)); }} className="bg-gray-800 text-gray-200 border border-gray-700 rounded px-2 py-1">
+              <option value="all">{CONTACTS_DASHBOARD.UI.ALL_YEARS_OPTION}</option>
+              {availableYears.map(function (year) { return (<option key={year} value={year}>
+                  {year}
+                </option>); })}
+            </select>
+          </div>
+        </div>
+        <div className="bg-gray-800/50 p-4 rounded-lg">
+          <Bar data={getChartData()} options={chartOptions}/>
+        </div>
+      </div>
+
+      <div>
+        {contacts.length === 0 ? (<p className="text-gray-400 text-center py-4">{CONTACTS_DASHBOARD.UI.NO_CONTACTS_MESSAGE}</p>) : (<>
+            <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+              {contacts.slice(0, visibleRows * contactsPerRow).map(function (contact) { return (<Card key={contact.documentId} className="bg-gray-800/50 backdrop-blur-md border border-gray-700/50 rounded-2xl p-6 flex flex-col">
+                  <h3 className="text-xl font-bold text-blue-200 mb-3">
+                    {contact.name} {contact.lastName}
+                  </h3>
+                  <p className="text-gray-200 font-medium mb-2">
+                    <strong>{CONTACTS_DASHBOARD.UI.EMAIL_LABEL}</strong>{" "}
+                    <a href={"mailto:".concat(contact.email)} className="text-blue-300 hover:underline">
+                      {contact.email}
+                    </a>
+                  </p>
+                  <p className="text-gray-200 font-medium mb-2">
+                    <strong>{CONTACTS_DASHBOARD.UI.PHONE_LABEL}</strong>{" "}
+                    <a href={"tel:".concat(contact.phone)} className="text-blue-300 hover:underline">
+                      {contact.phone}
+                    </a>
+                  </p>
+                  <p className="text-gray-200 font-medium mb-2">
+                    <strong>{CONTACTS_DASHBOARD.UI.SUBJECT_LABEL}</strong> {contact.subject}
+                  </p>
+                  <p className="text-gray-200 font-medium mb-2">
+                    <strong>{CONTACTS_DASHBOARD.UI.MESSAGE_LABEL}</strong> {contact.message}
+                  </p>
+                  <p className="text-gray-200 font-medium">
+                    <strong>{CONTACTS_DASHBOARD.UI.SUBMITTED_LABEL}</strong> {contact.submissionDate}
+                  </p>
+                </Card>); })}
+            </div>
+            <div className="flex gap-4 mt-4">
+              {visibleRows < totalRows && (<button onClick={handleShowMore} className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 transition">
+                  {CONTACTS_DASHBOARD.BUTTONS.SHOW_MORE_BUTTON}
+                </button>)}
+              {visibleRows > 3 && (<button onClick={handleCloseAll} className="bg-gray-500 text-white px-4 py-2 rounded hover:bg-gray-600 transition">
+                  {CONTACTS_DASHBOARD.BUTTONS.CLOSE_ALL_BUTTON}
+                </button>)}
+            </div>
+          </>)}
+      </div>
+    </section>);
+};
+export default ContactsDashboard;

package/dist/components/addOns/functional/contactsDashboard/constants/contactsDashboard.js

@@ -0,0 +1,70 @@
+// components/addOns/functional/contactsDashboard/constants/ContactsDashboard.ts
+// Constants for hardcoded text in ContactsDashboard.tsx, organized by purpose
+export var CONTACTS_DASHBOARD = {
+    // UI Text for ContactsDashboard
+    UI: {
+        // Section heading
+        SECTION_HEADING: "Contact Submissions",
+        // Subheading for chart section
+        CHART_SUBHEADING: "Leads Overview",
+        // Label for year filter select
+        YEAR_FILTER_LABEL: "Filter by Year:",
+        // Option in year filter select
+        ALL_YEARS_OPTION: "All Years",
+        // Chart title
+        CHART_TITLE: "New Leads by Month (Unique Emails)",
+        // Chart y-axis title
+        Y_AXIS_TITLE: "Number of Leads",
+        // Chart x-axis title
+        X_AXIS_TITLE: "Month",
+        // Chart month labels
+        MONTH_LABELS: [
+            "Jan",
+            "Feb",
+            "Mar",
+            "Apr",
+            "May",
+            "Jun",
+            "Jul",
+            "Aug",
+            "Sep",
+            "Oct",
+            "Nov",
+            "Dec",
+        ],
+        // Text when no contacts exist
+        NO_CONTACTS_MESSAGE: "No valid contact submissions found.",
+        // Label for email field
+        EMAIL_LABEL: "Email:",
+        // Label for phone field
+        PHONE_LABEL: "Phone:",
+        // Label for subject field
+        SUBJECT_LABEL: "Subject:",
+        // Label for message field
+        MESSAGE_LABEL: "Message:",
+        // Label for submission date field
+        SUBMITTED_LABEL: "Submitted:",
+    },
+    // Button Text for ContactsDashboard
+    BUTTONS: {
+        // Retry button text
+        RETRY_BUTTON: "Retry",
+        // Show More button text
+        SHOW_MORE_BUTTON: "Show More",
+        // Close All button text
+        CLOSE_ALL_BUTTON: "Close All",
+    },
+    // Error Messages for ContactsDashboard
+    ERRORS: {
+        // Error when token is missing
+        NO_TOKEN: "No JWT token found from Clerk",
+        // Error when fetch fails with status code
+        FETCH_FAILED: "Failed to fetch contacts: ${response.status}",
+        // Generic error for fetch
+        UNKNOWN_ERROR: "An unknown error occurred",
+        // Error when not signed in
+        UNAUTHORIZED: "Unauthorized: Please log in to view the contacts dashboard",
+        // Error when all contacts are invalid
+        NO_VALID_CONTACTS: "No valid contact submissions found. All entries have incomplete data.",
+    },
+};