@devvistatech/devvista-kit 0.0.1

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

@@ -0,0 +1,348 @@
+"use client";
+
+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);
+
+interface Contact {
+  id: number;
+  documentId: string;
+  name: string;
+  lastName: string;
+  email: string;
+  phone: string;
+  subject: string;
+  message: string;
+  submissionDate: string;
+  rawSubmissionDate: string;
+}
+
+const ContactsDashboard: React.FC = () => {
+  const { isSignedIn, userId } = useClerkAuth();
+  const { session } = useSession();
+  const { user, authLoading, error: authError, checkSession } = useStrapiAuth();
+  const [contacts, setContacts] = useState<Contact[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [visibleRows, setVisibleRows] = useState(3);
+  const [selectedYear, setSelectedYear] = useState<number | "all">("all");
+  const [availableYears, setAvailableYears] = useState<number[]>([]);
+  const [retryCount, setRetryCount] = useState(0);
+  const maxRetries = 3;
+
+  const contactsPerRow = 3;
+  const totalRows = Math.ceil(contacts.length / contactsPerRow);
+
+  const debouncedCheckSession = useCallback(
+    debounce(async () => {
+      await checkSession();
+    }, 3000),
+    [checkSession]
+  );
+
+  const fetchContacts = async () => {
+    try {
+      setIsLoading(true);
+      const token = await session?.getToken();
+
+      if (!token) {
+        throw new Error(CONTACTS_DASHBOARD.ERRORS.NO_TOKEN);
+      }
+
+      const response = await fetch("/api/contacts", {
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${token}`,
+        },
+      });
+
+      if (!response.ok) {
+        const errorData = await response.json();
+        throw new Error(errorData.error || CONTACTS_DASHBOARD.ERRORS.FETCH_FAILED.replace("${response.status}", response.status.toString()));
+      }
+
+      const result = await response.json();
+
+      const fetchedContacts: Contact[] = (result.data || []).map((contact: any) => ({
+        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 || "",
+      }));
+
+      const validContacts = fetchedContacts.filter(
+        (contact) =>
+          contact.name !== "Unknown" ||
+          contact.lastName !== "Unknown" ||
+          contact.email !== "N/A" ||
+          contact.phone !== "N/A" ||
+          contact.subject !== "No Subject" ||
+          contact.message !== "No Message"
+      );
+
+      const sortedContacts = validContacts.sort((a, b) =>
+        b.rawSubmissionDate
+          ? new Date(b.rawSubmissionDate).getTime() - new Date(a.rawSubmissionDate).getTime()
+          : 0
+      );
+
+      const years = Array.from(
+        new Set(
+          validContacts
+            .filter((contact) => contact.rawSubmissionDate)
+            .map((contact) => new Date(contact.rawSubmissionDate).getFullYear())
+        )
+      ).sort((a, b) => b - a);
+
+      setAvailableYears(years);
+      setContacts(sortedContacts);
+      if (validContacts.length === 0 && fetchedContacts.length > 0) {
+        setError(CONTACTS_DASHBOARD.ERRORS.NO_VALID_CONTACTS);
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : CONTACTS_DASHBOARD.ERRORS.UNKNOWN_ERROR);
+      console.error("ContactsDashboard: Fetch error", err);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    const attemptFetch = async () => {
+      if (authLoading) {
+        return;
+      }
+
+      if (!isSignedIn || !user) {
+        setError(authError || CONTACTS_DASHBOARD.ERRORS.UNAUTHORIZED);
+        setIsLoading(false);
+        if (retryCount < maxRetries) {
+          setTimeout(() => {
+            setRetryCount((prev) => Math.min(prev + 1, maxRetries));
+            debouncedCheckSession();
+          }, Math.min(Math.pow(2, retryCount) * 1000, 10000));
+        }
+        return;
+      }
+
+      setRetryCount(0);
+      fetchContacts();
+    };
+
+    attemptFetch();
+  }, [isSignedIn, user, authLoading, authError, retryCount, debouncedCheckSession]);
+
+  const getChartData = () => {
+    const uniqueEmails = new Set<string>();
+    const uniqueContacts = contacts.filter((contact) => {
+      if (contact.email === "N/A" || uniqueEmails.has(contact.email)) {
+        return false;
+      }
+      uniqueEmails.add(contact.email);
+      return true;
+    });
+
+    const filteredContacts =
+      selectedYear === "all"
+        ? uniqueContacts
+        : uniqueContacts.filter(
+            (contact) =>
+              contact.rawSubmissionDate &&
+              new Date(contact.rawSubmissionDate).getFullYear() === selectedYear
+          );
+
+    const leadsByMonth = Array(12).fill(0);
+    filteredContacts.forEach((contact) => {
+      if (contact.rawSubmissionDate) {
+        const 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,
+        },
+      ],
+    };
+  };
+
+  const chartOptions = {
+    responsive: true,
+    plugins: {
+      legend: { position: "top" as const },
+      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 } },
+    },
+  };
+
+  const handleShowMore = () => {
+    setVisibleRows((prev) => prev + 3);
+  };
+
+  const handleCloseAll = () => {
+    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={async () => {
+            setIsLoading(true);
+            setError(null);
+            setRetryCount(0);
+            await debouncedCheckSession();
+            await fetchContacts();
+          }}
+          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={(e) => 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((year) => (
+                <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((contact) => (
+                <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:${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:${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/components/addOns/functional/contactsDashboard/constants/contactsDashboard.ts

@@ -0,0 +1,71 @@
+// components/addOns/functional/contactsDashboard/constants/ContactsDashboard.ts
+// Constants for hardcoded text in ContactsDashboard.tsx, organized by purpose
+
+export const 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.",
+  },
+};